1- import { ArrowRightOutlined , WalletOutlined } from "@ant-design/icons" ;
1+ import { ArrowRightOutlined } from "@ant-design/icons" ;
22import { useMutation , useQuery , useQueryClient } from "@tanstack/react-query" ;
33import {
44 DatePicker ,
@@ -107,8 +107,11 @@ const WalletPage = () => {
107107 const [ searchParams , setSearchParams ] = useSearchParams ( ) ;
108108 const queryClient = useQueryClient ( ) ;
109109
110+ const activeTab = searchParams . get ( "tab" ) ?? "deposits" ;
111+
110112 const [ topUpOpen , setTopUpOpen ] = useState ( false ) ;
111113 const [ amount , setAmount ] = useState < number | null > ( null ) ;
114+ const [ isRedirecting , setIsRedirecting ] = useState ( false ) ;
112115
113116 // Top-up history filters
114117 const [ historyStatus , setHistoryStatus ] = useState < TopUpOrderStatus | undefined > ( undefined ) ;
@@ -141,7 +144,7 @@ const WalletPage = () => {
141144 } else if ( status === "cancelled" ) {
142145 message . warning ( "Top-up cancelled." ) ;
143146 }
144- setSearchParams ( { } , { replace : true } ) ;
147+ setSearchParams ( activeTab !== "deposits" ? { tab : activeTab } : { } , { replace : true } ) ;
145148 } , [ ] ) ;
146149
147150 const { data : wallet , isLoading : walletLoading } = useQuery ( {
@@ -159,6 +162,8 @@ const WalletPage = () => {
159162 const checkoutMutation = useMutation ( {
160163 mutationFn : ( amt : number ) => paymentApi . createTopUpOrder ( amt ) ,
161164 onSuccess : ( data ) => {
165+ setIsRedirecting ( true ) ;
166+ setTopUpOpen ( false ) ;
162167 submitSePayForm ( data ) ;
163168 } ,
164169 onError : ( err : Error ) => {
@@ -171,6 +176,10 @@ const WalletPage = () => {
171176 message . error ( "Minimum top-up amount is 10,000 VND" ) ;
172177 return ;
173178 }
179+ if ( amount > 500_000_000 ) {
180+ message . error ( "Maximum top-up amount is 500,000,000 VND" ) ;
181+ return ;
182+ }
174183 checkoutMutation . mutate ( amount ) ;
175184 } ;
176185
@@ -267,7 +276,8 @@ const WalletPage = () => {
267276
268277 < div style = { { marginTop : "20px" } } >
269278 < button
270- onClick = { ( ) => setTopUpOpen ( true ) }
279+ onClick = { ( ) => ! isRedirecting && setTopUpOpen ( true ) }
280+ disabled = { isRedirecting }
271281 style = { {
272282 padding : "7px 18px" ,
273283 background : "rgba(254,212,105,0.1)" ,
@@ -276,11 +286,12 @@ const WalletPage = () => {
276286 color : "#FED469" ,
277287 fontSize : "13px" ,
278288 fontWeight : 600 ,
279- cursor : "pointer" ,
289+ cursor : isRedirecting ? "not-allowed" : "pointer" ,
280290 fontFamily : "inherit" ,
291+ opacity : isRedirecting ? 0.5 : 1 ,
281292 } }
282293 >
283- Top Up
294+ { isRedirecting ? "Redirecting..." : " Top Up" }
284295 </ button >
285296 </ div >
286297 </ div >
@@ -318,24 +329,25 @@ const WalletPage = () => {
318329 marginBottom : "6px" ,
319330 } }
320331 >
321- Amount (VND)
332+ Amount (1 VND { "->" } 1 USD )
322333 </ div >
323334 < InputNumber
324335 value = { amount }
325336 onChange = { ( val ) => setAmount ( val ) }
326337 min = { 10000 }
338+ max = { 500_000_000 }
327339 step = { 10000 }
328340 formatter = { ( v ) => `${ v } . replace ( / \B (? = ( \d { 3 } ) + (? ! \d ) ) / g, "," ) }
329341 parser = { ( v ) =>
330342 Number ( v ?. replace ( / , / g, "" ) ?? 0 ) as unknown as 10000
331343 }
332344 style = { { width : "100%" } }
333- placeholder = "Minimum 10 ,000 VND"
345+ placeholder = "10,000 – 500,000 ,000 VND"
334346 />
335347 </ div >
336348 < button
337349 onClick = { handleProceedToCheckout }
338- disabled = { checkoutMutation . isPending }
350+ disabled = { checkoutMutation . isPending || isRedirecting }
339351 style = { {
340352 width : "100%" ,
341353 padding : "9px 0" ,
@@ -345,18 +357,19 @@ const WalletPage = () => {
345357 color : "#FED469" ,
346358 fontSize : "14px" ,
347359 fontWeight : 700 ,
348- cursor : checkoutMutation . isPending ? "not-allowed" : "pointer" ,
360+ cursor : ( checkoutMutation . isPending || isRedirecting ) ? "not-allowed" : "pointer" ,
349361 fontFamily : "inherit" ,
350362 } }
351363 >
352- { checkoutMutation . isPending ? "Redirecting..." : "Proceed to Checkout" }
364+ { ( checkoutMutation . isPending || isRedirecting ) ? "Redirecting..." : "Proceed to Checkout" }
353365 </ button >
354366 </ div >
355367 </ Modal >
356368
357369 { /* ── History tabs ─────────────────────────────── */ }
358370 < Tabs
359- defaultActiveKey = "deposits"
371+ activeKey = { activeTab }
372+ onChange = { ( key ) => setSearchParams ( { tab : key } , { replace : true } ) }
360373 style = { { color : "#fff" } }
361374 items = { [
362375 {
0 commit comments