@redeemid/emdash 0.0.16 → 0.0.18

package/src/components/BrowseControls.astro

@@ -0,0 +1,87 @@
+---
+/**
+ * Sort, filter and paging controls for a page of products (<Collection
+ * browse> and <ProductSearch>). A plain GET form: the choice lives in the
+ * page URL, so it can be shared, bookmarked and cached, and works without
+ * JavaScript. Filters are the ones Shopify offers for these products.
+ */
+import { browseHref, SEARCH_SORTS, SORTS, type Filter, type PageInfo, type Sort } from "../catalog.js";
+import { siteConfig } from "../site-config.js";
+import { text } from "../text.js";
+
+interface Props {
+	filters: Filter[];
+	pageInfo: PageInfo;
+	/** Search pages offer fewer sort orders. */
+	search?: boolean;
+	/** The search words, kept in the form. */
+	query?: string;
+	id: string;
+}
+
+const { filters, pageInfo, search = false, query, id } = Astro.props;
+const config = await siteConfig(Astro.locals);
+const url = Astro.url;
+const active = new Set(url.searchParams.getAll("filter"));
+const sort = url.searchParams.get("sort") ?? "";
+const labels: Record<Sort, string> = {
+	relevance: text(config, "Relevance"),
+	"best-selling": text(config, "Best selling"),
+	newest: text(config, "Newest"),
+	"price-asc": text(config, "Price, low to high"),
+	"price-desc": text(config, "Price, high to low"),
+	"title-asc": text(config, "Title, A to Z"),
+	"title-desc": text(config, "Title, Z to A"),
+};
+const sorts = search ? SEARCH_SORTS : SORTS.filter((s) => s !== "relevance");
+const lists = filters.filter((f) => f.type !== "PRICE_RANGE" && f.values.length > 0);
+const price = filters.find((f) => f.type === "PRICE_RANGE");
+const filtered = active.size > 0 || url.searchParams.has("price_min") || url.searchParams.has("price_max");
+const clearHref = browseHref(url, { filter: null, price_min: null, price_max: null });
+---
+
+<form method="get" action={url.pathname} class="redeemid-browse" aria-labelledby={`${id}-heading`}>
+	<h2 id={`${id}-heading`} style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap">{text(config, "Sort and filter")}</h2>
+	{query !== undefined && <input type="hidden" name="q" value={query} />}
+	<p class="redeemid-browse__sort">
+		<label for={`${id}-sort`}>{text(config, "Sort by")}</label>
+		<select id={`${id}-sort`} name="sort">
+			<option value="">{text(config, search ? "Relevance" : "Featured")}</option>
+			{sorts.filter((s) => !(search && s === "relevance")).map((s) => (
+				<option value={s} selected={sort === s}>{labels[s]}</option>
+			))}
+		</select>
+	</p>
+	{lists.map((f, i) => (
+		<fieldset class="redeemid-browse__filter">
+			<legend>{f.label}</legend>
+			{f.values.map((v, j) => (
+				<p>
+					<input type="checkbox" id={`${id}-f${i}-${j}`} name="filter" value={v.input} checked={active.has(v.input)} />
+					<label for={`${id}-f${i}-${j}`}>{text(config, "{label} ({count})", { label: v.label, count: v.count })}</label>
+				</p>
+			))}
+		</fieldset>
+	))}
+	{price && (
+		<fieldset class="redeemid-browse__filter">
+			<legend>{price.label || text(config, "Price")}</legend>
+			<p>
+				<label for={`${id}-min`}>{text(config, "From")}</label>
+				<input id={`${id}-min`} name="price_min" type="number" min="0" step="any" inputmode="decimal" value={url.searchParams.get("price_min") ?? ""} />
+				<label for={`${id}-max`}>{text(config, "To")}</label>
+				<input id={`${id}-max`} name="price_max" type="number" min="0" step="any" inputmode="decimal" value={url.searchParams.get("price_max") ?? ""} />
+			</p>
+		</fieldset>
+	)}
+	<p class="redeemid-browse__actions">
+		<button type="submit">{text(config, "Apply")}</button>
+		{filtered && <a href={clearHref}>{text(config, "Clear filters")}</a>}
+	</p>
+</form>
+{(pageInfo.hasPreviousPage || pageInfo.hasNextPage) && (
+	<nav class="redeemid-browse__pages" aria-label={text(config, "Pages")}>
+		{pageInfo.hasPreviousPage && pageInfo.startCursor && <a rel="prev" href={browseHref(url, { before: pageInfo.startCursor, after: null })}>{text(config, "Previous page")}</a>}
+		{pageInfo.hasNextPage && pageInfo.endCursor && <a rel="next" href={browseHref(url, { after: pageInfo.endCursor, before: null })}>{text(config, "Next page")}</a>}
+	</nav>
+)}

