From dc32bc30d80b436df506d2840a4cc57179853391 Mon Sep 17 00:00:00 2001 From: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Date: Tue, 14 Jan 2025 16:55:52 +0400 Subject: [PATCH 1/5] fix: add addditional dropdown options for account opening reason --- .../account/src/Sections/Profile/PersonalDetails/constants.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/account/src/Sections/Profile/PersonalDetails/constants.ts b/packages/account/src/Sections/Profile/PersonalDetails/constants.ts index 66c820634ae2..1ca7387e82fb 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/constants.ts +++ b/packages/account/src/Sections/Profile/PersonalDetails/constants.ts @@ -4,4 +4,6 @@ export const account_opening_reason_list = [ { text: localize('Speculative'), value: 'Speculative' }, { text: localize('Income Earning'), value: 'Income Earning' }, { text: localize('Hedging'), value: 'Hedging' }, + { text: localize('Additional revenue'), value: 'Additional revenue' }, + { text: localize('Savings'), value: 'Savings' }, ]; From d97376f811c4459447caa67e113f7fdadf59952f Mon Sep 17 00:00:00 2001 From: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Date: Tue, 21 Jan 2025 11:35:55 +0400 Subject: [PATCH 2/5] fix: email_pop --- .../Profile/PersonalDetails/constants.ts | 2 - .../Passwords/__tests__/deriv-email.spec.tsx | 15 +----- .../Security/Passwords/deriv-email.tsx | 50 +++++++++++++++++-- packages/account/src/Styles/account.scss | 4 ++ 4 files changed, 52 insertions(+), 19 deletions(-) diff --git a/packages/account/src/Sections/Profile/PersonalDetails/constants.ts b/packages/account/src/Sections/Profile/PersonalDetails/constants.ts index 1ca7387e82fb..66c820634ae2 100644 --- a/packages/account/src/Sections/Profile/PersonalDetails/constants.ts +++ b/packages/account/src/Sections/Profile/PersonalDetails/constants.ts @@ -4,6 +4,4 @@ export const account_opening_reason_list = [ { text: localize('Speculative'), value: 'Speculative' }, { text: localize('Income Earning'), value: 'Income Earning' }, { text: localize('Hedging'), value: 'Hedging' }, - { text: localize('Additional revenue'), value: 'Additional revenue' }, - { text: localize('Savings'), value: 'Savings' }, ]; 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..b8ebb382a110 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, error, isSuccess]); + const onClickChangeEmail = () => { if (is_social_signup) { setIsUnlinkAccountModalOpen(true); } else { mutate(payload); - setIsSendEmailModalOpen(true); } }; @@ -42,6 +55,10 @@ const DerivEmail = observer(() => { setIsSendEmailModalOpen(true); }; + const onClose = () => { + setIsErrorModalOpen(false); + }; + return (
@@ -74,6 +91,31 @@ const DerivEmail = observer(() => { is_modal_when_mobile={true} />
+ {is_error_modal_open && ( + +
+ + {error?.code === 'EmailChangeFailP2PActive' ? ( + + ) : ( + + )} + + + +
+ + )} ); }); diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss index 34d7c1a951cc..5a5afa85322f 100644 --- a/packages/account/src/Styles/account.scss +++ b/packages/account/src/Styles/account.scss @@ -726,6 +726,10 @@ $MIN_HEIGHT_FLOATING: calc( } } } + &-error_text { + align-self: flex-start; + padding-left: 2.4rem; + } } &__password-wrapper { From fbcf49abe07bb9d5af8778bec22dc73ea4275136 Mon Sep 17 00:00:00 2001 From: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Date: Tue, 21 Jan 2025 13:05:21 +0400 Subject: [PATCH 3/5] fix: type --- .../Sections/Security/Passwords/deriv-email.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/account/src/Sections/Security/Passwords/deriv-email.tsx b/packages/account/src/Sections/Security/Passwords/deriv-email.tsx index b8ebb382a110..4dbdef439ac8 100644 --- a/packages/account/src/Sections/Security/Passwords/deriv-email.tsx +++ b/packages/account/src/Sections/Security/Passwords/deriv-email.tsx @@ -39,7 +39,7 @@ const DerivEmail = observer(() => { } else if (isSuccess) { setIsSendEmailModalOpen(true); } - }, [isError, error, isSuccess]); + }, [isError, isSuccess]); const onClickChangeEmail = () => { if (is_social_signup) { @@ -59,6 +59,11 @@ const DerivEmail = observer(() => { setIsErrorModalOpen(false); }; + type VerifyEmailError = { + code?: string; + message?: string; + }; + return (
@@ -91,7 +96,7 @@ const DerivEmail = observer(() => { is_modal_when_mobile={true} />
- {is_error_modal_open && ( + {is_error_modal_open && error && ( { height='200px' >
- - {error?.code === 'EmailChangeFailP2PActive' ? ( + + {(error as VerifyEmailError)?.code === 'EmailChangeFailP2PActive' ? ( ) : ( - + )} From d76faaade84d323ab67649b5cd290b5af7c1a35a Mon Sep 17 00:00:00 2001 From: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Date: Tue, 21 Jan 2025 13:47:45 +0400 Subject: [PATCH 4/5] fix: style --- .../Security/Passwords/deriv-email.tsx | 4 ++-- packages/account/src/Styles/account.scss | 24 ++++++++++++++++--- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/account/src/Sections/Security/Passwords/deriv-email.tsx b/packages/account/src/Sections/Security/Passwords/deriv-email.tsx index 4dbdef439ac8..ca08df589165 100644 --- a/packages/account/src/Sections/Security/Passwords/deriv-email.tsx +++ b/packages/account/src/Sections/Security/Passwords/deriv-email.tsx @@ -106,8 +106,8 @@ const DerivEmail = observer(() => { width='440px' height='200px' > -
- +
+ {(error as VerifyEmailError)?.code === 'EmailChangeFailP2PActive' ? ( ) : ( diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss index 5a5afa85322f..efd82bfb89f3 100644 --- a/packages/account/src/Styles/account.scss +++ b/packages/account/src/Styles/account.scss @@ -726,9 +726,27 @@ $MIN_HEIGHT_FLOATING: calc( } } } - &-error_text { - align-self: flex-start; - padding-left: 2.4rem; + + &-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-left: 2.4rem; + } + @include mobile { + height: calc(100vh - 80px); + padding: 0.4rem 0; + .dc-btn { + margin-top: 1.6rem; + } + } } } From 0207bf143906ea626a1aa952381745dc6b6ed2b2 Mon Sep 17 00:00:00 2001 From: amina-deriv <84661147+amina-deriv@users.noreply.github.com> Date: Tue, 21 Jan 2025 14:37:52 +0400 Subject: [PATCH 5/5] fix: style --- packages/account/src/Styles/account.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss index efd82bfb89f3..e85bfb38ad87 100644 --- a/packages/account/src/Styles/account.scss +++ b/packages/account/src/Styles/account.scss @@ -738,7 +738,7 @@ $MIN_HEIGHT_FLOATING: calc( } &-error_text { align-self: flex-start; - padding-left: 2.4rem; + padding-inline-start: 2.4rem; } @include mobile { height: calc(100vh - 80px);