From 2ee3427645108a663c3a619f03c5ecccb6002b57 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 17 Jul 2023 16:14:40 +0100
Subject: [PATCH] Added eventing for the onboarding:skipped. Added a redirect
 to the data section when skipping. Moved endRoute to the tour level config

---
 .../portal/onboarding/TourPopover.svelte      | 38 ++++---------------
 .../src/components/portal/onboarding/tours.js | 14 +++++--
 .../builder/app/[application]/_layout.svelte  |  7 ----
 3 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index 4607150c29..d514441815 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -15,14 +15,15 @@
   $: tourNodes = { ...$store.tourNodes }
   $: tourKey = $store.tourKey
   $: tourStepKey = $store.tourStepKey
-  $: tourOnSkip = TOURS[tourKey]?.onSkip
+  $: tour = TOURS[tourKey]
+  $: tourOnSkip = tour?.onSkip
 
   const updateTourStep = (targetStepKey, tourKey) => {
     if (!tourKey) {
       return
     }
     if (!tourSteps?.length) {
-      tourSteps = [...TOURS[tourKey].steps]
+      tourSteps = [...tour.steps]
     }
     tourStepIdx = getCurrentStepIdx(tourSteps, targetStepKey)
     lastStep = tourStepIdx + 1 == tourSteps.length
@@ -73,23 +74,8 @@
         tourStep.onComplete()
       }
       popover.hide()
-      if (tourStep.endRoute) {
-        $goto(tourStep.endRoute)
-      }
-    }
-  }
-
-  const previousStep = async () => {
-    if (tourStepIdx > 0) {
-      let target = tourSteps[tourStepIdx - 1]
-      if (target) {
-        store.update(state => ({
-          ...state,
-          tourStepKey: target.id,
-        }))
-        navigateStep(target)
-      } else {
-        console.log("Could not retrieve step")
+      if (tour.endRoute) {
+        $goto(tour.endRoute)
       }
     }
   }
@@ -135,22 +121,14 @@
           <div class="tour-footer">
             <div class="tour-navigation">
               {#if typeof tourOnSkip === "function"}
-                <!-- <Button
-                  secondary
-                  quiet
-                  on:click={() => {
-                    skipping = true
-                    tourOnSkip()
-                  }}
-                  disabled={skipping}
-                >
-                  Skip
-                </Button> -->
                 <Link
                   quiet
                   on:click={() => {
                     skipping = true
                     tourOnSkip()
+                    if (tour.endRoute) {
+                      $goto(tour.endRoute)
+                    }
                   }}
                   disabled={skipping}>Skip</Link
                 >
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 0fcefce6f4..2b2e4c1f88 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -4,6 +4,7 @@ import { auth } from "stores/portal"
 import analytics from "analytics"
 import { OnboardingData, OnboardingDesign, OnboardingPublish } from "./steps"
 import { API } from "api"
+
 const ONBOARDING_EVENT_PREFIX = "onboarding"
 
 export const TOUR_STEP_KEYS = {
@@ -20,8 +21,7 @@ export const TOUR_KEYS = {
   FEATURE_ONBOARDING: "feature-onboarding",
 }
 
-// TOUR_BUILDER_ONBOARDING - termination
-const endUserOnboarding = async () => {
+const endUserOnboarding = async ({ skipped = false }) => {
   // Mark the users onboarding as complete
   // Clear all tour related state
   if (get(auth).user) {
@@ -30,6 +30,10 @@ const endUserOnboarding = async () => {
         onboardedAt: new Date().toISOString(),
       })
 
+      if (skipped) {
+        tourEvent("skipped")
+      }
+
       // Update the cached user
       await auth.getSelf()
 
@@ -57,7 +61,6 @@ const tourEvent = eventKey => {
 const getTours = () => {
   return {
     [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: {
-      onSkip: endUserOnboarding,
       steps: [
         {
           id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
@@ -106,7 +109,6 @@ const getTours = () => {
           title: "Publish",
           layout: OnboardingPublish,
           route: "/builder/app/:application/design",
-          endRoute: "/builder/app/:application/data",
           query: ".toprightnav #builder-app-publish-button",
           onLoad: () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
@@ -114,6 +116,10 @@ const getTours = () => {
           onComplete: endUserOnboarding,
         },
       ],
+      onSkip: async () => {
+        await endUserOnboarding({ skipped: true })
+      },
+      endRoute: "/builder/app/:application/data",
     },
     [TOUR_KEYS.FEATURE_ONBOARDING]: {
       steps: [
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 779b906587..64e892e83c 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -87,17 +87,10 @@
     // Check if onboarding is enabled.
     if (isEnabled(TENANT_FEATURE_FLAGS.ONBOARDING_TOUR)) {
       if (!$auth.user?.onboardedAt) {
-        // Determine the correct step
-        const activeNav = $layout.children.find(c => $isActive(c.path))
-        const onboardingTour = TOURS[TOUR_KEYS.TOUR_BUILDER_ONBOARDING]
-        const targetStep = activeNav
-          ? onboardingTour.steps.find(step => step.route === activeNav?.path)
-          : null
         await store.update(state => ({
           ...state,
           onboarding: true,
           tourKey: TOUR_KEYS.TOUR_BUILDER_ONBOARDING,
-          tourStepKey: targetStep?.id,
         }))
       } else {
         // Feature tour date