[WALL] Aizad/wall 3964/wallet onboarding (#15099)

* feat: wait for switch * chore: Implement new joyride steps * chore: update react-joyride and remove old joyride implementation * chore: small style changes for Desktop flow * chore: update steps in tour guide * chore: update onboarding for Mobile view for wallets * chore: refactor tour guide for wallets * chore: fix test case for AccountList * chore: refactor joyride * feat: reverted back to previous version * chore: i think i fix the flickering 👀 * chore: replace deriv/react-joyride with the react-joyride * chore: update import statements * chore: fix not scrolling when press back * chore: fix test cases * chore: added small changes for tour guide --------- Co-authored-by: Wojciech Brygola <wojciech@regentmarkets.com>
deriv-com · May 16, 2024 · 2dcbde5 · 2dcbde5
1 parent b63e0f3
commit 2dcbde5
Show file tree

Hide file tree

Showing 23 changed files with 302 additions and 717 deletions.
diff --git a/packages/wallets/component-tests/wallets-carousel-content.spec.tsx b/packages/wallets/component-tests/wallets-carousel-content.spec.tsx
@@ -6,7 +6,7 @@ import { mockProposalOpenContract } from './mocks/mockProposalOpenContract';
 import mockWalletsAuthorize, { DEFAULT_WALLET_ACCOUNTS } from './mocks/mockWalletsAuthorize';
 import mockWalletsLoggedIn from './mocks/mockWalletsLoggedIn';
 
-const CAROUSEL_SELECTOR = '.wallets-carousel-content__container .wallets-card:nth-child(1)';
+const CAROUSEL_SELECTOR = '.wallets-carousel-content__cards .wallets-card:nth-child(1)';
 
 // swipe function
 async function swipeLeft(mobilePage: Page) {
@@ -64,22 +64,22 @@ test.describe('Wallets - Mobile carousel', () => {
 
         const card1text = await mobilePage
             .locator(
-                '.wallets-carousel-content__container .wallets-card:nth-child(1) .wallets-card__details-bottom span:last-child'
+                '.wallets-carousel-content__cards .wallets-card:nth-child(1) .wallets-card__details-bottom span:last-child'
             )
             .innerText();
         const card2text = await mobilePage
             .locator(
-                '.wallets-carousel-content__container .wallets-card:nth-child(2) .wallets-card__details-bottom span:last-child'
+                '.wallets-carousel-content__cards .wallets-card:nth-child(2) .wallets-card__details-bottom span:last-child'
             )
             .innerText();
         const card3text = await mobilePage
             .locator(
-                '.wallets-carousel-content__container .wallets-card:nth-child(3) .wallets-card__details-bottom span:last-child'
+                '.wallets-carousel-content__cards .wallets-card:nth-child(3) .wallets-card__details-bottom span:last-child'
             )
             .innerText();
         const card4text = await mobilePage
             .locator(
-                '.wallets-carousel-content__container .wallets-card:nth-child(4) .wallets-card__details-bottom span:last-child'
+                '.wallets-carousel-content__cards .wallets-card:nth-child(4) .wallets-card__details-bottom span:last-child'
             )
             .innerText();
 

diff --git a/packages/wallets/package.json b/packages/wallets/package.json
@@ -19,7 +19,7 @@
         "@deriv/api-v2": "^1.0.0",
         "@deriv/integration": "^1.0.0",
         "@deriv/quill-icons": "^1.22.4",
-        "@deriv/react-joyride": "^2.6.2",
+        "react-joyride": "^2.5.3",
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",
         "@zxcvbn-ts/core": "^3.0.4",

diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CFDPlatformsList } from '../../features';
 import useDevice from '../../hooks/useDevice';
@@ -9,17 +9,10 @@ import {
     WalletsPrimaryTabPanels,
     WalletsPrimaryTabs,
 } from '../WalletsPrimaryTabs';
-import { WalletMobileTourGuide } from '../WalletTourGuide';
 import './AccountsList.scss';
 
-type TProps = {
-    isWalletSettled?: boolean;
-};
-
-const AccountsList = ({ isWalletSettled }: TProps) => {
+const AccountsList: FC = () => {
     const { isMobile } = useDevice();
-    const [isMT5PlatformListLoaded, setIsMT5PlatformListLoaded] = useState(false);
-    const [isOptionsAndMultipliersLoaded, setIsOptionsAndMultipliersLoaded] = useState(false);
     const { t } = useTranslation();
 
     if (isMobile) {
@@ -28,19 +21,12 @@ const AccountsList = ({ isWalletSettled }: TProps) => {
                 <WalletsPrimaryTabList list={[t('CFDs'), t('Options')]} />
                 <WalletsPrimaryTabPanels>
                     <WalletsPrimaryTabPanel>
-                        <CFDPlatformsList onMT5PlatformListLoaded={setIsMT5PlatformListLoaded} />
+                        <CFDPlatformsList />
                     </WalletsPrimaryTabPanel>
                     <WalletsPrimaryTabPanel>
-                        <OptionsAndMultipliersListing
-                            onOptionsAndMultipliersLoaded={setIsOptionsAndMultipliersLoaded}
-                        />
+                        <OptionsAndMultipliersListing />
                     </WalletsPrimaryTabPanel>
                 </WalletsPrimaryTabPanels>
-                <WalletMobileTourGuide
-                    isMT5PlatformListLoaded={isMT5PlatformListLoaded}
-                    isOptionsAndMultipliersLoaded={isOptionsAndMultipliersLoaded}
-                    isWalletSettled={isWalletSettled}
-                />
             </WalletsPrimaryTabs>
         );
     }

diff --git a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx
@@ -1,31 +1,24 @@
 import React, { ComponentProps, PropsWithChildren } from 'react';
+import { WalletTourGuide } from 'src/components/WalletTourGuide';
 import { APIProvider } from '@deriv/api-v2';
 import { render, screen } from '@testing-library/react';
 import WalletsAuthProvider from '../../../AuthProvider';
 import useDevice from '../../../hooks/useDevice';
 import { ModalProvider } from '../../ModalProvider';
-import WalletMobileTourGuide from '../../WalletTourGuide/WalletMobileTourGuide';
 import AccountsList from '../AccountsList';
 
 jest.mock('../../../hooks/useDevice');
 const mockUseDevice = useDevice as jest.MockedFunction<typeof useDevice>;
 
-const mockWalletMobileTourGuide = jest.fn();
+const mockWalletTourGuide = jest.fn();
 jest.mock(
-    '../../WalletTourGuide/WalletMobileTourGuide',
+    '../../WalletTourGuide/WalletTourGuide',
     // eslint-disable-next-line react/display-name
-    () => (props: ComponentProps<typeof WalletMobileTourGuide>) => {
-        mockWalletMobileTourGuide(props);
+    () => (props: ComponentProps<typeof WalletTourGuide>) => {
+        mockWalletTourGuide(props);
         return (
             <div>
                 <p>mock wallet tour guide</p>
-                <p>{props.isMT5PlatformListLoaded ? 'mt5 list loaded' : 'mt5 list not loaded'}</p>
-                <p>
-                    {props.isOptionsAndMultipliersLoaded
-                        ? 'options and multipliers loaded'
-                        : 'options and multipliers not loaded'}
-                </p>
-                <p>{props.isWalletSettled ? 'wallet settled' : 'wallet not settled'}</p>
             </div>
         );
     }
@@ -46,7 +39,7 @@ describe('AccountsList', () => {
             isMobile: true,
             isTablet: false,
         });
-        render(<AccountsList isWalletSettled={true} />, { wrapper });
+        render(<AccountsList />, { wrapper });
         expect(screen.getByTestId('dt_tabs')).toBeInTheDocument();
         expect(screen.getByTestId('dt_tab_list')).toBeInTheDocument();
         expect(screen.getByTestId('dt_tab_panels')).toBeInTheDocument();
@@ -61,7 +54,7 @@ describe('AccountsList', () => {
             isMobile: true,
             isTablet: false,
         });
-        render(<AccountsList isWalletSettled={true} />, { wrapper });
+        render(<AccountsList />, { wrapper });
         expect(screen.getByTestId('dt_tab_panels')).toBeInTheDocument();
         expect(screen.getByText('CFDs')).toBeInTheDocument();
         expect(screen.getAllByText('Options')[0]).toBeInTheDocument();
@@ -81,7 +74,7 @@ describe('AccountsList', () => {
             isMobile: false,
             isTablet: false,
         });
-        render(<AccountsList isWalletSettled={true} />, { wrapper });
+        render(<AccountsList />, { wrapper });
 
         expect(screen.getByTestId('dt_desktop_accounts_list')).toBeInTheDocument();
         expect(screen.getByText('CFDs')).toBeInTheDocument();
@@ -94,8 +87,8 @@ describe('AccountsList', () => {
             isMobile: true,
             isTablet: false,
         });
-        render(<AccountsList isWalletSettled={false} />, { wrapper });
-        expect(mockWalletMobileTourGuide).toBeCalledWith(expect.objectContaining({ isWalletSettled: false }));
+        render(<AccountsList />, { wrapper });
+        expect(mockWalletTourGuide);
     });
 
     it('should render wallet tour guide in mobile view with isWalletSettled set to true', () => {
@@ -104,7 +97,7 @@ describe('AccountsList', () => {
             isMobile: true,
             isTablet: false,
         });
-        render(<AccountsList isWalletSettled={true} />, { wrapper });
-        expect(mockWalletMobileTourGuide).toBeCalledWith(expect.objectContaining({ isWalletSettled: true }));
+        render(<AccountsList />, { wrapper });
+        expect(mockWalletTourGuide);
     });
 });
diff --git a/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { Trans } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
@@ -15,10 +15,6 @@ import './OptionsAndMultipliersListing.scss';
 
 type TLinkTitleProps = Pick<typeof optionsAndMultipliersContent[number], 'icon' | 'title'>;
 
-type TOptionsAndMultipliersListingProps = {
-    onOptionsAndMultipliersLoaded?: (value: boolean) => void;
-};
-
 const LinkTitle: React.FC<TLinkTitleProps> = ({ icon, title }) => {
     const handleClick = (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>) => {
         event.persist();
@@ -59,18 +55,11 @@ const LinkTitle: React.FC<TLinkTitleProps> = ({ icon, title }) => {
     );
 };
 
-const OptionsAndMultipliersListing: React.FC<TOptionsAndMultipliersListingProps> = ({
-    onOptionsAndMultipliersLoaded,
-}) => {
+const OptionsAndMultipliersListing: React.FC = () => {
     const { isMobile } = useDevice();
     const history = useHistory();
     const { data: activeLinkedToTradingAccount } = useActiveLinkedToTradingAccount();
 
-    useEffect(() => {
-        onOptionsAndMultipliersLoaded?.(true);
-        return () => onOptionsAndMultipliersLoaded?.(false);
-    }, [onOptionsAndMultipliersLoaded]);
-
     return (
         <div className='wallets-options-and-multipliers-listing'>
             <section className='wallets-options-and-multipliers-listing__header'>

diff --git a/...es/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.scss b/...es/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.scss
@@ -7,6 +7,10 @@
     width: 100%;
     padding-block: 0.8rem;
 
+    &__title {
+        margin: 0.8rem 1.4rem 0;
+    }
+
     &__actions {
         display: flex;
         padding-left: 2.4rem;
@@ -44,6 +48,7 @@
             gap: 1.6rem;
             overflow: hidden;
             transform: translateX(calc(50% - 14.4rem));
+            height: 18rem;
         }
     }
 

diff --git a/...ges/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.tsx b/...ges/wallets/src/components/SkeletonLoader/WalletsCarouselLoader/WalletsCarouselLoader.tsx
@@ -1,9 +1,15 @@
 import React from 'react';
+import { WalletText } from '../../Base';
 import './WalletsCarouselLoader.scss';
 
 const WalletsCarouselLoader = () => {
     return (
         <div className='wallets-carousel-loader'>
+            <div className='wallets-carousel-loader__title'>
+                <WalletText size='xl' weight='bold'>
+                    Trader&apos;s Hub
+                </WalletText>
+            </div>
             <div className='wallets-carousel-loader__card-container'>
                 {Array.from({ length: 3 }).map((_, idx) => (
                     <div

diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss b/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss
@@ -7,10 +7,6 @@
     width: 100%;
     padding: 1.6rem 0 0;
 
-    @include mobile {
-        padding: 0.8rem 1.4rem 0;
-    }
-
     &__label {
         display: flex;
         position: absolute;

diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx
@@ -14,7 +14,7 @@ const WalletListHeader: React.FC = () => {
 
     const demoAccount = wallets?.find(wallet => wallet.is_virtual)?.loginid;
     const firstRealAccount = wallets?.find(wallet => !wallet.is_virtual)?.loginid;
-    const shouldShowSwitcher = !isMobile && demoAccount && firstRealAccount;
+    const shouldShowSwitcher = demoAccount && firstRealAccount;
     const isDemo = activeWallet?.is_virtual;
     const [isChecked, setIsChecked] = useState(!isDemo);
 
@@ -31,6 +31,8 @@ const WalletListHeader: React.FC = () => {
         setIsChecked(!isDemo);
     }, [isDemo]);
 
+    if (isMobile) return null;
+
     return (
         <div className='wallets-list-header'>
             <WalletText size='xl' weight='bold'>