@zappie/kit 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zappie/kit
 
+## 0.1.2
+
+### Patch Changes
+
+- e55ac2f: Add account, order-list, checkout and payment-return blocks, plus consent controls for optional tracking. Expose the consent choice without loading tracking tags.
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -25,3 +25,22 @@ The kit is at `0.x`. Components carry their own versions, and `zappie diff` show
 ## License
 
 MIT
+
+## Account and checkout pages
+
+Install `checkout-page`, `account-page`, `orders-page`, `checkout-return` and
+`consent` with `zappie add`. Supply public SDK clients and your own route links.
+Account and order pages use the same customer client as `CustomerProvider`.
+Checkout option fixes call your item editor with the cart line and option group.
+Payment-method selection stays on hosted checkout, whose session request does
+not accept a selected method.
+
+Pass the return route's `session` query parameter to `CheckoutReturn`. It clears
+the cart only after checkout confirms a completed order. It links to your order
+route, where you can render `OrderPage`.
+
+Give `Consent` a store-specific, versioned storage key and a privacy-policy URL.
+Use its `onChange` callback to read the stored choice and later changes, including
+withdrawal. The item loads no tracking tags and reads no integration IDs. Merchant
+pixels will use `analytics.forward` when it becomes available. Direct tracking
+scripts remain disallowed.

package/dist/registry/v1/index.json

@@ -1 +1 @@
-{"version":"2026-10-10","items":[{"name":"address-picker","type":"component","version":"1.0.0","title":"Address picker","description":"Find delivery addresses and show them on a map."},{"name":"cart-button","type":"component","version":"1.0.0","title":"Cart button","description":"Open the cart from a floating or inline button with count and subtotal."},{"name":"cart-drawer","type":"component","version":"1.0.0","title":"Cart drawer","description":"Show cart lines, issues and totals in a responsive drawer."},{"name":"cart-line","type":"component","version":"1.0.0","title":"Cart line","description":"Show options and let shoppers change quantity or remove a line."},{"name":"category-nav","type":"component","version":"1.0.0","title":"Category navigation","description":"Navigate categories with tabs that follow scrolling."},{"name":"checkout-button","type":"component","version":"1.0.0","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution."},{"name":"fulfilment-switch","type":"component","version":"1.0.0","title":"Fulfilment switch","description":"Choose pickup or delivery from the branch options."},{"name":"item-card","type":"component","version":"1.0.0","title":"Item card","description":"Show an item, its price, availability and cart feedback."},{"name":"item-sheet","type":"component","version":"1.0.0","title":"Item sheet","description":"Let shoppers configure an item, with optional v2 URL navigation."},{"name":"menu-page","type":"block","version":"1.0.0","title":"Menu page","description":"Combine the catalogue, item view and cart in your framework."},{"name":"money","type":"component","version":"1.0.0","title":"Money","description":"Format SDK money with your theme styles."},{"name":"open-status","type":"component","version":"1.0.0","title":"Open status","description":"Show whether a branch is open and when that changes."},{"name":"order-page","type":"block","version":"1.0.0","title":"Order page","description":"Show order progress and your support links."},{"name":"order-status","type":"component","version":"1.0.0","title":"Order status","description":"Show live order progress, items and totals."},{"name":"provider","type":"component","version":"1.0.0","title":"Zappie provider","description":"Create a storefront client and apply scoped tokens and fonts."},{"name":"quantity","type":"component","version":"1.0.0","title":"Quantity","description":"Adjust quantity within its limits."},{"name":"schedule-picker","type":"component","version":"1.0.0","title":"Schedule picker","description":"Choose ASAP or an available time for the cart."},{"name":"search","type":"component","version":"1.0.0","title":"Search","description":"Search the menu as shoppers type and discard outdated results."},{"name":"sign-in-button","type":"component","version":"1.0.0","title":"Sign-in button","description":"Show customer sign-in and sign-out controls."},{"name":"store-footer","type":"component","version":"1.0.0","title":"Store footer","description":"Show branch contacts, social links and your legal links."},{"name":"store-header","type":"component","version":"1.0.0","title":"Store header","description":"Show store details, opening status and fulfilment."}]}
+{"version":"2026-10-10","items":[{"name":"account-page","type":"block","version":"1.0.0","title":"Account page","description":"Show your profile and manage saved addresses."},{"name":"address-picker","type":"component","version":"1.0.0","title":"Address picker","description":"Find delivery addresses and show them on a map."},{"name":"cart-button","type":"component","version":"1.0.0","title":"Cart button","description":"Open the cart from a floating or inline button with count and subtotal."},{"name":"cart-drawer","type":"component","version":"1.0.0","title":"Cart drawer","description":"Show cart lines, issues and totals in a responsive drawer."},{"name":"cart-line","type":"component","version":"1.0.0","title":"Cart line","description":"Show options and let shoppers change quantity or remove a line."},{"name":"category-nav","type":"component","version":"1.0.0","title":"Category navigation","description":"Navigate categories with tabs that follow scrolling."},{"name":"checkout-button","type":"component","version":"1.0.1","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution."},{"name":"checkout-page","type":"block","version":"1.0.0","title":"Checkout page","description":"Collect contact and delivery details, resolve cart issues and continue to payment."},{"name":"checkout-return","type":"block","version":"1.0.0","title":"Checkout return","description":"Confirm payment and link to the completed order."},{"name":"consent","type":"component","version":"1.0.0","title":"Consent","description":"Save your privacy choice and withdraw consent when you choose."},{"name":"fulfilment-switch","type":"component","version":"1.0.0","title":"Fulfilment switch","description":"Choose pickup or delivery from the branch options."},{"name":"item-card","type":"component","version":"1.0.0","title":"Item card","description":"Show an item, its price, availability and cart feedback."},{"name":"item-sheet","type":"component","version":"1.0.0","title":"Item sheet","description":"Let shoppers configure an item, with optional v2 URL navigation."},{"name":"menu-page","type":"block","version":"1.0.0","title":"Menu page","description":"Combine the catalogue, item view and cart in your framework."},{"name":"money","type":"component","version":"1.0.0","title":"Money","description":"Format SDK money with your theme styles."},{"name":"open-status","type":"component","version":"1.0.0","title":"Open status","description":"Show whether a branch is open and when that changes."},{"name":"order-page","type":"block","version":"1.0.0","title":"Order page","description":"Show order progress and your support links."},{"name":"order-status","type":"component","version":"1.0.0","title":"Order status","description":"Show live order progress, items and totals."},{"name":"orders-page","type":"block","version":"1.0.0","title":"Orders page","description":"Browse your orders and load older orders."},{"name":"provider","type":"component","version":"1.0.0","title":"Zappie provider","description":"Create a storefront client and apply scoped tokens and fonts."},{"name":"quantity","type":"component","version":"1.0.0","title":"Quantity","description":"Adjust quantity within its limits."},{"name":"schedule-picker","type":"component","version":"1.0.0","title":"Schedule picker","description":"Choose ASAP or an available time for the cart."},{"name":"search","type":"component","version":"1.0.0","title":"Search","description":"Search the menu as shoppers type and discard outdated results."},{"name":"sign-in-button","type":"component","version":"1.0.0","title":"Sign-in button","description":"Show customer sign-in and sign-out controls."},{"name":"store-footer","type":"component","version":"1.0.0","title":"Store footer","description":"Show branch contacts, social links and your legal links."},{"name":"store-header","type":"component","version":"1.0.0","title":"Store header","description":"Show store details, opening status and fulfilment."}]}

