1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
"use client"
import {
createContext,
useContext,
useCallback,
useEffect,
useRef,
type ReactNode,
} from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { useOnboardingContext, type MemoryFormData } from "../layout"
import { analytics } from "@/lib/analytics"
export const SETUP_STEPS = ["relatable", "integrations"] as const
export type SetupStep = (typeof SETUP_STEPS)[number]
interface SetupContextValue {
memoryFormData: MemoryFormData
currentStep: SetupStep
goToStep: (step: SetupStep) => void
goToWelcome: (step?: string) => void
finishOnboarding: () => void
}
const SetupContext = createContext<SetupContextValue | null>(null)
export function useSetupContext() {
const ctx = useContext(SetupContext)
if (!ctx) {
throw new Error("useSetupContext must be used within SetupLayout")
}
return ctx
}
export default function SetupLayout({ children }: { children: ReactNode }) {
const router = useRouter()
const searchParams = useSearchParams()
const { memoryFormData, resetOnboarding } = useOnboardingContext()
const stepParam = searchParams.get("step")
const currentStep: SetupStep = SETUP_STEPS.includes(stepParam as SetupStep)
? (stepParam as SetupStep)
: "relatable"
const hasTrackedInitialStep = useRef(false)
const goToStep = useCallback(
(step: SetupStep) => {
analytics.onboardingStepViewed({ step, trigger: "user" })
router.push(`/new/onboarding/setup?step=${step}`)
},
[router],
)
const goToWelcome = useCallback(
(step = "input") => {
router.push(`/new/onboarding/welcome?step=${step}`)
},
[router],
)
const finishOnboarding = useCallback(() => {
resetOnboarding()
router.push("/new")
}, [router, resetOnboarding])
useEffect(() => {
if (!hasTrackedInitialStep.current) {
analytics.onboardingStepViewed({ step: currentStep, trigger: "user" })
hasTrackedInitialStep.current = true
}
}, [currentStep])
const contextValue: SetupContextValue = {
memoryFormData,
currentStep,
goToStep,
goToWelcome,
finishOnboarding,
}
return (
<SetupContext.Provider value={contextValue}>
{children}
</SetupContext.Provider>
)
}
|