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

package/src/onsite/preview.js

@@ -0,0 +1,97 @@
+/**
+ * `./onsite/preview`: the console's preview of a creative, drawn by the shoppers' own renderer
+ * inside the console's box instead of over the page. It makes no request, sends no event and counts
+ * nothing: its buttons only move between steps, and closing does nothing. A popup, sheet, bar or
+ * teaser sits inside `host` as it would in the viewport (the host contains its fixed layers), and
+ * `device` picks the small-screen layout whatever the console's own width.
+ */
+
+import { answerFields, answerOf } from './answers.js';
+import { mountForm } from './render.js';
+import { readCreative } from './rules.js';
+import { mountWheel } from './wheel.js';
+
+export { CALLING_CODES } from './rules.js';
+
+const SAMPLE_CONSENT = 'Your consent text appears here.';
+const SAMPLE_SMS_CONSENT = 'Your SMS consent text appears here.';
+const noop = () => {};
+const silent = { analytics: () => false };
+const inert = {
+	submitted: noop,
+	closed: noop,
+	shown: noop,
+	tab: noop,
+	code: noop,
+};
+/** A basket to show a progress block against, when the console gives none. */
+const SAMPLE_BASKET = 32;
+
+/**
+ * Render `creative` into `host`.
+ *
+ * @param {HTMLElement} host The console's element; the preview fills it.
+ * @param {unknown} creative The arm's payload.
+ * @param {{ step?: string, device?: 'desktop'|'mobile', consentText?: string, smsConsentText?: string, locale?: string,
+ *   questions?: Array<{ key: string, type?: 'one'|'many'|'date'|'number', label?: string, options?: Array<{ value: string, label?: string }>, format?: object }>,
+ *   prizes?: Array<{ key: string, label: string }>, basketValue?: number }} [options]
+ * @returns {{ update(creative: unknown, options?: object): void, destroy(): void, step(): string|null }}
+ */
+export function mountPreview(host, creative, options = {}) {
+	let mounted = null;
+	let last = options;
+
+	const render = (doc, opts) => {
+		const read = readCreative(doc);
+		mounted?.destroy();
+		mounted = null;
+		if (!read) return;
+		const format = read.format ?? 'popup';
+		mounted = mountForm({
+			form: {
+				slot: 'preview',
+				format,
+				// The settings' `locale`, so the preview orders a birthday and picks a phone's
+				// country as shoppers see them, not by the console's own language.
+				...(opts.locale ? { locale: opts.locale } : {}),
+				consent_text: { text: opts.consentText ?? SAMPLE_CONSENT },
+				sms_consent_text: { text: opts.smsConsentText ?? SAMPLE_SMS_CONSENT },
+				questions: Array.isArray(opts.questions) ? opts.questions : [],
+				prizes: Array.isArray(opts.prizes) ? opts.prizes : [],
+			},
+			creative: read,
+			decision: { slot: 'preview' },
+			access: silent,
+			client: null,
+			api: null,
+			counters: inert,
+			loadWheel: () => Promise.resolve({ mountWheel }),
+			loadAnswers: () => Promise.resolve({ answerFields, answerOf }),
+			basket: () =>
+				Number.isFinite(opts.basketValue) ? opts.basketValue : SAMPLE_BASKET,
+			container: host,
+			preview: {
+				device: opts.device === 'mobile' ? 'mobile' : 'desktop',
+				step: opts.step,
+			},
+		});
+	};
+
+	render(creative, options);
+	return {
+		/** Re-render, on the step shown unless `options.step` names another. */
+		update(next, opts = {}) {
+			last = {
+				...last,
+				...opts,
+				step: opts.step ?? mounted?.step() ?? undefined,
+			};
+			render(next, last);
+		},
+		destroy() {
+			mounted?.destroy();
+			mounted = null;
+		},
+		step: () => mounted?.step() ?? null,
+	};
+}

package/src/onsite/render-loader.js

@@ -0,0 +1,5 @@
+/**
+ * The renderer, only once a form is to show: a bundler splits this import out of ./onsite, and the
+ * CDN build swaps this module for cdn/render-loader.js, which loads dist/onsite-render.min.js.
+ */
+export const loadRender = () => import('./render.js');