feat(cashier): ✨ support crypto withdrawal transaction redirection fr…

…om deriv go (deriv-com#16802)
kate-deriv · Sep 18, 2024 · bea81da · bea81da
1 parent 97eb8c6
commit bea81da
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.tsx b/packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Router } from 'react-router';
-import { createBrowserHistory } from 'history';
+import { useHistory } from 'react-router-dom';
 import Withdrawal from '../withdrawal';
 import CashierProviders from '../../../cashier-providers';
 import { mockStore } from '@deriv/stores';
@@ -21,7 +20,10 @@ jest.mock('@deriv/api', () => ({
         },
     })),
 }));
-
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useHistory: jest.fn(),
+}));
 jest.mock('../withdrawal-locked', () => jest.fn(() => 'WithdrawalLocked'));
 jest.mock('Components/no-balance', () => jest.fn(() => 'NoBalance'));
 jest.mock('Components/error', () => jest.fn(() => 'Error'));
@@ -45,6 +47,7 @@ const cashier_mock = {
     },
     transaction_history: {
         is_transactions_crypto_visible: false,
+        setIsTransactionsCryptoVisible: jest.fn(),
     },
     withdraw: {
         check10kLimit: jest.fn(),
@@ -62,13 +65,15 @@ const cashier_mock = {
 };
 
 describe('<Withdrawal />', () => {
+    beforeEach(() => {
+        (useHistory as jest.Mock).mockReturnValue({ location: { search: '' } });
+    });
+
     const mockWithdrawal = (mock_root_store: ReturnType<typeof mockStore>) => {
         return (
             <APIProvider>
                 <CashierProviders store={mock_root_store}>
-                    <Router history={createBrowserHistory()}>
-                        <Withdrawal />
-                    </Router>
+                    <Withdrawal />
                 </CashierProviders>
             </APIProvider>
         );
@@ -267,4 +272,21 @@ describe('<Withdrawal />', () => {
 
         expect(screen.getByText('WithdrawalVerificationEmail')).toBeInTheDocument();
     });
+
+    it('triggers `setIsTransactionsCryptoVisible` callback if the withdrawal page is mounting with `crypto_transactions_withdraw` action in URL', () => {
+        (useHistory as jest.Mock).mockReturnValue({ location: { search: '?action=crypto_transactions_withdraw' } });
+        const mock_root_store = mockStore({
+            client: {
+                balance: '10',
+                currency: 'BTC',
+                is_authorize: true,
+            },
+            modules: { cashier: cashier_mock },
+        });
+        render(mockWithdrawal(mock_root_store));
+
+        expect(mock_root_store.modules.cashier.transaction_history.setIsTransactionsCryptoVisible).toHaveBeenCalledWith(
+            true
+        );
+    });
 });
diff --git a/packages/cashier/src/pages/withdrawal/withdrawal.tsx b/packages/cashier/src/pages/withdrawal/withdrawal.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { Loading } from '@deriv/components';
 import { useCurrentCurrencyConfig } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
@@ -83,8 +84,10 @@ const Withdrawal = observer(() => {
         account_limits,
     } = client;
     const { withdraw, transaction_history } = useCashierStore();
-    const { is_transactions_crypto_visible } = transaction_history;
-
+    const { is_transactions_crypto_visible, setIsTransactionsCryptoVisible } = transaction_history;
+    const history = useHistory();
+    const search_params = new URLSearchParams(history.location.search);
+    const action_param = search_params?.get('action');
     const {
         check10kLimit,
         error: { setErrorMessage },
@@ -113,6 +116,12 @@ const Withdrawal = observer(() => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [willMountWithdraw]);
 
+    React.useEffect(() => {
+        if (action_param === 'crypto_transactions_withdraw') {
+            setIsTransactionsCryptoVisible(true);
+        }
+    }, [action_param, setIsTransactionsCryptoVisible]);
+
     if (is_switching || is_10k_withdrawal_limit_reached === undefined)
         return (
             <PageContainer hide_breadcrumb right={<React.Fragment />}>

diff --git a/packages/core/src/App/Containers/Redirect/redirect.jsx b/packages/core/src/App/Containers/Redirect/redirect.jsx
@@ -220,6 +220,11 @@ const Redirect = observer(() => {
             redirected_to_route = true;
             break;
         }
+        case 'crypto_transactions_withdraw': {
+            history.push(`${routes.cashier_withdrawal}?action=${action_param}`);
+            redirected_to_route = true;
+            break;
+        }
         case 'payment_transactions': {
             if (has_wallet) {
                 history.push(routes.wallets_transactions);

diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
@@ -1529,7 +1529,8 @@ export default class ClientStore extends BaseStore {
             return false;
         }
 
-        if (action_param === 'payment_withdraw' && loginid_param) this.setLoginId(loginid_param);
+        if (['crypto_transactions_withdraw', 'payment_withdraw'].includes(action_param) && loginid_param)
+            this.setLoginId(loginid_param);
         else this.setLoginId(LocalStore.get('active_loginid'));
         this.user_id = LocalStore.get('active_user_id');
         this.setAccounts(LocalStore.getObject(storage_key));
@@ -1558,13 +1559,20 @@ export default class ClientStore extends BaseStore {
             }
             if (redirect_url) {
                 const redirect_route = routes[redirect_url].length > 1 ? routes[redirect_url] : '';
-                const has_action = ['payment_agent_withdraw', 'payment_withdraw', 'reset_password'].includes(
-                    action_param
-                );
+                const has_action = [
+                    'crypto_transactions_withdraw',
+                    'payment_agent_withdraw',
+                    'payment_withdraw',
+                    'reset_password',
+                ].includes(action_param);
 
                 if (has_action) {
                     const query_string = filterUrlQuery(search, ['platform', 'code', 'action', 'loginid']);
-                    if ([routes.cashier_withdrawal, routes.cashier_pa].includes(redirect_route)) {
+                    if (
+                        [routes.cashier_withdrawal, routes.cashier_pa, routes.cashier_transactions_crypto].includes(
+                            redirect_route
+                        )
+                    ) {
                         // Set redirect path for cashier withdrawal and payment agent withdrawal (after getting PTA redirect_url)
                         window.location.replace(`/redirect?${query_string}`);
                     } else {