Added eventing for the onboarding:skipped. Added a redirect to the data section when skipping. Moved endRoute to the tour level config

This commit is contained in:
Dean 2023-07-17 16:14:40 +01:00
parent 263df94076
commit 2ee3427645
3 changed files with 18 additions and 41 deletions

View File

@ -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
>

View File

@ -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: [

View File

@ -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