package/dist/registry/v1/items/account-page.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"account-page","type":"block","version":"1.0.0","title":"Account page","description":"Show your profile and manage saved addresses.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":["sign-in-button"],"files":[{"path":"account-page.css","target":"components/zappie/account-page.css","sha256":"6bfc66e08b88126e9f59eeb4c58c872629efe7a5d7f31a15176e707ebc9ba8c7","content":".z-kit-account-page {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-account-page :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-account-page :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-account-page :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-account-page ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"account-page.tsx","target":"components/zappie/account-page.tsx","sha256":"844ed8a5fb5df3353120ab4fca0d7c0786ab55f76b2d5c604b0d39f1fe983511","content":"\"use client\";\n\nimport { SignInButton } from \"@/components/zappie/sign-in-button\";\nimport type {\n  CustomerClient,\n  CustomerProfile,\n  SavedAddress,\n} from \"@zappie/sdk/customer\";\nimport { useAuth } from \"@zappie/sdk/customer/react\";\nimport { useEffect, useState } from \"react\";\nimport \"./account-page.css\";\n\n/** Show your profile and let you save or remove delivery addresses. */\nexport function AccountPage({\n  customer,\n  ordersHref = \"/orders\",\n}: {\n  /** Use the same client as your CustomerProvider. */\n  customer: CustomerClient;\n  ordersHref?: string;\n}) {\n  const auth = useAuth();\n  return (\n    <section className=\"z-kit-account-page\" aria-label=\"Your account\">\n      <h2>Your account</h2>\n      {auth.state === \"unknown\" ? (\n        <p role=\"status\">Checking your session…</p>\n      ) : auth.customer ? (\n        <Account key={auth.customer.id} customer={customer} />\n      ) : (\n        <p>Sign in to see your profile and saved addresses.</p>\n      )}\n      <SignInButton />\n      <a href={ordersHref}>Your orders</a>\n    </section>\n  );\n}\n\nfunction Account({ customer }: { customer: CustomerClient }) {\n  const [profile, setProfile] = useState<CustomerProfile>();\n  const [addresses, setAddresses] = useState<SavedAddress[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [attempt, setAttempt] = useState(0);\n  const [error, setError] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  useEffect(() => {\n    let active = true;\n    setLoading(true);\n    setError(\"\");\n    void Promise.all([customer.profile(), customer.addresses()])\n      .then(\n        ([next, saved]) => {\n          if (active) {\n            setProfile(next);\n            setAddresses(saved);\n          }\n        },\n        () => {\n          if (active) {\n            setError(\"We could not load your account. Try again.\");\n          }\n        },\n      )\n      .finally(() => {\n        if (active) {\n          setLoading(false);\n        }\n      });\n    return () => {\n      active = false;\n    };\n  }, [customer, attempt]);\n  const remove = async (id: string) => {\n    setBusy(true);\n    setError(\"\");\n    try {\n      await customer.removeAddress(id);\n      setAddresses((current) => current.filter((address) => address.id !== id));\n    } catch {\n      setError(\"We could not remove that address. Try again.\");\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <div>\n      {loading && <p role=\"status\">Loading your account…</p>}\n      {error && (\n        <div role=\"alert\">\n          <p>{error}</p>\n          <button\n            type=\"button\"\n            onClick={() => setAttempt((value) => value + 1)}\n          >\n            Reload account\n          </button>\n        </div>\n      )}\n      {profile && (\n        <div>\n          <p>\n            {[profile.given_name, profile.family_name]\n              .filter(Boolean)\n              .join(\" \")}\n          </p>\n          <p>{profile.phone_masked}</p>\n        </div>\n      )}\n      <h3>Saved addresses</h3>\n      {!loading && addresses.length === 0 && (\n        <p>You have no saved addresses.</p>\n      )}\n      <ul>\n        {addresses.map((address) => (\n          <li key={address.id}>\n            <p>\n              {address.label && `${address.label}: `}\n              {address.line1}\n            </p>\n            <button\n              type=\"button\"\n              disabled={busy}\n              onClick={() => void remove(address.id)}\n              aria-label={`Remove ${address.line1}`}\n            >\n              Remove\n            </button>\n          </li>\n        ))}\n      </ul>\n      <form\n        onSubmit={(event) => {\n          event.preventDefault();\n          const form = event.currentTarget;\n          const data = new FormData(form);\n          const line1 = String(data.get(\"line1\") ?? \"\").trim();\n          if (!line1 || busy) {\n            return;\n          }\n          setBusy(true);\n          setError(\"\");\n          void customer\n            .addAddress({\n              line1,\n              label: \"other\",\n              instructions: String(data.get(\"instructions\") ?? \"\").trim(),\n            })\n            .then(\n              (address) => {\n                setAddresses((current) => [...current, address]);\n                form.reset();\n              },\n              () => setError(\"We could not save that address. Try again.\"),\n            )\n            .finally(() => setBusy(false));\n        }}\n      >\n        <label>\n          Street and address\n          <input name=\"line1\" autoComplete=\"street-address\" required />\n        </label>\n        <label>\n          Delivery instructions\n          <input name=\"instructions\" maxLength={200} />\n        </label>\n        <button type=\"submit\" disabled={busy || loading}>\n          {busy ? \"Saving…\" : \"Save address\"}\n        </button>\n      </form>\n    </div>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/account-page"}

package/dist/registry/v1/items/account-page@1.0.0.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"account-page","type":"block","version":"1.0.0","title":"Account page","description":"Show your profile and manage saved addresses.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":["sign-in-button"],"files":[{"path":"account-page.css","target":"components/zappie/account-page.css","sha256":"6bfc66e08b88126e9f59eeb4c58c872629efe7a5d7f31a15176e707ebc9ba8c7","content":".z-kit-account-page {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-account-page :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-account-page :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-account-page :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-account-page ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"account-page.tsx","target":"components/zappie/account-page.tsx","sha256":"844ed8a5fb5df3353120ab4fca0d7c0786ab55f76b2d5c604b0d39f1fe983511","content":"\"use client\";\n\nimport { SignInButton } from \"@/components/zappie/sign-in-button\";\nimport type {\n  CustomerClient,\n  CustomerProfile,\n  SavedAddress,\n} from \"@zappie/sdk/customer\";\nimport { useAuth } from \"@zappie/sdk/customer/react\";\nimport { useEffect, useState } from \"react\";\nimport \"./account-page.css\";\n\n/** Show your profile and let you save or remove delivery addresses. */\nexport function AccountPage({\n  customer,\n  ordersHref = \"/orders\",\n}: {\n  /** Use the same client as your CustomerProvider. */\n  customer: CustomerClient;\n  ordersHref?: string;\n}) {\n  const auth = useAuth();\n  return (\n    <section className=\"z-kit-account-page\" aria-label=\"Your account\">\n      <h2>Your account</h2>\n      {auth.state === \"unknown\" ? (\n        <p role=\"status\">Checking your session…</p>\n      ) : auth.customer ? (\n        <Account key={auth.customer.id} customer={customer} />\n      ) : (\n        <p>Sign in to see your profile and saved addresses.</p>\n      )}\n      <SignInButton />\n      <a href={ordersHref}>Your orders</a>\n    </section>\n  );\n}\n\nfunction Account({ customer }: { customer: CustomerClient }) {\n  const [profile, setProfile] = useState<CustomerProfile>();\n  const [addresses, setAddresses] = useState<SavedAddress[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [attempt, setAttempt] = useState(0);\n  const [error, setError] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  useEffect(() => {\n    let active = true;\n    setLoading(true);\n    setError(\"\");\n    void Promise.all([customer.profile(), customer.addresses()])\n      .then(\n        ([next, saved]) => {\n          if (active) {\n            setProfile(next);\n            setAddresses(saved);\n          }\n        },\n        () => {\n          if (active) {\n            setError(\"We could not load your account. Try again.\");\n          }\n        },\n      )\n      .finally(() => {\n        if (active) {\n          setLoading(false);\n        }\n      });\n    return () => {\n      active = false;\n    };\n  }, [customer, attempt]);\n  const remove = async (id: string) => {\n    setBusy(true);\n    setError(\"\");\n    try {\n      await customer.removeAddress(id);\n      setAddresses((current) => current.filter((address) => address.id !== id));\n    } catch {\n      setError(\"We could not remove that address. Try again.\");\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <div>\n      {loading && <p role=\"status\">Loading your account…</p>}\n      {error && (\n        <div role=\"alert\">\n          <p>{error}</p>\n          <button\n            type=\"button\"\n            onClick={() => setAttempt((value) => value + 1)}\n          >\n            Reload account\n          </button>\n        </div>\n      )}\n      {profile && (\n        <div>\n          <p>\n            {[profile.given_name, profile.family_name]\n              .filter(Boolean)\n              .join(\" \")}\n          </p>\n          <p>{profile.phone_masked}</p>\n        </div>\n      )}\n      <h3>Saved addresses</h3>\n      {!loading && addresses.length === 0 && (\n        <p>You have no saved addresses.</p>\n      )}\n      <ul>\n        {addresses.map((address) => (\n          <li key={address.id}>\n            <p>\n              {address.label && `${address.label}: `}\n              {address.line1}\n            </p>\n            <button\n              type=\"button\"\n              disabled={busy}\n              onClick={() => void remove(address.id)}\n              aria-label={`Remove ${address.line1}`}\n            >\n              Remove\n            </button>\n          </li>\n        ))}\n      </ul>\n      <form\n        onSubmit={(event) => {\n          event.preventDefault();\n          const form = event.currentTarget;\n          const data = new FormData(form);\n          const line1 = String(data.get(\"line1\") ?? \"\").trim();\n          if (!line1 || busy) {\n            return;\n          }\n          setBusy(true);\n          setError(\"\");\n          void customer\n            .addAddress({\n              line1,\n              label: \"other\",\n              instructions: String(data.get(\"instructions\") ?? \"\").trim(),\n            })\n            .then(\n              (address) => {\n                setAddresses((current) => [...current, address]);\n                form.reset();\n              },\n              () => setError(\"We could not save that address. Try again.\"),\n            )\n            .finally(() => setBusy(false));\n        }}\n      >\n        <label>\n          Street and address\n          <input name=\"line1\" autoComplete=\"street-address\" required />\n        </label>\n        <label>\n          Delivery instructions\n          <input name=\"instructions\" maxLength={200} />\n        </label>\n        <button type=\"submit\" disabled={busy || loading}>\n          {busy ? \"Saving…\" : \"Save address\"}\n        </button>\n      </form>\n    </div>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/account-page"}

package/dist/registry/v1/items/checkout-button.json

@@ -1 +1 @@
-{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-button","type":"component","version":"1.0.0","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution.","requires":{"@zappie/sdk":"^0.1.0","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"checkout-button.tsx","target":"components/zappie/checkout-button.tsx","sha256":"034bf092d4a1911b5dc3790f25f1b468004aadce772173abcaaab60518365669","content":"\"use client\";\n\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport { CheckoutError, isContactPhoneValid } from \"@zappie/sdk/checkout\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { currentSource } from \"@zappie/sdk/visits\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { createCheckoutAttempt } from \"./checkout-attempt\";\nimport \"./checkout-button.css\";\nimport { checkoutButtonState } from \"./checkout-state\";\n\nexport type CheckoutButtonProps = {\n  checkout: CheckoutClient;\n  branchId: string;\n  returnUrl?: string;\n  cancelUrl?: string;\n  contactPhone?: string;\n  attribution?: () => { source: string; campaign: string };\n  onSignIn?: () => void;\n  onContactPhoneRequired?: () => void;\n  redirect?: (url: string) => void;\n};\n\nexport function CheckoutButton({\n  checkout,\n  branchId,\n  returnUrl,\n  cancelUrl,\n  contactPhone = \"\",\n  attribution = currentSource,\n  onSignIn,\n  onContactPhoneRequired,\n  redirect = (url) => window.top?.location.assign(url),\n}: CheckoutButtonProps) {\n  const cart = useCart();\n  const attempt = useMemo(() => createCheckoutAttempt(), []);\n  const [busy, setBusy] = useState(false);\n  const [forced, setForced] = useState<\"sign_in\" | undefined>();\n  useEffect(() => {\n    if (\n      cart.isHydrated &&\n      cart.lines.length > 0 &&\n      cart.state.status === \"ready\"\n    ) {\n      void cart.actions.quote();\n    }\n  }, [cart.actions, cart.isHydrated, cart.lines.length, cart.state.status]);\n  const state = checkoutButtonState(\n    cart.state,\n    cart.fulfilment,\n    isContactPhoneValid(contactPhone),\n    busy,\n    forced,\n  );\n  const activate = async () => {\n    if (state.status === \"sign_in\") {\n      onSignIn?.();\n      return;\n    }\n    if (state.status === \"phone\") {\n      onContactPhoneRequired?.();\n      return;\n    }\n    if (state.status === \"retry\") {\n      await cart.actions.quote({ force: true });\n      return;\n    }\n    if (state.status !== \"pay\") {\n      return;\n    }\n    setBusy(true);\n    try {\n      const checkoutAttempt = attempt({\n        payload: cart.actions.toCheckoutPayload(),\n        branchId,\n        contactPhone,\n        returnUrl: returnUrl ?? `${location.origin}/checkout/return`,\n        ...((cancelUrl ?? location.href)\n          ? { cancelUrl: cancelUrl ?? location.href }\n          : {}),\n        attribution: attribution(),\n      });\n      const session = await checkout.open(\n        checkoutAttempt.request,\n        checkoutAttempt.key,\n      );\n      redirect(session.url);\n    } catch (failure) {\n      if (\n        failure instanceof CheckoutError &&\n        failure.apiCode === \"customer_required\"\n      ) {\n        setForced(\"sign_in\");\n        onSignIn?.();\n        return;\n      }\n      throw failure;\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <button\n      type=\"button\"\n      className=\"z-kit-checkout-button\"\n      data-state={state.status}\n      data-zappie-checkout=\"\"\n      disabled={!state.enabled}\n      onClick={() => void activate()}\n    >\n      {state.label}\n    </button>\n  );\n}\n"},{"path":"checkout-attempt.ts","target":"components/zappie/checkout-attempt.ts","sha256":"acf50ea6b4123a137bf4e415231b7a3a92f3a5f3e83a988e9dc6ecd511fec4a0","content":"import type { CartModule } from \"@zappie/sdk\";\nimport { checkoutFulfilment, type CheckoutRequest } from \"@zappie/sdk/checkout\";\n\ntype Payload = ReturnType<CartModule[\"toCheckoutPayload\"]>;\ntype Attribution = { source: string; campaign: string };\nexport type CheckoutAttempt = { key: string; request: CheckoutRequest };\n\nfunction fulfilment(payload: Payload) {\n  const value = checkoutFulfilment(payload.fulfilment);\n  if (value.type === \"pickup\") {\n    return {\n      type: \"pickup\" as const,\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  if (value.type === \"delivery\") {\n    return {\n      type: \"delivery\" as const,\n      ...(value.address !== undefined ? { address: value.address } : {}),\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  throw new Error(\"Dine-in checkout is unavailable\");\n}\n\nexport function createCheckoutAttempt() {\n  let current: { digest: string; attempt: CheckoutAttempt } | undefined;\n  return ({\n    payload,\n    branchId,\n    contactPhone,\n    returnUrl,\n    cancelUrl,\n    attribution,\n  }: {\n    payload: Payload;\n    branchId: string;\n    contactPhone: string;\n    returnUrl: string;\n    cancelUrl?: string;\n    attribution: Attribution;\n  }) => {\n    const normalizedPhone = contactPhone.trim().replace(/\\s+/g, \"\");\n    const digest = JSON.stringify({ payload, contactPhone: normalizedPhone });\n    if (current?.digest === digest) {\n      return current.attempt;\n    }\n    const request: CheckoutRequest = {\n      branch_id: branchId,\n      menu_version: payload.menu_version,\n      lines: payload.lines,\n      fulfilment: fulfilment(payload),\n      ...(normalizedPhone ? { contact_phone: normalizedPhone } : {}),\n      ...(payload.promo_code ? { promo_code: payload.promo_code } : {}),\n      ...(attribution.source ? { source: attribution.source } : {}),\n      ...(attribution.campaign ? { campaign: attribution.campaign } : {}),\n      return_url: returnUrl,\n      ...(cancelUrl ? { cancel_url: cancelUrl } : {}),\n    };\n    current = { digest, attempt: { key: crypto.randomUUID(), request } };\n    return current.attempt;\n  };\n}\n"},{"path":"checkout-state.ts","target":"components/zappie/checkout-state.ts","sha256":"e8e2dc8f88d513c124d44516e3d18012d4fd7e2c069e31454d4426dd6c2d4e43","content":"import type { CartFulfilment, CartState } from \"@zappie/sdk\";\nimport {\n  payReadiness,\n  type PayReadiness,\n  type PayReadinessQuoteState,\n} from \"@zappie/sdk/checkout\";\n\nexport type CheckoutButtonStatus = PayReadiness | \"busy\";\nconst labels: Record<CheckoutButtonStatus, string> = {\n  address: \"Add a delivery address\",\n  quoting: \"Updating total…\",\n  retry: \"Update totals to continue\",\n  choose_area: \"Choose a delivery area\",\n  fix_issues: \"Review your cart\",\n  sign_in: \"Sign in to continue\",\n  phone: \"Check your phone number\",\n  pay: \"Continue to payment\",\n  busy: \"Please wait…\",\n};\n\nfunction quoteState(state: CartState): PayReadinessQuoteState {\n  if (state.status === \"quoting\") {\n    return { status: \"loading\" };\n  }\n  if (state.status === \"quoted\") {\n    return { status: \"ready\", quote: state.quote };\n  }\n  if (state.status === \"needs_attention\") {\n    return state.quote\n      ? { status: \"ready\", quote: state.quote }\n      : { status: \"error\" };\n  }\n  return { status: \"idle\" };\n}\n\nexport function checkoutButtonState(\n  state: CartState,\n  fulfilment: CartFulfilment | null,\n  contactPhoneValid: boolean,\n  busy: boolean,\n  forced?: \"sign_in\",\n) {\n  let status: CheckoutButtonStatus;\n  if (busy) {\n    status = \"busy\";\n  } else if (forced) {\n    status = forced;\n  } else {\n    const addressValid =\n      fulfilment?.type !== \"delivery\" ||\n      Boolean(\n        fulfilment.address.line1 ||\n        fulfilment.address.placeId ||\n        fulfilment.address.coordinates,\n      );\n    status = payReadiness(quoteState(state), contactPhoneValid, addressValid);\n    if (status === \"pay\" && state.status === \"needs_attention\") {\n      status = \"fix_issues\";\n    }\n  }\n  return {\n    status,\n    label: labels[status],\n    enabled:\n      status === \"pay\" ||\n      status === \"sign_in\" ||\n      status === \"phone\" ||\n      status === \"retry\",\n  };\n}\n"},{"path":"checkout-button.css","target":"components/zappie/checkout-button.css","sha256":"9e6bb8afe1bb1e5cd55ed458e435d90b4b3d546fb4276d3fd9432d022844ca22","content":".z-kit-checkout-button {\n  width: 100%;\n  border: 0;\n  border-radius: var(--z-radius-md);\n  padding: var(--z-space-3) var(--z-space-5);\n  background: var(--z-accent);\n  color: var(--z-accent-contrast);\n  font-family: var(--z-font-body);\n  font-size: var(--z-text-md);\n  cursor: pointer;\n}\n\n.z-kit-checkout-button:disabled {\n  background: var(--z-border);\n  color: var(--z-text-muted);\n  cursor: not-allowed;\n}\n\n.z-kit-checkout-button:focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n"}],"tokens":["--z-space-3","--z-space-5","--z-border","--z-radius-md","--z-accent","--z-accent-contrast","--z-text-muted","--z-focus-ring","--z-font-body","--z-text-md"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-button"}
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-button","type":"component","version":"1.0.1","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution.","requires":{"@zappie/sdk":"^0.1.0","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"checkout-button.tsx","target":"components/zappie/checkout-button.tsx","sha256":"95c20fe2f322ba5039adcd883d4db81eb64fe6f75d5569baea3f3c5223e57b6a","content":"\"use client\";\n\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport { CheckoutError, isContactPhoneValid } from \"@zappie/sdk/checkout\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { currentSource } from \"@zappie/sdk/visits\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { createCheckoutAttempt } from \"./checkout-attempt\";\nimport \"./checkout-button.css\";\nimport { checkoutButtonState } from \"./checkout-state\";\n\nexport type CheckoutButtonProps = {\n  checkout: CheckoutClient;\n  branchId: string;\n  returnUrl?: string;\n  cancelUrl?: string;\n  contactPhone?: string;\n  attribution?: () => { source: string; campaign: string };\n  onSignIn?: () => void;\n  /** Show a recoverable error when opening payment fails. */\n  onError?: (failure: unknown) => void;\n  onContactPhoneRequired?: () => void;\n  redirect?: (url: string) => void;\n};\n\nexport function CheckoutButton({\n  checkout,\n  branchId,\n  returnUrl,\n  cancelUrl,\n  contactPhone = \"\",\n  attribution = currentSource,\n  onSignIn,\n  onError,\n  onContactPhoneRequired,\n  redirect = (url) => window.top?.location.assign(url),\n}: CheckoutButtonProps) {\n  const cart = useCart();\n  const attempt = useMemo(() => createCheckoutAttempt(), []);\n  const [busy, setBusy] = useState(false);\n  const quoted = useRef(\"\");\n  const quoteKey = JSON.stringify([\n    cart.lines,\n    cart.fulfilment,\n    cart.promoCode,\n  ]);\n  const [forced, setForced] = useState<\"sign_in\" | undefined>();\n  useEffect(() => {\n    if (\n      cart.isHydrated &&\n      cart.lines.length > 0 &&\n      cart.state.status === \"ready\" &&\n      quoted.current !== quoteKey\n    ) {\n      quoted.current = quoteKey;\n      void cart.actions.quote().catch((failure: unknown) => onError?.(failure));\n    }\n  }, [\n    cart.actions,\n    cart.isHydrated,\n    cart.lines.length,\n    cart.state.status,\n    quoteKey,\n    onError,\n  ]);\n  const state = checkoutButtonState(\n    cart.state,\n    cart.fulfilment,\n    isContactPhoneValid(contactPhone),\n    busy,\n    forced,\n  );\n  const activate = async () => {\n    if (state.status === \"sign_in\") {\n      onSignIn?.();\n      return;\n    }\n    if (state.status === \"phone\") {\n      onContactPhoneRequired?.();\n      return;\n    }\n    if (state.status === \"retry\") {\n      try {\n        await cart.actions.quote({ force: true });\n      } catch (failure) {\n        onError?.(failure);\n      }\n      return;\n    }\n    if (state.status !== \"pay\") {\n      return;\n    }\n    setBusy(true);\n    try {\n      const checkoutAttempt = attempt({\n        payload: cart.actions.toCheckoutPayload(),\n        branchId,\n        contactPhone,\n        returnUrl: returnUrl ?? `${location.origin}/checkout/return`,\n        ...((cancelUrl ?? location.href)\n          ? { cancelUrl: cancelUrl ?? location.href }\n          : {}),\n        attribution: attribution(),\n      });\n      const session = await checkout.open(\n        checkoutAttempt.request,\n        checkoutAttempt.key,\n      );\n      redirect(session.url);\n    } catch (failure) {\n      if (\n        failure instanceof CheckoutError &&\n        failure.apiCode === \"customer_required\"\n      ) {\n        setForced(\"sign_in\");\n        onSignIn?.();\n        return;\n      }\n      if (onError) {\n        onError(failure);\n        return;\n      }\n      throw failure;\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <button\n      type=\"button\"\n      className=\"z-kit-checkout-button\"\n      data-state={state.status}\n      data-zappie-checkout=\"\"\n      disabled={!state.enabled}\n      onClick={() => void activate()}\n    >\n      {state.label}\n    </button>\n  );\n}\n"},{"path":"checkout-attempt.ts","target":"components/zappie/checkout-attempt.ts","sha256":"acf50ea6b4123a137bf4e415231b7a3a92f3a5f3e83a988e9dc6ecd511fec4a0","content":"import type { CartModule } from \"@zappie/sdk\";\nimport { checkoutFulfilment, type CheckoutRequest } from \"@zappie/sdk/checkout\";\n\ntype Payload = ReturnType<CartModule[\"toCheckoutPayload\"]>;\ntype Attribution = { source: string; campaign: string };\nexport type CheckoutAttempt = { key: string; request: CheckoutRequest };\n\nfunction fulfilment(payload: Payload) {\n  const value = checkoutFulfilment(payload.fulfilment);\n  if (value.type === \"pickup\") {\n    return {\n      type: \"pickup\" as const,\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  if (value.type === \"delivery\") {\n    return {\n      type: \"delivery\" as const,\n      ...(value.address !== undefined ? { address: value.address } : {}),\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  throw new Error(\"Dine-in checkout is unavailable\");\n}\n\nexport function createCheckoutAttempt() {\n  let current: { digest: string; attempt: CheckoutAttempt } | undefined;\n  return ({\n    payload,\n    branchId,\n    contactPhone,\n    returnUrl,\n    cancelUrl,\n    attribution,\n  }: {\n    payload: Payload;\n    branchId: string;\n    contactPhone: string;\n    returnUrl: string;\n    cancelUrl?: string;\n    attribution: Attribution;\n  }) => {\n    const normalizedPhone = contactPhone.trim().replace(/\\s+/g, \"\");\n    const digest = JSON.stringify({ payload, contactPhone: normalizedPhone });\n    if (current?.digest === digest) {\n      return current.attempt;\n    }\n    const request: CheckoutRequest = {\n      branch_id: branchId,\n      menu_version: payload.menu_version,\n      lines: payload.lines,\n      fulfilment: fulfilment(payload),\n      ...(normalizedPhone ? { contact_phone: normalizedPhone } : {}),\n      ...(payload.promo_code ? { promo_code: payload.promo_code } : {}),\n      ...(attribution.source ? { source: attribution.source } : {}),\n      ...(attribution.campaign ? { campaign: attribution.campaign } : {}),\n      return_url: returnUrl,\n      ...(cancelUrl ? { cancel_url: cancelUrl } : {}),\n    };\n    current = { digest, attempt: { key: crypto.randomUUID(), request } };\n    return current.attempt;\n  };\n}\n"},{"path":"checkout-state.ts","target":"components/zappie/checkout-state.ts","sha256":"e8e2dc8f88d513c124d44516e3d18012d4fd7e2c069e31454d4426dd6c2d4e43","content":"import type { CartFulfilment, CartState } from \"@zappie/sdk\";\nimport {\n  payReadiness,\n  type PayReadiness,\n  type PayReadinessQuoteState,\n} from \"@zappie/sdk/checkout\";\n\nexport type CheckoutButtonStatus = PayReadiness | \"busy\";\nconst labels: Record<CheckoutButtonStatus, string> = {\n  address: \"Add a delivery address\",\n  quoting: \"Updating total…\",\n  retry: \"Update totals to continue\",\n  choose_area: \"Choose a delivery area\",\n  fix_issues: \"Review your cart\",\n  sign_in: \"Sign in to continue\",\n  phone: \"Check your phone number\",\n  pay: \"Continue to payment\",\n  busy: \"Please wait…\",\n};\n\nfunction quoteState(state: CartState): PayReadinessQuoteState {\n  if (state.status === \"quoting\") {\n    return { status: \"loading\" };\n  }\n  if (state.status === \"quoted\") {\n    return { status: \"ready\", quote: state.quote };\n  }\n  if (state.status === \"needs_attention\") {\n    return state.quote\n      ? { status: \"ready\", quote: state.quote }\n      : { status: \"error\" };\n  }\n  return { status: \"idle\" };\n}\n\nexport function checkoutButtonState(\n  state: CartState,\n  fulfilment: CartFulfilment | null,\n  contactPhoneValid: boolean,\n  busy: boolean,\n  forced?: \"sign_in\",\n) {\n  let status: CheckoutButtonStatus;\n  if (busy) {\n    status = \"busy\";\n  } else if (forced) {\n    status = forced;\n  } else {\n    const addressValid =\n      fulfilment?.type !== \"delivery\" ||\n      Boolean(\n        fulfilment.address.line1 ||\n        fulfilment.address.placeId ||\n        fulfilment.address.coordinates,\n      );\n    status = payReadiness(quoteState(state), contactPhoneValid, addressValid);\n    if (status === \"pay\" && state.status === \"needs_attention\") {\n      status = \"fix_issues\";\n    }\n  }\n  return {\n    status,\n    label: labels[status],\n    enabled:\n      status === \"pay\" ||\n      status === \"sign_in\" ||\n      status === \"phone\" ||\n      status === \"retry\",\n  };\n}\n"},{"path":"checkout-button.css","target":"components/zappie/checkout-button.css","sha256":"9e6bb8afe1bb1e5cd55ed458e435d90b4b3d546fb4276d3fd9432d022844ca22","content":".z-kit-checkout-button {\n  width: 100%;\n  border: 0;\n  border-radius: var(--z-radius-md);\n  padding: var(--z-space-3) var(--z-space-5);\n  background: var(--z-accent);\n  color: var(--z-accent-contrast);\n  font-family: var(--z-font-body);\n  font-size: var(--z-text-md);\n  cursor: pointer;\n}\n\n.z-kit-checkout-button:disabled {\n  background: var(--z-border);\n  color: var(--z-text-muted);\n  cursor: not-allowed;\n}\n\n.z-kit-checkout-button:focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n"}],"tokens":["--z-space-3","--z-space-5","--z-border","--z-radius-md","--z-accent","--z-accent-contrast","--z-text-muted","--z-focus-ring","--z-font-body","--z-text-md"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-button"}

package/dist/registry/v1/items/checkout-button@1.0.1.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-button","type":"component","version":"1.0.1","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution.","requires":{"@zappie/sdk":"^0.1.0","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"checkout-button.tsx","target":"components/zappie/checkout-button.tsx","sha256":"95c20fe2f322ba5039adcd883d4db81eb64fe6f75d5569baea3f3c5223e57b6a","content":"\"use client\";\n\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport { CheckoutError, isContactPhoneValid } from \"@zappie/sdk/checkout\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { currentSource } from \"@zappie/sdk/visits\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { createCheckoutAttempt } from \"./checkout-attempt\";\nimport \"./checkout-button.css\";\nimport { checkoutButtonState } from \"./checkout-state\";\n\nexport type CheckoutButtonProps = {\n  checkout: CheckoutClient;\n  branchId: string;\n  returnUrl?: string;\n  cancelUrl?: string;\n  contactPhone?: string;\n  attribution?: () => { source: string; campaign: string };\n  onSignIn?: () => void;\n  /** Show a recoverable error when opening payment fails. */\n  onError?: (failure: unknown) => void;\n  onContactPhoneRequired?: () => void;\n  redirect?: (url: string) => void;\n};\n\nexport function CheckoutButton({\n  checkout,\n  branchId,\n  returnUrl,\n  cancelUrl,\n  contactPhone = \"\",\n  attribution = currentSource,\n  onSignIn,\n  onError,\n  onContactPhoneRequired,\n  redirect = (url) => window.top?.location.assign(url),\n}: CheckoutButtonProps) {\n  const cart = useCart();\n  const attempt = useMemo(() => createCheckoutAttempt(), []);\n  const [busy, setBusy] = useState(false);\n  const quoted = useRef(\"\");\n  const quoteKey = JSON.stringify([\n    cart.lines,\n    cart.fulfilment,\n    cart.promoCode,\n  ]);\n  const [forced, setForced] = useState<\"sign_in\" | undefined>();\n  useEffect(() => {\n    if (\n      cart.isHydrated &&\n      cart.lines.length > 0 &&\n      cart.state.status === \"ready\" &&\n      quoted.current !== quoteKey\n    ) {\n      quoted.current = quoteKey;\n      void cart.actions.quote().catch((failure: unknown) => onError?.(failure));\n    }\n  }, [\n    cart.actions,\n    cart.isHydrated,\n    cart.lines.length,\n    cart.state.status,\n    quoteKey,\n    onError,\n  ]);\n  const state = checkoutButtonState(\n    cart.state,\n    cart.fulfilment,\n    isContactPhoneValid(contactPhone),\n    busy,\n    forced,\n  );\n  const activate = async () => {\n    if (state.status === \"sign_in\") {\n      onSignIn?.();\n      return;\n    }\n    if (state.status === \"phone\") {\n      onContactPhoneRequired?.();\n      return;\n    }\n    if (state.status === \"retry\") {\n      try {\n        await cart.actions.quote({ force: true });\n      } catch (failure) {\n        onError?.(failure);\n      }\n      return;\n    }\n    if (state.status !== \"pay\") {\n      return;\n    }\n    setBusy(true);\n    try {\n      const checkoutAttempt = attempt({\n        payload: cart.actions.toCheckoutPayload(),\n        branchId,\n        contactPhone,\n        returnUrl: returnUrl ?? `${location.origin}/checkout/return`,\n        ...((cancelUrl ?? location.href)\n          ? { cancelUrl: cancelUrl ?? location.href }\n          : {}),\n        attribution: attribution(),\n      });\n      const session = await checkout.open(\n        checkoutAttempt.request,\n        checkoutAttempt.key,\n      );\n      redirect(session.url);\n    } catch (failure) {\n      if (\n        failure instanceof CheckoutError &&\n        failure.apiCode === \"customer_required\"\n      ) {\n        setForced(\"sign_in\");\n        onSignIn?.();\n        return;\n      }\n      if (onError) {\n        onError(failure);\n        return;\n      }\n      throw failure;\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <button\n      type=\"button\"\n      className=\"z-kit-checkout-button\"\n      data-state={state.status}\n      data-zappie-checkout=\"\"\n      disabled={!state.enabled}\n      onClick={() => void activate()}\n    >\n      {state.label}\n    </button>\n  );\n}\n"},{"path":"checkout-attempt.ts","target":"components/zappie/checkout-attempt.ts","sha256":"acf50ea6b4123a137bf4e415231b7a3a92f3a5f3e83a988e9dc6ecd511fec4a0","content":"import type { CartModule } from \"@zappie/sdk\";\nimport { checkoutFulfilment, type CheckoutRequest } from \"@zappie/sdk/checkout\";\n\ntype Payload = ReturnType<CartModule[\"toCheckoutPayload\"]>;\ntype Attribution = { source: string; campaign: string };\nexport type CheckoutAttempt = { key: string; request: CheckoutRequest };\n\nfunction fulfilment(payload: Payload) {\n  const value = checkoutFulfilment(payload.fulfilment);\n  if (value.type === \"pickup\") {\n    return {\n      type: \"pickup\" as const,\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  if (value.type === \"delivery\") {\n    return {\n      type: \"delivery\" as const,\n      ...(value.address !== undefined ? { address: value.address } : {}),\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  throw new Error(\"Dine-in checkout is unavailable\");\n}\n\nexport function createCheckoutAttempt() {\n  let current: { digest: string; attempt: CheckoutAttempt } | undefined;\n  return ({\n    payload,\n    branchId,\n    contactPhone,\n    returnUrl,\n    cancelUrl,\n    attribution,\n  }: {\n    payload: Payload;\n    branchId: string;\n    contactPhone: string;\n    returnUrl: string;\n    cancelUrl?: string;\n    attribution: Attribution;\n  }) => {\n    const normalizedPhone = contactPhone.trim().replace(/\\s+/g, \"\");\n    const digest = JSON.stringify({ payload, contactPhone: normalizedPhone });\n    if (current?.digest === digest) {\n      return current.attempt;\n    }\n    const request: CheckoutRequest = {\n      branch_id: branchId,\n      menu_version: payload.menu_version,\n      lines: payload.lines,\n      fulfilment: fulfilment(payload),\n      ...(normalizedPhone ? { contact_phone: normalizedPhone } : {}),\n      ...(payload.promo_code ? { promo_code: payload.promo_code } : {}),\n      ...(attribution.source ? { source: attribution.source } : {}),\n      ...(attribution.campaign ? { campaign: attribution.campaign } : {}),\n      return_url: returnUrl,\n      ...(cancelUrl ? { cancel_url: cancelUrl } : {}),\n    };\n    current = { digest, attempt: { key: crypto.randomUUID(), request } };\n    return current.attempt;\n  };\n}\n"},{"path":"checkout-state.ts","target":"components/zappie/checkout-state.ts","sha256":"e8e2dc8f88d513c124d44516e3d18012d4fd7e2c069e31454d4426dd6c2d4e43","content":"import type { CartFulfilment, CartState } from \"@zappie/sdk\";\nimport {\n  payReadiness,\n  type PayReadiness,\n  type PayReadinessQuoteState,\n} from \"@zappie/sdk/checkout\";\n\nexport type CheckoutButtonStatus = PayReadiness | \"busy\";\nconst labels: Record<CheckoutButtonStatus, string> = {\n  address: \"Add a delivery address\",\n  quoting: \"Updating total…\",\n  retry: \"Update totals to continue\",\n  choose_area: \"Choose a delivery area\",\n  fix_issues: \"Review your cart\",\n  sign_in: \"Sign in to continue\",\n  phone: \"Check your phone number\",\n  pay: \"Continue to payment\",\n  busy: \"Please wait…\",\n};\n\nfunction quoteState(state: CartState): PayReadinessQuoteState {\n  if (state.status === \"quoting\") {\n    return { status: \"loading\" };\n  }\n  if (state.status === \"quoted\") {\n    return { status: \"ready\", quote: state.quote };\n  }\n  if (state.status === \"needs_attention\") {\n    return state.quote\n      ? { status: \"ready\", quote: state.quote }\n      : { status: \"error\" };\n  }\n  return { status: \"idle\" };\n}\n\nexport function checkoutButtonState(\n  state: CartState,\n  fulfilment: CartFulfilment | null,\n  contactPhoneValid: boolean,\n  busy: boolean,\n  forced?: \"sign_in\",\n) {\n  let status: CheckoutButtonStatus;\n  if (busy) {\n    status = \"busy\";\n  } else if (forced) {\n    status = forced;\n  } else {\n    const addressValid =\n      fulfilment?.type !== \"delivery\" ||\n      Boolean(\n        fulfilment.address.line1 ||\n        fulfilment.address.placeId ||\n        fulfilment.address.coordinates,\n      );\n    status = payReadiness(quoteState(state), contactPhoneValid, addressValid);\n    if (status === \"pay\" && state.status === \"needs_attention\") {\n      status = \"fix_issues\";\n    }\n  }\n  return {\n    status,\n    label: labels[status],\n    enabled:\n      status === \"pay\" ||\n      status === \"sign_in\" ||\n      status === \"phone\" ||\n      status === \"retry\",\n  };\n}\n"},{"path":"checkout-button.css","target":"components/zappie/checkout-button.css","sha256":"9e6bb8afe1bb1e5cd55ed458e435d90b4b3d546fb4276d3fd9432d022844ca22","content":".z-kit-checkout-button {\n  width: 100%;\n  border: 0;\n  border-radius: var(--z-radius-md);\n  padding: var(--z-space-3) var(--z-space-5);\n  background: var(--z-accent);\n  color: var(--z-accent-contrast);\n  font-family: var(--z-font-body);\n  font-size: var(--z-text-md);\n  cursor: pointer;\n}\n\n.z-kit-checkout-button:disabled {\n  background: var(--z-border);\n  color: var(--z-text-muted);\n  cursor: not-allowed;\n}\n\n.z-kit-checkout-button:focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n"}],"tokens":["--z-space-3","--z-space-5","--z-border","--z-radius-md","--z-accent","--z-accent-contrast","--z-text-muted","--z-focus-ring","--z-font-body","--z-text-md"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-button"}

package/dist/registry/v1/items/checkout-page.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-page","type":"block","version":"1.0.0","title":"Checkout page","description":"Collect contact and delivery details, resolve cart issues and continue to payment.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":["address-picker","fulfilment-switch","schedule-picker","checkout-button","cart-line","money"],"files":[{"path":"checkout-page.css","target":"components/zappie/checkout-page.css","sha256":"445916aa2a1f93ca05d843fac73e28659072055ab2541ae53a70ffd773a1db03","content":".z-kit-checkout-page {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-checkout-page :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-checkout-page :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-checkout-page :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-checkout-page ul {\n  list-style: none;\n  padding: 0;\n}\n.z-kit-checkout-page dl > div {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--z-space-3);\n}\n.z-kit-checkout-page dd {\n  margin: 0;\n}\n"},{"path":"checkout-page.tsx","target":"components/zappie/checkout-page.tsx","sha256":"c6073493b5b4bf8e07bea5faabd5f4e12cf6c9f70b744af0da7a957db89e0390","content":"\"use client\";\n\nimport { AddressPicker } from \"@/components/zappie/address-picker\";\nimport { CartLine } from \"@/components/zappie/cart-line\";\nimport { CheckoutButton } from \"@/components/zappie/checkout-button\";\nimport { FulfilmentSwitch } from \"@/components/zappie/fulfilment-switch\";\nimport { Money } from \"@/components/zappie/money\";\nimport { SchedulePicker } from \"@/components/zappie/schedule-picker\";\nimport { Cart } from \"@zappie/foundations\";\nimport type { Branch, CartFix, CartIssue } from \"@zappie/sdk\";\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport type { PlacesClient } from \"@zappie/sdk/places\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { useId, useRef, useState } from \"react\";\nimport \"./checkout-page.css\";\n\nconst labels: Record<CartFix[\"action\"], string> = {\n  remove_line: \"Remove item\",\n  accept_price: \"Accept new price\",\n  remove_promo: \"Remove promo\",\n  set_quantity: \"Update quantity\",\n  change_address: \"Change address\",\n  choose_region: \"Choose delivery area\",\n  schedule: \"Choose a time\",\n  switch_fulfilment: \"Change fulfilment\",\n  choose_option: \"Choose an option\",\n  choose_other_option: \"Change an option\",\n};\n\n/** Collect checkout details and send the current cart to hosted payment. */\nexport function CheckoutPage({\n  branch,\n  checkout,\n  places,\n  onSignIn,\n  onEditItem,\n  returnUrl,\n  cancelUrl,\n  shopHref = \"/\",\n}: {\n  branch: Branch;\n  checkout: CheckoutClient;\n  places: PlacesClient;\n  onSignIn: () => void;\n  /** Open your item editor for an option fix, keeping the line's current selections. */\n  onEditItem: (lineId: string, groupId: string) => void;\n  returnUrl?: string;\n  cancelUrl?: string;\n  shopHref?: string;\n}) {\n  const cart = useCart();\n  const [phone, setPhone] = useState(\"\");\n  const [deliveryRequested, requestDelivery] = useState(false);\n  const [error, setError] = useState(\"\");\n  const phoneField = useRef<HTMLInputElement>(null);\n  const addressSection = useRef<HTMLDivElement>(null);\n  const regionField = useRef<HTMLSelectElement>(null);\n  const scheduleSection = useRef<HTMLDetailsElement>(null);\n  const fulfilmentSection = useRef<HTMLDivElement>(null);\n  const regionId = useId();\n  const fulfilment = cart.fulfilment;\n  const address =\n    fulfilment?.type === \"delivery\" ? fulfilment.address : undefined;\n  const quote = \"quote\" in cart.state ? cart.state.quote : undefined;\n  const fix = (issue: CartIssue, action: CartFix) => {\n    setError(\"\");\n    try {\n      switch (action.action) {\n        case \"choose_region\":\n          if (regionField.current) {\n            regionField.current.focus();\n          } else {\n            setError(\n              \"Delivery areas could not load. Try pickup or contact the store.\",\n            );\n          }\n          return;\n        case \"change_address\":\n          requestDelivery(true);\n          addressSection.current?.focus();\n          return;\n        case \"schedule\":\n          if (scheduleSection.current) {\n            scheduleSection.current.open = true;\n            scheduleSection.current.focus();\n          }\n          return;\n        case \"switch_fulfilment\":\n          fulfilmentSection.current?.focus();\n          return;\n        case \"choose_option\":\n        case \"choose_other_option\":\n          if (issue.lineId) {\n            onEditItem(issue.lineId, action.groupId);\n          }\n          return;\n        default:\n          cart.actions.applyFix(issue, action);\n      }\n    } catch {\n      setError(\"We could not apply that change. Try again.\");\n    }\n  };\n  if (!cart.isHydrated) {\n    return <p role=\"status\">Loading your cart…</p>;\n  }\n  if (cart.lines.length === 0) {\n    return (\n      <section className=\"z-kit-checkout-page\">\n        <h2>Your cart is empty</h2>\n        <a href={shopHref}>Keep shopping</a>\n      </section>\n    );\n  }\n  return (\n    <section className=\"z-kit-checkout-page\" aria-label=\"Checkout\">\n      <h2>Checkout</h2>\n      <label>\n        Contact phone\n        <input\n          ref={phoneField}\n          type=\"tel\"\n          autoComplete=\"tel\"\n          value={phone}\n          onChange={(event) => setPhone(event.target.value)}\n        />\n      </label>\n      <div ref={fulfilmentSection} tabIndex={-1} aria-label=\"Choose fulfilment\">\n        <FulfilmentSwitch\n          branchId={branch.id}\n          {...(address ? { deliveryAddress: address } : {})}\n          deliveryRequested={deliveryRequested}\n          onDeliveryRequest={() => requestDelivery(true)}\n          onChange={() => requestDelivery(false)}\n        />\n      </div>\n      {(fulfilment?.type === \"delivery\" || deliveryRequested) && (\n        <div ref={addressSection} tabIndex={-1} aria-label=\"Choose address\">\n          {address && <p>{address.line1}</p>}\n          <AddressPicker\n            places={places}\n            branchId={branch.id}\n            onChange={(next) => {\n              cart.actions.setFulfilment({\n                type: \"delivery\",\n                branchId: branch.id,\n                address: next,\n              });\n              requestDelivery(false);\n            }}\n          />\n          {fulfilment?.type === \"delivery\" && (\n            <>\n              {(branch.deliveryRegions?.length ?? 0) > 0 && (\n                <label htmlFor={regionId}>\n                  Delivery area\n                  <select\n                    id={regionId}\n                    ref={regionField}\n                    value={fulfilment.deliveryRegionId ?? \"\"}\n                    onChange={(event) => {\n                      const { deliveryRegionId: _old, ...rest } = fulfilment;\n                      cart.actions.setFulfilment(\n                        event.target.value\n                          ? { ...rest, deliveryRegionId: event.target.value }\n                          : rest,\n                      );\n                    }}\n                  >\n                    <option value=\"\">Choose an area</option>\n                    {branch.deliveryRegions?.map((region) => (\n                      <option key={region.id} value={region.id}>\n                        {region.name}\n                      </option>\n                    ))}\n                  </select>\n                </label>\n              )}\n              <label>\n                Delivery instructions\n                <input\n                  maxLength={200}\n                  value={address?.instructions ?? \"\"}\n                  onChange={(event) =>\n                    cart.actions.setFulfilment({\n                      ...fulfilment,\n                      address: {\n                        ...fulfilment.address,\n                        instructions: event.target.value,\n                      },\n                    })\n                  }\n                />\n              </label>\n            </>\n          )}\n        </div>\n      )}\n      <details\n        ref={scheduleSection}\n        tabIndex={-1}\n        aria-label=\"Choose order time\"\n      >\n        <summary>\n          Order time:{\" \"}\n          {fulfilment &&\n          fulfilment.type !== \"dine_in\" &&\n          fulfilment.scheduledFor\n            ? fulfilment.scheduledFor\n            : \"As soon as possible\"}\n        </summary>\n        <SchedulePicker branch={branch} />\n      </details>\n      <h3>Your order</h3>\n      <Cart.Root>\n        {cart.lines.map((line) => (\n          <CartLine key={line.id} line={line} />\n        ))}\n      </Cart.Root>\n      <form\n        onSubmit={(event) => {\n          event.preventDefault();\n          cart.actions.setPromoCode(\n            String(\n              new FormData(event.currentTarget).get(\"promo\") ?? \"\",\n            ).trim() || null,\n          );\n        }}\n      >\n        <label>\n          Promo code\n          <input name=\"promo\" defaultValue={cart.promoCode ?? \"\"} />\n        </label>\n        <button type=\"submit\">Apply promo</button>\n      </form>\n      <div aria-live=\"polite\">\n        {cart.issues.map((issue, index) => (\n          <div key={`${issue.code}:${index}`} data-zappie-issue={issue.code}>\n            <p>{issue.message}</p>\n            {issue.fixes.map((action, index) => (\n              <button\n                key={index}\n                type=\"button\"\n                data-zappie-issue-fix=\"\"\n                onClick={() => fix(issue, action)}\n              >\n                {labels[action.action]}\n              </button>\n            ))}\n          </div>\n        ))}\n      </div>\n      {error && <p role=\"alert\">{error}</p>}\n      {cart.state.status === \"quoting\" && (\n        <p role=\"status\">Updating your total…</p>\n      )}\n      {quote && (\n        <dl>\n          <div>\n            <dt>Subtotal</dt>\n            <dd>\n              <Money value={quote.subtotal} />\n            </dd>\n          </div>\n          {quote.delivery && (\n            <div>\n              <dt>Delivery</dt>\n              <dd>\n                <Money value={quote.delivery} />\n              </dd>\n            </div>\n          )}\n          {quote.fees.map((fee, index) => (\n            <div key={index}>\n              <dt>{fee.label}</dt>\n              <dd>\n                <Money value={fee.amount} />\n              </dd>\n            </div>\n          ))}\n          {quote.discounts.map((discount, index) => (\n            <div key={index}>\n              <dt>{discount.label}</dt>\n              <dd>\n                <Money value={discount.amount} />\n              </dd>\n            </div>\n          ))}\n          <div data-zappie-total=\"\">\n            <dt>Total</dt>\n            <dd>\n              <Money value={quote.total} />\n            </dd>\n          </div>\n        </dl>\n      )}\n      <p>Choose your payment method on the payment page.</p>\n      {fulfilment ? (\n        <CheckoutButton\n          checkout={checkout}\n          branchId={branch.id}\n          contactPhone={phone}\n          onSignIn={onSignIn}\n          onError={() => setError(\"Checkout could not update. Try again.\")}\n          onContactPhoneRequired={() => phoneField.current?.focus()}\n          {...(returnUrl ? { returnUrl } : {})}\n          {...(cancelUrl ? { cancelUrl } : {})}\n        />\n      ) : (\n        <p>Choose pickup or delivery to continue.</p>\n      )}\n    </section>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-page"}

