@redeemid/emdash 0.0.6 → 0.0.8

package/src/components/Plan.astro

@@ -4,8 +4,12 @@
  * checkout. Prices come from the Storefront API; the default slot shows if
  * the product can't be loaded.
  *
- *   <Plan handle="gold-membership" />
+ *   <Plan handle="gold-membership" levels={["gold"]} />
+ *
+ * With `levels`, members who hold one of them see "You're on this plan"
+ * in place of the button.
  */
+import { viewer } from "../access.js";
 import { siteConfig } from "../site-config.js";
 import { plan as loadPlan, type Plan } from "../storefront.js";
 
@@ -15,9 +19,12 @@ interface Props {
 	label?: string;
 	/** Heading override; defaults to the Shopify product title. */
 	title?: string;
+	/** The levels this plan gives. Members holding one see `heldLabel`, not the button. */
+	levels?: string[];
+	heldLabel?: string;
 }
 
-const { handle, label = "Join", title } = Astro.props;
+const { handle, label = "Join", title, levels = [], heldLabel = "You're on this plan." } = Astro.props;
 const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
 let p: Plan | null = null;
 if (config) {
@@ -31,14 +38,17 @@ const price = p?.price
 	? new Intl.NumberFormat("en-US", { style: "currency", currency: p.price.currencyCode }).format(Number(p.price.amount))
 	: null;
 const here = Astro.url.pathname + Astro.url.search;
+const held = levels.length > 0 && (await viewer(Astro)).levels.some((l) => levels.includes(l));
 ---
 
 {p ? (
-	<div class="redeemid-plan" data-redeemid-plan={p.handle}>
+	<div class:list={["redeemid-plan", { "is-held": held }]} data-redeemid-plan={p.handle}>
 		<h2 class="redeemid-plan__title">{title ?? p.title}</h2>
 		{price && <p class="redeemid-plan__price">{price}</p>}
 		{p.description && <p class="redeemid-plan__description">{p.description}</p>}
-		{p.availableForSale ? (
+		{held ? (
+			<p class="redeemid-plan__held">{heldLabel}</p>
+		) : p.availableForSale ? (
 			<form method="post" action="/_emdash/api/auth/redeemid/buy">
 				<input type="hidden" name="plan" value={p.handle} />
 				<input type="hidden" name="return" value={here} />

package/src/components/Product.astro

@@ -0,0 +1,78 @@
+---
+/**
+ * A Shopify product: image, title, price, description, a variant choice
+ * when it has several, a quantity, and "Add to cart" and "Buy now".
+ * Everything comes from the Storefront API; the default slot shows if the
+ * product can't be loaded.
+ *
+ *   <Product handle="harbor-tote" />
+ */
+import { siteConfig } from "../site-config.js";
+import { money, product as loadProduct, type Product } from "../storefront.js";
+
+interface Props {
+	handle: string;
+	/** Heading level for the title. */
+	heading?: "h1" | "h2" | "h3";
+	/** Leave out the description (for cards). */
+	compact?: boolean;
+	addLabel?: string;
+	buyLabel?: string;
+}
+
+const { handle, heading = "h2", compact = false, addLabel = "Add to cart", buyLabel = "Buy now" } = 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 available = p?.variants.filter((v) => v.availableForSale) ?? [];
+const first = available[0] ?? p?.variants[0];
+const here = Astro.url.pathname + Astro.url.search;
+const Heading = heading;
+const id = `redeemid-product-${handle}`;
+---
+
+{p ? (
+	<div class="redeemid-product" data-redeemid-product={p.handle}>
+		{p.image && <img class="redeemid-product__image" src={p.image.url} alt={p.image.altText ?? ""} loading="lazy" />}
+		<Heading class="redeemid-product__title">{p.title}</Heading>
+		{first && <p class="redeemid-product__price">{money(first.price)}</p>}
+		{!compact && p.description && <p class="redeemid-product__description">{p.description}</p>}
+		{available.length > 0 ? (
+			<form method="post" action="/_emdash/api/auth/redeemid/cart-edit">
+				<input type="hidden" name="action" value="add" />
+				<input type="hidden" name="product" value={p.handle} />
+				<input type="hidden" name="return" value={here} />
+				{p.variants.length > 1 ? (
+					<p>
+						<label for={`${id}-variant`}>Option</label>
+						<select id={`${id}-variant`} name="variant">
+							{p.variants.map((v) => (
+								<option value={v.id} disabled={!v.availableForSale}>
+									{v.title} ({money(v.price)}){!v.availableForSale && " sold out"}
+								</option>
+							))}
+						</select>
+					</p>
+				) : (
+					<input type="hidden" name="variant" value={first?.id} />
+				)}
+				<p>
+					<label for={`${id}-quantity`}>Quantity</label>
+					<input id={`${id}-quantity`} name="quantity" type="number" min="1" max="1000" value="1" inputmode="numeric" />
+				</p>
+				<button type="submit" name="then" value="back">{addLabel}</button>
+				<button type="submit" name="then" value="checkout">{buyLabel}</button>
+			</form>
+		) : (
+			<p class="redeemid-product__unavailable">Sold out.</p>
+		)}
+	</div>
+) : (
+	<slot />
+)}

package/src/index.ts

@@ -56,6 +56,7 @@ export function redeemid(config: RedeemIDConfig): AuthProviderDescriptor {
 			{ pattern: `${BASE}/webhook`, entrypoint: "@redeemid/emdash/routes/webhook.ts" },
 			{ pattern: `${BASE}/buy`, entrypoint: "@redeemid/emdash/routes/buy.ts" },
 			{ pattern: `${BASE}/cart`, entrypoint: "@redeemid/emdash/routes/cart.ts" },
+			{ pattern: `${BASE}/cart-edit`, entrypoint: "@redeemid/emdash/routes/cart-edit.ts" },
 			{ pattern: `${BASE}/account`, entrypoint: "@redeemid/emdash/routes/account.ts" },
 		],
 		publicRoutes: [`${BASE}/`],

package/src/plugin.ts

@@ -34,9 +34,17 @@ import { stores, type MemberRecord } from "./storage.js";
 import { PAGES, WIDGETS } from "./descriptor.js";
 import { VERSION } from "./version.js";
 
-import { MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK } from "./blocks-names.js";
+import {
+	COLLECTION_BLOCK,
+	CONTRIBUTION_BLOCK,
+	MEMBERS_BLOCK,
+	MEMBERS_END_BLOCK,
+	PAYWALL_BLOCK,
+	PLAN_BLOCK,
+	PRODUCT_BLOCK,
+} from "./blocks-names.js";
 
-export { MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK };
+export { COLLECTION_BLOCK, CONTRIBUTION_BLOCK, MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK, PRODUCT_BLOCK };
 
 function blocks(config: RedeemIDConfig) {
 	const levelOptions = [
@@ -89,6 +97,45 @@ function blocks(config: RedeemIDConfig) {
 				{ type: "text_input" as const, action_id: "handle", label: "Shopify product handle", placeholder: "gold-membership" },
 				{ type: "text_input" as const, action_id: "title", label: "Title (optional, Shopify's title otherwise)" },
 				{ type: "text_input" as const, action_id: "label", label: "Button label", placeholder: "Join" },
+				{
+					type: "checkbox" as const,
+					action_id: "levels",
+					label: "Levels this plan gives (members on them see \"You're on this plan\")",
+					options: (config.levels ?? []).map((l) => ({ label: l.name, value: l.slug })),
+				},
+			],
+		},
+		{
+			type: PRODUCT_BLOCK,
+			label: "Product",
+			icon: "tag",
+			description: "A Shopify product with Add to cart and Buy now",
+			placeholder: "Shopify product handle",
+			fields: [{ type: "text_input" as const, action_id: "handle", label: "Shopify product handle", placeholder: "harbor-tote" }],
+		},
+		{
+			type: COLLECTION_BLOCK,
+			label: "Collection",
+			icon: "grid",
+			description: "A Shopify collection's products as cards",
+			placeholder: "Shopify collection handle",
+			fields: [
+				{ type: "text_input" as const, action_id: "handle", label: "Shopify collection handle", placeholder: "shop" },
+				{ type: "text_input" as const, action_id: "limit", label: "How many products (up to 50)", placeholder: "12" },
+				{ type: "text_input" as const, action_id: "link", label: "Product page link, with {handle}", placeholder: "/shop/{handle}/" },
+			],
+		},
+		{
+			type: CONTRIBUTION_BLOCK,
+			label: "Contribution",
+			icon: "star",
+			description: "Pay what you want, with a Shopify product priced at 1.00",
+			placeholder: "Shopify product handle",
+			fields: [
+				{ type: "text_input" as const, action_id: "handle", label: "Shopify product handle (priced at 1.00)", placeholder: "support" },
+				{ type: "text_input" as const, action_id: "title", label: "Title (optional, Shopify's title otherwise)" },
+				{ type: "text_input" as const, action_id: "amounts", label: "Suggested amounts, comma separated", placeholder: "5, 10, 25" },
+				{ type: "text_input" as const, action_id: "label", label: "Button label", placeholder: "Give" },
 			],
 		},
 	];

package/src/routes/buy.ts

@@ -39,7 +39,7 @@ export const POST: APIRoute = async ({ request, locals, session, redirect }) =>
 			config,
 			current?.id ?? null,
 			{ variantId: p.variantId, sellingPlanId: p.sellingPlanId },
-			{ email: member?.email ?? null, buyerIp: request.headers.get("cf-connecting-ip") },
+			{ email: member?.email ?? null, attributes: { _redeemid_page: returnTo }, buyerIp: request.headers.get("cf-connecting-ip") },
 		);
 		saveCart(session, { id: cart.id, count: cart.totalQuantity });
 		return redirect(cart.checkoutUrl, 303);

package/src/routes/callback.ts

@@ -33,7 +33,11 @@ export const GET: APIRoute = async ({ request, locals, session, redirect }) => {
 	const clientId = env(ENV.clientId);
 	if (!config || !storeDomain(config) || !clientId || !emdash?.db || !session) return fail(redirect, returnTo, "not_configured");
 
-	if (url.searchParams.get("error")) return fail(redirect, returnTo, "sign_in_cancelled");
+	if (url.searchParams.get("error")) {
+		// Refresh found no open store session: sign in as usual.
+		if (flow?.refresh) return redirect(`/_emdash/api/auth/redeemid/login?return=${encodeURIComponent(returnTo)}`);
+		return fail(redirect, returnTo, "sign_in_cancelled");
+	}
 
 	const state = url.searchParams.get("state");
 	const code = url.searchParams.get("code");
@@ -105,7 +109,7 @@ export const GET: APIRoute = async ({ request, locals, session, redirect }) => {
 		session.regenerate?.();
 		session.set("user", { id: user.id });
 		session.set(SESSION_ID_TOKEN, tokens.idToken);
-		return redirect(returnTo);
+		return flow.refresh ? fail(redirect, returnTo, "refreshed") : redirect(returnTo);
 	} catch (e) {
 		const code = e instanceof ShopifyError ? e.code : e instanceof OAuthError ? "signup_not_allowed" : "sign_in_failed";
 		console.error("[redeemid] sign-in failed:", (e as Error).message);

package/src/routes/cart-edit.ts

@@ -0,0 +1,97 @@
+/**
+ * POST /_emdash/api/auth/redeemid/cart-edit: change the visitor's Shopify cart.
+ *
+ * Fields: `action` (add | update | remove | discount), `return`, and
+ * - add: `product` (handle), optional `variant` (must be one of that
+ *   product's variants, read again from Shopify), `quantity` (1 to 1000),
+ *   `then` = "checkout" to go straight to checkout;
+ * - update: `line` and `quantity` (0 removes the line);
+ * - remove: `line`;
+ * - discount: `code` (empty clears the codes).
+ *
+ * Prices, discounts and availability come from Shopify; nothing posted is
+ * trusted beyond the ids it names. Back to `return` with a notice:
+ * cart_added, cart_updated, discount_applied, discount_not_applicable,
+ * plan_unavailable, cart_empty or checkout_failed.
+ */
+
+import type { APIRoute } from "astro";
+
+import { safeReturn } from "../access.js";
+import { readCart, saveCart } from "../cart.js";
+import { readConfig, storeDomain } from "../config.js";
+import { memberForUser, stores } from "../storage.js";
+import { addToCart, cartDetails, product, removeLines, setDiscountCodes, updateLines } from "../storefront.js";
+import { fail } from "./shared.js";
+
+export const prerender = false;
+
+const MAX_QUANTITY = 1000;
+
+export const POST: APIRoute = async ({ request, locals, session, redirect }) => {
+	const form = await request.formData().catch(() => null);
+	const field = (k: string) => String(form?.get(k) ?? "").trim();
+	const returnTo = safeReturn(field("return") || "/");
+	const emdash = (locals as { emdash?: { config?: unknown; db?: unknown } }).emdash;
+	const config = readConfig(emdash?.config);
+	if (!config || !storeDomain(config)) return fail(redirect, returnTo, "not_configured");
+	const buyerIp = request.headers.get("cf-connecting-ip");
+	const action = field("action");
+
+	try {
+		if (action === "add") {
+			const handle = field("product");
+			const quantity = Number.parseInt(field("quantity") || "1", 10);
+			if (!/^[a-z0-9][a-z0-9-]*$/i.test(handle) || !Number.isFinite(quantity) || quantity < 1 || quantity > MAX_QUANTITY) {
+				return fail(redirect, returnTo, "plan_unavailable");
+			}
+			const p = await product(config, handle);
+			const wanted = field("variant");
+			const variant = wanted ? p?.variants.find((v) => v.id === wanted) : p?.variants.find((v) => v.availableForSale);
+			if (!p || !variant?.availableForSale) return fail(redirect, returnTo, "plan_unavailable");
+			const user = (await session?.get("user")) as { id?: string } | undefined;
+			const member = user?.id && emdash?.db ? await memberForUser(stores(emdash.db), user.id) : null;
+			const current = await readCart(session);
+			const cart = await addToCart(
+				config,
+				current?.id ?? null,
+				{ variantId: variant.id, sellingPlanId: p.sellingPlanId, quantity },
+				{ email: member?.email ?? null, attributes: { _redeemid_page: returnTo }, buyerIp },
+			);
+			saveCart(session, { id: cart.id, count: cart.totalQuantity });
+			return field("then") === "checkout" ? redirect(cart.checkoutUrl, 303) : fail(redirect, returnTo, "cart_added");
+		}
+
+		const ref = await readCart(session);
+		if (!ref) return fail(redirect, returnTo, "cart_empty");
+		const cart = await cartDetails(config, ref.id, { buyerIp });
+		if (!cart) {
+			saveCart(session, null);
+			return fail(redirect, returnTo, "cart_empty");
+		}
+		const line = field("line");
+		const owns = cart.lines.some((l) => l.id === line);
+
+		if (action === "update" || action === "remove") {
+			if (!owns) return fail(redirect, returnTo, "cart_updated");
+			const quantity = action === "remove" ? 0 : Number.parseInt(field("quantity"), 10);
+			if (!Number.isFinite(quantity) || quantity < 0 || quantity > MAX_QUANTITY) return fail(redirect, returnTo, "cart_updated");
+			const next = quantity === 0 ? await removeLines(config, cart.id, [line], { buyerIp }) : await updateLines(config, cart.id, [{ id: line, quantity }], { buyerIp });
+			saveCart(session, { id: next.id, count: next.totalQuantity });
+			return fail(redirect, returnTo, "cart_updated");
+		}
+
+		if (action === "discount") {
+			const code = field("code").slice(0, 100);
+			const next = await setDiscountCodes(config, cart.id, code ? [code] : [], { buyerIp });
+			saveCart(session, { id: next.id, count: next.totalQuantity });
+			if (!code) return fail(redirect, returnTo, "cart_updated");
+			const applied = next.discountCodes.find((d) => d.code.toLowerCase() === code.toLowerCase());
+			return fail(redirect, returnTo, applied?.applicable ? "discount_applied" : "discount_not_applicable");
+		}
+
+		return fail(redirect, returnTo, "cart_updated");
+	} catch {
+		return fail(redirect, returnTo, "checkout_failed");
+	}
+};

package/src/routes/login.ts

@@ -2,6 +2,9 @@
  * GET /_emdash/api/auth/redeemid/login?return=/path
  *
  * Starts Shopify customer account sign-in (authorization code + PKCE).
+ * With `refresh=1` it asks the store not to show a form (`prompt=none`):
+ * a member whose store session is still open comes straight back with their
+ * tags read again; anyone else is sent through the usual sign-in.
  */
 
 import type { APIRoute } from "astro";
@@ -16,6 +19,7 @@ export const prerender = false;
 export const GET: APIRoute = async ({ request, locals, session, redirect }) => {
 	const url = new URL(request.url);
 	const returnTo = safeReturn(url.searchParams.get("return"));
+	const refresh = url.searchParams.get("refresh") === "1";
 	const emdash = (locals as { emdash?: { config?: unknown } }).emdash;
 	const config = readConfig(emdash?.config);
 	const clientId = env(ENV.clientId);
@@ -30,6 +34,7 @@ export const GET: APIRoute = async ({ request, locals, session, redirect }) => {
 			verifier: randomToken(48),
 			returnTo,
 			at: Date.now(),
+			...(refresh ? { refresh: true } : {}),
 		};
 		session.set(SESSION_FLOW, flow);
 		return redirect(
@@ -40,6 +45,7 @@ export const GET: APIRoute = async ({ request, locals, session, redirect }) => {
 				nonce: flow.nonce,
 				challenge: await challengeFor(flow.verifier),
 				locale: request.headers.get("accept-language")?.split(",")[0]?.trim(),
+				...(refresh ? { prompt: "none" as const } : {}),
 			}),
 		);
 	} catch (e) {

package/src/routes/shared.ts

@@ -11,6 +11,8 @@ export interface Flow {
 	verifier: string;
 	returnTo: string;
 	at: number;
+	/** Started by Refresh membership (prompt=none). */
+	refresh?: boolean;
 }
 
 export const CALLBACK_PATH = "/_emdash/api/auth/redeemid/callback";

package/src/shopify.ts

@@ -97,7 +97,16 @@ export function base64url(bytes: Uint8Array): string {
 
 export function authorizeUrl(
 	d: Discovery,
-	args: { clientId: string; redirectUri: string; state: string; nonce: string; challenge: string; locale?: string },
+	args: {
+		clientId: string;
+		redirectUri: string;
+		state: string;
+		nonce: string;
+		challenge: string;
+		locale?: string;
+		/** "none": no sign-in form; the store answers with an error when the customer isn't signed in there. */
+		prompt?: "none";
+	},
 ): string {
 	const url = new URL(d.authorizationEndpoint);
 	url.searchParams.set("scope", SCOPES);
@@ -109,6 +118,7 @@ export function authorizeUrl(
 	url.searchParams.set("code_challenge", args.challenge);
 	url.searchParams.set("code_challenge_method", "S256");
 	if (args.locale) url.searchParams.set("ui_locales", args.locale);
+	if (args.prompt) url.searchParams.set("prompt", args.prompt);
 	return url.toString();
 }
 

package/src/storage.ts

@@ -35,8 +35,19 @@ export interface MemberRecord {
 	tagsSince?: Record<string, string>;
 	/** When the customer first signed in here, ISO. */
 	linkedAt?: string | null;
+	/** Tags Shopify has removed, with when each was held (newest last, at most 50). */
+	pastTags?: PastTag[];
 }
 
+/** A tag the customer held from `from` (when known) until `to`. */
+export interface PastTag {
+	tag: string;
+	from: string | null;
+	to: string;
+}
+
+const PAST_TAGS_KEPT = 50;
+
 /** A signed-in reader's meter for one period: the locked items they opened free. */
 export interface MeterRecord {
 	userId: string;
@@ -45,11 +56,18 @@ export interface MeterRecord {
 	items: string[];
 }
 
-/** Update `tagsSince` to the record's current tags: new tags start now, removed tags are dropped. */
+/**
+ * Update `tagsSince` to the record's current tags: new tags start now;
+ * removed tags move to `pastTags` with the dates they were held.
+ */
 export function stampTags(m: MemberRecord, now = new Date().toISOString()): MemberRecord {
 	const before = m.tagsSince ?? {};
 	const since: Record<string, string> = {};
 	for (const t of m.tags.map((t) => t.toLowerCase())) since[t] = before[t] ?? now;
+	const removed = Object.keys(before).filter((t) => !(t in since));
+	if (removed.length) {
+		m.pastTags = [...(m.pastTags ?? []), ...removed.map((tag) => ({ tag, from: before[tag] ?? null, to: now }))].slice(-PAST_TAGS_KEPT);
+	}
 	m.tagsSince = since;
 	return m;
 }