From 37e26c06586c8b795ace6a32f9d062024c62234f Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 11 Feb 2022 16:57:54 +0100
Subject: [PATCH] allow user to save back up words from tour - it will go
 automatically to next step

---
 src/components/Tour.vue                       | 58 +++++++++----------
 src/lib/tour/index.ts                         | 14 ++++-
 .../onboarding/03_FirstTransactionStep.ts     |  2 +-
 .../tour/onboarding/06_0_BackupAlertStep.ts   | 29 ++++++++--
 .../tour/onboarding/OnboardingTourTexts.ts    |  2 +-
 src/lib/tour/onboarding/index.ts              |  8 +--
 6 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/src/components/Tour.vue b/src/components/Tour.vue
index 223aac394..c579fb6fc 100644
--- a/src/components/Tour.vue
+++ b/src/components/Tour.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="tour">
         <v-tour
-        name="nimiq-tour"
-        :steps="steps.map((s) => s.tooltip)"
-        :options="tourOptions"
+            name="nimiq-tour"
+            :steps="vTourSteps"
+            :options="tourOptions"
         >
             <template v-slot="tour">
                 <transition name="fade">
@@ -92,7 +92,7 @@
                                     {{ tour.steps[tour.currentStep].button.text }}
                                 </button>
                                 <button
-                                    v-else-if="isLargeScreen && !isLoading"
+                                    v-else-if="isLargeScreen && !disableNextStep && !isLoading"
                                     class="right"
                                     @click="goToNextStep()"
                                     tabindex="0"
