feat: email link expired modal

src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.scss

@@ -0,0 +1,14 @@
+.email-link-expired-modal {
+    @include default-modal;
+
+    &__body {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding: 2.4rem 2.4rem 0;
+
+        @include mobile {
+            padding: 1.6rem 1.6rem 0;
+        }
+    }
+}

src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx

@@ -0,0 +1,38 @@
+import { DerivLightIcEmailSentExpiredIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
+import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
+import './EmailLinkExpiredModal.scss';
+
+type TEmailLinkExpiredModal = {
+    isModalOpen: boolean;
+    onClickHandler: () => void;
+    onRequestClose: () => void;
+};
+
+const EmailLinkExpiredModal = ({ isModalOpen, onClickHandler, onRequestClose }: TEmailLinkExpiredModal) => {
+    const { isMobile } = useDevice();
+    const iconSize = isMobile ? 96 : 128;
+    return (
+        <Modal
+            ariaHideApp={false}
+            className='email-link-expired-modal'
+            isOpen={isModalOpen}
+            onRequestClose={onRequestClose}
+        >
+            <Modal.Header hideBorder onRequestClose={onRequestClose} />
+            <Modal.Body className='email-link-expired-modal__body'>
+                <DerivLightIcEmailSentExpiredIcon height={iconSize} width={iconSize} />
+                <Text align='center' className='flex justify-center mt-[3.6rem]' weight='bold'>
+                    <Localize i18n_default_text='The verification link appears to be invalid. Hit the button below to request for a new one' />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='justify-center lg:py-[2.4rem]' hideBorder>
+                <Button onClick={onClickHandler} size='lg' textSize='sm'>
+                    <Localize i18n_default_text='Get new link' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default EmailLinkExpiredModal;

src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import EmailLinkExpiredModal from '../EmailLinkExpiredModal';
+
+const mockProps = {
+    isModalOpen: true,
+    onClickHandler: jest.fn(),
+    onRequestClose: jest.fn(),
+};
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({
+        isMobile: false,
+    }),
+}));
+
+describe('EmailLinkExpiredModal', () => {
+    it('should render the modal as expected', () => {
+        render(<EmailLinkExpiredModal {...mockProps} />);
+        expect(
+            screen.getByText(
+                'The verification link appears to be invalid. Hit the button below to request for a new one'
+            )
+        ).toBeInTheDocument();
+        expect(screen.getByText('Get new link')).toBeInTheDocument();
+    });
+    it('should handle onClickHandler', async () => {
+        render(<EmailLinkExpiredModal {...mockProps} />);
+        const button = screen.getByRole('button', { name: 'Get new link' });
+        await userEvent.click(button);
+        expect(mockProps.onClickHandler).toHaveBeenCalledTimes(1);
+    });
+});

src/components/Modals/EmailLinkExpiredModal/index.ts

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

src/components/Modals/index.ts

@@ -9,6 +9,7 @@ export * from './AvailableP2PBalanceModal';
 export * from './BlockUnblockUserModal';
 export * from './DailyLimitModal';
 export * from './EmailLinkBlockedModal';
+export * from './EmailLinkExpiredModal';
 export * from './EmailLinkVerifiedModal';
 export * from './EmailVerificationModal';
 export * from './ErrorModal';