[TRAH] Sergei / TRAH 3229 / Making Traders Hub the landing page and i…

…ntroducing Traders Hub's logged out version (deriv-com#14740)

* chore: initial setup

* chore: test case fix

* chore: fixing test cases

* chore: fixing test cases

* chore: binary link fix

* chore: add root route /

* feat: started

* feat: intermediate result

* feat: intermediate result 2

* feat: add 1st test case

* chore: review fix

* chore: fixing test case

* chore: redirecting trading button to dtrader

* fix: test case

* fix: trigger

* feat: change hardcoded dtrader route to routes.trade

* feat: add trustpilot widget

* refactor: extract the code to separate components

* feat: add getLandingCompany to client store

* feat: create trustpilot helper function

* feat: add some icons for banner and trustpilot

* feat: intermediate result

* feat: complete widget and banner

* feat: refactor the code a little bit

* feat: complete with options and multipliers

* feat: change trustpilot data type

* feat: changed content for CFDs part

* feat: renamed some components

* feat: change 3 headers

* fix: add mock for header tests

* feat: complete changes for header

* feat: change trust pilot widget data

* feat: separate styles

* feat: add some styles

* fix: remove exclamation mark

* feat: make legacy TH route as root

* fix: implement sonalcloud suggestions

* fix: repair tests

* feat: get back changes for content because it will be done by card trah-3251

* feat: create separate components for option and cfds titles and description

* feat: remove waiting for landing company and show just eu and non-eu versions

* feat: change routes to legacy th

* feat: change routes to legacy th 2

* fix: repair tests due to route changes

* feat: add exact to the trades_hub route

* feat: add position absolute to the image

* feat: add redirection from old traders hub route to the new one

* fix: same route for wallets and TH

* fix: change route order to fix old TH route redirect

* feat: add redirection to dtrader

* fix: wallet_transfer route in shared

* chore: code clean-up

* chore: more code clean-up

* fix: move wallets check out of appstore

Co-authored-by: Aum <[email protected]>

* chore: reset file to base branch

* fix: compare account route height and hover shadow clipping

* chore: remove unused import

* fix: repair wallet tests

* fix: add logged_in_app_platform and logged_out_app_platform

* feat: show content for incognito

* chore: refactor routes.ts for better readability

* fix: insufficient balance modal button routing

* fix: routing to contract page giving 404

* feat: change options & multipliers to options

* feat: update mobile header

---------

Co-authored-by: ahmadtaimoor-deriv <[email protected]>
Co-authored-by: nijil-deriv <[email protected]>
Co-authored-by: Aum <[email protected]>

packages/account/src/Components/poa/continue-trading-button/__tests__/continue-trading-button.spec.tsx

@@ -23,6 +23,6 @@ describe('<ContinueTradingButton/>', () => {
         renderWithRouter(<ContinueTradingButton />);
         const continue_btn_text = screen.getByTestId('continue_btn_text');
         fireEvent.click(continue_btn_text);
-        expect(history.location.pathname).toBe(routes.root);
+        expect(history.location.pathname).toBe(routes.trade);
     });
 });

