Amina/email pop (#18008)

* fix: add addditional dropdown options for account opening reason

* fix: email_pop

* fix: type

* fix: style

* fix: style

Author: amina-deriv

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');

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<ReturnType<typeof useVerifyEmail>['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 (
         <Fragment>
             <div className='account__passwords-wrapper'>
@@ -74,6 +96,31 @@ const DerivEmail = observer(() => {
                     is_modal_when_mobile={true}
                 />
             </div>
+            {is_error_modal_open && error && (
+                <Modal
+                    is_open={is_error_modal_open}
+                    has_close_icon
+                    should_header_stick_body
+                    title={localize('Email change currently unavailable')}
+                    toggleModal={onClose}
+                    width='440px'
+                    height='200px'
+                >
+                    <div className='account__email-unhandled-error'>
+                        <Text className='account__email-unhandled-error-error_text' as='p' size='xs'>
+                            {(error as VerifyEmailError)?.code === 'EmailChangeFailP2PActive' ? (
+                                <Localize i18n_default_text='Complete P2P orders and deactivate ads to proceed.' />
+                            ) : (
+                                <Localize i18n_default_text={(error as VerifyEmailError)?.message || ''} />
+                            )}
+                        </Text>
+
+                        <Button onClick={onClose} has_effect primary large>
+                            <Localize i18n_default_text='OK' />
+                        </Button>
+                    </div>
+                </Modal>
+            )}
         </Fragment>
     );
 });

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 {