package/dist/registry/v1/items/checkout-page@1.0.0.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-page","type":"block","version":"1.0.0","title":"Checkout page","description":"Collect contact and delivery details, resolve cart issues and continue to payment.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":["address-picker","fulfilment-switch","schedule-picker","checkout-button","cart-line","money"],"files":[{"path":"checkout-page.css","target":"components/zappie/checkout-page.css","sha256":"445916aa2a1f93ca05d843fac73e28659072055ab2541ae53a70ffd773a1db03","content":".z-kit-checkout-page {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-checkout-page :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-checkout-page :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-checkout-page :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-checkout-page ul {\n  list-style: none;\n  padding: 0;\n}\n.z-kit-checkout-page dl > div {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--z-space-3);\n}\n.z-kit-checkout-page dd {\n  margin: 0;\n}\n"},{"path":"checkout-page.tsx","target":"components/zappie/checkout-page.tsx","sha256":"c6073493b5b4bf8e07bea5faabd5f4e12cf6c9f70b744af0da7a957db89e0390","content":"\"use client\";\n\nimport { AddressPicker } from \"@/components/zappie/address-picker\";\nimport { CartLine } from \"@/components/zappie/cart-line\";\nimport { CheckoutButton } from \"@/components/zappie/checkout-button\";\nimport { FulfilmentSwitch } from \"@/components/zappie/fulfilment-switch\";\nimport { Money } from \"@/components/zappie/money\";\nimport { SchedulePicker } from \"@/components/zappie/schedule-picker\";\nimport { Cart } from \"@zappie/foundations\";\nimport type { Branch, CartFix, CartIssue } from \"@zappie/sdk\";\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport type { PlacesClient } from \"@zappie/sdk/places\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { useId, useRef, useState } from \"react\";\nimport \"./checkout-page.css\";\n\nconst labels: Record<CartFix[\"action\"], string> = {\n  remove_line: \"Remove item\",\n  accept_price: \"Accept new price\",\n  remove_promo: \"Remove promo\",\n  set_quantity: \"Update quantity\",\n  change_address: \"Change address\",\n  choose_region: \"Choose delivery area\",\n  schedule: \"Choose a time\",\n  switch_fulfilment: \"Change fulfilment\",\n  choose_option: \"Choose an option\",\n  choose_other_option: \"Change an option\",\n};\n\n/** Collect checkout details and send the current cart to hosted payment. */\nexport function CheckoutPage({\n  branch,\n  checkout,\n  places,\n  onSignIn,\n  onEditItem,\n  returnUrl,\n  cancelUrl,\n  shopHref = \"/\",\n}: {\n  branch: Branch;\n  checkout: CheckoutClient;\n  places: PlacesClient;\n  onSignIn: () => void;\n  /** Open your item editor for an option fix, keeping the line's current selections. */\n  onEditItem: (lineId: string, groupId: string) => void;\n  returnUrl?: string;\n  cancelUrl?: string;\n  shopHref?: string;\n}) {\n  const cart = useCart();\n  const [phone, setPhone] = useState(\"\");\n  const [deliveryRequested, requestDelivery] = useState(false);\n  const [error, setError] = useState(\"\");\n  const phoneField = useRef<HTMLInputElement>(null);\n  const addressSection = useRef<HTMLDivElement>(null);\n  const regionField = useRef<HTMLSelectElement>(null);\n  const scheduleSection = useRef<HTMLDetailsElement>(null);\n  const fulfilmentSection = useRef<HTMLDivElement>(null);\n  const regionId = useId();\n  const fulfilment = cart.fulfilment;\n  const address =\n    fulfilment?.type === \"delivery\" ? fulfilment.address : undefined;\n  const quote = \"quote\" in cart.state ? cart.state.quote : undefined;\n  const fix = (issue: CartIssue, action: CartFix) => {\n    setError(\"\");\n    try {\n      switch (action.action) {\n        case \"choose_region\":\n          if (regionField.current) {\n            regionField.current.focus();\n          } else {\n            setError(\n              \"Delivery areas could not load. Try pickup or contact the store.\",\n            );\n          }\n          return;\n        case \"change_address\":\n          requestDelivery(true);\n          addressSection.current?.focus();\n          return;\n        case \"schedule\":\n          if (scheduleSection.current) {\n            scheduleSection.current.open = true;\n            scheduleSection.current.focus();\n          }\n          return;\n        case \"switch_fulfilment\":\n          fulfilmentSection.current?.focus();\n          return;\n        case \"choose_option\":\n        case \"choose_other_option\":\n          if (issue.lineId) {\n            onEditItem(issue.lineId, action.groupId);\n          }\n          return;\n        default:\n          cart.actions.applyFix(issue, action);\n      }\n    } catch {\n      setError(\"We could not apply that change. Try again.\");\n    }\n  };\n  if (!cart.isHydrated) {\n    return <p role=\"status\">Loading your cart…</p>;\n  }\n  if (cart.lines.length === 0) {\n    return (\n      <section className=\"z-kit-checkout-page\">\n        <h2>Your cart is empty</h2>\n        <a href={shopHref}>Keep shopping</a>\n      </section>\n    );\n  }\n  return (\n    <section className=\"z-kit-checkout-page\" aria-label=\"Checkout\">\n      <h2>Checkout</h2>\n      <label>\n        Contact phone\n        <input\n          ref={phoneField}\n          type=\"tel\"\n          autoComplete=\"tel\"\n          value={phone}\n          onChange={(event) => setPhone(event.target.value)}\n        />\n      </label>\n      <div ref={fulfilmentSection} tabIndex={-1} aria-label=\"Choose fulfilment\">\n        <FulfilmentSwitch\n          branchId={branch.id}\n          {...(address ? { deliveryAddress: address } : {})}\n          deliveryRequested={deliveryRequested}\n          onDeliveryRequest={() => requestDelivery(true)}\n          onChange={() => requestDelivery(false)}\n        />\n      </div>\n      {(fulfilment?.type === \"delivery\" || deliveryRequested) && (\n        <div ref={addressSection} tabIndex={-1} aria-label=\"Choose address\">\n          {address && <p>{address.line1}</p>}\n          <AddressPicker\n            places={places}\n            branchId={branch.id}\n            onChange={(next) => {\n              cart.actions.setFulfilment({\n                type: \"delivery\",\n                branchId: branch.id,\n                address: next,\n              });\n              requestDelivery(false);\n            }}\n          />\n          {fulfilment?.type === \"delivery\" && (\n            <>\n              {(branch.deliveryRegions?.length ?? 0) > 0 && (\n                <label htmlFor={regionId}>\n                  Delivery area\n                  <select\n                    id={regionId}\n                    ref={regionField}\n                    value={fulfilment.deliveryRegionId ?? \"\"}\n                    onChange={(event) => {\n                      const { deliveryRegionId: _old, ...rest } = fulfilment;\n                      cart.actions.setFulfilment(\n                        event.target.value\n                          ? { ...rest, deliveryRegionId: event.target.value }\n                          : rest,\n                      );\n                    }}\n                  >\n                    <option value=\"\">Choose an area</option>\n                    {branch.deliveryRegions?.map((region) => (\n                      <option key={region.id} value={region.id}>\n                        {region.name}\n                      </option>\n                    ))}\n                  </select>\n                </label>\n              )}\n              <label>\n                Delivery instructions\n                <input\n                  maxLength={200}\n                  value={address?.instructions ?? \"\"}\n                  onChange={(event) =>\n                    cart.actions.setFulfilment({\n                      ...fulfilment,\n                      address: {\n                        ...fulfilment.address,\n                        instructions: event.target.value,\n                      },\n                    })\n                  }\n                />\n              </label>\n            </>\n          )}\n        </div>\n      )}\n      <details\n        ref={scheduleSection}\n        tabIndex={-1}\n        aria-label=\"Choose order time\"\n      >\n        <summary>\n          Order time:{\" \"}\n          {fulfilment &&\n          fulfilment.type !== \"dine_in\" &&\n          fulfilment.scheduledFor\n            ? fulfilment.scheduledFor\n            : \"As soon as possible\"}\n        </summary>\n        <SchedulePicker branch={branch} />\n      </details>\n      <h3>Your order</h3>\n      <Cart.Root>\n        {cart.lines.map((line) => (\n          <CartLine key={line.id} line={line} />\n        ))}\n      </Cart.Root>\n      <form\n        onSubmit={(event) => {\n          event.preventDefault();\n          cart.actions.setPromoCode(\n            String(\n              new FormData(event.currentTarget).get(\"promo\") ?? \"\",\n            ).trim() || null,\n          );\n        }}\n      >\n        <label>\n          Promo code\n          <input name=\"promo\" defaultValue={cart.promoCode ?? \"\"} />\n        </label>\n        <button type=\"submit\">Apply promo</button>\n      </form>\n      <div aria-live=\"polite\">\n        {cart.issues.map((issue, index) => (\n          <div key={`${issue.code}:${index}`} data-zappie-issue={issue.code}>\n            <p>{issue.message}</p>\n            {issue.fixes.map((action, index) => (\n              <button\n                key={index}\n                type=\"button\"\n                data-zappie-issue-fix=\"\"\n                onClick={() => fix(issue, action)}\n              >\n                {labels[action.action]}\n              </button>\n            ))}\n          </div>\n        ))}\n      </div>\n      {error && <p role=\"alert\">{error}</p>}\n      {cart.state.status === \"quoting\" && (\n        <p role=\"status\">Updating your total…</p>\n      )}\n      {quote && (\n        <dl>\n          <div>\n            <dt>Subtotal</dt>\n            <dd>\n              <Money value={quote.subtotal} />\n            </dd>\n          </div>\n          {quote.delivery && (\n            <div>\n              <dt>Delivery</dt>\n              <dd>\n                <Money value={quote.delivery} />\n              </dd>\n            </div>\n          )}\n          {quote.fees.map((fee, index) => (\n            <div key={index}>\n              <dt>{fee.label}</dt>\n              <dd>\n                <Money value={fee.amount} />\n              </dd>\n            </div>\n          ))}\n          {quote.discounts.map((discount, index) => (\n            <div key={index}>\n              <dt>{discount.label}</dt>\n              <dd>\n                <Money value={discount.amount} />\n              </dd>\n            </div>\n          ))}\n          <div data-zappie-total=\"\">\n            <dt>Total</dt>\n            <dd>\n              <Money value={quote.total} />\n            </dd>\n          </div>\n        </dl>\n      )}\n      <p>Choose your payment method on the payment page.</p>\n      {fulfilment ? (\n        <CheckoutButton\n          checkout={checkout}\n          branchId={branch.id}\n          contactPhone={phone}\n          onSignIn={onSignIn}\n          onError={() => setError(\"Checkout could not update. Try again.\")}\n          onContactPhoneRequired={() => phoneField.current?.focus()}\n          {...(returnUrl ? { returnUrl } : {})}\n          {...(cancelUrl ? { cancelUrl } : {})}\n        />\n      ) : (\n        <p>Choose pickup or delivery to continue.</p>\n      )}\n    </section>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-page"}