package/src/components/Cart.astro

@@ -1,7 +1,9 @@
 ---
 /**
- * Cart link with the item count from the visitor's Shopify cart. It goes
- * to that cart's Shopify checkout.
+ * Cart link with the item count from the visitor's Shopify cart. It goes to
+ * that cart's Shopify checkout, or to `href` (a cart page with <CartView>).
+ * With `drawer`, and <CartDrawer /> and <RedeemIDClient /> on the page, it
+ * opens the drawer instead; the link still works without JavaScript.
  */
 import { cartUrl } from "../access.js";
 import { readCart } from "../cart.js";
@@ -10,15 +12,19 @@ import { text } from "../text.js";
 
 interface Props {
 	label?: string;
+	/** A cart page to link to instead of checkout. */
+	href?: string;
+	/** Open the cart drawer. */
+	drawer?: boolean;
 }
 
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
-const { label = text(config, "Cart") } = Astro.props;
+const config = await siteConfig(Astro.locals);
+const { label = text(config, "Cart"), href, drawer = false } = Astro.props;
 const ref = await readCart(Astro.session);
 const count = ref?.count ?? 0;
 const here = Astro.url.pathname + Astro.url.search;
 ---
 
-<a class="redeemid-cart" href={cartUrl(here)} data-redeemid-cart-count={count}>
-	{label}{count > 0 && <span class="redeemid-cart__count"> ({count})</span>}
+<a class="redeemid-cart" href={href ?? cartUrl(here)} data-redeemid-cart-count={count} data-redeemid-cart-link={drawer ? "" : undefined}>
+	{label}<span class="redeemid-cart__count" hidden={count === 0}>{count > 0 ? ` (${count})` : ""}</span>
 </a>

package/src/components/CartDrawer.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * A cart that slides in over the page. Put it once in the site layout,
+ * with <RedeemIDClient />. Add to cart then opens it in place, and
+ * <Cart drawer /> opens it instead of going to checkout. It is a native
+ * modal dialog: focus stays inside while it's open, Escape closes it, and
+ * focus goes back to what opened it.
+ *
+ * Without JavaScript it never shows, and the cart forms and links work as
+ * they do on their own.
+ */
+import { siteConfig } from "../site-config.js";
+import { text } from "../text.js";
+
+interface Props {
+	title?: string;
+}
+
+const config = await siteConfig(Astro.locals);
+const { title = text(config, "Your cart") } = Astro.props;
+---
+
+<dialog class="redeemid-drawer" data-redeemid-cart-drawer aria-labelledby="redeemid-drawer-title">
+	<div class="redeemid-drawer__head">
+		<h2 id="redeemid-drawer-title">{title}</h2>
+		<button type="button" class="redeemid-drawer__close" data-redeemid-drawer-close>{text(config, "Close")}</button>
+	</div>
+	<p class="redeemid-drawer__status" role="status" data-redeemid-drawer-status></p>
+	<div class="redeemid-cartview redeemid-drawer__body" data-redeemid-drawer-body></div>
+</dialog>
+
+<style is:global>
+	/* Low-specificity defaults; a site's own styles win. */
+	:where(dialog.redeemid-drawer) {
+		box-sizing: border-box;
+		inset: 0 0 0 auto;
+		margin: 0;
+		height: 100dvh;
+		max-height: 100dvh;
+		width: min(28rem, 100vw);
+		max-width: 100vw;
+		padding: 1rem;
+		border: 0;
+		overflow-y: auto;
+	}
+	:where(dialog.redeemid-drawer)::backdrop {
+		background: rgb(0 0 0 / 0.4);
+	}
+	:where(.redeemid-drawer img) {
+		max-width: 5rem;
+		height: auto;
+	}
+	:where(.redeemid-drawer__head) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1rem;
+	}
+</style>

