Suisin/upm826/success modal phone number verification

packages/account/src/Sections/Profile/PhoneVerification/__test__/phone-number-verified-modal.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import PhoneNumberVerifiedModal from '../phone-number-verified-modal';
+import { MemoryRouter } from 'react-router';
+import { routes } from '@deriv/shared';
+
+const mockHistoryPush = jest.fn();
+
+jest.mock('react-router', () => ({
+    ...jest.requireActual('react-router'),
+    useHistory: () => ({
+        push: mockHistoryPush,
+    }),
+}));
+
+jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useState: jest.fn(),
+}));
+
+describe('PhoneNumberVerifiedModal', () => {
+    let modal_root_el: HTMLElement;
+
+    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 renderModal = () => {
+        render(
+            <MemoryRouter>
+                <PhoneNumberVerifiedModal />
+            </MemoryRouter>
+        );
+    };
+
+    it('it should render PhoneNumberVerifiedModal', () => {
+        (React.useState as jest.Mock).mockReturnValue([true, jest.fn()]);
+        renderModal();
+        expect(screen.getByText(/Verification successful/)).toBeInTheDocument();
+        expect(screen.getByText(/That's it! Your number is verified./)).toBeInTheDocument();
+    });
+
+    it('it should render setShouldShowPhoneNumberVerifiedModal when done is clicked', () => {
+        const setState = jest.fn();
+        (React.useState as jest.Mock).mockReturnValue([true, setState]);
+        renderModal();
+        const doneButton = screen.getByRole('button', { name: /Done/ });
+        userEvent.click(doneButton);
+        expect(setState).toBeCalled();
+        expect(mockHistoryPush).toHaveBeenCalledWith(routes.personal_details);
+    });
+});

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

@@ -6,6 +6,7 @@ import PhoneVerificationPage from '../phone-verification-page';
 jest.mock('../otp-verification.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>));
+jest.mock('../phone-number-verified-modal', () => jest.fn(() => <div>Phone Number Verified Modal</div>));
 
 describe('ConfirmPhoneNumber', () => {
     it('should render ConfirmPhoneNumber', () => {

packages/account/src/Sections/Profile/PhoneVerification/phone-number-verified-modal.tsx

@@ -0,0 +1,41 @@
+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';
+import { routes } from '@deriv/shared';
+
+const PhoneNumberVerifiedModal = () => {
+    const [should_show_phone_number_verified_modal, setShouldShowPhoneNumberVerifiedModal] = React.useState(false);
+    const history = useHistory();
+    const handleDoneButton = () => {
+        setShouldShowPhoneNumberVerifiedModal(false);
+        history.push(routes.personal_details);
+    };
+
+    return (
+        <Modal className='phone-verification__verified-modal' is_open={should_show_phone_number_verified_modal}>
+            <Modal.Body>
+                <div className='phone-verification__verified-modal--contents'>
+                    <Text bold>
+                        <Localize i18n_default_text='Verification successful' />
+                    </Text>
+                    <Text>
+                        <Localize i18n_default_text="That's it! Your number is verified." />
+                    </Text>
+                </div>
+            </Modal.Body>
+            <Modal.Footer>
+                <div className='phone-verification__verified-modal--buttons'>
+                    <Button color='black' fullWidth size='lg' onClick={handleDoneButton}>
+                        <Text color='white' bold>
+                            <Localize i18n_default_text='Done' />
+                        </Text>
+                    </Button>
+                </div>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default PhoneNumberVerifiedModal;

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

@@ -6,6 +6,7 @@ import { Localize } from '@deriv/translations';
 import ConfirmPhoneNumber from './confirm-phone-number';
 import OTPVerification from './otp-verification';
 import CancelPhoneVerificationModal from './cancel-phone-verification-modal';
+import PhoneNumberVerifiedModal from './phone-number-verified-modal';
 
 const PhoneVerificationPage = () => {
     const [otp_verification, setOtpVerification] = React.useState({ show: true, phone_verification_type: '' });
@@ -16,6 +17,7 @@ const PhoneVerificationPage = () => {
 
     return (
         <div>
+            <PhoneNumberVerifiedModal />
             <CancelPhoneVerificationModal
                 should_show_cancel_verification_modal={should_show_cancel_verification_modal}
                 setShouldShowCancelVerificationModal={setShouldShowCancelVerificationModal}

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

@@ -1,4 +1,5 @@
 .phone-verification {
+    &__verified-modal,
     &__cancel-modal {
         &--contents {
             display: flex;