added button to start onboarding tour from settings

Author: onmax

src/App.vue

@@ -1,9 +1,8 @@
 <template>
     <div id="app" :class="{'value-masked': amountsHidden}">
         <!-- (?) This could be moved to Groundfloor.vue -->
-        <!-- TODO Remove '|| true' -->
-        <transition v-if="!!$route.params.doOnboardingTour || true" name="delay">
-            <Tour />
+        <transition v-if="!!$route.params.tourName" name="delay">
+            <Tour :tourName="$route.params.tourName" />
         </transition>
 
         <main :class="routeClass" ref="$main">
@@ -45,13 +44,6 @@ import { useSwipes } from './composables/useSwipes';
 
 export default defineComponent({
     name: 'app',
-    props: {
-        doOnboardingTour: {
-            // It has to be a string since it is a value encapsulated in Location.params which is Dictionary<string>.
-            type: String,
-            default: '',
-        },
-    },
     setup(props, context) {
         provideRouter(router);
 

src/components/Tour.vue

@@ -2,7 +2,7 @@
     <div>
         <v-tour
             class="tour"
-            name="onboarding-tour"
+            name="nimiq-tour"
             :steps="Object.values(steps).map((s) => s.tooltip)"
         >
             <template slot-scope="tour">
@@ -94,7 +94,7 @@ import {
 } from '@vue/composition-api';
 import Vue from 'vue';
 import VueTour from 'vue-tour';
-import { TourStep, TourStepIndex, useFakeTx, useOnboardingTourSteps } from '../composables/useTour';
+import { TourName, TourStep, TourStepIndex, TourSteps, useFakeTx, useTour } from '../composables/useTour';
 import { useWindowSize } from '../composables/useWindowSize';
 import CaretRightIcon from './icons/CaretRightIcon.vue';
 
@@ -104,6 +104,13 @@ require('vue-tour/dist/vue-tour.css');
 
 export default defineComponent({
     name: 'tour',
+    props: {
+        tourName: {
+            type: String,
+            required: true,
+            validator: (tour: TourName) => (['onboarding', 'network'] as TourName[]).indexOf(tour) !== -1,
+        },
+    },
     setup(props, context) {
         // TODO Use isMobile
         const { width } = useWindowSize();
@@ -112,38 +119,47 @@ export default defineComponent({
         const disconnected = computed(
             () => $network.consensus !== 'established',
         );
-        const loading = ref(false);
 
         let tour: VueTour.Tour | null = null;
+        const steps: TourSteps<any> = useTour(props.tourName as TourName, context) || {};
 
-        // TODO This will be a prop
-        const steps = useOnboardingTourSteps(context);
-
-        const currentStep: Ref<TourStepIndex> = ref(6);
-        const nSteps = Object.keys(steps).length; // TODO Might be a ref/computed instead
-        const disableNextStep = ref(currentStep.value >= nSteps - 1 || !!steps[currentStep.value].ui.disabledNextStep);
+        // Initial state
+        const loading = ref(true);
+        const currentStep: Ref<TourStepIndex> = ref(0);
+        const nSteps: Ref<number> = ref(0);
+        const disableNextStep = ref(true);
 
         onMounted(() => {
-            tour = context.root.$tours['onboarding-tour'];
+            tourSetup();
+
+            // REMOVE ME
+            const { removeTransactions } = useTransactionsStore();
+            removeTransactions([useFakeTx()]);
+        });
 
+        async function tourSetup() {
+            // Update state
+            nSteps.value = Object.keys(steps).length;
+            disableNextStep.value = currentStep.value >= nSteps.value - 1
+                || !!steps[currentStep.value].ui.disabledNextStep;
             _addAttributes(steps[currentStep.value].ui, currentStep.value);
             // eslint-disable-next-line no-unused-expressions
             steps[currentStep.value].lifecycle?.onMountedStep?.(goToNextStep);
 
-            tour!.start(`${currentStep.value}`);
+            await sleep(500);
 
-            // REMOVE ME
-            const { removeTransactions } = useTransactionsStore();
-            removeTransactions([useFakeTx()]);
-        });
+            tour = context.root.$tours['nimiq-tour'];
+            tour!.start(`${currentStep.value}`);
+            loading.value = false;
+        }
 
         function goToPrevStep() {
             if (currentStep.value <= 0) return;
             _moveToFutureStep(currentStep.value, currentStep.value - 1);
         }
 
         function goToNextStep() {
-            if (currentStep.value + 1 >= nSteps) return;
+            if (currentStep.value + 1 >= nSteps.value) return;
             _moveToFutureStep(currentStep.value, currentStep.value + 1);
         }
 
@@ -191,7 +207,7 @@ export default defineComponent({
 
             // onMountedStep
             loading.value = false;
-            disableNextStep.value = futureStepIndex >= nSteps - 1 || !!futureUI.disabledNextStep;
+            disableNextStep.value = futureStepIndex >= nSteps.value - 1 || !!futureUI.disabledNextStep;
 
             // eslint-disable-next-line no-unused-expressions
             futureLifecycle?.onMountedStep?.(goToNextStep);

src/components/layouts/Settings.vue

@@ -87,6 +87,19 @@
                     </label>
                 </div>
 
+                <div class="setting">
+                    <div class="description">
+                        <label class="nq-h2" for="product-tour">{{ $t('Product Tour') }}</label>
+                        <p class="nq-text">
+                            {{ $t('Go through the product again') }}
+                        </p>
+                    </div>
+
+                    <router-link :to="{ name: 'root', params: { tourName: 'onboarding' } }">
+                        <button class="nq-button-pill light-blue">{{ $t('Start Tour') }}</button>
+                    </router-link>
+                </div>
+
                 <!-- <div class="setting">
                     <div class="description">
                         <label class="nq-h2" for="theme">{{ $t('Interface Theme') }}</label>

src/composables/useTour.ts

@@ -2,6 +2,7 @@ import { Transaction, useTransactionsStore } from '@/stores/Transactions';
 import { SetupContext } from '@vue/composition-api';
 import { useAddressStore } from '../stores/Address';
 
+export type TourName = 'onboarding' | 'network'
 type OnboardingTourPages = '/' | '/transactions' | '/?sidebar=true'
 
 enum MobileOnboardingTourStep {
@@ -59,8 +60,8 @@ export interface TourStep {
     };
 }
 
-export type TourSteps = {
-    [x in TourStepIndex]: TourStep;
+export type TourSteps<T extends number> = {
+    [x in T]: TourStep;
 };
 
 // TODO Remove me
@@ -92,7 +93,7 @@ export function useFakeTx(): Transaction {
         state: 'confirmed',
     };
 }
-export function useOnboardingTourSteps({ root }: SetupContext): TourSteps {
+function getOnboardingTourSteps({ root }: SetupContext): TourSteps<MobileOnboardingTourStep> {
     const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
     const closeAccountOptionsModal = async () => {
@@ -112,7 +113,7 @@ export function useOnboardingTourSteps({ root }: SetupContext): TourSteps {
         await sleep(500); // TODO Check this random value
     };
 
-    const steps: TourSteps = {
+    const steps: TourSteps<MobileOnboardingTourStep> = {
         [MobileOnboardingTourStep.FIRST_ADDRESS]: {
             page: '/',
             tooltip: {
@@ -359,8 +360,7 @@ export function useOnboardingTourSteps({ root }: SetupContext): TourSteps {
     steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].lifecycle = {
         ...steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].lifecycle,
 
-        // TODO Maybe it could be possible without async/await
-        onMountedStep: async () => new Promise((resolve) => {
+        onMountedStep: () => {
             root.$watch(() => useTransactionsStore().state.transactions, (txs) => {
                 if (Object.values(txs).length > 0) {
                     // Once the user has at least one transaction, tooltip in step TRANSACTIONS_LIST is modified
@@ -373,9 +373,15 @@ export function useOnboardingTourSteps({ root }: SetupContext): TourSteps {
                     };
                     steps[MobileOnboardingTourStep.TRANSACTIONS_LIST].ui.disabledNextStep = false;
                 }
-                resolve();
             });
-        }),
+        },
     };
     return steps;
 }
+export function useTour(tour: TourName, context: SetupContext)
+    : TourSteps<MobileOnboardingTourStep> | TourSteps<NetworkTourStep> | undefined {
+    if (tour === 'onboarding') {
+        return getOnboardingTourSteps(context);
+    }
+    return undefined;
+}