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:
parent
263df94076
commit
2ee3427645
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue