From 0ea1f3d7a2ceb12777b214bbe132a500c0a123fd Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 17 May 2024 12:49:18 +0400 Subject: [PATCH 1/4] feat: email link expired modal --- .../EmailLinkExpiredModal.scss | 14 ++++++++ .../EmailLinkExpiredModal.tsx | 36 +++++++++++++++++++ .../__tests__/EmailLinkkExpiredModal.spec.tsx | 27 ++++++++++++++ .../Modals/EmailLinkExpiredModal/index.ts | 1 + src/components/Modals/index.ts | 1 + .../screens/BuySellTable/BuySellTable.tsx | 9 ++++- 6 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.scss create mode 100644 src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx create mode 100644 src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkkExpiredModal.spec.tsx create mode 100644 src/components/Modals/EmailLinkExpiredModal/index.ts 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..07b16f87 --- /dev/null +++ b/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx @@ -0,0 +1,36 @@ +import { DerivLightIcEmailSentExpiredIcon } from '@deriv/quill-icons'; +import { Localize } from '@deriv-com/translations'; +import { Button, Modal, Text } from '@deriv-com/ui'; +import './EmailLinkExpiredModal.scss'; + +type TEmailLinkExpiredModal = { + isModalOpen: boolean; + onClickHandler: () => void; + onRequestClose: () => void; +}; + +const EmailLinkExpiredModal = ({ isModalOpen, onClickHandler, onRequestClose }: TEmailLinkExpiredModal) => { + return ( + + + + + + + + + + + + + ); +}; + +export default EmailLinkExpiredModal; diff --git a/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkkExpiredModal.spec.tsx b/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkkExpiredModal.spec.tsx new file mode 100644 index 00000000..17619081 --- /dev/null +++ b/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkkExpiredModal.spec.tsx @@ -0,0 +1,27 @@ +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(), +}; + +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'; diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx index a640e17b..1be53cd3 100644 --- a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx +++ b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { RadioGroupFilterModal } from '@/components/Modals'; +import { EmailLinkExpiredModal, RadioGroupFilterModal } from '@/components/Modals'; import { ADVERT_TYPE, BUY_SELL, SORT_BY_LIST } from '@/constants'; import { api } from '@/hooks'; import { useModalManager, useQueryString } from '@/hooks/custom-hooks'; @@ -16,6 +16,10 @@ const BuySellTable = () => { const { queryString, setQueryString } = useQueryString(); const activeTab = queryString.tab || ADVERT_TYPE.BUY; + useEffect(() => { + showModal('EmailLinkExpiredModal'); + }, []); + const [selectedCurrency, setSelectedCurrency] = useState(p2pSettingsData?.localCurrency || ''); const [sortDropdownValue, setSortDropdownValue] = useState('rate'); const [searchValue, setSearchValue] = useState(''); @@ -83,6 +87,9 @@ const BuySellTable = () => { selected={sortDropdownValue as string} /> )} + {isModalOpenFor('EmailLinkExpiredModal') && ( + + )} ); }; From 0f3e2fb0ef35a165151fb5a46dde0959ef66e67f Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 17 May 2024 12:51:40 +0400 Subject: [PATCH 2/4] fix: remove changes in buy/sell --- src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx index 1be53cd3..a640e17b 100644 --- a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx +++ b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { EmailLinkExpiredModal, RadioGroupFilterModal } from '@/components/Modals'; +import { RadioGroupFilterModal } from '@/components/Modals'; import { ADVERT_TYPE, BUY_SELL, SORT_BY_LIST } from '@/constants'; import { api } from '@/hooks'; import { useModalManager, useQueryString } from '@/hooks/custom-hooks'; @@ -16,10 +16,6 @@ const BuySellTable = () => { const { queryString, setQueryString } = useQueryString(); const activeTab = queryString.tab || ADVERT_TYPE.BUY; - useEffect(() => { - showModal('EmailLinkExpiredModal'); - }, []); - const [selectedCurrency, setSelectedCurrency] = useState(p2pSettingsData?.localCurrency || ''); const [sortDropdownValue, setSortDropdownValue] = useState('rate'); const [searchValue, setSearchValue] = useState(''); @@ -87,9 +83,6 @@ const BuySellTable = () => { selected={sortDropdownValue as string} /> )} - {isModalOpenFor('EmailLinkExpiredModal') && ( - - )} ); }; From 5d3e744f7acca366fa43a72bd2c75de96c895c43 Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 17 May 2024 13:03:16 +0400 Subject: [PATCH 3/4] fix: icon size fix --- .../Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx | 6 ++++-- ...ExpiredModal.spec.tsx => EmailLinkExpiredModal.spec.tsx} | 0 2 files changed, 4 insertions(+), 2 deletions(-) rename src/components/Modals/EmailLinkExpiredModal/__tests__/{EmailLinkkExpiredModal.spec.tsx => EmailLinkExpiredModal.spec.tsx} (100%) diff --git a/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx b/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx index 07b16f87..9e9d4dda 100644 --- a/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx +++ b/src/components/Modals/EmailLinkExpiredModal/EmailLinkExpiredModal.tsx @@ -1,6 +1,6 @@ import { DerivLightIcEmailSentExpiredIcon } from '@deriv/quill-icons'; import { Localize } from '@deriv-com/translations'; -import { Button, Modal, Text } from '@deriv-com/ui'; +import { Button, Modal, Text, useDevice } from '@deriv-com/ui'; import './EmailLinkExpiredModal.scss'; type TEmailLinkExpiredModal = { @@ -10,6 +10,8 @@ type TEmailLinkExpiredModal = { }; const EmailLinkExpiredModal = ({ isModalOpen, onClickHandler, onRequestClose }: TEmailLinkExpiredModal) => { + const { isMobile } = useDevice(); + const iconSize = isMobile ? 96 : 128; return ( - + diff --git a/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkkExpiredModal.spec.tsx b/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx similarity index 100% rename from src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkkExpiredModal.spec.tsx rename to src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx From de392d5e6de34bfef069c35937e684e221431fe6 Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 17 May 2024 13:04:42 +0400 Subject: [PATCH 4/4] fix: add mock for usedevice --- .../__tests__/EmailLinkExpiredModal.spec.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx b/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx index 17619081..655b46a3 100644 --- a/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx +++ b/src/components/Modals/EmailLinkExpiredModal/__tests__/EmailLinkExpiredModal.spec.tsx @@ -8,6 +8,13 @@ const mockProps = { 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();