wallet

src/components/common/input.tsx

@@ -11,11 +11,12 @@ type Props = {
     field?: any,
     className?: string,
     value?: string,
-    onChange?: (value: string) => void,
-    disabled?: boolean
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void,
+    disabled?: boolean,
+    max?: number
 }
 
-export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, className, value, onChange, disabled = false }) => {
+export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, className, value, onChange, disabled = false, max }) => {
     const [hidden, setHidden] = useState<boolean>(false)
     const handleHidden = () => setHidden(prev => !prev)
     return (
@@ -30,7 +31,23 @@ export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, clas
             </div>
 
             <div className="maxh-10">
-                <InputComponent ref={field?.ref} {...field} value={value} onChange={onChange || field?.onChange} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} disabled={disabled} />
+                <InputComponent 
+                    ref={field?.ref} 
+                    {...field} 
+                    value={value} 
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        if (onChange) {
+                            onChange(e)
+                        } else if (field?.onChange) {
+                            field.onChange(e)
+                        }
+                    }} 
+                    type={type === "password" && hidden ? "text" : type} 
+                    placeholder={placeholder} 
+                    className={`input-style min-w-full ${className}`} 
+                    disabled={disabled} 
+                    max={max} 
+                />
             </div>
         </div>
     )

src/components/wallet/wallet-address.tsx

@@ -5,17 +5,20 @@ 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 { useMutation, useQueryClient } 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"
+import { filterNumber } from "../../utility/status"
 
 type Props = {
     pending: boolean
+    walletBalance?: number
 }
 
-export const WalletAddress: FC<Props> = ({ pending }) => {
+export const WalletAddress: FC<Props> = ({ pending, walletBalance }) => {
+    const queryClient = useQueryClient()
     const [selectedCard, setSelectedCard] = useState<CardBank | null>(null)
     const { mutate, isPending } = useMutation({
         mutationFn: sendwithdraw,
@@ -43,7 +46,8 @@ export const WalletAddress: FC<Props> = ({ pending }) => {
     }, [cardDetail])
 
     const handleSendWithdraw: SubmitHandler<SendWithdraw> = async () => {
-        console.log(price);
+        const numericPrice = price.replace(/,/g, '')
+        console.log(numericPrice);
 
         await mutate({
             card: {
@@ -51,14 +55,37 @@ export const WalletAddress: FC<Props> = ({ pending }) => {
                 PAN: selectedCard?.PAN,
                 IBAN: selectedCard?.IBAN,
             },
-            amount: +price
+            amount: +numericPrice
         }, {
             onSuccess: (res: any) => {
                 toast.success("درخواست شما با موفقیت ثبت شد")
+                queryClient.invalidateQueries({ queryKey: ["wallet"] })
+                setPrice('')
             },
             onError: (err: any) => handleError(err)
         })
     }
+
+    const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        let value = e.target.value.replace(/,/g, '').replace(/[^0-9]/g, '')
+
+        if (value === '') {
+            setPrice('')
+            return
+        }
+
+        const numValue = parseFloat(value)
+
+        if (!isNaN(numValue) && numValue >= 0) {
+            if (walletBalance && numValue > walletBalance) {
+                const formattedValue = filterNumber(walletBalance)
+                setPrice(formattedValue)
+            } else {
+                const formattedValue = filterNumber(numValue)
+                setPrice(formattedValue)
+            }
+        }
+    }
     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">
@@ -73,7 +100,19 @@ export const WalletAddress: FC<Props> = ({ pending }) => {
                         <>
                             <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" data={userBanks} field={field} />
                             <ErrorComponent show={errors?.card} message={errors?.card?.message} />
-                            <Input placeholder="مبلغ را وارد کنید" value={price} onChange={(e: any) => setPrice(e.target.value)} />
+                            <div className="flex flex-col gap-2">
+                                <Input
+                                    placeholder="مبلغ را وارد کنید"
+                                    value={price}
+                                    onChange={handlePriceChange}
+                                    type="text"
+                                />
+                                {walletBalance && (
+                                    <p className="text-sm text-secondary-text-color">
+                                        حداکثر مبلغ قابل برداشت: <span className="font-medium">{filterNumber(walletBalance)}</span> تومان
+                                    </p>
+                                )}
+                            </div>
                         </>
                     )} />}
 

src/components/wallet/wallet-page.tsx

@@ -38,7 +38,7 @@ export const WalletPage = () => {
     return (
         <div className="flex flex-col gap-y-[30px] w-full">
             <StatusBoxWallet statusData={statusData} isLoading={isLoading} />
-            <WalletAddress pending={data?.data?.pending} />
+            <WalletAddress pending={data?.data?.pending} walletBalance={data?.data?.user?.walletBalance} />
         </div>
     )
 }