Skip to content

Commit

Permalink
fix(cashier): 🐛 fix fiat withdrawal issue on mobile (binary-com#9798)
Browse files Browse the repository at this point in the history 
* fix(cashier): 🐛 fix

* fix(cashier): 🐛 fix

* fix(cashier): 🐛 fix

* fix(cashier): 🐛 fix

* fix(cashier): 🐛 fix

* fix(cashier): 🐛 fix

* fix(cashier): 🐛 fix

---------

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>
  • Loading branch information
@farzin-deriv
farzin-deriv and Farzin Mirzaie committed Aug 24, 2023
1 parent 4a9119a commit e0e8a53
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 110 deletions.
203 changes: 100 additions & 103 deletions packages/cashier/src/containers/cashier/cashier.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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 (
Expand All @@ -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,
Expand All @@ -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 ||
Expand All @@ -164,53 +213,20 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
return <Loading is_fullscreen />;
}

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 (
<FadeWrapper is_visible={is_visible} className='cashier__page-wrapper' keyname='cashier__page-wrapper'>
<ErrorDialog error={error} />
<div className='cashier'>
<PageOverlay header={getHeaderTitle()} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
<PageOverlay header={getHeaderTitle} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
<DesktopWrapper>
<VerticalTab
current_path={location.pathname}
is_floating
setVerticalTabIndex={onTabChange}
setVerticalTabIndex={setTabIndex}
vertical_tab_index={is_default_route ? 0 : tab_index}
is_full_width
is_routed
list={getMenuOptions()}
list={getMenuOptions}
tab_headers_note={
<Button
id='cashier_learn_more'
Expand All @@ -220,25 +236,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
secondary
/>
}
// TODO: Uncomment when Ewallet.Exchange is available
// tab_headers_note={
// should_show_tab_headers_note ? (
// <Text as='p' size='xxs' className='cashier__tab-header-note'>
// <Localize
// i18n_default_text='Want to exchange between e-wallet currencies? Try <0>Ewallet.Exchange</0>'
// components={[
// <a
// key={0}
// href='https://ewallet.exchange'
// rel='noopener noreferrer'
// target='_blank'
// className='link'
// />,
// ]}
// />
// </Text>
// ) : undefined
// }
/>
</DesktopWrapper>
<MobileWrapper>
Expand All @@ -247,7 +244,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
<selected_route.component
component_icon={selected_route.icon_component}
history={history}
menu_options={getMenuOptions()}
menu_options={getMenuOptions}
/>
)}
</Div100vhContainer>
Expand Down
3 changes: 2 additions & 1 deletion ...-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-note-try-fiat-onramp.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = () => (
<SideNote
description={
<Localize
i18n_default_text='Looking for a way to buy cryptocurrencies? <0>Try Fiat onramp</0>.'
components={[<a key={0} className='link link--orange' href={'/cashier/on-ramp'} />]}
components={[<Link key={0} className='link link--orange' to={'/cashier/on-ramp'} />]}
/>
}
/>
Expand Down
5 changes: 5 additions & 0 deletions packages/cashier/src/pages/withdrawal/withdrawal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down
9 changes: 7 additions & 2 deletions packages/cashier/src/stores/general-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 1 addition & 3 deletions packages/cashier/src/stores/withdraw-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/vertical-tab/vertical-tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
<div className='dc-vertical-tab__tab-bottom-note'>{tab_headers_note}</div>
)}
{extra_content}
Expand Down

0 comments on commit e0e8a53

Please sign in to comment.