package/dist/registry/v1/items/checkout-return.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-return","type":"block","version":"1.0.0","title":"Checkout return","description":"Confirm payment and link to the completed order.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"checkout-return.css","target":"components/zappie/checkout-return.css","sha256":"fc5678407d5800623d2dab20de0b48a0bf7542b257c755d9fc186bd9fece5616","content":".z-kit-checkout-return {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-checkout-return :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-checkout-return :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-checkout-return :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-checkout-return ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"checkout-return.tsx","target":"components/zappie/checkout-return.tsx","sha256":"86d494e3599ca20bdf02d686638550e436e6bb5328d070b30edfa156ae28fb81","content":"\"use client\";\n\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { useEffect, useState } from \"react\";\nimport \"./checkout-return.css\";\n\n/** Confirm a checkout session and clear the cart only after an order completes. */\nexport function CheckoutReturn({\n  checkout,\n  sessionId,\n  orderHref = (id) => `/orders/${encodeURIComponent(id)}`,\n  checkoutHref = \"/checkout\",\n  ordersHref = \"/orders\",\n  shopHref = \"/\",\n}: {\n  checkout: CheckoutClient;\n  /** Read the session query parameter in your router and pass it here. */\n  sessionId?: string;\n  orderHref?: (id: string) => string;\n  checkoutHref?: string;\n  ordersHref?: string;\n  shopHref?: string;\n}) {\n  const cart = useCart();\n  const [result, setResult] = useState<{\n    session: string;\n    state: \"completed\" | \"ended\" | \"unknown\";\n    orderId?: string;\n  }>();\n  useEffect(() => {\n    if (!sessionId) {\n      return;\n    }\n    const controller = new AbortController();\n    void checkout\n      .awaitCompletion(sessionId, { signal: controller.signal })\n      .then(\n        (session) => {\n          if (controller.signal.aborted) {\n            return;\n          }\n          if (session.status === \"completed\") {\n            cart.actions.clear();\n            setResult({\n              session: sessionId,\n              state: \"completed\",\n              orderId: session.order_id,\n            });\n          } else {\n            setResult({ session: sessionId, state: \"ended\" });\n          }\n        },\n        () => {\n          if (!controller.signal.aborted) {\n            setResult({ session: sessionId, state: \"unknown\" });\n          }\n        },\n      );\n    return () => controller.abort();\n  }, [checkout, sessionId, cart.actions]);\n  const current = result?.session === sessionId ? result : undefined;\n  return (\n    <section className=\"z-kit-checkout-return\" aria-live=\"polite\">\n      {!sessionId ? (\n        <>\n          <h2>Nothing to confirm</h2>\n          <p>This page opens after a payment.</p>\n          <a href={shopHref}>Keep shopping</a>\n        </>\n      ) : current?.state === \"completed\" && current.orderId ? (\n        <>\n          <h2>Order placed</h2>\n          <a href={orderHref(current.orderId)}>View your order</a>\n        </>\n      ) : current?.state === \"ended\" ? (\n        <>\n          <h2>That payment ended</h2>\n          <p>\n            Your cart is still here. Check your orders if you made a payment.\n          </p>\n          <a href={checkoutHref}>Back to checkout</a>\n        </>\n      ) : current?.state === \"unknown\" ? (\n        <>\n          <h2>We could not confirm it here</h2>\n          <p>If you paid, check your orders.</p>\n          <a href={ordersHref}>Your orders</a>\n        </>\n      ) : (\n        <>\n          <h2>Confirming your payment</h2>\n          <p role=\"status\">This can take a few seconds.</p>\n        </>\n      )}\n    </section>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-return"}