packages/account/src/Components/poa/continue-trading-button/continue-trading-button.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { ButtonLink, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
+import { routes } from '@deriv/shared/src/utils/routes/routes';
 
 type TContinueTradingButtonProps = { className?: string };
 
@@ -12,7 +13,7 @@ type TContinueTradingButtonProps = { className?: string };
  * @returns React Element
  */
 export const ContinueTradingButton = ({ className }: TContinueTradingButtonProps) => (
-    <ButtonLink className={classNames('account-management__button', className)} to='/'>
+    <ButtonLink className={classNames('account-management__button', className)} to={routes.trade}>
         <Text className='dc-btn__text' as='p' weight='bold' data-testid='continue_btn_text'>
             <Localize i18n_default_text='Continue trading' />
         </Text>

packages/account/src/Containers/Account/page-overlay-wrapper.tsx

@@ -24,7 +24,7 @@ const PageOverlayWrapper = observer(({ routes, subroutes }: PageOverlayWrapperPr
     const history = useHistory();
     const { client, common, ui } = useStore();
     const { is_mobile } = ui;
-    const { has_wallet, logout } = client;
+    const { logout } = client;
     const { is_from_derivgo } = common;
 
     const passkeysMenuCloseActionEventTrack = React.useCallback(() => {
@@ -46,8 +46,8 @@ const PageOverlayWrapper = observer(({ routes, subroutes }: PageOverlayWrapperPr
             passkeysMenuCloseActionEventTrack();
         }
 
-        has_wallet ? history.push(shared_routes.wallets) : history.push(shared_routes.traders_hub);
-    }, [history, has_wallet]);
+        history.push(shared_routes.traders_hub);
+    }, [history]);
 
     const selected_route = getSelectedRoute({ routes: subroutes as Array<TRoute>, pathname: location.pathname });
 

packages/appstore/package.json

@@ -35,6 +35,7 @@
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
+        "@deriv/wallets": "^1.0.0",
         "classnames": "^2.2.6",
         "mobx": "^6.6.1",
         "mobx-react-lite": "^3.4.0",

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

@@ -0,0 +1,15 @@
+.cfds-listing-logged-out {
+    &__cfd-full-row {
+        user-select: none;
+        display: grid;
+        width: 100%;
+        grid-column: 1 / span 3;
+    }
+
+    &__divider {
+        width: 100%;
+        height: 1px;
+        background-color: var(--general-hover);
+        border: none;
+    }
+}

packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { observer, useStore } from '@deriv/stores';
+import { Text } from '@deriv/components';
+import { redirectToLogin } from '@deriv/shared';
+import { getLanguage, localize } from '@deriv/translations';
+import { getHasDivider } from 'Constants/utils';
+import ListingContainer from 'Components/containers/listing-container';
+import TradingAppCard from 'Components/containers/trading-app-card';
+import CFDsDescription from 'Components/elements/cfds-description';
+import CFDsTitle from 'Components/elements/cfds-title';
+import './cfds-listing-logged-out.scss';
+
+const CFDsListingLoggedOut = observer(() => {
+    const { traders_hub } = useStore();
+    const {
+        available_dxtrade_accounts,
+        available_ctrader_accounts,
+        combined_cfd_mt5_accounts,
+        selected_region,
+        is_eu_user,
+    } = traders_hub;
+
+    return (
+        <ListingContainer title={<CFDsTitle />} description={<CFDsDescription />}>
+            <div className='cfds-listing-logged-out__cfd-full-row'>
+                <Text line_height='m' weight='bold' color='prominent'>
+                    {localize('Deriv MT5')}
+                </Text>
+            </div>
+            {combined_cfd_mt5_accounts.map((existing_account, index: number) => {
+                const list_size = combined_cfd_mt5_accounts.length;
+                return (
+                    <TradingAppCard
+                        action_type={existing_account.action_type}
+                        availability={selected_region}
+                        clickable_icon
+                        icon={existing_account.icon}
+                        sub_title={existing_account?.sub_title}
+                        name={existing_account?.name ?? ''}
+                        short_code_and_region={existing_account?.short_code_and_region}
+                        platform={existing_account.platform}
+                        description={existing_account.description}
+                        key={existing_account.key}
+                        has_divider={!is_eu_user && getHasDivider(index, list_size, 3)}
+                        onAction={() => redirectToLogin(false, getLanguage())}
+                        market_type='all'
+                    />
+                );
+            })}
+            {!is_eu_user && (
+                <div className='cfds-listing-logged-out__cfd-full-row'>
+                    <hr className='cfds-listing-logged-out__divider' />
+                </div>
+            )}
+            {!is_eu_user && (
+                <div className='cfds-listing-logged-out__cfd-full-row'>
+                    <Text weight='bold'>{localize('Deriv cTrader')}</Text>
+                </div>
+            )}
+            {available_ctrader_accounts.map(account => (
+                <TradingAppCard
+                    action_type='get'
+                    availability={selected_region}
+                    clickable_icon
+                    icon={account.icon}
+                    name={account.name}
+                    platform={account.platform}
+                    description={account.description}
+                    onAction={() => redirectToLogin(false, getLanguage())}
+                    key={`trading_app_card_${account.name}`}
+                    market_type='all'
+                />
+            ))}
+            {!is_eu_user && (
+                <React.Fragment>
+                    <div className='cfds-listing-logged-out__cfd-full-row'>
+                        <hr className='cfds-listing-logged-out__divider' />
+                    </div>
+
+                    <div className='cfds-listing-logged-out__cfd-full-row'>
+                        <Text line_height='m' weight='bold' color='prominent'>
+                            {localize('Deriv X')}
+                        </Text>
+                    </div>
+                </React.Fragment>
+            )}
+            {available_dxtrade_accounts?.map(account => (
+                <TradingAppCard
+                    action_type='get'
+                    availability={selected_region}
+                    clickable_icon
+                    icon={account.icon}
+                    name={account.name}
+                    platform={account.platform}
+                    description={account.description}
+                    onAction={() => redirectToLogin(false, getLanguage())}
+                    key={`trading_app_card_${account.name}`}
+                    market_type='all'
+                />
+            ))}
+        </ListingContainer>
+    );
+});
+
+export default CFDsListingLoggedOut;

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

@@ -0,0 +1,3 @@
+import CFDsListingLoggedOut from './cfds-listing-logged-out';
+
+export default CFDsListingLoggedOut;

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

@@ -55,7 +55,7 @@ const TradingAppCard = ({
     const { is_eu_user, is_demo_low_risk, content_flag, is_real, selected_account_type } = traders_hub;
     const { current_language } = common;
     const { is_account_being_created } = cfd;
-    const { account_status: { authentication } = {} } = client;
+    const { account_status: { authentication } = {}, is_logged_in } = client;
 
     const [is_open_position_svg_modal_open, setIsOpenPositionSvgModalOpen] = React.useState(false);
     const demo_label = localize('Demo');

packages/appstore/src/components/elements/cfds-description/cfds-description.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text, StaticUrl } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+const CFDsDescription = () => {
+    return (
+        <Text size='xs' line_height='s'>
+            <Localize
+                i18n_default_text='Trade bigger positions with less capital across diverse financial and derived instruments. <0>Learn more</0>'
+                components={[<StaticUrl key={0} className='options' href='/trade-types/cfds' />]}
+            />
+        </Text>
+    );
+};
+
+export default CFDsDescription;

packages/appstore/src/components/elements/cfds-description/index.tsx

@@ -0,0 +1,3 @@
+import CFDsDescription from './cfds-description';
+
+export default CFDsDescription;

packages/appstore/src/components/elements/cfds-title/cfds-title.scss

@@ -0,0 +1,5 @@
+.cfds-title {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}

packages/appstore/src/components/elements/cfds-title/cfds-title.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { observer, useStore } from '@deriv/stores';
+import { localize } from '@deriv/translations';
+import './cfds-title.scss';
+
+const CFDsTitle = observer(() => {
+    const { ui } = useStore();
+    const { is_mobile } = ui;
+
+    if (is_mobile) return null;
+    return (
+        <div className='cfds-title'>
+            <Text size='sm' weight='bold' color='prominent'>
+                {localize('CFDs')}
+            </Text>
+        </div>
+    );
+});
+
+export default CFDsTitle;

packages/appstore/src/components/elements/cfds-title/index.tsx

@@ -0,0 +1,3 @@
+import CFDsTitle from './cfds-title';
+
+export default CFDsTitle;

packages/appstore/src/components/elements/options-description/index.tsx

@@ -0,0 +1,3 @@
+import OptionsTitle from './options-description';
+
+export default OptionsTitle;

packages/appstore/src/components/elements/options-description/options-description.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text, StaticUrl } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+type TOptionsDescription = {
+    is_eu_user: boolean;
+};
+
+const OptionsDescription = ({ is_eu_user }: TOptionsDescription) => {
+    return is_eu_user ? (
+        <Text size='xs'>
+            <Localize
+                i18n_default_text='Multipliers let you trade with leverage and limit your risk to your stake. <0>Learn more</0>'
+                components={[<StaticUrl key={0} className='options' href='trade-types/multiplier/' />]}
+            />
+        </Text>
+    ) : (
+        <div>
+            <Text size='xs'>
+                <Localize
+                    i18n_default_text='Buy or sell at a specific time for a specific price. <0>Learn more</0>'
+                    components={[
+                        <StaticUrl
+                            key={0}
+                            className='options'
+                            href='trade-types/options/digital-options/up-and-down/'
+                        />,
+                    ]}
+                />
+            </Text>
+        </div>
+    );
+};
+
+export default OptionsDescription;

packages/appstore/src/components/elements/options-title/index.tsx

@@ -0,0 +1,3 @@
+import OptionsTitle from './options-title';
+
+export default OptionsTitle;

packages/appstore/src/components/elements/options-title/options-title.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { observer, useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
+
+type TOptionsTitle = {
+    is_eu_user: boolean;
+};
+
+const OptionsTitle = observer(({ is_eu_user }: TOptionsTitle) => {
+    const { ui } = useStore();
+    const { is_mobile } = ui;
+
+    if (is_mobile) return null;
+    return is_eu_user ? (
+        <Text size='sm' weight='bold' color='prominent'>
+            <Localize i18n_default_text='Multipliers' />
+        </Text>
+    ) : (
+        <Text size='sm' weight='bold' color='prominent'>
+            <Localize i18n_default_text='Options' />
+        </Text>
+    );
+});
+
+export default OptionsTitle;

packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss

@@ -0,0 +1,55 @@
+.get-started-trading-banner {
+    border: 1px solid var(--general-section-5);
+    border-radius: $BORDER_RADIUS * 4;
+
+    &__content {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+
+        border-radius: $BORDER_RADIUS * 4 $BORDER_RADIUS * 4 0 0;
+        background: var(--traders-hub-logged-out-banner-bg-color);
+        height: 18rem;
+        background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-desktop.svg');
+        background-repeat: no-repeat;
+
+        @include mobile {
+            height: 14.4rem;
+            background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-responsive.svg');
+            background-repeat: no-repeat;
+        }
+    }
+
+    &__description {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: center;
+        gap: 1.6rem;
+        margin-inline-start: 4.8rem;
+
+        @include mobile {
+            margin-inline-start: 1.6rem;
+        }
+    }
+
+    &__button {
+        padding: 1.2rem 1.6rem;
+        border-radius: $BORDER_RADIUS * 3;
+
+        @include mobile {
+            padding: 0.5rem 1.2rem;
+        }
+    }
+
+    &__image {
+        position: absolute;
+        right: 0;
+        margin-inline-end: 1.2rem;
+
+        @include mobile {
+            margin-inline-end: 0;
+            align-self: flex-end;
+        }
+    }
+}