From 89c66231cc7b409f23f71b83a223ed4125bcecdc Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Wed, 23 Feb 2022 14:34:38 +0100
Subject: [PATCH] Updated tour with overnice feedback - Save tour index, so if
 user reloads page, can keep going from the last step - Fixed UI and UX errors

---
 src/components/Tour.vue                               |  7 ++++---
 src/components/layouts/Settings.vue                   |  2 +-
 src/components/modals/DiscoverTheNimiqWalletModal.vue |  2 +-
 src/components/modals/NetworkInfoModal.vue            |  2 +-
 src/lib/tour/onboarding/02_TransactionListStep.ts     |  7 ++++---
 src/stores/Account.ts                                 | 11 +++++++----
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/Tour.vue b/src/components/Tour.vue
index c579fb6fc..684e0ea5a 100644
--- a/src/components/Tour.vue
+++ b/src/components/Tour.vue
@@ -217,7 +217,7 @@ export default defineComponent({
         setTourAsArray();
 
         const isLoading = ref(true);
-        const currentStep: Ref<TourStepIndex> = ref(0);
+        const currentStep: Ref<TourStepIndex> = ref(accountStore.tour?.step || 0);
         const nSteps: Ref<number> = ref(steps.value.length);
         const disableNextStep = ref(true);
         const showTour = ref(false);
@@ -379,6 +379,8 @@ export default defineComponent({
                     nSteps: nSteps.value,
                 },
             });
+
+            accountStore.tour!.step = currentStep.value;
         }
 
         function _broadcast(data: ITourBroadcast) {
@@ -664,8 +666,7 @@ export default defineComponent({
     cursor: not-allowed;
 }
 
-#app[data-tour-active] [data-scroll-locked],
-#app[data-tour-active] [data-scroll-locked] * {
+#app[data-tour-active] [data-scroll-locked] {
     overflow: hidden;
 }
 
diff --git a/src/components/layouts/Settings.vue b/src/components/layouts/Settings.vue
index ad685f2f7..f7fe7dd45 100644
--- a/src/components/layouts/Settings.vue
+++ b/src/components/layouts/Settings.vue
@@ -377,7 +377,7 @@ export default defineComponent({
         }
 
         function goToOnboardingTour() {
-            useAccountStore().setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.SETTINGS });
+            useAccountStore().setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.SETTINGS, step: 0 });
             context.root.$router.push('/');
         }
 
diff --git a/src/components/modals/DiscoverTheNimiqWalletModal.vue b/src/components/modals/DiscoverTheNimiqWalletModal.vue
index 2561d25eb..13b467deb 100644
--- a/src/components/modals/DiscoverTheNimiqWalletModal.vue
+++ b/src/components/modals/DiscoverTheNimiqWalletModal.vue
@@ -49,7 +49,7 @@ export default defineComponent({
         const { setTour } = useAccountStore();
 
         function startTour() {
-            setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.WELCOME_MODAL });
+            setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.WELCOME_MODAL, step: 0 });
             context.root.$router.push('/');
         }
 
diff --git a/src/components/modals/NetworkInfoModal.vue b/src/components/modals/NetworkInfoModal.vue
index 64e0c655e..6e2c54346 100644
--- a/src/components/modals/NetworkInfoModal.vue
+++ b/src/components/modals/NetworkInfoModal.vue
@@ -56,7 +56,7 @@ export default defineComponent({
         }
 
         function goToNetworkTour() {
-            useAccountStore().setTour({ name: TourName.NETWORK });
+            useAccountStore().setTour({ name: TourName.NETWORK, step: 0 });
             context.emit('close');
         }
 
diff --git a/src/lib/tour/onboarding/02_TransactionListStep.ts b/src/lib/tour/onboarding/02_TransactionListStep.ts
index 0d8bf2e99..c6590fe16 100644
--- a/src/lib/tour/onboarding/02_TransactionListStep.ts
+++ b/src/lib/tour/onboarding/02_TransactionListStep.ts
@@ -41,7 +41,7 @@ export function getTransactionListStep(
             txsLen.value === 0 ? '' : IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY,
         ],
         scrollLockedElements: [
-            `${IWalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST} .vue-recycle-scroller`,
+            IWalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST,
             `${IWalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} .vue-recycle-scroller`,
         ],
         explicitInteractableElements: [
@@ -98,10 +98,11 @@ export function getTransactionListStep(
                 });
 
                 // Add hightlight effect to 'Get Free NIM' button
-                toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, true, 'green');
+                toggleHighlightButton(IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_RECEIVE_FREE_NIM, true, 'green');
                 return () => {
                     unwatch();
-                    return toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, false, 'green');
+                    return toggleHighlightButton(
+                        IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_RECEIVE_FREE_NIM, false, 'green');
                 };
             },
         },
diff --git a/src/stores/Account.ts b/src/stores/Account.ts
index dea8cd372..116d00c54 100644
--- a/src/stores/Account.ts
+++ b/src/stores/Account.ts
@@ -1,14 +1,17 @@
-import { createStore } from 'pinia';
+import { ITourOrigin, TourName, TourStepIndex } from '@/lib/tour';
 import { Account } from '@nimiq/hub-api';
-import { TourName, ITourOrigin } from '@/lib/tour';
-import { useAddressStore } from './Address';
+import { createStore } from 'pinia';
 import { CryptoCurrency } from '../lib/Constants';
+import { useAddressStore } from './Address';
 
 export type AccountState = {
     accountInfos: {[id: string]: AccountInfo},
     activeAccountId: string | null,
     activeCurrency: CryptoCurrency,
-    tour: { name: TourName.NETWORK } | { name: TourName.ONBOARDING, startedFrom: ITourOrigin } | null,
+    tour:
+    { name: TourName.NETWORK, step: TourStepIndex } |
+    { name: TourName.ONBOARDING, step: TourStepIndex, startedFrom: ITourOrigin } |
+    null,
 }
 
 // Mirror of Hub WalletType, which is not exported