diff --git a/packages/account/src/Sections/Security/Passwords/__tests__/deriv-email.spec.tsx b/packages/account/src/Sections/Security/Passwords/__tests__/deriv-email.spec.tsx index 93ded3ebd179..2063c025017c 100644 --- a/packages/account/src/Sections/Security/Passwords/__tests__/deriv-email.spec.tsx +++ b/packages/account/src/Sections/Security/Passwords/__tests__/deriv-email.spec.tsx @@ -57,29 +57,18 @@ describe('DerivEmail', () => { expect(el_button).not.toBeInTheDocument(); }); - it('should not display unlink account modal when not associated with social media', async () => { - renderComponent({}); - const el_button = screen.getByRole('button', { name: /Change email/i }); - userEvent.click(el_button); - let el_modal; - await waitFor(() => { - el_modal = screen.getByText('We’ve sent you an email'); - }); - expect(el_modal).toBeInTheDocument(); - }); - it('should display unlink account modal when button is clicked', async () => { const store_config = mockStore({ client: { social_identity_provider: 'Google', is_social_signup: true } }); renderComponent({ store_config }); const el_button = screen.getByRole('button', { name: /Change email/i }); - userEvent.click(el_button); + await userEvent.click(el_button); let el_modal; await waitFor(() => { el_modal = screen.getByText('Change your login email'); expect(el_modal).toBeInTheDocument(); }); const el_unlink_btn = screen.getByRole('button', { name: /Unlink from Google/i }); - userEvent.click(el_unlink_btn); + await userEvent.click(el_unlink_btn); await waitFor(() => { el_modal = screen.getByText('We’ve sent you an email'); diff --git a/packages/account/src/Sections/Security/Passwords/deriv-email.tsx b/packages/account/src/Sections/Security/Passwords/deriv-email.tsx index be1738a8c80b..ca08df589165 100644 --- a/packages/account/src/Sections/Security/Passwords/deriv-email.tsx +++ b/packages/account/src/Sections/Security/Passwords/deriv-email.tsx @@ -1,11 +1,14 @@ -import { Fragment, useState } from 'react'; -import { Text } from '@deriv/components'; +import { Fragment, useEffect, useState } from 'react'; + import { useVerifyEmail } from '@deriv/api'; +import { Button, Modal, Text } from '@deriv/components'; import { toTitleCase } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { Localize, useTranslations } from '@deriv-com/translations'; + import SentEmailModal from '../../../Components/sent-email-modal'; import UnlinkAccountModal from '../../../Components/unlink-account-modal'; + import EmailPasswordSection from './email-password-section'; type TVerifyEmailPayload = Parameters['mutate']>[0]; @@ -20,19 +23,29 @@ const DerivEmail = observer(() => { common: { is_from_derivgo }, client: { social_identity_provider, is_social_signup, email }, } = useStore(); - const { mutate } = useVerifyEmail(); + + const { mutate, isError, error, isSuccess } = useVerifyEmail(); const { localize } = useTranslations(); const [is_unlink_account_modal_open, setIsUnlinkAccountModalOpen] = useState(false); const [is_send_email_modal_open, setIsSendEmailModalOpen] = useState(false); + const [is_error_modal_open, setIsErrorModalOpen] = useState(false); const payload: TVerifyEmailPayload = { verify_email: email, type: 'request_email' }; + useEffect(() => { + if (isError) { + setIsErrorModalOpen(true); + setIsSendEmailModalOpen(false); + } else if (isSuccess) { + setIsSendEmailModalOpen(true); + } + }, [isError, isSuccess]); + const onClickChangeEmail = () => { if (is_social_signup) { setIsUnlinkAccountModalOpen(true); } else { mutate(payload); - setIsSendEmailModalOpen(true); } }; @@ -42,6 +55,15 @@ const DerivEmail = observer(() => { setIsSendEmailModalOpen(true); }; + const onClose = () => { + setIsErrorModalOpen(false); + }; + + type VerifyEmailError = { + code?: string; + message?: string; + }; + return (
@@ -74,6 +96,31 @@ const DerivEmail = observer(() => { is_modal_when_mobile={true} />
+ {is_error_modal_open && error && ( + +
+ + {(error as VerifyEmailError)?.code === 'EmailChangeFailP2PActive' ? ( + + ) : ( + + )} + + + +
+
+ )}
); }); diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss index 34d7c1a951cc..e85bfb38ad87 100644 --- a/packages/account/src/Styles/account.scss +++ b/packages/account/src/Styles/account.scss @@ -726,6 +726,28 @@ $MIN_HEIGHT_FLOATING: calc( } } } + + &-unhandled-error { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0.8rem 0; + .dc-btn { + margin-top: 2.4rem; + } + &-error_text { + align-self: flex-start; + padding-inline-start: 2.4rem; + } + @include mobile { + height: calc(100vh - 80px); + padding: 0.4rem 0; + .dc-btn { + margin-top: 1.6rem; + } + } + } } &__password-wrapper {