29 lines
950 B
TypeScript
29 lines
950 B
TypeScript
import type { ComputedRef } from 'vue'
|
|
import { watch } from 'vue'
|
|
import { trackCookEvent } from '~/utils/analytics'
|
|
|
|
export interface CookFunnelState {
|
|
active: boolean
|
|
hasIngredients: boolean
|
|
results: 'hidden' | 'loading' | 'ready' | 'empty'
|
|
}
|
|
|
|
/** Observe rendered states, so every ingredient entry path shares the same funnel. */
|
|
export function useCookFunnel(state: ComputedRef<CookFunnelState>) {
|
|
watch(state, (next, previous) => {
|
|
if (!next.active)
|
|
return
|
|
const entering = !previous?.active
|
|
if (entering)
|
|
trackCookEvent('view_cook')
|
|
if (next.hasIngredients && (entering || !previous?.hasIngredients))
|
|
trackCookEvent('select_ingredients')
|
|
if (entering || next.results !== previous?.results) {
|
|
if (next.results === 'ready')
|
|
trackCookEvent('view_results')
|
|
else if (next.results === 'empty')
|
|
trackCookEvent('results_empty')
|
|
}
|
|
}, { immediate: true, flush: 'post' })
|
|
}
|