edit referrals actions

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

@@ -4,8 +4,9 @@ import DropDownList from '@/app/components/DropDownList';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useState, useActionState, useEffect } from 'react';
 import BankCardInput from '@/app/ui/inputs/bank-card-inpit';
-import { addPayoutMethod, PayoutMethodFormState } from '@/app/actions/referralsActions';
+import { addPayoutMethod, PayoutMethodFormState, getPayoutMethods, PayoutMethods } from '@/app/actions/referralsActions';
 import { bankCardFormSchema } from '@/app/actions/definitions';
+import { useQuery } from '@tanstack/react-query';
 
 export default function SettingReferralProgram() {
 	const [state, formAction, isPending] = useActionState(
@@ -13,14 +14,43 @@ export default function SettingReferralProgram() {
 		undefined,
 	);
 
+	const {
+		data: payoutMethods,
+		error
+	} = useQuery({
+		queryKey: ['payoutMethods'],
+		queryFn: () => {
+			return getPayoutMethods();
+		},
+		select: (data) => {
+			if (data?.methods) {
+				return data?.methods
+			} else {
+				return []
+			};
+		}
+	});
+
 	const [formState, setFormState] = useState<PayoutMethodFormState | undefined>(undefined);
 	const [paymentsType, setPaymentsType] = useState('bank-card');
+	const [defaultCardNumber, setDefaultCardNumber] = useState<PayoutMethods | undefined>(undefined);
+	const [isEditing, setIsEditing] = useState(false);
 	const t = useTranslations('Global');
 
 	useEffect(() => {
 		setFormState(state);
 	}, [state]);
 
+	useEffect(() => {
+		if (payoutMethods) {
+			payoutMethods.forEach(e => {
+				if (e.default) {
+					setDefaultCardNumber(e);
+				}
+			})
+		}
+	}, [payoutMethods])
+
 	async function validateField(
 		fieldName: string,
 		value: string,
@@ -125,7 +155,11 @@ export default function SettingReferralProgram() {
 							<h4>
 								{t('bank-card-number')}
 							</h4>
-							<BankCardInput bankCardState={formState?.previousState?.bankCard} validateHandler={onChangeHandler} />
+							<BankCardInput
+								bankCardState={defaultCardNumber?.cardNumber}
+								validateHandler={onChangeHandler}
+								disabled={!isEditing}
+							/>
 							{formState?.error?.bankCard && (
 								<p className="text-sm text-red-500">
 									{
@@ -147,9 +181,50 @@ export default function SettingReferralProgram() {
 							{t(formState?.error?.server)}
 						</p>
 					)}
-					<button type="submit" className="btn-primary">
-						{t('save-changes')}
-					</button>
+
+					{
+						isEditing ? (
+							<div
+								className='flex gap-4'
+							>
+								<button
+									type="button"
+									className="btn-primary"
+									disabled={isPending}
+									onClick={() => {
+										setIsEditing(false)
+									}}
+								>
+									{t('cancel')}
+								</button>
+
+								<button
+									type="submit"
+									className="btn-primary"
+									disabled={isPending}
+								>
+									{t("save-changes")}
+									{isPending && (
+										<div className="loading-animation">
+											<div className="global-spinner"></div>
+										</div>
+									)}
+								</button>
+							</div>
+						) : (
+							<button
+								type="button"
+								className="btn-primary"
+								disabled={isPending}
+								onClick={() => {
+									setIsEditing(true)
+								}}
+							>
+								Изменить
+							</button>
+						)
+					}
+
 				</div>
 
 				<div className="settings-form-wrapper">