feat: added guided tour steps

binary-com · Jun 30, 2023 · 6e2dac4 · 6e2dac4
1 parent d20a31c
commit 6e2dac4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx b/packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx
@@ -24,14 +24,15 @@ const WalletHeaderButtons = observer(({ is_disabled, is_open, btns, wallet_accou
     const { setIsWalletModalVisible } = ui;
     const { setWalletModalActiveWalletID, setWalletModalActiveTab } = traders_hub;
 
+    const button_is_expanded = is_open ? 'wallet-button-expanded' : 'wallet-button-collapsed';
     const handleOnClick = async (btn: TWalletButton) => {
         setWalletModalActiveTab(btn.name);
         setIsWalletModalVisible(true);
         setWalletModalActiveWalletID(wallet_account.loginid);
     };
 
     return (
-        <div className='wallet-header__description-buttons'>
+        <div className='wallet-header__description-buttons' id={button_is_expanded}>
             {btns.map(btn => (
                 <div
                     key={btn.name}

diff --git a/packages/appstore/src/components/wallet-header/wallet-header.tsx b/packages/appstore/src/components/wallet-header/wallet-header.tsx
@@ -22,6 +22,7 @@ const WalletHeader = observer(({ wallet_account }: TWalletHeader) => {
     const { multipliers_account_status } = traders_hub;
 
     const wallet_btns = getWalletHeaderButtons(wallet_account.is_demo);
+    const wallet_status = wallet_account.is_selected ? 'wallet-is-selected' : 'wallet-is-not-selected';
 
     const onArrowClickHandler = async () => {
         // setIsLoading(true);
@@ -37,7 +38,10 @@ const WalletHeader = observer(({ wallet_account }: TWalletHeader) => {
     // }, [is_authorize]);
 
     return (
-        <div className={classNames('wallet-header', { 'wallet-header__demo': wallet_account.is_demo })}>
+        <div
+            className={classNames('wallet-header', { 'wallet-header__demo': wallet_account.is_demo })}
+            id={wallet_status}
+        >
             <div className='wallet-header__container'>
                 <WalletCurrencyCard
                     is_demo={wallet_account.is_demo}

diff --git a/packages/appstore/src/constants/wallets-tour-steps-config.tsx b/packages/appstore/src/constants/wallets-tour-steps-config.tsx
@@ -19,7 +19,7 @@ export const getWalletStepConfig = (): Step[] => [
                 {localize('This is your Wallet. You can see your total balance for this Wallet here.')}
             </Text>
         ),
-        target: '.wallet-header',
+        target: '#wallet-is-not-selected',
         disableBeacon: true,
         disableOverlayClose: true,
         placement: 'bottom-end',
@@ -60,7 +60,7 @@ export const getWalletStepConfig = (): Step[] => [
                 )}
             </Text>
         ),
-        target: '.wallet-header__description-buttons',
+        target: '#wallet-button-expanded',
         disableBeacon: true,
         disableOverlayClose: true,
     },

diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
@@ -272,6 +272,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             setShouldShowCooldownModal: jest.fn(),
         },
         traders_hub: {
+            CFDs_restricted_countries: false,
             closeModal: jest.fn(),
             combined_cfd_mt5_accounts: [],
             content_flag: '',