@thg-agentic/hyper-personalisation-web 3.23.0 → 3.24.0

package/src/onsite/rules.js

@@ -20,7 +20,11 @@ export const TRIGGERS = [
 	'inline',
 	'manual',
 ];
-/** The formats that cover the page: one of them per page view, the highest priority first. */
+/**
+ * The formats that cover the page: one of them per page view, the highest priority first. Once one
+ * has shown (or the visitor was held out of it) the page view's allowance is spent, so closing it
+ * never lets the next waiting form in.
+ */
 export const OVERLAY = (format) => format !== 'inline';
 /**
  * The formats that interrupt the shopper, which the property's gap spaces out: not a bar or a
@@ -49,6 +53,7 @@ export function readForm(raw) {
 		priority: Number.isFinite(raw.priority) ? raw.priority : 0,
 		pages: isObject(raw.pages) ? raw.pages : {},
 		devices: strings(raw.devices),
+		aliases: strings(raw.aliases),
 		audiences: strings(raw.audiences),
 		caps: {
 			per_session: count(caps.per_session),
@@ -115,6 +120,14 @@ export function deviceOf(win) {
 
 const at = (iso) => (typeof iso === 'string' ? Date.parse(iso) : Number.NaN);
 
+/**
+ * A form the site opens itself (`manual`: its own sign-up button) is the shopper asking for it, so
+ * how often it has shown does not hold it back: no caps, gap or page view allowance, as Klaviyo's
+ * custom-triggered forms ignore their frequency settings. Its pages, devices, dates and audiences
+ * still do.
+ */
+export const ASKED = (form) => form.trigger.type === 'manual';
+
 /**
  * Every reason `form` may not show now, empty when it may. `env` is the page:
  * `{ path, device, now, seen, subscribed, personalisation, preview, audiences }`, where `seen` is
@@ -137,8 +150,8 @@ export function blockers(form, env) {
 		)
 			reasons.push('not in its audiences');
 	}
-	// A trader previewing a form sees it whatever the counters say.
-	if (env.preview) return reasons;
+	// A trader previewing a form, or a shopper who asked for it, sees it whatever the counters say.
+	if (env.preview || env.asked || ASKED(form)) return reasons;
 	const { seen } = env;
 	const { caps } = form;
 	if (seen.submitted) reasons.push('already submitted');

package/src/onsite/styles.js

@@ -66,7 +66,9 @@ dialog::backdrop{background:none}
 .io{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;color:inherit}
 .f{display:flex;flex-direction:column;gap:14px;padding:44px 40px 36px;flex:1 0 auto;min-width:0}
 .t-split .f{flex:1 1 0;justify-content:center}
+.lk{min-width:var(--lw);min-height:var(--lh)}
 .lk>.f{justify-content:center}
+.an{align-self:start;margin-top:var(--tp,0px);max-height:calc(100% - var(--tp,0px))}
 .z-full .f,.fullscreen .f{justify-content:center;width:min(100%,560px);margin:auto}
 .pd-none{padding:0}
 .pd-sm{padding:24px}
@@ -138,7 +140,7 @@ legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:600}
 .bi{display:block;width:100%;height:auto}
 .bl{display:block;border-radius:var(--br)}
 hr{width:100%;margin:4px 0;border:0;border-top:1px solid var(--ln)}
-.wh{width:min(100%,320px);align-self:center}
+.wh{width:min(100%,320px);aspect-ratio:1;align-self:center}
 .wh svg{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 24px rgb(0 0 0/.2))}
 .hd{display:none}
 .uc h2{text-transform:uppercase;font-weight:800;letter-spacing:-.01em;line-height:1.02}
@@ -189,8 +191,10 @@ hr{width:100%;margin:4px 0;border:0;border-top:1px solid var(--ln)}
 .p-left .tb,.p-right .tb{writing-mode:vertical-rl;padding:22px 13px;border-radius:var(--br) 0 0 var(--br)}
 .p-left .tb{transform:rotate(180deg)}
 .b-pill.teaser .tb{border-radius:999px}
-.teaser .x{top:-20px;right:-20px;border:8px solid transparent;background:var(--t) padding-box;color:var(--b)}
-.teaser.p-right .x{right:auto;left:-20px}
+.teaser .x{top:auto;right:0;bottom:100%;border:10px solid transparent;background:var(--t) padding-box;box-shadow:none;color:var(--b)}
+.teaser .x::before,.teaser .x::after{width:10px}
+.teaser.p-left .x,.teaser.p-right .x{bottom:auto;top:100%}
+.teaser.p-left .x{right:auto;left:0}
 .inline{position:static;display:block;height:100%}
 .inline .w{width:100%;height:100%;box-shadow:none;border:1px solid var(--ln);animation:none}
 .inline .t-stack .m{max-height:none}

package/src/onsite/wheel.js

@@ -10,7 +10,15 @@ import { restAngle } from './rules.js';
 
 const NS = 'http://www.w3.org/2000/svg';
 const SPIN_MS = 4500;
-const MAX_LABEL = 16;
+/** A label's room along its slice, in the wheel's units: from beside the hub to inside the rim. */
+const LABEL_FROM = 0.22;
+const LABEL_TO = 0.95;
+/** Its type: as large as fits up to the first, never under the second (about 11px on a 320px wheel). */
+const FONT_MAX = 0.105;
+const FONT_MIN = 0.082;
+/** A bold sans character's width, a little over the average, so a label is never cut. */
+const EM_PER_CHAR = 0.62;
+const LINE_HEIGHT = 1.15;
 const ACCENT = 'var(--hp-accent,#111)';
 const ON_ACCENT = 'var(--hp-on-accent,#fff)';
 const BG = 'var(--hp-bg,#fff)';
