Mahdiyeh/Feature: add social unlinking

packages/account/src/Components/Routes/binary-link.jsx

@@ -4,12 +4,11 @@ import { NavLink } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';
 import getRoutesConfig from 'Constants/routes-config';
 import { findRouteByPath, normalizePath } from './helpers';
-import { connect } from 'Stores/connect';
 
-const BinaryLink = ({ active_class, to, children, is_social_signup, ...props }) => {
+const BinaryLink = ({ active_class, to, children, ...props }) => {
     const { is_appstore } = React.useContext(PlatformContext);
     const path = normalizePath(to);
-    const route = findRouteByPath(path, getRoutesConfig({ is_appstore }, is_social_signup));
+    const route = findRouteByPath(path, getRoutesConfig({ is_appstore }));
 
     if (!route) {
         throw new Error(`Route not found: ${to}`);
@@ -31,6 +30,4 @@ BinaryLink.propTypes = {
     to: PropTypes.string,
 };
 
-export default connect(({ client }) => ({
-    is_social_signup: client.is_social_signup,
-}))(BinaryLink);
+export default BinaryLink;

packages/account/src/Components/Routes/binary-routes.jsx

@@ -3,11 +3,9 @@ import { Switch } from 'react-router-dom';
 import { Localize, PlatformContext } from '@deriv/shared';
 import getRoutesConfig from 'Constants/routes-config';
 import RouteWithSubRoutes from './route-with-sub-routes.jsx';
-import { connect } from 'Stores/connect';
 
 const BinaryRoutes = props => {
     const { is_appstore } = React.useContext(PlatformContext);
-    const { is_social_signup } = props;
     return (
         <React.Suspense
             fallback={() => {
@@ -19,14 +17,12 @@ const BinaryRoutes = props => {
             }}
         >
             <Switch>
-                {getRoutesConfig({ is_appstore }, is_social_signup).map((route, idx) => (
+                {getRoutesConfig({ is_appstore }).map((route, idx) => (
                     <RouteWithSubRoutes key={idx} {...route} {...props} />
                 ))}
             </Switch>
         </React.Suspense>
     );
 };
 
-export default connect(({ client }) => ({
-    is_social_signup: client.is_social_signup,
-}))(BinaryRoutes);
+export default BinaryRoutes;

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,50 @@
+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'>
+            <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 your email address, you'll first need to unlink your email address from 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/Constants/routes-config.js

@@ -23,7 +23,7 @@ import {
 const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ 'Modules/Page404')));
 
 // Order matters
-const initRoutesConfig = ({ is_appstore }, is_social_signup) => [
+const initRoutesConfig = ({ is_appstore }) => [
     {
         path: routes.account_closed,
         component: AccountClosed,
@@ -83,7 +83,7 @@ const initRoutesConfig = ({ is_appstore }, is_social_signup) => [
                     {
                         path: routes.passwords,
                         component: Passwords,
-                        getTitle: () => (is_social_signup ? localize('Passwords') : localize('Email and passwords')),
+                        getTitle: () => localize('Email and passwords'),
                     },
                     {
                         path: routes.self_exclusion,
@@ -147,9 +147,11 @@ let routesConfig;
 // For default page route if page/path is not found, must be kept at the end of routes_config array
 const route_default = { component: Page404, getTitle: () => localize('Error 404') };
 
-const getRoutesConfig = ({ is_appstore }, is_social_signup) => {
-    routesConfig = initRoutesConfig({ is_appstore }, is_social_signup);
-    routesConfig.push(route_default);
+const getRoutesConfig = ({ is_appstore }) => {
+    if (!routesConfig) {
+        routesConfig = initRoutesConfig({ is_appstore });
+        routesConfig.push(route_default);
+    }
     return routesConfig;
 };
 

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

@@ -1,18 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik';
-import { WS } from '@deriv/shared';
+import { WS, toTitleCase } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import { Button, Text, Input } from '@deriv/components';
 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 DerivEmail = ({ email, social_identity_provider, is_social_signup }) => {
+    const [is_unlink_account_modal_open, setIsUnlinkAccountModalOpen] = React.useState(false);
     const [is_send_email_modal_open, setIsSendEmailModalOpen] = React.useState(false);
 
     const onClickChangeEmail = () => {
-        // Todo: will add the condition to check if it's social account and wants to be unlinked
+        if (is_social_signup) {
+            setIsUnlinkAccountModalOpen(true);
+        } else {
+            WS.verifyEmail(email, 'request_email');
+            setIsSendEmailModalOpen(true);
+        }
+    };
+
+    const onClickSendEmail = () => {
         WS.verifyEmail(email, 'request_email');
+        setIsUnlinkAccountModalOpen(false);
         setIsSendEmailModalOpen(true);
     };
 
@@ -38,7 +49,7 @@ const DerivEmail = ({ email }) => {
                                 type='text'
                                 name='email'
                                 id={'email'}
-                                label={localize('Email address')}
+                                label={localize('Email address*')}
                                 value={email}
                                 disabled={true}
                             />
@@ -56,6 +67,12 @@ 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_send_email_modal_open}
                     onClose={() => setIsSendEmailModalOpen(false)}
@@ -71,6 +88,9 @@ const DerivEmail = ({ email }) => {
 
 DerivEmail.propTypes = {
     email: PropTypes.string,
+    is_dark_mode_on: PropTypes.bool,
+    is_social_signup: PropTypes.bool,
+    social_identity_provider: PropTypes.string,
 };
 
 export default DerivEmail;

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

@@ -5,18 +5,19 @@ import { getBrandWebsiteName, getPlatformSettings, toTitleCase, WS } from '@deri
 import { Localize, localize } from '@deriv/translations';
 import FormSubHeader from 'Components/form-sub-header';
 import SentEmailModal from 'Components/sent-email-modal';
-import UnlinkModal from 'Components/unlink-modal';
 import DerivComLogo from 'Assets/ic-brand-deriv-red.svg';
 import DerivGoLight from 'Assets/ic-brand-deriv-go-light.svg';
 import DerivGoDark from 'Assets/ic-brand-deriv-go-dark.svg';
 
 const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identity_provider }) => {
-    const [is_unlink_modal_open, setIsUnlinkModalOpen] = React.useState(false);
     const [is_sent_email_modal_open, setIsSentEmailModalOpen] = React.useState(false);
 
     const onClickSendEmail = () => {
-        WS.verifyEmail(email, 'reset_password');
-        setIsUnlinkModalOpen(false);
+        if (social_identity_provider === 'apple') {
+            WS.verifyEmail(email, 'request_email');
+        } else {
+            WS.verifyEmail(email, 'reset_password');
+        }
         setIsSentEmailModalOpen(true);
     };
 
@@ -46,7 +47,10 @@ const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identi
                         />
                     </Text>
                     <Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
-                        <Localize i18n_default_text='Apps you can use with your Deriv login:' />
+                        <Localize
+                            i18n_default_text='Apps you have linked to your <0>Deriv password:</0>'
+                            components={[<strong key={0} />]}
+                        />
                     </Text>
                     <div className='passwords-platform__logo-container'>
                         <DerivComLogo className='passwords-platform__single-icon' />
@@ -72,46 +76,22 @@ const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identi
                 {is_social_signup ? (
                     <React.Fragment>
                         <div className='account__passwords-item passwords-social-buttons'>
-                            <div className='passwords-social-buttons__desc'>
-                                <Text
-                                    as='p'
-                                    className='passwords-platform__desc'
-                                    color='prominent'
-                                    size='xs'
-                                    weight='lighter'
-                                >
-                                    <Localize
-                                        i18n_default_text="You're using your {{identifier_title}} account to log in to your Deriv account. To change your login method into using a username and password, click the <0>Unlink</0> button."
-                                        components={[<strong key={0} />]}
-                                        values={{ identifier_title: capitalized_identifier }}
-                                    />
-                                </Text>
-                            </div>
-                            <div className='account__passwords-linked'>
+                            <div className='account__passwords-linked' onClick={onClickSendEmail}>
                                 {social_identity_provider ? (
                                     <React.Fragment>
                                         <Icon icon={`IcStock${capitalized_identifier}`} size={16} />
                                         <Text size='xs'>
                                             <Localize
-                                                i18n_default_text='Linked with {{identifier_title}}'
+                                                i18n_default_text='Unlink from {{identifier_title}}'
                                                 values={{ identifier_title: capitalized_identifier }}
                                             />
                                         </Text>
+                                        <Icon icon='IcChevronRight' size={16} />
                                     </React.Fragment>
                                 ) : (
                                     ''
                                 )}
                             </div>
-                            <Button
-                                onClick={() => {
-                                    setIsUnlinkModalOpen(true);
-                                    setIsSentEmailModalOpen(true);
-                                }}
-                                type='button'
-                                text={localize('Unlink')}
-                                tertiary
-                                large
-                            />
                         </div>
                     </React.Fragment>
                 ) : (
@@ -133,17 +113,8 @@ const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identi
                         />
                     </div>
                 )}
-                <UnlinkModal
-                    is_open={is_unlink_modal_open}
-                    onClose={() => {
-                        setIsUnlinkModalOpen(false);
-                        setIsSentEmailModalOpen(false);
-                    }}
-                    identifier_title={capitalized_identifier}
-                    onClickSendEmail={onClickSendEmail}
-                />
                 <SentEmailModal
-                    is_open={is_sent_email_modal_open && !is_unlink_modal_open}
+                    is_open={is_sent_email_modal_open}
                     onClose={() => setIsSentEmailModalOpen(false)}
                     identifier_title={capitalized_identifier}
                     onClickSendEmail={onClickSendEmail}

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

@@ -33,8 +33,11 @@ const Passwords = ({
 
     return (
         <div className='account__passwords'>
-            {/* Todo: remove the condition after unlinking the email with social account is fully functional */}
-            {!is_social_signup && <DerivEmail email={email} />}
+            <DerivEmail
+                email={email}
+                social_identity_provider={social_identity_provider}
+                is_social_signup={is_social_signup}
+            />
             <DerivPassword
                 email={email}
                 is_dark_mode_on={is_dark_mode_on}