Hooks

function useNavigation(): NavigationState
 
interface NavigationState {
  page: PageContext                  // current page's read-only context
  next: () => void                   // advance via the current page's routing, else linear next
  back: () => void                   // go to the previous page in flow history
  go: (key: string) => void          // jump to a specific page key
  prefetch: (key: string) => void    // warm a code-split chunk ahead of navigation
  nextCandidates: string[]           // page keys reachable next
  canGoBack: boolean                 // flow history depth > 1
  isNavigating: boolean              // true while a cold lazy chunk resolves
}

import { useNavigation } from '@appfunnel-dev/sdk'
 
function Continue() {
  const nav = useNavigation()
  return (
    <button onClick={nav.next} onMouseEnter={() => nav.prefetch(nav.nextCandidates[0])}>
      {nav.isNavigating ? 'Loading…' : 'Continue'}
    </button>
  )
}

function usePage(): PageContext
 
interface PageContext {
  key: string
  slug: string
  index: number
  total: number
  progressPercentage: number
  startedAt: number
}

import { usePage } from '@appfunnel-dev/sdk'
 
function ProgressBar() {
  const page = usePage()
  return <div style={{ width: `${page.progressPercentage}%` }} />
}

function useGroupProgress(): GroupProgress
 
interface GroupProgress {
  groups: PageGroup[]      // ordered segments, by first appearance along the routed path
  activeIndex: number      // index of the current group; -1 when the page is ungrouped
  activeFraction: number   // the active group's within-group fill, 0–1
}
 
interface PageGroup {
  key: string              // the slug from the page's `group` meta — NOT a display string
  pageCount: number
  completedCount: number
  active: boolean
}

import { useGroupProgress, useTranslation } from '@appfunnel-dev/sdk'
 
function Segments() {
  const { groups, activeIndex, activeFraction } = useGroupProgress()
  const { t } = useTranslation()
  return (
    <ol className="flex gap-1">
      {groups.map((g, i) => (
        <li key={g.key} className="flex-1">
          <span>{t(`groups.${g.key}`)}</span>
          <progress value={i < activeIndex ? 1 : i === activeIndex ? activeFraction : 0} />
        </li>
      ))}
    </ol>
  )
}

function useExperiment(id: string): string | undefined

const variant = useExperiment('welcome-headline')
return <h1>{variant === 'b' ? 'New copy' : 'Original copy'}</h1>

import { useResponse, useUserAttribute } from '@appfunnel-dev/sdk'
 
function EmailStep() {
  const [email, setEmail] = useUserAttribute('email')   // writing this identifies the visitor
  const [goal, setGoal] = useResponse('goal')
  return <input value={email ?? ''} onChange={(e) => setEmail(e.target.value)} />
}

import { useDevice, useUtm } from '@appfunnel-dev/sdk'
 
const { isMobile } = useDevice()
const { source, campaign } = useUtm()

{ device, browser, os, locale, page, utm, clickIds, session, identity, system }

function useFunnel(): Funnel
// { user, responses, data, context, experiments, track, snapshot() }

const funnel = useFunnel()
function onSubmit() {
  funnel.responses.set({ goal: 'gain' })
  funnel.track('quiz_submitted', { answers: 3 })
}

function useOffering(id: string | undefined): Offering | undefined  // one offering, formatted for the active locale
function useOfferings(): Offering[]                                 // all offerings, in slot order

import { useOffering } from '@appfunnel-dev/sdk'
 
function Price() {
  const offering = useOffering('plan')
  if (!offering) return <p>Select a plan</p>          // slot unassigned → undefined
  return (
    <p>
      {offering.price.formatted}
      {offering.period !== 'one-time' ? ` / ${offering.period}` : ''}
    </p>
  )
}

interface Money {
  amount: number     // major units, e.g. 79
  minor: number      // minor units, e.g. 7900
  currency: string
  formatted: string  // locale-formatted, e.g. "kr 79,00"
}

function useCheckout(options?: UseCheckoutOptions): CheckoutHandle
 
interface CheckoutHandle {
  open: (offering: string, surface?: CheckoutSurface) => Promise<CheckoutResult>
  status: CheckoutStatus   // 'idle' | 'loading' | 'requires_action' | 'success' | 'error'
  error: CheckoutError | null
  isLoading: boolean
  reset: () => void
}

import { useCheckout } from '@appfunnel-dev/sdk'
 
function BuyButton() {
  const checkout = useCheckout({ onSuccess: () => console.log('charged') })
  return (
    <button disabled={checkout.isLoading} onClick={() => checkout.open('plan', 'sheet')}>
      {checkout.error ? 'Try again' : 'Subscribe'}
    </button>
  )
}

function useTranslation(): Translation
 
interface Translation {
  t: TFunction
  fmt: Formatters
  locale: string
  setLocale: (locale: string) => void
  dir: 'ltr' | 'rtl'
  locales: string[]
}

import { useTranslation } from '@appfunnel-dev/sdk'
 
function Welcome() {
  const { t, fmt } = useTranslation()
  return (
    <>
      <h1>{t('welcome.title')}</h1>
      <p>{t('greeting', { name: 'Alex' })}</p>          {/* interpolates {{name}} */}
      <p>{t.plural(3, { one: '# day left', other: '# days left' })}</p>
      <p>{fmt.number(1234.5)} · {fmt.percent(0.2)}</p>
    </>
  )
}

function useActiveLocale(): string

function useAsset(name: string): string | undefined   // one asset's CDN URL
function useAssets(): Record<string, string>           // the whole name → URL map

import { useAsset } from '@appfunnel-dev/sdk'
 
function Logo() {
  const logo = useAsset('logo.svg')
  return logo ? <img src={logo} alt="" /> : null
}