[FEQ] / Ameerul / FEQ-1716 Create the email verification modal (deriv-com#14132)

* feat: added email verification modal

* chore: added comment to use epoch value from BE when implementing Modal

* chore: added TODO

Author: ameerul-deriv

packages/p2p-v2/src/components/Modals/EmailVerificationModal/EmailVerificationModal.scss

@@ -0,0 +1,22 @@
+.p2p-v2-email-verification-modal {
+    height: auto;
+    width: 44rem;
+    border-radius: 8px;
+
+    @include mobile {
+        max-width: calc(100vw - 3.2rem);
+    }
+
+    // TODO: Remove this when Button allows to pass prop to prevent hover styles
+    &__button {
+        &:hover {
+            // stylelint-disable-next-line declaration-no-important
+            background-color: transparent !important;
+
+            & > span {
+                // stylelint-disable-next-line declaration-no-important
+                color: #ff444f !important;
+            }
+        }
+    }
+}

packages/p2p-v2/src/components/Modals/EmailVerificationModal/EmailVerificationModal.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import {
+    DerivLightIcEmailSentIcon,
+    DerivLightIcFirewallEmailPasskeyIcon,
+    DerivLightIcSpamEmailPasskeyIcon,
+    DerivLightIcTypoEmailPasskeyIcon,
+    DerivLightIcWrongEmailPasskeyIcon,
+} from '@deriv/quill-icons';
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
+import './EmailVerificationModal.scss';
+
+const reasons = [
+    {
+        icon: DerivLightIcSpamEmailPasskeyIcon,
+        text: 'The email is in your spam folder (sometimes things get lost there).',
+    },
+    {
+        icon: DerivLightIcWrongEmailPasskeyIcon,
+        text: 'You accidentally gave us another email address (usually a work or a personal one instead of the one you meant).',
+    },
+    {
+        icon: DerivLightIcTypoEmailPasskeyIcon,
+        text: 'The email address you entered had a mistake or typo (happens to the best of us).',
+    },
+    {
+        icon: DerivLightIcFirewallEmailPasskeyIcon,
+        text: 'We can’t deliver the email to this address (usually because of firewalls or filtering).',
+    },
+];
+
+type TEmailVerificationModalProps = {
+    isModalOpen: boolean;
+    onRequestClose: () => void;
+};
+
+const EmailVerificationModal = ({ isModalOpen, onRequestClose }: TEmailVerificationModalProps) => {
+    const [shouldShowReasons, setShouldShowReasons] = useState<boolean>(false);
+    const { isMobile } = useDevice();
+    const emailIconSize = isMobile ? 100 : 128;
+    const reasonIconSize = isMobile ? 32 : 36;
+
+    return (
+        <Modal
+            ariaHideApp={false}
+            className='p2p-v2-email-verification-modal'
+            isOpen={isModalOpen}
+            onRequestClose={onRequestClose}
+        >
+            <Modal.Header className='mt-2' hideBorder onRequestClose={onRequestClose} />
+            <Modal.Body className='flex flex-col items-center justify-center lg:gap-[2.4rem] gap-8 lg:px-10 lg:pb-10 p-8 pt-0'>
+                <DerivLightIcEmailSentIcon height={emailIconSize} width={emailIconSize} />
+                <Text align='center' weight='bold'>
+                    Has the buyer paid you?
+                </Text>
+                <Text align='center' size={isMobile ? 'sm' : 'md'}>
+                    Releasing funds before receiving payment may result in losses. Check your email and follow the
+                    instructions <strong>within 10 minutes</strong> to release the funds.
+                </Text>
+                <Button
+                    className='p2p-v2-email-verification-modal__button'
+                    onClick={() => setShouldShowReasons(true)}
+                    variant='ghost'
+                >
+                    I didn’t receive the email
+                </Button>
+                {shouldShowReasons && (
+                    <div className='flex flex-col w-full gap-8'>
+                        {reasons.map(reason => (
+                            <div className='grid grid-cols-[11%_89%] gap-4 items-center' key={reason.text}>
+                                <reason.icon height={reasonIconSize} width={reasonIconSize} />
+                                <Text size='xs'>{reason.text}</Text>
+                            </div>
+                        ))}
+                        <div className='flex justify-center'>
+                            {/* TODO: Replace 59s with epoch value (verification_next_request) from BE response
+                             * and disable the button if the epoch value is not reached yet
+                             */}
+                            <Button size='md'>Resend email 59s</Button>
+                        </div>
+                    </div>
+                )}
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default EmailVerificationModal;

packages/p2p-v2/src/components/Modals/EmailVerificationModal/__tests__/EmailVerificationModal.spec.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import EmailVerificationModal from '../EmailVerificationModal';
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
+const mockProps = {
+    isModalOpen: true,
+    onRequestClose: jest.fn(),
+};
+
+describe('<EmailVerificationModal />', () => {
+    it('should render the EmailVerificationModal', () => {
+        render(<EmailVerificationModal {...mockProps} />);
+
+        expect(screen.getByText('Has the buyer paid you?')).toBeInTheDocument();
+        expect(
+            screen.queryByText(
+                /Releasing funds before receiving payment may result in losses. Check your email and follow the instructions/
+            )
+        ).toBeInTheDocument();
+        expect(screen.queryByText('within 10 minutes', { selector: 'strong' })).toBeInTheDocument();
+        expect(screen.queryByText(/to release the funds./)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'I didn’t receive the email' })).toBeInTheDocument();
+    });
+
+    it('should show reasons if I didn’t receive the email button is clicked', () => {
+        render(<EmailVerificationModal {...mockProps} />);
+
+        const didntReceiveEmailButton = screen.getByRole('button', { name: 'I didn’t receive the email' });
+
+        expect(
+            screen.queryByText('The email is in your spam folder (sometimes things get lost there).')
+        ).not.toBeInTheDocument();
+        expect(
+            screen.queryByText(
+                'You accidentally gave us another email address (usually a work or a personal one instead of the one you meant).'
+            )
+        ).not.toBeInTheDocument();
+        expect(
+            screen.queryByText('The email address you entered had a mistake or typo (happens to the best of us).')
+        ).not.toBeInTheDocument();
+        expect(
+            screen.queryByText(
+                'We can’t deliver the email to this address (usually because of firewalls or filtering).'
+            )
+        ).not.toBeInTheDocument();
+
+        userEvent.click(didntReceiveEmailButton);
+
+        expect(
+            screen.getByText('The email is in your spam folder (sometimes things get lost there).')
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'You accidentally gave us another email address (usually a work or a personal one instead of the one you meant).'
+            )
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText('The email address you entered had a mistake or typo (happens to the best of us).')
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText('We can’t deliver the email to this address (usually because of firewalls or filtering).')
+        ).toBeInTheDocument();
+    });
+});

packages/p2p-v2/src/components/Modals/EmailVerificationModal/index.ts

@@ -0,0 +1 @@
+export { default as EmailVerificationModal } from './EmailVerificationModal';

packages/p2p-v2/src/components/Modals/index.ts

@@ -2,6 +2,7 @@ export * from './AdErrorTooltipModal';
 export * from './AvailableP2PBalanceModal';
 export * from './BlockUnblockUserModal';
 export * from './DailyLimitModal';
+export * from './EmailVerificationModal';
 export * from './FilterModal';
 export * from './MyAdsDeleteModal';
 export * from './NicknameModal';