Merge pull request binary-com#83 from suisin-deriv/suisin/UPM828/canc…

…el_phone_verification_dialog

Suisin/upm828/cancel phone verification dialog

packages/account/src/Constants/routes-config.ts

@@ -58,6 +58,7 @@ const initRoutesConfig = () => [
                     {
                         path: routes.phone_verification,
                         component: PhoneVerificationPage,
+                        getTitle: () => localize('Personal details'),
                         is_hidden: true,
                     },
                     {

packages/account/src/Sections/Profile/PhoneVerification/__test__/cancel-phone-verification-modal.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CancelPhoneVerificationModal from '../cancel-phone-verification-modal';
+
+const mock_back_router = jest.fn();
+jest.mock('react-router', () => ({
+    ...jest.requireActual('react-router'),
+    useHistory: () => ({
+        goBack: mock_back_router,
+    }),
+}));
+
+describe('CancelPhoneVerificationModal', () => {
+    let modal_root_el: HTMLElement;
+    const mockSetShowCancelModal = jest.fn();
+
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    const buttons = [/Go back/, /Yes, cancel/];
+
+    it('it should render CancelPhoneVerificationModal', () => {
+        render(
+            <CancelPhoneVerificationModal
+                should_show_cancel_verification_modal
+                setShouldShowCancelVerificationModal={mockSetShowCancelModal}
+            />
+        );
+        expect(screen.getByText(/Cancel phone number verification?/)).toBeInTheDocument();
+        expect(screen.getByText(/All details entered will be lost./)).toBeInTheDocument();
+        buttons.forEach(value => {
+            expect(screen.getByRole('button', { name: value })).toBeInTheDocument();
+        });
+    });
+
+    it('it should render only mockSetShowCancelModal when Go back is clicked', () => {
+        render(
+            <CancelPhoneVerificationModal
+                should_show_cancel_verification_modal
+                setShouldShowCancelVerificationModal={mockSetShowCancelModal}
+            />
+        );
+        const cancelButton = screen.getByRole('button', { name: buttons[0] });
+        userEvent.click(cancelButton);
+        expect(mockSetShowCancelModal).toBeCalled();
+        expect(mock_back_router).not.toBeCalled();
+    });
+
+    it('it should render mockSetShowCancelModal and mock_back_router when Yes, cancel is clicked', () => {
+        render(
+            <CancelPhoneVerificationModal
+                should_show_cancel_verification_modal
+                setShouldShowCancelVerificationModal={mockSetShowCancelModal}
+            />
+        );
+        const cancelButton = screen.getByRole('button', { name: buttons[1] });
+        userEvent.click(cancelButton);
+        expect(mockSetShowCancelModal).toBeCalled();
+        expect(mock_back_router).toBeCalled();
+    });
+});

packages/account/src/Sections/Profile/PhoneVerification/__test__/phone-verification-page.spec.tsx

@@ -1,14 +1,23 @@
-import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import PhoneVerificationPage from '../phone-verification-page';
 
 jest.mock('../confirm-your-email.tsx', () => jest.fn(() => <div>Confirm Your Email</div>));
 jest.mock('../confirm-phone-number.tsx', () => jest.fn(() => <div>Confirm Phone Number</div>));
+jest.mock('../cancel-phone-verification-modal', () => jest.fn(() => <div>Cancel Phone Verification Modal</div>));
 
 describe('ConfirmPhoneNumber', () => {
     it('should render ConfirmPhoneNumber', () => {
         render(<PhoneVerificationPage />);
         expect(screen.getByText(/Phone number verification/)).toBeInTheDocument();
         expect(screen.getByText(/Confirm Your Email/)).toBeInTheDocument();
     });
+
+    it('should display cancel phone verification modal when back button is clicked', () => {
+        render(<PhoneVerificationPage />);
+        const backButton = screen.getByTestId('dt_phone_verification_back_btn');
+        userEvent.click(backButton);
+        expect(screen.getByText(/Cancel Phone Verification Modal/)).toBeInTheDocument();
+    });
 });

packages/account/src/Sections/Profile/PhoneVerification/cancel-phone-verification-modal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button, Text } from '@deriv-com/quill-ui';
+import { Modal } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { useHistory } from 'react-router';
+
+type TCancelPhoneVerificationModal = {
+    should_show_cancel_verification_modal: boolean;
+    setShouldShowCancelVerificationModal: (value: boolean) => void;
+};
+
+const CancelPhoneVerificationModal = ({
+    should_show_cancel_verification_modal,
+    setShouldShowCancelVerificationModal,
+}: TCancelPhoneVerificationModal) => {
+    const history = useHistory();
+    const handleCancelButton = () => {
+        setShouldShowCancelVerificationModal(false);
+        history.goBack();
+    };
+
+    return (
+        <Modal className='phone-verification__cancel-modal' is_open={should_show_cancel_verification_modal}>
+            <Modal.Body>
+                <div className='phone-verification__cancel-modal--contents'>
+                    <Text bold>
+                        <Localize i18n_default_text='Cancel phone number verification?' />
+                    </Text>
+                    <Text>
+                        <Localize i18n_default_text='All details entered will be lost.' />
+                    </Text>
+                </div>
+            </Modal.Body>
+            <Modal.Footer>
+                <div className='phone-verification__cancel-modal--buttons'>
+                    <Button
+                        color='black'
+                        fullWidth
+                        size='lg'
+                        onClick={() => setShouldShowCancelVerificationModal(false)}
+                    >
+                        <Text color='white' bold>
+                            <Localize i18n_default_text='Go back' />
+                        </Text>
+                    </Button>
+                    <Button variant='secondary' color='black' fullWidth size='lg' onClick={handleCancelButton}>
+                        <Text bold>
+                            <Localize i18n_default_text='Yes, cancel' />
+                        </Text>
+                    </Button>
+                </div>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default CancelPhoneVerificationModal;

packages/account/src/Sections/Profile/PhoneVerification/phone-verification-page.tsx

@@ -4,23 +4,27 @@ import { LabelPairedArrowLeftCaptionFillIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/quill-ui';
 import { Localize } from '@deriv/translations';
 import ConfirmPhoneNumber from './confirm-phone-number';
-import { useHistory } from 'react-router';
-import { routes } from '@deriv/shared';
 import ConfirmYourEmail from './confirm-your-email';
+import CancelPhoneVerificationModal from './cancel-phone-verification-modal';
 
 const PhoneVerificationPage = () => {
     const [show_email_verification, shouldShowEmailVerification] = React.useState(true);
-    const history = useHistory();
+    const [should_show_cancel_verification_modal, setShouldShowCancelVerificationModal] = React.useState(false);
     const handleBackButton = () => {
-        history.push(routes.personal_details);
+        setShouldShowCancelVerificationModal(true);
     };
 
     return (
         <div>
+            <CancelPhoneVerificationModal
+                should_show_cancel_verification_modal={should_show_cancel_verification_modal}
+                setShouldShowCancelVerificationModal={setShouldShowCancelVerificationModal}
+            />
             <div className='phone-verification__redirect_button'>
                 <LabelPairedArrowLeftCaptionFillIcon
                     width={24}
                     height={24}
+                    data-testid='dt_phone_verification_back_btn'
                     className='phone-verification__redirect_button--icon'
                     onClick={handleBackButton}
                 />

packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss

@@ -1,4 +1,19 @@
 .phone-verification {
+    &__cancel-modal {
+        &--contents {
+            display: flex;
+            flex-direction: column;
+            gap: 3.2rem;
+        }
+        &--buttons {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            gap: 0.8rem;
+            padding: 0 1.6rem 1.6rem;
+        }
+    }
+
     &__redirect_button {
         display: flex;
         align-items: center;
@@ -57,7 +72,7 @@
                 margin-top: 2.4rem;
                 display: flex;
                 flex-direction: column;
-                align-items: center;
+                text-align: center;
             }
 
             &-otp-container {