domma-cms 0.102.0 → 0.103.0

package/plugins/booking/public/booking.js

@@ -0,0 +1,808 @@
+/**
+ * Booking - the booking page in the browser.
+ *
+ * Mounts on every `[data-booking]` element: the booking page's own (rendered
+ * by plugin.public.js) and any the [booking] shortcode put on a page. The
+ * element's JSON config says what to do:
+ *
+ *   {base, service?, with?, embedded}   book: service -> who -> day & time -> details -> done
+ *                                       (a full class -> join its waiting list, when the site has one)
+ *   {base, mode: 'manage', id, t}       a customer's own booking: move or cancel it
+ *
+ * The page is meaningful without this script (services as links, the
+ * booking's details); this replaces that with the live flow.
+ *
+ * The screen is domma-reactive (window.M, which Domma puts on every public
+ * page): one template holding every step, one `M.applyBindings`, and plain
+ * code that only fetches, decides and writes observables. Plain DOM calls are
+ * left only where bindings cannot reach: moving focus to a step's heading or
+ * to the first field with an error, and scrolling back up to the step. Every
+ * piece of text from the server goes in through bindings (textContent,
+ * attributes), never as HTML. Without window.M the server's page stays as it is.
+ */
+
+import {answersFor, dayLabel, dayParts, icsUrl, lengthLabel, placesText, tokenFrom, weekMoves, weekOf, zoneNote} from './lib/page-format.js';
+
+const M = window.M;
+const API = '/api/plugins/booking/public';
+const VIEWER_ZONE = (() => { try { return Intl.DateTimeFormat().resolvedOptions().timeZone || ''; } catch { return ''; } })();
+
+async function request(url, {method = 'GET', body} = {}) {
+    const res = await fetch(url, {
+        method,
+        headers: body ? {'Content-Type': 'application/json', Accept: 'application/json'} : {Accept: 'application/json'},
+        body: body ? JSON.stringify(body) : undefined,
+        credentials: 'same-origin'
+    });
+    let data = null;
+    try { data = await res.json(); } catch { /* not JSON */ }
+    if (!res.ok) {
+        const err = new Error(data?.error || (res.status === 429 ? 'Too many tries just now. Please wait a few minutes.' : 'Something went wrong. Please try again.'));
+        err.status = res.status;
+        err.code = data?.code || '';
+        err.errors = data?.errors || {};
+        throw err;
+    }
+    return data;
+}
+
+// ---- The screen: every step, shown one at a time --------------------------------------
+//
+// %U% is this mount's id prefix (made here, never from the server). Item templates sit
+// inside their data-each so they are compiled per row; nothing in them uses {{ }}.
+
+const BACK = '<span aria-hidden="true">‹ </span>';
+const SUMMARY = '<p class="bk-summary" hidden data-bind-hidden="!summary.value" data-bind-text="summary.value"></p>';
+const ZONE = '<p class="bk-zone" hidden data-bind-hidden="!zone.value" data-bind-text="zone.value"></p>';
+const DETAILS = '<dl class="bk-details" data-each="detailRows key=k"><div><dt data-bind-text="k"></dt><dd data-bind-text="v"></dd></div></dl>';
+const LABEL_TAIL = '<span class="bk-req" aria-hidden="true" data-if="required"> *</span><span class="bk-opt" data-if="!required"> (optional)</span>';
+const Q_HELP = '<p class="bk-hint" data-if="help" data-bind-id="fid + \'-help\'" data-bind-text="help"></p>';
+const Q_ERROR = '<p class="bk-error" hidden data-bind-hidden="!error.value" data-bind-id="fid + \'-err\'" data-bind-text="error.value"></p>';
+const Q_ARIA = 'data-bind-aria-invalid="error.value ? \'true\' : false" data-bind-aria-describedby="error.value ? fid + \'-err\' : (help ? fid + \'-help\' : false)"';
+
+/** One customer field: label, optional hint, control, error - the error bound to `errors.value[key]`. */
+function customerField(key, label, control, {tail = '<span class="bk-req" aria-hidden="true"> *</span>', hint = '', attrs = ''} = {}) {
+    const err = `errors.value.${key}`;
+    return `<div class="bk-field" data-bind-class="${err} && 'has-error'" ${attrs}>`
+        + `<label for="%U%-${key}">${label}${tail}</label>${hint ? `<p class="bk-hint">${hint}</p>` : ''}`
+        + control.replace('>', ` id="%U%-${key}" name="${key}" class="bk-input" data-model="f.${key}.value" data-bind-aria-invalid="${err} ? 'true' : false" data-bind-aria-describedby="${err} ? '%U%-${key}-err' : false">`)
+        + `<p class="bk-error" id="%U%-${key}-err" hidden data-bind-hidden="!${err}" data-bind-text="${err}"></p></div>`;
+}
+
+const OPTIONAL = '<span class="bk-opt"> (optional)</span>';
+
+const TEMPLATE = `
+<p class="bk-live" role="status" aria-live="polite" data-bind-text="live.value" data-bind-class="liveTone.value && ('is-' + liveTone.value)"></p>
+<div class="bk-panel">
+
+  <section class="bk-step bk-step-none" aria-labelledby="%U%-none" hidden data-bind-hidden="step.value !== 'none'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-none">Booking</h2>
+    <p class="bk-note">That service cannot be booked just now.</p>
+  </section>
+
+  <section class="bk-step bk-step-service" aria-labelledby="%U%-service" hidden data-bind-hidden="step.value !== 'service'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-service" data-bind-text="hasServices.value ? 'Choose a service' : 'Book'"></h2>
+    <p class="bk-note" hidden data-bind-hidden="hasServices.value">Nothing can be booked online just now. Please contact us.</p>
+    <ul class="bk-services" data-each="services key=id"><li><button type="button" class="bk-service" data-on-click="$parent.pickService($data)"><span class="bk-service-name" data-bind-text="name"></span><span class="bk-service-meta" data-bind-text="meta"></span><span class="bk-service-desc" data-if="description" data-bind-text="description"></span></button></li></ul>
+  </section>
+
+  <section class="bk-step bk-step-who" aria-labelledby="%U%-who" hidden data-bind-hidden="step.value !== 'who'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-who" data-bind-text="whoTitle.value"></h2>
+    <button type="button" class="bk-back" hidden data-bind-hidden="direct.value" data-on-click="toServices">${BACK}Services</button>
+    ${SUMMARY}
+    <ul class="bk-whos" data-each="whos key=key"><li><button type="button" class="bk-who" data-on-click="$parent.pickWho($data)"><span class="bk-who-name" data-bind-text="name"></span><span class="bk-who-meta" data-if="meta" data-bind-text="meta"></span></button></li></ul>
+  </section>
+
+  <section class="bk-step bk-step-when" aria-labelledby="%U%-when" hidden data-bind-hidden="step.value !== 'when'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-when" data-bind-text="moving.value ? 'Choose a new time' : 'Choose a day and time'"></h2>
+    <button type="button" class="bk-back" hidden data-bind-hidden="!whenBack.value" data-on-click="whenBackGo">${BACK}<span data-bind-text="whenBack.value"></span></button>
+    ${SUMMARY}
+    <div class="bk-week" role="group" aria-label="Choose a day">
+      <button type="button" class="bk-week-move bk-week-prev" aria-label="Earlier week" data-bind-disabled="!prevWeek.value" data-on-click="weekPrev">‹</button>
+      <div class="bk-days" data-each="days key=date"><button type="button" class="bk-day" data-bind-class="$parent.chosen.value === date && 'is-on'" data-bind-disabled="!n" data-bind-aria-pressed="$parent.chosen.value === date ? 'true' : 'false'" data-bind-aria-label="label" data-on-click="$parent.pickDay($data)"><span class="bk-day-name" data-bind-text="weekday"></span><span class="bk-day-num" data-bind-text="day"></span><span class="bk-day-month" data-bind-text="month"></span></button></div>
+      <button type="button" class="bk-week-move bk-week-next" aria-label="Later week" data-bind-disabled="!nextWeek.value" data-on-click="weekNext">›</button>
+    </div>
+    <div class="bk-times-wrap" hidden data-bind-hidden="!chosen.value">
+      <h3 class="bk-times-title" data-bind-text="dateLabel.value"></h3>
+      <div class="bk-times" role="group" data-bind-aria-label="'Times on ' + dateLabel.value" data-each="times key=start"><button type="button" class="bk-time" data-bind-class="full && 'is-full'" aria-pressed="false" data-bind-aria-label="label" data-on-click="$parent.pickTime($data)"><span data-bind-text="time"></span><small data-if="small" data-bind-text="small"></small></button></div>
+    </div>
+    <p class="bk-note" hidden data-bind-hidden="chosen.value">Nothing is free this week. Try a later week.</p>
+    ${ZONE}
+  </section>
+
+  <section class="bk-step" data-bind-class="waiting.value ? 'bk-step-waitlist' : 'bk-step-details'" aria-labelledby="%U%-form" hidden data-bind-hidden="step.value !== 'details' && step.value !== 'waitlist'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-form" data-bind-text="waiting.value ? 'Join the waiting list' : 'Your details'"></h2>
+    <button type="button" class="bk-back" data-on-click="toTimes">${BACK}Times</button>
+    ${SUMMARY}
+    ${ZONE}
+    <form class="bk-form" novalidate data-on-submit="submitForm">
+      <p class="bk-lead" hidden data-bind-hidden="!waiting.value">This class is full. Leave your details: if a place comes free, it is booked for you straight away and you get a confirmation email.</p>
+      ${customerField('name', 'Your name', '<input type="text" required autocomplete="name" maxlength="120">')}
+      ${customerField('email', 'Email', '<input type="email" required autocomplete="email" maxlength="200">', {hint: 'We send the confirmation here.'})}
+      ${customerField('phone', 'Phone', '<input type="tel" autocomplete="tel" maxlength="120" data-bind-required="phoneRequired.value">', {
+          tail: '<span class="bk-req" aria-hidden="true" hidden data-bind-hidden="!phoneRequired.value"> *</span><span class="bk-opt" data-bind-hidden="phoneRequired.value"> (optional)</span>',
+          attrs: 'data-bind-hidden="!askPhone.value"'})}
+      ${customerField('notes', 'Anything we should know?', '<textarea rows="3" maxlength="2000"></textarea>', {tail: OPTIONAL})}
+      <fieldset class="bk-questions" hidden data-bind-hidden="!hasQuestions.value"><legend>A few questions</legend>
+        <div class="bk-questions-list" data-each="questions key=id">
+          <div class="bk-field bk-check-field" data-if="isCheck" data-bind-class="error.value && 'has-error'">
+            <label class="bk-check" data-bind-for="fid"><input type="checkbox" data-bind-id="fid" data-bind-name="fname" data-model="value.value" ${Q_ARIA}> <span data-bind-text="label"></span><span class="bk-req" aria-hidden="true" data-if="required"> *</span></label>
+            ${Q_HELP}${Q_ERROR}
+          </div>
+          <div class="bk-field" data-if="isChoice" data-bind-class="error.value && 'has-error'">
+            <label data-bind-for="fid"><span data-bind-text="label"></span>${LABEL_TAIL}</label>${Q_HELP}
+            <select class="bk-input" data-bind-id="fid" data-bind-name="fname" data-bind-required="required" data-options="options" data-options-caption="'Choose…'" data-model="value.value" ${Q_ARIA}></select>
+            ${Q_ERROR}
+          </div>
+          <div class="bk-field" data-if="isText" data-bind-class="error.value && 'has-error'">
+            <label data-bind-for="fid"><span data-bind-text="label"></span>${LABEL_TAIL}</label>${Q_HELP}
+            <input class="bk-input" maxlength="300" data-bind-type="inputType" data-bind-id="fid" data-bind-name="fname" data-bind-required="required" data-model="value.value" ${Q_ARIA}>
+            ${Q_ERROR}
+          </div>
+          <div class="bk-field" data-if="isLong" data-bind-class="error.value && 'has-error'">
+            <label data-bind-for="fid"><span data-bind-text="label"></span>${LABEL_TAIL}</label>${Q_HELP}
+            <textarea class="bk-input" rows="3" maxlength="4000" data-bind-id="fid" data-bind-name="fname" data-model="value.value" ${Q_ARIA}></textarea>
+            ${Q_ERROR}
+          </div>
+        </div>
+      </fieldset>
+      <div class="bk-hp" aria-hidden="true"><label>Website<input type="text" name="website" tabindex="-1" autocomplete="off" data-model="f.website.value"></label></div>
+      <p class="bk-terms" hidden data-bind-hidden="waiting.value || !termsUrl.value">By booking you agree to our <a data-bind-href="termsUrl.value || false" target="_blank" rel="noopener">terms</a>.</p>
+      <div class="bk-actions"><button type="submit" class="bk-primary" data-bind-disabled="busy.value" data-bind-text="busy.value ? (waiting.value ? 'Joining…' : 'Booking…') : (waiting.value ? 'Join the waiting list' : 'Confirm booking')"></button></div>
+    </form>
+  </section>
+
+  <section class="bk-step bk-step-waitlisted" aria-labelledby="%U%-waitlisted" hidden data-bind-hidden="step.value !== 'waitlisted'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-waitlisted">You are on the waiting list</h2>
+    <p class="bk-lead" data-bind-text="waitLead.value"></p>
+    ${SUMMARY}
+    <div class="bk-actions">
+      <button type="button" class="bk-secondary" data-on-click="toTimes">See other times</button>
+      <button type="button" class="bk-link" hidden data-bind-hidden="direct.value" data-on-click="toServices">Book something else</button>
+    </div>
+  </section>
+
+  <section class="bk-step bk-step-done" aria-labelledby="%U%-done" hidden data-bind-hidden="step.value !== 'done'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-done">You are booked</h2>
+    <p class="bk-lead" data-bind-text="doneLead.value"></p>
+    ${DETAILS}
+    ${ZONE}
+    <p class="bk-note" hidden data-bind-hidden="!callUrl.value">This is an online appointment. The call opens 10 minutes before the start; the link is in your email too.</p>
+    <div class="bk-actions">
+      <a class="bk-primary bk-btn" hidden data-bind-hidden="!callUrl.value" data-bind-href="callUrl.value || false">Join the call</a>
+      <a class="bk-secondary" hidden data-bind-hidden="!icsHref.value" data-bind-href="icsHref.value || false" download="booking.ics">Add to calendar</a>
+      <a class="bk-secondary" hidden data-bind-hidden="!manageHref.value" data-bind-href="manageHref.value || false">Change or cancel</a>
+      <button type="button" class="bk-link" data-on-click="another">Make another booking</button>
+    </div>
+  </section>
+
+  <section class="bk-step bk-step-manage" aria-labelledby="%U%-manage" hidden data-bind-hidden="step.value !== 'manage'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-manage" data-bind-text="mg.value.cancelled ? 'Booking cancelled' : 'Your booking'"></h2>
+    <p class="bk-lead" hidden data-bind-hidden="!manageNote.value" data-bind-text="manageNote.value"></p>
+    <p class="bk-status is-cancelled" hidden data-bind-hidden="mg.value.why !== 'cancelled'">This booking has been cancelled.</p>
+    <p class="bk-note" hidden data-bind-hidden="mg.value.why !== 'past'">This booking has passed.</p>
+    <p class="bk-note" hidden data-bind-hidden="mg.value.why !== 'locked'">This booking can no longer be changed online. Please contact us if you need to change it.</p>
+    ${DETAILS}
+    ${ZONE}
+    <div class="bk-actions" hidden data-bind-hidden="!mg.value.hasActions">
+      <a class="bk-primary bk-btn" hidden data-bind-hidden="!mg.value.join" data-bind-href="mg.value.join || false">Join the call</a>
+      <a class="bk-secondary" hidden data-bind-hidden="mg.value.cancelled" data-bind-href="mg.value.ics || false" download="booking.ics">Add to calendar</a>
+      <button type="button" class="bk-secondary" hidden data-bind-hidden="!mg.value.canMove" data-on-click="startMove">Change time</button>
+      <button type="button" class="bk-danger" hidden data-bind-hidden="!mg.value.canCancel" data-on-click="askCancel">Cancel booking</button>
+    </div>
+    <p hidden data-bind-hidden="!mg.value.cancelled"><a class="bk-link" data-bind-href="base">Make a new booking</a></p>
+  </section>
+
+  <section class="bk-step bk-step-confirm-move" aria-labelledby="%U%-confirm-move" hidden data-bind-hidden="step.value !== 'confirm-move'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-confirm-move">Move your booking?</h2>
+    <button type="button" class="bk-back" data-on-click="toTimes">${BACK}Times</button>
+    <dl class="bk-details"><div><dt>From</dt><dd data-bind-text="moveFrom.value"></dd></div><div><dt>To</dt><dd data-bind-text="moveTo.value"></dd></div></dl>
+    ${ZONE}
+    <div class="bk-actions"><button type="button" class="bk-primary" data-bind-disabled="busy.value" data-on-click="doMove">Move my booking</button></div>
+  </section>
+
+  <section class="bk-step bk-step-cancel" aria-labelledby="%U%-cancel" hidden data-bind-hidden="step.value !== 'cancel'">
+    <h2 class="bk-step-title" tabindex="-1" id="%U%-cancel">Cancel this booking?</h2>
+    ${DETAILS}
+    <div class="bk-field"><label for="%U%-reason">Reason${OPTIONAL}</label><textarea id="%U%-reason" class="bk-input" rows="2" maxlength="300" data-model="reason.value"></textarea></div>
+    <div class="bk-actions">
+      <button type="button" class="bk-danger" data-bind-disabled="busy.value" data-on-click="doCancel">Yes, cancel it</button>
+      <button type="button" class="bk-secondary" data-on-click="keepIt">Keep it</button>
+    </div>
+  </section>
+</div>`;
+
+// ---- One mounted booking app ------------------------------------------------------
+
+/** The rows of a booking's details list. */
+function detailRowsOf(b) {
+    return [['What', b.serviceName], ['When', b.date ? `${dayLabel(b.date)}, ${b.time}` : ''], ['Where', b.online ? 'Online - a video call in your browser' : ''],
+        ['With', b.bookableName], ['Name', b.name], ['Email', b.email], ['Phone', b.phone]]
+        .filter(([, v]) => v).map(([k, v]) => ({k, v: String(v)}));
+}
+
+function mount(root, cfg) {
+    const uid = `bk${Math.random().toString(36).slice(2, 8)}`;
+
+    // ---- What the code decides with (plain) ----
+    const st = {
+        info: null,            // GET /services
+        service: null,
+        bookableId: cfg.with || '',
+        direct: false,
+        mode: '',              // 'move' while choosing a new time for a booking
+        ignore: '',            // the booking being moved (its own time is free to it)
+        range: null,
+        week: '',              // first date of the strip
+        days: new Map(),       // date -> slots
+        date: '',
+        slot: null,
+        booking: null,         // manage mode
+        quiet: false           // the next step does not take focus (page load)
+    };
+
+    // ---- What the screen shows (observables) ----
+    const live = M.observable('');
+    const liveTone = M.observable('');
+    const step = M.observable('');
+    const summary = M.observable('');
+    const zone = M.observable('');
+    const direct = M.observable(false);
+    const moving = M.observable(false);
+    const busy = M.observable(false);
+    const services = M.observableArray([]);
+    const hasServices = M.observable(false);
+    const whos = M.observableArray([]);
+    const whoTitle = M.observable('');
+    const whenBack = M.observable('');
+    const days = M.observableArray([]);
+    const chosen = M.observable('');
+    const dateLabel = M.observable('');
+    const times = M.observableArray([]);
+    const prevWeek = M.observable('');
+    const nextWeek = M.observable('');
+    const waiting = M.observable(false);
+    const f = {name: M.observable(''), email: M.observable(''), phone: M.observable(''), notes: M.observable(''), website: M.observable('')};
+    const askPhone = M.observable(true);
+    const phoneRequired = M.observable(false);
+    const termsUrl = M.observable('');
+    const errors = M.observable({});
+    const questions = M.observableArray([]);   // {id, fid, fname, label, help, required, kind flags, value: observable, error: observable}
+    const hasQuestions = M.observable(false);
+    const waitLead = M.observable('');
+    const doneLead = M.observable('');
+    const callUrl = M.observable('');
+    const icsHref = M.observable('');
+    const manageHref = M.observable('');
+    const detailRows = M.observableArray([]);
+    const manageNote = M.observable('');
+    const mg = M.observable({});
+    const moveFrom = M.observable('');
+    const moveTo = M.observable('');
+    const reason = M.observable('');
+
+    // ---- Frame: status line and one step at a time ----
+
+    function say(text, tone = '') {
+        live.value = text || '';
+        liveTone.value = tone;
+    }
+
+    function paintSummary() {
+        const bits = [];
+        if (st.service) bits.push(`${st.service.name} · ${lengthLabel(st.service.duration)}`);
+        const who = st.service?.bookables.find(b => b.id === st.bookableId);
+        if (who) bits.push(`with ${who.name}`);
+        if (st.slot) bits.push(`${dayLabel(st.date)}, ${st.slot.time}`);
+        summary.value = bits.join(' · ');
+    }
+
+    /** Show a step, its heading focused so a screen reader and the keyboard start there. */
+    function show(name) {
+        paintSummary();
+        busy.value = false;
+        step.value = name;
+        M.flush?.();
+        const id = name === 'details' || name === 'waitlist' ? 'form' : name;
+        if (!st.quiet) root.querySelector(`#${uid}-${id}`)?.focus({preventScroll: true});
+        st.quiet = false;
+        // A long step replaced by a short one can leave the reader below it.
+        const top = root.getBoundingClientRect().top;
+        if (top < 0) window.scrollTo({top: top + window.scrollY - 80, behavior: 'smooth'});
+    }
+
+    // ---- Booking ----
+
+    async function start() {
+        step.value = '';
+        st.quiet = true;   // do not steal focus on page load
+        say('Loading…');
+        try {
+            st.info = await request(`${API}/services`);
+        } catch (err) {
+            say(err.message, 'error');
+            return;
+        }
+        say('');
+        zone.value = zoneNote(st.info?.timeZone, VIEWER_ZONE);
+        const list = st.info.services || [];
+        services.value = list.map(s => ({id: s.id, name: s.name, description: s.description || '',
+            meta: `${lengthLabel(s.duration)}${s.capacity > 1 ? ` · a class of up to ${s.capacity}` : ''}${s.online ? ' · online' : ''}`}));
+        hasServices.value = list.length > 0;
+        if (cfg.service) {
+            const svc = list.find(s => s.id === cfg.service);
+            if (!svc) return show('none');
+            return pickService(svc, {direct: true});
+        }
+        toServices();
+    }
+
+    function toServices() {
+        st.service = null;
+        st.slot = null;
+        show('service');
+    }
+
+    /** The service's extra questions (Booking Pro); answers kept while the service stays the same. */
+    function setQuestions(fields, keep) {
+        const before = new Map(questions.peek().map(r => [r.id, r.value.peek()]));
+        const rows = (fields || []).map(q => {
+            const blank = q.kind === 'yesno' ? false : '';
+            return {
+                id: q.id, fid: `${uid}-q-${String(q.id).replace(/[^\w-]/g, '_')}`, fname: `q:${q.id}`,
+                label: q.label, help: q.help || '', required: Boolean(q.required), options: q.options || [],
+                isCheck: q.kind === 'yesno', isChoice: q.kind === 'choice', isLong: q.kind === 'longtext',
+                isText: !['yesno', 'choice', 'longtext'].includes(q.kind),
+                inputType: {number: 'number', date: 'date', email: 'email', phone: 'tel'}[q.kind] || 'text',
+                value: M.observable(keep && before.has(q.id) ? before.get(q.id) : blank),
+                error: M.observable('')
+            };
+        });
+        questions.splice(0, questions.peek().length, ...rows);
+    }
+
+    function pickService(svc, {direct: isDirect = false} = {}) {
+        setQuestions(svc.fields, st.service?.id === svc.id);
+        st.service = svc;
+        st.direct = isDirect;
+        direct.value = isDirect;
+        st.days.clear();
+        st.range = null;
+        st.date = '';
+        st.slot = null;
+        const withOk = svc.bookables.some(b => b.id === cfg.with);
+        st.bookableId = withOk ? cfg.with : '';
+        if (svc.chooseBookable && !withOk) return who();
+        return when();
+    }
+
+    function who() {
+        const people = st.service.bookables;
+        const allRooms = people.every(b => b.kind === 'resource');
+        whos.value = [
+            {key: '*', id: '', name: allRooms ? 'Any that is free' : 'Anyone', meta: 'The most times to choose from'},
+            ...people.map(b => ({key: `b-${b.id}`, id: b.id, name: b.name, meta: b.description || ''}))
+        ];
+        whoTitle.value = allRooms ? 'Which one?' : 'Who would you like?';
+        show('who');
+    }
+
+    function pickWho(row) {
+        st.bookableId = row.id;
+        st.days.clear();
+        st.range = null;
+        st.date = '';
+        st.slot = null;
+        when();
+    }
+
+    /** Fetch a week of free times (7 days from `from`); remembers the bookable range. */
+    async function loadWeek(from) {
+        const q = new URLSearchParams({service: st.service.id, from, to: weekOf(from)[6]});
+        if (st.bookableId) q.set('with', st.bookableId);
+        if (st.ignore) q.set('ignore', st.ignore);
+        const res = await request(`${API}/slots?${q}`);
+        st.range = res.range || st.range;
+        for (const d of res.days || []) st.days.set(d.date, d.slots || []);
+        // Days the answer left out (outside the range) have nothing.
+        for (const d of weekOf(from)) if (!st.days.has(d)) st.days.set(d, []);
+    }
+
+    /** The first week (from `from`) with a free time, looking up to ~2 months ahead. */
+    async function firstWeek(from) {
+        await loadWeek(from);
+        let first = st.range?.first && st.range.first > from ? st.range.first : from;
+        if (first !== from) await loadWeek(first);
+        for (let i = 0; i < 9; i++) {
+            if (weekOf(first).some(d => (st.days.get(d) || []).length)) return first;
+            const {next} = weekMoves(first, st.range);
+            if (!next) break;
+            first = next;
+            await loadWeek(first);
+        }
+        return st.range?.first && st.range.first > from ? st.range.first : from;
+    }
+
+    const firstFreeDay = () => weekOf(st.week).find(d => (st.days.get(d) || []).length) || '';
+
+    async function when({keepWeek = false, note = ''} = {}) {
+        st.slot = null;
+        say('Finding free times…');
+        try {
+            if (!keepWeek || !st.week) st.week = await firstWeek(st.info.today);
+            else await loadWeek(st.week);
+        } catch (err) {
+            say(err.message, 'error');
+            return;
+        }
+        say(note, note ? 'error' : '');
+        if (!st.date || !(st.days.get(st.date) || []).length || !weekOf(st.week).includes(st.date)) st.date = firstFreeDay();
+        paintWeek();
+        whenBack.value = st.mode === 'move' ? 'Your booking'
+            : (st.service.chooseBookable && !st.service.bookables.some(b => b.id === cfg.with)) ? 'Who'
+                : st.direct ? '' : 'Services';
+        show('when');
+    }
+
+    /** The week strip and the chosen day's times, from what is loaded. */
+    function paintWeek() {
+        const moves = weekMoves(st.week, st.range || {});
+        prevWeek.value = moves.prev;
+        nextWeek.value = moves.next;
+        days.value = weekOf(st.week).map(d => {
+            const n = (st.days.get(d) || []).length;
+            return {date: d, n, ...dayParts(d), label: `${dayLabel(d)}${n ? `, ${n} time${n === 1 ? '' : 's'} free` : ', nothing free'}`};
+        });
+        paintTimes();
+    }
+
+    /** A time: plain, with a class's places left, or full (to join its waiting list). */
+    function paintTimes() {
+        chosen.value = st.date;
+        dateLabel.value = dayLabel(st.date);
+        times.value = (st.days.get(st.date) || []).map(s => {
+            if (s.full) return {start: s.start, time: s.time, full: true, small: 'Full - join the waiting list', label: `${s.time}, full - join the waiting list`};
+            const classy = st.service?.capacity > 1 && Number.isFinite(Number(s.left));
+            return {start: s.start, time: s.time, full: false, small: classy ? placesText(s.left) : '', label: classy ? `${s.time}, ${placesText(s.left)}` : false};
+        });
+    }
+
+    async function moveWeek(to) {
+        if (!to) return;
+        const back = to === prevWeek.peek();
+        st.week = to;
+        st.date = '';
+        say('Finding free times…');
+        try { await loadWeek(to); } catch (err) { say(err.message, 'error'); return; }
+        say('');
+        st.date = firstFreeDay();
+        paintWeek();
+        M.flush?.();
+        root.querySelector(back ? '.bk-week-prev' : '.bk-week-next')?.focus();
+    }
+
+    function pickDay(row) {
+        if (!row.n) return;
+        st.date = row.date;
+        paintTimes();
+        M.flush?.();
+        root.querySelector('.bk-day.is-on')?.focus();
+    }
+
+    function pickTime(row) {
+        const slot = (st.days.get(st.date) || []).find(s => s.start === row.start);
+        if (!slot) return;
+        if (slot.full) return openForm('waitlist', slot);
+        st.slot = slot;
+        if (st.mode === 'move') return confirmMove();
+        openForm('details', slot);
+    }
+
+    // ---- Details (and the waiting list's form, which is the same one) ----
+
+    function setErrors(errs = {}) {
+        errors.value = {...errs};
+        for (const row of questions.peek()) row.error.value = errs[`answers.${row.id}`] || '';
+    }
+
+    /** Focus the first field with an error (server keys: name, email, answers.<id>). */
+    function focusError(errs) {
+        const first = Object.keys(errs)[0];
+        if (!first) return;
+        const name = first.startsWith('answers.') ? `q:${first.slice(8)}` : first;
+        M.flush?.();
+        root.querySelector(`.bk-form [name="${CSS.escape(name)}"]`)?.focus();
+    }
+
+    function openForm(kind, slot) {
+        st.slot = slot;
+        waiting.value = kind === 'waitlist';
+        askPhone.value = st.info.askPhone !== false;
+        phoneRequired.value = st.info.phoneRequired === true;
+        termsUrl.value = st.info.termsUrl || '';
+        hasQuestions.value = questions.peek().length > 0;
+        setErrors({});
+        show(kind);
+    }
+
+    /** What the page can check before sending: the customer's details and the questions. */
+    function checkForm() {
+        const v = (k) => String(f[k].peek() ?? '').trim();
+        const errs = {};
+        if (!v('name')) errs.name = 'Your name, please.';
+        if (!/^[^\s@<>"]+@[^\s@<>"]+\.[^\s@<>"]+$/.test(v('email'))) errs.email = 'An email address we can reach you on.';
+        if (st.info.askPhone !== false && st.info.phoneRequired && !v('phone')) errs.phone = 'A phone number, please.';
+        const values = Object.fromEntries(questions.peek().map(r => [r.id, r.value.peek()]));
+        const {answers, errors: qErrors} = answersFor(st.service?.fields, values);
+        return {errors: {...errs, ...qErrors}, answers, customer: {name: v('name'), email: v('email'), phone: v('phone'), notes: v('notes')}};
+    }
+
+    /** Checked here first; a problem stays on the form with the first bad field focused. */
+    function checked() {
+        const out = checkForm();
+        if (Object.keys(out.errors).length) {
+            say('Please check the highlighted fields.', 'error');
+            setErrors(out.errors);
+            focusError(out.errors);
+            return null;
+        }
+        setErrors({});
+        return out;
+    }
+
+    function formFailed(err) {
+        busy.value = false;
+        setErrors(err.errors);
+        focusError(err.errors);
+        say(err.message, 'error');
+    }
+
+    async function book() {
+        const ok = checked();
+        if (!ok) return;
+        const {answers, customer} = ok;
+        busy.value = true;
+        say('Booking…');
+        try {
+            const res = await request(`${API}/book`, {method: 'POST', body: {
+                serviceId: st.service.id,
+                bookableId: st.bookableId || undefined,
+                startAt: st.slot.start,
+                customer,
+                ...(Object.keys(answers).length ? {answers} : {}),
+                website: f.website.peek() || ''
+            }});
+            say('');
+            done(res);
+        } catch (err) {
+            busy.value = false;
+            // A rule said no (e.g. one booking every so many days): say why, here, not "taken".
+            if (err.code === 'refused') {
+                setErrors({});
+                say(err.message, 'error');
+                return;
+            }
+            if (err.code === 'slot-taken' || err.status === 409) {
+                st.days.clear();
+                return when({keepWeek: true, note: 'Sorry, that time has just been taken. Please choose another.'});
+            }
+            if (err.status === 400 && Object.keys(err.errors || {}).length) return formFailed(err);
+            say(err.message, 'error');
+        }
+    }
+
+    // ---- Waiting list (a full class, Booking Pro) ----
+
+    async function joinWaitlist() {
+        const ok = checked();
+        if (!ok) return;
+        const {answers, customer} = ok;
+        const url = st.info.waitlistUrl;
+        if (!url) { say('This class has no waiting list.', 'error'); return; }
+        busy.value = true;
+        say('Joining the waiting list…');
+        try {
+            const res = await request(url, {method: 'POST', body: {
+                serviceId: st.service.id, startAt: st.slot.start, bookableId: st.bookableId || undefined,
+                customer, ...(Object.keys(answers).length ? {answers} : {}),
+                website: f.website.peek() || ''
+            }});
+            say('');
+            const place = Number(res?.place) || 0;
+            waitLead.value = `Thank you, ${customer.name}. ${place ? `You are number ${place} on the waiting list. ` : ''}If a place comes free, it is booked for you and you get an email. There is nothing else to do.`;
+            show('waitlisted');
+        } catch (err) {
+            busy.value = false;
+            if (err.code === 'not-full') {
+                st.days.clear();
+                return when({keepWeek: true, note: 'Good news: a place has come free. You can book it now.'});
+            }
+            if (err.status === 400 && Object.keys(err.errors || {}).length) return formFailed(err);
+            say(err.message, 'error');
+        }
+    }
+
+    function done(res) {
+        const b = res.booking || {};
+        const t = tokenFrom(res.manage);
+        doneLead.value = `Thank you, ${b.name || ''}. We have sent a confirmation to ${b.email || 'your email'}.`;
+        detailRows.value = detailRowsOf(b);
+        callUrl.value = b.callUrl || '';
+        icsHref.value = t ? icsUrl(b.id, t) : '';
+        manageHref.value = res.manage || '';
+        show('done');
+    }
+
+    // ---- Manage ----
+
+    async function startManage() {
+        st.quiet = true;
+        say('Loading…');
+        try {
+            [st.info, st.booking] = await Promise.all([
+                request(`${API}/services`).catch(() => ({})),
+                request(`${API}/booking/${encodeURIComponent(cfg.id)}?t=${encodeURIComponent(cfg.t)}`)
+            ]);
+        } catch (err) {
+            say(err.status === 404 ? 'We cannot find that booking. Check the link in your email.' : err.message, 'error');
+            return;
+        }
+        say('');
+        zone.value = zoneNote(st.info?.timeZone, VIEWER_ZONE);
+        manage();
+    }
+
+    function manage(note = '') {
+        st.mode = '';
+        moving.value = false;
+        const b = st.booking;
+        const cancelled = b.status === 'cancelled';
+        const past = Date.parse(b.endAt) < Date.now();
+        const join = !cancelled && !past && b.callUrl ? b.callUrl : '';
+        mg.value = {
+            cancelled, join, ics: icsUrl(b.id, cfg.t), canMove: Boolean(b.canMove), canCancel: Boolean(b.canCancel),
+            hasActions: Boolean(join || !cancelled || b.canMove || b.canCancel),
+            why: cancelled ? (note ? '' : 'cancelled') : past ? 'past' : (!b.canMove && !b.canCancel) ? 'locked' : ''
+        };
+        manageNote.value = note;
+        detailRows.value = detailRowsOf(b);
+        show('manage');
+    }
+
+    async function startMove() {
+        const b = st.booking;
+        st.mode = 'move';
+        moving.value = true;
+        st.ignore = b.id;
+        st.service = (st.info.services || []).find(s => s.id === b.serviceId)
+            || {id: b.serviceId, name: b.serviceName, duration: Math.round((Date.parse(b.endAt) - Date.parse(b.startAt)) / 60000), bookables: [], chooseBookable: false};
+        st.bookableId = b.bookableId;
+        st.days.clear();
+        st.range = null;
+        st.date = '';
+        st.week = '';
+        await when();
+    }
+
+    function confirmMove() {
+        const b = st.booking;
+        moveFrom.value = `${dayLabel(b.date)}, ${b.time}`;
+        moveTo.value = `${dayLabel(st.date)}, ${st.slot.time}`;
+        show('confirm-move');
+    }
+
+    async function doMove() {
+        busy.value = true;
+        say('Moving your booking…');
+        try {
+            st.booking = await request(`${API}/booking/${encodeURIComponent(st.booking.id)}/move`, {method: 'POST', body: {t: cfg.t, startAt: st.slot.start}});
+            say('');
+            manage('Done: your booking has moved. We have emailed you the new time.');
+        } catch (err) {
+            if (err.status === 409) { st.days.clear(); return when({keepWeek: true, note: 'Sorry, that time has just been taken. Please choose another.'}); }
+            busy.value = false;
+            say(err.message, 'error');
+        }
+    }
+
+    function askCancel() {
+        reason.value = '';
+        detailRows.value = detailRowsOf(st.booking);
+        show('cancel');
+    }
+
+    async function doCancel() {
+        busy.value = true;
+        say('Cancelling…');
+        try {
+            st.booking = await request(`${API}/booking/${encodeURIComponent(st.booking.id)}/cancel`, {method: 'POST', body: {t: cfg.t, reason: String(reason.peek() || '').trim()}});
+            say('');
+            manage('Your booking is cancelled. We have emailed you to confirm.');
+        } catch (err) {
+            busy.value = false;
+            say(err.message, 'error');
+        }
+    }
+
+    // ---- Bind ----
+
+    const model = {
+        base: cfg.base, live, liveTone, step, summary, zone, direct, moving, busy, services, hasServices, whos, whoTitle, whenBack,
+        days, chosen, dateLabel, times, prevWeek, nextWeek, waiting, f, askPhone, phoneRequired, termsUrl, errors, questions,
+        hasQuestions, waitLead, doneLead, callUrl, icsHref, manageHref, detailRows, manageNote, mg, moveFrom, moveTo, reason,
+
+        toServices,
+        pickService(row) {
+            const svc = (st.info?.services || []).find(s => s.id === row.id);
+            if (svc) pickService(svc);
+        },
+        pickWho,
+        whenBackGo() {
+            if (st.mode === 'move') return manage();
+            if (whenBack.peek() === 'Who') return who();
+            toServices();
+        },
+        weekPrev() { moveWeek(prevWeek.peek()); },
+        weekNext() { moveWeek(nextWeek.peek()); },
+        pickDay,
+        pickTime,
+        toTimes() { when({keepWeek: true}); },
+        submitForm() {
+            if (!busy.peek()) (waiting.peek() ? joinWaitlist : book)();
+            return false;   // synchronously: the page never submits itself
+        },
+        another() {
+            f.notes.value = '';
+            if (cfg.service) start(); else toServices();
+        },
+        startMove() { startMove(); },
+        askCancel,
+        doMove() { doMove(); },
+        doCancel() { doCancel(); },
+        keepIt() { manage(); }
+    };
+
+    root.classList.add('is-live');
+    if (cfg.embedded) root.classList.add('is-embedded');
+    const tpl = document.createElement('template');
+    tpl.innerHTML = TEMPLATE.split('%U%').join(uid);   // our own markup; no server text in it
+    root.replaceChildren(tpl.content);
+    M.applyBindings(model, root);
+
+    if (cfg.mode === 'manage') startManage();
+    else start();
+}
+
+// ---- Mount ------------------------------------------------------------------------
+
+/**
+ * The stylesheet, added once and only where there is something to style.
+ * The booking page links it itself; on any other page this script arrives
+ * through the plugin's body inject (the page sanitiser strips a shortcode's
+ * own <link> and <script>), so it brings its CSS along.
+ */
+function ensureStyles() {
+    if (document.querySelector('link[href*="/plugins/booking/public/booking.css"]')) return;
+    const v = new URL(import.meta.url).searchParams.get('v') || '';
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = `/plugins/booking/public/booking.css${v ? `?v=${encodeURIComponent(v)}` : ''}`;
+    document.head.append(link);
+}
+
+function mountAll() {
+    const found = document.querySelectorAll('[data-booking]');
+    if (!found.length) return;
+    if (!M?.applyBindings) { console.warn('[booking] Domma is not on this page; the booking page stays as the server sent it.'); return; }
+    ensureStyles();
+    for (const el of found) {
+        if (el.dataset.bookingMounted) continue;
+        el.dataset.bookingMounted = '1';
+        let cfg = {};
+        try { cfg = JSON.parse(el.getAttribute('data-booking') || '{}'); } catch { /* defaults */ }
+        mount(el, {base: '/booking', ...cfg});
+    }
+}
+
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mountAll, {once: true});
+else mountAll();