Altered structure of the tours to allow tour level config with an onSkip fn option. Tour steps now moved to 'steps' entry

2024-07-17 20:25:57 +12:00 · 2023-07-17 14:07:53 +01:00 · 2023-07-17 14:07:53 +01:00 · 263df94076
parent 71d7b6f8cd
commit 263df94076
4 changed files with 125 additions and 111 deletions
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Popover, Layout, Heading, Body, Button } from "@budibase/bbui"
+  import { Popover, Layout, Heading, Body, Button, Link } from "@budibase/bbui"
  import { store } from "builderStore"
  import { TOURS } from "./tours.js"
  import { goto, layout, isActive } from "@roxi/routify"
@ -10,17 +10,19 @@
  let tourStep
  let tourStepIdx
  let lastStep
+  let skipping = false

  $: tourNodes = { ...$store.tourNodes }
  $: tourKey = $store.tourKey
  $: tourStepKey = $store.tourStepKey
+  $: tourOnSkip = TOURS[tourKey]?.onSkip

  const updateTourStep = (targetStepKey, tourKey) => {
    if (!tourKey) {
      return
    }
    if (!tourSteps?.length) {
-      tourSteps = [...TOURS[tourKey]]
+      tourSteps = [...TOURS[tourKey].steps]
    }
    tourStepIdx = getCurrentStepIdx(tourSteps, targetStepKey)
    lastStep = tourStepIdx + 1 == tourSteps.length
@ -132,16 +134,28 @@
          </Body>
          <div class="tour-footer">
            <div class="tour-navigation">
-              {#if tourStepIdx > 0}
-                <Button
+              {#if typeof tourOnSkip === "function"}
+                <!-- <Button
                  secondary
-                  on:click={previousStep}
-                  disabled={tourStepIdx == 0}
+                  quiet
+                  on:click={() => {
+                    skipping = true
+                    tourOnSkip()
+                  }}
+                  disabled={skipping}
+                >
+                  Skip
+                </Button> -->
+                <Link
+                  quiet
+                  on:click={() => {
+                    skipping = true
+                    tourOnSkip()
+                  }}
+                  disabled={skipping}>Skip</Link
                >
-                  <div>Back</div>
-                </Button>
              {/if}
-              <Button cta on:click={nextStep}>
+              <Button cta on:click={nextStep} disabled={skipping}>
                <div>{lastStep ? "Finish" : "Next"}</div>
              </Button>
            </div>
@ -157,9 +171,13 @@
    padding: var(--spacing-xl);
  }
  .tour-navigation {
-    grid-gap: var(--spectrum-alias-grid-baseline);
+    grid-gap: var(--spacing-xl);
    display: flex;
    justify-content: end;
+    align-items: center;
+  }
+  .tour-navigation :global(.spectrum-Link) {
+    color: white;
  }
  .tour-body :global(.feature-list) {
    margin-bottom: 0px;
--- a/packages/builder/src/components/portal/onboarding/TourWrap.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourWrap.svelte
@ -13,7 +13,7 @@

  const registerTourNode = (tourKey, stepKey) => {
    if (ready && !registered && tourKey) {
-      currentTourStep = TOURS[tourKey].find(step => step.id === stepKey)
+      currentTourStep = TOURS[tourKey].steps.find(step => step.id === stepKey)
      if (!currentTourStep) {
        return
      }
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@ -20,6 +20,34 @@ export const TOUR_KEYS = {
  FEATURE_ONBOARDING: "feature-onboarding",
 }

+// TOUR_BUILDER_ONBOARDING - termination
+const endUserOnboarding = async () => {
+  // Mark the users onboarding as complete
+  // Clear all tour related state
+  if (get(auth).user) {
+    try {
+      await API.updateSelf({
+        onboardedAt: new Date().toISOString(),
+      })
+
+      // Update the cached user
+      await auth.getSelf()
+
+      store.update(state => ({
+        ...state,
+        tourNodes: undefined,
+        tourKey: undefined,
+        tourKeyStep: undefined,
+        onboarding: false,
+      }))
+    } catch (e) {
+      console.log("Onboarding failed", e)
+      return false
+    }
+    return true
+  }
+}
+
 const tourEvent = eventKey => {
  analytics.captureEvent(`${ONBOARDING_EVENT_PREFIX}:${eventKey}`, {
    eventSource: EventSource.PORTAL,
@ -28,111 +56,79 @@ const tourEvent = eventKey => {

 const getTours = () => {
  return {
-    [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: [
-      {
-        id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
-        title: "Data",
-        route: "/builder/app/:application/data",
-        layout: OnboardingData,
-        query: ".topleftnav .spectrum-Tabs-item#builder-data-tab",
-        onLoad: async () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
+    [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: {
+      onSkip: endUserOnboarding,
+      steps: [
+        {
+          id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
+          title: "Data",
+          route: "/builder/app/:application/data",
+          layout: OnboardingData,
+          query: ".topleftnav .spectrum-Tabs-item#builder-data-tab",
+          onLoad: async () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
+          },
+          align: "left",
        },
-        align: "left",
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION,
-        title: "Design",
-        route: "/builder/app/:application/design",
-        layout: OnboardingDesign,
-        query: ".topleftnav .spectrum-Tabs-item#builder-design-tab",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION,
+          title: "Design",
+          route: "/builder/app/:application/design",
+          layout: OnboardingDesign,
+          query: ".topleftnav .spectrum-Tabs-item#builder-design-tab",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
+          },
+          align: "left",
        },
-        align: "left",
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION,
-        title: "Automations",
-        route: "/builder/app/:application/automation",
-        query: ".topleftnav .spectrum-Tabs-item#builder-automation-tab",
-        body: "Once you have your app screens made, you can set up automations to fit in with your current workflow",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION,
+          title: "Automations",
+          route: "/builder/app/:application/automation",
+          query: ".topleftnav .spectrum-Tabs-item#builder-automation-tab",
+          body: "Once you have your app screens made, you can set up automations to fit in with your current workflow",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION)
+          },
+          align: "left",
        },
-        align: "left",
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT,
-        title: "Users",
-        query: ".toprightnav #builder-app-users-button",
-        body: "Add users to your app and control what level of access they have.",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT,
+          title: "Users",
+          query: ".toprightnav #builder-app-users-button",
+          body: "Add users to your app and control what level of access they have.",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT)
+          },
        },
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_APP_PUBLISH,
-        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)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_APP_PUBLISH,
+          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)
+          },
+          onComplete: endUserOnboarding,
        },
-        onComplete: async () => {
-          // Mark the users onboarding as complete
-          // Clear all tour related state
-          if (get(auth).user) {
-            await API.updateSelf({
-              onboardedAt: new Date().toISOString(),
-            })
-
-            // Update the cached user
-            await auth.getSelf()
-
-            store.update(state => ({
-              ...state,
-              tourNodes: undefined,
-              tourKey: undefined,
-              tourKeyStep: undefined,
-              onboarding: false,
-            }))
-          }
+      ],
+    },
+    [TOUR_KEYS.FEATURE_ONBOARDING]: {
+      steps: [
+        {
+          id: TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT,
+          title: "Users",
+          query: ".toprightnav #builder-app-users-button",
+          body: "Add users to your app and control what level of access they have.",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT)
+          },
+          onComplete: endUserOnboarding,
        },
-      },
-    ],
-    [TOUR_KEYS.FEATURE_ONBOARDING]: [
-      {
-        id: TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT,
-        title: "Users",
-        query: ".toprightnav #builder-app-users-button",
-        body: "Add users to your app and control what level of access they have.",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT)
-        },
-        onComplete: async () => {
-          // Push the onboarding forward
-          if (get(auth).user) {
-            await API.updateSelf({
-              onboardedAt: new Date().toISOString(),
-            })
-
-            // Update the cached user
-            await auth.getSelf()
-
-            store.update(state => ({
-              ...state,
-              tourNodes: undefined,
-              tourKey: undefined,
-              tourKeyStep: undefined,
-              onboarding: false,
-            }))
-          }
-        },
-      },
-    ],
+      ],
+    },
  }
 }

--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -91,7 +91,7 @@
        const activeNav = $layout.children.find(c => $isActive(c.path))
        const onboardingTour = TOURS[TOUR_KEYS.TOUR_BUILDER_ONBOARDING]
        const targetStep = activeNav
-          ? onboardingTour.find(step => step.route === activeNav?.path)
+          ? onboardingTour.steps.find(step => step.route === activeNav?.path)
          : null
        await store.update(state => ({
          ...state,