wallet

package-lock.json

@@ -4329,112 +4329,6 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -7708,16 +7602,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",

src/components/common/input.tsx

@@ -11,11 +11,12 @@ type Props = {
     field?: any,
     className?: string,
     value?: string,
-    onChange?: (value: string) => void,
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void,
-    disabled?: boolean
+    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>
     )
 }

tsconfig.json

@@ -9,6 +9,7 @@
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
+    "sourceMap": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,