package/dist/registry/v1/items/checkout-return@1.0.0.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-return","type":"block","version":"1.0.0","title":"Checkout return","description":"Confirm payment and link to the completed order.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"checkout-return.css","target":"components/zappie/checkout-return.css","sha256":"fc5678407d5800623d2dab20de0b48a0bf7542b257c755d9fc186bd9fece5616","content":".z-kit-checkout-return {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-checkout-return :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-checkout-return :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-checkout-return :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-checkout-return ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"checkout-return.tsx","target":"components/zappie/checkout-return.tsx","sha256":"86d494e3599ca20bdf02d686638550e436e6bb5328d070b30edfa156ae28fb81","content":"\"use client\";\n\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { useEffect, useState } from \"react\";\nimport \"./checkout-return.css\";\n\n/** Confirm a checkout session and clear the cart only after an order completes. */\nexport function CheckoutReturn({\n  checkout,\n  sessionId,\n  orderHref = (id) => `/orders/${encodeURIComponent(id)}`,\n  checkoutHref = \"/checkout\",\n  ordersHref = \"/orders\",\n  shopHref = \"/\",\n}: {\n  checkout: CheckoutClient;\n  /** Read the session query parameter in your router and pass it here. */\n  sessionId?: string;\n  orderHref?: (id: string) => string;\n  checkoutHref?: string;\n  ordersHref?: string;\n  shopHref?: string;\n}) {\n  const cart = useCart();\n  const [result, setResult] = useState<{\n    session: string;\n    state: \"completed\" | \"ended\" | \"unknown\";\n    orderId?: string;\n  }>();\n  useEffect(() => {\n    if (!sessionId) {\n      return;\n    }\n    const controller = new AbortController();\n    void checkout\n      .awaitCompletion(sessionId, { signal: controller.signal })\n      .then(\n        (session) => {\n          if (controller.signal.aborted) {\n            return;\n          }\n          if (session.status === \"completed\") {\n            cart.actions.clear();\n            setResult({\n              session: sessionId,\n              state: \"completed\",\n              orderId: session.order_id,\n            });\n          } else {\n            setResult({ session: sessionId, state: \"ended\" });\n          }\n        },\n        () => {\n          if (!controller.signal.aborted) {\n            setResult({ session: sessionId, state: \"unknown\" });\n          }\n        },\n      );\n    return () => controller.abort();\n  }, [checkout, sessionId, cart.actions]);\n  const current = result?.session === sessionId ? result : undefined;\n  return (\n    <section className=\"z-kit-checkout-return\" aria-live=\"polite\">\n      {!sessionId ? (\n        <>\n          <h2>Nothing to confirm</h2>\n          <p>This page opens after a payment.</p>\n          <a href={shopHref}>Keep shopping</a>\n        </>\n      ) : current?.state === \"completed\" && current.orderId ? (\n        <>\n          <h2>Order placed</h2>\n          <a href={orderHref(current.orderId)}>View your order</a>\n        </>\n      ) : current?.state === \"ended\" ? (\n        <>\n          <h2>That payment ended</h2>\n          <p>\n            Your cart is still here. Check your orders if you made a payment.\n          </p>\n          <a href={checkoutHref}>Back to checkout</a>\n        </>\n      ) : current?.state === \"unknown\" ? (\n        <>\n          <h2>We could not confirm it here</h2>\n          <p>If you paid, check your orders.</p>\n          <a href={ordersHref}>Your orders</a>\n        </>\n      ) : (\n        <>\n          <h2>Confirming your payment</h2>\n          <p role=\"status\">This can take a few seconds.</p>\n        </>\n      )}\n    </section>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-return"}

