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
nimiq · Feb 23, 2022 · ef86512 · ef86512
1 parent 7576332
commit ef86512
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 16 deletions.
diff --git 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) {
@@ -522,14 +524,15 @@ export default defineComponent({
                 showTour.value = false; // This way, we can trigger the animation as v-step will be removed
             }
 
+            // Update UI
+            _toggleDisabledButtons(steps.value[currentStep.value].ui.disabledButtons, false);
+            _removeUIFromOldStep(currentStep.value);
+
             if (!soft) {
                 // wait until longest leave transition finishes
                 await sleep(1150);
             }
 
-            // Update UI
-            _removeUIFromOldStep(currentStep.value);
-
             if (!soft) {
                 setTour(null);
             }
@@ -664,8 +667,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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