diff --git a/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.scss b/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.scss new file mode 100644 index 00000000..a3e91d19 --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx b/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx new file mode 100644 index 00000000..9e9d4dda --- /dev/null +++ b/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 ( + + + + + + + + + + + + + ); +}; + +export default EmailLinkExpiredModal; diff --git a/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx b/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx new file mode 100644 index 00000000..655b46a3 --- /dev/null +++ b/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(); + 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(); + const button = screen.getByRole('button', { name: 'Get new link' }); + await userEvent.click(button); + expect(mockProps.onClickHandler).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/components/Modals/EmailLinkExpiredModal/index.ts b/src/components/Modals/EmailLinkExpiredModal/index.ts new file mode 100644 index 00000000..27997a96 --- /dev/null +++ b/src/components/Modals/EmailLinkExpiredModal/index.ts @@ -0,0 +1 @@ +export { default as EmailLinkExpiredModal } from './EmailLinkExpiredModal'; diff --git a/src/components/Modals/index.ts b/src/components/Modals/index.ts index aaa17e95..f98f6fdf 100644 --- a/src/components/Modals/index.ts +++ b/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';