no-copy-frontend/src/app/ui/referral-page/setting-referral-program.tsx

'use client'

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 { bankCardFormSchema } from '@/app/actions/definitions';

export default function SettingReferralProgram() {
	const [state, formAction, isPending] = useActionState(
		addPayoutMethod,
		undefined,
	);

	const [formState, setFormState] = useState<PayoutMethodFormState | undefined>(undefined);
	const [paymentsType, setPaymentsType] = useState('bank-card');
	const t = useTranslations('Global');

	useEffect(() => {
		setFormState(state);
	}, [state]);

	async function validateField(
		fieldName: string,
		value: string,
	) {
		switch (fieldName) {
			case 'bankCard':
				const schema = bankCardFormSchema?.shape[fieldName];
				if (!schema) {
					return { success: true, data: value };
				}

				return schema.safeParse(value);

			default:
				throw new Error(`Unknown field: ${fieldName}`);
		}
	}

	async function onChangeHandler(e: ChangeEvent<HTMLInputElement>): Promise<void> {
		const fieldName = e.target.name;

		const validatedField = await validateField(fieldName, e.target.value);

		if (validatedField.success) {
			setFormState(prevState => {
				if (!prevState?.error || !prevState?.error[fieldName]) {
					return {
						previousState: prevState?.previousState,
						error: {
							server: null
						}
					};
				}

				const { [fieldName]: _, ...newError } = prevState.error;

				return {
					previousState: prevState?.previousState,
					error: {
						...newError,
						server: null
					}
				};
			});
		}
	}

	return (
		<div className="block-wrapper setting-referral-program">

			<div className="section-title">
				{t('referral-program-settings')}
			</div>

			<form
				action={(e) => {
					formAction(e);
				}}
				className="settings-form"
			>
				<div className="settings-form-wrapper">
					<h4>{t('payout-settings')}</h4>

					<div className="form-group">
						<label>{t('preferred-payment-method')}</label>
						<DropDownList
							value={paymentsType}
							translatedValue={
								(() => {
									switch (paymentsType) {
										case 'on-account-balance':
											return t('on-account-balance')
										case 'bank-card':
											return t('bank-card')
										case 'bank-transfer':
											return t('bank-transfer')
									}
								})()
							}
							callBack={setPaymentsType}
						>
							<li value="on-account-balance">
								{t('on-account-balance')}
							</li>
							<li value="bank-card">
								{t('bank-card')}
							</li>
							<li value="bank-transfer">
								{t('bank-transfer')}
							</li>
						</DropDownList>
						<input
							type="hidden"
							id="paymentsType"
							name="paymentsType"
							className={``}
							value={paymentsType}
						/>
					</div>
					{paymentsType === 'bank-card' && (
						<div>
							<h4>
								{t('bank-card-number')}
							</h4>
							<BankCardInput bankCardState={formState?.previousState?.bankCard} validateHandler={onChangeHandler} />
							{formState?.error?.bankCard && (
								<p className="text-sm text-red-500">
									{
										formState?.error?.bankCard.split('&').map((e, index) => {
											return (
												<span key={index}>
													{t(e)}
													<br />
												</span>
											)
										})
									}
								</p>
							)}
						</div>
					)}
					{formState?.error?.server && (
						<p className="text-sm text-red-500 mt-4">
							{t(formState?.error?.server)}
						</p>
					)}
					<button type="submit" className="btn-primary">
						{t('save-changes')}
					</button>
				</div>

				<div className="settings-form-wrapper">
					<h4>{t('notifications')}</h4>

					<div className="checkbox-group">
						<input type="checkbox" name="email_notifications" defaultValue="1" />
						<label>{t('email-notifications-about-new-referrals')}</label>
					</div>
				</div>
			</form>

		</div>
	)
}