@@ -212,20 +212,13 @@ export default defineComponent({
             useKeyboardNavigation: false, // handled by us
         };
 
-        // `getTour` function returns an object like:
-        // { "1": { /** First step */}, "10": { /** Step */}, "2": { /** Second step */}, ... }
-        // where the key is the step index and the value is the step object that we need to sort
-        // and store it as an array
-        let unsortedStepds = getTour(
-                accountStore.tour?.name, context, { isSmallScreen, isMediumScreen, isLargeScreen });
-        let steps = Object.keys(unsortedStepds)
-            .sort((a, b) => (a as unknown as number) - (b as unknown as number))
-            .map((key) => unsortedStepds[key as unknown as TourStepIndex]);
-
         // Initial state
+        const steps: Ref<ITourStep[]> = ref([]);
+        setTourAsArray();
+
         const isLoading = ref(true);
         const currentStep: Ref<TourStepIndex> = ref(0);
-        const nSteps: Ref<number> = ref(Object.keys(steps).length);
+        const nSteps: Ref<number> = ref(steps.value.length);
         const disableNextStep = ref(true);
         const showTour = ref(false);
 
@@ -256,7 +249,7 @@ export default defineComponent({
 
             await context.root.$nextTick(); // to ensure DOM is ready
 
-            const step = steps[currentStep.value];
+            const step = steps.value[currentStep.value];
             if (!step) return;
 
             // Update state
@@ -316,7 +309,7 @@ export default defineComponent({
             // execute _toggleDisabledButtons but it is kind of random the amount of time
             // it takes to render the button. I don't know how to fix it. Waiting 500ms works.
             await sleep(500);
-            _toggleDisabledButtons(steps[currentStep.value]?.ui.disabledButtons, true);
+            _toggleDisabledButtons(steps.value[currentStep.value]?.ui.disabledButtons, true);
         });
 
         function goToPrevStep() {
@@ -335,8 +328,8 @@ export default defineComponent({
             newStepIndex: TourStepIndex,
             goingForward: boolean,
         ) {
-            const { path: currentPath } = steps[currentStepIndex]!;
-            const { path: newPath, ui: newUI, lifecycle: newLifecycle } = steps[newStepIndex]!;
+            const { path: currentPath } = steps.value[currentStepIndex]!;
+            const { path: newPath, ui: newUI, lifecycle: newLifecycle } = steps.value[newStepIndex]!;
 
             tour!.stop();
             await sleep(500); // ensures animation ends
@@ -353,6 +346,7 @@ export default defineComponent({
                 await context.root.$nextTick();
             }
 
+            _toggleDisabledButtons(steps.value[currentStepIndex].ui.disabledButtons, false);
             _updateUI(newUI, newStepIndex);
             await context.root.$nextTick();
 
@@ -407,7 +401,7 @@ export default defineComponent({
             const tourInteractableElements = ['.tour', '.tour-manager', '.tooltip'];
 
             // This are the elements that are allowed to be clicked only in current step
-            const stepInteractableElements = steps[currentStep.value]?.ui.explicitInteractableElements || [];
+            const stepInteractableElements = steps.value[currentStep.value]?.ui.explicitInteractableElements || [];
 
             const interactableElements = tourInteractableElements.concat(stepInteractableElements)
                 .map((s) => $(s)).filter((e) => !!e) as HTMLElement[];
@@ -504,8 +498,6 @@ export default defineComponent({
             $$(`[data-explicit-interactable="${stepIndex}"]`).forEach((el) => {
                 el.removeAttribute('data-explicit-interactable');
             });
-
-            _toggleDisabledButtons(steps[stepIndex].ui.disabledButtons, false);
         }
 
         // nofifyManager - if true will notify the manager that the tour has ended
@@ -582,11 +574,7 @@ export default defineComponent({
         async function _screenTypeChanged() {
             tour!.stop();
 
-            unsortedStepds = getTour(
-            accountStore.tour?.name, context, { isSmallScreen, isMediumScreen, isLargeScreen });
-            steps = Object.keys(unsortedStepds)
-                .sort((a, b) => (a as unknown as number) - (b as unknown as number))
-                .map((key) => unsortedStepds[key as unknown as TourStepIndex]);
+            setTourAsArray();
 
             // end tour sofly and start it again
             await endTour(false, true);
@@ -614,6 +602,10 @@ export default defineComponent({
             });
         }
 
+        function setTourAsArray() {
+            steps.value = getTour(accountStore.tour?.name, context, { isSmallScreen, isMediumScreen, isLargeScreen });
+        }
+
         return {
             isSmallScreen,
             isMediumScreen,
@@ -622,7 +614,7 @@ export default defineComponent({
 
             // tour
             tourOptions,
-            steps,
+            vTourSteps: computed(() => steps.value.map((s) => s.tooltip)),
             showTour,
 
             // control bar
@@ -635,6 +627,10 @@ export default defineComponent({
             goToPrevStep,
             goToNextStep,
             endTour,
+
+            // We need to expose this function so that we can call it from the steps.
+            // In particular /lib/tour/onboarding/06_0_BackupAlertStep.ts
+            setTourAsArray,
         };
     },
     components: {
@@ -812,10 +808,14 @@ export default defineComponent({
                 font-size: 14px;
                 border: 1px solid transparent;
 
-                &:focus {
+                &.right:focus {
                     border: 1px solid #ffffff55;
                 }
 
+                &.left:focus {
+                    opacity: 1;
+                }
+
                 &.left {
                     display: flex;
                     align-items: center;
diff --git a/src/lib/tour/index.ts b/src/lib/tour/index.ts
index 283420303..52a23b6b9 100644
--- a/src/lib/tour/index.ts
+++ b/src/lib/tour/index.ts
@@ -40,7 +40,19 @@ export function getTour(tour: TourName | undefined, context: SetupContext, scree
         default:
     }
 
-    return Object.values(steps).filter((step) => Boolean(step)) as ITourStep[];
+    // At this moment we have something like this:
+    // {
+    //      "1": { /** First step object */},
+    //      "10": { /** This is not the first step object!! */},
+    //      "2": { /** Second step object */},
+    //      ...
+    // }
+    // where the key is the step index and the value is the step object that we need to sort
+    // and store it as an array
+    return Object.entries(steps)
+        .filter(([, s]) => Boolean(s)) // Remove undefined steps
+        .sort(([a], [b]) => parseInt(a, 10) - parseInt(b, 10)) // Sort by key
+        .map(([, s]) => s) as ITourStep[]; // Just return only the step
 }
 
 // Finds the component instance given its name in the Vue tree
diff --git a/src/lib/tour/onboarding/03_FirstTransactionStep.ts b/src/lib/tour/onboarding/03_FirstTransactionStep.ts
index 7508351bb..585642b24 100644
--- a/src/lib/tour/onboarding/03_FirstTransactionStep.ts
+++ b/src/lib/tour/onboarding/03_FirstTransactionStep.ts
@@ -50,7 +50,7 @@ export function getFirstTransactionStep({ isSmallScreen, txsLen }: IOnboardingGe
                     : '.vue-recycle-scroller__item-view:nth-child(2)'}`;
             },
             content: getOnboardingTexts(OnboardingTourStep.FIRST_TRANSACTION)[
-                txsLen.value === 1 ? 'default' : 'alternative'],
+                txsLen.value <= 1 ? 'default' : 'alternative'],
             params: {
                 get placement() {
                     return isSmallScreen.value ? 'bottom-start' : 'left';
diff --git a/src/lib/tour/onboarding/06_0_BackupAlertStep.ts b/src/lib/tour/onboarding/06_0_BackupAlertStep.ts
index b517b58d4..18372caf5 100644
--- a/src/lib/tour/onboarding/06_0_BackupAlertStep.ts
+++ b/src/lib/tour/onboarding/06_0_BackupAlertStep.ts
@@ -1,9 +1,11 @@
-import { defaultTooltipModifiers, ITourOrigin, IWalletHTMLElements } from '..';
-import { IOnboardingGetStepFnArgs, OnboardingTourStep, ITourStep } from '../types';
+import { useAccountStore } from '@/stores/Account';
+import { watch } from '@vue/composition-api';
+import { defaultTooltipModifiers, ITourOrigin, IWalletHTMLElements, searchComponentByName } from '..';
+import { IOnboardingGetStepFnArgs, ITourStep, OnboardingTourStep } from '../types';
 import { getOnboardingTexts } from './OnboardingTourTexts';
 
 export function getBackupAlertStep(
-    { isSmallScreen, startedFrom, toggleHighlightButton }: IOnboardingGetStepFnArgs): ITourStep {
+    { isSmallScreen, startedFrom, toggleHighlightButton, root }: IOnboardingGetStepFnArgs): ITourStep {
     const ui: ITourStep['ui'] = {
         fadedElements: [
             IWalletHTMLElements.SIDEBAR_TESTNET,
@@ -75,9 +77,28 @@ export function getBackupAlertStep(
         ui,
         lifecycle: {
             mounted: () => {
+                const unwatch = watch(useAccountStore().activeAccountInfo, async (newVal) => {
+                    if (newVal?.wordsExported) {
+                        // If user clicks "save recover words" and completes the process, we
+                        // no longer need to show the user this step, therefore, we execute
+                        // setTourAsArray again, and go to the next step which in reality will have
+                        // same index
+                        const nimiqTourInstance = searchComponentByName(root, 'nimiq-tour') as any;
+                        if (!nimiqTourInstance) return;
+
+                        nimiqTourInstance.setTourAsArray();
+                        nimiqTourInstance.currentStep -= 1;
+
+                        setTimeout(() => nimiqTourInstance.goToNextStep(), 500);
+                    }
+                });
+
                 // hightlight 'Revover words' button
                 toggleHighlightButton(IWalletHTMLElements.BUTTON_ADDRESS_BACKUP_ALERT, true, 'orange');
-                return () => toggleHighlightButton(IWalletHTMLElements.BUTTON_ADDRESS_BACKUP_ALERT, false, 'orange');
+                return () => {
+                    unwatch();
+                    toggleHighlightButton(IWalletHTMLElements.BUTTON_ADDRESS_BACKUP_ALERT, false, 'orange');
+                };
             },
         },
     } as ITourStep;
diff --git a/src/lib/tour/onboarding/OnboardingTourTexts.ts b/src/lib/tour/onboarding/OnboardingTourTexts.ts
index dba7b8bd2..c2e078c12 100644
--- a/src/lib/tour/onboarding/OnboardingTourTexts.ts
+++ b/src/lib/tour/onboarding/OnboardingTourTexts.ts
@@ -22,7 +22,7 @@ const texts: ITourStepTexts<OnboardingTourStep> = {
         alternative: [$t('This is where all your transactions will appear.')],
     },
     [OnboardingTourStep.FIRST_TRANSACTION]: {
-        // If user has 0 or 1 tx
+        // If user has 1 tx
         default: [
             $t('Here’s your first transaction with your first NIM.'),
             $t('Every NIM address comes with an avatar. They help to make sure you got the right one.'),
diff --git a/src/lib/tour/onboarding/index.ts b/src/lib/tour/onboarding/index.ts
index 5e276c144..2fc41eded 100644
--- a/src/lib/tour/onboarding/index.ts
+++ b/src/lib/tour/onboarding/index.ts
@@ -33,8 +33,8 @@ export function getOnboardingTourSteps({ root }: SetupContext, screenTypes: Scre
 
     const { state, activeAccountInfo } = useAccountStore();
     const { startedFrom } = (state.tour as { startedFrom: ITourOrigin });
-    const { type: accountType, wordsExported } = activeAccountInfo.value || {};
-    const accountIsSecured = accountType === AccountType.BIP39 && !!wordsExported;
+    const accountIsSecured = computed(() =>
+        activeAccountInfo.value?.type === AccountType.BIP39 && activeAccountInfo.value?.wordsExported);
 
     const args: IOnboardingGetStepFnArgs = {
         sleep,
@@ -53,7 +53,7 @@ export function getOnboardingTourSteps({ root }: SetupContext, screenTypes: Scre
         [OnboardingTourStep.WALLET_BALANCE]: getWalletBalanceStep(args),
         get [OnboardingTourStep.BACKUP_ALERT]() {
             // if the user has already backed up their account, skip this step
-            return !accountIsSecured ? getBackupAlertStep(args) : undefined;
+            return !accountIsSecured.value ? getBackupAlertStep(args) : undefined;
         },
         get [OnboardingTourStep.MENU_ICON]() {
             // show only this step if it is a new user and is not in a large screen
@@ -63,7 +63,7 @@ export function getOnboardingTourSteps({ root }: SetupContext, screenTypes: Scre
         [OnboardingTourStep.ACCOUNT_OPTIONS]: getAccountOptionsStep(args),
         get [OnboardingTourStep.BACKUP_OPTION_FROM_OPTIONS]() {
             // if the user has already backed up their account, remind the user that he can backup anytime
-            if (!accountIsSecured) return undefined;
+            if (!accountIsSecured.value) return undefined;
             return (screenTypes.isLargeScreen.value)
                 ? getBackupOptionLargeScreenStep()
                 : getBackupOptionNotLargeScreenStep(args);