add validation message for back card input

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.60.0",
+	"version": "0.61.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/ui/referral-page/setting-referral-program.tsx

@@ -12,7 +12,8 @@ import valid from 'card-validator';
 
 interface cardInfoType {
 	cardType: string,
-	potentiallyValid: boolean
+	potentiallyValid: boolean,
+	cardValid?: boolean
 }
 
 export default function SettingReferralProgram() {
@@ -51,6 +52,7 @@ export default function SettingReferralProgram() {
 		setFormState(state);
 		if (state?.success) {
 			toast.success('success');
+			setIsEditing(false);
 			queryClient.invalidateQueries({ queryKey: ['payoutMethods'] });
 		}
 
@@ -103,10 +105,23 @@ export default function SettingReferralProgram() {
 		if (numberValidation.card) {
 			setCardInfo({
 				cardType: numberValidation.card.type,
-				potentiallyValid: numberValidation.isPotentiallyValid
+				potentiallyValid: numberValidation.isPotentiallyValid,
+				cardValid: true
 			});
 		}
 
+		if (e.target.value.length === 19 && !numberValidation.isValid) {			
+			setCardInfo((prev) => {
+				if (prev) {
+					return {
+						...prev,
+						cardValid: false
+					}
+				}
+				return null;
+			})
+		}
+
 		if (validatedField.success) {
 			setFormState(prevState => {
 				if (!prevState?.error || !prevState?.error[fieldName]) {
@@ -195,8 +210,9 @@ export default function SettingReferralProgram() {
 									bankCardState={defaultCardNumber?.cardNumber}
 									validateHandler={onChangeHandler}
 									disabled={!isEditing}
-									isValid={cardInfo?.potentiallyValid}
+									isValid={cardInfo?.cardValid}
 								/>
+								{/*  */}
 								{cardInfo && (
 									<div
 										className="card-type"
@@ -205,6 +221,13 @@ export default function SettingReferralProgram() {
 									</div>
 								)}
 							</div>
+							{cardInfo?.cardValid === false && (
+								<p className="text-sm text-red-500">
+									<span>
+										{t('bank-card-not-valid')}
+									</span>
+								</p>
+							)}
 							{formState?.error?.bankCard && (
 								<p className="text-sm text-red-500">
 									{
@@ -247,7 +270,7 @@ export default function SettingReferralProgram() {
 								<button
 									type="submit"
 									className="btn-primary"
-									disabled={isPending || !cardInfo?.potentiallyValid}
+									disabled={isPending || !cardInfo?.cardValid}
 								>
 									{t("save-changes")}
 									{isPending && (

src/i18n/messages/en.json

@@ -263,6 +263,7 @@
 		"global-error-title": "Global search error:",
 		"on-account-balance": "On the account balance",
 		"bank-card": "Bank card",
+		"bank-card-not-valid": "The bank card is not valid",
 		"bank-transfer": "Bank transfer",
 		"preferred-payment-method": "Preferred payment method",
 		"referral-program-settings": "Referral program settings",

src/i18n/messages/ru.json

@@ -263,6 +263,7 @@
 		"global-error-title": "Ошибка глобального поиска:",
 		"on-account-balance": "На баланс аккаунта",
 		"bank-card": "Банковская карта",
+		"bank-card-not-valid": "Банковская карта не действительна",
 		"bank-transfer": "Банковский перевод",
 		"preferred-payment-method": "Предпочитаемый способ выплаты",
 		"referral-program-settings": "Настройки реферальной программы",