Akmal / Rename Synthetic accounts into Derived (binary-com#6568)

* Rename Synthetic accounts into Derived

* Update test cases

* Fix failed test cases

* Fix: icons naming

* Fix: remove unused function

* Fix: icons.js

* Rename latest strings

* Content and style changes for derived accounts

* Content changes for MT5 dashboard

* Rename DMT5 to Deriv Mt5

* Fix test cases

* Revert "Fix test cases"

This reverts commit 74dd2fb.

* Revert "Rename DMT5 to Deriv Mt5"

This reverts commit f0b74d7.

* Revert "Content changes for MT5 dashboard"

This reverts commit 32e03e6.

* Redo content changes

* Revert the fix

* Rename derived label to derived svg

* Change label for real account

* Revert revert 'Rename DMT5 password to Deriv MT5 password'

* Fix test cases

* Fix test case

* Change password modal title

* Fix test case

* Revert Derived SVG change

* Change DMT5 to Deriv MT5 in jurisdiction

* Add condition

* removed Dmt5 from the transfer dropdown in cashier

* fixed cashier related test cases

* Update jurisdiction modal

* Fix the whatever

* Temporarily remove test case until Deriv X part is done

* Add jurisdiction to success modal

* Fix getFormattedJurisdictionCode

* Add enter password label with jurisdiction

* Remove old test case, the value is set dynamically

* Temp fix: change derived label to synthetic for deriv x only

* Revert "Vinu/removed Dmt5 for synthetic account from the transfer dropdown in cashier"

* Fix: dxtrade label temp fix

* Fix: remp fix for dxtrade label in success modal

* Revert label for deriv x

Co-authored-by: Yashim Wong <yashim@deriv.com>
Co-authored-by: vinu-deriv <vinu@deriv.com>

packages/account/src/Components/reset-trading-password-modal/__tests__/reset-trading-password-modal.spec.js

@@ -31,7 +31,7 @@ jest.mock('react-router-dom', () => ({
 
 const interactWithPasswordField = async (trigger_click = true) => {
     await waitForElementToBeRemoved(() => screen.getByTestId('dt_initial_loader'));
-    fireEvent.change(screen.getByLabelText('DMT5 password', { selector: 'input' }), {
+    fireEvent.change(screen.getByLabelText('Deriv MT5 password', { selector: 'input' }), {
         target: { value: 'hN795jCWkDtPy5' },
     });
     if (trigger_click) {
@@ -85,7 +85,7 @@ describe('<ResetTradingPasswordModal/>', () => {
         );
         await interactWithPasswordField();
 
-        expect(await screen.findByText('Reset DMT5 password')).toBeInTheDocument();
+        expect(await screen.findByText('Reset Deriv MT5 password')).toBeInTheDocument();
     });
 
     it('should display error message returned by API', async () => {

packages/appstore/src/components/modals/cfd-password-modal/cfd-password-modal.tsx

@@ -13,6 +13,7 @@ type TCFDPasswordFormProps = {
     validatePassword: any;
     submitMt5Password: any;
     is_real_financial_stp: boolean;
+    jurisdiction_selected_shortcode: string;
     closeModal: any;
     form_error?: any;
     account_title: any;
@@ -113,6 +114,7 @@ const CFDPasswordModal = () => {
         has_cfd_error,
         is_cfd_success_dialog_enabled,
         is_cfd_password_modal_enabled,
+        jurisdiction_selected_shortcode,
         setError,
         setCFDSuccessDialog,
     } = cfd;
@@ -178,6 +180,7 @@ const CFDPasswordModal = () => {
                 closeModal={closeModal}
                 submitMt5Password={submit}
                 is_real_financial_stp={is_real_financial_stp}
+                jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
                 validatePassword={validatePassword}
             />
         </Modal>

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

@@ -124,7 +124,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={[mt5_acc]}
             />
         );
@@ -181,7 +181,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={[mt5_acc]}
                 is_eu={false}
             />
@@ -279,7 +279,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={[]}
                 platform='mt5'
                 is_eu={false}
@@ -299,7 +299,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={[]}
                 platform='mt5'
                 is_eu={false}
@@ -319,7 +319,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={[]}
                 platform='mt5'
                 is_eu={false}
@@ -340,7 +340,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 platform='mt5'
                 button_label='Add real account'
                 existing_accounts_data={null}
@@ -361,7 +361,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 platform='mt5'
                 button_label='Add demo account'
                 existing_accounts_data={null}
@@ -382,7 +382,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 platform='mt5'
                 existing_accounts_data={[mt5_labuan_acc]}
             />
@@ -401,7 +401,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 platform='dxtrade'
             />
         );
@@ -420,7 +420,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={[derivx_acc]}
                 platform='dxtrade'
             />
@@ -441,7 +441,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={[derivx_acc]}
                 platform='dxtrade'
                 is_eu={false}
@@ -470,7 +470,7 @@ describe('CFDAccountCard', () => {
                 {...props}
                 type={type}
                 descriptor={synthetic_descriptor}
-                title='Synthetic'
+                title='Derived'
                 existing_accounts_data={null}
                 platform='dxtrade'
                 is_eu={false}

packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js

@@ -100,7 +100,7 @@ describe('<CFDDemoAccountDisplay />', () => {
 
     const checkAccountCardsRendering = tested_case => {
         const component_testid = 'dt_cfd_demo_accounts_display';
-        const first_account_card = 'Synthetic';
+        const first_account_card = 'Derived';
         const second_account_card = {
             eu: 'CFDs',
             non_eu: 'Financial',
@@ -125,7 +125,7 @@ describe('<CFDDemoAccountDisplay />', () => {
         }
     };
 
-    it('should render Synthetic & Financial cards with enabled buttons on DMT5 when non-EU, non-IoM, is_logged_in=true & has_maltainvest_account=false', () => {
+    it('should render Derived & Financial cards with enabled buttons on DMT5 when non-EU, non-IoM, is_logged_in=true & has_maltainvest_account=false', () => {
         render(<CFDDemoAccountDisplay {...props} />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
@@ -139,7 +139,7 @@ describe('<CFDDemoAccountDisplay />', () => {
         expect(props.onSelectAccount).toHaveBeenCalledWith({ type: 'financial', category: 'demo', platform: 'mt5' });
     });
 
-    it('should render Synthetic & Financial cards without "Add demo account" buttons on DMT5 when is_logged_in=false & is_eu_country=false', () => {
+    it('should render Derived & Financial cards without "Add demo account" buttons on DMT5 when is_logged_in=false & is_eu_country=false', () => {
         render(<CFDDemoAccountDisplay {...props} is_logged_in={false} />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
@@ -167,7 +167,7 @@ describe('<CFDDemoAccountDisplay />', () => {
         expect(screen.queryAllByRole('button', { name: /add demo account/i }).length).toBe(0);
     });
 
-    it('should render Synthetic & Financial cards with enabled buttons on Deriv X when is_logged_in=true & is_eu=false', () => {
+    it('should render Derived & Financial cards with enabled buttons on Deriv X when is_logged_in=true & is_eu=false', () => {
         render(<CFDDemoAccountDisplay {...props} platform='dxtrade' />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DXTRADE);
@@ -189,7 +189,7 @@ describe('<CFDDemoAccountDisplay />', () => {
         });
     });
 
-    it('should render Synthetic & Financial cards without "Add demo account" buttons on Deriv X when is_logged_in=false & is_eu_country=false', () => {
+    it('should render Derived & Financial cards without "Add demo account" buttons on Deriv X when is_logged_in=false & is_eu_country=false', () => {
         render(<CFDDemoAccountDisplay {...props} is_logged_in={false} platform='dxtrade' />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DXTRADE);

packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js

@@ -194,7 +194,7 @@ describe('<CFDRealAccountDisplay />', () => {
     };
 
     const checkAccountCardsRendering = tested_case => {
-        const first_account_card = 'Synthetic';
+        const first_account_card = 'Derived';
         const second_account_card = {
             eu: 'CFDs',
             non_eu: 'Financial',
@@ -203,7 +203,6 @@ describe('<CFDRealAccountDisplay />', () => {
         expect(screen.getByTestId('dt_cfd_real_accounts_display')).toBeInTheDocument();
 
         if (tested_case === TESTED_CASES.NON_EU_DMT5 || tested_case === TESTED_CASES.NON_EU_DXTRADE) {
-            expect(screen.getByText(first_account_card)).toBeInTheDocument();
             expect(screen.getByText(second_account_card.non_eu)).toBeInTheDocument();
         } else if (tested_case === TESTED_CASES.EU) {
             expect(screen.queryByText(first_account_card)).not.toBeInTheDocument();
@@ -212,7 +211,7 @@ describe('<CFDRealAccountDisplay />', () => {
         }
     };
 
-    it('should render Synthetic & Financial cards with enabled buttons on DMT5 when is_logged_in=true & is_eu=false', () => {
+    it('should render Derived & Financial cards with enabled buttons on DMT5 when is_logged_in=true & is_eu=false', () => {
         render(<CFDRealAccountDisplay {...props} />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
@@ -226,7 +225,7 @@ describe('<CFDRealAccountDisplay />', () => {
         expect(props.onSelectAccount).toHaveBeenCalledWith({ type: 'financial', category: 'real', platform: 'mt5' });
     });
 
-    it('should render Synthetic & Financial cards without "Add real account" buttons on DMT5 when is_logged_in=false & is_eu_country=false', () => {
+    it('should render Derived & Financial cards without "Add real account" buttons on DMT5 when is_logged_in=false & is_eu_country=false', () => {
         render(<CFDRealAccountDisplay {...props} is_logged_in={false} />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
@@ -255,7 +254,7 @@ describe('<CFDRealAccountDisplay />', () => {
         expect(screen.queryAllByRole('button', { name: /add real account/i }).length).toBe(0);
     });
 
-    it('should render Synthetic & Financial cards with enabled buttons on Deriv X when is_logged_in=true & is_eu=false', () => {
+    it('should render Derived & Financial cards with enabled buttons on Deriv X when is_logged_in=true & is_eu=false', () => {
         render(<CFDRealAccountDisplay {...props} platform='dxtrade' />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DXTRADE);
@@ -277,7 +276,7 @@ describe('<CFDRealAccountDisplay />', () => {
         });
     });
 
-    it('should render Synthetic & Financial cards without "Add real account" buttons on Deriv X when is_logged_in=false & is_eu_country=false', () => {
+    it('should render Derived & Financial cards without "Add real account" buttons on Deriv X when is_logged_in=false & is_eu_country=false', () => {
         render(<CFDRealAccountDisplay {...props} is_logged_in={false} platform='dxtrade' />);
 
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DXTRADE);

packages/cfd/src/Components/cfd-demo-account-display.tsx

@@ -110,7 +110,7 @@ const CFDDemoAccountDisplay = ({
         <div className='cfd-demo-accounts-display' data-testid='dt_cfd_demo_accounts_display'>
             {isSyntheticCardVisible('demo') && (
                 <CFDAccountCard
-                    title={localize('Synthetic')}
+                    title={localize('Derived')}
                     type={{
                         category: 'demo',
                         type: 'synthetic',
@@ -148,9 +148,7 @@ const CFDDemoAccountDisplay = ({
                         )
                     }
                     platform={platform}
-                    descriptor={localize(
-                        'Trade CFDs on our synthetic indices that simulate real-world market movements.'
-                    )}
+                    descriptor={localize('Trade CFDs on our synthetics, basket indices, and Derived FX.')}
                     specs={specifications[platform as keyof TSpecifications].real_synthetic_specs}
                     has_banner
                     toggleMT5TradeModal={toggleMT5TradeModal}

packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx

@@ -114,7 +114,7 @@ const CFDMT5DemoAccountDisplay = ({
                 <div className='cfd-demo-accounts-display' data-testid='dt_cfd_demo_accounts_display'>
                     {isSyntheticCardVisible('demo') && (
                         <CFDAccountCard
-                            title={localize('Synthetic')}
+                            title={localize('Derived')}
                             type={{
                                 category: 'demo',
                                 type: 'synthetic',
@@ -139,9 +139,7 @@ const CFDMT5DemoAccountDisplay = ({
                                 })
                             }
                             platform={platform}
-                            descriptor={localize(
-                                'Trade CFDs on our synthetic indices that simulate real-world market movements.'
-                            )}
+                            descriptor={localize('Trade CFDs on our synthetics, basket indices, and Derived FX.')}
                             specs={specifications[platform as keyof TSpecifications].real_synthetic_specs}
                             has_banner
                             toggleMT5TradeModal={toggleMT5TradeModal}

packages/cfd/src/Components/cfd-real-account-display.tsx

@@ -176,7 +176,7 @@ const CFDRealAccountDisplay = ({
         <CFDAccountCard
             key='real.synthetic'
             has_cfd_account_error={has_cfd_account_error}
-            title={localize('Synthetic')}
+            title={platform === 'mt5' ? localize('Derived') : localize('Synthetic')}
             has_real_account={has_real_account}
             is_accounts_switcher_on={is_accounts_switcher_on}
             is_disabled={isMT5AccountCardDisabled('synthetic')}
@@ -192,7 +192,11 @@ const CFDRealAccountDisplay = ({
             onPasswordManager={openPasswordManager}
             onClickFund={onClickFundReal}
             platform={platform}
-            descriptor={localize('Trade CFDs on our synthetic indices that simulate real-world market movements.')}
+            descriptor={
+                platform === 'mt5'
+                    ? localize('Trade CFDs on our synthetics, basket indices.')
+                    : localize('Trade CFDs on our synthetic indices that simulate real-world market movements.')
+            }
             specs={specifications[platform as keyof TSpecifications].real_synthetic_specs}
             is_virtual={is_virtual}
             toggleShouldShowRealAccountsList={toggleShouldShowRealAccountsList}

packages/cfd/src/Constants/cfd-shared-strings.js

@@ -27,7 +27,7 @@ export const general_messages = {
                     'Trade CFDs on forex, stocks, stock indices, synthetic indices, and commodities with leverage.'
                 );
             }
-            return localize('Trade CFDs on forex, stocks & stock indices, commodities, basket indices, and crypto.');
+            return localize('Trade CFDs on forex, stocks & stock indices, commodities, and crypto.');
         }
         return '';
     },

packages/cfd/src/Containers/__tests__/cfd-change-password-confirmation.spec.js

@@ -58,7 +58,9 @@ describe('ChangePasswordConfirmation', () => {
     it('check whether the text is according to the platform', () => {
         render(<ChangePasswordConfirmation {...mock_props} />);
 
-        expect(screen.getByText(/Confirm to change your DMT5 password/i)).toBeInTheDocument();
-        expect(screen.getByText(/This will change the password to all of your DMT5 accounts/i)).toBeInTheDocument();
+        expect(screen.getByText(/Confirm to change your Deriv MT5 password/i)).toBeInTheDocument();
+        expect(
+            screen.getByText(/This will change the password to all of your Deriv MT5 accounts/i)
+        ).toBeInTheDocument();
     });
 });

packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx

@@ -317,7 +317,7 @@ describe('<CFDDashboard />', () => {
         expect(screen.getByText('NotificationMessages')).toBeInTheDocument();
         expect(screen.getByText(real_tab_name)).toBeInTheDocument();
         expect(screen.getByText(demo_tab_name)).toBeInTheDocument();
-        expect(screen.getByText('Synthetic')).toBeInTheDocument();
+        expect(screen.getByText('Derived')).toBeInTheDocument();
         expect(screen.getByText('Financial')).toBeInTheDocument();
         expect(screen.getByRole('button', { name: compare_accounts_button_label })).toBeInTheDocument();
         expect(screen.getByRole('heading', { name: dmt5_download_header })).toBeInTheDocument();