@redeemid/emdash 0.0.30 → 0.0.32

package/src/setup.ts

@@ -1,19 +1,19 @@
 /**
- * Plugins → RedeemID → Setup: connecting a store, step by step, from the
- * admin alone. Each step says what to do in Shopify (with the exact values
+ * RedeemID → Connection: connecting a store, step by step, from the admin
+ * alone, one tab per step. Each step says what to do in Shopify (with the exact values
  * to paste), what to set on the site, and has a button for whatever
  * RedeemID can do itself: register the webhooks, add the first level.
  *
  * Nothing about progress is stored. Each step's state comes from the site
- * as it is (setupFacts), so opening Setup again picks up where things stand
- * and it always agrees with the Status page.
+ * as it is (setupFacts), so opening Connection again picks up where things stand
+ * and it always agrees with the Status tab.
  *
  * Secrets stay where they are today, in the site's environment: the wizard
  * checks them and gives the command to set each one, and never stores one.
  * It writes only what staff can already write (a level, through Access) and
  * never grants access: levels still come only from Shopify tags.
  *
- * setupSteps() and setupPage() are pure.
+ * setupSteps() and setupPanels() are pure.
  */
 
 import { adminConfigured, adminScopes, grantedScopes, topicName, webhookSubscriptions, WEBHOOK_TOPICS } from "./admin-api.js";
@@ -24,7 +24,7 @@ import type { Stores } from "./storage.js";
 type Toast = { message: string; type: "success" | "error" | "info" };
 export type Blocks = { blocks: unknown[]; toast?: Toast };
 
-/** Scopes the webhook app needs for staff tools and webhook registration. */
+/** Scopes the Admin API app needs for staff tools and webhook registration. */
 export const SETUP_SCOPES = ["read_customers", "write_customers"] as const;
 
 export const CALLBACK = "/_emdash/api/auth/redeemid/callback";