package/dist/registry/v1/items/consent.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"consent","type":"component","version":"1.0.0","title":"Consent","description":"Save your privacy choice and withdraw consent when you choose.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"consent.css","target":"components/zappie/consent.css","sha256":"2c3687d7561528c54135d8518fc775987eb7cc882af00aaad69b427a9a145405","content":".z-kit-consent {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-consent :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-consent :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-consent :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-consent ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"consent.tsx","target":"components/zappie/consent.tsx","sha256":"6247ceff308d5f0cbcb77f7feac22038375be321663056a1bc4cc8a8fad342f1","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport \"./consent.css\";\n\n/** The shopper's choice for optional tracking, or unknown before they choose. */\nexport type ConsentChoice = \"unknown\" | \"allowed\" | \"declined\";\n\n/** Save a privacy choice and let the shopper withdraw it. This component loads no tracking tags. */\nexport function Consent({\n  storageKey,\n  privacyHref,\n  onChange,\n}: {\n  /** Use a key unique to this store and consent policy version. */\n  storageKey: string;\n  privacyHref: string;\n  /** Receive the stored choice after hydration and each change, including withdrawal. */\n  onChange?: (choice: ConsentChoice) => void;\n}) {\n  const [saved, setSaved] = useState<{ key: string; choice: ConsentChoice }>({\n    key: \"\",\n    choice: \"unknown\",\n  });\n  const choice = saved.key === storageKey ? saved.choice : \"unknown\";\n  const [storageError, setStorageError] = useState(false);\n  useEffect(() => {\n    let next: ConsentChoice = \"unknown\";\n    try {\n      const value = localStorage.getItem(storageKey);\n      if (value === \"allowed\" || value === \"declined\") {\n        next = value;\n      }\n    } catch {\n      // An unreadable choice grants no consent.\n    }\n    setStorageError(false);\n    setSaved({ key: storageKey, choice: next });\n  }, [storageKey]);\n  useEffect(() => {\n    if (saved.key === storageKey) {\n      onChange?.(saved.choice);\n    }\n  }, [saved, storageKey, onChange]);\n  const choose = (next: \"allowed\" | \"declined\") => {\n    setStorageError(false);\n    try {\n      localStorage.setItem(storageKey, next);\n    } catch {\n      setStorageError(true);\n      if (next === \"allowed\") {\n        return;\n      }\n      try {\n        localStorage.removeItem(storageKey);\n      } catch {\n        // Withdrawal still applies to the current page through onChange.\n      }\n    }\n    setSaved({ key: storageKey, choice: next });\n  };\n  return (\n    <section className=\"z-kit-consent\" aria-label=\"Privacy choices\">\n      <h2>Privacy choices</h2>\n      <p>\n        {choice === \"unknown\"\n          ? \"Allow optional tracking to help us understand how you use this store?\"\n          : choice === \"allowed\"\n            ? \"Optional tracking is allowed.\"\n            : \"Optional tracking is off.\"}\n      </p>\n      <a href={privacyHref}>Read the privacy policy</a>\n      {choice !== \"allowed\" && (\n        <button type=\"button\" onClick={() => choose(\"allowed\")}>\n          Allow tracking\n        </button>\n      )}\n      {choice !== \"declined\" && (\n        <button type=\"button\" onClick={() => choose(\"declined\")}>\n          {choice === \"allowed\" ? \"Withdraw consent\" : \"Decline tracking\"}\n        </button>\n      )}\n      {storageError && (\n        <p role=\"alert\">\n          We could not save your privacy choice. Please try again.\n        </p>\n      )}\n    </section>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/consent"}