package/src/components/CartView.astro

@@ -20,7 +20,7 @@ interface Props {
 	empty?: string;
 }
 
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const config = await siteConfig(Astro.locals);
 const { productHref, empty = text(config, "Your cart is empty.") } = Astro.props;
 const ref = await readCart(Astro.session);
 let cart: CartDetails | null = null;
@@ -57,6 +57,7 @@ const code = cart?.discountCodes[0];
 							<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>}
+								{l.sellingPlan && <span> · {l.sellingPlan}</span>}
 							</p>
 							<p class="redeemid-cartview__price">{text(config, "{price} each · {total}", { price: money(l.price), total: money(l.total) })}</p>
 							<form method="post" action={action} class="redeemid-cartview__quantity">

package/src/components/Collection.astro

@@ -5,35 +5,47 @@
  * site can give every product its own page with <Product>.
  *
  *   <Collection handle="shop" productHref="/shop/{handle}/" />
+ *   <Collection handle="shop" productHref="/shop/{handle}/" browse />
+ *
+ * `browse` adds Shopify's filters, sort orders and paging, read from the
+ * page URL (so the page must be rendered on demand). `quickAdd` adds Add to
+ * cart on cards that need no choice.
  */
+import { browseFromUrl, collectionPage, type CollectionPage } from "../catalog.js";
 import { siteConfig } from "../site-config.js";
