Hamza/cfds 1091/moving the hard-coded values and variables into their…

… respective constant and config files in cfd package (binary-com#10212)

* chore: remove hard coded logic

* chore: fix build issues due to js extensions

* chore: trigger rebuild

* chore: trigger rebuild

* chore: trigger rebuild

* refactor: code smells and removed duplicated code

* refactor: remove the hardcode market_type_shortcode

* refactor: remove the type to different location to check build failure

* refactor: remove the type to different location to check build failure

* refactor: rename OD_Platforms to Desktop_Platforms

* chore: retrigger build

* chore: updated the test case for cfd-account-card

packages/cfd/src/Components/__tests__/cfd-account-card.spec.tsx

@@ -447,7 +447,7 @@ describe('CFDAccountCard', () => {
         expect(screen.getByText(/username/i)).toBeInTheDocument();
         expect(screen.getByText(/mtd20103240/i)).toBeInTheDocument();
         expect(screen.getByText(/password/i)).toBeInTheDocument();
-        expect(screen.getByText(/•••••••••••••••/i)).toBeInTheDocument();
+        expect(screen.getByText('***************')).toBeInTheDocument();
         expect(screen.getByText(/icedit/i)).toBeInTheDocument();
         expect(screen.getByText(/trade on web terminal/i)).toBeInTheDocument();
     });

packages/cfd/src/Components/cfd-account-card.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import { FormikValues } from 'formik';
 
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
-import { Button, DesktopWrapper, Icon, MobileWrapper, Money, Popover, Text } from '@deriv/components';
-import { CFD_PLATFORMS, getCFDPlatformLabel, isMobile, mobileOSDetect } from '@deriv/shared';
+import { Button, DesktopWrapper, Icon, MobileWrapper, Money, Text } from '@deriv/components';
+import { getCFDPlatformLabel, isMobile, mobileOSDetect } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 
@@ -17,16 +17,17 @@ import {
 } from '../Helpers/constants';
 import { useCfdStore } from '../Stores/Modules/CFD/Helpers/useCfdStores';
 
-import { CFDAccountCopy } from './cfd-account-copy';
 import {
     TAccountIconValues,
     TCFDAccountCard,
     TCFDAccountCardActionProps,
-    TPasswordBoxProps,
-    TSpecBoxProps,
     TTradingPlatformAccounts,
     TTradingPlatformAvailableAccount,
 } from './props.types';
+import { CFD_PLATFORMS, CATEGORY, MARKET_TYPE } from '../Helpers/cfd-config';
+import { TMarketTypeSynthetic, TAccountCategory } from '../types/market-type.types';
+import SpecBox from './specbox';
+import PasswordBox from './passwordbox';
 
 const account_icons: { [key: string]: TAccountIconValues } = {
     mt5: {
@@ -64,48 +65,6 @@ const AddAccountButton = React.forwardRef<HTMLDivElement, { onSelectAccount: ()
 
 AddAccountButton.displayName = 'AddAccountButton';
 
-const SpecBox = ({ value, is_bold }: TSpecBoxProps) => (
-    <div className='cfd-account-card__spec-box'>
-        <Text size='xs' weight={is_bold ? 'bold' : ''} className='cfd-account-card__spec-text'>
-            {value}
-        </Text>
-        <CFDAccountCopy text={value} className='cfd-account-card__spec-copy' />
-    </div>
-);
-
-const PasswordBox = ({ platform, onClick }: TPasswordBoxProps) => (
-    <div className='cfd-account-card__password-box'>
-        <div className='cfd-account-card__password-text'>
-            <Popover
-                alignment='right'
-                message={localize(
-                    'Use these credentials to log in to your {{platform}} account on the website and mobile apps.',
-                    {
-                        platform: getCFDPlatformLabel(platform),
-                    }
-                )}
-                classNameBubble='cfd-account-card__password-tooltip'
-            >
-                <Text size='xs'>•••••••••••••••</Text>
-            </Popover>
-        </div>
-        <Popover alignment='bottom' message={localize('Change Password')}>
-            <Button
-                className='cfd-account-card__password-action'
-                transparent
-                onClick={onClick}
-                icon={
-                    <Icon
-                        icon='IcEdit'
-                        className='da-article__learn-more-icon'
-                        custom_color='var(--text-less-prominent)'
-                    />
-                }
-            />
-        </Popover>
-    </div>
-);
-
 const CFDAccountCardAction = ({
     button_label,
     handleClickSwitchAccount,
@@ -123,7 +82,7 @@ const CFDAccountCardAction = ({
 }: TCFDAccountCardActionProps) => {
     if (
         is_virtual &&
-        type.category === 'real' &&
+        type.category === CATEGORY.REAL &&
         typeof handleClickSwitchAccount === 'function' &&
         (platform === CFD_PLATFORMS.MT5 ? has_real_account && type.type === 'financial_stp' : true)
     ) {
@@ -150,7 +109,7 @@ const CFDAccountCardAction = ({
         );
     }
     const lbl_add_account =
-        type.category === 'real' ? (
+        type.category === CATEGORY.REAL ? (
             <Localize i18n_default_text='Add real account' />
         ) : (
             <Localize i18n_default_text='Add demo account' />
@@ -230,26 +189,26 @@ const CFDAccountCardComponent = observer(
             is_logged_in &&
             !show_eu_related_content &&
             platform === CFD_PLATFORMS.MT5 &&
-            (type.category === 'demo'
+            (type.category === CATEGORY.DEMO
                 ? isEligibleForMoreDemoMt5Svg(
-                      type.type as TTradingPlatformAvailableAccount['market_type'] | 'synthetic'
+                      type.type as TTradingPlatformAvailableAccount['market_type'] | TMarketTypeSynthetic
                   ) && !!existing_data
                 : isEligibleForMoreRealMt5(
-                      type.type as TTradingPlatformAvailableAccount['market_type'] | 'synthetic'
+                      type.type as TTradingPlatformAvailableAccount['market_type'] | TMarketTypeSynthetic
                   ) && !!existing_data);
 
-        const platform_icon = show_eu_related_content && platform === CFD_PLATFORMS.MT5 ? 'cfd' : type.type;
+        const platform_icon = show_eu_related_content && platform === CFD_PLATFORMS.MT5 ? CFD_PLATFORMS.CFD : type.type;
 
         const icon: React.ReactNode | null = type.type ? (
             <Icon icon={account_icons[type.platform][platform_icon]} size={64} />
         ) : null;
-        const has_popular_banner: boolean = type.type === 'synthetic';
-        const has_demo_banner: boolean = type.category === 'demo';
+        const has_popular_banner: boolean = type.type === MARKET_TYPE.SYNTHETIC;
+        const has_demo_banner: boolean = type.category === CATEGORY.DEMO;
         const has_server_banner =
             is_logged_in &&
             existing_data &&
-            type.category === 'real' &&
-            type.type === 'synthetic' &&
+            type.category === CATEGORY.REAL &&
+            type.type === MARKET_TYPE.SYNTHETIC &&
             (existing_data as DetailsOfEachMT5Loginid)?.server_info;
 
         const ref = React.useRef<HTMLDivElement | null>(null);
@@ -433,7 +392,7 @@ const CFDAccountCardComponent = observer(
                             {existing_data?.login &&
                                 is_logged_in &&
                                 platform === CFD_PLATFORMS.MT5 &&
-                                type.category === 'demo' &&
+                                type.category === CATEGORY.DEMO &&
                                 existing_accounts_data?.length &&
                                 existing_accounts_data?.map((acc: FormikValues, index: number) => (
                                     <div className='cfd-account-card__item' key={index}>
@@ -495,7 +454,7 @@ const CFDAccountCardComponent = observer(
                                 is_logged_in &&
                                 platform === CFD_PLATFORMS.MT5 &&
                                 !existing_accounts_data?.length &&
-                                type.category === 'demo' && (
+                                type.category === CATEGORY.DEMO && (
                                     <div className='cfd-account-card__item'>
                                         {(existing_data as TTradingPlatformAccounts)?.display_login && (
                                             <div className='cfd-account-card--login-id-demo'>
@@ -547,7 +506,7 @@ const CFDAccountCardComponent = observer(
                             {existing_data?.login &&
                                 is_logged_in &&
                                 platform === CFD_PLATFORMS.MT5 &&
-                                type.category === 'real' &&
+                                type.category === CATEGORY.REAL &&
                                 existing_accounts_data?.map((acc: FormikValues, index: number) => (
                                     <div className='cfd-account-card__item' key={index}>
                                         {existing_data?.display_balance && is_logged_in && !show_eu_related_content && (
@@ -690,8 +649,10 @@ const CFDAccountCardComponent = observer(
                             {existing_data && is_logged_in && platform === CFD_PLATFORMS.DXTRADE && (
                                 <div className='cfd-account-card__manage'>
                                     <Button onClick={() => onClickFund(existing_data)} type='button' secondary>
-                                        {type.category === 'real' && <Localize i18n_default_text='Fund transfer' />}
-                                        {type.category === 'demo' && <Localize i18n_default_text='Top up' />}
+                                        {type.category === CATEGORY.REAL && (
+                                            <Localize i18n_default_text='Fund transfer' />
+                                        )}
+                                        {type.category === CATEGORY.DEMO && <Localize i18n_default_text='Top up' />}
                                     </Button>
                                 </div>
                             )}
@@ -704,7 +665,7 @@ const CFDAccountCardComponent = observer(
                                         type='button'
                                         href={getDXTradeWebTerminalLink(
                                             type.category,
-                                            dxtrade_tokens[type.category as 'demo' | 'real']
+                                            dxtrade_tokens[type.category as TAccountCategory]
                                         )}
                                         target='_blank'
                                         rel='noopener noreferrer'
@@ -732,7 +693,7 @@ const CFDAccountCardComponent = observer(
                                         type='button'
                                         href={getCTraderWebTerminalLink(
                                             type.category,
-                                            ctrader_tokens[type.category as 'demo' | 'real']
+                                            ctrader_tokens[type.category as TAccountCategory]
                                         )}
                                         target='_blank'
                                         rel='noopener noreferrer'
@@ -777,7 +738,7 @@ const CFDAccountCardComponent = observer(
                                         type='button'
                                         href={getDerivEzWebTerminalLink(
                                             type.category,
-                                            derivez_tokens[type.category as 'demo' | 'real']
+                                            derivez_tokens[type.category as TAccountCategory]
                                         )}
                                         target='_blank'
                                         rel='noopener noreferrer'

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-button.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { routes, getAuthenticationStatusInfo, WS, CFD_PLATFORMS } from '@deriv/shared';
+import { routes, getAuthenticationStatusInfo, WS } from '@deriv/shared';
 import { Button } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
@@ -13,6 +13,7 @@ import {
     isDxtradeAccountAdded,
     isCTraderAccountAdded,
 } from '../../Helpers/compare-accounts-config';
+import { CATEGORY, CFD_PLATFORMS } from '../../Helpers/cfd-config';
 
 const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TCompareAccountsCard) => {
     const history = useHistory();
@@ -56,7 +57,7 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp
     } = getAuthenticationStatusInfo(account_status);
 
     const type_of_account = {
-        category: is_demo ? 'demo' : 'real',
+        category: is_demo ? CATEGORY.DEMO : CATEGORY.REAL,
         type: market_type,
     };
 
@@ -91,8 +92,14 @@ const CFDCompareAccountsButton = observer(({ trading_platforms, is_demo }: TComp
                 setHasSubmittedPersonalDetails(true);
             }
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [
+        account_settings,
+        has_submitted_personal_details,
+        is_logged_in,
+        is_virtual,
+        setAccountSettings,
+        updateMT5Status,
+    ]);
 
     const is_account_status_verified = getAccountVerficationStatus(
         market_type_shortcode,

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
 import { TCompareAccountsCard } from 'Components/props.types';
-import { getJuridisctionDescription, getMarketType } from '../../Helpers/compare-accounts-config';
 import { useStore } from '@deriv/stores';
 import { localize } from '@deriv/translations';
+import { getJuridisctionDescription, getMarketType } from '../../Helpers/compare-accounts-config';
+import { REGION } from '../../Helpers/cfd-config';
 
 const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareAccountsCard) => {
     const market_type = getMarketType(trading_platforms);
@@ -23,10 +24,10 @@ const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareA
                     {juridisction_data.leverage}
                 </Text>
                 <Text as='p' size='xxxs' align='center'>
-                    {selected_region === 'Non-EU' ? juridisction_data.leverage_description : localize('Leverage')}
+                    {selected_region === REGION.NON_EU ? juridisction_data.leverage_description : localize('Leverage')}
                 </Text>
             </div>
-            {selected_region === 'Non-EU' && (
+            {selected_region === REGION.NON_EU && (
                 <div className='compare-cfd-account-text-container__separator'>
                     <Text as='h1' weight='bold' size='m' align='center'>
                         {juridisction_data.spread}

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Text, Popover } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import TradigPlatformIconProps from '../../Assets/svgs/trading-platform';
 import { TCompareAccountsCard } from 'Components/props.types';
 import { getAccountCardTitle, getMarketType, getAccountIcon } from '../../Helpers/compare-accounts-config';
+import { CFD_PLATFORMS, MARKET_TYPE_SHORTCODE } from '../../Helpers/cfd-config';
 
 const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }: TCompareAccountsCard) => {
     const market_type = !is_eu_user ? getMarketType(trading_platforms) : 'CFDs';
     const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode);
     const jurisdiction_card_icon =
-        trading_platforms.platform === 'dxtrade' || trading_platforms.platform === 'ctrader'
+        trading_platforms.platform === CFD_PLATFORMS.DXTRADE || trading_platforms.platform === CFD_PLATFORMS.CTRADER
             ? getAccountIcon(trading_platforms.platform)
             : getAccountIcon(market_type);
     const jurisdiction_card_title =
-        trading_platforms.platform === 'dxtrade' || trading_platforms.platform === 'ctrader'
+        trading_platforms.platform === CFD_PLATFORMS.DXTRADE || trading_platforms.platform === CFD_PLATFORMS.CTRADER
             ? getAccountCardTitle(trading_platforms.platform, is_demo)
             : getAccountCardTitle(market_type_shortcode, is_demo);
     const labuan_jurisdiction_message = localize(
@@ -29,7 +29,7 @@ const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }:
                     <Text as='h1' weight='bold' size='xs' align='center'>
                         {jurisdiction_card_title}
                     </Text>
-                    {market_type_shortcode === 'financial_labuan' && (
+                    {market_type_shortcode === MARKET_TYPE_SHORTCODE.FINANCIAL_LABUAN && (
                         <Popover
                             alignment='bottom'
                             className='compare-cfd-account-labuan-tooltip'

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx

@@ -15,6 +15,7 @@ import {
     dxtrade_data,
     ctrader_data,
 } from '../../Helpers/compare-accounts-config';
+import { REGION } from '../../Helpers/cfd-config';
 
 const CompareCFDs = observer(() => {
     const history = useHistory();
@@ -76,7 +77,7 @@ const CompareCFDs = observer(() => {
                 <Text size='m' weight='bold' color='prominent'>
                     <Localize
                         i18n_default_text={
-                            selected_region === 'EU'
+                            selected_region === REGION.EU
                                 ? 'Deriv MT5 CFDs {{real_title}} account'
                                 : 'Compare CFDs {{demo_title}} accounts'
                         }

packages/cfd/src/Containers/cfd-dbvi-onboarding.tsx

@@ -13,10 +13,11 @@ import {
     UILoader,
 } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import { getAuthenticationStatusInfo, isMobile, WS, Jurisdiction } from '@deriv/shared';
+import { getAuthenticationStatusInfo, isMobile, WS } from '@deriv/shared';
 import CFDFinancialStpRealAccountSignup from './cfd-financial-stp-real-account-signup';
 import { observer, useStore } from '@deriv/stores';
 import { useCfdStore } from '../Stores/Modules/CFD/Helpers/useCfdStores';
+import { JURISDICTION } from '../Helpers/cfd-config';
 
 const SwitchToRealAccountMessage = ({ onClickOk }: { onClickOk: () => void }) => (
     <div className='da-icon-with-message'>
@@ -66,9 +67,9 @@ const CFDDbviOnboarding = observer(() => {
                     poa_resubmit_for_labuan,
                     need_poa_submission,
                 } = getAuthenticationStatusInfo(get_account_status);
-                if (jurisdiction_selected_shortcode === Jurisdiction.MALTA_INVEST) {
+                if (jurisdiction_selected_shortcode === JURISDICTION.MALTA_INVEST) {
                     setShowSubmittedModal(poi_acknowledged_for_maltainvest && poa_acknowledged);
-                } else if (jurisdiction_selected_shortcode === Jurisdiction.LABUAN) {
+                } else if (jurisdiction_selected_shortcode === JURISDICTION.LABUAN) {
                     /* When verified with IDV+ Photo ID, POA is auto verified */
                     const is_poa_submitted = poa_resubmit_for_labuan ? false : !need_poa_submission;
                     setShowSubmittedModal(