@redeemid/emdash 0.0.6 → 0.0.8

package/README.md

@@ -2,7 +2,7 @@
 
 Shopify customer accounts, member levels and paywalls for [EmDash](https://github.com/emdash-cms/emdash) sites. Shopify runs the store and the customer account; EmDash runs the content.
 
-**Status: 0.0.6, early.** Runs on Node and Cloudflare Workers. Sign-in, the member mirror, webhooks, levels, rules, the meter and drip, teasers, badges, the page gate, the Shopify cart and checkout are covered by an end-to-end test against a fake store.
+**Status: 0.0.8, early.** Runs on Node and Cloudflare Workers. Sign-in, the member mirror, webhooks, levels, rules, the meter and drip, teasers, badges, the page gate, the Shopify cart and checkout are covered by an end-to-end test against a fake store.
 
 ## What it does
 
@@ -13,11 +13,13 @@ Shopify customer accounts, member levels and paywalls for [EmDash](https://githu
 - **Meter and drip.** Signed-in readers may open a few locked entries free each month or week. A rule can also drip: members read its entries once they've held their level for so many days.
 - **Teasers and badges.** Locked entries can show their first paragraphs, up to a word count. `<AccessBadge>` names the level an entry needs and shows a lock to readers it keeps out.
 - **Plans, cart and checkout.** `<Plan>` shows a Shopify product's price and adds it to the visitor's Shopify cart; `<Cart>` shows the count and opens Shopify checkout.
+- **Member account card.** `<MemberCard>` shows members their levels with when each started, the levels they held before, the meter, and Refresh membership, which reads their tags from the store again.
 - **Account.** Members get an Account link to their Shopify customer account (orders, profile, addresses) and Sign out, which also ends the Shopify session.
 - **Paywall break block.** Editors write one body and drop a "Paywall break" block where members-only content starts, picking which levels may read on, or leaving it to the entry's rule. `<Content>` renders the body and leaves the rest off the page for everyone else.
 - **Members only block.** For a members part in the middle of a body: "Members only" (pick the levels) and "Members only: end". Everyone else sees the wall in its place and reads on after it.
 - **The wall.** Readers kept out see why and what to do next: sign in, or join, with each level's own wall text. `<Notices>` shows the messages sign-in, Buy, Cart and Account send readers back with.
 - **Plan block.** Editors add a Shopify product to any page with the "Plan" block: title, price and a buy button.
+- **Shop.** `<Product>`, `<Collection>` and `<CartView>` (with the Product and Collection blocks) give the site product pages, collection grids and a cart page with quantities and discount codes. `<Contribution>` (and its block) takes pay-what-you-want amounts. Carts note the page each sale started on.
 - **In the admin.** RedeemID shows under Plugins with a Members page (Shopify customers, tags, levels), a Status page (secrets, store discovery, the URLs to give Shopify, levels and rules) and a dashboard widget.
 - **Keeps members out of EmDash's own APIs**, so the gate is the only way to read locked content.
 
@@ -154,17 +156,47 @@ import Cart from "@redeemid/emdash/components/Cart.astro";
 <Cart />
 ```
 
-Sell a plan. `<Plan>` shows a Shopify product's title and price with a button that adds it to the visitor's Shopify cart and opens checkout (signed-in members check out with their email). Shopify Flow or an app tags the customer after the order, and access follows that tag:
+For an account page, `<MemberCard />` shows the member's levels (with when each started), levels they held before, how much of the meter they've used, and links to their store account, Refresh membership and Sign out. Visitors get a sign-in link. Refresh membership (`refreshUrl(returnTo)` in `@redeemid/emdash/access`) sends the member to the store with no sign-in form; a member still signed in there comes straight back with their tags read again and the `refreshed` notice, and anyone else goes through the usual sign-in. Use it after a purchase, when Shopify's tag webhook hasn't arrived yet.
+
+Sell a plan. `<Plan>` shows a Shopify product's title and price with a button that adds it to the visitor's Shopify cart and opens checkout (signed-in members check out with their email). Shopify Flow or an app tags the customer after the order, and access follows that tag. With `levels`, members who already hold one of them see "You're on this plan." (`heldLabel`) in place of the button; the Plan block has the same choice:
 
 ```astro
 ---
 import Plan from "@redeemid/emdash/components/Plan.astro";
 ---
-<Plan handle="gold-membership" label="Join Gold">
+<Plan handle="gold-membership" label="Join Gold" levels={["gold"]}>
 	<p>Shown if the product can't be loaded.</p>
 </Plan>
 ```
 
+### Shop
+
+Products, collections and the cart come from the Storefront API; Shopify works out prices, discounts, taxes and stock.
+
+```astro
+---
+import Product from "@redeemid/emdash/components/Product.astro";
+import Collection from "@redeemid/emdash/components/Collection.astro";
+import CartView from "@redeemid/emdash/components/CartView.astro";
+import Contribution from "@redeemid/emdash/components/Contribution.astro";
+---
+<!-- /shop/ -->
+<Collection handle="shop" productHref="/shop/{handle}/" showTitle />
+<!-- /shop/[handle]/ -->
+<Product handle={Astro.params.handle} heading="h1"><p>No such product.</p></Product>
+<!-- /cart/ -->
+<CartView productHref="/shop/{handle}/" />
+<!-- anywhere -->
+<Contribution handle="support" amounts={[5, 10, 25]} />
+```
+
+- `<Product>`: image, title, price, description, the variants (sold-out ones shown but not choosable), a quantity, Add to cart (back to the page with the `cart_added` notice) and Buy now (straight to checkout).
+- `<Collection>`: the collection's products (`limit`, up to 50) as cards linking to `productHref`.
+- `<CartView>`: each line with its price, a quantity to change (0 removes it) and Remove, a discount code field, the subtotal and total, and Checkout. Pages with it are sent `Cache-Control: private, no-store`.
+- `<Contribution>`: pay what you want. Make a Shopify product priced at 1.00; the amount the reader picks becomes the quantity, so Shopify charges exactly that.
+
+The forms post to `/_emdash/api/auth/redeemid/cart-edit`, which reads every product and variant from Shopify again and only changes lines in the visitor's own cart. A new cart carries the `_redeemid_page` attribute (the page the first item was added on), which shows on the order in Shopify admin; Shopify hides attributes starting with `_` at checkout. Editors get the same with the Product, Collection and Contribution blocks.
+
 Or ask directly:
 
 ```ts

package/docs/shopify-setup.md

@@ -53,4 +53,4 @@ The Workers free plan is enough: RedeemID is a native plugin and doesn't need sa
 3. Click **Sign in**, sign in with that customer's email, and you come back to the post, unlocked.
 4. Add or remove the tag in Shopify; the post opens or locks again once the webhook arrives.
 
-If sign-in sends you back with `?redeemid_notice=…`, the code says why: `not_configured` (secrets or `shop` missing), `sign_in_unavailable` (store discovery failed), `sign_in_expired`, `staff_account`, `site_not_ready`, `email_required`, `token_failed`, `bad_id_token`, `identity_failed`. A Buy button can return `plan_unavailable` (no such product, or sold out) or `checkout_failed`. The Cart link returns `cart_empty` when there's nothing in the cart, and Account returns `account_unavailable` when store discovery fails.
+If sign-in sends you back with `?redeemid_notice=…`, the code says why: `not_configured` (secrets or `shop` missing), `sign_in_unavailable` (store discovery failed), `sign_in_expired`, `staff_account`, `site_not_ready`, `email_required`, `token_failed`, `bad_id_token`, `identity_failed`. A Buy button can return `plan_unavailable` (no such product, or sold out) or `checkout_failed`. The Cart link returns `cart_empty` when there's nothing in the cart, and Account returns `account_unavailable` when store discovery fails. Cart changes return `cart_added`, `cart_updated`, `discount_applied` or `discount_not_applicable`. Refresh membership returns `refreshed` once it has read the member's tags again.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@redeemid/emdash",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"description": "Shopify customer accounts, member levels and paywalls for EmDash sites. Shopify runs commerce; EmDash runs content.",
 	"type": "module",
 	"license": "MIT",

package/src/access.ts

@@ -187,6 +187,61 @@ export function memberSince(member: MemberRecord, levels: LevelConfig[] = []): s
 	return starts[0] ?? member.linkedAt ?? null;
 }
 
+export interface HeldLevel {
+	slug: string;
+	name: string;
+	/** When the level started (see memberSince), ISO, or null when unknown. */
+	since: string | null;
+}
+
+export interface PastLevel {
+	slug: string;
+	name: string;
+	from: string | null;
+	to: string;
+}
+
+/**
+ * The member's levels now (with when each started) and the levels they held
+ * before (from the tags Shopify has since removed), newest first.
+ */
+export function membership(member: MemberRecord, levels: LevelConfig[] = []): { current: HeldLevel[]; past: PastLevel[] } {
+	const held = levelsFor(member.tags, levels);
+	const current = held.map((slug) => {
+		const level = levels.find((l) => l.slug === slug)!;
+		return { slug, name: level.name, since: memberSince({ ...member, linkedAt: null }, [level]) };
+	});
+	const pastTags = member.pastTags ?? [];
+	const past: PastLevel[] = [];
+	for (const level of levels) {
+		if (held.includes(level.slug)) continue;
+		const wanted = new Set(level.tags.map((t) => t.toLowerCase()));
+		const spans = pastTags.filter((p) => wanted.has(p.tag));
+		if (spans.length === 0) continue;
+		const froms = spans.map((p) => p.from).filter((d): d is string => Boolean(d)).sort();
+		const to = spans.map((p) => p.to).sort().at(-1)!;
+		past.push({ slug: level.slug, name: level.name, from: froms[0] ?? null, to });
+	}
+	past.sort((a, b) => (a.to < b.to ? 1 : a.to > b.to ? -1 : 0));
+	return { current, past };
+}
+
+/** How much of this period's meter the signed-in reader has used, or null when no meter runs. */
+export async function meterUsage(astro: AstroLike): Promise<{ used: number; limit: number; period: "month" | "week" } | null> {
+	const locals = astro.locals as Locals;
+	const meter = siteConfig(locals.emdash?.config)?.meter;
+	const user = locals.user;
+	const db = locals.emdash?.db;
+	if (!meter || !(meter.limit > 0) || !user?.id || !db) return null;
+	const period = meter.period ?? "month";
+	try {
+		const record = await stores(db).meter.get(`${user.id}:${periodKey(new Date(), period)}`);
+		return { used: Math.min(record?.items.length ?? 0, meter.limit), limit: meter.limit, period };
+	} catch {
+		return null;
+	}
+}
+
 /** When drip opens an entry for this member: `since` plus `days`. */
 export function dripOpensAt(since: string | null, days: number): Date | null {
 	if (!since || days <= 0) return null;
@@ -355,6 +410,11 @@ export function accountUrl(returnTo = "/"): string {
 	return `/_emdash/api/auth/redeemid/account?return=${encodeURIComponent(safeReturn(returnTo))}`;
 }
 
+/** Re-read the member's tags from the store without a sign-in form when their store session is still open. */
+export function refreshUrl(returnTo = "/"): string {
+	return `/_emdash/api/auth/redeemid/login?refresh=1&return=${encodeURIComponent(safeReturn(returnTo))}`;
+}
+
 export function signOutUrl(returnTo = "/"): string {
 	return `/_emdash/api/auth/redeemid/logout?return=${encodeURIComponent(safeReturn(returnTo))}`;
 }

package/src/blocks/CollectionBlock.astro

@@ -0,0 +1,22 @@
+---
+/** The "Collection" block: a Shopify collection's products as cards. */
+import Collection from "../components/Collection.astro";
+
+interface Props {
+	node: { handle?: string; limit?: string; link?: string };
+}
+
+const { node } = Astro.props;
+const handle = (node.handle ?? "").trim();
+const limit = Number.parseInt(node.limit ?? "", 10);
+const link = (node.link ?? "").trim();
+---
+
+{handle && (
+	<Collection
+		handle={handle}
+		limit={Number.isFinite(limit) ? limit : 12}
+		productHref={link.startsWith("/") && link.includes("{handle}") ? link : undefined}
+		showTitle
+	/>
+)}

package/src/blocks/ContributionBlock.astro

@@ -0,0 +1,24 @@
+---
+/** The "Contribution" block: pay what you want with a 1.00 Shopify product. */
+import Contribution from "../components/Contribution.astro";
+
+interface Props {
+	node: { handle?: string; title?: string; label?: string; amounts?: string };
+}
+
+const { node } = Astro.props;
+const handle = (node.handle ?? "").trim();
+const amounts = (node.amounts ?? "")
+	.split(",")
+	.map((a) => Number.parseInt(a.trim(), 10))
+	.filter((a) => Number.isFinite(a) && a > 0 && a <= 1000);
+---
+
+{handle && (
+	<Contribution
+		handle={handle}
+		title={node.title?.trim() || undefined}
+		label={node.label?.trim() || "Give"}
+		amounts={amounts.length ? amounts : undefined}
+	/>
+)}

package/src/blocks/PlanBlock.astro

@@ -3,11 +3,11 @@
 import Plan from "../components/Plan.astro";
 
 interface Props {
-	node: { handle?: string; title?: string; label?: string };
+	node: { handle?: string; title?: string; label?: string; levels?: string[] };
 }
 
 const { node } = Astro.props;
 const handle = (node.handle ?? "").trim();
 ---
 
-{handle && <Plan handle={handle} title={node.title?.trim() || undefined} label={node.label?.trim() || "Join"} />}
+{handle && <Plan handle={handle} title={node.title?.trim() || undefined} label={node.label?.trim() || "Join"} levels={Array.isArray(node.levels) ? node.levels : []} />}

package/src/blocks/ProductBlock.astro

@@ -0,0 +1,12 @@
+---
+/** The "Product" block: a Shopify product with Add to cart and Buy now. */
+import Product from "../components/Product.astro";
+
+interface Props {
+	node: { handle?: string };
+}
+
+const handle = (Astro.props.node.handle ?? "").trim();
+---
+
+{handle && <Product handle={handle} heading="h3" />}

package/src/blocks/index.ts

@@ -3,11 +3,17 @@
  * EmDash from the plugin's `componentsEntry`.
  */
 import Marker from "./PaywallBreak.astro";
+import CollectionBlock from "./CollectionBlock.astro";
+import ContributionBlock from "./ContributionBlock.astro";
 import PlanBlock from "./PlanBlock.astro";
+import ProductBlock from "./ProductBlock.astro";
 
 export const blockComponents = {
 	"redeemid-paywall": Marker,
 	"redeemid-members": Marker,
 	"redeemid-members-end": Marker,
 	"redeemid-plan": PlanBlock,
+	"redeemid-product": ProductBlock,
+	"redeemid-collection": CollectionBlock,
+	"redeemid-contribution": ContributionBlock,
 };

package/src/blocks-names.ts

@@ -1,6 +1,9 @@
 /** Portable Text block types RedeemID adds to the editor. */
 export const PAYWALL_BLOCK = "redeemid-paywall";
 export const PLAN_BLOCK = "redeemid-plan";
+export const PRODUCT_BLOCK = "redeemid-product";
+export const COLLECTION_BLOCK = "redeemid-collection";
+export const CONTRIBUTION_BLOCK = "redeemid-contribution";
 /** Starts a members-only part of the body; it runs to the next end block. */
 export const MEMBERS_BLOCK = "redeemid-members";
 export const MEMBERS_END_BLOCK = "redeemid-members-end";

package/src/components/CartView.astro

@@ -0,0 +1,97 @@
+---
+/**
+ * The visitor's Shopify cart for a cart page: each line with its price and
+ * a quantity to change or remove, a discount code, the totals, and
+ * Checkout. Shopify works out prices and discounts; changes go through
+ * the cart-edit route and come back here with a notice.
+ *
+ *   <CartView />
+ */
+import { cartUrl } from "../access.js";
+import { readCart, saveCart } from "../cart.js";
+import { siteConfig } from "../site-config.js";
+import { cartDetails, money, type CartDetails } from "../storefront.js";
+
+interface Props {
+	/** Link for each line's product; `{handle}` is replaced. */
+	productHref?: string;
+	/** Shown when the cart is empty. */
+	empty?: string;
+}
+
+const { productHref, empty = "Your cart is empty." } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const ref = await readCart(Astro.session);
+let cart: CartDetails | null = null;
+let failed = false;
+if (config && ref) {
+	try {
+		cart = await cartDetails(config, ref.id, { buyerIp: Astro.request.headers.get("cf-connecting-ip") });
+		if (!cart) saveCart(Astro.session, null);
+		else if (cart.totalQuantity !== ref.count) saveCart(Astro.session, { id: cart.id, count: cart.totalQuantity });
+	} catch {
+		failed = true;
+	}
+}
+// A cart page is the visitor's own.
+Astro.response.headers.set("Cache-Control", "private, no-store");
+const here = Astro.url.pathname;
+const href = (h: string) => productHref?.replaceAll("{handle}", encodeURIComponent(h));
+const action = "/_emdash/api/auth/redeemid/cart-edit";
+const code = cart?.discountCodes[0];
+---
+
+<section class="redeemid-cartview" data-redeemid-cart-count={cart?.totalQuantity ?? 0}>
+	{failed ? (
+		<p>Your cart isn't available right now. Try again in a few minutes.</p>
+	) : !cart || cart.lines.length === 0 ? (
+		<p class="redeemid-cartview__empty">{empty}</p>
+	) : (
+		<>
+			<ul class="redeemid-cartview__lines">
+				{cart.lines.map((l) => (
+					<li class="redeemid-cartview__line" data-redeemid-line={l.id}>
+						{l.image && <img src={l.image.url} alt={l.image.altText ?? ""} loading="lazy" />}
+						<div class="redeemid-cartview__item">
+							<p class="redeemid-cartview__name">
+								{href(l.productHandle) ? <a href={href(l.productHandle)}>{l.productTitle}</a> : l.productTitle}
+								{l.variantTitle && l.variantTitle !== "Default Title" && <span> · {l.variantTitle}</span>}
+							</p>
+							<p class="redeemid-cartview__price">{money(l.price)} each · {money(l.total)}</p>
+							<form method="post" action={action} class="redeemid-cartview__quantity">
+								<input type="hidden" name="action" value="update" />
+								<input type="hidden" name="line" value={l.id} />
+								<input type="hidden" name="return" value={here} />
+								<label for={`q-${l.id}`}>Quantity</label>
+								<input id={`q-${l.id}`} name="quantity" type="number" min="0" max="1000" value={l.quantity} inputmode="numeric" />
+								<button type="submit">Update</button>
+							</form>
+							<form method="post" action={action}>
+								<input type="hidden" name="action" value="remove" />
+								<input type="hidden" name="line" value={l.id} />
+								<input type="hidden" name="return" value={here} />
+								<button type="submit" class="redeemid-cartview__remove">Remove<span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap"> {l.productTitle}</span></button>
+							</form>
+						</div>
+					</li>
+				))}
+			</ul>
+			<form method="post" action={action} class="redeemid-cartview__discount">
+				<input type="hidden" name="action" value="discount" />
+				<input type="hidden" name="return" value={here} />
+				<label for="redeemid-discount">Discount code</label>
+				<input id="redeemid-discount" name="code" type="text" value={code?.code ?? ""} autocomplete="off" />
+				<button type="submit">Apply</button>
+				{code && !code.applicable && <p class="redeemid-cartview__code-note">{code.code} doesn't apply to this cart.</p>}
+			</form>
+			<dl class="redeemid-cartview__totals">
+				<dt>Subtotal</dt>
+				<dd>{money(cart.subtotal)}</dd>
+				<dt>Total</dt>
+				<dd>{money(cart.total)}</dd>
+			</dl>
+			<p class="redeemid-cartview__note">Taxes and shipping are worked out at checkout.</p>
+			<a class="redeemid-cartview__checkout" href={cartUrl(here)}>Checkout</a>
+		</>
+	)}
+</section>

package/src/components/Collection.astro

@@ -0,0 +1,55 @@
+---
+/**
+ * A Shopify collection as a grid of product cards: image, title, lowest
+ * price. Each card links to `productHref` with `{handle}` filled in, so the
+ * site can give every product its own page with <Product>.
+ *
+ *   <Collection handle="shop" productHref="/shop/{handle}/" />
+ */
+import { siteConfig } from "../site-config.js";
+import { collection as loadCollection, money, type Collection } from "../storefront.js";
+
+interface Props {
+	handle: string;
+	/** How many products, 1 to 50. */
+	limit?: number;
+	/** Link for each product; `{handle}` is replaced. Leave out for cards without links. */
+	productHref?: string;
+	/** Show the collection's title and description above the grid. */
+	showTitle?: boolean;
+}
+
+const { handle, limit = 12, productHref, showTitle = false } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+let c: Collection | null = null;
+if (config) {
+	try {
+		c = await loadCollection(config, handle, limit);
+	} catch {
+		c = null;
+	}
+}
+const href = (h: string) => productHref?.replaceAll("{handle}", encodeURIComponent(h));
+---
+
+{c && c.products.length > 0 ? (
+	<section class="redeemid-collection" data-redeemid-collection={c.handle}>
+		{showTitle && (
+			<>
+				<h2 class="redeemid-collection__title">{c.title}</h2>
+				{c.description && <p class="redeemid-collection__description">{c.description}</p>}
+			</>
+		)}
+		<ul class="redeemid-collection__grid">
+			{c.products.map((p) => (
+				<li class="redeemid-collection__item" data-redeemid-product={p.handle}>
+					{p.image && <img src={p.image.url} alt={p.image.altText ?? ""} loading="lazy" />}
+					<h3>{href(p.handle) ? <a href={href(p.handle)}>{p.title}</a> : p.title}</h3>
+					<p class="redeemid-collection__price">{p.availableForSale ? (p.price ? `From ${money(p.price)}` : "") : "Sold out"}</p>
+				</li>
+			))}
+		</ul>
+	</section>
+) : (
+	<slot />
+)}

package/src/components/Contribution.astro

@@ -0,0 +1,74 @@
+---
+/**
+ * Pay what you want: the reader picks an amount and checks out. Set up a
+ * Shopify product priced at 1.00 (one unit of the currency); the amount
+ * becomes the line's quantity, so Shopify charges exactly what they chose.
+ * With another price the field asks for a quantity instead.
+ *
+ *   <Contribution handle="support-the-newsroom" amounts={[5, 10, 25]} />
+ */
+import { siteConfig } from "../site-config.js";
+import { money, product as loadProduct, type Product } from "../storefront.js";
+
+interface Props {
+	handle: string;
+	/** Suggested amounts, as buttons. */
+	amounts?: number[];
+	/** The amount filled in to start with. */
+	initial?: number;
+	label?: string;
+	title?: string;
+}
+
+const { handle, amounts = [5, 10, 25], initial = 10, label = "Give", title } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+let p: Product | null = null;
+if (config) {
+	try {
+		p = await loadProduct(config, handle);
+	} catch {
+		p = null;
+	}
+}
+const variant = p?.variants.find((v) => v.availableForSale);
+const unit = variant ? Number(variant.price.amount) === 1 : false;
+const currency = variant?.price.currencyCode ?? "USD";
+const symbol = new Intl.NumberFormat("en-US", { style: "currency", currency }).formatToParts(0).find((x) => x.type === "currency")?.value ?? "";
+const here = Astro.url.pathname + Astro.url.search;
+const id = `redeemid-give-${handle}`;
+---
+
+{p && variant ? (
+	<form class="redeemid-contribution" method="post" action="/_emdash/api/auth/redeemid/cart-edit" data-redeemid-product={p.handle}>
+		<h2 class="redeemid-contribution__title">{title ?? p.title}</h2>
+		{p.description && <p>{p.description}</p>}
+		<input type="hidden" name="action" value="add" />
+		<input type="hidden" name="product" value={p.handle} />
+		<input type="hidden" name="variant" value={variant.id} />
+		<input type="hidden" name="return" value={here} />
+		<input type="hidden" name="then" value="checkout" />
+		{unit ? (
+			<>
+				{amounts.length > 0 && (
+					<p class="redeemid-contribution__amounts">
+						{amounts.map((a) => (
+							<button type="submit" name="quantity" value={String(a)}>{symbol}{a}</button>
+						))}
+					</p>
+				)}
+				<p>
+					<label for={`${id}-amount`}>Another amount ({currency})</label>
+					<input id={`${id}-amount`} name="quantity" type="number" min="1" max="1000" step="1" value={initial} inputmode="numeric" />
+				</p>
+			</>
+		) : (
+			<p>
+				<label for={`${id}-amount`}>Quantity ({money(variant.price)} each)</label>
+				<input id={`${id}-amount`} name="quantity" type="number" min="1" max="1000" value="1" inputmode="numeric" />
+			</p>
+		)}
+		<button type="submit">{label}</button>
+	</form>
+) : (
+	<slot />
+)}

package/src/components/MemberCard.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * The member's own account card, for an account page: their levels with
+ * when each started, levels they held before, the meter, and links to the
+ * store account, Refresh membership and Sign out. Visitors get a sign-in link.
+ *
+ *   <MemberCard />
+ *
+ * Everything shown comes from the mirrored Shopify customer; Refresh
+ * membership reads it from the store again.
+ */
+import { accountUrl, membership, meterUsage, refreshUrl, signInUrl, signOutUrl, viewer } from "../access.js";
+import { siteConfig } from "../site-config.js";
+
+interface Props {
+	/** Heading text; the member's first name is added after it. */
+	title?: string;
+}
+
+const { title = "Your membership" } = Astro.props;
+const v = await viewer(Astro);
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const here = Astro.url.pathname + Astro.url.search;
+const m = v.member;
+const disabled = m?.status === "disabled";
+const { current, past } = m && !disabled ? membership(m, config?.levels) : { current: [], past: [] };
+const meter = v.signedIn ? await meterUsage(Astro) : null;
+const date = (iso: string | null) => {
+	if (!iso) return null;
+	const t = Date.parse(iso);
+	return Number.isNaN(t) ? null : new Intl.DateTimeFormat("en-US", { dateStyle: "long", timeZone: "UTC" }).format(new Date(t));
+};
+const name = [m?.firstName, m?.lastName].filter(Boolean).join(" ");
+const join = config?.join;
+---
+
+<section class="redeemid-member" data-redeemid-signed-in={v.signedIn ? "true" : "false"}>
+	{v.signedIn ? (
+		<>
+			<h2 class="redeemid-member__title">{title}</h2>
+			{(name || m?.email) && (
+				<p class="redeemid-member__who">
+					{name && <strong>{name}</strong>}
+					{m?.email && <span>{m.email}</span>}
+				</p>
+			)}
+			{disabled ? (
+				<p class="redeemid-member__disabled">Your account is turned off. Contact the store for help.</p>
+			) : current.length > 0 ? (
+				<ul class="redeemid-member__levels">
+					{current.map((l) => (
+						<li data-redeemid-level={l.slug}>
+							<strong>{l.name}</strong>
+							{date(l.since) && <> since <time datetime={l.since ?? undefined}>{date(l.since)}</time></>}
+						</li>
+					))}
+				</ul>
+			) : (
+				<p class="redeemid-member__none">
+					You don't have a membership yet.{join && <> <a href={join.href}>{join.label ?? "Become a member"}</a></>}
+				</p>
+			)}
+			{past.length > 0 && (
+				<>
+					<h3 class="redeemid-member__subtitle">Before</h3>
+					<ul class="redeemid-member__past">
+						{past.map((l) => (
+							<li data-redeemid-level={l.slug}>
+								{l.name}
+								{date(l.from) ? `, ${date(l.from)} to ${date(l.to)}` : `, until ${date(l.to)}`}
+							</li>
+						))}
+					</ul>
+				</>
+			)}
+			{meter && current.length === 0 && !disabled && (
+				<p class="redeemid-member__meter" data-redeemid-used={meter.used}>
+					Free reads {meter.period === "week" ? "this week" : "this month"}: {meter.used} of {meter.limit} used.
+				</p>
+			)}
+			<p class="redeemid-member__actions">
+				<a href={accountUrl(here)}>Orders and details</a>
+				<a href={refreshUrl(here)}>Refresh membership</a>
+			</p>
+			<form method="post" action={signOutUrl("/")}>
+				<button type="submit">Sign out</button>
+			</form>
+			<p class="redeemid-member__note">Just bought a plan? It can take a minute to show here. Refresh membership checks again.</p>
+		</>
+	) : (
+		<p>
+			<a href={signInUrl(here)}>{config?.label ?? "Sign in"}</a> to see your membership.
+		</p>
+	)}
+</section>

package/src/components/Notices.astro

@@ -21,6 +21,11 @@ const DEFAULTS: Record<string, string> = {
 	plan_unavailable: "That plan isn't available right now.",
 	checkout_failed: "Checkout didn't open. Try again.",
 	cart_empty: "Your cart is empty.",
+	cart_added: "Added to your cart.",
+	cart_updated: "Your cart is updated.",
+	discount_applied: "Discount applied.",
+	discount_not_applicable: "That discount code doesn't apply to this cart.",
+	refreshed: "Your membership is up to date.",
 	account_unavailable: "Your account page isn't available right now. Try again in a few minutes.",
 };