Amina/feature/90115/update jurisdiction

packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import { Formik, Form, Field } from 'formik';
 import { Input, Button } from '@deriv/components';
-import { localize, getLanguage } from '@deriv/translations';
-import { getPropertyValue, WS, redirectToLogin } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import { getPropertyValue, WS } from '@deriv/shared';
 
-const DigitForm = ({ is_enabled, setTwoFAStatus, logoutClient }) => {
+const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => {
     const [is_success, setSuccess] = React.useState(false);
-    const button_text = is_enabled ? localize('Disable 2FA') : localize('Enable');
+    const button_text = is_enabled ? localize('Disable') : localize('Enable');
 
     const initial_form = {
         digit_code: '',
@@ -50,7 +50,7 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, logoutClient }) => {
             setSuccess(true);
             resetForm();
             setTwoFAStatus(is_enabled_response);
-            logoutClient().then(() => redirectToLogin(false, getLanguage()));
+            setTwoFAChangedStatus(true);
         }
     };
 
@@ -66,12 +66,14 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, logoutClient }) => {
                                     data-lpignore='true'
                                     type='text'
                                     className='two-factor__input'
-                                    label={localize('6 digit code')}
+                                    label={localize('Authentication code')}
                                     value={values.digit_code}
                                     onChange={handleChange}
                                     onBlur={handleBlur}
                                     required
                                     error={touched.digit_code && errors.digit_code}
+                                    maxLength='6'
+                                    autoComplete='off'
                                 />
                             )}
                         </Field>

packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx

