add toast for payments method save

package.json

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

src/app/actions/referralsActions.ts

@@ -253,6 +253,7 @@ export type PayoutMethodFormState = {
 		bankCard?: string | undefined;
 		paymentsType?: 'bank-card' | 'bank-transfer' | 'on-account-balance';
 	} | undefined,
+	success?: boolean,
 	error: Record<string, string | null> | null
 };
 
@@ -288,6 +289,7 @@ export async function addPayoutMethod(
 			previousState: {
 				bankCard
 			},
+			success: false,
 			error: errors
 		};
 	}
@@ -318,6 +320,7 @@ export async function addPayoutMethod(
 					bankCard,
 					paymentsType
 				},
+				success: true,
 				error: null
 			};
 		} else {
@@ -336,6 +339,7 @@ export async function addPayoutMethod(
 				bankCard,
 				paymentsType
 			},
+			success: false,
 			error: errors
 		};
 	}

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

@@ -18,7 +18,7 @@ export default function BankCardInput({ bankCardState, validateHandler, disabled
 	useEffect(() => {
 		if (bankCardState) {
 			if (disabled) {
-				setBankCard(format(bankCardState, {
+				setBankCard(format(bankCardState.slice(-4), {
 					mask: "**** **** **** ____",
 					replacement: { _: /\d/ }
 				}));

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

@@ -7,6 +7,7 @@ import BankCardInput from '@/app/ui/inputs/bank-card-inpit';
 import { addPayoutMethod, PayoutMethodFormState, getPayoutMethods, PayoutMethods } from '@/app/actions/referralsActions';
 import { bankCardFormSchema } from '@/app/actions/definitions';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
 
 export default function SettingReferralProgram() {
 	const [state, formAction, isPending] = useActionState(
@@ -40,7 +41,11 @@ export default function SettingReferralProgram() {
 
 	useEffect(() => {
 		setFormState(state);
+		if (state?.success) {
+			toast.success('success');
 			queryClient.invalidateQueries({ queryKey: ['payoutMethods'] });
+		}
+
 	}, [state]);
 
 	useEffect(() => {