Untitled
unknown
plain_text
4 months ago
4.8 kB
2
Indexable
'use client'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm } from 'react-hook-form'; import { toast } from 'react-toastify'; import { z } from 'zod'; import { Button } from '@/components/global/button'; import FormField from '@/components/routes/global/form-field'; import { useApiCall } from '@/hooks/global/api-call'; import { useControlModal } from '@/hooks/global/control-modal'; import { APIsendForm } from '@/services/routes/correcting/send-form'; import { TFormField } from '@/types/global/form-field'; import { generateUniqueId } from '@/utils/generate-uniqe-id'; interface IOrderFormProps { price: { speaking: number; writing: number; minimum: number; }; } export const OrderForm = (props: IOrderFormProps) => { // Modal gateway const modalGateway = useControlModal('gateway'); // Form const [callApiSubmitBtn, isLoadingSubmitBtn] = useApiCall(); const formSchema = z.object({ correctType: z.string().min(1, { message: 'نوع را انتخاب کنید' }), quantityCharacter: z.string().min(1, { message: 'تعداد کلمه را بنویسید' }), detail: z.string().min(1, { message: 'توضیحات را بنویسید' }), file: z.any().refine((val) => val?.length > 0, 'فایل را انتخاب کنید'), }); const form = useForm<z.infer<typeof formSchema>>({ resolver: zodResolver(formSchema), defaultValues: { correctType: '', quantityCharacter: '', detail: '', file: undefined, }, }); const formFields: Record<string, TFormField> = { correctType: { type: 'select', label: 'نوع تصحیح', placeholder: 'نوع را انتخاب کنید ...', isRequired: true, controller: form.register('correctType'), options: ['رایتینگ', 'اسپیکینگ'], errorMsg: form.formState.errors.correctType?.message, }, ...(form.watch('correctType').length && { file: { type: 'file', accept: form.watch('correctType') === 'رایتینگ' ? ['.docx', '.doc'] : ['.wav'], label: 'فایل', placeholder: 'فایل ویس را انتخاب کنید ...', isRequired: true, controller: form.register('file'), errorMsg: form.formState.errors.file?.message as string, }, }), quantityCharacter: { type: 'number', label: 'تعداد کلمه', placeholder: 'تعداد کلمه را بنویسید ...', isRequired: true, controller: form.register('quantityCharacter'), errorMsg: form.formState.errors.quantityCharacter?.message, }, detail: { type: 'textarea', label: 'توضیحات', placeholder: ' توضیحات را بنویسید ...', isRequired: true, controller: form.register('detail'), errorMsg: form.formState.errors.detail?.message, }, }; const handleSubmitForm = async () => { // ... }; // Calculate price const calcPrice = () => { const correctType = form.watch('correctType'); const quantityCharacter = Number(form.watch('quantityCharacter')); return ( (correctType === 'رایتینگ' ? props.price.writing : props.price.speaking) * quantityCharacter ); }; return ( <section className="relative flex flex-col gap-3 rounded-xl border bg-white p-5 shadow md:mx-3"> <form onSubmit={form.handleSubmit(handleSubmitForm)} className="flex flex-col items-end gap-2" > {/* Fields */} <div className="flex w-full flex-col gap-2"> {Object.keys(formFields).map((key) => ( <FormField key={generateUniqueId()} {...formFields[key]!} /> ))} </div> {/* Submit btn / Price */} <div className="flex flex-col gap-1"> <div className="flex items-center gap-2"> {/* Price */} {calcPrice() > 0 && ( <div className="flex flex-col"> <span className="text-sm text-gray-600"> مبلغ قابل پرداخت : </span> <span className="font-medium"> {calcPrice().toLocaleString('fa')} هزار تومان </span> </div> )} {/* Submit btn */} <Button disabled={isLoadingSubmitBtn} className="mt-2 h-[42px] w-fit justify-center bg-purple px-5 font-medium" > ثبت سفارش </Button> </div> </div> </form> </section> ); };
Editor is loading...
Leave a Comment