@redeemid/emdash 0.0.4 → 0.0.5

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.4, early.** Runs on Node and Cloudflare Workers. Sign-in, the member mirror, webhooks, levels, rules, 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.5, early.** Runs on Node and Cloudflare Workers. Sign-in, the member mirror, webhooks, levels, rules, 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
 
@@ -14,6 +14,8 @@ Shopify customer accounts, member levels and paywalls for [EmDash](https://githu
 - **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.
 - **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.
 - **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.
@@ -34,7 +36,8 @@ const config = {
 	shop: "my-store.myshopify.com",
 	levels: [
 		{ slug: "member", name: "Member", tags: ["member"] },
-		{ slug: "pro", name: "Pro", tags: ["pro"] },
+		// wall: what the wall says to readers this level would let in; joinUrl overrides join.href.
+		{ slug: "pro", name: "Pro", tags: ["pro"], wall: "Pro members read every report." },
 		// match: "all" needs every tag, e.g. both memberships:
 		{ slug: "both", name: "Member + Pro", tags: ["member", "pro"], match: "all" },
 	],
@@ -42,6 +45,8 @@ const config = {
 		{ collection: "posts", taxonomy: "category", term: "members", levels: ["member", "pro"] },
 		{ collection: "posts", taxonomy: "category", term: "pro", levels: ["pro"] },
 	],
+	// Optional: where the wall's join link goes.
+	join: { href: "/join/", label: "Become a member" },
 	// Optional: locked posts with no paywall break show the paragraphs within their first 40 words.
 	teaser: { posts: 40 },
 };
@@ -107,6 +112,10 @@ import Content from "@redeemid/emdash/components/Content.astro";
 
 Everything before the first Paywall break block is shown to everyone. What follows reaches the page only for readers the break allows: the levels picked on it ("Signed in" for any member), or when none are picked the entry's rule. With none picked and no rule covering the entry, the break changes nothing, as on WordPress. A body with no break follows the entry's rule as a whole; readers it keeps out see the collection's `teaser` (the paragraphs within that many words, never half a paragraph), if one is set. Plain `<PortableText>` ignores the break and shows everything, so use `<Content>` for any body that may hold one.
 
+A "Members only" block starts a part for the levels picked on it (none picked: the entry's rule, or any signed-in member) that runs to the next "Members only: end" block. Readers who can't read it see the wall there, and the body goes on after the end block.
+
+The wall is `<LockedPanel>`: it says why the reader is kept out and offers sign-in or the join link, with the wall text of the first level they are missing. `<Content>` and `<Gate>` show it; its default slot (and `<Content>`'s "locked" slot) goes on top.
+
 To lock a part of a template that isn't the body, wrap it in `<Gate>` (`<Gate levels={["pro"]}>…</Gate>`).
 
 Show what an entry needs with `<AccessBadge>`, on cards and on the entry. It reads the entry's rules (and a paywall break's levels when you pass `content`), shows "Free" for open entries (`free=""` hides it), and adds `is-locked` and a lock for readers it keeps out. `data-redeemid-level` holds the level slugs, for colours:
@@ -120,6 +129,8 @@ import AccessBadge from "@redeemid/emdash/components/AccessBadge.astro";
 
 In your own code (`@redeemid/emdash/access`), `entryRequirement(config, collection, terms)` gives what an entry needs (a list of clauses, each passed by any of its levels, or `null` when open), and `canRead(Astro, entry)` gives the verdict for the visitor.
 
+Put `<Notices />` near the top of your layout. It shows the message for a `?redeemid_notice=` code (see [docs/shopify-setup.md](docs/shopify-setup.md)) and nothing otherwise; pass `messages={{ cart_empty: "…" }}` to reword one.
+
 Add the account box and cart to your header. Visitors see Sign in; members see their name, levels, Account and Sign out. The cart shows how many items are in the visitor's Shopify cart and goes to its checkout:
 
 ```astro

package/package.json

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

package/src/blocks/PaywallBreak.astro

@@ -1,6 +1,7 @@
 ---
 /**
- * The paywall break itself renders nothing. <Content> splits the body here
- * and leaves out what follows for readers who can't read it.
+ * RedeemID's marker blocks (Paywall break, Members only and its end) render
+ * nothing themselves. <Content> splits the body at them and leaves out what
+ * readers can't read.
  */
 ---

package/src/blocks/index.ts

@@ -2,10 +2,12 @@
  * Site-side renderers for RedeemID's Portable Text blocks, picked up by
  * EmDash from the plugin's `componentsEntry`.
  */
-import PaywallBreak from "./PaywallBreak.astro";
+import Marker from "./PaywallBreak.astro";
 import PlanBlock from "./PlanBlock.astro";
 
 export const blockComponents = {
-	"redeemid-paywall": PaywallBreak,
+	"redeemid-paywall": Marker,
+	"redeemid-members": Marker,
+	"redeemid-members-end": Marker,
 	"redeemid-plan": PlanBlock,
 };

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";
+/** 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";
 
 type Node = { _type?: unknown; levels?: unknown };
 
@@ -44,3 +47,39 @@ export function teaser<T>(value: T[] | null | undefined, words: number): T[] {
 	}
 	return out;
 }
+
+export interface Section<T> {
+	/** True for a part between a "Members only" block and its end. */
+	members: boolean;
+	/** Levels picked on the "Members only" block (empty = none picked). */
+	levels: string[];
+	blocks: T[];
+}
+
+const levelsOf = (raw: unknown) =>
+	Array.isArray(raw) ? raw.filter((l): l is string => typeof l === "string" && l !== "") : [];
+
+/**
+ * Split blocks into open parts and members-only parts. A "Members only" block
+ * starts a part that runs to the next "Members only: end" block (or the end of
+ * the blocks); the marker blocks themselves are dropped. A stray end block is
+ * dropped too.
+ */
+export function sections<T>(value: T[] | null | undefined): Section<T>[] {
+	const out: Section<T>[] = [];
+	let current: Section<T> = { members: false, levels: [], blocks: [] };
+	for (const b of Array.isArray(value) ? value : []) {
+		const type = (b as Node)?._type;
+		if (type === MEMBERS_BLOCK || type === MEMBERS_END_BLOCK) {
+			if (current.blocks.length > 0 || current.members) out.push(current);
+			current =
+				type === MEMBERS_BLOCK
+					? { members: true, levels: levelsOf((b as Node).levels), blocks: [] }
+					: { members: false, levels: [], blocks: [] };
+			continue;
+		}
+		current.blocks.push(b);
+	}
+	if (current.blocks.length > 0 || current.members) out.push(current);
+	return out;
+}

package/src/components/Content.astro

@@ -1,21 +1,27 @@
 ---
 /**
- * An entry's body, with RedeemID's paywall break applied.
+ * An entry's body, with RedeemID's blocks applied.
  *
  *   <Content value={post.data.content} collection="posts" terms={post.data.terms} />
  *
- * Everything before the first "Paywall break" block is shown to everyone.
- * What follows reaches the page only for readers who may read it: the levels
- * picked on the break, or when none are picked the entry's rule (with no rule,
- * the break changes nothing, as on WordPress). Others get the "locked" slot (or a built-in notice).
- * A body with no break follows the entry's rule as a whole; readers who can't
- * read it see the collection's teaser (config `teaser`, in words), if any.
+ * - "Paywall break": everything before the first one is shown to everyone.
+ *   What follows reaches the page only for readers who may read it: the
+ *   levels picked on the break, or when none are picked the entry's rule
+ *   (with no rule, the break changes nothing, as on WordPress).
+ * - "Members only" … "Members only: end": the part between is for the levels
+ *   picked on the start block, or the entry's rule, or any signed-in member.
+ *   Readers who can't read it see the wall in its place, and the body goes on.
+ * - No break: the entry's rule covers the whole body; readers it keeps out see
+ *   the collection's teaser (config `teaser`, in words), if any.
+ *
+ * Readers kept out get the wall (LockedPanel), with the "locked" slot on top.
  */
 import { PortableText } from "emdash/ui";
 
-import { canRead, entryRequirement, signInUrl, type Terms } from "../access.js";
-import { splitAtPaywall, teaser } from "../blocks-names.js";
+import { canRead, entryRequirement, type Terms, type Verdict } from "../access.js";
+import { sections, splitAtPaywall, teaser } from "../blocks-names.js";
 import { siteConfig } from "../site-config.js";
+import LockedPanel from "./LockedPanel.astro";
 
 interface Props {
 	value?: unknown[] | null;
@@ -26,35 +32,52 @@ interface Props {
 const { value, collection = "", terms } = Astro.props;
 const split = splitAtPaywall(value);
 const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+const entryRule = await entryRequirement(config, collection, terms);
 // A break with levels picked locks the rest to them; with none picked it
 // follows the entry's rule, and does nothing when no rule covers the entry.
-const required = split.paywall
-	? split.levels.length
-		? [split.levels]
-		: await entryRequirement(config, collection, terms)
-	: undefined;
-const verdict =
+const required = split.paywall ? (split.levels.length ? [split.levels] : entryRule) : undefined;
+const verdict: Verdict | { allowed: true; reason: "open" } =
 	split.paywall && required === null
-		? { allowed: true, reason: "open" as const }
+		? { allowed: true, reason: "open" }
 		: await canRead(Astro, { collection, terms }, required ? { required } : undefined);
 const words = config?.teaser?.[collection] ?? 0;
 const shown = split.paywall ? split.open : verdict.allowed ? split.open : teaser(split.open, words);
-const here = Astro.url.pathname + Astro.url.search;
+const rest = verdict.allowed ? split.locked : [];
+
+// Each "Members only" part gets its own verdict.
+async function parts(blocks: unknown[]) {
+	const out: Array<{ blocks: unknown[]; verdict?: Verdict }> = [];
+	for (const section of sections(blocks)) {
+		if (!section.members) {
+			out.push({ blocks: section.blocks });
+			continue;
+		}
+		const needs = section.levels.length ? [section.levels] : (entryRule ?? [[]]);
+		out.push({ blocks: section.blocks, verdict: await canRead(Astro, { collection, terms }, { required: needs }) });
+	}
+	return out;
+}
+const before = await parts(shown);
+const after = await parts(rest);
 ---
 
-{shown.length > 0 && <PortableText value={shown} />}
+{before.map((p) =>
+	!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} />
+	),
+)}
 {verdict.allowed ? (
-	split.locked.length > 0 && <PortableText value={split.locked} />
+	after.map((p) =>
+		!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} />
+		),
+	)
 ) : (
-	<div class="redeemid-locked" data-redeemid-reason={verdict.reason}>
+	<LockedPanel reason={verdict.reason} required={verdict.required} held={verdict.viewer.levels}>
 		<slot name="locked" />
-		{verdict.reason === "sign_in" && (
-			<p>
-				This is for members. <a href={signInUrl(here)}>Sign in</a> to read on.
-			</p>
-		)}
-		{verdict.reason === "upgrade" && <p>Your membership doesn't include the rest of this yet.</p>}
-		{verdict.reason === "disabled" && <p>Your account is turned off. Contact the store for help.</p>}
-		{verdict.reason === "unconfigured" && <p>This is for members.</p>}
-	</div>
+	</LockedPanel>
 )}

package/src/components/Gate.astro

@@ -10,7 +10,8 @@
  *
  * Pass `levels` to lock a part of a page to specific levels instead.
  */
-import { canRead, signInUrl, type Terms } from "../access.js";
+import { canRead, type Terms } from "../access.js";
+import LockedPanel from "./LockedPanel.astro";
 
 interface Props {
 	collection?: string;
@@ -20,21 +21,12 @@ interface Props {
 
 const { collection = "", terms, levels } = Astro.props;
 const verdict = await canRead(Astro, { collection, terms }, levels ? { levels } : undefined);
-const here = Astro.url.pathname + Astro.url.search;
 ---
 
 {verdict.allowed ? (
 	<slot />
 ) : (
-	<div class="redeemid-locked" data-redeemid-reason={verdict.reason}>
+	<LockedPanel reason={verdict.reason} required={verdict.required} held={verdict.viewer.levels}>
 		<slot name="locked" />
-		{verdict.reason === "sign_in" && (
-			<p>
-				This is for members. <a href={signInUrl(here)}>Sign in</a> to read it.
-			</p>
-		)}
-		{verdict.reason === "upgrade" && <p>Your membership doesn't include this yet.</p>}
-		{verdict.reason === "disabled" && <p>Your account is turned off. Contact the store for help.</p>}
-		{verdict.reason === "unconfigured" && <p>This is for members.</p>}
-	</div>
+	</LockedPanel>
 )}

package/src/components/LockedPanel.astro

@@ -0,0 +1,48 @@
+---
+/**
+ * The wall readers see in place of what they can't read: why, and what to do
+ * next (sign in, or join). <Content> and <Gate> show it; use it directly for
+ * your own locked parts.
+ *
+ * The level it offers is the first one the reader is missing. Its `wall` text
+ * and `joinUrl` come from the level's config, the join link from `join`.
+ * Anything in the default slot is shown above the built-in text.
+ */
+import { passes, signInUrl, type Reason } from "../access.js";
+import { siteConfig } from "../site-config.js";
+
+interface Props {
+	reason: Reason;
+	/** What the locked part needs (Verdict.required). */
+	required?: string[][];
+	/** Levels the reader holds (Verdict.viewer.levels). */
+	held?: string[];
+}
+
+const { reason, required = [], held = [] } = Astro.props;
+const config = siteConfig((Astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+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;
+const joinLabel = config?.join?.label ?? "Become a member";
+const here = Astro.url.pathname + Astro.url.search;
+---
+
+<div class="redeemid-locked" data-redeemid-reason={reason} data-redeemid-level={level?.slug}>
+	<slot />
+	{level?.wall && (reason === "sign_in" || reason === "upgrade") && <p class="redeemid-locked__wall">{level.wall}</p>}
+	{reason === "sign_in" && (
+		<p>
+			This is for members. <a href={signInUrl(here)}>Sign in</a> to read on.
+			{joinHref && <> Not a member yet? <a href={joinHref}>{joinLabel}</a>.</>}
+		</p>
+	)}
+	{reason === "upgrade" && (
+		<p>
+			{level ? `This is for ${level.name} members.` : "Your membership doesn't include this yet."}
+			{joinHref && <> <a href={joinHref}>{joinLabel}</a></>}
+		</p>
+	)}
+	{reason === "disabled" && <p>Your account is turned off. Contact the store for help.</p>}
+	{reason === "unconfigured" && <p>This is for members.</p>}
+</div>

package/src/components/Notices.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * The message for a `?redeemid_notice=` code that sign-in, Buy, Cart and
+ * Account send readers back with. Renders nothing without one. Pass
+ * `messages` to reword any of them.
+ */
+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.",
+	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.",
+	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 text = code ? (messages[code] ?? DEFAULTS[code]) : undefined;
+---
+
+{text && (
+	<div class="redeemid-notice" role="status" data-redeemid-notice={code}>
+		<p>{text}</p>
+	</div>
+)}

package/src/config.ts

@@ -15,6 +15,10 @@ export interface LevelConfig {
 	tags: string[];
 	/** "any" (default): one of the tags is enough. "all": every tag is needed. */
 	match?: "any" | "all";
+	/** What the wall says to readers this level would let in, e.g. "Gold members read every investigation." */
+	wall?: string;
+	/** Where the wall's join link goes for this level. Falls back to `join.href`. */
+	joinUrl?: string;
 }
 
 /**
@@ -57,6 +61,8 @@ export interface RedeemIDConfig {
 	label?: string;
 	levels?: LevelConfig[];
 	rules?: RuleConfig[];
+	/** The wall's join link: where readers become members, e.g. { href: "/join/", label: "Become a member" }. */
+	join?: { href: string; label?: string };
 	/**
 	 * How several term rules on one entry combine: "all" (default, the most
 	 * restrictive: pass every rule) or "any" (pass one of them).

package/src/plugin.ts

@@ -6,7 +6,7 @@
  *     plugins: [redeemidPlugin(config)],
  *   })
  *
- * It adds two Portable Text blocks to the editor, a Members page, a Status
+ * It adds four Portable Text blocks to the editor, a Members page, a Status
  * page and a dashboard widget. Sign-in, webhooks and checkout stay on the
  * auth provider's routes.
  *
@@ -14,6 +14,9 @@
  *   for members. Pick the levels that may read on ("Signed in" for any
  *   member); none picked means the entry's rule, and nothing is locked when
  *   no rule covers the entry, as on WordPress.
+ * - "Members only" (`redeemid-members`) and "Members only: end"
+ *   (`redeemid-members-end`): the part between is for the levels picked on
+ *   the start block; everyone else sees the wall there and reads on after.
  * - "Plan" (`redeemid-plan`): a Shopify product's title and price with a
  *   button that adds it to the cart and opens checkout.
  *
@@ -31,9 +34,9 @@ import { stores, type MemberRecord } from "./storage.js";
 import { PAGES, WIDGETS } from "./descriptor.js";
 import { VERSION } from "./version.js";
 
-import { PAYWALL_BLOCK, PLAN_BLOCK } from "./blocks-names.js";
+import { MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK } from "./blocks-names.js";
 
-export { PAYWALL_BLOCK, PLAN_BLOCK };
+export { MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK };
 
 function blocks(config: RedeemIDConfig) {
 	const levelOptions = [
@@ -55,6 +58,27 @@ function blocks(config: RedeemIDConfig) {
 				},
 			],
 		},
+		{
+			type: MEMBERS_BLOCK,
+			label: "Members only",
+			icon: "users",
+			description: "What follows, up to \"Members only: end\", is for members",
+			fields: [
+				{
+					type: "checkbox" as const,
+					action_id: "levels",
+					label: "Who can read it (none = the entry's rule, or any signed-in member)",
+					options: levelOptions,
+				},
+			],
+		},
+		{
+			type: MEMBERS_END_BLOCK,
+			label: "Members only: end",
+			icon: "users",
+			description: "Ends the members-only part; everyone reads on from here",
+			fields: [],
+		},
 		{
 			type: PLAN_BLOCK,
 			label: "Plan",

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.0.4";
+export const VERSION = "0.0.5";