@@ -134,8 +134,8 @@ export function setupSteps(f: SetupFacts): Step[] {
 	return [
 		{ key: "store", title: "Connect the store", state: store ? "done" : "todo" },
 		{ key: "sign_in", title: "Create the sign-in client", state: signIn ? "done" : store ? "todo" : "waiting", waitingFor: "Connect the store first." },
-		{ key: "app", title: "Connect the webhook app", state: app ? "done" : store ? "todo" : "waiting", waitingFor: "Connect the store first." },
-		{ key: "webhooks", title: "Register the webhooks", state: hooks ? "done" : app ? "todo" : "waiting", waitingFor: "Connect the webhook app first: webhooks are registered through it." },
+		{ key: "app", title: "Connect the Admin API app", state: app ? "done" : store ? "todo" : "waiting", waitingFor: "Connect the store first." },
+		{ key: "webhooks", title: "Register the webhooks", state: hooks ? "done" : app ? "todo" : "waiting", waitingFor: "Connect the Admin API app first: webhooks are registered through it." },
 		{ key: "level", title: "Create your first level", state: level ? "done" : "todo" },
 		{ key: "try", title: "Try a sign-in", state: f.signedIn > 0 ? "done" : ready ? "todo" : "waiting", waitingFor: "Finish the steps above first." },
 		{ key: "storefront", title: "Add Storefront tokens (for plans and the shop)", state: f.storefront ? "done" : "optional" },
@@ -182,7 +182,7 @@ function stepBlocks(step: Step, f: SetupFacts): unknown[] {
 					text: "In Shopify admin, open Sales channels, then Headless (add the channel if it isn't there), and Create storefront. Name it after this site. Open its Customer Account API settings, pick a client type (Public needs no secret; Confidential gives one) and, under Application setup, add these:",
 				},
 				{
-					type: "fields",
+					type: "redeemid_copy",
 					fields: [
 						{ label: "Callback URI", value: `${f.origin}${CALLBACK}` },
 						{ label: "JavaScript origin (public clients)", value: f.origin },
@@ -200,7 +200,7 @@ function stepBlocks(step: Step, f: SetupFacts): unknown[] {
 					? `Shopify refused the app: ${f.admin} The app must be installed on this store and be in the same Shopify organization.`
 					: f.admin === "ok"
 						? `The app is connected but lacks ${missingScopes(f).join(" and ")}. Add the scopes, release a new version and let the store accept it.`
-						: "Shopify signs webhooks with an app's client secret, and RedeemID uses the same app to register webhooks and to resync members.";
+						: "RedeemID uses an Admin API app for the staff tools (resyncs, tag edits, member lookups) and to register webhooks, and Shopify signs webhooks with its client secret.";
 			return [
 				...out,
 				{ type: "section", text: why },
@@ -266,34 +266,29 @@ function stepBlocks(step: Step, f: SetupFacts): unknown[] {
 	return out;
 }
 
-/** The Setup page. Pure. */
-export function setupPage(f: SetupFacts, toast?: Toast): Blocks {
-	const steps = setupSteps(f);
-	const required = steps.filter((s) => s.state !== "optional" && s.key !== "storefront");
-	const done = required.filter((s) => s.state === "done").length;
-	return {
+/** Connection's tab address for each step (/connection/sign-in). */
+export const STEP_TABS: Record<Step["key"], string> = { store: "store", sign_in: "sign-in", app: "app", webhooks: "webhooks", level: "level", try: "try", storefront: "storefront" };
+const SHORT: Record<Step["key"], string> = { store: "Store", sign_in: "Sign-in", app: "Admin app", webhooks: "Webhooks", level: "First level", try: "Try it", storefront: "Storefront" };
+
+/** The steps that count toward "set up" (Storefront is optional). */
+export const requiredSteps = (steps: Step[]) => steps.filter((s) => s.key !== "storefront");
+
+/**
+ * One tab per step, for Connection: the step, with a Check again button
+ * until it's done. Labels carry a check mark once done. Pure.
+ */
+export function setupPanels(f: SetupFacts): Array<{ tab: string; label: string; blocks: unknown[] }> {
+	return setupSteps(f).map((step) => ({
+		tab: STEP_TABS[step.key],
+		label: step.state === "done" ? `${SHORT[step.key]} ✓` : SHORT[step.key],
 		blocks: [
-			{ type: "header", text: "Setup" },
-			done === required.length
-				? { type: "banner", variant: "default", title: "RedeemID is set up", description: "Members can sign in with their Shopify customer account. Levels, rules and the meter are under Access." }
-				: {
-						type: "banner",
-						variant: "alert",
-						title: `${done} of ${required.length} steps done`,
-						description: "Work down the steps. Each one checks the site as it is, so set a secret, redeploy or restart, and press Check again.",
-					},
-			{ type: "actions", elements: [{ type: "button", action_id: "setup_check", label: "Check again", style: "secondary" }] },
-			{
-				type: "table",
-				page_action_id: "setup_steps",
-				columns: [
-					{ key: "step", label: "Step" },
-					{ key: "state", label: "State", format: "badge" },
-				],
-				rows: steps.map((s) => ({ step: s.title, state: BADGE[s.state] })),
-			},
-			...steps.flatMap((s) => [{ type: "divider" }, ...stepBlocks(s, f)]),
+			...stepBlocks(step, f),
+			...(step.state === "done" ? [] : [{ type: "actions", elements: [{ type: "button", action_id: "setup_check", value: STEP_TABS[step.key], label: "Check again", style: "secondary" }] }]),
 		],
-		...(toast ? { toast } : {}),
-	};
+	}));
+}
+
+/** Where Connection opens: the first step not done, or null once every required one is. Pure. */
+export function nextStep(f: SetupFacts): Step | null {
+	return requiredSteps(setupSteps(f)).find((s) => s.state !== "done") ?? null;
 }

package/src/staff.ts

@@ -6,7 +6,7 @@
 
 import { adminConfigured, adminScopes, editTags, registerWebhooks, resync, webhookSubscriptions, WEBHOOK_TOPICS } from "./admin-api.js";
 import { applyEntryRule, describe, entryRuleFor, levelsFor, membership, passes, requirement, termTree, type Terms } from "./access.js";
-import { PROVIDER_ID, type RedeemIDConfig } from "./config.js";
+import { PROVIDER_ID, shopOrigin, type RedeemIDConfig } from "./config.js";
 import { levelChange } from "./events.js";
 import { featuresFor } from "./features.js";
 import { record } from "./log.js";
@@ -32,76 +32,157 @@ function consentLabel(state: string | null | undefined): string {
 	return t.charAt(0).toUpperCase() + t.slice(1);
 }
 
-export function memberDetail(config: RedeemIDConfig, m: MemberRecord, toast?: Blocks["toast"]): Blocks {
+/** The member page's tabs, in order. */
+export const MEMBER_TABS = ["membership", "tags", "account", "privacy"] as const;
+export type MemberTab = (typeof MEMBER_TABS)[number];
+
+/** When, to the minute, in UTC: "2026-11-13 18:59 UTC". */
+const stamp = (iso: string | null | undefined) => (iso ? `${iso.slice(0, 10)} ${iso.slice(11, 16)} UTC`.trim() : "");
+
+/**
+ * One member: who they are and where they stand at the top, then tabs for
+ * their membership, their Shopify tags, their account and privacy.
+ */
+export function memberDetail(config: RedeemIDConfig, m: MemberRecord, toast?: Blocks["toast"], tab: MemberTab = "membership", exported?: unknown): Blocks {
 	const levels = config.levels ?? [];
 	const { current, past } = membership(m, levels);
 	const features = featuresFor(m, config.features, levels);
 	const featureNames = (config.features ?? []).filter((f) => features.includes(f.slug)).map((f) => f.name);
 	const name = [m.firstName, m.lastName].filter(Boolean).join(" ") || m.email || `Customer ${m.customerId}`;
+	let shop: string | null = null;
+	try {
+		const origin = new URL(shopOrigin(config));
+		if (origin.hostname.endsWith(".myshopify.com")) shop = origin.origin;
+	} catch {
+		shop = null;
+	}
+	const admin = adminConfigured();
+
+	const membershipTab = [
+		{
+			type: "fields",
+			fields: [
+				{ label: "Levels now", value: current.map((l) => `${l.name} (since ${date(l.since)})`).join(", ") || "None" },
+				{ label: "Features", value: featureNames.join(", ") || "None" },
+				{ label: "Member since (Shopify)", value: m.dates?.since ?? "" },
+				{ label: m.dates?.ends ? "Ends on (Shopify)" : "Renews on (Shopify)", value: m.dates?.ends ?? m.dates?.renews ?? "" },
+				{ label: "Gift until (Shopify)", value: m.dates?.gift ?? "" },
+			],
+		},
+		{ type: "header", text: "Level history" },
+		past.length
+			? {
+					type: "table",
+					page_action_id: "member_levels",
+					columns: [
+						{ key: "level", label: "Level" },
+						{ key: "from", label: "From" },
+						{ key: "to", label: "To" },
+					],
+					rows: past.map((l) => ({ level: l.name, from: date(l.from), to: date(l.to) })),
+				}
+			: { type: "context", text: "No earlier levels." },
+	];
+
+	const tagsTab = [
+		{ type: "context", text: "Levels come only from these tags. Edits are written to Shopify, then read back, so Shopify stays the only source of access." },
+		...(admin
+			? [
+					{
+						type: "redeemid_modal",
+						block_id: `modal:tags:${m.customerId}`,
+						title: "Add tags in Shopify",
+						description: "Adds the tags to the customer in Shopify, then reads the customer back. Access follows.",
+						trigger: { label: "Add tags", style: "primary" },
+						blocks: [
+							{
+								type: "form",
+								block_id: `tags:${m.customerId}`,
+								fields: [{ type: "text_input", action_id: "tags", label: "Tags (comma separated)", placeholder: "gold-member" }],
+								submit: { label: "Add in Shopify", action_id: "member_tag_add" },
+							},
+						],
+					},
+				]
+			: [{ type: "context", text: "Set the Admin API app's client ID to edit tags and resync from here." }]),
+		m.tags.length
+			? {
+					type: "table",
+					page_action_id: "member_tags",
+					columns: [
+						{ key: "tag", label: "Tag", format: "code" },
+						{ key: "since", label: "Since" },
+						{ key: "remove", label: "", format: "element" },
+					],
+					rows: m.tags.map((t) => ({
+						tag: t,
+						since: date(m.tagsSince?.[t.toLowerCase()]),
+						remove: admin
+							? {
+									type: "button",
+									action_id: "member_tag_remove",
+									label: "Remove",
+									style: "secondary",
+									value: { customerId: m.customerId, tag: t },
+									confirm: { title: "Remove this tag in Shopify?", text: `Removes "${t}" from the customer in Shopify. Access follows.`, confirm: "Remove", deny: "Cancel", style: "danger" },
+								}
+							: null,
+					})),
+				}
+			: { type: "empty", title: "No tags", description: "This customer has no tags in Shopify, so no level.", size: "sm" },
+	];
+
+	const accountTab = [
+		{
+			type: "fields",
+			fields: [
+				{ label: "Email", value: m.email ?? "" },
+				{ label: "Shopify customer ID", value: m.customerId },
+				{ label: "Account", value: m.status === "enabled" ? "On" : "Turned off in Shopify" },
+				{ label: "Email verified", value: m.emailVerified === undefined ? "" : m.emailVerified ? "Yes" : "No" },
+				{ label: "Email marketing", value: consentLabel(m.emailMarketing) },
+				{ label: "SMS marketing", value: consentLabel(m.smsMarketing) },
+				{ label: "Last synced", value: stamp(m.syncedAt) },
+				{ label: "Synced by", value: m.source || "unknown" },
+			],
+		},
+		{ type: "divider" },
+		...linkSection(m),
+	];
+
+	const privacyTab = [...privacySection(m.customerId), ...(exported === undefined ? [] : [{ type: "header", text: "Export" }, { type: "code", language: "jsonc", code: JSON.stringify(exported, null, 2) }])];
+
 	return {
 		toast,
 		blocks: [
-			{ type: "actions", elements: [{ type: "button", action_id: "members_back", label: "← All members", style: "secondary" }] },
+			{
+				type: "actions",
+				elements: [
+					{ type: "button", action_id: "members_back", label: "\u2190 All members", style: "secondary" },
+					...(admin ? [{ type: "button", action_id: "member_resync", label: "Resync from Shopify", style: "primary", value: m.customerId }] : []),
+					...(shop ? [{ type: "link", label: "Open in Shopify", target: { kind: "external", url: `${shop}/admin/customers/${m.customerId}` }, appearance: "secondary" }] : []),
+				],
+			},
 			{ type: "header", text: name },
+			{ type: "context", text: [m.email, `Shopify customer ${m.customerId}`, m.userId ? `signed in here since ${date(m.linkedAt)}` : "hasn't signed in here yet"].filter(Boolean).join(" \u00b7 ") },
 			{
-				type: "fields",
-				fields: [
-					{ label: "Email", value: m.email ?? "—" },
-					{ label: "Shopify customer", value: m.customerId },
-					{ label: "Account", value: m.status === "enabled" ? "On" : "Turned off in Shopify" },
-					{ label: "Signed in here", value: m.userId ? `Yes, first on ${date(m.linkedAt)}` : "Not yet" },
-					{ label: "Levels", value: current.map((l) => `${l.name} (since ${date(l.since)})`).join(", ") || "—" },
-					{ label: "Levels before", value: past.map((l) => `${l.name} (${date(l.from)} to ${date(l.to)})`).join(", ") || "—" },
-					{ label: "Features", value: featureNames.join(", ") || "—" },
-					{ label: "Member since (Shopify)", value: m.dates?.since ?? "—" },
-					{ label: m.dates?.ends ? "Ends on (Shopify)" : "Renews on (Shopify)", value: m.dates?.ends ?? m.dates?.renews ?? "—" },
-					{ label: "Gift until (Shopify)", value: m.dates?.gift ?? "—" },
-					{ label: "Email verified", value: m.emailVerified === undefined ? "—" : m.emailVerified ? "Yes" : "No" },
-					{ label: "Email marketing", value: consentLabel(m.emailMarketing) },
-					{ label: "SMS marketing", value: consentLabel(m.smsMarketing) },
-					{ label: "Last synced", value: `${m.syncedAt} (${m.source || "unknown"})` },
+				type: "stats",
+				items: [
+					{ label: "Account", value: m.status === "enabled" ? "On" : "Off" },
+					{ label: "Levels", value: current.map((l) => l.name).join(", ") || "None" },
+					{ label: "Tags", value: String(m.tags.length) },
+				],
+			},
+			{
+				type: "tab",
+				default_tab: MEMBER_TABS.indexOf(tab),
+				panels: [
+					{ label: "Membership", blocks: membershipTab },
+					{ label: "Tags", blocks: tagsTab },
+					{ label: "Account", blocks: accountTab },
+					{ label: "Privacy", blocks: privacyTab },
 				],
 			},
-			{ type: "header", text: "Shopify tags" },
-			m.tags.length
-				? {
-						type: "table",
-						page_action_id: "member_tags",
-						columns: [
-							{ key: "tag", label: "Tag" },
-							{ key: "since", label: "Since" },
-							{ key: "remove", label: "", format: "element" },
-						],
-						rows: m.tags.map((t) => ({
-							tag: t,
-							since: date(m.tagsSince?.[t.toLowerCase()]),
-							remove: adminConfigured()
-								? {
-										type: "button",
-										action_id: "member_tag_remove",
-										label: "Remove in Shopify",
-										style: "danger",
-										value: { customerId: m.customerId, tag: t },
-										confirm: { title: "Remove this tag in Shopify?", text: `Removes "${t}" from the customer in Shopify. Access follows.`, confirm: "Remove", deny: "Cancel", style: "danger" },
-									}
-								: null,
-						})),
-					}
-				: { type: "context", text: "No tags." },
-			adminConfigured()
-				? {
-						type: "form",
-						block_id: `tags:${m.customerId}`,
-						fields: [{ type: "text_input", action_id: "tags", label: "Add tags in Shopify (comma separated)", placeholder: "gold-member" }],
-						submit: { label: "Add in Shopify", action_id: "member_tag_add" },
-					}
-				: { type: "context", text: "Set the Admin API app's client ID to edit tags and resync from here." },
-			adminConfigured()
-				? { type: "actions", elements: [{ type: "button", action_id: "member_resync", label: "Resync from Shopify", style: "primary", value: m.customerId }] }
-				: { type: "divider" },
-			{ type: "context", text: "Tags are written to Shopify, then read back. Shopify stays the only source of access." },
-			...linkSection(m),
-			...privacySection(m.customerId),
 		],
 	};
 }
@@ -228,17 +309,18 @@ function privacySection(customerId: string): unknown[] {
 			]
 		: [];
 	return [
-		{ type: "header", text: "Privacy" },
-		{ type: "actions", elements: [{ type: "button", action_id: "member_export", label: "Export data", style: "secondary", value: customerId }, erase, ...shopify] },
 		{ type: "context", text: "Export shows everything RedeemID keeps about this member. Erasing removes it from the site; Shopify stays the record of the customer." },
+		{ type: "actions", elements: [{ type: "button", action_id: "member_export", label: "Export data", style: "secondary", value: customerId }, erase] },
+		...(shopify.length
+			? [
+					{ type: "header", text: "In Shopify" },
+					{ type: "context", text: "Shopify erases the customer's personal data across the store, orders included, after its waiting period. Cancel stops a request that hasn't run yet." },
+					{ type: "actions", elements: shopify },
+				]
+			: []),
 	];
 }
 
-/** The member's export, as JSON, under their detail page. */
-export function exportBlocks(detail: Blocks, data: unknown): Blocks {
-	return { ...detail, blocks: [...detail.blocks, { type: "header", text: "Export" }, { type: "code", language: "jsonc", code: JSON.stringify(data, null, 2) }] };
-}
-
 /** Every privacy request: what came in, from where, and what's still open. */
 export async function privacyPage(s: Stores, toast?: Blocks["toast"], extra: unknown[] = []): Promise<Blocks> {
 	const items = await recentRequests(s);

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.0.30";
+export const VERSION = "0.0.32";