Hirad-Hamza-ShonTzu/Feature revamp compare account re-deployment (#9611)

* feat: initializing the compare account implementation

* feat: icon reusable component v1.0

* feat: icon reusable component v1.1

* feat: icon reusable component v1.1.1

* feat: initialize compare cfd account page (todo:css)

* feat: blank compare cfd accounts page & navi done

* feat: mobile view

* fix: compare-accounts naming convention

* fix: updated path import

* fix: reverted icons.js changes

* fix: compare-cfds -> compare-accounts

* feat: reusable component v1.2

* feat: reusable component v1.2.1

* feat: icon reusable component added v1.3

* feat: reusable component for Icons

* feat: reusable component for Icons refactor

* feat: reusable component for Icons refactor v1.2

* feat: description div added

* feat: description with title +icon is added

* feat: platform label + icon component padding added

* chore: labuan leverage updated

* chore: css issue fixed for Cards

* feat: carousel added with sorting o f MT5 accounts

* feat: carousel arrow background and container added

* chore: added dxtrade in the card for dynamic rendering with type fixes

* chore: changes in platform label header with respect to props data

* chore: icons updated because of white line issue in icons

* chore: change the components css name and other naming convention tweaks

* refactor: suggestions implemented

* refactor: convert carousel button into one

* feat: initial commit for starting collaboration

* feat: added the button placeholder

* feat: added new banner to cfd cards

* refactor: make the banner smaller

* fix: added condition to show banner for derivez and ctrader only

* refactor: changed the types and applied suggestions

* refactor: removed the invalide shortcode for dxtrade

* refactor: round up patches based on reviews

* fix: round up patch 2 based on review

* Update packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss

Co-authored-by: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>

* refactor: button width

* refactor: button classname

* chore: fix css of underline

* chore: added redirection to homepage in case of modals

* fix: circle ci failed due to wrong type of client function

* chore: added the disabled property for the Added accounts

* chore: added condition for the dxtrade

* chore: rearrange block scoped variables

* chore: fix css of labuan tooltip with removal of commented code

* chore: responsive view fixes

* feat: demo accounts added for low risk

* feat: demo accounts label added and swap-free account creation fixed

* chore: added derivx account creation flow

* refactor: replace ternary operators with if-else

* chore: remove unused jurisdiction

* feat: demo account compare implemetation tweaks as per design

* feat: rectified the Demo title as per design

* chore: font weigth of instruments as per design

* feat: Eu flow for DIEL

* feat: changes in the icons label and correction in EU flow

* chore: addded translations demo title and rename baskets

* chore: rename icon type

* chore: final changes prop drilling instead of observer EU flow finalized

* fix: hidding deriv ez

* fix: EU flow platform label change

* feat: test case for description added

* feat: platform label test case added

* feat: title icon test case added

* feat: title icon test case added

* chore: fix test case description + instruments icon test added

* refactor: blank spaces removed

* chore: cfd-instruments-label test added

* chore: test file added cfd-instrument-label

* feat: button partial test case added

* chore: added more test case for Button component

* feat: added test case for compare-account-card

* chore: merge conflicts

* chore: test for cfd-compare-accounts added

* feat: derivX demo

* chore: added testcase for dxtrade in button

* fix: dxtrade for australian clients

* fix: swapfree account creation added

* fix: comapre account fixes first round

* fix: remove the css because scroll not working

* fix: renamed variable + icons

* fix: cursor not allowed on instrument icons

* fix: fixed the circle ci issue

* fix: fixed one of our test issues

* refactor: review comments resolved

* fix: changing the text of mf accounts to pass the tests

* fix: made changes according to suggestions

* fix: made changes according to suggestions

* fix: fixed the test case issues

* chore: added s to spread(s)

* chore: fixed capitalization

* chore: line split

* fix: failing test case

* fix: updated markets offerings for MT5 Financial Labuan

* fix: Other CFDs --> Other CFDs Platform

* fix: removed standard/micro from DerivX Forex label

* refactor: optimised code

* fix: icon size inconsistencyn mobile VP

* refactor: css refactoring to reflect figma as much as possible

* refactor: minor css fixes

* fix: fixed

* style: added bottom padding for mobile

* fix: fixed the build issue

* chore: re running the tests

* fix: subtasks

* chore: typo

* style: position the tooltip to be center within the card

* style: resize width for word-wrap

* chore: d and r should be lowercase dispute and resolution

* fix: fixing sonar cloud issues

* fix: making changes to pass the tests

---------

Co-authored-by: hamza-deriv <hamza.muhammad@regentmarkets.com>
Co-authored-by: shontzu-deriv <shon.tzu@regentmarkets.com>
Co-authored-by: shontzu <108507236+shontzu-deriv@users.noreply.github.com>
Co-authored-by: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -2057,6 +2057,3 @@
         }
     }
 }
-.cfd-accounts__compare-table-title {
-    cursor: pointer;
-}

packages/appstore/src/components/cfds-listing/index.tsx

@@ -7,6 +7,7 @@ import ListingContainer from 'Components/containers/listing-container';
 import AddOptionsAccount from 'Components/add-options-account';
 import TradingAppCard from 'Components/containers/trading-app-card';
 import PlatformLoader from 'Components/pre-loader/platform-loader';
+import CompareAccount from 'Components/compare-account';
 import GetMoreAccounts from 'Components/get-more-accounts';
 import { Actions } from 'Components/containers/trading-app-card-actions';
 import { getHasDivider } from 'Constants/utils';
