Enable the feature tour window and extend the invite duration to 1 week

packages/builder/src/components/deploy/AppActions.svelte

@@ -20,6 +20,7 @@
   import { apps } from "stores/portal"
   import { store } from "builderStore"
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
+  import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
 
   export let application
 
@@ -179,7 +180,11 @@
       />
     {/if}
 
-    <TourWrap tourStepKey={`builder-user-management`}>
+    <TourWrap
+      tourStepKey={$store.onboarding
+        ? TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT
+        : TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT}
+    >
       <span id="builder-app-users-button">
         <ActionButton
           quiet

packages/builder/src/components/portal/onboarding/TourWrap.svelte

@@ -6,16 +6,19 @@
 
   export let tourStepKey
 
-  let currentTour
+  let currentTourStep
   let ready = false
   let handler
 
   onMount(() => {
     if (!$store.tourKey) return
 
-    currentTour = TOURS[$store.tourKey].find(step => step.id === tourStepKey)
+    currentTourStep = TOURS[$store.tourKey].find(
+      step => step.id === tourStepKey
+    )
+    if (!currentTourStep) return
 
-    const elem = document.querySelector(currentTour.query)
+    const elem = document.querySelector(currentTourStep.query)
     handler = tourHandler(elem, tourStepKey)
     ready = true
   })

packages/builder/src/components/portal/onboarding/tours.js

@@ -65,7 +65,7 @@ const getTours = () => {
         id: TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT,
         title: "Users",
         query: ".toprightnav #builder-app-users-button",
-        body: "Choose which users you want to see to have access to your app and control what level of access they have.",
+        body: "Add users to your app and control what level of access they have.",
         onLoad: () => {
           tourEvent(TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT)
         },
@@ -107,11 +107,30 @@ const getTours = () => {
         id: TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT,
         title: "Users",
         query: ".toprightnav #builder-app-users-button",
-        body: "Choose which users you want to have access to your app and control what level of access they have.",
+        body: "Add users to your app and control what level of access they have.",
         onLoad: () => {
           tourEvent(TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT)
         },
-        align: "left",
+        onComplete: async () => {
+          // Push the onboarding forward
+          if (get(auth).user) {
+            await users.save({
+              ...get(auth).user,
+              onboardedAt: new Date().toISOString(),
+            })
+
+            // Update the cached user
+            await auth.getSelf()
+
+            store.update(state => ({
+              ...state,
+              tourNodes: undefined,
+              tourKey: undefined,
+              tourKeyStep: undefined,
+              onboarding: false,
+            }))
+          }
+        },
       },
     ],
   }

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -68,22 +68,32 @@
   }
 
   const initTour = async () => {
-    if (
+    // Check if onboarding is enabled.
-      !$auth.user?.onboardedAt &&
+    if (isEnabled(TENANT_FEATURE_FLAGS.ONBOARDING_TOUR)) {
-      isEnabled(TENANT_FEATURE_FLAGS.ONBOARDING_TOUR)
+      if (!$auth.user?.onboardedAt) {
-    ) {
+        // Determine the correct step
-      // Determine the correct step
+        const activeNav = $layout.children.find(c => $isActive(c.path))
-      const activeNav = $layout.children.find(c => $isActive(c.path))
+        const onboardingTour = TOURS[TOUR_KEYS.TOUR_BUILDER_ONBOARDING]
-      const onboardingTour = TOURS[TOUR_KEYS.TOUR_BUILDER_ONBOARDING]
+        const targetStep = activeNav
-      const targetStep = activeNav
+          ? onboardingTour.find(step => step.route === activeNav?.path)
-        ? onboardingTour.find(step => step.route === activeNav?.path)
+          : null
-        : null
+        await store.update(state => ({
-      await store.update(state => ({
+          ...state,
-        ...state,
+          onboarding: true,
-        onboarding: true,
+          tourKey: TOUR_KEYS.TOUR_BUILDER_ONBOARDING,
-        tourKey: TOUR_KEYS.TOUR_BUILDER_ONBOARDING,
+          tourStepKey: targetStep?.id,
-        tourStepKey: targetStep?.id,
+        }))
-      }))
+      } else {
+        // Feature tour date
+        const release_date = new Date("2023-03-01T00:00:00.000Z")
+        const onboarded = new Date($auth.user?.onboardedAt)
+        if (onboarded < release_date) {
+          await store.update(state => ({
+            ...state,
+            tourKey: TOUR_KEYS.FEATURE_ONBOARDING,
+          }))
+        }
+      }
     }
   }
 

packages/worker/src/utilities/redis.ts

@@ -7,7 +7,7 @@ function getExpirySecondsForDB(db: string) {
       return 3600
     case redis.utils.Databases.INVITATIONS:
       // a day
-      return 86400
+      return 604800
   }
 }