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,40 @@
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'
+import React, { FC } from 'react'
+
+type Props = {
+    isOpen: boolean,
+    close: () => void,
+    children: React.ReactNode,
+    title: string,
+    subTitle: string,
+    icon: React.ReactNode
+}
+
+export const DialogComponent: FC<Props> = ({ isOpen, children, close, title, subTitle, icon }) => {
+    return (
+        <>
+            <Dialog open={isOpen} as="div" className="relative z-10 focus:outline-none" onClose={close}>
+                <DialogBackdrop className="fixed inset-0 bg-black/30" />
+                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4">
+                        <DialogPanel
+                            transition
+                            className="w-full max-w-md rounded-[40px] bg-white shadow-sm border border-secondary-text-color/10 p-6 backdrop-blur-2xl duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0"
+                        >
+                            <DialogTitle as="h3" className="text-center flex flex-col gap-[18px] items-center justify-center">
+                                <div className="size-[72px] border border-border-color rounded-full flex justify-center items-center">
+                                    {icon}
+                                </div>
+                                <div className="flex flex-col gap-[6px]">
+                                    <p className="font-medium text-[20px] text-primary-text-color">{title}</p>
+                                    <p className="font-normal text-sm text-secondary-text-color">{subTitle}</p>
+                                </div>
+                            </DialogTitle>
+                            {children}
+                        </DialogPanel>
+                    </div>
+                </div>
+            </Dialog>
+        </>
+    )
+}
@@ -1,26 +1,32 @@
 import { Eye, EyeSlash } from "iconsax-react"
 import React, { FC, useState } from "react"
 import { Input as InputComponent } from '@headlessui/react'
+import { findBankByPAN } from "../../utility/cart"
+import clsx from "clsx"

 type Props = {
    type?: React.HTMLInputTypeAttribute,
    placeholder: string,
    icon?: React.ReactNode,
-    field?: any
-    ref?: any
+    field?: any,
+    ref?: any,
+    className?: string
 }

-export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref }) => {
+export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref, className }) => {
    const [hidden, setHidden] = useState<boolean>(false)
    const handleHidden = () => setHidden(prev => !prev)
    return (
        <div className={`relative w-full`}>
-            <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
+            <div className={clsx("absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500", {
+                "top-[14px] left-7": placeholder === "شماره کارت" && field.value
+            })}>
                {type === "password" ?
                    !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
                    : icon}
+                {placeholder === "شماره کارت" && field.value && findBankByPAN(field.value).icon}
            </div>
-            <InputComponent ref={ref} {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style min-w-full" />
+            <InputComponent ref={ref} {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} />
        </div>
    )
 }
@@ -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>
+    )
+}
@@ -1,18 +1,19 @@
 import { Edit, Trash } from "iconsax-react"
-import { formatCartNumber } from "../../utility/cart"
 import { BankCartInterface } from "../../types"
 import { FC } from "react"
+import { findBankByPAN, formatCartNumber } from "../../utility/cart"

 type Props = {
    item: BankCartInterface
 }

 export const BankCart: FC<Props> = ({ item }) => {
+    console.log("item=>", item)
    return (
        <div className="w-full flex flex-col justify-between rounded-[40px] bg-auth-form p-[18px] cursor-pointer bank-bg bg-bank-mehr min-h-[226px]">
            <div className="flex flex-row justify-between items-center">
                <div className="flex flex-row gap-3 items-center">
-                    <img src={`/svgs/banks/icons/${item?.bankName}.svg`} alt={item?.bankName} />
+                    {findBankByPAN(item.cartNumber).icon}
                    <p className="text-lg font-medium text-primary-text-color">بانک {item?.bankPersianName}</p>
                </div>
                <div className="flex flex-row gap-3 items-center">
@@ -20,7 +21,7 @@ export const BankCart: FC<Props> = ({ item }) => {
                    <Edit color="#777577" />
                </div>
            </div>
-            <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(1234567891011121)}</p>
+            <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(item?.cartNumber)}</p>
            <div className="flex flex-row items-center justify-between">
                <p className="text-sm text-secondary-text-color font-medium">{item?.cartOwner}</p>
                <p className="font-medium text-lg text-primary-text-color">IR {item?.shabaNumber}</p>
@@ -1,8 +1,11 @@
 import { Add } from "iconsax-react"
-
-export const CreateNewCart = () => {
+import { FC } from "react"
+type Props = {
+    handleOpenDialog: () => void
+}
+export const CreateNewCart: FC<Props> = ({ handleOpenDialog }) => {
    return (
-        <div className="bg-auth-form w-full h-full flex items-center justify-center rounded-[40px] p-[18px] py-10 cursor-pointer min-h-[226px]">
+        <div className="bg-auth-form w-full h-full flex items-center justify-center rounded-[40px] p-[18px] py-10 cursor-pointer min-h-[226px]" onClick={handleOpenDialog}>
            <div className="flex flex-col gap-6 items-center">
                <div className="size-16 rounded-full flex justify-center items-center bg-secondary-color">
                    <Add color="#11212D" className="size-10" />
@@ -1,14 +1,21 @@
+import { useState } from "react"
 import { BankCartInterface } from "../../types"
 import { bankCarts } from "../../utility/cart"
 import { BankCart } from "./bank-cart"
 import { CreateNewCart } from "./create-new-cart"
+import { AddNewCardDialog } from "./add-new-cart-dialog"

 export const ManagementBankAccounts = () => {
-   
+    const [showDialog, setShowDialog] = useState<boolean>(false)
+    const handleCloseDialog = () => setShowDialog(false)
+    const handleOpenDialog = () => setShowDialog(true)
    return (
-        <div className="w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">
-            <CreateNewCart />
-            {bankCarts?.map((item: BankCartInterface) => <BankCart key={item?.id} item={item} />)}
-        </div>
+        <>
+            <div className="w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">
+                <CreateNewCart handleOpenDialog={handleOpenDialog} />
+                {bankCarts?.map((item: BankCartInterface) => <BankCart key={item?.id} item={item} />)}
+            </div>
+            <AddNewCardDialog isOpen={showDialog} close={handleCloseDialog} />
+        </>
    )
 }