add bank card validation

src/app/ui/inputs/bank-card-inpit.tsx

@@ -3,16 +3,16 @@
 import { useState, ChangeEvent, useEffect } from 'react';
 import { InputMask, format } from '@react-input/mask';
 import styles from '@/app/styles/module/login.module.scss';
-import { PayoutMethods } from '@/app/actions/referralsActions';
 
 interface BankCardProps {
 	bankCardState: string | undefined;
 	validateHandler: (e: ChangeEvent<HTMLInputElement>) => void;
 	clearCondition?: string | undefined | null;
 	disabled: boolean;
+	isValid: boolean | undefined;
 }
 
-export default function BankCardInput({ bankCardState, validateHandler, disabled }: BankCardProps) {
+export default function BankCardInput({ bankCardState, validateHandler, disabled, isValid }: BankCardProps) {
 	const [bankCard, setBankCard] = useState<string | undefined>('');
 
 	useEffect(() => {
@@ -37,7 +37,7 @@ export default function BankCardInput({ bankCardState, validateHandler, disabled
 			type="phone"
 			id="bankCard"
 			name="bankCard"
-			className={`${styles['form-input']}`}
+			className={`${styles['form-input']} ${isValid ? styles['valid-card'] : ''}`}
 			mask="____ ____ ____ ____"
 			replacement={{ _: /\d/ }}
 			value={bankCard}

src/app/ui/payment/secure-payments.tsx

@@ -10,24 +10,6 @@ export default function SecurePayments() {
 			<h3>
 				Безопасные платежи
 			</h3>
-			<div
-				className='flex gap-4'
-			>
-				<button
-					className='btn btn-primary'
-					onClick={async () => {
-						const response = await referralRefill();
-						console.log(response);
-						if (response?.account === 'refill') {
-							toast.success('refill');
-						} else {
-							toast.error(`error refill: ${response?.error?.message_desc}`);
-						}
-					}}
-				>
-					referralRefill
-				</button>
-			</div>
 			<div className="secure-payments-grid">
 				<div className="secure-payments-card">
 					<div className="secure-payments-card-header">

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

@@ -8,6 +8,12 @@ import { addPayoutMethod, PayoutMethodFormState, getPayoutMethods, PayoutMethods
 import { bankCardFormSchema } from '@/app/actions/definitions';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
+import valid from 'card-validator';
+
+interface cardInfoType {
+	cardType: string,
+	potentiallyValid: boolean
+}
 
 export default function SettingReferralProgram() {
 	const [state, formAction, isPending] = useActionState(
@@ -36,6 +42,8 @@ export default function SettingReferralProgram() {
 	const [paymentsType, setPaymentsType] = useState('bank-card');
 	const [defaultCardNumber, setDefaultCardNumber] = useState<PayoutMethods | undefined>(undefined);
 	const [isEditing, setIsEditing] = useState(false);
+	const [cardInfo, setCardInfo] = useState<null | cardInfoType>(null);
+	const [initialCardInfo, setInitialCardInfo] = useState<null | cardInfoType>(null);
 	const queryClient = useQueryClient();
 	const t = useTranslations('Global');
 
@@ -52,6 +60,17 @@ export default function SettingReferralProgram() {
 		if (payoutMethods) {
 			payoutMethods.forEach(e => {
 				if (e.default) {
+					const numberValidation = valid.number(e.cardNumber);
+					if (numberValidation.card) {
+						setCardInfo({
+							cardType: numberValidation.card.type,
+							potentiallyValid: numberValidation.isPotentiallyValid
+						});
+						setInitialCardInfo({
+							cardType: numberValidation.card.type,
+							potentiallyValid: numberValidation.isPotentiallyValid
+						})
+					}
 					setDefaultCardNumber(e);
 				}
 			})
@@ -78,8 +97,15 @@ export default function SettingReferralProgram() {
 
 	async function onChangeHandler(e: ChangeEvent<HTMLInputElement>): Promise<void> {
 		const fieldName = e.target.name;
-
 		const validatedField = await validateField(fieldName, e.target.value);
+		const numberValidation = valid.number(e.target.value);
+
+		if (numberValidation.card) {
+			setCardInfo({
+				cardType: numberValidation.card.type,
+				potentiallyValid: numberValidation.isPotentiallyValid
+			});
+		}
 
 		if (validatedField.success) {
 			setFormState(prevState => {
@@ -162,11 +188,23 @@ export default function SettingReferralProgram() {
 							<h4>
 								{t('bank-card-number')}
 							</h4>
-							<BankCardInput
-								bankCardState={defaultCardNumber?.cardNumber}
-								validateHandler={onChangeHandler}
-								disabled={!isEditing}
-							/>
+							<div
+								className="relative"
+							>
+								<BankCardInput
+									bankCardState={defaultCardNumber?.cardNumber}
+									validateHandler={onChangeHandler}
+									disabled={!isEditing}
+									isValid={cardInfo?.potentiallyValid}
+								/>
+								{cardInfo && (
+									<div
+										className="card-type"
+									>
+										{cardInfo.cardType}
+									</div>
+								)}
+							</div>
 							{formState?.error?.bankCard && (
 								<p className="text-sm text-red-500">
 									{
@@ -199,7 +237,8 @@ export default function SettingReferralProgram() {
 									className="btn-primary"
 									disabled={isPending}
 									onClick={() => {
-										setIsEditing(false)
+										setIsEditing(false);
+										setCardInfo(initialCardInfo);
 									}}
 								>
 									{t('cancel')}
@@ -208,7 +247,7 @@ export default function SettingReferralProgram() {
 								<button
 									type="submit"
 									className="btn-primary"
-									disabled={isPending}
+									disabled={isPending || !cardInfo?.potentiallyValid}
 								>
 									{t("save-changes")}
 									{isPending && (