@jtakeit/kit 0.0.0-stage → 0.2.0

package/elements/lead.js

@@ -0,0 +1,134 @@
+/**
+ * `<jtk-lead>` — the enquiry form, spared the navigation.
+ *
+ * Progressive enhancement only. Every branch here has a working no-JS
+ * equivalent: without this module the browser posts the form and the
+ * platform answers with a page. What this adds is the answer in place — the
+ * sentence the form carries in `data-success` or `data-error`, and the
+ * platform's two refusals by name put beside the field they are about.
+ *
+ * Import once on the page and every `<form data-lead-form>` is wired: the
+ * ones inside a `<jtk-lead>` by the element's lifecycle, which also covers
+ * markup the panel places later (`fl:placed`); the ones written bare by a
+ * walk of the document at load.
+ */
+
+/**
+ * Wires one form. Idempotent: a form already wired is left alone.
+ * @param {HTMLFormElement} form
+ */
+export function wireLead(form) {
+  if (form.dataset.jtkWired === '1') return;
+  form.dataset.jtkWired = '1';
+
+  /** @type {HTMLElement | null} */ const status = form.querySelector('[data-status]');
+  /** @type {HTMLButtonElement | null} */ const button = form.querySelector('[data-submit]');
+  /** @type {HTMLElement | null} */ const label = form.querySelector('[data-submit-label]');
+  if (!status || !button) return;
+  const original = label?.textContent ?? '';
+
+  /** @param {string} field @param {string} message */
+  const showError = (field, message) => {
+    /** @type {HTMLElement | null} */ const el = form.querySelector(`[data-error-for="${field}"]`);
+    if (!el) return;
+    el.textContent = message;
+    el.hidden = !message;
+  };
+
+  const clearErrors = () => {
+    for (const el of /** @type {NodeListOf<HTMLElement>} */ (form.querySelectorAll('[data-error-for]'))) {
+      el.textContent = '';
+      el.hidden = true;
+    }
+  };
+
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    clearErrors();
+    status.textContent = '';
+    form.removeAttribute('data-state');
+
+    const data = new FormData(form);
+    let ok = true;
+    for (const field of ['name', 'contact']) {
+      const input = /** @type {HTMLInputElement | null} */ (form.elements.namedItem(field));
+      if (!input?.value.trim()) {
+        showError(field, input?.dataset.message ?? '');
+        ok = false;
+      }
+    }
+    if (!ok) return;
+
+    button.disabled = true;
+    if (label) label.textContent = form.dataset.sending ?? original;
+
+    try {
+      const response = await fetch(form.action, {
+        method: 'POST',
+        headers: { accept: 'application/json' },
+        body: data,
+      });
+      const body = await response.json();
+
+      if (response.ok && body.ok) {
+        form.reset();
+        status.textContent = form.dataset.success ?? '';
+        // Preview only: the destination is not connected, so nothing was
+        // delivered. Visible to the studio, meaningless to a visitor. It
+        // disappears in production.
+        if (body.demo) status.textContent += ' ⚠︎';
+      } else if (body.error === 'anonymous' || body.error === 'unreachable') {
+        // The platform refuses by name — no name, no way back to the sender —
+        // and the sentence for each is the one the field already carries.
+        const field = body.error === 'anonymous' ? 'name' : 'contact';
+        const input = /** @type {HTMLInputElement | null} */ (form.elements.namedItem(field));
+        showError(field, input?.dataset.message ?? '');
+        input?.focus();
+      } else {
+        form.setAttribute('data-state', 'error');
+        status.textContent = body.message ?? form.dataset.error ?? '';
+      }
+    } catch {
+      form.setAttribute('data-state', 'error');
+      status.textContent = form.dataset.error ?? '';
+    } finally {
+      button.disabled = false;
+      if (label) label.textContent = original;
+    }
+  });
+}
+
+/**
+ * Wires every enquiry form under a root that is not wired yet.
+ * @param {ParentNode} [root]
+ */
+export function wireAll(root = document) {
+  for (const form of /** @type {NodeListOf<HTMLFormElement>} */ (root.querySelectorAll('form[data-lead-form]'))) wireLead(form);
+  if (root instanceof HTMLFormElement && root.matches('[data-lead-form]')) wireLead(root);
+}
+
+const BaseElement = typeof HTMLElement === 'undefined' ? class {} : HTMLElement;
+
+/** `<jtk-lead>` wraps the form `renderLeadForm` wrote and wires it when it reaches the document. */
+export class JtkLead extends BaseElement {
+  connectedCallback() {
+    wireAll(/** @type {any} */ (this));
+  }
+}
+
+/** @param {string} [name] */
+export function defineLead(name = 'jtk-lead') {
+  if (typeof customElements === 'undefined' || customElements.get(name)) return;
+  customElements.define(name, JtkLead);
+}
+
+if (typeof document !== 'undefined') {
+  defineLead();
+  const start = () => wireAll(document);
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });
+  else start();
+  document.addEventListener('fl:placed', (event) => {
+    const at = event.target;
+    if (at instanceof Element) wireAll(at);
+  });
+}