@@ -53,7 +54,7 @@ const CFDsListing = observer(() => {
         financial_restricted_countries,
     } = traders_hub;
 
-    const { toggleCompareAccountsModal, setAccountType } = cfd;
+    const { setAccountType } = cfd;
     const { is_landing_company_loaded, real_account_creation_unlock_date, account_status } = client;
     const { setAppstorePlatform } = common;
     const { openDerivRealAccountNeededModal, setShouldShowCooldownModal } = ui;
@@ -154,11 +155,7 @@ const CFDsListing = observer(() => {
                         <Text size='sm' line_height='m' weight='bold' color='prominent'>
                             {localize('CFDs')}
                         </Text>
-                        <div className='cfd-accounts__compare-table-title' onClick={toggleCompareAccountsModal}>
-                            <Text key={0} color='red' size='xxs' weight='bold' styles={{ marginLeft: '1rem' }}>
-                                <Localize i18n_default_text={accounts_sub_text} />
-                            </Text>
-                        </div>
+                        <CompareAccount accounts_sub_text={accounts_sub_text} is_desktop={!isMobile()} />
                     </div>
                 )
             }
@@ -173,13 +170,7 @@ const CFDsListing = observer(() => {
                 </Text>
             }
         >
-            {isMobile() && (
-                <div className='cfd-accounts__compare-table-title' onClick={toggleCompareAccountsModal}>
-                    <Text size='xs' color='red' weight='bold' line_height='s'>
-                        <Localize i18n_default_text={accounts_sub_text} />
-                    </Text>
-                </div>
-            )}
+            {isMobile() && <CompareAccount accounts_sub_text={accounts_sub_text} />}
 
             <AddDerivAccount />
 

packages/appstore/src/components/compare-account/compare-account.scss

@@ -0,0 +1,3 @@
+.cfd-accounts__compare-table-title {
+    cursor: pointer;
+}

packages/appstore/src/components/compare-account/compare-account.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { useHistory } from 'react-router-dom';
+import { routes } from '@deriv/shared';
+
+type TCompareAccount = {
+    accounts_sub_text: string;
+    is_desktop?: boolean;
+};
+
+const CompareAccount = ({ accounts_sub_text, is_desktop }: TCompareAccount) => {
+    const history = useHistory();
+    return (
+        <div
+            className='cfd-accounts__compare-table-title'
+            onClick={() => {
+                history.push(routes.compare_cfds);
+            }}
+        >
+            <Text size='xs' color='red' weight='bold' line_height='s' styles={is_desktop ? { marginLeft: '1rem' } : ''}>
+                <Localize i18n_default_text={accounts_sub_text} />
+            </Text>
+        </div>
+    );
+};
+
+export default CompareAccount;

packages/appstore/src/components/compare-account/index.ts

@@ -0,0 +1,4 @@
+import CompareAccount from './compare-account';
+import './compare-account.scss';
+
+export default CompareAccount;

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

@@ -3,6 +3,7 @@ import TradersHub from 'Modules/traders-hub';
 import ConfigStore from 'Stores/config-store';
 import { TRoute } from 'Types';
 import Onboarding from 'Modules/onboarding';
+import CFDCompareAccounts from '@deriv/cfd/src/Containers/cfd-compare-accounts';
 
 type TRoutesConfig = {
     consumer_routes: ConfigStore['routes'];
@@ -21,6 +22,11 @@ const initRoutesConfig = ({ consumer_routes }: TRoutesConfig): TRoute[] => [
         component: Onboarding,
         getTitle: () => localize('Onboarding'),
     },
+    {
+        path: consumer_routes.compare_cfds,
+        component: CFDCompareAccounts,
+        getTitle: () => localize('CFDCompareAccounts'),
+    },
 ];
 
 let routes_config: Array<TRoute>;

packages/appstore/src/stores/config-store.ts

@@ -6,6 +6,7 @@ export default class ConfigStore extends BaseStore {
     public routes = {
         traders_hub: '/appstore/traders-hub',
         onboarding: '/appstore/onboarding',
+        compare_cfds: '/appstore/compare-accounts',
 
         my_apps: '/my-apps',
         explore: '/explore',

packages/cfd/src/Assets/svgs/trading-instruments/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import DerivedFX from './ic-instrument-derived-fx.svg';
+import Synthetics from './ic-instrument-synthetics.svg';
+import Baskets from './ic-instrument-baskets.svg';
+import Stocks from './ic-instrument-stocks.svg';
+import StockIndices from './ic-instrument-stock-indices.svg';
+import Commodities from './ic-instrument-commodities.svg';
+import Forex from './ic-instrument-forex.svg';
+import Cryptocurrencies from './ic-instrument-cryptocurrencies.svg';
+import ETF from './ic-instrument-etf.svg';
+
+export type IconProps<T> = {
+    icon: T;
+    className?: string;
+    size?: number;
+    onClick?: () => void;
+};
+
+export const InstrumentsIcons = {
+    DerivedFX,
+    Synthetics,
+    Baskets,
+    Stocks,
+    StockIndices,
+    Commodities,
+    Forex,
+    Cryptocurrencies,
+    ETF,
+};
+
+const TradingInstrumentsIcon = ({ icon, className, size, onClick }: IconProps<keyof typeof InstrumentsIcons>) => {
+    const InstrumentIcon = InstrumentsIcons[icon] as React.ElementType;
+
+    return InstrumentIcon ? (
+        <InstrumentIcon className={className} style={{ width: size, height: size }} onClick={onClick} />
+    ) : null;
+};
+
+export default TradingInstrumentsIcon;