[Wallets] Sergei / wall 2103 / Autoscroll onboarding desktop (deriv-c…

…om#10807) * feat: install joyride to wallets package * feat: add useFeatureFlag to the onboarding component of header * feat: complete 2 steps * feat: add one comment * feat: add color red for WalletText and update Tooltip * feat: add CSSProperties['color'] to WalletText * feat: delete unnecessary styles and change span to WalletText * refactor: delete unnecessary style * feat: hide onboardng button * refactor: cleanup * feat: delete package-lock.json * feat: intermediate result * feat: complete all steps except one * refactor: cleanup * feat: changed Tooltip component due to WalletButton changes * refactor: get back React.ReactNode as type for text * refactor: delete todo * feat: start onboarding by localstorage * fix: mock useFeatureFlags in spec file * feat: intermediate result * feat: almost completed * refactor: change scrollOffset value * refactor: create onClickHandler * fix: change function to variable * feat: add check for isFetching, isLoading, isSuccess and it works 99 times from 100 * feat: add usehook-ts to core and use it * refactor: delete unnecessary const * refactor: sort imports * feat: change package * feat: change react-joyride-scrollparent to @deriv/react-joyride * feat: add close icon * fix: add as MouseEventHandler<SVGElement> for TS * feat: revert one style property * feat: update package-lock.json
heorhi-deriv · Nov 9, 2023 · 38576fb · 38576fb
1 parent 82001da
commit 38576fb
Show file tree

Hide file tree

Showing 11 changed files with 12,957 additions and 72,638 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
@@ -200,7 +200,6 @@ $MIN_HEIGHT_FLOATING: calc(
         overflow: hidden;
     }
 
-
     &-form {
         overflow: hidden;
         height: 100%;

diff --git a/packages/api/src/hooks/useWalletAccountsList.ts b/packages/api/src/hooks/useWalletAccountsList.ts
@@ -24,7 +24,7 @@ const useWalletAccountsList = () => {
                 /** Landing company shortcode the account belongs to. */
                 landing_company_name: wallet.landing_company_name?.replace('maltainvest', 'malta'),
                 /** Indicating whether the wallet is a maltainvest wallet. */
-                is_malta_wallet: wallet.landing_company_name === 'malta',
+                is_malta_wallet: wallet.landing_company_name === 'maltainvest',
                 /** The DTrade account ID of this wallet */
                 dtrade_loginid,
                 /** Returns if the wallet is a crypto wallet. */

diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -887,9 +887,9 @@
         }
     }
 
-    .upload-layout{
-        @include desktop{
-        height: 100%;
+    .upload-layout {
+        @include desktop {
+            height: 100%;
         }
     }
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -140,6 +140,7 @@
         "react-router-dom": "^5.2.0",
         "react-tiny-popover": "^7.0.1",
         "react-transition-group": "4.4.2",
-        "react-window": "^1.8.5"
+        "react-window": "^1.8.5",
+        "usehooks-ts": "^2.7.0"
     }
 }
diff --git a/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-onboarding.spec.tsx b/packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-onboarding.spec.tsx
@@ -8,6 +8,13 @@ import TradersHubOnboarding from '../traders-hub-onboarding';
 import { routes } from '@deriv/shared';
 import { TCoreStores } from '@deriv/stores/types';
 
+jest.mock('@deriv/hooks', () => ({
+    ...jest.requireActual('@deriv/hooks'),
+    useFeatureFlags: jest.fn(() => ({
+        is_next_wallet_enabled: false,
+    })),
+}));
+
 describe('TradersHubOnboarding', () => {
     const onboarding_icon_testid = 'dt_traders_hub_onboarding_icon';
     const popover_wrapper_testid = 'dt_popover_wrapper';

diff --git a/packages/core/src/App/Containers/Layout/header/traders-hub-onboarding.tsx b/packages/core/src/App/Containers/Layout/header/traders-hub-onboarding.tsx
@@ -4,12 +4,25 @@ import { Icon, Popover } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
+import { useFeatureFlags } from '@deriv/hooks';
+import { useLocalStorage } from 'usehooks-ts';
 
 const TradersHubOnboarding = observer(() => {
     const history = useHistory();
     const { traders_hub, ui } = useStore();
     const { setIsOnboardingVisited } = traders_hub;
     const { is_dark_mode_on, is_mobile } = ui;
+    const { is_next_wallet_enabled } = useFeatureFlags();
+    const [, setWalletsOnboarding] = useLocalStorage('walletsOnboarding', '');
+
+    const onClickHandler = is_next_wallet_enabled
+        ? () => {
+              setWalletsOnboarding('started');
+          }
+        : () => {
+              history.push(routes.onboarding);
+              setIsOnboardingVisited(false);
+          };
 
     return (
         <div data-testid='dt_traders_hub_onboarding'>
@@ -25,10 +38,7 @@ const TradersHubOnboarding = observer(() => {
                         data_testid='dt_traders_hub_onboarding_icon'
                         icon={is_dark_mode_on ? 'IcAppstoreTradingHubOnboardingDark' : 'IcAppstoreTradingHubOnboarding'}
                         size={20}
-                        onClick={() => {
-                            history.push(routes.onboarding);
-                            setIsOnboardingVisited(false);
-                        }}
+                        onClick={onClickHandler}
                     />
                 </Popover>
             </div>

diff --git a/packages/wallets/package.json b/packages/wallets/package.json
@@ -13,6 +13,7 @@
     },
     "dependencies": {
         "@deriv/api": "^1.0.0",
+        "@deriv/react-joyride": "^2.6.2",
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -24,7 +25,6 @@
         "qrcode.react": "^1.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-joyride": "^2.5.3",
         "react-router-dom": "^5.2.0",
         "react-transition-group": "4.4.2",
         "usehooks-ts": "^2.7.0"

diff --git a/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.scss b/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.scss
@@ -15,10 +15,11 @@
     &__header {
         display: flex;
         height: 4.8rem;
-        padding: 0.8rem 0.8rem 0.8rem 1.6rem;
+        padding: 0.8rem 1.6rem;
         align-items: center;
         gap: 1rem;
         align-self: stretch;
+        justify-content: space-between;
 
         border-radius: 0.8rem 0.8rem 0rem 0rem;
         background: var(--system-light-8-primary-background, #fff);
@@ -27,6 +28,10 @@
         box-shadow: 0rem -0.1rem 0rem 0rem #f2f3f4 inset;
     }
 
+    &__close-icon {
+        cursor: pointer;
+    }
+
     &__content {
         display: flex;
         padding: 1.6rem;

diff --git a/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx b/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx
@@ -1,31 +1,60 @@
-import React from 'react';
-import Joyride, { CallBackProps } from 'react-joyride';
+import React, { useEffect } from 'react';
+import { useLocalStorage, useReadLocalStorage } from 'usehooks-ts';
+import { useActiveWalletAccount, useAuthorize, useAvailableWallets, useWalletAccountsList } from '@deriv/api';
+import Joyride, { ACTIONS, CallBackProps } from '@deriv/react-joyride';
 import { TooltipComponent, tourStepConfig } from './WalletTourGuideSettings';
 import './WalletTourGuide.scss';
 
-type TProps = {
-    isStarted?: boolean;
-    setIsStarted?: (value: boolean) => void;
-};
+const WalletTourGuide = () => {
+    const key = 'walletsOnboarding';
+    const startValue = 'started';
+    const [walletsOnboarding, setWalletsOnboarding] = useLocalStorage(key, useReadLocalStorage(key));
+
+    const { isFetching, isLoading, isSuccess, switchAccount } = useAuthorize();
+    const { data: wallets } = useWalletAccountsList();
+    const { data: activeWallet } = useActiveWalletAccount();
+    const { data: availableWallets } = useAvailableWallets();
+
+    const fiatWalletLoginId = wallets?.[0]?.loginid;
+    const activeWalletLoginId = activeWallet?.loginid;
 
-const WalletTourGuide: React.FC<TProps> = ({ isStarted, setIsStarted }) => {
     const callbackHandle = (data: CallBackProps) => {
-        if (data.action === 'reset') {
-            setIsStarted?.(false);
+        const { action } = data;
+
+        if (action === ACTIONS.RESET) {
+            setWalletsOnboarding('');
         }
     };
 
+    useEffect(() => {
+        const switchToFiatWallet = () => {
+            if (fiatWalletLoginId && fiatWalletLoginId !== activeWalletLoginId) {
+                switchAccount(fiatWalletLoginId);
+            }
+        };
+
+        const needToStart = walletsOnboarding === startValue;
+        if (needToStart) {
+            switchToFiatWallet();
+        }
+    }, [activeWalletLoginId, fiatWalletLoginId, switchAccount, walletsOnboarding]);
+
+    const isDemoWallet = Boolean(activeWallet?.is_virtual);
+    const hasMT5Account = Boolean(activeWallet?.linked_to?.some(account => account.platform === 'mt5'));
+    const hasDerivAppsTradingAccount = Boolean(activeWallet?.dtrade_loginid);
+    const isAllWalletsAlreadyAdded = Boolean(availableWallets?.every(wallet => wallet.is_added));
+
     return (
         <Joyride
             callback={callbackHandle}
             continuous
             disableCloseOnEsc
-            disableScrolling
-            floaterProps={{
-                disableAnimation: true,
-            }}
-            run={isStarted}
-            steps={tourStepConfig}
+            disableOverlayClose
+            floaterProps={{ disableAnimation: true }}
+            run={walletsOnboarding === startValue && !isLoading && !isFetching && isSuccess}
+            scrollOffset={150}
+            scrollToFirstStep
+            steps={tourStepConfig(isDemoWallet, hasMT5Account, hasDerivAppsTradingAccount, isAllWalletsAlreadyAdded)}
             tooltipComponent={TooltipComponent}
         />
     );