FarhanNurzi/WALL-608/DIEL - Show deposit options

packages/core/src/App/Containers/Modals/app-modals.jsx

@@ -64,6 +64,10 @@ const VerificationDocumentSubmitted = React.lazy(() =>
     import(/* webpackChunkName: "verification-document-submitted-modal" */ './VerificationDocumentSubmitted')
 );
 
+const OneTimeDepositModal = React.lazy(() =>
+    import(/* webpackChunkName: "one-time-deposit-modal" */ '../OneTimeDepositModal')
+);
+
 const AppModals = ({
     is_account_needed_modal_on,
     is_acuity_modal_open,
@@ -89,7 +93,8 @@ const AppModals = ({
     is_need_real_account_for_cashier_modal_visible,
     is_verification_modal_visible,
     is_verification_submitted,
-    should_show_deposit_or_account_success_modal,
+    should_show_one_time_deposit_modal,
+    should_show_account_success_modal,
 }) => {
     const url_params = new URLSearchParams(useLocation().search);
     const url_action_param = url_params.get('action');
@@ -181,7 +186,11 @@ const AppModals = ({
         ComponentToLoad = <VerificationDocumentSubmitted />;
     }
 
-    if (should_show_deposit_or_account_success_modal) {
+    if (should_show_one_time_deposit_modal) {
+        ComponentToLoad = <OneTimeDepositModal />;
+    }
+
+    if (should_show_account_success_modal) {
         ComponentToLoad = <ReadyToVerifyModal />;
     }
 
@@ -221,5 +230,6 @@ export default connect(({ client, ui, traders_hub }) => ({
     content_flag: traders_hub.content_flag,
     is_trading_experience_incomplete: client.is_trading_experience_incomplete,
     should_show_risk_accept_modal: ui.should_show_risk_accept_modal,
-    should_show_deposit_or_account_success_modal: ui.should_show_deposit_or_account_success_modal,
+    should_show_one_time_deposit_modal: ui.should_show_one_time_deposit_modal,
+    should_show_account_success_modal: ui.should_show_account_success_modal,
 }))(AppModals);

packages/core/src/App/Containers/Modals/ready-to-verify-modal/ready-to-verify-modal.spec.tsx

@@ -3,6 +3,11 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import userEvent from '@testing-library/user-event';
 import ReadyToVerifyModal from './ready-to-verify-modal';
+import { useDepositLocked } from '@deriv/hooks';
+
+jest.mock('@deriv/hooks', () => ({
+    useDepositLocked: jest.fn(() => false),
+}));
 
 describe('<ReadyToVerifyModal />', () => {
     let modal_root_el: HTMLDivElement;
@@ -17,15 +22,13 @@ describe('<ReadyToVerifyModal />', () => {
         document.body.removeChild(modal_root_el);
     });
 
-    it('should render the component with deposit success message if client deposited first_time', () => {
+    it('should render the component with deposit success message if client deposited for the first time', () => {
         const mock = mockStore({
             ui: {
-                should_show_deposit_or_account_success_modal: true,
-            },
-            client: {
-                has_deposited_for_first_time: true,
+                should_show_account_success_modal: true,
             },
         });
+        (useDepositLocked as jest.Mock).mockReturnValueOnce(true);
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <StoreProvider store={mock}>{children}</StoreProvider>
         );
@@ -56,10 +59,7 @@ describe('<ReadyToVerifyModal />', () => {
     it('should render the component with account created messages if client skip first_time deposit', () => {
         const mock = mockStore({
             ui: {
-                should_show_deposit_or_account_success_modal: true,
-            },
-            client: {
-                has_deposited_for_first_time: false,
+                should_show_account_success_modal: true,
             },
         });
 

packages/core/src/App/Containers/Modals/ready-to-verify-modal/ready-to-verify-modal.tsx

@@ -1,49 +1,50 @@
 import React from 'react';
 import { Dialog, Text } from '@deriv/components';
+import { useDepositLocked } from '@deriv/hooks';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
 import './ready-to-verify-modal.scss';
 
 const ReadyToVerifyModal = observer(() => {
-    const { ui, client } = useStore();
+    const { ui } = useStore();
     const {
-        should_show_deposit_or_account_success_modal,
+        should_show_account_success_modal,
         setShouldTriggerTourGuide,
-        toggleDepositOrAccountSuccessModal,
+        toggleAccountSuccessModal,
         disableApp,
         enableApp,
         // openPOIPOAModal,
     } = ui;
-    const { has_deposited_for_first_time } = client;
+    const is_deposit_locked = useDepositLocked();
 
     const onConfirmeModal = () => {
-        toggleDepositOrAccountSuccessModal();
+        toggleAccountSuccessModal();
         // openPOIPOAModal(); // route to poi-poa modal
     };
 
     const onClose = () => {
-        toggleDepositOrAccountSuccessModal();
+        toggleAccountSuccessModal();
         setShouldTriggerTourGuide(true); // route to onboarding -switch accounts
     };
 
     return (
         <Dialog
             className='ready-to-verify-dialog'
-            title={has_deposited_for_first_time ? localize('Successfully deposited') : localize('Account added')}
+            title={is_deposit_locked ? localize('Successfully deposited') : localize('Account added')}
             confirm_button_text={localize('Verify now')}
             onConfirm={onConfirmeModal}
             cancel_button_text={localize('Maybe later')}
             onCancel={onClose}
             disableApp={disableApp}
             enableApp={enableApp}
-            is_visible={should_show_deposit_or_account_success_modal}
+            is_visible={should_show_account_success_modal}
             dismissable={true}
             has_close_icon={false}
             onEscapeButtonCancel={onClose}
         >
             <Text align='center' size={isMobile() ? 'xxs' : 'xs'}>
-                {has_deposited_for_first_time
+                {is_deposit_locked
                     ? localize(
                           'Your funds will be available for trading once the verification of your account is complete.'
                       )

packages/core/src/App/Containers/OneTimeDepositModal/index.ts

@@ -0,0 +1,4 @@
+import OneTimeDepositModal from './one-time-deposit-modal';
+import './one-time-deposit-modal.scss';
+
+export default OneTimeDepositModal;

packages/core/src/App/Containers/OneTimeDepositModal/one-time-deposit-modal.scss

@@ -0,0 +1,64 @@
+.one-time-deposit-modal {
+    display: flex;
+    align-self: stretch;
+
+    &__body {
+        display: flex;
+        justify-content: center;
+        height: 80vh;
+
+        @include mobile {
+            height: 100%;
+        }
+    }
+
+    &__content {
+        width: 60%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        @include mobile {
+            width: 100%;
+            padding: 2rem;
+        }
+    }
+
+    &__description {
+        display: grid;
+        grid-template-columns: 78fr 22fr;
+        gap: 0.8rem;
+        place-items: center;
+        margin-block: 2rem;
+
+        &--livechat {
+            cursor: pointer;
+            width: max-content;
+            display: flex;
+            align-items: center;
+
+            &-icon {
+                margin-right: 0.8rem;
+                margin-top: 0.2rem;
+            }
+        }
+    }
+
+    &__deposit-fiat-iframe {
+        width: 100%;
+        height: 100%;
+    }
+
+    &__title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.8rem;
+    }
+}
+
+.dc-modal__container_one-time-deposit-modal {
+    .dc-modal-header {
+        border-bottom: 2px solid var(--general-section-1);
+    }
+}

packages/core/src/App/Containers/OneTimeDepositModal/one-time-deposit-modal.spec.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Router } from 'react-router';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createBrowserHistory } from 'history';
+import { useDepositFiatAddress, useDepositLocked } from '@deriv/hooks';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { TStores } from '@deriv/stores/types';
+import OneTimeDepositModal from './one-time-deposit-modal';
+
+let mock_store: TStores;
+
+jest.mock('@deriv/hooks', () => ({
+    useDepositFiatAddress: jest.fn(() => ({
+        data: 'https://www.binary.com',
+        isSuccess: true,
+    })),
+    useDepositLocked: jest.fn(() => false),
+}));
+
+describe('<OneTimeDepositModal />', () => {
+    let modal_root_el: HTMLDivElement;
+
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    beforeEach(() => {
+        mock_store = mockStore({
+            ui: {
+                should_show_one_time_deposit_modal: true,
+                setShouldShowOneTimeDepositModal: jest.fn(),
+                toggleAccountSuccessModal: jest.fn(),
+            },
+            client: {
+                has_deposited_for_first_time: false,
+                loginid: 'MX12345',
+            },
+        });
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    it('should render one time deposit modal', () => {
+        const history = createBrowserHistory();
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>{children}</StoreProvider>
+        );
+
+        render(
+            <Router history={history}>
+                <OneTimeDepositModal />
+            </Router>,
+            {
+                wrapper,
+            }
+        );
+        expect(screen.getByText('Deposit')).toBeInTheDocument();
+        expect(screen.getByText('Account created. Select payment method for deposit.')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_deposit_fiat_iframe')).toBeInTheDocument();
+    });
+
+    it('should render loading component if iframe has not loaded', () => {
+        const history = createBrowserHistory();
+        (useDepositFiatAddress as jest.Mock).mockReturnValueOnce({
+            data: '',
+            isSuccess: false,
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>{children}</StoreProvider>
+        );
+
+        render(
+            <Router history={history}>
+                <OneTimeDepositModal />
+            </Router>,
+            {
+                wrapper,
+            }
+        );
+        expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument();
+    });
+
+    it('should close modal when iframe if user unable to deposit because they have deposited', () => {
+        const history = createBrowserHistory();
+        (useDepositLocked as jest.Mock).mockReturnValueOnce(true);
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>{children}</StoreProvider>
+        );
+
+        render(
+            <Router history={history}>
+                <OneTimeDepositModal />
+            </Router>,
+            {
+                wrapper,
+            }
+        );
+        expect(mock_store.ui.setShouldShowOneTimeDepositModal).toHaveBeenCalled();
+        expect(mock_store.ui.toggleAccountSuccessModal).toHaveBeenCalled();
+    });
+
+    it('should close modal after cllicking ESC key', () => {
+        const history = createBrowserHistory();
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>{children}</StoreProvider>
+        );
+        render(
+            <Router history={history}>
+                <OneTimeDepositModal />
+            </Router>,
+            {
+                wrapper,
+            }
+        );
+        userEvent.keyboard('{esc}');
+        expect(mock_store.ui.setShouldShowOneTimeDepositModal).toHaveBeenCalled();
+        expect(mock_store.ui.toggleAccountSuccessModal).toHaveBeenCalled();
+    });
+
+    it('should open live chat widget on click', () => {
+        const history = createBrowserHistory();
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>{children}</StoreProvider>
+        );
+        render(
+            <Router history={history}>
+                <OneTimeDepositModal />
+            </Router>,
+            {
+                wrapper,
+            }
+        );
+        const live_chat = screen.getByTestId('dt_live_chat');
+        expect(live_chat).toBeInTheDocument();
+        userEvent.click(live_chat);
+    });
+});