add bank card validation

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 && (