complete add new card

2024-08-08 18:13:57 +03:30
parent 7dfe6f8b8c
commit 66e52e079a
14 changed files with 519 additions and 50 deletions
@@ -0,0 +1,69 @@
+import { CardAdd } from "iconsax-react"
+import { DialogComponent } from "../common/dialog"
+import { FC } from "react"
+import { Input } from "../common/input"
+import { Button } from "@headlessui/react"
+import { bankCarts, findBankByPAN } from "../../utility/cart"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { AddNewCartInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { AddNewCardSchema } from "../../schema"
+import { ErrorComponent } from "../common/error"
+
+type Props = {
+    isOpen: boolean,
+    close: () => void
+}
+export const AddNewCardDialog: FC<Props> = ({ isOpen, close }) => {
+    const { handleSubmit, formState: { errors }, control } = useForm<AddNewCartInterface>({
+        resolver: yupResolver(AddNewCardSchema)
+    })
+    const createNewCard: SubmitHandler<AddNewCartInterface> = async (data) => {
+        const finalData: any = {
+            id: bankCarts?.length + 1,
+            bankName: findBankByPAN(data.cartNumber).name,
+            bankPersianName: findBankByPAN(data.cartNumber).name_farsi,
+            cartNumber: data?.cartNumber.toString(),
+            cartOwner: `${data.name} ${data?.family}`,
+            shabaNumber: data?.shabaNumber,
+        }
+        bankCarts.push(finalData)
+        close()
+    }
+    return (
+        <DialogComponent isOpen={isOpen} close={close} title="ایجاد حساب بانکی جدید" subTitle="لطفا اطلاعات را با دقت وارد نمایید" icon={<CardAdd color="#11212D" className="size-[50px]" />}>
+            <form onSubmit={handleSubmit(createNewCard)} className="flex flex-col gap-[42px] mt-9">
+                <div className="w-full flex flex-col gap-6">
+                    <Controller control={control} name="name" render={({ field }) => (
+                        <div>
+                            <Input placeholder="نام صاحب کارت" field={field} className="bg-auth-form" />
+                            <ErrorComponent show={errors.name} message={errors.name?.message} />
+                        </div>
+                    )} />
+                    <Controller control={control} name="family" render={({ field }) => (
+                        <div>
+                            <Input field={field} placeholder="نام خانوادگی صاحب کارت" className="bg-auth-form" />
+                            <ErrorComponent show={errors.family} message={errors.family?.message} />
+                        </div>
+                    )} />
+                    <Controller control={control} name="cartNumber" render={({ field }) => (
+                        <div>
+                            <Input field={field} placeholder="شماره کارت" className="bg-auth-form" />
+                            <ErrorComponent show={errors.cartNumber} message={errors.cartNumber?.message} />
+                        </div>
+                    )} />
+                    <Controller control={control} name="shabaNumber" render={({ field }) => (
+                        <div>
+                            <Input field={field} placeholder="شماره شبا" className="bg-auth-form" />
+                            <ErrorComponent show={errors.shabaNumber} message={errors.shabaNumber?.message} />
+                        </div>
+                    )} />
+                </div>
+                <div className="flex flex-col gap-[6px]">
+                    <Button type="submit" className="w-full bg-primary-color text-white">ایجاد حساب</Button>
+                    <Button onClick={close} className="w-full bg-transparent text-primary-color">لغو</Button>
+                </div>
+            </form>
+        </DialogComponent>
+    )
+}