Merge pull request binary-com#151 from amina-deriv/86484_fix_dropdown…

…_in_acc_currency Amina/ fix: mf currency switcher
jim-deriv · Jan 19, 2023 · 3fdb69f · 3fdb69f
2 parents f3b727f + 8044e96
commit 3fdb69f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 34 deletions.
diff --git a/packages/appstore/src/components/containers/currency-switcher-container.tsx b/packages/appstore/src/components/containers/currency-switcher-container.tsx
@@ -27,7 +27,7 @@ const CurrentSwitcherContainer = ({
     const { client, modules, traders_hub }: TRootStore = store;
 
     const { document_status } = client.authentication_status;
-    const { is_eu_user, is_demo } = traders_hub;
+    const { is_eu_user, is_demo, is_currency_switcher_disabled_for_mf } = traders_hub;
     const { current_list } = modules.cfd;
 
     const has_mf_mt5_account = Object.keys(current_list)
@@ -36,11 +36,12 @@ const CurrentSwitcherContainer = ({
 
     const Dropdown = () => {
         const icon_dropdown = (
-            <div className='currency-switcher-container__arrow'>
+            <div className='currency-switcher-container__arrow' {...props}>
                 <Icon icon='IcChevronDownBold' />
             </div>
         );
-        if (is_eu_user && has_mf_mt5_account) {
+
+        if ((is_eu_user && has_mf_mt5_account) || is_currency_switcher_disabled_for_mf) {
             return null;
         } else if (is_demo) {
             return null;
@@ -53,7 +54,6 @@ const CurrentSwitcherContainer = ({
             className={classNames(className, 'currency-switcher-container', {
                 'currency-switcher-container--has-interaction': has_interaction,
             })}
-            {...props}
         >
             <div className='currency-switcher-container--left'>
                 <CurrencyIcon icon={icon} size={32} className='currency-switcher__currency--icon' />

diff --git a/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx b/packages/appstore/src/components/currency-switcher-card/real/real-account-card.tsx
@@ -18,7 +18,7 @@ const RealAccountCard = () => {
 
     const { accounts, loginid } = client;
     const { current_list } = modules.cfd;
-    const { openModal, is_eu_user, multipliers_account_status } = traders_hub;
+    const { openModal, is_eu_user, is_currency_switcher_disabled_for_mf } = traders_hub;
     const { balance, currency } = accounts[loginid] || default_balance;
 
     const has_mf_mt5_account = Object.keys(current_list)
@@ -35,7 +35,7 @@ const RealAccountCard = () => {
             }
             icon={currency}
             onClick={() => {
-                if (multipliers_account_status) {
+                if (is_currency_switcher_disabled_for_mf) {
                     return null;
                 } else if (!is_eu_user && !has_mf_mt5_account) {
                     openModal('currency_selection');

diff --git a/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx b/packages/appstore/src/components/currency-switcher-card/real/real-account-switcher.tsx
@@ -7,40 +7,46 @@ import { useStores } from 'Stores/index';
 import RealAccountCard from './real-account-card';
 import './real-account-switcher.scss';
 
-const AccountNeedsVerification = observer(({ multipliers_account_status }: { multipliers_account_status: string }) => {
-    const { client, traders_hub } = useStores();
-    const { account_list, loginid } = client;
+type AccountNeedsVerificationProps = {
+    multipliers_account_status: string;
+    is_currency_switcher_disabled_for_mf: boolean;
+};
+const AccountNeedsVerification = observer(
+    ({ multipliers_account_status, is_currency_switcher_disabled_for_mf }: AccountNeedsVerificationProps) => {
+        const { client, traders_hub } = useStores();
+        const { account_list, loginid } = client;
 
-    const { openModal, openFailedVerificationModal } = traders_hub;
+        const { openModal, openFailedVerificationModal } = traders_hub;
 
-    const title = account_list.find((acc: { loginid: string }) => loginid === acc.loginid).title;
-    const icon = account_list.find((acc: { loginid: string }) => loginid === acc.loginid).icon;
+        const title = account_list.find((acc: { loginid: string }) => loginid === acc.loginid).title;
+        const icon = account_list.find((acc: { loginid: string }) => loginid === acc.loginid).icon;
 
-    return (
-        <CurrencySwitcherContainer
-            className='real-account-switcher__container'
-            title={title}
-            icon={icon}
-            onClick={() => {
-                if (multipliers_account_status) {
-                    return null;
-                }
-                return openModal('currency_selection');
-            }}
-        >
-            <StatusBadge
-                account_status={multipliers_account_status}
-                openFailedVerificationModal={openFailedVerificationModal}
-                selected_account_type='multipliers'
-            />
-        </CurrencySwitcherContainer>
-    );
-});
+        return (
+            <CurrencySwitcherContainer
+                className='real-account-switcher__container'
+                title={title}
+                icon={icon}
+                onClick={() => {
+                    if (is_currency_switcher_disabled_for_mf) {
+                        return null;
+                    }
+                    return openModal('currency_selection');
+                }}
+            >
+                <StatusBadge
+                    account_status={multipliers_account_status}
+                    openFailedVerificationModal={openFailedVerificationModal}
+                    selected_account_type='multipliers'
+                />
+            </CurrencySwitcherContainer>
+        );
+    }
+);
 
 const RealAccountSwitcher = () => {
     const { client, traders_hub } = useStores();
     const { is_logging_in, is_switching, has_any_real_account } = client;
-    const { multipliers_account_status } = traders_hub;
+    const { multipliers_account_status, is_currency_switcher_disabled_for_mf } = traders_hub;
 
     if (is_switching || is_logging_in) {
         return (
@@ -51,7 +57,12 @@ const RealAccountSwitcher = () => {
     }
 
     if (multipliers_account_status) {
-        return <AccountNeedsVerification multipliers_account_status={multipliers_account_status} />;
+        return (
+            <AccountNeedsVerification
+                multipliers_account_status={multipliers_account_status}
+                is_currency_switcher_disabled_for_mf={is_currency_switcher_disabled_for_mf}
+            />
+        );
     }
 
     if (has_any_real_account) {

diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
@@ -80,6 +80,7 @@ export default class TradersHubStore extends BaseStore {
             is_demo: computed,
             is_eu_selected: computed,
             is_real: computed,
+            is_currency_switcher_disabled_for_mf: computed,
             no_CR_account: computed,
             no_MF_account: computed,
             multipliers_account_status: computed,
@@ -337,6 +338,14 @@ export default class TradersHubStore extends BaseStore {
         return this.selected_account_type === 'real' && this.root_store.client.has_active_real_account;
     }
 
+    get is_currency_switcher_disabled_for_mf() {
+        return !!(
+            this.is_eu_user &&
+            this.multipliers_account_status &&
+            this.multipliers_account_status !== 'need_verification'
+        );
+    }
+
     setTogglePlatformType(platform_type) {
         this.selected_platform_type = platform_type;
     }