add reset email modal

packages/account/src/Components/sent-email-modal/sent-email-modal.jsx

@@ -33,7 +33,7 @@ const getNoEmailContentStrings = () => {
     ];
 };
 
-const SentEmailModal = ({ identifier_title, is_open, onClose, onClickSendEmail }) => {
+const SentEmailModal = ({ identifier_title, is_open, onClose, onClickSendEmail, has_live_chat = false }) => {
     const getSubtitle = () => {
         let subtitle = '';
         switch (identifier_title) {
@@ -70,7 +70,7 @@ const SentEmailModal = ({ identifier_title, is_open, onClose, onClickSendEmail }
         window.LiveChatWidget?.call('maximize');
     };
 
-    const live_chat = (
+    const live_chat = has_live_chat ? (
         <Localize
             i18n_default_text="Still did'nt get the email? Please contact us via <0>live chat.</0>"
             components={[
@@ -85,7 +85,7 @@ const SentEmailModal = ({ identifier_title, is_open, onClose, onClickSendEmail }
                 </span>,
             ]}
         />
-    );
+    ) : null;
 
     const sent_email_template = (
         <SendEmailTemplate
@@ -157,6 +157,7 @@ SentEmailModal.propTypes = {
     is_unlink_modal: PropTypes.bool,
     onClose: PropTypes.func,
     onClickSendEmail: PropTypes.func,
+    has_live_chat: PropTypes.bool,
 };
 
 export default SentEmailModal;

packages/account/src/Components/unlink-account-modal/index.js

@@ -0,0 +1,3 @@
+import UnlinkAccountModal from './unlink-account-modal.jsx';
+
+export default UnlinkAccountModal;

packages/account/src/Components/unlink-account-modal/unlink-account-modal.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, Text, Icon } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
+
+const UnlinkAccountModal = ({ onClose, is_open, identifier_title, onClickSendEmail }) => {
+    const onClickUnlinkButton = () => {
+        onClose();
+        onClickSendEmail();
+    };
+
+    return (
+        <Modal
+            className={'unlink-account__modal'}
+            is_open={is_open}
+            has_close_icon
+            toggleModal={onClose}
+            width='440px'
+            title=''
+        >
+            <Modal.Body>
+                <div onClick={onClose} className='unlink-account__modal-close'>
+                    <Icon icon='IcCross' />
+                </div>
+                <div className='unlink-account__modal-icon'>
+                    <Icon icon='IcEmailChanged' size={128} />
+                </div>
+                <div className='unlink-account__modal-content'>
+                    <Text className='unlink-account__modal-title' weight='bold' size='s'>
+                        <Localize i18n_default_text='Change your login email' />
+                    </Text>
+                    <Text className='unlink-account__modal-description' size='xs'>
+                        <Localize
+                            i18n_default_text="To change yout email address, you'll first need to unlink your emain address form your {{identifier_title}} account."
+                            values={{ identifier_title }}
+                        />
+                    </Text>
+                </div>
+            </Modal.Body>
+            <Modal.Footer className='unlink-account__footer'>
+                <Button onClick={onClose} has_effect text={localize('Cancel')} secondary large />
+                <Button onClick={onClickUnlinkButton} has_effect primary large>
+                    <Localize i18n_default_text='Unlink from {{identifier_title}}' values={{ identifier_title }} />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+UnlinkAccountModal.prototypes = {
+    onClose: PropTypes.func,
+    is_open: PropTypes.bool,
+    identifier_title: PropTypes.string,
+    onClickSendEmail: PropTypes.func,
+};
+
+export default UnlinkAccountModal;

packages/account/src/Sections/Security/Passwords/deriv-email.jsx

@@ -2,22 +2,29 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik';
 import { Button, Text, Input } from '@deriv/components';
-import { WS } from '@deriv/shared';
+import { WS, toTitleCase } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import FormSubHeader from 'Components/form-sub-header';
 import SentEmailModal from 'Components/sent-email-modal';
+import UnlinkAccountModal from 'Components/unlink-account-modal';
 
-const DerivEmail = ({ email }) => {
-    const [is_sent_email_modal_open, setIsSentEmailModalOpen] = React.useState(false);
+const DerivEmail = ({ email, social_identity_provider }) => {
+    const [is_unlink_account_modal_open, setIsUnlinkAccountModalOpen] = React.useState(false);
+    const [is_send_email_modal_open, setIsSendEmaliMldalOpen] = React.useState(false);
 
-    const onClickResendEmail = () => {
-        WS.verifyEmail(email, 'request_email');
-        // setIsSentEmailModalOpen(false);
+    const onClickChangeEmail = () => {
+        setIsUnlinkAccountModalOpen(true);
     };
 
     const onClickSendEmail = () => {
         WS.verifyEmail(email, 'request_email');
-        setIsSentEmailModalOpen(true);
+        setIsUnlinkAccountModalOpen(false);
+        setIsSendEmaliMldalOpen(true);
+    };
+
+    const onClickResendEmail = () => {
+        WS.verifyEmail(email, 'request_email');
+        setIsUnlinkAccountModalOpen(false);
     };
 
     return (
@@ -45,9 +52,9 @@ const DerivEmail = ({ email }) => {
                         </fieldset>
                     </Formik>
                     <Button
-                        className='email-change_-button'
+                        className='email-change_button'
                         type='submit'
-                        onClick={onClickSendEmail}
+                        onClick={onClickChangeEmail}
                         has_effect
                         is_disabled={false}
                         is_loading={false}
@@ -56,11 +63,18 @@ const DerivEmail = ({ email }) => {
                         primary
                     />
                 </div>
+                <UnlinkAccountModal
+                    is_open={is_unlink_account_modal_open}
+                    onClose={() => setIsUnlinkAccountModalOpen(false)}
+                    identifier_title={toTitleCase(social_identity_provider)}
+                    onClickSendEmail={onClickSendEmail}
+                />
                 <SentEmailModal
-                    is_open={is_sent_email_modal_open}
-                    onClose={() => setIsSentEmailModalOpen(false)}
+                    is_open={is_send_email_modal_open}
+                    onClose={() => setIsSendEmaliMldalOpen(false)}
                     identifier_title={'Change_Email'}
                     onClickSendEmail={onClickResendEmail}
+                    has_live_chat={true}
                 />
             </div>
         </React.Fragment>

packages/account/src/Sections/Security/Passwords/passwords.jsx

@@ -5,6 +5,7 @@ import { connect } from 'Stores/connect';
 import DerivPassword from './deriv-password.jsx';
 import DerivEmail from './deriv-email.jsx';
 import PasswordsPlatform from './passwords-platform.jsx';
+import UnlinkSuccessModal from '../../../../../core/src/App/Containers/UnlinkEmailModal/unlink-success-modal.jsx';
 
 const Passwords = ({
     email,
@@ -32,7 +33,9 @@ const Passwords = ({
 
     return (
         <div className='account__passwords'>
-            <DerivEmail email={email}/>
+            {/* Todo: remove the condition after unlinking the email without social account is fully functional from BE side */}
+            {is_social_signup && <DerivEmail email={email} social_identity_provider={social_identity_provider} />}
+            <UnlinkSuccessModal />
             <DerivPassword
                 email={email}
                 is_dark_mode_on={is_dark_mode_on}

packages/account/src/Styles/account.scss

@@ -1383,6 +1383,111 @@ $MIN_HEIGHT_FLOATING: calc(
     }
 }
 
+/** @define unlink-email-success; weak */
+.unlink-email-success,
+.unlink-account {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-row-gap: 16px;
+    max-width: 400px;
+    margin: 24px auto 0;
+    color: var(--text-prominent);
+    font-size: var(--text-size-xxs);
+    line-height: 1.5;
+
+    &__content {
+        display: grid;
+        grid-template-columns: 3.2rem auto;
+        grid-gap: 8px;
+
+        .inline-icon {
+            width: 3.2rem;
+            height: 3.2rem;
+            margin-right: 0.8rem;
+        }
+    }
+
+    &__modal {
+        &-content {
+            display: grid;
+            grid-gap: 8px;
+        }
+        &-close {
+            display: flex;
+            justify-content: flex-end;
+            padding-bottom: 1.2rem;
+            cursor: pointer;
+        }
+        &-title {
+            margin: 0.8rem 2.4rem;
+            text-align: center;
+        }
+        &-description {
+            text-align: center;
+        }
+        &-icon {
+            text-align: center;
+            margin-top: 0;
+            padding-top: 0;
+            padding-bottom: 1.6rem;
+        }
+    }
+    &__footer {
+        justify-content: center;
+    }
+}
+
+/* @define reset-email */
+.reset-email {
+    &__email-selection {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        flex-flow: nowrap column;
+        .reset-email__heading {
+            margin-bottom: 1.6rem;
+        }
+        .reset-email__descripton {
+            margin-bottom: 2rem;
+        }
+    }
+    &__heading {
+        margin-bottom: 0.8rem;
+    }
+    &__text {
+        text-align: center;
+        margin-bottom: 3.3rem;
+    }
+    &__btn {
+        margin: 0 0 -2.4rem 0;
+        background-color: var(--button-primary-default);
+        font-weight: bold;
+        align-self: flex-end;
+        color: var(--text-colored-background);
+        font-size: 1.2rem;
+
+        &:hover {
+            background-color: var(--button-primary-hover);
+        }
+        &--disabled {
+            opacity: 0.32;
+            cursor: not-allowed !important;
+        }
+    }
+    &__fieldset {
+        position: relative;
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+    &__email-field {
+        /* postcss-bem-linter: ignore */
+        & > label {
+            top: 0.9rem;
+            background-color: var(--general-main-2);
+        }
+    }
+}
+
 /** @define sent-email; weak */
 .sent-email {
     display: grid;

packages/components/src/components/send-email-template/send-email-template.jsx

@@ -98,7 +98,7 @@ const SendEmailTemplate = ({
                             primary
                         />
                     </div>
-                    {live_chat && (
+                    {!!live_chat && (
                         <div className='send-email-template__footer'>
                             <Text size='xxs' as='p' align={'center'}>
                                 {live_chat}

packages/core/src/App/Containers/Modals/app-modals.jsx

@@ -24,6 +24,8 @@ const RealityCheckModal = React.lazy(() =>
 );
 const WelcomeModal = React.lazy(() => import(/* webpackChunkName: "welcome-modal"  */ '../WelcomeModal'));
 
+const ResetEmailModal = React.lazy(() => import(/* webpackChunkName: "reset-email-modal"  */ '../ResetEmailModal'));
+
 const AppModals = ({
     is_account_needed_modal_on,
     is_welcome_modal_visible,
@@ -47,6 +49,9 @@ const AppModals = ({
         case 'signup':
             ComponentToLoad = <AccountSignupModal />;
             break;
+        case 'request_email':
+            ComponentToLoad = <ResetEmailModal />;
+            break;
         default:
             if (is_set_residence_modal_visible) {
                 ComponentToLoad = <SetResidenceModal />;