@zappie/kit 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @zappie/kit
|
|
2
2
|
|
|
3
|
+
## 0.1.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 6ea8744: The shopper's Zappie account, with their profile, saved cards, wallet and payments, lives on the Zappie accounts portal. A site keeps its orders, its store contact and one "Your Zappie account" row.
|
|
8
|
+
|
|
9
|
+
`@zappie/foundations` adds that row. `ZappieAccountLink` renders an unstyled link labelled "Your Zappie account" to the portal's `/account`, with a return link to the current page. `useZappieAccountUrl()` gives the same address for your own link, and `zappieAccountUrl(page)` builds it for any page. `zappieEnvironment(host)` picks the portal: `staging` for localhost and the loopback addresses, `*.workers.dev`, `*.zappie-sites.dev` and any host with `.stg.` in it, and `production` for every other host, including `<tag>.zappie.shop` and custom domains. `SignInOptions.scopes` no longer accepts `cards` or `payments:read`.
|
|
10
|
+
|
|
11
|
+
The kit's account page and the starter's account page show the row below "Your orders".
|
|
12
|
+
|
|
13
|
+
`createAccount` and its calls, `ScopeRequiredError`, `NotFoundError` and the account types in `@zappie/sdk/account`, `mockAccountFetch` and `accountFixtures` in `@zappie/sdk/testing`, and the parts in `@zappie/foundations/account` are deprecated and removed in the next minor release. The API is removing the routes they call. `accountsUrl` stays as it is.
|
|
14
|
+
|
|
15
|
+
## 0.1.10
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- acc553a: The kit's account page and the starter's account page show a "Problem with a payment? Message Zappie" link, a WhatsApp link to Zappie support from `zappieSupportUrl`. The kit's account page takes an optional `store`, and the branch's `name`, to name them in the message. `zappieSupportUrl` takes a branch without a name, and parts left `undefined`, so it type-checks under `exactOptionalPropertyTypes`.
|
|
20
|
+
|
|
3
21
|
## 0.1.9
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"2026-10-10","items":[{"name":"account-page","type":"block","version":"1.
|
|
1
|
+
{"version":"2026-10-10","items":[{"name":"account-page","type":"block","version":"1.3.0","title":"Account page","description":"Show your profile, manage saved addresses, open your Zappie account and contact the branch or Zappie support."},{"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.1.1","title":"Cart button","description":"Open the cart from a floating or inline button with count and subtotal."},{"name":"cart-drawer","type":"component","version":"1.1.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.1.1","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution."},{"name":"checkout-page","type":"block","version":"1.0.1","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.1.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.1.0","title":"Store header","description":"Show store details, opening status and fulfilment."}]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"account-page","type":"block","version":"1.
|
|
1
|
+
{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"account-page","type":"block","version":"1.3.0","title":"Account page","description":"Show your profile, manage saved addresses, open your Zappie account and contact the branch or Zappie support.","requires":{"@zappie/sdk":"^0.1.4","@zappie/foundations":"^0.5.0","@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":"230280716e3c335b30aa3163b4a3d56a1d617be8e23ef194cab0a117ad15a9ef","content":"\"use client\";\n\nimport { SignInButton } from \"@/components/zappie/sign-in-button\";\nimport {\n contactLinks,\n ZappieAccountLink,\n type ZappieSupportContext,\n zappieSupportUrl,\n} from \"@zappie/foundations\";\nimport type { Branch } from \"@zappie/sdk\";\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/**\n * Show your profile and let you save or remove delivery addresses, with links to your orders, to\n * your Zappie account on the accounts portal, to the branch's phone and messaging link and to\n * Zappie support for a payment problem, and your site's version.\n */\nexport function AccountPage({\n customer,\n ordersHref = \"/orders\",\n branch,\n store,\n version,\n}: {\n /** Use the same client as your CustomerProvider. */\n customer: CustomerClient;\n ordersHref?: string;\n /** The branch whose phone and messaging link the \"Contact support\" row offers. Its name goes in the message to Zappie support. */\n branch?: Pick<Branch, \"phone\" | \"socialLinks\"> &\n Partial<Pick<Branch, \"name\">>;\n /** The store, named in the message to Zappie support. */\n store?: ZappieSupportContext[\"store\"];\n /** Your site's version, shown as the last row when you pass it. */\n version?: string;\n}) {\n const auth = useAuth();\n const contacts = branch ? contactLinks(branch) : [];\n const [page, setPage] = useState<string>();\n useEffect(() => setPage(window.location.href), []);\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 <ZappieAccountLink />\n {contacts.length > 0 && (\n <nav aria-label=\"Contact support\">\n <h3>Contact support</h3>\n {contacts.map((link) => (\n <a key={link.href} href={link.href} data-contact={link.type}>\n {link.label}\n </a>\n ))}\n </nav>\n )}\n <a\n href={zappieSupportUrl({ store, branch, page })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n data-contact=\"zappie\"\n >\n Problem with a payment? Message Zappie\n </a>\n {version && <p>Version: {version}</p>}\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zappie/kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "The registry of copy-in Zappie storefront components, installed with the zappie CLI.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"vite": "8.3.5",
|
|
21
21
|
"vitest": "^4.1.12",
|
|
22
22
|
"zod": "^4.6.7",
|
|
23
|
-
"@zappie/foundations": "^0.
|
|
24
|
-
"@zappie/sdk": "^0.2
|
|
23
|
+
"@zappie/foundations": "^0.5.0",
|
|
24
|
+
"@zappie/sdk": "^0.5.2",
|
|
25
25
|
"@zappie/tokens": "^0.1.3"
|
|
26
26
|
},
|
|
27
27
|
"license": "MIT",
|