package/index.mjs

@@ -0,0 +1,21 @@
+/**
+ * @jtakeit/kit — the half of a site on jtakeit that does not depend on how
+ * the site is built.
+ *
+ * `@jtakeit/astro` is the scaffold: an Astro project with the platform's
+ * contract already on it. Everything in it that is not Astro's lives here,
+ * so a site on any other generator can take the same pieces (wiki/66,
+ * layer B): the booking form, as markup to put on a page at build time and
+ * as an element that makes it work in the browser.
+ *
+ *   import { renderBookingForm } from '@jtakeit/kit/booking';   // build time
+ *   import '@jtakeit/kit/elements/booking';                      // the page
+ *   @import '@jtakeit/kit/booking.css';                          // optional
+ *
+ * and the enquiry form the same way: `@jtakeit/kit/lead`,
+ * `@jtakeit/kit/elements/lead`, `@jtakeit/kit/lead.css`.
+ */
+export { renderBookingForm, SENDS } from './lib/booking/render.mjs';
+export { renderLeadForm, inputType } from './lib/lead/render.mjs';
+export { wordsFor, LOCALES } from './lib/booking/words.mjs';
+export { money } from './lib/money.mjs';

package/lead.css

@@ -0,0 +1,23 @@
+/*
+ * The enquiry form, legible and nothing more — a reference, not a design.
+ * `field`, `field__input`, `btn` are names for the site to restyle with its
+ * own. Keep `.trap` and the `[hidden]` rule whatever you do to the rest.
+ */
+.lead { display: grid; gap: 1.25rem; max-inline-size: 34rem; }
+.lead .field { display: grid; gap: 0.375rem; }
+.lead .field__label { font-size: 0.875rem; }
+.lead .field__input {
+  inline-size: 100%; padding: 0.75rem 0.875rem; font: inherit; color: inherit;
+  background: var(--paper-deep, #f2efea); border: 1px solid var(--line, #d9d4cc); border-radius: var(--r-2, 8px);
+}
+.lead .field__input--area { resize: vertical; }
+.lead .field__error { margin: 0; font-size: 0.8125rem; color: var(--danger, #b3261e); }
+
+/* Bots fill everything; people never see this. Off-screen rather than
+   display:none, which some bots detect. */
+.lead .trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+.lead__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
+.lead__status { margin: 0; font-size: 0.875rem; }
+.lead[data-state='error'] .lead__status { color: var(--danger, #b3261e); }
+.lead [hidden] { display: none !important; }

package/lib/booking/render.mjs

@@ -0,0 +1,244 @@
+/**
+ * The booking form, as markup — made at build time by whatever builds the
+ * site, and made to work in the browser by `@jtakeit/kit/elements/booking`.
+ *
+ * The rules — when the business is open, how long a slot is, whether a time
+ * is still free, what it costs — live in one place, and it is not here: the
+ * platform serves six addresses on the site's own host and the element draws
+ * what they answer. Nothing about availability is computed on the page, and
+ * nothing about the visitor's choice is trusted by the server.
+ *
+ * This is the markup `@jtakeit/astro`'s `BookingForm.astro` used to carry
+ * itself; it is a string now so a site on any generator can put the same form
+ * on a page: Eleventy in a shortcode, Next in `dangerouslySetInnerHTML`, a
+ * Node script in a template literal. Keep the `data-*` hooks and the input
+ * `name`s whatever you do to its classes: the element reads those, and the
+ * platform reads what the element sends.
+ *
+ * ── what the page passes in ─────────────────────────────────────────────────
+ *
+ * The services and the resources are collection entries the owner edits, so
+ * they arrive from the page that reads the collections. Slugs are what the
+ * platform books against; titles are what the visitor reads.
+ *
+ * ── with JavaScript off ─────────────────────────────────────────────────────
+ *
+ * A booking cannot be made without a script — the free times are fetched — so
+ * with scripts off this shows the sentence in `noScript`, and nothing
+ * pretends otherwise.
+ */
+import { money } from '../money.mjs';
+import { wordsFor } from './words.mjs';
+
+/**
+ * What this form sends to /api/book, said on the page. Preflight reads it off
+ * the built page and books in exactly this shape, so a form that sends
+ * `units` for nights, or never sends `count`, fails the check rather than
+ * passing on a request the platform made up (2 October 2026). The element
+ * sends no key that is not here — the list cannot drift from the request,
+ * because the element imports this one.
+ */
+export const SENDS = Object.freeze(['service', 'services', 'resource', 'class', 'party', 'count', 'quantity', 'start', 'name', 'phone', 'email', 'note', 'turnstile']);
+
+/**
+ * @typedef {object} Named
+ * @property {string} slug    what the platform books against
+ * @property {string} title   what the visitor reads
+ * @property {number} [takes] minutes, for the running total when several are picked
+ * @property {number} [costs] minor units, for the same
+ * @property {{ day: string, from: number, until: number, costs: number }[]} [rates] a price by the hour of the week instead of `costs`: the list says «from …», and the price is the slot's, printed beside the time
+ * @property {string} [per]   `'person'` for a price times the party — a class per place, shoes; the list says so and the running total multiplies
+ * @property {string} [group] a heading the services are listed under
+ */
+
+/**
+ * The least a service priced by the hour of the week may cost, or nothing.
+ * @param {Named} one
+ */
+export function priceFrom(one) {
+  const rows = Array.isArray(one.rates) ? one.rates : [];
+  return rows.reduce((least, row) => (row.costs > 0 && (least === 0 || row.costs < least) ? row.costs : least), 0);
+}
+
+/**
+ * @typedef {object} BookingFormProps
+ * @property {Named[]} services
+ * @property {Named[]} [resources]  empty for a solo business: the platform assigns
+ * @property {string} locale        `uk`, `de` or `en` — decides the words drawn before the platform has spoken
+ * @property {number} [daysAhead]   how many days ahead the picker offers; the platform clamps to its own horizon
+ * @property {boolean} [combine]    the module's `combine` setting: several services for one visit, as a checklist
+ * @property {string} [currency]    the site's currency, for the running total
+ * @property {string} [scale]       the module's `scale`: `'daily'` for a business that lets things by the day
+ * @property {string} [kind]        the module's `kind`: for any kind but a salon's the kind's words are held back until the platform has said them
+ * @property {string} [api]         where `/api/` is from this page — under the preview it carries a path, so pass the address as your generator writes a root-relative one (Astro's `under('/api/')`)
+ * @property {string} [tag]         the element's name around the form, `jtk-booking`; `''` for none
+ * @property {Date} [now]           the day the picker starts from; the build's, by default
+ */
+
+const ESCAPE = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+/** @param {unknown} value */
+function esc(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (c) => ESCAPE[c]);
+}
+
+/**
+ * A service's price as the list says it: the price, or «from …» for one
+ * priced by the hour of the week — whose price is the slot's and is printed
+ * beside the time once one is chosen (wiki/68).
+ * @param {Named} one
+ * @param {string} currency
+ * @param {string} lang
+ */
+function priceSaid(one, currency, lang) {
+  if (one.costs) return ` · ${esc(money(one.costs, currency, lang))}`;
+  const least = priceFrom(one);
+  return least > 0 ? ` · ${esc(wordsFor(lang).from)} ${esc(money(least, currency, lang))}` : '';
+}
+
+/**
+ * The booking form as HTML.
+ *
+ * @param {BookingFormProps} props
+ * @returns {string}
+ */
+export function renderBookingForm(props) {
+  const {
+    services, resources = [], locale, daysAhead = 30, combine = false, currency = 'CHF', scale = '', kind = '',
+    api = '/api/', tag = 'jtk-booking', now = new Date(),
+  } = props;
+  if (!Array.isArray(services)) throw new TypeError('renderBookingForm: services is a list of { slug, title }');
+  const unsaid = kind !== '' && kind !== 'salon';
+  const WORDS = wordsFor(locale, scale);
+  const lang = { de: 'de-CH', uk: 'uk-UA', ru: 'ru-RU', es: 'es-ES', it: 'it-IT', pt: 'pt-PT', fr: 'fr-FR' }[locale] ?? 'en';
+
+  // The checklist's runs, in the order the services came, each heading once.
+  /** @type {{ group: string; items: Named[] }[]} */
+  const runs = [];
+  for (const one of services) {
+    const group = one.group ?? '';
+    const run = runs.find((r) => r.group === group);
+    if (run) run.items.push(one);
+    else runs.push({ group, items: [one] });
+  }
+
+  const today = now.toISOString().slice(0, 10);
+  const last = new Date(now.getTime() + daysAhead * 86_400_000).toISOString().slice(0, 10);
+
+  // An add-on — a price and no length: shoes, a racket — is listed under
+  // its own heading, after the services, and rides on the visit (wiki/70).
+  const addOns = runs.flatMap((run) => run.items.filter((one) => !one.takes && (one.costs || priceFrom(one))));
+  const timedRuns = runs.map((run) => ({ ...run, items: run.items.filter((one) => !addOns.includes(one)) })).filter((run) => run.items.length > 0);
+  const servicesField = combine
+    ? `<fieldset class="booking__services" data-services>
+        <legend class="field__label" data-say="services">${esc(WORDS.services)}</legend>
+        ${[...timedRuns, ...(addOns.length ? [{ group: WORDS.addOns, items: addOns }] : [])].map((run) => `<div class="booking__run">
+            ${run.group !== '' ? `<p class="booking__run-title">${esc(run.group)}</p>` : ''}
+            ${run.items.map((one) => `<label class="booking__service">
+                <input type="checkbox" name="service" value="${esc(one.slug)}" data-takes="${esc(one.takes ?? 0)}" data-costs="${esc(one.costs ?? 0)}"${one.per === 'person' ? ' data-per="person"' : ''}>
+                <span class="booking__service-name">${esc(one.title)}</span>
+                <span class="booking__service-meta">${one.takes ? `${esc(one.takes)} min` : ''}${priceSaid(one, currency, lang)}${one.per === 'person' ? ` · ${esc(WORDS.perPerson)}` : ''}</span>
+              </label>`).join('\n')}
+          </div>`).join('\n')}
+        <p class="booking__total" data-total hidden></p>
+      </fieldset>`
+    : `<label class="field__label" for="booking-service" data-say="service">${esc(WORDS.service)}</label>
+        <select class="field__input" id="booking-service" name="service" required>
+          ${services.map((one) => `<option value="${esc(one.slug)}">${esc(one.title)}</option>`).join('\n')}
+        </select>`;
+
+  const resourcesField = resources.length > 1
+    ? `<div class="field">
+      <label class="field__label" for="booking-resource" data-say="resource">${esc(WORDS.resource)}</label>
+      <select class="field__input" id="booking-resource" name="resource" data-say-wait>
+        <option value="" data-say="any">${esc(WORDS.any)}</option>
+        ${resources.map((one) => `<option value="${esc(one.slug)}">${esc(one.title)}</option>`).join('\n')}
+      </select>
+    </div>`
+    : '';
+
+  // Fixed, the whole form, as the lead form's labels are: every word in it is
+  // the platform's — spoken in the business's kind from the availability
+  // answer, «Забронювати» over the build's «Записатися» — or an entry's own
+  // title, which the owner edits on the entry. None is the owner's to edit
+  // here, and `jtk catalogue` asked whose all seventeen were on a fresh
+  // restaurant (30 September 2026).
+  const form = `<form class="booking${unsaid ? ' booking--unsaid' : ''}" data-booking data-locale="${esc(locale)}" data-currency="${esc(currency)}" data-words="${esc(JSON.stringify(WORDS))}" data-scale="${esc(scale)}" data-api="${esc(api)}" data-sends="${SENDS.join(',')}" novalidate data-jtk-fixed>
+  <noscript><p class="booking__note">${esc(WORDS.noScript)}</p></noscript>
+
+  <div class="field">
+    ${servicesField}
+  </div>
+
+  ${resourcesField}
+
+  <div class="field">
+    <label class="field__label" for="booking-day">${esc(WORDS.day)}</label>
+    <input class="field__input" id="booking-day" name="day" type="date" min="${today}" max="${last}" required>
+  </div>
+
+  <div class="field" data-back-field hidden>
+    <label class="field__label" for="booking-back">${esc(WORDS.back)}</label>
+    <input class="field__input" id="booking-back" name="back" type="date" min="${today}">
+    <p class="booking__hint" data-length hidden></p>
+  </div>
+
+  <div class="field" data-hours-field hidden>
+    <label class="field__label" for="booking-hours">${esc(WORDS.hours)}</label>
+    <select class="field__input" id="booking-hours" name="hours"></select>
+  </div>
+
+  <div class="field" data-party-field hidden>
+    <label class="field__label" for="booking-party">${esc(WORDS.party)}</label>
+    <select class="field__input" id="booking-party" name="party"></select>
+  </div>
+
+  <div class="field" data-quantity-field hidden>
+    <label class="field__label" for="booking-quantity">${esc(WORDS.quantity)}</label>
+    <select class="field__input" id="booking-quantity" name="quantity"></select>
+  </div>
+
+  <fieldset class="field booking__times" data-times>
+    <legend class="field__label">${esc(WORDS.time)}</legend>
+    <p class="booking__hint" data-times-hint aria-live="polite">${esc(WORDS.pick)}</p>
+    <div class="booking__slots" data-slots></div>
+    <p class="booking__total" data-stay-total hidden></p>
+  </fieldset>
+
+  <div class="field">
+    <label class="field__label" for="booking-name">${esc(WORDS.name)} <span aria-hidden="true">*</span></label>
+    <input class="field__input" id="booking-name" name="name" type="text" autocomplete="name" required maxlength="120">
+  </div>
+  <div class="field">
+    <label class="field__label" for="booking-phone">${esc(WORDS.phone)}</label>
+    <input class="field__input" id="booking-phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" maxlength="40">
+  </div>
+  <div class="field">
+    <label class="field__label" for="booking-email">${esc(WORDS.email)}</label>
+    <input class="field__input" id="booking-email" name="email" type="email" inputmode="email" autocomplete="email" maxlength="120">
+  </div>
+  <div class="field">
+    <label class="field__label" for="booking-note">${esc(WORDS.note)}</label>
+    <textarea class="field__input field__input--area" id="booking-note" name="note" rows="3" maxlength="2000"></textarea>
+  </div>
+
+  <div class="booking__challenge" data-challenge hidden></div>
+
+  <p class="field__error" data-booking-error role="alert" hidden></p>
+
+  <button class="booking__submit" type="submit" data-submit data-say="book">${esc(WORDS.book)}</button>
+
+  <div class="booking__done" data-done role="status" tabindex="-1" hidden>
+    <p class="booking__done-line" data-done-line></p>
+    <p class="booking__done-when" data-done-when></p>
+    <p class="booking__done-when" data-done-what hidden></p>
+    <p class="booking__note" data-pay-note hidden></p>
+    <p class="booking__links">
+      <a data-pay hidden></a>
+      <a data-manage hidden></a>
+      <a data-telegram hidden target="_blank" rel="noreferrer noopener"></a>
+    </p>
+  </div>
+</form>`;
+
+  return tag ? `<${tag}>${form}</${tag}>` : form;
+}