@semics-tech/emdash-events-suite 1.0.0-rc.3 → 1.0.0-rc.5

package/dist/ts/index.d.ts

@@ -1,3 +1,4 @@
+import { type PageOptions } from "@semics-tech/emdash-events/integration";
 import type { PluginDescriptor } from "emdash";
 /**
  * A core the suite links: a sandboxed descriptor to load from npm (the product package's default
@@ -12,6 +13,8 @@ export interface EventsSuiteOptions {
     events?: SuiteCore;
     /** Default: the Free E-sign core of `@semics-tech/emdash-esign`. */
     esign?: SuiteCore;
+    /** How `/booking` and `/_events/waiver` look on this site: theme, stylesheet, brand, event page path. */
+    page?: PageOptions;
 }
 /** The slice of Astro's integration API the injected pages need (no `astro` dependency). */
 interface SetupArgs {
@@ -58,7 +61,7 @@ export declare const PAIR_ROUTE = "/_events/pair";
 export declare function suiteIntegration(ids: {
     eventsPluginId: string;
     esignPluginId: string;
-}): SuiteAstroIntegration;
+}, page?: PageOptions): SuiteAstroIntegration;
 /**
  * Events and E-sign on one site (SX-FR-01). Every part is told the id of each core it calls, taken
  * from the descriptor or the registry id given here, never assumed:

package/dist/ts/index.js

@@ -28,10 +28,11 @@ const RECONCILE_MODULE = "@semics-tech/emdash-events-suite/astro/lib/reconcile";
  * Injects `/_events/waiver` (the booking and signing steps of `<BookingWithWaiver>`) and gives it,
  * through a virtual module, the id of each core. `eventsSuite()` adds it for you.
  */
