hamid/74062/cfd-dashboard-demo-account (binary-com#6427)

* Add required packages and icon and update qrcode * CFD dashboard for demo account * Fix tests errors * Fix PR comments * Add Huawei Link * Resolve PR comments * Edit SCSS classes * Resolve conflict * Change dxtrade type from synthetic to all * Resolve PR comments * Change texts * Apply QA commnets * Update AccoutSwitcher * Fix tests errors * Remove unneeded code * Enhance code * Run svgo for new dxtrade icons * Change QRCode url * Change QRCode url * Enhance Code * Check enabled property for existing accounts * Hide disabled account in the Account-Switcher * Change icon and text of the succes modal * Change Title of account information modal: currency * Add mobile app hint * Update Password Modal Text * Add TODO Co-authored-by: Yashim Wong <yashim@deriv.com>
adrienne-deriv · Oct 7, 2022 · 645a82b · 645a82b
1 parent 6c4c462
commit 645a82b
Show file tree

Hide file tree

Showing 49 changed files with 1,471 additions and 551 deletions.
diff --git a/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx b/packages/account/src/Sections/Security/Passwords/passwords-platform.jsx
@@ -71,14 +71,7 @@ const PasswordsPlatform = ({ email, has_dxtrade_accounts, has_mt5_accounts }) =>
                     <React.Fragment>
                         <Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
                             <Localize
-                                i18n_default_text='Your {{platform_name_dxtrade}} password is for logging in to your {{platform_name_dxtrade}} accounts on the web and mobile apps.'
-                                values={{ platform_name_dxtrade }}
-                            />
-                        </Text>
-                        <Text as='p' className='passwords-platform__desc' color='prominent' size='xs' weight='lighter'>
-                            <Localize
-                                i18n_default_text='Click the <0>Change password</0> button to change your {{platform_name_dxtrade}} password.'
-                                components={[<strong key={0} />]}
+                                i18n_default_text='Use the {{platform_name_dxtrade}} password to log in to your {{platform_name_dxtrade}} accounts on the web and mobile apps.'
                                 values={{ platform_name_dxtrade }}
                             />
                         </Text>

diff --git a/packages/appstore/package.json b/packages/appstore/package.json
@@ -29,7 +29,7 @@
     "license": "ISC",
     "dependencies": {
         "@deriv/account": "^1.0.0",
-        "@deriv/api-types": "1.0.48",
+        "@deriv/api-types": "^1.0.54",
         "@deriv/components": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/trader": "^3.8.0",
@@ -50,9 +50,9 @@
         "@deriv/publisher": "^0.0.1-beta4",
         "@types/classnames": "^2.2.11",
         "@types/object.fromentries": "^2.0.0",
-        "@types/react-router-dom": "^5.1.6",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",
+        "@types/react-router-dom": "^5.1.6",
         "babel-core": "^6.26.3",
         "babel-loader": "^8.1.0",
         "chai": "^4.2.0",

diff --git a/packages/cashier/package.json b/packages/cashier/package.json
@@ -35,7 +35,7 @@
         "url": "https://github.com/binary-com/deriv-app/issues"
     },
     "dependencies": {
-        "@deriv/api-types": "1.0.48",
+        "@deriv/api-types": "^1.0.54",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.8",
         "@deriv/p2p": "^0.7.3",

diff --git a/packages/cfd/package.json b/packages/cfd/package.json
@@ -35,10 +35,10 @@
     },
     "homepage": "https://github.com/binary-com/deriv-app",
     "devDependencies": {
-        "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.1.0",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",
+        "babel-eslint": "^10.1.0",
+        "babel-loader": "^8.1.0",
         "chai": "^4.2.0",
         "circular-dependency-plugin": "^5.2.2",
         "clean-webpack-plugin": "^3.0.0",
@@ -87,7 +87,7 @@
     },
     "dependencies": {
         "@deriv/account": "^1.0.0",
-        "@deriv/api-types": "1.0.48",
+        "@deriv/api-types": "^1.0.54",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.8",
         "@deriv/shared": "^1.0.0",
@@ -107,6 +107,7 @@
         "prop-types": "^15.7.2",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
+        "react-qrcode": "^0.3.5",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-transition-group": "4.4.2"

diff --git a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js
@@ -223,7 +223,7 @@ describe('<CFDDemoAccountDisplay />', () => {
             />
         );
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DXTRADE);
-        const dxtrade_fund_top_up_button = screen.getByRole('button', { name: /fund top up/i });
+        const dxtrade_fund_top_up_button = screen.getByRole('button', { name: /top up/i });
         const dxtrade_trade_on_web_terminal_button = screen.getByRole('link', { name: /trade on web terminal/i });
         expect(dxtrade_trade_on_web_terminal_button).toHaveAttribute('href', 'https://dx-demo.deriv.com');
 

diff --git a/...__tests__/cfd-dashboard-container.spec.js → .../__tests__/cfd-download-container.spec.js b/...__tests__/cfd-dashboard-container.spec.js → .../__tests__/cfd-download-container.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import CFDDashboardContainer from '../cfd-dashboard-container';
+import CFDDownloadContainer from '../cfd-download-container';
 
 jest.mock('@deriv/components', () => {
     const original_module = jest.requireActual('@deriv/components');
@@ -10,7 +10,7 @@ jest.mock('@deriv/components', () => {
     };
 });
 
-describe('CFDDashboardContainer', () => {
+describe('CFDDownloadContainer', () => {
     const mock_props = {
         platform: 'mt5',
         active_index: 0,
@@ -21,12 +21,12 @@ describe('CFDDashboardContainer', () => {
         },
     };
 
-    it('should render <CFDDashboardContainer /> correctly', () => {
-        render(<CFDDashboardContainer {...mock_props} />);
+    it('should render <CFDDownloadContainer /> correctly', () => {
+        render(<CFDDownloadContainer {...mock_props} />);
         expect(screen.getByTestId(/dt_cfd_dashboard_download_center_container/i)).toBeInTheDocument();
     });
     it('should render correct text according to the MT5 platform', () => {
-        render(<CFDDashboardContainer {...mock_props} />);
+        render(<CFDDownloadContainer {...mock_props} />);
         expect(
             screen.getByText(/run MT5 from your browser or download the MT5 app for your devices/i)
         ).toBeInTheDocument();
@@ -35,7 +35,7 @@ describe('CFDDashboardContainer', () => {
         ).toBeInTheDocument();
     });
     it('should show the proper icons for the MT5 platform ', () => {
-        render(<CFDDashboardContainer {...mock_props} />);
+        render(<CFDDownloadContainer {...mock_props} />);
         expect(screen.getByText(/IcMt5DeviceDesktop/i)).toBeInTheDocument();
         expect(screen.getByText(/IcMt5DeviceLaptop/i)).toBeInTheDocument();
         expect(screen.getByText(/IcInstallationWindows/i)).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe('CFDDashboardContainer', () => {
     });
 
     it('should download/redirect the correct file for MT5 platform', () => {
-        render(<CFDDashboardContainer {...mock_props} />);
+        render(<CFDDownloadContainer {...mock_props} />);
         expect(screen.getByText(/IcInstallationWindows/i).closest('a')).toHaveAttribute(
             'href',
             'https://download.mql5.com/cdn/web/deriv.limited/mt5/derivmt5setup.exe'
@@ -77,27 +77,15 @@ describe('CFDDashboardContainer', () => {
     });
 
     it('should render the correct icons and text for the Deriv X platform', () => {
-        render(<CFDDashboardContainer {...mock_props} platform='dxtrade' />);
-        expect(screen.getByText(/IcDxtradeDeviceDesktop/i)).toBeInTheDocument();
-        expect(screen.getByText(/IcDxtradeDeviceLaptop/i)).toBeInTheDocument();
+        render(<CFDDownloadContainer {...mock_props} platform='dxtrade' />);
         expect(screen.getByText(/IcBrandDxtrade/i)).toBeInTheDocument();
-        expect(screen.getByText(/IcDxtradeDeviceTablet/i)).toBeInTheDocument();
-        expect(screen.getByText(/IcDxtradeDevicePhone/i)).toBeInTheDocument();
         expect(screen.getByText(/IcInstallationGoogle/i)).toBeInTheDocument();
         expect(screen.getByText(/IcInstallationApple/i)).toBeInTheDocument();
-        expect(screen.getByText(/Run deriv x on your browser or download the mobile app/i)).toBeInTheDocument();
         expect(screen.getByText(/web terminal/i)).toBeInTheDocument();
     });
-    it('should render the correct icons if dark mode is on for DerivX', () => {
-        render(<CFDDashboardContainer {...mock_props} platform='dxtrade' is_dark_mode_on='true' />);
-        expect(screen.getByText(/IcDxtradeDeviceDesktopLight/i)).toBeInTheDocument();
-        expect(screen.getByText(/IcDxtradeDeviceLaptopLight/i)).toBeInTheDocument();
-        expect(screen.getByText(/IcDxtradeDeviceTabletLight/i)).toBeInTheDocument();
-        expect(screen.getByText(/IcDxtradeDevicePhoneLight/i)).toBeInTheDocument();
-    });
 
     it('should download/redirect the correct file for DerivX', () => {
-        render(<CFDDashboardContainer {...mock_props} platform='dxtrade' active_index={0} />);
+        render(<CFDDownloadContainer {...mock_props} platform='dxtrade' active_index={0} />);
         expect(screen.getByText(/IcBrandDxtrade/i).closest('a')).toHaveAttribute('href', 'https://dx.deriv.com');
         expect(screen.getByText(/IcInstallationGoogle/i).closest('a')).toHaveAttribute(
             'href',
@@ -109,7 +97,7 @@ describe('CFDDashboardContainer', () => {
         );
     });
     it('should render demo account dashboard and the demo link for derivx web terminal if active_index is 1 ', () => {
-        render(<CFDDashboardContainer {...mock_props} active_index={1} platform='dxtrade' />);
+        render(<CFDDownloadContainer {...mock_props} active_index={1} platform='dxtrade' />);
         expect(screen.getByText(/IcBrandDxtrade/i).closest('a')).toHaveAttribute('href', 'https://dx-demo.deriv.com');
     });
 });
diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx
@@ -25,10 +25,12 @@ const account_icons: { [key: string]: TAccountIconValues } = {
         financial_stp: 'IcMt5FinancialStpPlatform',
         cfd: 'IcMt5CfdPlatform',
     },
+    // TODO: Line 30, 31 and 32 should be removed after real released.
     dxtrade: {
         synthetic: 'IcDxtradeSyntheticPlatform',
         financial: 'IcDxtradeFinancialPlatform',
         cfd: 'IcMt5CfdPlatform',
+        all: 'IcDxtradeDerivxPlatform',
     },
 };
 
@@ -595,7 +597,7 @@ const CFDAccountCardComponent = ({
                             <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='Fund top up' />}
+                                    {type.category === 'demo' && <Localize i18n_default_text='Top up' />}
                                 </Button>
                             </div>
                         )}

diff --git a/packages/cfd/src/Components/cfd-demo-account-display.tsx b/packages/cfd/src/Components/cfd-demo-account-display.tsx
@@ -5,7 +5,7 @@ import { general_messages } from '../Constants/cfd-shared-strings';
 import specifications, { TSpecifications } from '../Constants/cfd-specifications';
 import Loading from '../templates/_common/components/loading';
 import { DetailsOfEachMT5Loginid, LandingCompany } from '@deriv/api-types';
-import { TTradingPlatformAccounts } from './props.types';
+import { TTradingPlatformAccounts, TCFDPlatform } from './props.types';
 import { TObjectCFDAccount } from 'Containers/cfd-dashboard';
 
 type TStandPoint = {
@@ -38,7 +38,7 @@ type TCFDDemoAccountDisplayProps = {
         data: DetailsOfEachMT5Loginid | TTradingPlatformAccounts,
         meta: TOpenAccountTransferMeta
     ) => void;
-    platform: string;
+    platform: TCFDPlatform;
     current_list: Record<string, DetailsOfEachMT5Loginid>;
     openPasswordManager: (login?: string, title?: string, group?: string, type?: string, server?: string) => void;
     residence: string;