package/dist/registry/v1/items/consent@1.0.0.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"consent","type":"component","version":"1.0.0","title":"Consent","description":"Save your privacy choice and withdraw consent when you choose.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"consent.css","target":"components/zappie/consent.css","sha256":"2c3687d7561528c54135d8518fc775987eb7cc882af00aaad69b427a9a145405","content":".z-kit-consent {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-consent :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-consent :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-consent :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-consent ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"consent.tsx","target":"components/zappie/consent.tsx","sha256":"6247ceff308d5f0cbcb77f7feac22038375be321663056a1bc4cc8a8fad342f1","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport \"./consent.css\";\n\n/** The shopper's choice for optional tracking, or unknown before they choose. */\nexport type ConsentChoice = \"unknown\" | \"allowed\" | \"declined\";\n\n/** Save a privacy choice and let the shopper withdraw it. This component loads no tracking tags. */\nexport function Consent({\n  storageKey,\n  privacyHref,\n  onChange,\n}: {\n  /** Use a key unique to this store and consent policy version. */\n  storageKey: string;\n  privacyHref: string;\n  /** Receive the stored choice after hydration and each change, including withdrawal. */\n  onChange?: (choice: ConsentChoice) => void;\n}) {\n  const [saved, setSaved] = useState<{ key: string; choice: ConsentChoice }>({\n    key: \"\",\n    choice: \"unknown\",\n  });\n  const choice = saved.key === storageKey ? saved.choice : \"unknown\";\n  const [storageError, setStorageError] = useState(false);\n  useEffect(() => {\n    let next: ConsentChoice = \"unknown\";\n    try {\n      const value = localStorage.getItem(storageKey);\n      if (value === \"allowed\" || value === \"declined\") {\n        next = value;\n      }\n    } catch {\n      // An unreadable choice grants no consent.\n    }\n    setStorageError(false);\n    setSaved({ key: storageKey, choice: next });\n  }, [storageKey]);\n  useEffect(() => {\n    if (saved.key === storageKey) {\n      onChange?.(saved.choice);\n    }\n  }, [saved, storageKey, onChange]);\n  const choose = (next: \"allowed\" | \"declined\") => {\n    setStorageError(false);\n    try {\n      localStorage.setItem(storageKey, next);\n    } catch {\n      setStorageError(true);\n      if (next === \"allowed\") {\n        return;\n      }\n      try {\n        localStorage.removeItem(storageKey);\n      } catch {\n        // Withdrawal still applies to the current page through onChange.\n      }\n    }\n    setSaved({ key: storageKey, choice: next });\n  };\n  return (\n    <section className=\"z-kit-consent\" aria-label=\"Privacy choices\">\n      <h2>Privacy choices</h2>\n      <p>\n        {choice === \"unknown\"\n          ? \"Allow optional tracking to help us understand how you use this store?\"\n          : choice === \"allowed\"\n            ? \"Optional tracking is allowed.\"\n            : \"Optional tracking is off.\"}\n      </p>\n      <a href={privacyHref}>Read the privacy policy</a>\n      {choice !== \"allowed\" && (\n        <button type=\"button\" onClick={() => choose(\"allowed\")}>\n          Allow tracking\n        </button>\n      )}\n      {choice !== \"declined\" && (\n        <button type=\"button\" onClick={() => choose(\"declined\")}>\n          {choice === \"allowed\" ? \"Withdraw consent\" : \"Decline tracking\"}\n        </button>\n      )}\n      {storageError && (\n        <p role=\"alert\">\n          We could not save your privacy choice. Please try again.\n        </p>\n      )}\n    </section>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/consent"}

