Added Unlink confirmation modal

zaki-hanafiah · Mar 17, 2021 · b1d9ccc · b1d9ccc
1 parent 483af4e
commit b1d9ccc
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 23 deletions.
diff --git a/packages/account/src/Assets/ic-brand-deriv-go-dark.svg b/packages/account/src/Assets/ic-brand-deriv-go-dark.svg
diff --git a/.../account/src/Assets/ic-brand-deriv-go.svg → ...nt/src/Assets/ic-brand-deriv-go-light.svg b/.../account/src/Assets/ic-brand-deriv-go.svg → ...nt/src/Assets/ic-brand-deriv-go-light.svg
diff --git a/packages/account/src/Sections/Security/Passwords/deriv-password.jsx b/packages/account/src/Sections/Security/Passwords/deriv-password.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Button, Modal, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import { WS } from 'Services/ws-methods';
@@ -8,31 +9,67 @@ import ChangePasswordForm from './change-password-form.jsx';
 import SocialPasswordForm from './social-password-form.jsx';
 import PasswordsStatic from './passwords-static.jsx';
 
-const DerivPassword = ({ email, is_social_signup }) => (
-    <React.Fragment>
-        <FormSubHeader title={localize('Deriv password')} />
-        <div className='account__passwords-wrapper'>
-            <PasswordsStatic is_deriv_password />
-            {is_social_signup ? (
-                <SocialPasswordForm />
-            ) : (
-                <ChangePasswordForm
-                    onClickSendEmail={() => {
-                        WS.verifyEmail(email, 'reset_password');
-                        // multi_step_ref.current?.goNextStep();
-                    }}
-                />
-            )}
-        </div>
-    </React.Fragment>
+const UnlinkConfirmationDialog = ({ is_open, onClose, onConfirm }) => (
+    <Modal
+        is_open={is_open}
+        is_confirmation_modal
+        has_close_icon={false}
+        should_header_stick_body
+        title={localize('Are you sure you want to unlink from Google?')}
+        width='440px'
+    >
+        <Modal.Body>
+            <Text size='xs'>{localize('You will need to set a password to complete the process.')}</Text>
+        </Modal.Body>
+        <Modal.Footer>
+            <Button onClick={onClose} has_effect text={localize('Cancel')} secondary large />
+            <Button has_effect onClick={onConfirm} text={localize('Unlink from Google')} primary large />
+        </Modal.Footer>
+    </Modal>
 );
 
+const DerivPassword = ({ email, is_dark_mode_on, is_social_signup }) => {
+    const [is_unlink_modal_open, setIsUnlinkModalOpen] = React.useState(false);
+
+    const toggleUnlinkModal = () => {
+        setIsUnlinkModalOpen(false);
+    };
+
+    const toggleEmailSentModal = () => {};
+
+    return (
+        <React.Fragment>
+            <FormSubHeader title={localize('Deriv password')} />
+            <div className='account__passwords-wrapper'>
+                <PasswordsStatic is_dark_mode_on={is_dark_mode_on} is_deriv_password />
+                {is_social_signup ? (
+                    <SocialPasswordForm setIsUnlinkModalOpen={setIsUnlinkModalOpen} />
+                ) : (
+                    <ChangePasswordForm
+                        onClickSendEmail={() => {
+                            WS.verifyEmail(email, 'reset_password');
+                            // multi_step_ref.current?.goNextStep();
+                        }}
+                    />
+                )}
+            </div>
+            <UnlinkConfirmationDialog
+                is_open={is_unlink_modal_open}
+                onClose={() => toggleUnlinkModal()}
+                onConfirm={() => toggleEmailSentModal}
+            />
+        </React.Fragment>
+    );
+};
+
 DerivPassword.propTypes = {
     email: PropTypes.string,
+    is_dark_mode_on: PropTypes.bool,
     is_social_signup: PropTypes.bool,
 };
 
-export default connect(({ client }) => ({
+export default connect(({ client, ui }) => ({
     email: client.email,
+    is_dark_mode_on: ui.is_dark_mode_on,
     is_social_signup: client.is_social_signup,
 }))(DerivPassword);
diff --git a/packages/account/src/Sections/Security/Passwords/passwords-static.jsx b/packages/account/src/Sections/Security/Passwords/passwords-static.jsx
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import { Localize, localize } from '@deriv/translations';
 import { Icon, Text } from '@deriv/components';
 import DerivComLogo from '../../../Assets/ic-brand-deriv-red.svg';
-import DerivGoLogo from '../../../Assets/ic-brand-deriv-go.svg';
+import DerivGoLight from '../../../Assets/ic-brand-deriv-go-light.svg';
+import DerivGoDark from '../../../Assets/ic-brand-deriv-go-dark.svg';
 
-const PasswordsStatic = ({ is_deriv_password = false }) => (
+const PasswordsStatic = ({ is_dark_mode_on, is_deriv_password = false }) => (
     <React.Fragment>
         {is_deriv_password ? (
             <div className='account__passwords-item-left'>
@@ -23,7 +24,7 @@ const PasswordsStatic = ({ is_deriv_password = false }) => (
                     <Icon icon='IcBrandDtrader' size={32} />
                     <Icon icon='IcBrandDbot' size={32} />
                     <Icon icon='IcBrandSmarttrader' size={32} />
-                    <DerivGoLogo />
+                    {is_dark_mode_on ? <DerivGoDark /> : <DerivGoLight />}
                 </div>
             </div>
         ) : (

diff --git a/packages/account/src/Sections/Security/Passwords/social-password-form.jsx b/packages/account/src/Sections/Security/Passwords/social-password-form.jsx
@@ -2,13 +2,20 @@ import React from 'react';
 import { Button, Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const SocialPasswordForm = () => (
+const SocialPasswordForm = ({ setIsUnlinkModalOpen }) => (
     <div className='account__passwords-item-right passwords-social-buttons'>
         <div className='account__passwords-linked'>
             <Icon icon='IcStockGoogle' size={16} />
             <Text size='xs'>{localize('Linked with Google')}</Text>
         </div>
-        <Button className='account__passwords-footer-btn' type='button' text={localize('Unlink')} tertiary large />
+        <Button
+            className='account__passwords-footer-btn'
+            onClick={() => setIsUnlinkModalOpen(true)}
+            type='button'
+            text={localize('Unlink')}
+            tertiary
+            large
+        />
     </div>
 );