@@ -22,10 +22,11 @@ import TwoFactorAuthenticationArticle from './two-factor-authentication-article.
 const TwoFactorAuthentication = ({
     email_address,
     is_switching,
-    logoutClient,
     setTwoFAStatus,
     getTwoFAStatus,
     has_enabled_two_fa,
+    Notifications,
+    setTwoFAChangedStatus,
 }) => {
     const [is_loading, setLoading] = React.useState(true);
     const [is_qr_loading, setQrLoading] = React.useState(false);
@@ -36,7 +37,7 @@ const TwoFactorAuthentication = ({
 
     React.useEffect(() => {
         getDigitStatus();
-    }, [getDigitStatus]);
+    }, [getDigitStatus, has_enabled_two_fa]);
 
     const generateQrCode = React.useCallback(async () => {
         setQrLoading(true);
@@ -91,7 +92,7 @@ const TwoFactorAuthentication = ({
                 <DigitForm
                     is_enabled={has_enabled_two_fa}
                     setTwoFAStatus={setTwoFAStatus}
-                    logoutClient={logoutClient}
+                    setTwoFAChangedStatus={setTwoFAChangedStatus}
                 />
             </div>
         </ThemedScrollbars>
@@ -140,26 +141,37 @@ const TwoFactorAuthentication = ({
                                 {is_qr_loading ? (
                                     <Loading is_fullscreen={false} />
                                 ) : (
-                                    <>
-                                        <div className='two-factor__qr--wrapper'>
-                                            <QRCode value={qr_secret_key} />
-                                        </div>
+                                    <React.Fragment>
+                                        {qr_secret_key && (
+                                            <div className='two-factor__qr--wrapper'>
+                                                <QRCode value={qr_secret_key} />
+                                            </div>
+                                        )}
 
-                                        <Text as='h4' size='xs' align='center' className='two-factor__qr--message'>
-                                            {localize(
-                                                'If you are unable to scan the QR code, you can manually enter this code instead:'
-                                            )}
-                                        </Text>
-                                        <div className='two-factor__qr--code'>
-                                            <Text size='xs'>{secret_key}</Text>
-                                            <Clipboard
-                                                text_copy={secret_key}
-                                                info_message={localize('Click here to copy key')}
-                                                success_message={localize('Key copied!')}
-                                                className='two-factor__qr--clipboard'
-                                            />
-                                        </div>
-                                    </>
+                                        {secret_key && (
+                                            <React.Fragment>
+                                                <Text
+                                                    as='h4'
+                                                    size='xs'
+                                                    align='center'
+                                                    className='two-factor__qr--message'
+                                                >
+                                                    {localize(
+                                                        'If you are unable to scan the QR code, you can manually enter this code instead:'
+                                                    )}
+                                                </Text>
+                                                <div className='two-factor__qr--code'>
+                                                    <Text size='xs'>{secret_key}</Text>
+                                                    <Clipboard
+                                                        text_copy={secret_key}
+                                                        info_message={localize('Click here to copy key')}
+                                                        success_message={localize('Key copied!')}
+                                                        className='two-factor__qr--clipboard'
+                                                    />
+                                                </div>
+                                            </React.Fragment>
+                                        )}
+                                    </React.Fragment>
                                 )}
                             </div>
                         </Timeline.Item>
@@ -169,7 +181,7 @@ const TwoFactorAuthentication = ({
                             <DigitForm
                                 is_enabled={has_enabled_two_fa}
                                 setTwoFAStatus={setTwoFAStatus}
-                                logoutClient={logoutClient}
+                                setTwoFAChangedStatus={setTwoFAChangedStatus}
                             />
                         </Timeline.Item>
                     </Timeline>
@@ -188,6 +200,7 @@ const TwoFactorAuthentication = ({
                     'two-factor__wrapper-dashboard': is_appstore,
                 })}
             >
+                {Notifications && <Notifications />}
                 {has_enabled_two_fa ? TwoFactorEnabled : TwoFactorDisabled}
             </div>
         </section>
@@ -197,17 +210,19 @@ const TwoFactorAuthentication = ({
 TwoFactorAuthentication.propTypes = {
     email_address: PropTypes.string,
     is_switching: PropTypes.bool,
-    logoutClient: PropTypes.func,
     setTwoFAStatus: PropTypes.func,
     getTwoFAStatus: PropTypes.func,
     has_enabled_two_fa: PropTypes.bool,
+    Notifications: PropTypes.node,
+    setTwoFAChangedStatus: PropTypes.func,
 };
 
-export default connect(({ client }) => ({
+export default connect(({ client, ui }) => ({
     email_address: client.email_address,
     is_switching: client.is_switching,
-    logoutClient: client.logout,
     setTwoFAStatus: client.setTwoFAStatus,
     getTwoFAStatus: client.getTwoFAStatus,
     has_enabled_two_fa: client.has_enabled_two_fa,
+    Notifications: ui.notification_messages_ui,
+    setTwoFAChangedStatus: client.setTwoFAChangedStatus,
 }))(TwoFactorAuthentication);

packages/appstore/src/components/main-title-bar/account-type-dropdown.scss

@@ -11,8 +11,8 @@
         border: none;
         & > div.dc-dropdown {
             &-container {
-                min-width: 8.2rem;
-                width: 8.2rem;
+                min-width: 7.1rem;
+                width: auto;
             }
         }
 
@@ -32,14 +32,17 @@
             line-height: 20px;
             letter-spacing: 0em;
             text-align: left;
-            padding-left: 0.6em;
+            padding-left: 0.4em;
+        }
+        & > .dc-dropdown__display-text {
+            padding-right: 2.3em;
         }
     }
     &--real,
     &--real:focus,
     &--real:hover {
         border: 1px solid var(--status-info);
-        width: 87%;
+        min-width: 87%;
         & > .dc-text {
             color: var(--status-info);
         }
@@ -52,7 +55,7 @@
         width: 90%;
         & > .dc-text {
             color: var(--status-success);
-            padding-left: 0.8em;
+            padding-left: 0.65em;
         }
     }
     &__icon {
@@ -62,11 +65,11 @@
         }
         &--real {
             --fill-color1: var(--status-info) !important;
-            right: 1.8rem;
+            right: 0.7rem;
         }
         &--demo {
             --fill-color1: var(--status-success) !important;
-            right: 1.5rem;
+            right: 1.4rem;
         }
     }
 }

packages/appstore/src/components/main-title-bar/account-type-dropdown.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { Dropdown } from '@deriv/components';
-import { account_types } from 'Constants/platform-config';
+import { getAccountTypes } from 'Constants/platform-config';
 import { useStores } from 'Stores';
 import './account-type-dropdown.scss';
 
 const AccountTypeDropdown = () => {
-    const { traders_hub, client } = useStores();
+    const { traders_hub, client, common } = useStores();
     const { selected_account_type, selectAccountType } = traders_hub;
     const { setPrevAccountType } = client;
+    const { current_language } = common;
 
     return (
         <div className={classNames('account-type-dropdown--parent')}>
@@ -20,7 +21,8 @@ const AccountTypeDropdown = () => {
                     'account-type-dropdown',
                     `account-type-dropdown--${selected_account_type}`
                 )}
-                list={account_types}
+                list={getAccountTypes()}
+                key={`account-type-dropdown__icon--key-${current_language}`}
                 onChange={async (e: React.ChangeEvent<HTMLInputElement>) => {
                     await selectAccountType(e.target.value);
                     await setPrevAccountType(e.target.value);

packages/appstore/src/constants/platform-config.ts

@@ -5,9 +5,9 @@ import { TAccountCategory, TRegionAvailability } from 'Types';
 
 export type AccountType = { text: 'Real' | 'Demo'; value: TAccountCategory };
 export type RegionAvailability = 'Non-EU' | 'EU' | 'All';
-export const account_types: AccountType[] = [
-    { text: 'Demo', value: 'demo' },
-    { text: 'Real', value: 'real' },
+export const getAccountTypes = (): AccountType[] => [
+    { text: localize('Demo'), value: 'demo' },
+    { text: localize('Real'), value: 'real' },
 ];
 export const region_availability: RegionAvailability[] = ['Non-EU', 'EU'];