package/dist/registry/v1/items/orders-page.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"orders-page","type":"block","version":"1.0.0","title":"Orders page","description":"Browse your orders and load older orders.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":["sign-in-button","money"],"files":[{"path":"orders-page.css","target":"components/zappie/orders-page.css","sha256":"ccae7e1f5882baab31f2bef3223e664b7dc0394418306adba44373962e638df6","content":".z-kit-orders-page {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-orders-page :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-orders-page :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-orders-page :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-orders-page ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"orders-page.tsx","target":"components/zappie/orders-page.tsx","sha256":"48d06171c7856ac2fb3ec855e9760ab77291f43e943a9072eb26aee3977f5602","content":"\"use client\";\n\nimport { Money } from \"@/components/zappie/money\";\nimport { SignInButton } from \"@/components/zappie/sign-in-button\";\nimport { money } from \"@zappie/sdk\";\nimport type { CustomerClient, CustomerOrder } from \"@zappie/sdk/customer\";\nimport { useAuth } from \"@zappie/sdk/customer/react\";\nimport { useEffect, useState } from \"react\";\nimport \"./orders-page.css\";\n\n/** List your orders and load older orders a page at a time. */\nexport function OrdersPage({\n  customer,\n  orderHref = (id) => `/orders/${encodeURIComponent(id)}`,\n  shopHref = \"/\",\n}: {\n  /** Use the same client as your CustomerProvider. */\n  customer: CustomerClient;\n  /** Link to a route that renders the kit OrderPage or OrderStatus. */\n  orderHref?: (id: string) => string;\n  shopHref?: string;\n}) {\n  const auth = useAuth();\n  return (\n    <section className=\"z-kit-orders-page\" aria-label=\"Your orders\">\n      <h2>Your orders</h2>\n      {auth.state === \"unknown\" ? (\n        <p role=\"status\">Checking your session…</p>\n      ) : auth.customer ? (\n        <Orders\n          key={auth.customer.id}\n          customer={customer}\n          orderHref={orderHref}\n        />\n      ) : (\n        <SignInButton />\n      )}\n      <a href={shopHref}>Keep shopping</a>\n    </section>\n  );\n}\n\nfunction Orders({\n  customer,\n  orderHref,\n}: {\n  customer: CustomerClient;\n  orderHref: (id: string) => string;\n}) {\n  const [orders, setOrders] = useState<CustomerOrder[]>([]);\n  const [cursor, setCursor] = useState<string | null>();\n  const [busy, setBusy] = useState(true);\n  const [error, setError] = useState(false);\n  const [attempt, setAttempt] = useState(0);\n  useEffect(() => {\n    let active = true;\n    setBusy(true);\n    setError(false);\n    void customer\n      .orders()\n      .then(\n        (page) => {\n          if (active) {\n            setOrders(page.orders);\n            setCursor(page.next_cursor);\n          }\n        },\n        () => {\n          if (active) {\n            setError(true);\n          }\n        },\n      )\n      .finally(() => {\n        if (active) {\n          setBusy(false);\n        }\n      });\n    return () => {\n      active = false;\n    };\n  }, [customer, attempt]);\n  const more = async () => {\n    if (!cursor || busy) {\n      return;\n    }\n    setBusy(true);\n    setError(false);\n    try {\n      const page = await customer.orders({ cursor });\n      setOrders((current) => [\n        ...new Map(\n          [...current, ...page.orders].map((order) => [order.id, order]),\n        ).values(),\n      ]);\n      setCursor(page.next_cursor);\n    } catch {\n      setError(true);\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <div>\n      {busy && <p role=\"status\">Loading your orders…</p>}\n      {error && (\n        <div role=\"alert\">\n          <p>We could not load your orders.</p>\n          <button\n            type=\"button\"\n            disabled={busy}\n            onClick={() =>\n              cursor ? void more() : setAttempt((value) => value + 1)\n            }\n          >\n            Try again\n          </button>\n        </div>\n      )}\n      {!busy && !error && orders.length === 0 && <p>No orders yet.</p>}\n      <ul>\n        {orders.map((order) => (\n          <li key={order.id}>\n            <a href={orderHref(order.id)}>\n              <span>\n                Order {order.id} · {order.status.replaceAll(\"_\", \" \")}\n              </span>\n              <time dateTime={order.placed_at}>\n                {new Date(order.placed_at).toLocaleDateString()}\n              </time>\n              <Money\n                value={money(order.total.amount_minor, order.total.currency)}\n              />\n            </a>\n          </li>\n        ))}\n      </ul>\n      {cursor && (\n        <button type=\"button\" disabled={busy} onClick={() => void more()}>\n          Older orders\n        </button>\n      )}\n    </div>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/orders-page"}

package/dist/registry/v1/items/orders-page@1.0.0.json

@@ -0,0 +1 @@
+{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"orders-page","type":"block","version":"1.0.0","title":"Orders page","description":"Browse your orders and load older orders.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.1.2","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":["sign-in-button","money"],"files":[{"path":"orders-page.css","target":"components/zappie/orders-page.css","sha256":"ccae7e1f5882baab31f2bef3223e664b7dc0394418306adba44373962e638df6","content":".z-kit-orders-page {\n  display: grid;\n  gap: var(--z-space-4);\n  color: var(--z-text);\n  font-family: var(--z-font-body);\n  max-width: 48rem;\n}\n.z-kit-orders-page :where(form, label, li, a) {\n  display: grid;\n  gap: var(--z-space-2);\n}\n.z-kit-orders-page :where(input, button) {\n  font: inherit;\n  color: var(--z-text);\n  background: var(--z-surface);\n  border: 1px solid var(--z-border);\n  border-radius: var(--z-radius-sm);\n  padding: var(--z-space-3);\n  min-width: 0;\n}\n.z-kit-orders-page :where(input, button, a):focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n.z-kit-orders-page ul {\n  list-style: none;\n  padding: 0;\n}\n"},{"path":"orders-page.tsx","target":"components/zappie/orders-page.tsx","sha256":"48d06171c7856ac2fb3ec855e9760ab77291f43e943a9072eb26aee3977f5602","content":"\"use client\";\n\nimport { Money } from \"@/components/zappie/money\";\nimport { SignInButton } from \"@/components/zappie/sign-in-button\";\nimport { money } from \"@zappie/sdk\";\nimport type { CustomerClient, CustomerOrder } from \"@zappie/sdk/customer\";\nimport { useAuth } from \"@zappie/sdk/customer/react\";\nimport { useEffect, useState } from \"react\";\nimport \"./orders-page.css\";\n\n/** List your orders and load older orders a page at a time. */\nexport function OrdersPage({\n  customer,\n  orderHref = (id) => `/orders/${encodeURIComponent(id)}`,\n  shopHref = \"/\",\n}: {\n  /** Use the same client as your CustomerProvider. */\n  customer: CustomerClient;\n  /** Link to a route that renders the kit OrderPage or OrderStatus. */\n  orderHref?: (id: string) => string;\n  shopHref?: string;\n}) {\n  const auth = useAuth();\n  return (\n    <section className=\"z-kit-orders-page\" aria-label=\"Your orders\">\n      <h2>Your orders</h2>\n      {auth.state === \"unknown\" ? (\n        <p role=\"status\">Checking your session…</p>\n      ) : auth.customer ? (\n        <Orders\n          key={auth.customer.id}\n          customer={customer}\n          orderHref={orderHref}\n        />\n      ) : (\n        <SignInButton />\n      )}\n      <a href={shopHref}>Keep shopping</a>\n    </section>\n  );\n}\n\nfunction Orders({\n  customer,\n  orderHref,\n}: {\n  customer: CustomerClient;\n  orderHref: (id: string) => string;\n}) {\n  const [orders, setOrders] = useState<CustomerOrder[]>([]);\n  const [cursor, setCursor] = useState<string | null>();\n  const [busy, setBusy] = useState(true);\n  const [error, setError] = useState(false);\n  const [attempt, setAttempt] = useState(0);\n  useEffect(() => {\n    let active = true;\n    setBusy(true);\n    setError(false);\n    void customer\n      .orders()\n      .then(\n        (page) => {\n          if (active) {\n            setOrders(page.orders);\n            setCursor(page.next_cursor);\n          }\n        },\n        () => {\n          if (active) {\n            setError(true);\n          }\n        },\n      )\n      .finally(() => {\n        if (active) {\n          setBusy(false);\n        }\n      });\n    return () => {\n      active = false;\n    };\n  }, [customer, attempt]);\n  const more = async () => {\n    if (!cursor || busy) {\n      return;\n    }\n    setBusy(true);\n    setError(false);\n    try {\n      const page = await customer.orders({ cursor });\n      setOrders((current) => [\n        ...new Map(\n          [...current, ...page.orders].map((order) => [order.id, order]),\n        ).values(),\n      ]);\n      setCursor(page.next_cursor);\n    } catch {\n      setError(true);\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <div>\n      {busy && <p role=\"status\">Loading your orders…</p>}\n      {error && (\n        <div role=\"alert\">\n          <p>We could not load your orders.</p>\n          <button\n            type=\"button\"\n            disabled={busy}\n            onClick={() =>\n              cursor ? void more() : setAttempt((value) => value + 1)\n            }\n          >\n            Try again\n          </button>\n        </div>\n      )}\n      {!busy && !error && orders.length === 0 && <p>No orders yet.</p>}\n      <ul>\n        {orders.map((order) => (\n          <li key={order.id}>\n            <a href={orderHref(order.id)}>\n              <span>\n                Order {order.id} · {order.status.replaceAll(\"_\", \" \")}\n              </span>\n              <time dateTime={order.placed_at}>\n                {new Date(order.placed_at).toLocaleDateString()}\n              </time>\n              <Money\n                value={money(order.total.amount_minor, order.total.currency)}\n              />\n            </a>\n          </li>\n        ))}\n      </ul>\n      {cursor && (\n        <button type=\"button\" disabled={busy} onClick={() => void more()}>\n          Older orders\n        </button>\n      )}\n    </div>\n  );\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-text","--z-surface","--z-border","--z-radius-sm","--z-focus-ring","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/orders-page"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zappie/kit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "The registry of copy-in Zappie storefront components, installed with the zappie CLI.",
   "type": "module",
   "repository": {

package/dist/registry/v1/items/checkout-button@1.0.0.json

@@ -1 +0,0 @@
-{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"checkout-button","type":"component","version":"1.0.0","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution.","requires":{"@zappie/sdk":"^0.1.0","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"checkout-button.tsx","target":"components/zappie/checkout-button.tsx","sha256":"034bf092d4a1911b5dc3790f25f1b468004aadce772173abcaaab60518365669","content":"\"use client\";\n\nimport type { CheckoutClient } from \"@zappie/sdk/checkout\";\nimport { CheckoutError, isContactPhoneValid } from \"@zappie/sdk/checkout\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { currentSource } from \"@zappie/sdk/visits\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { createCheckoutAttempt } from \"./checkout-attempt\";\nimport \"./checkout-button.css\";\nimport { checkoutButtonState } from \"./checkout-state\";\n\nexport type CheckoutButtonProps = {\n  checkout: CheckoutClient;\n  branchId: string;\n  returnUrl?: string;\n  cancelUrl?: string;\n  contactPhone?: string;\n  attribution?: () => { source: string; campaign: string };\n  onSignIn?: () => void;\n  onContactPhoneRequired?: () => void;\n  redirect?: (url: string) => void;\n};\n\nexport function CheckoutButton({\n  checkout,\n  branchId,\n  returnUrl,\n  cancelUrl,\n  contactPhone = \"\",\n  attribution = currentSource,\n  onSignIn,\n  onContactPhoneRequired,\n  redirect = (url) => window.top?.location.assign(url),\n}: CheckoutButtonProps) {\n  const cart = useCart();\n  const attempt = useMemo(() => createCheckoutAttempt(), []);\n  const [busy, setBusy] = useState(false);\n  const [forced, setForced] = useState<\"sign_in\" | undefined>();\n  useEffect(() => {\n    if (\n      cart.isHydrated &&\n      cart.lines.length > 0 &&\n      cart.state.status === \"ready\"\n    ) {\n      void cart.actions.quote();\n    }\n  }, [cart.actions, cart.isHydrated, cart.lines.length, cart.state.status]);\n  const state = checkoutButtonState(\n    cart.state,\n    cart.fulfilment,\n    isContactPhoneValid(contactPhone),\n    busy,\n    forced,\n  );\n  const activate = async () => {\n    if (state.status === \"sign_in\") {\n      onSignIn?.();\n      return;\n    }\n    if (state.status === \"phone\") {\n      onContactPhoneRequired?.();\n      return;\n    }\n    if (state.status === \"retry\") {\n      await cart.actions.quote({ force: true });\n      return;\n    }\n    if (state.status !== \"pay\") {\n      return;\n    }\n    setBusy(true);\n    try {\n      const checkoutAttempt = attempt({\n        payload: cart.actions.toCheckoutPayload(),\n        branchId,\n        contactPhone,\n        returnUrl: returnUrl ?? `${location.origin}/checkout/return`,\n        ...((cancelUrl ?? location.href)\n          ? { cancelUrl: cancelUrl ?? location.href }\n          : {}),\n        attribution: attribution(),\n      });\n      const session = await checkout.open(\n        checkoutAttempt.request,\n        checkoutAttempt.key,\n      );\n      redirect(session.url);\n    } catch (failure) {\n      if (\n        failure instanceof CheckoutError &&\n        failure.apiCode === \"customer_required\"\n      ) {\n        setForced(\"sign_in\");\n        onSignIn?.();\n        return;\n      }\n      throw failure;\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <button\n      type=\"button\"\n      className=\"z-kit-checkout-button\"\n      data-state={state.status}\n      data-zappie-checkout=\"\"\n      disabled={!state.enabled}\n      onClick={() => void activate()}\n    >\n      {state.label}\n    </button>\n  );\n}\n"},{"path":"checkout-attempt.ts","target":"components/zappie/checkout-attempt.ts","sha256":"acf50ea6b4123a137bf4e415231b7a3a92f3a5f3e83a988e9dc6ecd511fec4a0","content":"import type { CartModule } from \"@zappie/sdk\";\nimport { checkoutFulfilment, type CheckoutRequest } from \"@zappie/sdk/checkout\";\n\ntype Payload = ReturnType<CartModule[\"toCheckoutPayload\"]>;\ntype Attribution = { source: string; campaign: string };\nexport type CheckoutAttempt = { key: string; request: CheckoutRequest };\n\nfunction fulfilment(payload: Payload) {\n  const value = checkoutFulfilment(payload.fulfilment);\n  if (value.type === \"pickup\") {\n    return {\n      type: \"pickup\" as const,\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  if (value.type === \"delivery\") {\n    return {\n      type: \"delivery\" as const,\n      ...(value.address !== undefined ? { address: value.address } : {}),\n      ...(value.scheduled_for !== undefined\n        ? { scheduled_for: value.scheduled_for }\n        : {}),\n    };\n  }\n  throw new Error(\"Dine-in checkout is unavailable\");\n}\n\nexport function createCheckoutAttempt() {\n  let current: { digest: string; attempt: CheckoutAttempt } | undefined;\n  return ({\n    payload,\n    branchId,\n    contactPhone,\n    returnUrl,\n    cancelUrl,\n    attribution,\n  }: {\n    payload: Payload;\n    branchId: string;\n    contactPhone: string;\n    returnUrl: string;\n    cancelUrl?: string;\n    attribution: Attribution;\n  }) => {\n    const normalizedPhone = contactPhone.trim().replace(/\\s+/g, \"\");\n    const digest = JSON.stringify({ payload, contactPhone: normalizedPhone });\n    if (current?.digest === digest) {\n      return current.attempt;\n    }\n    const request: CheckoutRequest = {\n      branch_id: branchId,\n      menu_version: payload.menu_version,\n      lines: payload.lines,\n      fulfilment: fulfilment(payload),\n      ...(normalizedPhone ? { contact_phone: normalizedPhone } : {}),\n      ...(payload.promo_code ? { promo_code: payload.promo_code } : {}),\n      ...(attribution.source ? { source: attribution.source } : {}),\n      ...(attribution.campaign ? { campaign: attribution.campaign } : {}),\n      return_url: returnUrl,\n      ...(cancelUrl ? { cancel_url: cancelUrl } : {}),\n    };\n    current = { digest, attempt: { key: crypto.randomUUID(), request } };\n    return current.attempt;\n  };\n}\n"},{"path":"checkout-state.ts","target":"components/zappie/checkout-state.ts","sha256":"e8e2dc8f88d513c124d44516e3d18012d4fd7e2c069e31454d4426dd6c2d4e43","content":"import type { CartFulfilment, CartState } from \"@zappie/sdk\";\nimport {\n  payReadiness,\n  type PayReadiness,\n  type PayReadinessQuoteState,\n} from \"@zappie/sdk/checkout\";\n\nexport type CheckoutButtonStatus = PayReadiness | \"busy\";\nconst labels: Record<CheckoutButtonStatus, string> = {\n  address: \"Add a delivery address\",\n  quoting: \"Updating total…\",\n  retry: \"Update totals to continue\",\n  choose_area: \"Choose a delivery area\",\n  fix_issues: \"Review your cart\",\n  sign_in: \"Sign in to continue\",\n  phone: \"Check your phone number\",\n  pay: \"Continue to payment\",\n  busy: \"Please wait…\",\n};\n\nfunction quoteState(state: CartState): PayReadinessQuoteState {\n  if (state.status === \"quoting\") {\n    return { status: \"loading\" };\n  }\n  if (state.status === \"quoted\") {\n    return { status: \"ready\", quote: state.quote };\n  }\n  if (state.status === \"needs_attention\") {\n    return state.quote\n      ? { status: \"ready\", quote: state.quote }\n      : { status: \"error\" };\n  }\n  return { status: \"idle\" };\n}\n\nexport function checkoutButtonState(\n  state: CartState,\n  fulfilment: CartFulfilment | null,\n  contactPhoneValid: boolean,\n  busy: boolean,\n  forced?: \"sign_in\",\n) {\n  let status: CheckoutButtonStatus;\n  if (busy) {\n    status = \"busy\";\n  } else if (forced) {\n    status = forced;\n  } else {\n    const addressValid =\n      fulfilment?.type !== \"delivery\" ||\n      Boolean(\n        fulfilment.address.line1 ||\n        fulfilment.address.placeId ||\n        fulfilment.address.coordinates,\n      );\n    status = payReadiness(quoteState(state), contactPhoneValid, addressValid);\n    if (status === \"pay\" && state.status === \"needs_attention\") {\n      status = \"fix_issues\";\n    }\n  }\n  return {\n    status,\n    label: labels[status],\n    enabled:\n      status === \"pay\" ||\n      status === \"sign_in\" ||\n      status === \"phone\" ||\n      status === \"retry\",\n  };\n}\n"},{"path":"checkout-button.css","target":"components/zappie/checkout-button.css","sha256":"9e6bb8afe1bb1e5cd55ed458e435d90b4b3d546fb4276d3fd9432d022844ca22","content":".z-kit-checkout-button {\n  width: 100%;\n  border: 0;\n  border-radius: var(--z-radius-md);\n  padding: var(--z-space-3) var(--z-space-5);\n  background: var(--z-accent);\n  color: var(--z-accent-contrast);\n  font-family: var(--z-font-body);\n  font-size: var(--z-text-md);\n  cursor: pointer;\n}\n\n.z-kit-checkout-button:disabled {\n  background: var(--z-border);\n  color: var(--z-text-muted);\n  cursor: not-allowed;\n}\n\n.z-kit-checkout-button:focus-visible {\n  outline: 2px solid var(--z-focus-ring);\n  outline-offset: 2px;\n}\n"}],"tokens":["--z-space-3","--z-space-5","--z-border","--z-radius-md","--z-accent","--z-accent-contrast","--z-text-muted","--z-focus-ring","--z-font-body","--z-text-md"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/checkout-button"}