-import { collection as loadCollection, money, type Collection } from "../storefront.js";
-import { text } from "../text.js";
+import { collection as loadCollection, storeContext, type Collection } from "../storefront.js";
+import BrowseControls from "./BrowseControls.astro";
+import ProductGrid from "./ProductGrid.astro";
 
 interface Props {
 	handle: string;
-	/** How many products, 1 to 50. */
+	/** How many products (per page with `browse`), 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;
+	/** Filters, sorting and paging from the page URL. */
+	browse?: boolean;
+	quickAdd?: 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;
+const { handle, limit = 12, productHref, showTitle = false, browse = false, quickAdd = false } = Astro.props;
+const config = await siteConfig(Astro.locals);
+const context = storeContext(config, Astro.request);
+let c: Collection | CollectionPage | null = null;
 if (config) {
 	try {
-		c = await loadCollection(config, handle, limit);
+		c = browse ? await collectionPage(config, handle, browseFromUrl(Astro.url.searchParams, limit), { context }) : await loadCollection(config, handle, limit, undefined, context);
 	} catch {
 		c = null;
 	}
 }
-const href = (h: string) => productHref?.replaceAll("{handle}", encodeURIComponent(h));
+const page = c && "pageInfo" in c ? c : null;
+const id = `redeemid-collection-${handle}`;
 ---
 
-{c && c.products.length > 0 ? (
+{c && (c.products.length > 0 || page) ? (
 	<section class="redeemid-collection" data-redeemid-collection={c.handle}>
 		{showTitle && (
 			<>
@@ -41,15 +53,8 @@ const href = (h: string) => productHref?.replaceAll("{handle}", encodeURICompone
 				{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 ? text(config, "From {price}", { price: money(p.price) }) : "") : text(config, "Sold out")}</p>
-				</li>
-			))}
-		</ul>
+		{page && <BrowseControls filters={page.filters} pageInfo={page.pageInfo} id={id} />}
+		<ProductGrid products={c.products} productHref={productHref} quickAdd={quickAdd} />
 	</section>
 ) : (
 	<slot />

package/src/components/Content.astro

@@ -20,6 +20,10 @@
  *
  * Readers kept out get the wall (LockedPanel), with the "locked" slot on top.
  *
+ * `id` (the entry's id or slug) also applies the entry's own rule from the
+ * editor's Access panel; pass it in lists too when entries have their own
+ * rules.
+ *
  * Pass `id` on the entry's own page so drip and the meter apply: a rule's
  * `drip` keeps it shut until the member has held their level that many days,
  * and config `meter` lets signed-in readers open a few locked entries each
@@ -50,8 +54,8 @@ interface Props {
 
 const { value, collection = "", terms, id, title } = Astro.props;
 const split = splitAtPaywall(value);
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
-const entryRule = await entryRequirement(config, collection, terms);
+const config = await siteConfig(Astro.locals);
+const entryRule = await entryRequirement(config, collection, terms, id);
 // Bought on its own: the whole entry, no meter, no drip.
 const item = soldItem(value);
 const reader = item ? (await viewer(Astro)).member : null;
@@ -78,7 +82,7 @@ async function parts(blocks: unknown[]) {
 			continue;
 		}
 		const needs = section.levels.length ? [section.levels] : (entryRule ?? [[]]);
-		out.push({ blocks: section.blocks, verdict: await canRead(Astro, { collection, terms }, { required: needs }) });
+		out.push({ blocks: section.blocks, verdict: await canRead(Astro, { collection, terms, id }, { required: needs }) });
 	}
 	return out;
 }
@@ -118,7 +122,7 @@ const meterText =
 	!p.verdict || p.verdict.allowed ? (
 		p.blocks.length > 0 && <PortableText value={p.blocks} />
 	) : (
-		<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} />
+		<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} entry={id} />
 	),
 )}
 {verdict.allowed ? (
@@ -126,7 +130,7 @@ const meterText =
 		!p.verdict || p.verdict.allowed ? (
 			p.blocks.length > 0 && <PortableText value={p.blocks} />
 		) : (
-			<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} />
+			<LockedPanel reason={p.verdict.reason} required={p.verdict.required} held={p.verdict.viewer.levels} item={item} entry={id} />
 		),
 	)
 ) : (
@@ -138,6 +142,7 @@ const meterText =
 		meterLeft={verdict.meterLeft}
 		meterPeriod={verdict.meter?.period}
 		item={item}
+		entry={id}
 	>
 		<slot name="locked" />
 	</LockedPanel>

package/src/components/Contribution.astro

@@ -21,7 +21,7 @@ interface Props {
 	title?: string;
 }
 
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const config = await siteConfig(Astro.locals);
 const { handle, amounts = [5, 10, 25], initial = 10, label = text(config, "Give"), title } = Astro.props;
 let p: Product | null = null;
 if (config) {

package/src/components/Gate.astro

@@ -17,10 +17,12 @@ interface Props {
 	collection?: string;
 	terms?: Terms;
 	levels?: string[];
+	/** The entry's id or slug, so its own rule from the editor counts. */
+	id?: string;
 }
 
-const { collection = "", terms, levels } = Astro.props;
-const verdict = await canRead(Astro, { collection, terms }, levels ? { levels } : undefined);
+const { collection = "", terms, levels, id } = Astro.props;
+const verdict = await canRead(Astro, { collection, terms, id }, levels ? { levels } : undefined);
 ---
 
 {verdict.allowed ? (

package/src/components/LockedPanel.astro

@@ -27,13 +27,15 @@ interface Props {
 	meterPeriod?: "month" | "week";
 	/** The entry's "Sold on its own" block: offers "Buy just this". */
 	item?: SoldItem | null;
+	/** The entry's id or slug, for the browser client's wall_shown event. */
+	entry?: string;
 }
 
-const { reason, required = [], held = [], opensAt, meterLeft, meterPeriod, item } = Astro.props;
+const { reason, required = [], held = [], opensAt, meterLeft, meterPeriod, item, entry } = Astro.props;
 const opens = opensAt
 	? new Intl.DateTimeFormat("en-US", { dateStyle: "long", timeZone: "UTC" }).format(opensAt)
 	: null;
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const config = await siteConfig(Astro.locals);
 const missing = required.find((clause) => clause.length > 0 && !passes(held, [clause]));
 const level = missing ? config?.levels?.find((l) => l.slug === missing[0]) : undefined;
 const joinHref = level?.joinUrl ?? config?.join?.href;
@@ -54,7 +56,7 @@ if (item?.product && config && (reason === "sign_in" || reason === "upgrade" ||
 const here = Astro.url.pathname + Astro.url.search;
 ---
 
-<div class="redeemid-locked" data-redeemid-reason={reason} data-redeemid-level={level?.slug}>
+<div class="redeemid-locked" data-redeemid-reason={reason} data-redeemid-level={level?.slug} data-redeemid-entry={entry}>
 	<slot />
 	{level?.wall && (reason === "sign_in" || reason === "upgrade") && <p class="redeemid-locked__wall">{level.wall}</p>}
 	{reason === "sign_in" && (

package/src/components/MemberCard.astro

@@ -19,7 +19,7 @@ interface Props {
 	title?: string;
 }
 
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const config = await siteConfig(Astro.locals);
 const { title = text(config, "Your membership") } = Astro.props;
 const v = await viewer(Astro);
 const here = Astro.url.pathname + Astro.url.search;

package/src/components/Notices.astro

@@ -5,43 +5,18 @@
  * `messages` to reword any of them (config `text` does too, for every page).
  */
 import { siteConfig } from "../site-config.js";
+import { NOTICES as DEFAULTS } from "../notices.js";
 import { text as replace } from "../text.js";
 
 interface Props {
 	messages?: Record<string, string>;
 }
 
-const DEFAULTS: Record<string, string> = {
-	not_configured: "Sign-in isn't set up on this site yet.",
-	sign_in_unavailable: "Sign-in isn't available right now. Try again in a few minutes.",
-	sign_in_expired: "That sign-in took too long. Try again.",
-	staff_account: "This account can't sign in here. Use a different email.",
-	account_disabled: "Your account is turned off. Contact the store for help.",
-	too_many_requests: "Too many tries. Wait a minute, then try again.",
-	site_not_ready: "This site isn't ready for sign-in yet.",
-	email_required: "Your account needs an email address to sign in.",
-	token_failed: "Sign-in didn't finish. Try again.",
-	bad_id_token: "Sign-in didn't finish. Try again.",
-	identity_failed: "Sign-in didn't finish. Try again.",
-	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.",
-	preferences_saved: "Your preferences are saved.",
-	preferences_refused: "Some answers weren't saved. Check them and try again.",
-	preferences_unavailable: "Your preferences can't be saved right now. Try again in a few minutes.",
-	data_erased: "Your data on this site is deleted, and you're signed out.",
-	erase_unconfirmed: "Tick the box to confirm, then try again.",
-	account_unavailable: "Your account page isn't available right now. Try again in a few minutes.",
-};
+
 
 const { messages = {} } = Astro.props;
 const code = Astro.url.searchParams.get("redeemid_notice") ?? "";
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const config = await siteConfig(Astro.locals);
 const fallback = DEFAULTS[code];
 const text = code ? (messages[code] ?? (fallback ? replace(config, fallback) : undefined)) : undefined;
 ---

package/src/components/Plan.astro

@@ -25,7 +25,7 @@ interface Props {
 	heldLabel?: string;
 }
 
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const config = await siteConfig(Astro.locals);
 const { handle, label = text(config, "Join"), title, levels = [], heldLabel = text(config, "You're on this plan.") } = Astro.props;
 let p: Plan | null = null;
 if (config) {

package/src/components/Preferences.astro

@@ -20,7 +20,7 @@ interface Props {
 	label?: string;
 }
 
-const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const config = await siteConfig(Astro.locals);
 const { title = text(config, "Your preferences"), heading = "h2", label = text(config, "Save preferences") } = Astro.props;
 const v = await viewer(Astro);
 const m = v.member;