State Management#

Uses Zustand. Stores are in web/src/lib/stores/.

useUserStore#

typescriptimport { useUserStore } from "@/lib/stores/user"

const { user, fetchUser, clearUser, isOwner } = useUserStore()

Field/Method	Description
`user`	User info `{ id, email, role, ... }`
`fetchUser()`	Fetches `/v1/users/info`, returns success boolean
`clearUser()`	Clears user state
`isOwner()`	Whether user is owner (`user.role === 'owner'`)

useBillingStore#

typescriptimport { useBillingStore } from "@/lib/stores/billing"

const { subscription, lifetime, credits, fetchAll, clear, getTotalCredits, hasSubscription, hasLifetime } = useBillingStore()

Field/Method	Description
`subscription`	Active subscriptions
`lifetime`	Lifetime purchases
`credits`	Credits `{ all: [], total: number }`
`fetchAll()`	Load subscriptions, lifetime, credits in parallel
`clear()`	Clear all billing data
`getTotalCredits()`	Get total available credits
`hasSubscription()`	Has active subscription
`hasLifetime()`	Has lifetime purchase

useWebsiteStore#

typescriptimport { useWebsiteStore } from "@/lib/stores/website"

const { config, fetchConfig } = useWebsiteStore()

Field	Description
`config.subscription`	Subscription config (enabled, packages, has_lifetime, has_free)
`config.credit`	Credit config (enabled, min_credits, packages)
`config.app_mode`	App mode

Example#

tsx"use client"

import { useUserStore } from "@/lib/stores/user"
import { useBillingStore } from "@/lib/stores/billing"

export default function MyComponent() {
  const { user } = useUserStore()
  const { credits } = useBillingStore()

  return (
    <div>
      <p>User: {user?.email}</p>
      <p>Credits: {credits?.total}</p>
    </div>
  )
}