From e0e8a533a215b7f78e251d5499484a1b1f9d3c8c Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Date: Thu, 24 Aug 2023 19:38:11 +0800 Subject: [PATCH] fix(cashier): :bug: fix fiat withdrawal issue on mobile (#9798) * fix(cashier): :bug: fix * fix(cashier): :bug: fix * fix(cashier): :bug: fix * fix(cashier): :bug: fix * fix(cashier): :bug: fix * fix(cashier): :bug: fix * fix(cashier): :bug: fix --------- Co-authored-by: Farzin Mirzaie --- .../src/containers/cashier/cashier.tsx | 203 +++++++++--------- ...posit-crypto-side-note-try-fiat-onramp.tsx | 3 +- .../src/pages/withdrawal/withdrawal.tsx | 5 + packages/cashier/src/stores/general-store.ts | 9 +- packages/cashier/src/stores/withdraw-store.ts | 4 +- .../components/vertical-tab/vertical-tab.tsx | 2 +- 6 files changed, 116 insertions(+), 110 deletions(-) diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx index fdd9e748174f..0ac4f5cb5f64 100644 --- a/packages/cashier/src/containers/cashier/cashier.tsx +++ b/packages/cashier/src/containers/cashier/cashier.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback, useEffect, useMemo } from 'react'; import { RouteComponentProps } from 'react-router'; import { withRouter } from 'react-router-dom'; import { @@ -50,7 +50,7 @@ type TCashierOptions = { const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => { const { common, ui, client } = useStore(); - const { withdraw, general_store, payment_agent, transaction_history } = useCashierStore(); + const { withdraw, general_store, payment_agent } = useCashierStore(); const { error } = withdraw; const { is_cashier_onboarding, @@ -61,7 +61,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier cashier_route_tab_index: tab_index, setActiveTab, } = general_store; - const { is_crypto_transactions_visible } = transaction_history; const { data: is_payment_agent_transfer_visible, isLoading: is_payment_agent_checking, @@ -80,42 +79,8 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier isLoading: is_p2p_enabled_loading, } = useIsP2PEnabled(); - React.useEffect(() => { - toggleCashier(); - // we still need to populate the tabs shown on cashier - return () => { - toggleCashier(); - }; - }, [toggleCashier]); - - React.useEffect(() => { - (async () => { - await WS?.wait('authorize'); - if (is_logged_in) { - onMount(); - setAccountSwitchListener(); - } - })(); - }, [is_logged_in, onMount, setAccountSwitchListener]); - - React.useEffect(() => { - if ( - is_payment_agent_transfer_visible_is_success && - !is_payment_agent_transfer_visible && - history.location.pathname === routes.cashier_pa_transfer - ) { - history.push(routes.cashier_deposit); - } - }, [history, is_payment_agent_transfer_visible, is_payment_agent_transfer_visible_is_success]); - - React.useEffect(() => { - if (is_p2p_enabled_success && !is_p2p_enabled && history.location.pathname.startsWith(routes.cashier_p2p)) { - history.push(routes.cashier_deposit); - } - }, [history, is_p2p_enabled, is_p2p_enabled_success]); - const onClickClose = () => history.push(routes.traders_hub); - const getMenuOptions = () => { + const getMenuOptions = useMemo(() => { const options: TCashierOptions[] = []; routes_config.forEach(route => { if ( @@ -135,7 +100,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier path: route.path, // Set to true to create the 3-column effect without passing any content. If there is content, the content should be passed in. has_side_note: - !is_crypto_transactions_visible && route.path !== routes.cashier_deposit && route.path !== routes.cashier_withdrawal && route.path !== routes.cashier_p2p, @@ -144,17 +108,102 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier }); return options; - }; + }, [ + is_account_transfer_visible, + is_onramp_visible, + is_p2p_enabled, + is_payment_agent_transfer_visible, + is_payment_agent_visible, + p2p_notification_count, + routes_config, + ]); - const selected_route = getSelectedRoute({ routes: routes_config, pathname: location.pathname }); - // const should_show_tab_headers_note = - // !is_virtual && - // (location.pathname.startsWith(routes.cashier_deposit) || - // location.pathname.startsWith(routes.cashier_withdrawal)); + const selected_route = useMemo( + () => getSelectedRoute({ routes: routes_config, pathname: location.pathname }), + [location.pathname, routes_config] + ); + + const is_default_route = !!selected_route.default; + + const getHeaderTitle = useMemo(() => { + if (!isMobile() || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier'); + + return selected_route.getTitle?.(); + }, [is_cashier_onboarding, is_default_route, is_loading, selected_route]); - const is_default_route = !!getSelectedRoute({ routes: routes_config, pathname: location.pathname }).default; + const updateActiveTab = useCallback( + (path?: string) => { + switch (path) { + case routes.cashier_deposit: + setActiveTab('deposit'); + break; + case routes.cashier_withdrawal: + setActiveTab('withdraw'); + break; + case routes.cashier_pa: + setActiveTab('payment_agent'); + break; + case routes.cashier_pa_transfer: + setActiveTab('payment_agent_transfer'); + break; + case routes.cashier_acc_transfer: + setActiveTab('account_transfer'); + break; + case routes.cashier_onramp: + setActiveTab('onramp'); + break; + default: + setActiveTab('deposit'); + break; + } + }, + [setActiveTab] + ); + + useEffect(() => { + updateActiveTab(selected_route.path); + }, [selected_route, updateActiveTab]); + + useEffect(() => { + toggleCashier(); + // we still need to populate the tabs shown on cashier + return () => { + toggleCashier(); + }; + }, [toggleCashier]); + + useEffect(() => { + (async () => { + await WS?.wait('authorize'); + if (is_logged_in) { + onMount(); + setAccountSwitchListener(); + } + })(); + }, [is_logged_in, onMount, setAccountSwitchListener]); + + useEffect(() => { + if ( + is_payment_agent_transfer_visible_is_success && + !is_payment_agent_transfer_visible && + history.location.pathname === routes.cashier_pa_transfer + ) { + history.push(routes.cashier_deposit); + } + }, [history, is_payment_agent_transfer_visible, is_payment_agent_transfer_visible_is_success]); + + useEffect(() => { + if (!is_onramp_visible && history.location.pathname === routes.cashier_onramp) { + history.push(routes.cashier_deposit); + } + }, [history, is_onramp_visible]); + + useEffect(() => { + if (is_p2p_enabled_success && !is_p2p_enabled && history.location.pathname.startsWith(routes.cashier_p2p)) { + history.push(routes.cashier_deposit); + } + }, [history, is_p2p_enabled, is_p2p_enabled_success]); - // '|| !is_account_setting_loaded' condition added to make sure client_tnc_status loaded if ( ((!is_logged_in || isMobile()) && is_logging_in) || !is_account_setting_loaded || @@ -164,53 +213,20 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier return ; } - const getHeaderTitle = () => { - if (!isMobile() || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier'); - - return selected_route.getTitle?.(); - }; - - const onTabChange = (index: number) => { - const options = getMenuOptions(); - const path = options[index].path; - switch (path) { - case routes.cashier_deposit: - setActiveTab('deposit'); - break; - case routes.cashier_withdrawal: - setActiveTab('withdraw'); - break; - case routes.cashier_pa: - setActiveTab('payment_agent'); - break; - case routes.cashier_pa_transfer: - setActiveTab('payment_agent_transfer'); - break; - case routes.cashier_acc_transfer: - setActiveTab('account_transfer'); - break; - default: - setActiveTab('deposit'); - break; - } - - setTabIndex(index); - }; - return (
- + } - // TODO: Uncomment when Ewallet.Exchange is available - // tab_headers_note={ - // should_show_tab_headers_note ? ( - // - // , - // ]} - // /> - // - // ) : undefined - // } /> @@ -247,7 +244,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier )} diff --git a/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx b/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx index cc49731d20bc..ac624fedf6c6 100644 --- a/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx +++ b/packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { SideNote } from '@deriv/components'; import { Localize } from '@deriv/translations'; +import { Link } from 'react-router-dom'; const DepositCryptoSideNoteTryFiatOnRamp: React.FC = () => ( ]} + components={[]} /> } /> diff --git a/packages/cashier/src/pages/withdrawal/withdrawal.tsx b/packages/cashier/src/pages/withdrawal/withdrawal.tsx index 6613f1c79455..396f933e5b77 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal.tsx +++ b/packages/cashier/src/pages/withdrawal/withdrawal.tsx @@ -65,6 +65,7 @@ const Withdrawal = observer(() => { balance, is_switching, verification_code: { payment_withdraw: verification_code }, + setVerificationCode, } = client; const { withdraw, transaction_history } = useCashierStore(); const { is_crypto_transactions_visible } = transaction_history; @@ -88,6 +89,10 @@ const Withdrawal = observer(() => { check10kLimit(); }, [check10kLimit]); + React.useEffect(() => { + return () => setVerificationCode('', 'payment_withdraw'); + }, [setVerificationCode]); + React.useEffect(() => { return () => willMountWithdraw(verification_code); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/packages/cashier/src/stores/general-store.ts b/packages/cashier/src/stores/general-store.ts index 323ba213f9b0..8b01290561e8 100644 --- a/packages/cashier/src/stores/general-store.ts +++ b/packages/cashier/src/stores/general-store.ts @@ -48,8 +48,13 @@ export default class GeneralStore extends BaseStore { ); } - active_container: 'account_transfer' | 'deposit' | 'payment_agent' | 'payment_agent_transfer' | 'withdraw' = - 'deposit'; + active_container: + | 'account_transfer' + | 'deposit' + | 'payment_agent' + | 'payment_agent_transfer' + | 'withdraw' + | 'onramp' = 'deposit'; cashier_route_tab_index = 0; deposit_target: '/cashier/deposit' | '/cashier/on-ramp' | '/cashier/p2p' | '/cashier/payment-agent' | '' = ''; is_cashier_onboarding = true; diff --git a/packages/cashier/src/stores/withdraw-store.ts b/packages/cashier/src/stores/withdraw-store.ts index 45d3abba57ca..6e9b1bec61af 100644 --- a/packages/cashier/src/stores/withdraw-store.ts +++ b/packages/cashier/src/stores/withdraw-store.ts @@ -194,9 +194,7 @@ export default class WithdrawStore { return; } - const response_cashier = await this.WS.authorized.cashier(active_container as 'deposit' | 'withdraw', { - verification_code, - }); + const response_cashier = await this.WS.authorized.cashier('withdraw', { verification_code }); // if tab changed while waiting for response, ignore it if (current_container !== active_container) { diff --git a/packages/components/src/components/vertical-tab/vertical-tab.tsx b/packages/components/src/components/vertical-tab/vertical-tab.tsx index c134f0523eec..14722e85f493 100644 --- a/packages/components/src/components/vertical-tab/vertical-tab.tsx +++ b/packages/components/src/components/vertical-tab/vertical-tab.tsx @@ -160,7 +160,7 @@ const VerticalTab = ({ is_routed={is_routed} header_title={header_title} /> - {is_floating && tab_headers_note && list[curr_tab_index].has_side_note && ( + {is_floating && tab_headers_note && list[curr_tab_index]?.has_side_note && (
{tab_headers_note}
)} {extra_content}