edit referrals actions

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

@@ -1,17 +1,36 @@
 'use client'
 
 import { useState, ChangeEvent, useEffect } from 'react';
-import { InputMask } from '@react-input/mask';
+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
+	clearCondition?: string | undefined | null;
+	disabled: boolean;
 }
 
-export default function BankCardInput({ bankCardState, validateHandler }: BankCardProps) {
-	const [bankCard, setBankCard] = useState<string | undefined>(bankCardState ? bankCardState : '');
+export default function BankCardInput({ bankCardState, validateHandler, disabled }: BankCardProps) {
+	const [bankCard, setBankCard] = useState<string | undefined>('');
+
+	useEffect(() => {
+		if (bankCardState) {
+			if (disabled) {
+				setBankCard(format(bankCardState, {
+					mask: "**** **** **** ____",
+					replacement: { _: /\d/ }
+				}));
+			} else {
+				setBankCard(format(bankCardState, {
+					mask: "____ ____ ____ ____",
+					replacement: { _: /\d/ }
+				}));
+			}
+
+		}
+	}, [bankCardState, disabled]);
 
 	return (
 		<InputMask
@@ -22,6 +41,7 @@ export default function BankCardInput({ bankCardState, validateHandler }: BankCa
 			mask="____ ____ ____ ____"
 			replacement={{ _: /\d/ }}
 			value={bankCard}
+			disabled={disabled}
 			onChange={(e) => {
 				setBankCard(e.target.value);
 				validateHandler(e);