hamid zarghami
85 lines
4.4 KiB
TypeScript
85 lines
4.4 KiB
TypeScript
import { ComboBox } from "../common/combo-box"
|
||
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"
|
||
import { Input } from "../common/input"
|
||
|
||
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 (
|
||
<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 && <Controller control={control} name="card" render={({ field }) => (
|
||
<>
|
||
<ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" data={userBanks} field={field} />
|
||
<ErrorComponent show={errors?.card} message={errors?.card?.message} />
|
||
{/* <Input placeholder="مبلغ را وارد کنید" /> */}
|
||
</>
|
||
)} />}
|
||
</div>
|
||
{!pending && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
|
||
برای درخواست برداشت از حساب، حساب بانکی مورد نظر خود را انتخاب کنید. پس از انتخاب حساب بانکی، مبلغ مورد نظر خود را وارد کرده و درخواست خود را ثبت کنید.
|
||
</p>}
|
||
{pending && <p className="text-lg font-normal text-justify lg:text-wrap">
|
||
{`همکار گرامی
|
||
طبق درخواست قبلی، عملیات واریز به حساب شما در حال اجراست. متاسفانه پیش از تکمیل درخواست، امکان شروع عملیات جدید برای شما وجود ندارد.`}</p>}
|
||
<div className="w-full flex justify-end">
|
||
<ButtonComponent className="w-full min-w-full xl:min-w-min xl:max-w-60" pending={isPending} title={pending ? "لغو درخواست" : "ثبت درخواست"} type="submit" />
|
||
</div>
|
||
</div>
|
||
</form >
|
||
)
|
||
} |