@@ -39,6 +47,36 @@ const point = (deg, r = 1) => {
 	return `${(r * Math.cos(rad)).toFixed(4)} ${(r * Math.sin(rad)).toFixed(4)}`;
 };
 
+/**
+ * How a prize label fits its slice: on one line at the largest size that fits; else on two, broken
+ * at the space nearest its middle; else shortened with an ellipsis at the smallest size. A slice's
+ * width near the hub bounds the size too, so many slices draw smaller type.
+ *
+ * @returns {{ lines: string[], size: number }}
+ */
+export function fitLabel(label, slices) {
+	const room = LABEL_TO - LABEL_FROM;
+	// The slice's width a third of the way out, where a long label's lines run: their height fits.
+	const across = 2 * 0.35 * Math.sin(Math.min(Math.PI / slices, Math.PI / 2));
+	const top = (lines) =>
+		Math.max(FONT_MIN, Math.min(FONT_MAX, across / (lines * LINE_HEIGHT)));
+	const sizeFor = (text) => room / (Math.max(1, text.length) * EM_PER_CHAR);
+	const one = sizeFor(label);
+	if (one >= FONT_MIN) return { lines: [label], size: Math.min(top(1), one) };
+	const spaces = [...label.matchAll(/ /g)].map((m) => m.index);
+	if (spaces.length) {
+		const middle = label.length / 2;
+		const at = spaces.reduce((a, b) =>
+			Math.abs(b - middle) < Math.abs(a - middle) ? b : a,
+		);
+		const lines = [label.slice(0, at), label.slice(at + 1)];
+		const size = Math.min(top(2), ...lines.map(sizeFor));
+		if (size >= FONT_MIN) return { lines, size };
+	}
+	const fits = Math.floor(room / (FONT_MIN * EM_PER_CHAR));
+	return { lines: [`${label.slice(0, fits - 1).trimEnd()}…`], size: FONT_MIN };
+}
+
 /**
  * Draw the wheel for `prizes` (`[{ key, label }]`) into `container`. Null for fewer than two.
  *
@@ -86,19 +124,29 @@ export function mountWheel(container, prizes) {
 		// Along its slice's middle; on the left half turned about its own centre, so at rest no label
 		// reads upside down.
 		const angle = (i + 0.5) * size - 90;
+		const fit = fitLabel(label, n);
 		const text = paint(
 			make('text', {
-				transform: `rotate(${angle}) translate(0.6 0)${angle > 90 && angle < 270 ? ' rotate(180)' : ''}`,
+				transform: `rotate(${angle}) translate(${(LABEL_FROM + LABEL_TO) / 2} 0)${angle > 90 && angle < 270 ? ' rotate(180)' : ''}`,
 				'text-anchor': 'middle',
 				'dominant-baseline': 'central',
-				'font-size': n > 6 ? 0.09 : 0.105,
+				'font-size': fit.size.toFixed(4),
 				'font-weight': 700,
 				'aria-hidden': 'true',
 			}),
 			ink,
 		);
-		text.textContent =
-			label.length > MAX_LABEL ? `${label.slice(0, MAX_LABEL - 1)}…` : label;
+		// Two lines sit either side of the slice's middle.
+		fit.lines.forEach((line, k) => {
+			const span = make('tspan', {
+				x: 0,
+				y: ((k - (fit.lines.length - 1) / 2) * fit.size * LINE_HEIGHT).toFixed(
+					4,
+				),
+			});
+			span.textContent = line;
+			text.append(span);
+		});
 		wheel.append(text);
 		for (const at of [i * size, (i + 0.5) * size]) {
 			const [cx, cy] = point(at, 1.075).split(' ');

package/src/onsite-facade.js

@@ -15,7 +15,7 @@ const LISTENERS = Symbol.for(
 const SUPPRESSED = Symbol.for(
 	'@thg-agentic/hyper-personalisation-web.onsite.suppressed',
 );
-const EVENTS = ['shown', 'submitted', 'apply', 'closed'];
+const EVENTS = ['shown', 'submitted', 'apply', 'closed', 'held'];
 const MAX_PENDING = 10;
 
 const page = () => (typeof window === 'undefined' ? null : window);
@@ -51,8 +51,9 @@ export const onsite = Object.freeze({
 	},
 	/**
 	 * Listen to the forms: `shown`, `submitted` (`{ coupon }`: the claimed code for a form that
-	 * spins, else null), `apply` (`{ coupon }`: a reminder's code to apply) and `closed`
-	 * (`{ reason }`). Each detail carries the `slot`, `arm` and `format`. Returns a function that
+	 * spins, else null), `apply` (`{ coupon }`: a reminder's code to apply), `closed`
+	 * (`{ reason }`) and `held` (a held-out visitor's trigger fired: the site shows what it shows
+	 * without HP). Each detail carries the `slot`, `arm` and `format`. Returns a function that
 	 * stops listening.
 	 */
 	on(name, fn) {
@@ -88,6 +89,29 @@ export const onsite = Object.freeze({
 			/* never into the page */
 		}
 	},
+	/**
+	 * Each form's state, as `debug`, once the page knows whether onsite forms run on it: when the
+	 * runtime has started, or `[]` once none will (not opted in, no live form, the chunk failed).
+	 */
+	ready() {
+		try {
+			const w = page();
+			if (!w) return Promise.resolve([]);
+			if (w[CONTROLLER]) return Promise.resolve(onsite.debug());
+			w[PENDING] ??= [];
+			if (w[PENDING].length < MAX_PENDING)
+				return new Promise((resolve) =>
+					// Settled when the runtime starts (it opens no form for no slot) or none will.
+					w[PENDING].push({
+						slot: null,
+						resolve: () => resolve(onsite.debug()),
+					}),
+				);
+		} catch {
+			/* never into the page */
+		}
+		return Promise.resolve([]);
+	},
 	/** Each form's eligibility on this page, and why: `[]` until the runtime has started. */
 	debug() {
 		try {

package/src/version.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.23.0';
+export const VERSION = '3.24.0';
 export const LIB = '@thg-agentic/hyper-personalisation-web';

package/types/onsite.d.ts

@@ -42,6 +42,8 @@ export interface OnsiteForm {
 		selector?: string;
 	};
 	/** Path globs, `*` matching anything. No `include` is every page; an exclusion wins. */
+	/** Other names `show()` opens this form by (`footer_signup` for the site's sign-up button). */
+	aliases?: string[];
 	pages?: { include?: string[]; exclude?: string[] };
 	/** `mobile` is a coarse pointer or a viewport under 768px. Absent: both. */
 	devices?: Array<'desktop' | 'mobile'>;
@@ -72,6 +74,8 @@ export interface OnsiteForm {
 	}>;
 	/** The wheel's labels only: odds and codes are the server's. */
 	prizes?: Array<{ key: string; label: string }>;
+	/** A destination is handed the shopper's code, so the brand's email can carry it. */
+	code_relayed?: true;
 	channels?: Array<'email' | 'sms'>;
 }
 
@@ -166,6 +170,8 @@ export interface OnsiteEvents {
 	/** A reminder's apply button: put the code on the basket. */
 	apply: OnsiteEventDetail & { coupon: OnsiteCoupon | null };
 	closed: OnsiteEventDetail & { reason: string };
+	/** A held-out visitor's trigger fired (not a form the site opened, whose `open` resolves false): show what the site shows without HP. */
+	held: OnsiteEventDetail;
 }
 
 /** `hp.onsite`, callable before the runtime has loaded. */
@@ -182,6 +188,8 @@ export interface OnsiteFacade {
 	suppress(reason?: string): void;
 	/** Lift `reason`, or every reason. */
 	unsuppress(reason?: string): void;
+	/** Each form's state once the page knows whether onsite forms run on it; `[]` when none will. */
+	ready(): Promise<OnsiteTrace[]>;
 	debug(): OnsiteTrace[];
 }