[DTRA] / Kate / DTRA-680 / Add popup for "Turbos" launch (#12761)

* refactor: launch modal for turbos

* refactor: remove unused images

* feat: add functionality for opening description

* refactor: test cases

* chore: remove unused icon

* fix: add check for popup

* fix: add one more setter

Author: kate-deriv

packages/core/src/index.html

@@ -245,6 +245,7 @@
         </div>
         <div id="wallets_modal_root" class="modal-root"></div>
         <div id="v2_modal_root" class="modal-root"></div>
+        <div id="launch_modal_root" class="launch-modal-root"></div>
         <div id="modal_root" class="modal-root"></div>
         <div id="modal_root_absolute" class="modal-root modal-root--absolute"></div>
         <!-- modal_root has background color. So, it cannot be used for toast messages. For those cases popup_root is used -->

packages/core/src/sass/app/_common/layout/modal-root.scss

@@ -1,4 +1,5 @@
-.modal-root {
+.modal-root,
+.launch-modal-root {
     width: 100vw;
     height: 100vh;
     align-items: center;
@@ -22,3 +23,7 @@
         z-index: 9999;
     }
 }
+
+.launch-modal-root:not(:empty) + .modal-root:not(:empty) {
+    display: none;
+}

packages/trader/src/App/Components/Elements/LaunchModal/__tests__/launch-modal-button.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import LaunchModalButton from '../launch-modal-button';
+
+const default_props = {
+    handleOpen: jest.fn(),
+    setShowDescription: jest.fn(),
+};
+
+const confirm_button = 'Ok';
+const learn_more_button = 'Learn more';
+
+describe('<LaunchModalButton />', () => {
+    it('should render LaunchModalButton', () => {
+        render(<LaunchModalButton {...default_props} />);
+
+        expect(screen.getByText(confirm_button)).toBeInTheDocument();
+        expect(screen.getByText(learn_more_button)).toBeInTheDocument();
+    });
+
+    it('should call only handleOpen function if user click on OK button', () => {
+        render(<LaunchModalButton {...default_props} />);
+
+        userEvent.click(screen.getByText(confirm_button));
+        expect(default_props.handleOpen).toBeCalled();
+        expect(default_props.setShowDescription).not.toBeCalled();
+    });
+
+    it('should call both handleOpen and setShowDescription function if user click on Learn more button', () => {
+        render(<LaunchModalButton {...default_props} />);
+
+        userEvent.click(screen.getByText(learn_more_button));
+        expect(default_props.handleOpen).toBeCalled();
+        expect(default_props.setShowDescription).toBeCalled();
+    });
+});

packages/trader/src/App/Components/Elements/LaunchModal/__tests__/launch-modal-info.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import LaunchModalInfo from '../launch-modal-info';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('Assets/SvgComponents/trade_explanations/img-turbos.svg', () => jest.fn(() => <div>Turbos Image</div>));
+
+describe('<LaunchModalInfo />', () => {
+    it('should render component', () => {
+        render(<LaunchModalInfo is_mobile />);
+
+        expect(screen.getByText('Turbos Image')).toBeInTheDocument();
+        expect(screen.getByText('Turbos — a new trade type for you!')).toBeInTheDocument();
+    });
+});

packages/trader/src/Modules/SmartChartBeta/Components/LaunchModal/__tests__/launch-modal.spec.tsx renamed to packages/trader/src/App/Components/Elements/LaunchModal/__tests__/launch-modal.spec.tsx

@@ -7,8 +7,12 @@ import LaunchModal from '../launch-modal';
 
 const mocked_default_props = {
     handleChange: jest.fn(() => LocalStore.set('launchModalShown', JSON.stringify(true))),
+    setShowDescription: jest.fn(),
     open: true,
 };
+const launch_modal_id = 'launch-modal';
+
+jest.mock('Assets/SvgComponents/trade_explanations/img-turbos.svg', () => jest.fn(() => <div>Turbos Image</div>));
 
 describe('<LaunchModal />', () => {
     beforeAll(() => {
@@ -28,22 +32,23 @@ describe('<LaunchModal />', () => {
     it('should render launch modal ', () => {
         render(<LaunchModal {...mocked_default_props} />);
 
-        expect(screen.getByTestId('launch-modal')).toBeInTheDocument();
+        expect(screen.getByTestId(launch_modal_id)).toBeInTheDocument();
     });
 
-    it('should set the localStorage key launchModalShown to true on clicking the continue button', async () => {
+    it('should set the localStorage key launchModalShown to true on clicking the Ok button', async () => {
         render(<LaunchModal {...mocked_default_props} />);
-        expect(screen.getByTestId('launch-modal')).toBeInTheDocument();
+        expect(screen.getByTestId(launch_modal_id)).toBeInTheDocument();
 
-        const continue_btn = screen.getByRole('button', { name: 'Continue' });
+        const continue_btn = screen.getByRole('button', { name: 'Ok' });
         userEvent.click(continue_btn);
         const value = JSON.parse(LocalStore.get('launchModalShown') ?? 'false');
 
         expect(value).toBe(true);
     });
+
     it('should not display launch modal if open is equal to false', () => {
         render(<LaunchModal {...mocked_default_props} open={false} />);
 
-        expect(screen.queryByTestId('launch-modal')).not.toBeInTheDocument();
+        expect(screen.queryByTestId(launch_modal_id)).not.toBeInTheDocument();
     });
 });

packages/trader/src/App/Components/Elements/LaunchModal/index.ts

@@ -0,0 +1,3 @@
+import LaunchModal from './launch-modal';
+
+export default LaunchModal;

packages/trader/src/App/Components/Elements/LaunchModal/launch-modal-button.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, Modal } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+const LaunchModalButton = ({
+    handleOpen,
+    setShowDescription,
+}: {
+    handleOpen: () => void;
+    setShowDescription: (status: boolean) => void;
+}) => (
+    <Modal.Footer has_separator>
+        <Button
+            className='launch-button'
+            has_effect
+            onClick={() => {
+                handleOpen();
+                setShowDescription(true);
+            }}
+            secondary
+            large
+        >
+            <Localize i18n_default_text='Learn more' />
+        </Button>
+        <Button className='launch-button' has_effect onClick={handleOpen} primary large>
+            <Localize i18n_default_text='Ok' />
+        </Button>
+    </Modal.Footer>
+);
+
+export default LaunchModalButton;

packages/trader/src/App/Components/Elements/LaunchModal/launch-modal-info.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import ImageTurbos from 'Assets/SvgComponents/trade_explanations/img-turbos.svg';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+const LaunchModalInfo = ({ is_mobile }: { is_mobile?: boolean }) => {
+    return (
+        <div className='modal_content' data-testid='launch-modal'>
+            <ImageTurbos className='modal_image' viewBox={is_mobile ? '0 0 328 164' : '56 18 216 128'} />
+            <Text as='h1' weight='bold' align='center' size={is_mobile ? 'xsm' : 'sm'}>
+                <Localize i18n_default_text='Turbos — a new trade type for you!' />
+            </Text>
+            <Text as='p' align='center'>
+                <Localize i18n_default_text='Power up your market view.' />
+            </Text>
+            <Text as='p' align='center'>
+                <Localize i18n_default_text='High potential payout. Limited risk.' />
+            </Text>
+            <Text as='p' align='center'>
+                <Localize i18n_default_text='Available on both demo and real accounts.' />
+            </Text>
+        </div>
+    );
+};
+
+export default LaunchModalInfo;

packages/trader/src/App/Components/Elements/LaunchModal/launch-modal.scss

@@ -0,0 +1,59 @@
+// For Web Modal
+.dc-modal__container_launch-modal-root {
+    text-align: center;
+
+    .dc-modal-body {
+        justify-content: center;
+        display: flex;
+        height: 100%;
+
+        .modal {
+            &_image {
+                margin: 2.4rem 0rem;
+                width: 21.6rem;
+                height: 12.8rem;
+                border-radius: 0.6rem;
+            }
+        }
+    }
+
+    .dc-modal-footer {
+        .launch-button {
+            min-width: 5.1rem;
+        }
+    }
+}
+
+// For Mobile
+.launch-page-mobile {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .modal {
+        &_content {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 1rem;
+        }
+
+        &_image {
+            margin-bottom: 2.4rem;
+            border-radius: 0.6rem;
+        }
+    }
+
+    .dc-modal-footer {
+        border-top: 0.2rem solid var(--general-section-5);
+        padding: 1.6rem;
+
+        .launch-button {
+            height: 4rem;
+            width: 100%;
+        }
+    }
+}

packages/trader/src/App/Components/Elements/LaunchModal/launch-modal.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DesktopWrapper, MobileWrapper, Modal, UILoader } from '@deriv/components';
+import LaunchModalInfo from './launch-modal-info';
+import LaunchModalButton from './launch-modal-button';
+import './launch-modal.scss';
+
+type LaunchModalProps = {
+    handleChange: () => void;
+    open: boolean;
+    setShowDescription: (status: boolean) => void;
+};
+
+const LaunchModal = ({ handleChange, open, setShowDescription }: LaunchModalProps) => (
+    <React.Suspense fallback={<UILoader />}>
+        <DesktopWrapper>
+            <Modal
+                is_open={open}
+                className='launch-modal-root'
+                height='440px'
+                width='440px'
+                toggleModal={handleChange}
+                should_close_on_click_outside
+                portalId='launch_modal_root'
+            >
+                <Modal.Body>
+                    <LaunchModalInfo />
+                </Modal.Body>
+                <LaunchModalButton handleOpen={handleChange} setShowDescription={setShowDescription} />
+            </Modal>
+        </DesktopWrapper>
+        <MobileWrapper>
+            <div className='launch-page-mobile'>
+                <LaunchModalInfo is_mobile />
+                <LaunchModalButton handleOpen={handleChange} setShowDescription={setShowDescription} />
+            </div>
+        </MobileWrapper>
+    </React.Suspense>
+);
+
+export default LaunchModal;