[WALL] george / WALL-5028 / Lazy Load "react-joyride" library with wallet onboarding tour guide code

packages/core/src/App/Containers/Layout/header/traders-hub-onboarding.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { useLocalStorage } from 'usehooks-ts';
 import { Icon, Popover } from '@deriv/components';
 import { routes, isTabletOs } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
@@ -9,11 +8,10 @@ import { Localize } from '@deriv/translations';
 const TradersHubOnboarding = observer(() => {
     const history = useHistory();
     const { ui } = useStore();
-    const { is_dark_mode_on, is_mobile } = ui;
-    const [, setWalletsOnboarding] = useLocalStorage('walletsOnboarding', '');
+    const { is_dark_mode_on, is_mobile, setIsWalletsOnboardingTourGuideVisible } = ui;
 
     const onClickHandler = () => {
-        setWalletsOnboarding('started');
+        setIsWalletsOnboardingTourGuideVisible(true);
         if (history.location.pathname !== routes.traders_hub) {
             history.push(routes.traders_hub);
         }

packages/core/src/App/Containers/RootComponent/root-component.jsx

@@ -17,10 +17,22 @@ const Wallets = React.lazy(() =>
 );
 
 const RootComponent = observer(props => {
-    const { client } = useStore();
+    const { client, ui } = useStore();
+    const { is_wallets_onboarding_tour_guide_visible, setIsWalletsOnboardingTourGuideVisible } = ui;
     const { has_wallet } = client;
 
-    return has_wallet ? <Wallets /> : <AppStore {...props} />;
+    const onWalletsOnboardingTourGuideCloseHandler = () => {
+        setIsWalletsOnboardingTourGuideVisible(false);
+    };
+
+    return has_wallet ? (
+        <Wallets
+            isWalletsOnboardingTourGuideVisible={is_wallets_onboarding_tour_guide_visible}
+            onWalletsOnboardingTourGuideCloseHandler={onWalletsOnboardingTourGuideCloseHandler}
+        />
+    ) : (
+        <AppStore {...props} />
+    );
 });
 
 export default RootComponent;

packages/core/src/Stores/client-store.js

@@ -1475,10 +1475,6 @@ export default class ClientStore extends BaseStore {
      * We initially fetch things from local storage, and then do everything inside the store.
      */
     async init(login_new_user) {
-        // delete walletsOnboarding key after page refresh
-        /** will be removed later when header for the wallets is created) */
-        localStorage.removeItem('walletsOnboarding');
-
         const search = SessionStore.get('signup_query_param') || window.location.search;
         const search_params = new URLSearchParams(search);
         const redirect_url = search_params?.get('redirect_url');

packages/core/src/Stores/ui-store.js

@@ -85,6 +85,9 @@ export default class UIStore extends BaseStore {
     deposit_real_account_signup_target = undefined;
     has_real_account_signup_ended = false;
 
+    // wallets onboarding tour guide
+    is_wallets_onboarding_tour_guide_visible = false;
+
     // verification modal
     is_verification_modal_visible = false;
 
@@ -299,6 +302,7 @@ export default class UIStore extends BaseStore {
             is_trading_assessment_for_existing_user_enabled: observable,
             is_trading_assessment_for_new_user_enabled: observable,
             is_verification_modal_visible: observable,
+            is_wallets_onboarding_tour_guide_visible: observable,
             is_verification_submitted: observable,
             is_mt5_migration_modal_open: observable,
             is_mt5_migration_modal_enabled: observable,
@@ -397,6 +401,7 @@ export default class UIStore extends BaseStore {
             setIsRealTabEnabled: action.bound,
             setIsTradingAssessmentForExistingUserEnabled: action.bound,
             setIsTradingAssessmentForNewUserEnabled: action.bound,
+            setIsWalletsOnboardingTourGuideVisible: action.bound,
             setManageRealAccountActiveTabIndex: action.bound,
             setModalIndex: action.bound,
             setPromptHandler: action.bound,
@@ -992,6 +997,10 @@ export default class UIStore extends BaseStore {
         this.is_from_success_deposit_modal = value;
     }
 
+    setIsWalletsOnboardingTourGuideVisible(value) {
+        this.is_wallets_onboarding_tour_guide_visible = value;
+    }
+
     setIsMFVericationPendingModal(value) {
         this.is_mf_verification_pending_modal_visible = value;
     }

packages/stores/src/mockStore.ts

@@ -390,6 +390,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_services_error_visible: false,
             should_show_phone_number_otp: false,
             is_trading_assessment_for_existing_user_enabled: false,
+            is_wallets_onboarding_tour_guide_visible: false,
             setIsForcedToExitPnv: jest.fn(),
             setIsPhoneVerificationCompleted: jest.fn(),
             setRedirectFromEmail: jest.fn(),
@@ -509,6 +510,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             url_hashed_values: '',
             is_tnc_update_modal_open: false,
             toggleTncUpdateModal: jest.fn(),
+            setIsWalletsOnboardingTourGuideVisible: jest.fn(),
         },
         traders_hub: {
             getAccount: jest.fn(),

packages/stores/types.ts

@@ -741,6 +741,7 @@ type TUiStore = {
     is_reset_email_modal_visible: boolean;
     is_services_error_visible: boolean;
     is_trading_assessment_for_existing_user_enabled: boolean;
+    is_wallets_onboarding_tour_guide_visible: boolean;
     isUrlUnavailableModalVisible: boolean;
     onChangeUiStore: ({ name, value }: { name: string; value: unknown }) => void;
     openPositionsDrawer: () => void;
@@ -863,6 +864,7 @@ type TUiStore = {
     setShouldShowCryptoTransactionProcessingModal: (value: boolean) => void;
     is_trading_disabled_by_residence_modal_visible: boolean;
     setIsTradingDisabledByResidenceModal: (value: boolean) => void;
+    setIsWalletsOnboardingTourGuideVisible: (value: boolean) => void;
     should_show_same_dob_phone_modal: boolean;
     setShouldShowSameDOBPhoneModal: (value: boolean) => void;
     setHashedValue: (value: string) => void;

packages/wallets/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { lazy, useMemo, useState } from 'react';
 import { APIProvider } from '@deriv/api-v2';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
 import { Loader } from '@deriv-com/ui';
@@ -10,7 +10,14 @@ import { TLanguageType } from './types';
 import './styles/fonts.scss';
 import './index.scss';
 
-const App: React.FC = () => {
+type TProps = {
+    isWalletsOnboardingTourGuideVisible: boolean;
+    onWalletsOnboardingTourGuideCloseHandler: VoidFunction;
+};
+
+const LazyWalletTourGuide = lazy(() => import('./components/WalletTourGuide/WalletTourGuide'));
+
+const App: React.FC<TProps> = ({ isWalletsOnboardingTourGuideVisible, onWalletsOnboardingTourGuideCloseHandler }) => {
     const [preferredLanguage, setPreferredLanguage] = useState<TLanguageType | null>(null);
     const language = useLanguage(preferredLanguage);
 
@@ -33,6 +40,13 @@ const App: React.FC = () => {
                             <AppContent setPreferredLanguage={setPreferredLanguage} />
                         </ModalProvider>
                     </React.Suspense>
+                    {isWalletsOnboardingTourGuideVisible && (
+                        <React.Suspense fallback={<Loader />}>
+                            <LazyWalletTourGuide
+                                onWalletsOnboardingTourGuideCloseHandler={onWalletsOnboardingTourGuideCloseHandler}
+                            />
+                        </React.Suspense>
+                    )}
                 </TranslationProvider>
             </WalletsAuthProvider>
         </APIProvider>

packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import Joyride, { CallBackProps, STATUS } from 'react-joyride';
-import { useLocalStorage, useReadLocalStorage } from 'usehooks-ts';
 import {
     useAllWalletAccounts,
     useAuthorize,
@@ -11,19 +10,16 @@ import {
 import { useDevice } from '@deriv-com/ui';
 import useIsRtl from '../../hooks/useIsRtl';
 import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher';
-import { useModal } from '../ModalProvider';
-import {
-    TooltipComponent,
-    walletsOnboardingLocalStorageKey as key,
-    walletsOnboardingStartValue as START_VALUE,
-} from './WalletTourGuideSettings';
+import { TooltipComponent } from './WalletTourGuideSettings';
 import { desktopStepTourGuide, mobileStepTourGuide } from './WalletTourGuideSteps';
 
-const WalletTourGuide = () => {
-    const [walletsOnboarding, setWalletsOnboarding] = useLocalStorage(key, useReadLocalStorage(key) ?? '');
+type TProps = {
+    onWalletsOnboardingTourGuideCloseHandler: VoidFunction;
+};
+
+const WalletTourGuide: React.FC<TProps> = ({ onWalletsOnboardingTourGuideCloseHandler }) => {
     const [run, setRun] = useState(false);
     const { isDesktop } = useDevice();
-    const modal = useModal();
     const isRtl = useIsRtl();
 
     const switchWalletAccount = useWalletAccountSwitcher();
@@ -33,30 +29,23 @@ const WalletTourGuide = () => {
     const { isFetching: sortedAccountsIsLoading } = useSortedMT5Accounts();
     const { data: availableWallets } = useAllWalletAccounts();
 
-    const needToStart = walletsOnboarding === START_VALUE;
     const isEverythingLoaded =
         !isLoading && !isFetching && isSuccess && !ctraderIsLoading && !dxtradeIsLoading && !sortedAccountsIsLoading;
     const allWalletsAreAdded = Boolean(availableWallets?.every(wallet => wallet.is_added));
 
     useEffect(() => {
-        if (needToStart && modal.isOpen) {
-            modal.hide();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [needToStart, modal.isOpen]);
-
-    useEffect(() => {
-        if (needToStart && isEverythingLoaded) {
-            setWalletsOnboarding('');
+        if (isEverythingLoaded) {
             setRun(true);
         }
-    }, [run, setRun, needToStart, isEverythingLoaded, switchWalletAccount, setWalletsOnboarding]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [run, setRun, isEverythingLoaded, switchWalletAccount]);
 
     const callbackHandle = async (data: CallBackProps) => {
         const { status } = data;
         const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
         if (finishedStatuses.includes(status)) {
             setRun(false);
+            onWalletsOnboardingTourGuideCloseHandler();
         }
     };
 

packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx

@@ -5,9 +5,6 @@ import { Localize } from '@deriv-com/translations';
 import { Button, Text } from '@deriv-com/ui';
 import './WalletTourGuide.scss';
 
-export const walletsOnboardingLocalStorageKey = 'walletsOnboarding';
-export const walletsOnboardingStartValue = 'started';
-
 export const TooltipComponent = ({
     backProps,
     closeProps,

packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx

@@ -1,12 +1,6 @@
 import React, { lazy } from 'react';
 import { useDevice } from '@deriv-com/ui';
-import {
-    WalletListHeader,
-    WalletsAddMoreCarousel,
-    WalletsCardLoader,
-    WalletsResponsiveLoader,
-    WalletTourGuide,
-} from '../../components';
+import { WalletListHeader, WalletsAddMoreCarousel, WalletsCardLoader, WalletsResponsiveLoader } from '../../components';
 import ResetMT5PasswordHandler from '../../features/cfd/ResetMT5PasswordHandler';
 import './WalletsListingRoute.scss';
 
@@ -30,7 +24,6 @@ const WalletsListingRoute: React.FC = () => {
             )}
             <WalletsAddMoreCarousel />
             <ResetMT5PasswordHandler />
-            <WalletTourGuide />
         </div>
     );
 };

packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx

@@ -40,11 +40,10 @@ describe('WalletsListingRoute', () => {
         jest.clearAllMocks();
     });
 
-    it('renders DesktopWalletsList, WalletsAddMoreCarousel and WalletTourGuide correctly on desktop', async () => {
+    it('renders DesktopWalletsList and WalletsAddMoreCarousel correctly on desktop', async () => {
         render(<WalletsListingRoute />, { wrapper });
         expect(screen.getByText('WalletListHeader')).toBeInTheDocument();
         expect(screen.queryByText('WalletsCarousel')).not.toBeInTheDocument();
-        expect(screen.getByText('WalletTourGuide')).toBeInTheDocument();
         expect(await screen.findByText('DesktopWalletsList')).toBeInTheDocument();
     });
 
@@ -55,6 +54,5 @@ describe('WalletsListingRoute', () => {
         expect(screen.getByText('WalletListHeader')).toBeInTheDocument();
         expect(screen.queryByText('DesktopWalletsList')).not.toBeInTheDocument();
         expect(await screen.findByText('WalletsCarousel')).toBeInTheDocument();
-        expect(screen.queryByText('WalletTourGuide')).toBeInTheDocument();
     });
 });