complete asan service gps

2024-09-03 16:29:35 +03:30
parent 10a6a746ed
commit 00835e3733
28 changed files with 693 additions and 284 deletions
@@ -1,21 +1,72 @@
-import { Button } from "@headlessui/react"
 import { ComboBox } from "../common/combo-box"
-import { FC } from "react"
+import { FC, useEffect, useState } from "react"
+import { useUserStore } from "../../store/user"
+import { ButtonComponent } from "../common/button"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { CardBank, SendWithdraw } from "../../types"
+import { ErrorComponent } from "../common/error"
+import { useMutation } from "@tanstack/react-query"
+import { sendwithdraw } from "../../services/api/wallet"
+import toast from "react-hot-toast"
+import { handleError } from "../../utility/error-handle"

 type Props = {
    pending: boolean
 }

 export const WalletAddress: FC<Props> = ({ pending }) => {
+    const [selectedCard, setSelectedCard] = useState<CardBank | null>(null)
+    const { mutate, isPending } = useMutation({
+        mutationFn: sendwithdraw,
+        mutationKey: ["withdraw"]
+    })
+    const { handleSubmit, formState: { errors }, control, watch } = useForm<any>({
+    })
+    const cardDetail: any = watch("card")
+    const [userBanks, setUserBanks] = useState<any>([])
+    const { user } = useUserStore()
+    useEffect(() => {
+        const tempUserBanks: any = [...userBanks]
+        user?.cardBank?.map((cards: any) => tempUserBanks.push({
+            id: cards?.IBAN,
+            name: cards?.PAN,
+        }))
+        setUserBanks(tempUserBanks)
+
+    }, [user])
+    useEffect(() => {
+        const selectedCard: CardBank | CardBank[] | [] = user?.cardBank?.filter((cardBanks: any) => cardBanks?.IBAN === cardDetail?.id && cardBanks?.PAN === cardDetail?.name)
+        setSelectedCard(selectedCard?.[0])
+    }, [cardDetail])
+    const handleSendWithdraw: SubmitHandler<SendWithdraw> = async () => {
+        await mutate({
+            card: {
+                holderName: selectedCard?.holderName,
+                PAN: selectedCard?.PAN,
+                IBAN: selectedCard?.IBAN
+            }
+        }, {
+            onSuccess: (res: any) => {
+                toast.success("درخواست شما با موفقیت ثبت شد")
+            },
+            onError: (err: any) => handleError(err)
+        })
+    }
    return (
-        <div className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
+        <form onSubmit={handleSubmit(handleSendWithdraw)} className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
            <div className="w-full h-full flex items-center justify-center">
                <img src="/svgs/dashboard/wallet.svg" alt="wallet" className="size-full max-w-[500px] max-h-[500px]" />
            </div>
            <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
                <div className="flex flex-col gap-10">
                    <p className="text-2xl font-medium text-primary-text-color">ثبت درخواست برداشت از حساب</p>
-                    {!pending && <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" />}
+
+                    {!pending && <Controller control={control} name="card" render={({ field }) => (
+                        <>
+                            <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" data={userBanks} field={field} />
+                            <ErrorComponent show={errors?.card} message={errors?.card?.message} />
+                        </>
+                    )} />}
                </div>
                {!pending && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
@@ -24,9 +75,9 @@ export const WalletAddress: FC<Props> = ({ pending }) => {
                    {`همکار گرامی
                    طبق درخواست قبلی، عملیات واریز مبلغ 765,975 تومان به حساب شما در حال اجراست. متاسفانه پیش از تکمیل درخواست، امکان شروع عملیات جدید برای شما وجود ندارد.`}</p>}
                <div className="w-full flex justify-end">
-                    <Button className="w-full min-w-full xl:min-w-min xl:max-w-60">{pending ? "لغو درخواست" : "ثبت درخواست"}</Button>
+                    <ButtonComponent className="w-full min-w-full xl:min-w-min xl:max-w-60" pending={isPending} title={pending ? "لغو درخواست" : "ثبت درخواست"} type="submit" />
                </div>
            </div>
-        </div>
+        </form >
    )
 }