Merge pull request #100 from bahar-deriv/integrate-create-new-account…

…-with-diel-account-switcher bahar/84445/feat: integrate-create-new-account-with-diel-account-switcher
hirad-deriv · Jan 5, 2023 · a8fba92 · a8fba92
2 parents 94e3be8 + b0de604
commit a8fba92
Show file tree

Hide file tree

Showing 19 changed files with 279 additions and 116 deletions.
diff --git a/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx b/packages/appstore/src/components/account-transfer-modal/account-transfer-modal.tsx
@@ -18,10 +18,16 @@ const AccountTransferModal = ({ is_modal_open, toggleModal }: TAccountTransferMo
                 account_transfer: { is_transfer_confirm, should_switch_account },
             },
         },
+        traders_hub: { closeModal, openModal },
     } = useStore();
 
     const history = useHistory();
 
+    React.useEffect(() => {
+        return () => closeModal();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     const modal_title = !is_transfer_confirm && <Localize i18n_default_text={'Transfer funds to your account'} />;
 
     const onClickDeposit = () => {
@@ -34,6 +40,10 @@ const AccountTransferModal = ({ is_modal_open, toggleModal }: TAccountTransferMo
         history.push(routes.cashier_acc_transfer);
     };
 
+    const openAccountSwitcherModal = () => {
+        openModal('currency_selection');
+    };
+
     return (
         <Modal
             className={should_switch_account ? 'account-transfer-modal' : ''}
@@ -46,7 +56,12 @@ const AccountTransferModal = ({ is_modal_open, toggleModal }: TAccountTransferMo
             should_header_stick_body={false}
         >
             <Modal.Body>
-                <AccountTransfer onClickDeposit={onClickDeposit} onClickNotes={onClickNotes} onClose={toggleModal} />
+                <AccountTransfer
+                    openAccountSwitcherModal={openAccountSwitcherModal}
+                    onClickDeposit={onClickDeposit}
+                    onClickNotes={onClickNotes}
+                    onClose={toggleModal}
+                />
             </Modal.Body>
         </Modal>
     );

diff --git a/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx b/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { StatusBadge } from '@deriv/components';
 import CurrencySwitcherContainer from 'Components/containers/currency-switcher-container';
 import CurrencySwitcherLoader from 'Components/pre-loader/currency-switcher-loader';
 import { useStores } from 'Stores/index';
-import StatusBadge from './switcher-status-badge';
 import RealAccountCard from './real-account-card';
 import './real-account-switcher.scss';
 
 const AccountNeedsVerification = observer(() => {
     const { client, traders_hub } = useStores();
-    const { account_list, loginid } = client;
+    const {
+        authentication_status: { document_status },
+        account_list,
+        loginid,
+    } = client;
     const { openModal } = traders_hub;
 
     const title = account_list.find((acc: { loginid: string }) => loginid === acc.loginid).title;
@@ -24,7 +28,7 @@ const AccountNeedsVerification = observer(() => {
                 openModal('currency_selection');
             }}
         >
-            <StatusBadge />
+            <StatusBadge document_status={document_status} />
         </CurrencySwitcherContainer>
     );
 });

diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -18,7 +18,6 @@ import RegulatorsCompareModal from './regulators-compare-modal';
 import ExitTradersHubModal from './exit-traders-hub-modal';
 import { useStores } from 'Stores';
 import { TOpenAccountTransferMeta } from 'Types';
-import CurrencySelectionModal from './currency-selection-modal';
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
 import AccountTransferModal from 'Components/account-transfer-modal';
 
@@ -40,7 +39,7 @@ const ModalManager = () => {
         getRealSyntheticAccountsExistingData,
         getRealFinancialAccountsExistingData,
     } = modules.cfd;
-    const { is_demo, modal_data, is_account_transfer_modal_open, toggleAccountTransferModal } = traders_hub;
+    const { is_demo, is_account_transfer_modal_open, toggleAccountTransferModal } = traders_hub;
 
     const [password_manager, setPasswordManager] = React.useState<{
         is_visible: boolean;
@@ -138,7 +137,6 @@ const ModalManager = () => {
                 openPasswordModal={openRealPasswordModal}
                 is_real_enabled={has_active_real_account || !is_demo}
             />
-            <CurrencySelectionModal is_visible={modal_data.active_modal === 'currency_selection'} />
             <AccountTransferModal
                 is_modal_open={is_account_transfer_modal_open}
                 toggleModal={toggleAccountTransferModal}

diff --git a/packages/appstore/src/stores/index.ts b/packages/appstore/src/stores/index.ts
@@ -14,4 +14,5 @@ export const initContext = (core_store: TRootStore, websocket: Record<string, un
     }
 };
 
+/** @deprecated Use `useStore` from `@deriv/stores` package instead. */
 export const useStores = (): TRootStore => React.useContext(stores_context);
diff --git a/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx b/packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx
@@ -24,6 +24,7 @@ jest.mock('@deriv/shared/src/services/ws-methods', () => ({
 jest.mock('../account-transfer-form', () => jest.fn(() => 'mockedAccountTransferForm'));
 jest.mock('Components/crypto-transactions-history', () => jest.fn(() => 'mockedCryptoTransactionsHistory'));
 jest.mock('Components/cashier-locked', () => jest.fn(() => 'mockedCashierLocked'));
+jest.mock('../account-transfer-no-account', () => jest.fn(() => 'mockedAccountTransferNoAccount'));
 jest.mock('../account-transfer-receipt', () => jest.fn(() => 'mockedAccountTransferReceipt'));
 jest.mock('Components/error', () => jest.fn(() => 'mockedError'));
 
@@ -140,7 +141,7 @@ describe('<AccountTransfer />', () => {
 
         renderAccountTransfer();
 
-        expect(await screen.findByText('You need at least two accounts')).toBeInTheDocument();
+        expect(await screen.findByText('mockedAccountTransferNoAccount')).toBeInTheDocument();
     });
 
     it('should render the no balance component if the account has no balance', async () => {

diff --git a/...count-transfer/account-transfer-no-account/__tests__/account-transfer-no-account.spec.tsx b/...count-transfer/account-transfer-no-account/__tests__/account-transfer-no-account.spec.tsx
@@ -19,6 +19,7 @@ describe('<AccountTransferNoAccount />', () => {
             ui: {
                 toggleAccountsDialog: jest.fn(),
             },
+            traders_hub: { openModal: jest.fn(), closeModal: jest.fn() },
         };
     });
 

diff --git a/...er/src/pages/account-transfer/account-transfer-no-account/account-transfer-no-account.tsx b/...er/src/pages/account-transfer/account-transfer-no-account/account-transfer-no-account.tsx
@@ -5,12 +5,22 @@ import { Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
 import './account-transfer-no-account.scss';
 
-const AccountTransferNoAccount = observer(() => {
+type TAccountTransferNoAccount = {
+    openAccountSwitcherModal?: () => void;
+};
+
+const AccountTransferNoAccount = observer(({ openAccountSwitcherModal }: TAccountTransferNoAccount) => {
     const {
-        client: { is_dxtrade_allowed },
+        client: { is_dxtrade_allowed, is_pre_appstore },
         ui: { toggleAccountsDialog },
+        traders_hub: { openModal, closeModal },
     } = useStore();
 
+    React.useEffect(() => {
+        closeModal();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <div className='cashier__wrapper cashier__no-balance'>
             <Icon icon='IcCashierNoBalance' className='cashier__no-balance-icon' size={116} />
@@ -33,7 +43,18 @@ const AccountTransferNoAccount = observer(() => {
                     />
                 )}
             </Text>
-            <Button className='account-transfer-no-account__button' primary large onClick={toggleAccountsDialog}>
+            <Button
+                className='account-transfer-no-account__button'
+                primary
+                large
+                onClick={() =>
+                    openAccountSwitcherModal
+                        ? openAccountSwitcherModal()
+                        : is_pre_appstore
+                        ? openModal('currency_selection')
+                        : toggleAccountsDialog()
+                }
+            >
                 <Localize i18n_default_text='Create account' />
             </Button>
         </div>

diff --git a/packages/cashier/src/pages/account-transfer/account-transfer.tsx b/packages/cashier/src/pages/account-transfer/account-transfer.tsx
@@ -17,106 +17,109 @@ type TAccountTransferProps = {
     onClickDeposit?: () => void;
     onClickNotes?: () => void;
     onClose?: () => void;
+    openAccountSwitcherModal?: () => void;
     setSideNotes?: (notes: TSideNotesProps) => void;
 };
 
-const AccountTransfer = observer(({ onClickDeposit, onClickNotes, onClose, setSideNotes }: TAccountTransferProps) => {
-    const {
-        modules: {
-            cashier: { account_transfer, general_store, transaction_history },
-        },
-        client,
-    } = useStore();
+const AccountTransfer = observer(
+    ({ onClickDeposit, onClickNotes, onClose, openAccountSwitcherModal, setSideNotes }: TAccountTransferProps) => {
+        const {
+            modules: {
+                cashier: { account_transfer, general_store, transaction_history },
+            },
+            client,
+        } = useStore();
 
-    const {
-        accounts_list,
-        container,
-        error,
-        has_no_account,
-        has_no_accounts_balance,
-        is_transfer_confirm,
-        is_transfer_locked,
-        onMountAccountTransfer: onMount,
-        setAccountTransferAmount,
-        setIsTransferConfirm,
-    } = account_transfer;
+        const {
+            accounts_list,
+            container,
+            error,
+            has_no_account,
+            has_no_accounts_balance,
+            is_transfer_confirm,
+            is_transfer_locked,
+            onMountAccountTransfer: onMount,
+            setAccountTransferAmount,
+            setIsTransferConfirm,
+        } = account_transfer;
 
-    const { is_cashier_locked, is_loading, setActiveTab } = general_store;
+        const { is_cashier_locked, is_loading, setActiveTab } = general_store;
 
-    const { is_crypto_transactions_visible, onMount: recentTransactionOnMount } = transaction_history;
+        const { is_crypto_transactions_visible, onMount: recentTransactionOnMount } = transaction_history;
 
-    const { is_pre_appstore, is_switching, is_virtual } = client;
+        const { is_pre_appstore, is_switching, is_virtual } = client;
 
-    const [is_loading_status, setIsLoadingStatus] = React.useState(true);
-    const is_from_pre_appstore = is_pre_appstore && !location.pathname.startsWith(routes.cashier);
+        const [is_loading_status, setIsLoadingStatus] = React.useState(true);
+        const is_from_pre_appstore = is_pre_appstore && !location.pathname.startsWith(routes.cashier);
 
-    React.useEffect(() => {
-        if (!is_crypto_transactions_visible) {
-            recentTransactionOnMount();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [is_switching]);
+        React.useEffect(() => {
+            if (!is_crypto_transactions_visible) {
+                recentTransactionOnMount();
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [is_switching]);
+
+        React.useEffect(() => {
+            setActiveTab(container);
+            onMount();
 
-    React.useEffect(() => {
-        setActiveTab(container);
-        onMount();
+            WS.wait('authorize', 'website_status', 'get_settings', 'paymentagent_list').then(() => {
+                setIsLoadingStatus(false);
+            });
 
-        WS.wait('authorize', 'website_status', 'get_settings', 'paymentagent_list').then(() => {
-            setIsLoadingStatus(false);
-        });
+            return () => {
+                setAccountTransferAmount('');
+                setIsTransferConfirm(false);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
 
-        return () => {
-            setAccountTransferAmount('');
-            setIsTransferConfirm(false);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        React.useEffect(() => {
+            if (typeof setSideNotes === 'function' && (has_no_accounts_balance || is_switching)) {
+                setSideNotes(null);
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [setSideNotes, has_no_accounts_balance]);
 
-    React.useEffect(() => {
-        if (typeof setSideNotes === 'function' && (has_no_accounts_balance || is_switching)) {
-            setSideNotes(null);
+        if (is_virtual) {
+            return <Virtual />;
+        }
+        if (is_loading || is_switching || is_loading_status) {
+            return <Loading className='cashier__loader' is_fullscreen={false} />;
+        }
+        if (is_cashier_locked) {
+            return <CashierLocked />;
+        }
+        if (is_transfer_locked) {
+            return <AccountTransferLocked />;
+        }
+        if (error.is_show_full_page || (error.message && !accounts_list.length)) {
+            // for errors with CTA hide the form and show the error,
+            // for others show them at the bottom of the form next to submit button
+            return <Error error={error} />;
+        }
+        if (has_no_account) {
+            return <AccountTransferNoAccount openAccountSwitcherModal={openAccountSwitcherModal} />;
+        }
+        if (has_no_accounts_balance) {
+            return <NoBalance />;
+        }
+        if (is_transfer_confirm) {
+            return <AccountTransferReceipt onClose={onClose} />;
+        }
+        if (!is_from_pre_appstore && is_crypto_transactions_visible) {
+            return <CryptoTransactionsHistory />;
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [setSideNotes, has_no_accounts_balance]);
 
-    if (is_virtual) {
-        return <Virtual />;
+        return (
+            <AccountTransferForm
+                error={error}
+                setSideNotes={setSideNotes}
+                onClickDeposit={onClickDeposit}
+                onClickNotes={onClickNotes}
+            />
+        );
     }
-    if (is_loading || is_switching || is_loading_status) {
-        return <Loading className='cashier__loader' is_fullscreen={false} />;
-    }
-    if (is_cashier_locked) {
-        return <CashierLocked />;
-    }
-    if (is_transfer_locked) {
-        return <AccountTransferLocked />;
-    }
-    if (error.is_show_full_page || (error.message && !accounts_list.length)) {
-        // for errors with CTA hide the form and show the error,
-        // for others show them at the bottom of the form next to submit button
-        return <Error error={error} />;
-    }
-    if (has_no_account) {
-        return <AccountTransferNoAccount />;
-    }
-    if (has_no_accounts_balance) {
-        return <NoBalance />;
-    }
-    if (is_transfer_confirm) {
-        return <AccountTransferReceipt onClose={onClose} />;
-    }
-    if (!is_from_pre_appstore && is_crypto_transactions_visible) {
-        return <CryptoTransactionsHistory />;
-    }
-
-    return (
-        <AccountTransferForm
-            error={error}
-            setSideNotes={setSideNotes}
-            onClickDeposit={onClickDeposit}
-            onClickNotes={onClickNotes}
-        />
-    );
-});
+);
 
 export default AccountTransfer;
diff --git a/packages/components/src/components/status-badge/index.ts b/packages/components/src/components/status-badge/index.ts
@@ -0,0 +1,4 @@
+import StatusBadge from './status-badge';
+import './status-badge.scss';
+
+export default StatusBadge;
diff --git a/...cher-card/real/switcher-status-badge.scss → ...components/status-badge/status-badge.scss b/...cher-card/real/switcher-status-badge.scss → ...components/status-badge/status-badge.scss