-export function suiteIntegration(ids) {
+export function suiteIntegration(ids, page = {}) {
     const config = [
         `export const eventsPluginId = ${JSON.stringify(ids.eventsPluginId)};`,
         `export const esignPluginId = ${JSON.stringify(ids.esignPluginId)};`,
+        `export const page = ${JSON.stringify(page)};`,
     ].join("\n");
     return {
         name: "semics-events-suite",
@@ -85,9 +86,14 @@ export function eventsSuite(options = {}) {
         sandboxed: [events.descriptor, esign.descriptor].filter((d) => d !== undefined),
         plugins: [eventsUi(), esignUi()],
         integrations: [
-            eventsIntegration({ pluginId: events.id, esignPluginId: esign.id, reconcile: RECONCILE_MODULE }),
+            eventsIntegration({
+                pluginId: events.id,
+                esignPluginId: esign.id,
+                reconcile: RECONCILE_MODULE,
+                ...(options.page ? { page: options.page } : {}),
+            }),
             esignIntegration({ pluginId: esign.id }),
-            suiteIntegration({ eventsPluginId: events.id, esignPluginId: esign.id }),
+            suiteIntegration({ eventsPluginId: events.id, esignPluginId: esign.id }, options.page),
         ],
         pluginIds: { events: events.id, esign: esign.id },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semics-tech/emdash-events-suite",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.5",
   "type": "module",
   "description": "Links semics Events and E-sign on one EmDash site: one config call and a booking flow with inline waiver signing",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "src/astro"
   ],
   "dependencies": {
-    "@semics-tech/emdash-events": "1.0.0-rc.3",
-    "@semics-tech/emdash-esign": "1.0.0-rc.3"
+    "@semics-tech/emdash-esign": "1.0.0-rc.5",
+    "@semics-tech/emdash-events": "1.0.0-rc.5"
   },
   "peerDependencies": {
     "emdash": ">=1.2.0 <2"

package/src/astro/BookingWithWaiver.astro

@@ -94,12 +94,13 @@ const single = ticketTypes.length === 1 ? ticketTypes[0] : undefined;
 		!onSale ? (
 			<p data-testid="booking-unavailable">Booking is not available for this event right now.</p>
 		) : (
-			<form method="post" action={WAIVER_PATH}>
+			<form method="post" action={WAIVER_PATH} data-keep-values>
 				<p class="semics-form-alert" role="alert" data-testid="waiver-alert" hidden={!alert}>{alert}</p>
 				<input type="hidden" name="intent" value="book" />
 				<input type="hidden" name="eventId" value={eventId} />
 				<input type="hidden" name="returnTo" value={returnTo} />
 				<input type="hidden" name="idempotencyKey" value={newIdempotencyKey()} />
+				{data?.waiverEach && <input type="hidden" name="waiverEach" value="1" />}
 
 				{picker && (
 					<div class="semics-field semics-picker-field">
@@ -301,6 +302,8 @@ const single = ticketTypes.length === 1 ? ticketTypes[0] : undefined;
 </section>
 
 <script>
+	// In this order: the kept values go back first, then the picker shows the date the select holds.
+	import "./lib/keep-form";
 	import "@semics-tech/emdash-events/client/picker";
 </script>
 

package/src/astro/WaiverPage.astro

@@ -2,15 +2,17 @@
 // Injected at `/_events/waiver` by the suite (SX-FR-02, SX-FR-03): the booking post of
 // <BookingWithWaiver> and the inline waiver ceremony, one signer after another, on one page.
 // Signing tokens live only in an HttpOnly cookie scoped to this path and in POST bodies to E-sign;
-// receipts are forwarded to Events in-process. The page renders E-sign's <SigningCeremony> and
-// nothing else inline, so it sends E-sign's `ceremonyCsp()` (hashes of the ceremony's own script,
-// pad and stylesheet), `Referrer-Policy: no-referrer` and `no-store`.
-import { esignPluginId, eventsPluginId } from "virtual:semics-events-suite/config";
+// receipts are forwarded to Events in-process. The page renders E-sign's <SigningCeremony> and, inline,
+// only Events' page stylesheet, so it sends E-sign's `ceremonyCsp()` (hashes of the ceremony's own script,
+// pad and stylesheet, and of the page's), `Referrer-Policy: no-referrer` and `no-store`.
+import { esignPluginId, eventsPluginId, page } from "virtual:semics-events-suite/config";
 import SigningCeremony from "@semics-tech/emdash-esign/astro/SigningCeremony.astro";
 import { ceremonyCsp } from "@semics-tech/emdash-esign/astro/lib/csp";
+import PageBrand from "@semics-tech/emdash-events/astro/PageBrand.astro";
 import { crossSiteResponse } from "@semics-tech/emdash-events/astro/lib/checkout-form";
+import { pageCss } from "@semics-tech/emdash-events/astro/lib/page";
 
-import { handleWaiverRequest } from "./lib/flow";
+import { handleWaiverRequest, leavesSite } from "./lib/flow";
 import { WAIVER_MESSAGES, WAIVER_PATH } from "./lib/form";
 import { waiverSlot } from "./lib/slot";
 
@@ -18,16 +20,20 @@ export const prerender = false;
 
 const outcome = await handleWaiverRequest(
 	{ locals: Astro.locals, url: Astro.url, request: Astro.request, cookie: (name) => Astro.cookies.get(name)?.value },
-	{ eventsPluginId, esignPluginId },
+	{ eventsPluginId, esignPluginId, ...(page.eventPath ? { eventPath: page.eventPath } : {}) },
 );
 if (outcome.type === "forbidden") return crossSiteResponse();
 const cookies = outcome.type === "redirect" || outcome.type === "render" ? outcome.cookies : [];
 for (const cookie of cookies) Astro.cookies.set(cookie.name, cookie.value, cookie.options);
-if (outcome.type === "redirect") return Astro.redirect(outcome.location, 303);
+if (outcome.type === "redirect" && !leavesSite(outcome.location, Astro.url)) return Astro.redirect(outcome.location, 303);
+// The payment page is another site, which the CSP below stops a post redirecting to (T155): a page goes there instead.
+const payment = outcome.type === "redirect" ? outcome.location : undefined;
 
 Astro.response.headers.set("Referrer-Policy", "no-referrer");
 Astro.response.headers.set("Cache-Control", "private, no-store");
-Astro.response.headers.set("Content-Security-Policy", await ceremonyCsp());
+const css = pageCss(page);
+const stylesheet = page.stylesheet ? new URL(page.stylesheet, Astro.url).href : undefined;
+Astro.response.headers.set("Content-Security-Policy", await ceremonyCsp({ styles: [css], stylesheet }));
 
 const render = outcome.type === "render" ? outcome : undefined;
 const ref = outcome.type === "render" || outcome.type === "error" ? (outcome.ref ?? "") : "";
@@ -54,10 +60,20 @@ const signer = render?.view.kind === "ready" ? render.view.session.signer : unde
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="robots" content="noindex" />
 		<meta name="referrer" content="no-referrer" />
-		<title>Sign the waiver</title>
+		<title>{payment ? "Continue to payment" : "Sign the waiver"}</title>
+		{payment && <meta http-equiv="refresh" content={`0;url=${payment}`} data-testid="waiver-pay-refresh" />}
+		<style is:inline set:html={css}></style>
+		{page.stylesheet && <link rel="stylesheet" href={page.stylesheet} />}
 	</head>
-	<body>
-		<main class="semics-esign semics-sign" data-testid="waiver-page" data-step={render ? "sign" : "error"}>
+	<body class="semics-page">
+		<PageBrand brand={page.brand} />
+		{payment ? (
+			<main class="semics-esign semics-sign semics-page-main" data-testid="waiver-page" data-step="pay">
+				<h1>Continue to payment</h1>
+				<p><a href={payment} data-testid="waiver-pay-link">Go to the payment page</a></p>
+			</main>
+		) : (
+		<main class="semics-esign semics-sign semics-page-main" data-testid="waiver-page" data-step={render ? "sign" : "error"}>
 			<h1>Sign the waiver</h1>
 			{error && <p role="alert" data-testid="waiver-error">{error}</p>}
 			{expired && eventLink && <p><a href={eventLink} data-testid="waiver-book-again">Book again</a></p>}
@@ -89,5 +105,6 @@ const signer = render?.view.kind === "ready" ? render.view.session.signer : unde
 			)}
 			{ref && <p><a href={`/booking?ref=${ref}`}>Back to your booking</a></p>}
 		</main>
+		)}
 	</body>
 </html>

package/src/astro/lib/flow.ts

@@ -26,12 +26,13 @@ import {
 	bookingCookieOptions,
 	isCrossSiteRequest,
 } from "@semics-tech/emdash-events/astro/lib/checkout-form";
-import { eventHref } from "@semics-tech/emdash-events/astro/lib/list";
+import { eventPageHref } from "@semics-tech/emdash-events/astro/lib/page";
 import { isPayUrl } from "@semics-tech/emdash-events/astro/lib/payment";
 import { forwardReceipt } from "@semics-tech/emdash-events/astro/lib/receipt";
 import { newIdempotencyKey } from "@semics-tech/emdash-events/astro/lib/widget";
 
 import {
+	checkWaiverSeats,
 	readWaiverForm,
 	type SeatPart,
 	safeReturnPath,
@@ -48,6 +49,8 @@ export const FLOW_STEPS = ["book", "sign", "pay", "done"] as const;
 export interface SuiteIds {
 	eventsPluginId: string;
 	esignPluginId: string;
+	/** The site's event page for "Book again" (`page.eventPath`); default `/events/{slug}`. */
+	eventPath?: string;
 }
 
 export interface WaiverRequestContext {
@@ -100,6 +103,14 @@ export interface BookingAnswer {
 	waiver?: { refs: string[]; voids?: Record<string, string> };
 }
 
+/**
+ * Whether a redirect leaves this site (T155). A form on the signing page cannot be redirected there:
+ * its CSP's `form-action 'self'` also covers where the post redirects, so the browser stops on the page.
+ */
+export function leavesSite(location: string, site: URL): boolean {
+	return new URL(location, site).origin !== site.origin;
+}
+
 /** Booking statuses with nothing left to sign for: the places are gone (T151). */
 const ENDED = ["expired", "cancelled", "declined", "refunded", "refunded_unavailable"];
 
@@ -254,6 +265,11 @@ async function book(ctx: WaiverRequestContext, form: FormData, ids: SuiteIds, de
 	const read = readWaiverForm(form);
 	if (!read.ok) return refuse(read.code, read.fields);
 	const order = read.order;
+	// An order the waiver rules refuse never reserves: no booking is left behind, and no "cancelled" email sent.
+	if (form.get("waiverEach") === "1") {
+		const seats = checkWaiverSeats(order);
+		if (seats) return refuse(seats.code, seats.fields);
+	}
 
 	const reserved = await post<{ bookingRef?: string; accessToken?: string }>(
 		call,
@@ -439,7 +455,7 @@ async function sign(
 				esignPluginId: ids.esignPluginId,
 			});
 		}
-		const href = booking.event?.slug ? eventHref({ slug: booking.event.slug }) : undefined;
+		const href = eventPageHref(booking.event?.slug, ids.eventPath);
 		return { type: "error", ref, code: "BOOKING_EXPIRED", ...(href ? { href } : {}) };
 	}
 	const withBooking = booking ? { booking } : {};

package/src/astro/lib/form.ts

@@ -120,6 +120,30 @@ export function readWaiverForm(form: FormData): WaiverFormResult {
 	};
 }
 
+/** Adults one order can have invited by email (Events Pro's `MAX_EMAIL_SIGNERS`). */
+const MAX_EMAIL_SIGNERS = 10;
+const norm = (value: string) => value.trim().toLowerCase();
+
+/**
+ * Events Pro's waiver rules for an event signed per attendee (`planWaiverIntents`), asked before anything is
+ * reserved: an adult with the buyer's address (or none) must be the buyer, once; other adults are invited by
+ * email, up to the limit; the buyer signs for minors. The core stays the authority: it checks again at continue.
+ */
+export function checkWaiverSeats(order: WaiverOrder): { code: string; fields: string[] } | null {
+	const fields: string[] = [];
+	let buyerSeated = false;
+	let emailed = 0;
+	for (const [i, a] of order.attendees.entries()) {
+		if (a.minor) continue;
+		if (norm(a.email ?? order.buyer.email) !== norm(order.buyer.email)) emailed++;
+		else if (buyerSeated || norm(a.name) !== norm(order.buyer.name))
+			fields.push(seatField(order.rows[i] ?? 0, "email"));
+		else buyerSeated = true;
+	}
+	if (fields.length > 0) return { code: "WAIVER_EMAIL_REQUIRED", fields };
+	return emailed > MAX_EMAIL_SIGNERS ? { code: "WAIVER_TOO_MANY_EMAILS", fields: [] } : null;
+}
+
 /** Messages for the codes a refused booking comes back with. */
 export const WAIVER_MESSAGES: Record<string, string> = {
 	BAD_REQUEST: "Please check the highlighted details.",

package/src/astro/lib/keep-form.ts

@@ -0,0 +1,77 @@
+/**
+ * Keeps what a person typed when a booking is refused (`<BookingWithWaiver>`). The refusal is a redirect back to
+ * the page with codes only: personal details never go in a URL, and a server-rendered copy could end up in a page
+ * cache. So the browser keeps them: on submit this tab's `sessionStorage` takes the form's values, and the
+ * page the refusal lands on puts them back. Any other visit discards them; so does closing the tab. Without
+ * JavaScript (or storage) the form comes back empty with its message, as before. No text; no imports.
+ */
+
+/** The parts of a form control this needs. */
+export interface KeptField {
+	name: string;
+	type: string;
+	value: string;
+	checked?: boolean;
+}
+
+export const KEPT_MS = 15 * 60_000;
+export const keptKey = (eventId: string) => `semics-waiver-form:${eventId}`;
+
+type Stored = Pick<Storage, "getItem" | "setItem" | "removeItem">;
+
+/** What to keep: what the person chose, never hidden fields (the idempotency key, the security check's token). */
+export function collectFields(fields: Iterable<KeptField>): Record<string, string | boolean> {
+	const out: Record<string, string | boolean> = {};
+	for (const f of fields) {
+		if (!f.name || f.type === "hidden" || f.type === "submit" || f.type === "button") continue;
+		if (f.type === "checkbox") {
+			if (f.checked) out[f.name] = true;
+		} else if (f.value) out[f.name] = f.value;
+	}
+	return out;
+}
+
+export function applyFields(fields: Iterable<KeptField>, kept: Record<string, string | boolean>): void {
+	for (const f of fields) {
+		const value = kept[f.name];
+		if (value === undefined || f.type === "hidden") continue;
+		if (f.type === "checkbox") f.checked = value === true;
+		else if (typeof value === "string") f.value = value;
+	}
+}
+
+export function saveKept(storage: Stored, eventId: string, fields: Iterable<KeptField>, now: number): void {
+	try {
+		storage.setItem(keptKey(eventId), JSON.stringify({ at: now, values: collectFields(fields) }));
+	} catch {
+		// Private browsing, a full quota: the form just comes back empty.
+	}
+}
+
+/** The values to restore: only after a refusal of this event's form, once, and only while fresh. */
+export function takeKept(storage: Stored, eventId: string, search: URLSearchParams, now: number) {
+	try {
+		const raw = storage.getItem(keptKey(eventId));
+		storage.removeItem(keptKey(eventId));
+		if (!raw || !search.get("waiver_error") || search.get("waiver_event") !== eventId) return null;
+		const { at, values } = JSON.parse(raw) as { at: number; values: Record<string, string | boolean> };
+		return now - at <= KEPT_MS ? values : null;
+	} catch {
+		return null;
+	}
+}
+
+/** Wires every booking form on the page. Run before the picker's script, which shows the date the select holds. */
+export function keepWaiverForms(doc: Document, storage: Stored, url: URL): void {
+	for (const form of doc.querySelectorAll<HTMLFormElement>("form[data-keep-values]")) {
+		const eventId = (form.elements.namedItem("eventId") as HTMLInputElement | null)?.value ?? "";
+		const fields = () => [...form.elements] as unknown as HTMLInputElement[];
+		const kept = takeKept(storage, eventId, url.searchParams, Date.now());
+		if (kept) applyFields(fields(), kept);
+		form.addEventListener("submit", () => saveKept(storage, eventId, fields(), Date.now()));
+	}
+}
+
+if (typeof document !== "undefined" && typeof sessionStorage !== "undefined") {
+	keepWaiverForms(document, sessionStorage, new URL(location.href));
+}

package/src/astro/virtual.d.ts

@@ -4,4 +4,6 @@ declare module "virtual:semics-events-suite/config" {
 	export const eventsPluginId: string;
 	/** The E-sign core's plugin id on this site. */
 	export const esignPluginId: string;
+	/** How the site dresses the suite's page (`eventsSuite({ page })`); checked by Events' integration. */
+	export const page: import("@semics-tech/emdash-events/astro/lib/page").PageOptions;
 }