shontzu/93860/add-derivez-to-tradershub (deriv-com#8352)

* feat: added derivez demo/real/static to tradershub/onboarding

* fix: call success modal instead of logging out

* fix: roundup patch #1 based on reviews

* fix: move consts to Helpers/constants file

* fix: roundup patch #2 based on reviews

* Revert "fix: roundup patch #2 based on reviews"

This reverts commit f0cf7f5.

* fix: round up patch#2 based on review

* fix: clean up

* fix: outdated icons after merging

* fix: fixed derivx testcase error

* fix: update derivx icon

* fix: fixed conflicts

* fix: roundup patch #3 based on code reviews

* fix: round up patch#3 based on code reviews

* chore: unit test for derivez static

* fix: asdf

* feat: token implementation for derivez (todo: pandats error)

* fix: qrcode, download links, and download options

* fix: round-up-patch 1

* fix: round-up-patch 2
 - Description Text below the Deriv EZ header on Onboarding page is different from Design
 - Text format is incorrect in DerivEZ Account creation success modal
 - Multiple discrepancies in Trade modal (fixed in round-up-patch 1)

* fix: round-up-patch 3

 - use <React.Fragment> instead ov <>
 - remove unintentional {' '} whitespaces

* fix: code smells

* fix: asdf

* feat: disable derivez real flow

* fix: added top up for DerivEz

* fix: qr code for derivez and derivx

* fix: hide qr box if isMobile

* fix: derivez fund topup text

* fix: derivx fund topup text

* fix: onboarding demo title

* fix: Deriv Ez -> Deriv EZ

* fix: Go -> GO

* fix: Description Text below the Deriv EZ header on Onboarding page

* fix: revert changes on tradershub

* fix: updated to latest description (derivez onboarding/tradershub)

* fix: hide derivez and dxtrade in cfd_restricted countries (japan, norway)

* fix: corrected the time in server maintenance notice on derivez trade modal

* fix: Server maintenance notice time

* fix: DerivEZ icon redirect to https://deriv.com/derivez/

* fix: derivez topupVirtual

* revert: undo changes in cfd-dashboard.tsx (deprecated file)

* remove unnecesary parameter

* fix: fixed derivX top up and trade button in onboarding page

* fix: disable button while getting account creating

* fix: disable GET button while account is being created

* fix: disable GET button while account is being created

* fix: setIsAccountBeingCreated(false) after account creation to reenable get buttons

* fix: remove redundant use of await

* fix: server maintenance time TEXT (not time) for derivez

* fix: reenable button when error is triggered too

* fix: blur derivez icon on onboarding 5th page

* fix: remove function call that trigger token error

* Update cfd-store.js

* fix: pull upstream

* fix: hide derivez from oboarding page

* fix: show derivez on onboarding and remove "Demo" from appname

* fix: empty commit

* fix: total asset included derivez balance

* fix: updated mockstore

* fix: separate dxtrade and derivez token loader into two reactions

* fix: rerunning all of our tests

* chore: empty commit

* fix: capitalization on module import

* chore: empty commit

---------

Co-authored-by: hirad-deriv <hirad@re-work.dev>
Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@deriv.com>

packages/appstore/src/assets/svgs/trading-platform/index.tsx

@@ -5,11 +5,12 @@ import CFDs from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-cfds.svg
 import DBot from 'Assets/svgs/trading-platform/branding/ic-branding-dbot-dashboard.svg';
 import Demo from 'Assets/svgs/trading-platform/ic-brand-demo.svg';
 import Derived from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-derived-dashboard.svg';
+import DerivEz from 'Assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg';
 import DerivGo from 'Assets/svgs/trading-platform/branding/ic-branding-derivgo-dashboard.svg';
 import DerivGoBlack from 'Assets/svgs/trading-platform/ic-appstore-derivgo-black.svg';
 import DerivLogo from 'Assets/svgs/trading-platform/branding/ic-branding-deriv-logo.svg';
 import DerivTradingLogo from 'Assets/svgs/trading-platform/ic-appstore-deriv-trading-logo.svg';
-import DerivX from 'Assets/svgs/trading-platform/branding/ic-branding-derivx-dashboard.svg';
+import DerivX from 'Assets/svgs/trading-platform/branding/ic-branding-dxtrade-dashboard.svg';
 import DropDown from 'Assets/svgs/trading-platform/drop-down.svg';
 import DTrader from 'Assets/svgs/trading-platform/branding/ic-branding-dtrader-dashboard.svg';
 import Financial from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-financial-dashboard.svg';
@@ -26,6 +27,7 @@ export const PlatformIcons = {
     DBot,
     Demo,
     Derived,
+    DerivEz,
     DerivGo,
     DerivGoBlack,
     DerivLogo,

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

@@ -391,7 +391,6 @@
         background: var(--brand-dark-grey);
         align-items: center;
         text-decoration: none;
-        padding: 0.2rem;
         border-radius: $BORDER_RADIUS;
 
         &-text {
@@ -402,6 +401,9 @@
                 white-space: nowrap;
             }
         }
+        &-icon {
+            margin-left: 0.6rem;
+        }
     }
     &__specs {
         padding: 1.6rem;
@@ -453,6 +455,12 @@
         padding-top: 2rem;
         padding-bottom: 5.8rem;
 
+        &-description {
+            display: flex;
+            justify-content: center;
+            margin-top: 1.4rem;
+        }
+
         &-app {
             display: flex;
             flex-direction: column;
@@ -524,7 +532,7 @@
                 display: flex;
                 flex-direction: column;
                 width: 13.6rem;
-                height: 14rem;
+                height: auto;
                 padding: 0.8rem;
                 align-items: center;
                 border: 1px solid var(--border-disabled);

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

@@ -30,6 +30,7 @@ const CFDsListing = () => {
     } = useStores();
     const {
         available_dxtrade_accounts,
+        available_derivez_accounts,
         combined_cfd_mt5_accounts,
         selected_region,
         has_any_real_account,
@@ -206,16 +207,17 @@ const CFDsListing = () => {
                 <PlatformLoader />
             )}
             {!is_eu_user && !CFDs_restricted_countries && !financial_restricted_countries && (
-                <div className='cfd-full-row'>
-                    <hr className='divider' />
-                </div>
-            )}
-            {available_dxtrade_accounts?.length > 0 && (
-                <div className='cfd-full-row'>
-                    <Text line_height='m' weight='bold' color='prominent'>
-                        {localize('Other CFD Platforms')}
-                    </Text>
-                </div>
+                <React.Fragment>
+                    <div className='cfd-full-row'>
+                        <hr className='divider' />
+                    </div>
+
+                    <div className='cfd-full-row'>
+                        <Text line_height='m' weight='bold' color='prominent'>
+                            {localize('Other CFDs')}
+                        </Text>
+                    </div>
+                </React.Fragment>
             )}
             {is_landing_company_loaded ? (
                 available_dxtrade_accounts?.map((account: AvailableAccount) => {
@@ -279,6 +281,68 @@ const CFDsListing = () => {
             ) : (
                 <PlatformLoader />
             )}
+
+            {/* TODO: remove is_real flag to unblock the flow for derivez real account creation */}
+            {is_landing_company_loaded && !is_real
+                ? available_derivez_accounts?.map((account: AvailableAccount) => {
+                      const existing_accounts = getExistingAccounts(account.platform, account.market_type);
+                      const has_existing_accounts = existing_accounts.length > 0;
+                      return has_existing_accounts ? (
+                          existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+                              <TradingAppCard
+                                  action_type='multi-action'
+                                  availability={selected_region}
+                                  clickable_icon
+                                  icon={account.icon}
+                                  sub_title={account.name}
+                                  name={`${formatMoney(
+                                      existing_account.currency,
+                                      existing_account.display_balance,
+                                      true
+                                  )} ${existing_account.currency}`}
+                                  description={existing_account.display_login}
+                                  platform={account.platform}
+                                  key={`trading_app_card_${existing_account.display_login}`}
+                                  onAction={(e?: React.MouseEvent<HTMLButtonElement>) => {
+                                      const button_name = e?.currentTarget?.name;
+                                      if (button_name === 'transfer-btn') {
+                                          toggleAccountTransferModal();
+                                          setSelectedAccount(existing_account);
+                                      } else if (button_name === 'topup-btn') {
+                                          showTopUpModal(existing_account);
+                                          setAppstorePlatform(account.platform);
+                                      } else {
+                                          startTrade(account.platform, existing_account);
+                                      }
+                                  }}
+                              />
+                          ))
+                      ) : (
+                          <TradingAppCard
+                              action_type='get'
+                              availability={selected_region}
+                              clickable_icon
+                              icon={account.icon}
+                              name={account.name}
+                              platform={account.platform}
+                              description={account.description}
+                              onAction={() => {
+                                  if ((has_no_real_account || no_CR_account) && is_real) {
+                                      openDerivRealAccountNeededModal();
+                                  } else {
+                                      setAccountType({
+                                          category: selected_account_type,
+                                          type: account.market_type,
+                                      });
+                                      setAppstorePlatform(account.platform);
+                                      getAccount();
+                                  }
+                              }}
+                              key={`trading_app_card_${account.name}`}
+                          />
+                      );
+                  })
+                : !is_real && <PlatformLoader />}
         </ListingContainer>
     );
 };

packages/appstore/src/components/containers/trading-app-card-actions.tsx

@@ -14,6 +14,7 @@ export type Actions = {
     is_external?: boolean;
     new_tab?: boolean;
     is_buttons_disabled?: boolean;
+    is_account_being_created?: boolean;
     is_real?: boolean;
 };
 
@@ -23,13 +24,14 @@ const TradingAppCardActions = ({
     onAction,
     is_external,
     new_tab,
+    is_account_being_created,
     is_buttons_disabled,
     is_real,
 }: Actions) => {
     switch (action_type) {
         case 'get':
             return (
-                <Button primary_light onClick={() => onAction?.()}>
+                <Button disabled={is_account_being_created} primary_light onClick={() => onAction?.()}>
                     {localize('Get')}
                 </Button>
             );

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -29,9 +29,14 @@ const TradingAppCard = ({
     selected_mt5_jurisdiction,
     openFailedVerificationModal,
 }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => {
-    const { common, traders_hub } = useStores();
+    const {
+        common,
+        traders_hub,
+        modules: { cfd },
+    } = useStores();
     const { is_eu_user, is_demo_low_risk, content_flag, is_real } = traders_hub;
     const { current_language } = common;
+    const { is_account_being_created } = cfd;
 
     const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU;
 
@@ -54,6 +59,7 @@ const TradingAppCard = ({
             window.open(getStaticUrl(`/dmt5`, {}, false, true));
         else if (platform === CFD_PLATFORMS.MT5 && availability !== 'EU') window.open(getStaticUrl(`/dmt5`));
         else if (platform === CFD_PLATFORMS.DXTRADE) window.open(getStaticUrl(`/derivx`));
+        else if (platform === CFD_PLATFORMS.DERIVEZ) window.open(getStaticUrl(`/derivez`));
         else if (icon === 'Options' && !is_eu_user) window.open(getStaticUrl(`/trade-types/options/`));
         else;
     };
@@ -113,6 +119,7 @@ const TradingAppCard = ({
                         is_external={is_external}
                         new_tab={new_tab}
                         is_buttons_disabled={!!mt5_acc_auth_status}
+                        is_account_being_created={!!is_account_being_created}
                         is_real={is_real}
                     />
                 </div>

packages/appstore/src/components/modals/modal-manager.tsx

@@ -49,6 +49,7 @@ const ModalManager = () => {
         getRealSwapfreeAccountsExistingData,
         current_account,
         dxtrade_companies,
+        derivez_companies,
         mt5_companies,
         topUpVirtual,
     } = modules.cfd;
@@ -137,6 +138,7 @@ const ModalManager = () => {
             <CFDTopUpDemoModal
                 context={store}
                 dxtrade_companies={dxtrade_companies}
+                derivez_companies={derivez_companies}
                 mt5_companies={mt5_companies}
                 current_account={current_account}
                 closeSuccessTopUpModal={closeSuccessTopUpModal}

packages/appstore/src/components/onboarding-new/__tests__/static-dashboard.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import StaticDashboard from '../static-dashboard';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+describe('<StaticDashboard />', () => {
+    const is_blurry = {
+        icon: true,
+        item: false,
+        text: false,
+        get: false,
+        topup: false,
+        trade: false,
+        cfd_item: false,
+        cfd_text: false,
+        options_item: false,
+        options_text: false,
+        cfd_description: false,
+        options_description: false,
+        platformlauncher: false,
+    };
+
+    const is_onboarding_animated = {
+        text: false,
+        trade: false,
+        topup: false,
+        button: false,
+        get: false,
+    };
+
+    test('should render derivez in page if !CFDs_restricted_countries (non-eu countries)', () => {
+        const mock = mockStore({});
+
+        render(
+            <StoreProvider store={mock}>
+                <StaticDashboard is_blurry={is_blurry} is_onboarding_animated={is_onboarding_animated} />
+            </StoreProvider>
+        );
+        expect(screen.queryByText('Deriv EZ')).toBeInTheDocument();
+    });
+
+    test('should not render derivez if CFDs_restricted_countries: true (eu countries)', () => {
+        const mock = mockStore({
+            traders_hub: {
+                CFDs_restricted_countries: true,
+            },
+        });
+
+        render(
+            <StoreProvider store={mock}>
+                <StaticDashboard is_blurry={is_blurry} is_onboarding_animated={is_onboarding_animated} />
+            </StoreProvider>
+        );
+        expect(screen.queryByText('Deriv Ez')).not.toBeInTheDocument();
+    });
+});

packages/appstore/src/components/onboarding-new/static-cfd-account-manager.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, Text } from '@deriv/components';
 import { formatMoney, CFD_PLATFORMS } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 import TradigPlatformIconProps from 'Assets/svgs/trading-platform';
 import { TPlatform } from 'Types';
@@ -67,6 +68,8 @@ const StaticCFDAccountManager = ({
 }: TStaticCFDAccountManager) => {
     const icon_size = 48;
     const platform_color = platform === 'options' ? 'prominent' : 'general';
+    const { traders_hub } = useStore();
+    const { is_demo } = traders_hub;
     return (
         <div
             className={classNames('static-cfd-account-manager', {
@@ -117,6 +120,17 @@ const StaticCFDAccountManager = ({
                         />
                     ))}
 
+                {platform === CFD_PLATFORMS.DERIVEZ && (
+                    <TradigPlatformIconProps
+                        icon='DerivEz'
+                        size={icon_size}
+                        className={classNames('static-cfd-account-manager--cfds', {
+                            'static-cfd-account-manager__icon--blurry':
+                                is_blurry.icon || is_last_step || is_derivx_last_step,
+                        })}
+                    />
+                )}
+
                 {platform === CFD_PLATFORMS.DXTRADE && (
                     <TradigPlatformIconProps
                         icon='DerivX'
@@ -175,7 +189,7 @@ const StaticCFDAccountManager = ({
                 )}
             </div>
             <div className='static-cfd-account-manager__buttons'>
-                {has_account && platform !== CFD_PLATFORMS.DXTRADE ? (
+                {has_account ? (
                     <React.Fragment>
                         <Button
                             secondary