@mylikita/booking-widget 0.1.0

package/README.md

@@ -0,0 +1,169 @@
+# @mylikita/booking-widget
+
+Drop-in appointment booking for hospital websites built on MyLikita. A
+zero-dependency vanilla-JS widget (no framework required) that:
+
+1. renders a booking form into any element on your page,
+2. submits through the **MyLikita relay** (`POST /v1/bookings`),
+3. polls the booking (`GET /v1/bookings/:ref`) until the hospital confirms,
+   cancels, reschedules, marks no-show, or the request expires.
+
+It implements the [MyLikita Website Booking API (v1)](/backend/WEBSITE_BOOKING_API.md)
+exactly — same auth, same fields, same idempotency rules, same statuses.
+
+---
+
+## Install
+
+**Script tag (simplest for agency sites):**
+
+```html
+<script src="https://unpkg.com/@mylikita/booking-widget"></script>
+<div id="booking"></div>
+<script>
+  MyLikitaBookingWidget.createBookingWidget(document.getElementById('booking'), {
+    relayUrl: 'https://api.mylikita.clinic',
+    websiteKey: 'wk_9f2k…',        // public client id — not a secret
+    facilityId: 'F1',
+  });
+</script>
+```
+
+**npm (for bundlers):**
+
+```bash
+npm install @mylikita/booking-widget
+```
+
+```js
+import { createBookingWidget } from '@mylikita/booking-widget';
+createBookingWidget(document.getElementById('booking'), { relayUrl, websiteKey, facilityId });
+```
+
+**React sites:** use [`@mylikita/booking-widget-react`](/packages/booking-widget-react) — the
+same widget as a `<BookingWidget relayUrl=… websiteKey=… facilityId=… />`
+component (all options are props, SSR-safe, imperative ref).
+
+## Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `relayUrl` | string | — | **required** — relay base URL, e.g. `https://api.mylikita.clinic` |
+| `websiteKey` | string | — | **required** — your public client id (Bearer on every request) |
+| `facilityId` | string | — | **required** — the hospital's public facility id |
+| `providers` | array | `[]` | `[{ external_id, label }]` — shown as a "Preferred doctor" select; unmapped slugs simply arrive unassigned (never block on them). When provided, it wins and no fetch happens |
+| `loadProviders` | bool | `false` | **Phase C2/C3** — fetch the facility's mapped providers from the relay (`GET /v1/providers`) on mount and populate the doctor dropdown automatically. Ignored when `providers` is non-empty. A fetch failure is non-fatal: the widget keeps "No preference" and still works |
+| `services` | array | `[]` | `['General consultation', …]` — shown as a service select (free-text input otherwise) |
+| `durationMins` | number | `30` | sent with the booking |
+| `pollIntervalMs` | number | `5000` | how often to poll the booking status |
+| `maxTries` | number | `12` | poll budget (~1 min at the default); the widget then shows "request received" |
+| `theme` | object | defaults | see [Theming](#theming) |
+| `text` | object | defaults | i18n overrides for every label/message (see `src/widget.js` `DEFAULT_TEXT`) |
+| `externalRef` | fn | auto | override the idempotency-key generator |
+| `onBooking` | fn | — | `(booking, payload) => …` called once the relay accepted it |
+| `onStatus` | fn | — | `(statusObj) => …` called on each poll result |
+| `onError` | fn | — | `(err) => …` on create failure |
+
+Returns `{ destroy(), reset(), getForm() }`.
+
+## Provider list (doctor dropdown) — `loadProviders`
+
+The hospital controls which doctors appear on your website. Staff map a
+website slug (`external_id`) to each doctor in the hub **Providers** tab; the
+hospital server pushes those mapped providers to the relay on every sync cycle
+(`POST /v1/out/providers`), and the widget fetches them on mount
+(`GET /v1/providers`):
+
+```js
+createBookingWidget(el, {
+  relayUrl, websiteKey, facilityId,
+  loadProviders: true,   // fetch the mapped doctor list instead of hardcoding
+});
+```
+
+- Only **mapped, active** providers are served — the hospital decides what the
+  website sees (names + slugs only; no phones, no emails, no PHI).
+- The dropdown appears the moment the fetch resolves; a slow/offline relay
+  degrades gracefully to "No preference" (a submitted booking with no doctor
+  simply arrives unassigned — the hospital assigns one).
+- Unmapping a doctor on the hospital side removes them from the dropdown on
+  the next sync cycle (~2 min).
+
+## Idempotency & double-submit (built in)
+
+- An `external_ref` is minted (`BK-<ts>-<rand>`) and stored in `sessionStorage`
+  **before** submitting, so a page refresh resubmits the *same* booking instead
+  of creating a duplicate — the relay returns the original `booking_ref`.
+- A genuine double-click on a fresh page hits the relay's
+  `409 duplicate_booking`; the widget treats that as success and polls the
+  existing booking, showing "We found an existing booking request for this slot".
+- The stored ref is cleared once the booking reaches a terminal state, so the
+  next booking mints a fresh one.
+
+## Statuses
+
+| Widget shows | When |
+|---|---|
+| Request received (spinner) | hospital hasn't collected it, or still pending after the poll budget |
+| Confirmed ✓ | `confirmed` |
+| Cancelled / Rescheduled / Missed | corresponding terminal status |
+| Request expired | hospital never collected within 72 h (offline server) — "please call the clinic" |
+
+## Theming
+
+Every colour, radius and font is a CSS custom property scoped to
+`.mylikita-widget`, so you can restyle it from your own stylesheet without
+specificity fights:
+
+```css
+.mylikita-widget {
+  --mlw-primary: #0d9488;      /* buttons, focus rings, accents */
+  --mlw-primary-dark: #0f766e; /* hover state */
+  --mlw-primary-text: #ffffff; /* button label */
+  --mlw-bg: #ffffff;           /* widget background */
+  --mlw-text: #1e293b;         /* labels + values */
+  --mlw-muted: #64748b;        /* secondary text */
+  --mlw-border: #e2e8f0;       /* inputs + widget border */
+  --mlw-danger: #dc3545;
+  --mlw-success: #15803d;
+  --mlw-radius: 10px;          /* input + button radius */
+  --mlw-font: system-ui, …;
+}
+```
+
+Or programmatically:
+
+```js
+createBookingWidget(el, {
+  relayUrl, websiteKey, facilityId,
+  theme: { primary: '#e91e63', radius: 6, bg: '#fffaf5' },
+});
+```
+
+## Demo
+
+`demo/demo.html` runs the widget **fully offline** against an in-page mock of
+the relay — submit a booking and watch it flip to *confirmed* after two polls.
+Open it in a browser directly:
+
+```bash
+open packages/booking-widget/demo/demo.html
+```
+
+## Development
+
+```bash
+npm run build   # esbuild → dist/ (iife, iife.min, esm, cjs)
+npm test        # mocked-fetch suite for the core logic
+```
+
+`dist/` is committed so the package works before any install; rebuild after
+touching `src/`.
+
+## Security notes
+
+- `websiteKey` is a **public client id by design** (it ships in browser JS).
+  It is rate-limited per key on the relay and scoped to the facility. Real
+  protection against abuse is the relay's per-key rate limits, not secrecy.
+- The widget never receives or stores hospital patient data — only what the
+  patient typed into your form.

package/dist/demo.html

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>@mylikita/booking-widget — demo</title>
+<style>
+  :root { color-scheme: light; }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 40px 16px;
+  }
+  .demo { width: 100%; max-width: 860px; }
+  h1 { font-size: 20px; margin: 0 0 4px; color: #0f172a; }
+  .tagline { font-size: 13px; color: #64748b; margin: 0 0 20px; }
+  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
+  @media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }
+  .panel {
+    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px;
+    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
+  }
+  .panel h2 { font-size: 14px; margin: 0 0 10px; color: #334155; }
+  .theme-row { display: flex; gap: 8px; margin-top: 8px; }
+  .theme-row button {
+    font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
+    border: 1px solid #cbd5e1; background: #f8fafc; color: #334155;
+  }
+  .theme-row button:hover { border-color: #0d6efd; color: #0d6efd; }
+  .log {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 12px; color: #475569; background: #f8fafc;
+    border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; height: 130px;
+    overflow: auto; margin: 12px 0 0; white-space: pre-wrap;
+  }
+  .log b { color: #0d6efd; font-weight: 600; }
+</style>
+</head>
+<body>
+  <div class="demo">
+    <h1>@mylikita/booking-widget — offline demo</h1>
+    <p class="tagline">
+      Runs entirely in the page against an in-page mock of the MyLikita relay: submit a booking,
+      watch the widget poll, and see it flip to <b>confirmed</b> after two polls. No backend needed.
+    </p>
+
+    <div class="cards">
+      <div class="panel">
+        <h2>Widget (default theme)</h2>
+        <div id="booking"></div>
+      </div>
+
+      <div class="panel">
+        <h2>Second widget (custom theme) + live log</h2>
+        <div id="booking2"></div>
+        <div class="theme-row">
+          <button data-theme="default">Reset theme</button>
+          <button data-theme="teal">Teal</button>
+          <button data-theme="sunset">Sunset</button>
+        </div>
+        <pre class="log" id="log"></pre>
+      </div>
+    </div>
+  </div>
+
+  <script>
+/*! @mylikita/booking-widget v0.1.0 | MIT */
+var MyLikitaBookingWidget=(()=>{var Y=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ge=Object.prototype.hasOwnProperty;var we=(i,e)=>{for(var t in e)Y(i,t,{get:e[t],enumerable:!0})},ye=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of fe(e))!ge.call(i,a)&&a!==t&&Y(i,a,{get:()=>e[a],enumerable:!(r=pe(e,a))||r.enumerable});return i};var _e=i=>ye(Y({},"__esModule",{value:!0}),i);var Ee={};we(Ee,{DEFAULT_THEME:()=>W,STATUS_COPY:()=>C,TERMINAL_STATUSES:()=>ie,createBooking:()=>S,createBookingWidget:()=>oe,fetchProviders:()=>E,fetchStatus:()=>T,newExternalRef:()=>P,pollStatus:()=>N,resolveTheme:()=>$,statusCopy:()=>A});async function S({relayUrl:i,websiteKey:e,payload:t,signal:r}){let a=await fetch(`${H(i)}/v1/bookings`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify(t),signal:r}),o=await F(a);if(a.status===409)return{ok:!0,duplicate:!0,booking_ref:o?.booking_ref,error:o?.message};if(!a.ok)throw O(a.status,o,"create");return{ok:!0,duplicate:!1,booking_ref:o?.booking_ref,status:o?.status||"pending_confirmation"}}async function E({relayUrl:i,websiteKey:e,signal:t}){let r=await fetch(`${H(i)}/v1/providers`,{headers:{Authorization:`Bearer ${e}`},signal:t}),a=await F(r);if(!r.ok)throw O(r.status,a,"providers");return(Array.isArray(a?.providers)?a.providers:[]).map(d=>({external_id:d.external_id,name:d.name||d.external_id,specialty:d.specialty||null,module:d.module||"general"}))}async function T({relayUrl:i,websiteKey:e,bookingRef:t,signal:r}){let a=await fetch(`${H(i)}/v1/bookings/${encodeURIComponent(t)}`,{headers:{Authorization:`Bearer ${e}`},signal:r}),o=await F(a);if(!a.ok)throw O(a.status,o,"status");return{booking_ref:o?.booking_ref,status:o?.status||"pending_confirmation",appt_ref:o?.appt_ref||null}}async function N(i,{intervalMs:e=5e3,maxTries:t=12,signal:r}={}){for(let a=0;a<t;a++){if(r?.aborted)return{status:"aborted",resolved:!1,data:null};let o=await i();if(o.status!=="pending_confirmation")return{status:o.status,resolved:!0,data:o};a<t-1&&await be(e,r)}return{status:"pending_confirmation",resolved:!1,data:null}}function P(){return`BK-${Date.now()}-${Math.random().toString(36).slice(2,6)}`}function H(i){return String(i||"").replace(/\/+$/,"")}function O(i,e,t){let r=new Error(e?.message||e?.error||`Relay ${t} failed (HTTP ${i})`);return r.code=e?.error||"http_error",r.status=i,r}async function F(i){try{return await i.json()}catch{return null}}function be(i,e){return new Promise(t=>{if(e?.aborted)return t();let r=()=>{clearTimeout(a),t()},a=setTimeout(()=>{e?.removeEventListener("abort",r),t()},i);e?.addEventListener("abort",r,{once:!0})})}var C={pending_confirmation:{title:"Request received",message:"We've received your booking request \u2014 we'll confirm shortly.",kind:"info"},confirmed:{title:"Appointment confirmed",message:"Your appointment is confirmed. See you at the clinic!",kind:"success"},cancelled:{title:"Appointment cancelled",message:"This appointment was cancelled. Please contact the clinic if this was unexpected.",kind:"danger"},rescheduled:{title:"Appointment rescheduled",message:"This appointment was moved \u2014 the new time was sent to you.",kind:"info"},no_show:{title:"Missed appointment",message:"This appointment was marked as missed.",kind:"danger"},expired:{title:"Request expired",message:"This booking request expired \u2014 please call the clinic to book.",kind:"danger"},poll_error:{title:"Something went wrong",message:"We could not check your booking right now. Please try again shortly.",kind:"danger"}};function A(i){return C[i]||C.pending_confirmation}var ie=["confirmed","cancelled","rescheduled","no_show","expired"];var W={primary:"#0d6efd",primaryDark:"#0b5ed7",primaryText:"#ffffff",bg:"#ffffff",text:"#1e293b",muted:"#64748b",border:"#e2e8f0",danger:"#dc3545",success:"#15803d",radius:10,font:"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"};function $(i={}){let e={...W,...i||{}};return{"--mlw-primary":e.primary,"--mlw-primary-dark":e.primaryDark,"--mlw-primary-text":e.primaryText,"--mlw-bg":e.bg,"--mlw-text":e.text,"--mlw-muted":e.muted,"--mlw-border":e.border,"--mlw-danger":e.danger,"--mlw-success":e.success,"--mlw-radius":`${e.radius}px`,"--mlw-font":e.font}}var re=`
+.mylikita-widget {
+  --mlw-primary: #0d6efd;
+  --mlw-primary-dark: #0b5ed7;
+  --mlw-primary-text: #ffffff;
+  --mlw-bg: #ffffff;
+  --mlw-text: #1e293b;
+  --mlw-muted: #64748b;
+  --mlw-border: #e2e8f0;
+  --mlw-danger: #dc3545;
+  --mlw-success: #15803d;
+  --mlw-radius: 10px;
+  --mlw-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  font-family: var(--mlw-font);
+  color: var(--mlw-text);
+  background: var(--mlw-bg);
+  border: 1px solid var(--mlw-border);
+  border-radius: calc(var(--mlw-radius) + 2px);
+  padding: 22px;
+  max-width: 480px;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+.mylikita-widget *,
+.mylikita-widget *::before,
+.mylikita-widget *::after { box-sizing: border-box; }
+
+.mylikita-widget__title {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 4px;
+  color: var(--mlw-text);
+}
+.mylikita-widget__subtitle {
+  font-size: 13px;
+  color: var(--mlw-muted);
+  margin: 0 0 16px;
+}
+
+.mylikita-widget__field { margin-bottom: 12px; }
+.mylikita-widget__label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--mlw-text);
+  margin-bottom: 5px;
+}
+.mylikita-widget__label .req { color: var(--mlw-danger); }
+.mylikita-widget__input,
+.mylikita-widget__select,
+.mylikita-widget__textarea {
+  width: 100%;
+  font: inherit;
+  font-size: 14px;
+  color: var(--mlw-text);
+  background: var(--mlw-bg);
+  border: 1px solid var(--mlw-border);
+  border-radius: var(--mlw-radius);
+  padding: 9px 11px;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.mylikita-widget__input:focus,
+.mylikita-widget__select:focus,
+.mylikita-widget__textarea:focus {
+  border-color: var(--mlw-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mlw-primary) 22%, transparent);
+}
+.mylikita-widget__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+@media (max-width: 420px) { .mylikita-widget__row { grid-template-columns: 1fr; } }
+
+.mylikita-widget__error {
+  display: none;
+  font-size: 13px;
+  color: var(--mlw-danger);
+  background: color-mix(in srgb, var(--mlw-danger) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--mlw-danger) 35%, transparent);
+  border-radius: var(--mlw-radius);
+  padding: 9px 12px;
+  margin-bottom: 12px;
+}
+.mylikita-widget__error.visible { display: block; }
+
+.mylikita-widget__submit {
+  width: 100%;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mlw-primary-text);
+  background: var(--mlw-primary);
+  border: none;
+  border-radius: var(--mlw-radius);
+  padding: 11px 16px;
+  cursor: pointer;
+  transition: background .15s ease, transform .05s ease;
+}
+.mylikita-widget__submit:hover { background: var(--mlw-primary-dark); }
+.mylikita-widget__submit:active { transform: translateY(1px); }
+.mylikita-widget__submit:disabled { opacity: .6; cursor: wait; }
+
+.mylikita-widget__hint { font-size: 12px; color: var(--mlw-muted); margin: 8px 0 0; }
+
+/* status view */
+.mylikita-widget__status { text-align: center; padding: 8px 4px; }
+.mylikita-widget__status-icon {
+  width: 46px; height: 46px;
+  border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 22px; margin-bottom: 10px;
+}
+.mylikita-widget__status-icon.info { background: color-mix(in srgb, var(--mlw-primary) 12%, transparent); }
+.mylikita-widget__status-icon.success { background: color-mix(in srgb, var(--mlw-success) 14%, transparent); }
+.mylikita-widget__status-icon.danger { background: color-mix(in srgb, var(--mlw-danger) 12%, transparent); }
+.mylikita-widget__status-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
+.mylikita-widget__status-message { font-size: 13px; color: var(--mlw-muted); margin: 0 0 14px; }
+.mylikita-widget__status-ref { font-size: 12px; color: var(--mlw-muted); margin: 0 0 14px; }
+
+.mylikita-widget__spinner {
+  width: 18px; height: 18px;
+  display: inline-block;
+  border: 2px solid color-mix(in srgb, var(--mlw-primary-text) 40%, transparent);
+  border-top-color: var(--mlw-primary-text);
+  border-radius: 50%;
+  animation: mylikita-widget-spin .7s linear infinite;
+  vertical-align: -3px;
+  margin-right: 7px;
+}
+@keyframes mylikita-widget-spin { to { transform: rotate(360deg); } }
+
+.mylikita-widget__link-btn {
+  background: none;
+  border: 1px solid var(--mlw-border);
+  border-radius: var(--mlw-radius);
+  color: var(--mlw-text);
+  font: inherit;
+  font-size: 13px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+.mylikita-widget__link-btn:hover { border-color: var(--mlw-primary); color: var(--mlw-primary); }
+`;var xe={title:"Book an appointment",subtitle:"Request a slot and we will confirm shortly.",name:"Full name",phone:"Phone number",email:"Email address",provider:"Preferred doctor (optional)",noPreference:"No preference",service:"Service (optional)",datetime:"Preferred date & time",visitType:"Appointment type",visitPhysical:"In person",visitTelemedicine:"Video call",visitHome:"Home visit",notes:"Notes (optional)",submit:"Request appointment",submitting:"Submitting\u2026",bookAnother:"Book another appointment",requiredPhoneOrEmail:"Please provide a phone number or an email address.",requiredName:"Please enter your name.",requiredDatetime:"Please choose a date and time.",networkError:"Could not reach the booking service. Please try again.",rateLimited:"Too many requests \u2014 please wait a moment and try again."},ae="mylikita-widget-styles";function oe(i,e={}){if(!i)throw new Error("createBookingWidget: a container element is required");let t={relayUrl:e.relayUrl,websiteKey:e.websiteKey,facilityId:e.facilityId,providers:e.providers||[],services:e.services||[],loadProviders:e.loadProviders===!0&&!(e.providers&&e.providers.length),pollIntervalMs:e.pollIntervalMs??5e3,maxTries:e.maxTries??12,text:{...xe,...e.text||{}},theme:e.theme||{},onStatus:typeof e.onStatus=="function"?e.onStatus:null,onError:typeof e.onError=="function"?e.onError:null,onBooking:typeof e.onBooking=="function"?e.onBooking:null,externalRef:typeof e.externalRef=="function"?e.externalRef:P};if(!t.relayUrl||!t.websiteKey||!t.facilityId)throw new Error("createBookingWidget: relayUrl, websiteKey and facilityId are required");ke();let r=t.text,a=i;a.classList.add("mylikita-widget"),Se(a,t.theme);let o=!0,d=!1,u=null,f=Math.random().toString(36).slice(2,8),I=`mylikita_ref_${t.facilityId}_${f}`,y=l("form",{className:"mylikita-widget__form"}),B=l("h3",{className:"mylikita-widget__title",text:r.title}),U=l("p",{className:"mylikita-widget__subtitle",text:r.subtitle}),L=l("div",{className:"mylikita-widget__error",attrs:{role:"alert"}}),q=_("name",r.name,{required:!0}),V=l("div",{className:"mylikita-widget__row"}),z=_("phone",r.phone,{type:"tel",inputmode:"tel"}),R=_("email",r.email,{type:"email"});V.append(z.wrap,R.wrap);let g=j("provider",r.provider,[{value:"",label:r.noPreference},...t.providers.map(n=>({value:n.external_id,label:n.label||n.name||n.external_id}))]);function se(n){let s=g.input.value;g.input.replaceChildren();let c=document.createElement("option");c.value="",c.textContent=r.noPreference,g.input.append(c);for(let m of n||[]){let p=document.createElement("option");p.value=m.external_id,p.textContent=m.label||m.name||m.external_id,g.input.append(p)}s&&(g.input.value=s)}let J=t.services.length?j("service",r.service,[{value:"",label:"\u2014"},...t.services.map(n=>({value:n,label:n}))]):_("service",r.service),v=_("datetime",r.datetime,{type:"datetime-local",required:!0});v.input.min=ne(new Date);let G=j("visitType",r.visitType,[{value:"physical",label:r.visitPhysical},{value:"telemedicine",label:r.visitTelemedicine},{value:"home_visit",label:r.visitHome}]),X=_("notes",r.notes,{type:"textarea",maxlength:500}),w=l("button",{className:"mylikita-widget__submit",type:"submit",text:r.submit}),Q=l("div");Q.append(w);let M=l("p",{className:"mylikita-widget__hint"});y.append(L,q.wrap,V,g.wrap,J.wrap,v.wrap,G.wrap,X.wrap,Q,M);let b=l("div",{className:"mylikita-widget__status",attrs:{"aria-live":"polite"},hidden:!0});y.addEventListener("submit",n=>{n.preventDefault(),!d&&le()});async function le(){d=!0,D(null),w.disabled=!0,w.textContent=r.submitting;let n={facility_id:t.facilityId,patient_name:q.input.value.trim(),patient_phone:z.input.value.trim(),patient_email:R.input.value.trim(),provider_external_id:g.input.value||void 0,service_name:J.input.value.trim()||void 0,appt_datetime:v.input.value,visit_type:G.input.value||"physical",duration_mins:t.durationMins||void 0,notes:X.input.value.trim()||void 0};if(!n.patient_name)return k(r.requiredName);if(!n.patient_phone&&!n.patient_email)return k(r.requiredPhoneOrEmail);if(!n.appt_datetime||Number.isNaN(Date.parse(n.appt_datetime)))return k(r.requiredDatetime);let s=he(I);if(!s){s=t.externalRef();try{sessionStorage.setItem(I,s)}catch{}}n.external_ref=s,u=new AbortController;let c=null;try{let m=await S({relayUrl:t.relayUrl,websiteKey:t.websiteKey,payload:n,signal:u.signal});c=m.booking_ref,m.duplicate?(M.textContent="",Z("pending_confirmation",c,"We found an existing booking request for this slot \u2014 checking it\u2026")):(t.onBooking&&x(t.onBooking,m,n),Z("pending_confirmation",c,null)),de(c)}catch(m){if(!o||m?.name==="AbortError")return;let p=m.status===429?r.rateLimited:m.message||r.networkError;t.onError&&x(t.onError,m),k(p)}}async function de(n){let s;try{s=await N(()=>T({relayUrl:t.relayUrl,websiteKey:t.websiteKey,bookingRef:n,signal:u.signal}),{intervalMs:t.pollIntervalMs,maxTries:t.maxTries,signal:u.signal})}catch(c){if(!o||c?.name==="AbortError")return;t.onError&&x(t.onError,c),h("poll_error",n,c.message||r.networkError),d=!1;return}if(!(!o||s.status==="aborted")){if(t.onStatus&&s.data&&x(t.onStatus,s.data),s.resolved){try{sessionStorage.removeItem(I)}catch{}h(s.status,n)}else h("pending_confirmation",n);d=!1}}function Z(n,s,c){y.hidden=!0,B.hidden=!0,U.hidden=!0,b.hidden=!1,h(n,s,c)}function h(n,s,c){let m=A(n),p=l("div",{className:`mylikita-widget__status-icon ${m.kind}`});p.textContent=ve(m.kind);let me=l("p",{className:"mylikita-widget__status-title",text:m.title}),ce=l("p",{className:"mylikita-widget__status-message",text:c||m.message}),ue=l("p",{className:"mylikita-widget__status-ref",text:s?`Booking ref: ${s}`:""}),te=l("button",{className:"mylikita-widget__link-btn",type:"button",text:r.bookAnother});te.addEventListener("click",()=>ee()),b.replaceChildren(p,me,ce,ue,te)}function k(n){d=!1,w.disabled=!1,w.textContent=r.submit,D(n)}function D(n){L.textContent=n||"",L.classList.toggle("visible",!!n)}function ee(){try{sessionStorage.removeItem(`mylikita_ref_${t.facilityId}`)}catch{}y.reset(),D(null),b.replaceChildren(),b.hidden=!0,y.hidden=!1,B.hidden=!1,U.hidden=!1,M.textContent="",d=!1,w.disabled=!1,w.textContent=r.submit,v.input.min=ne(new Date)}a.replaceChildren(B,U,y,b);let K=null;if(t.loadProviders){let n=new AbortController;(async()=>{try{let s=await E({relayUrl:t.relayUrl,websiteKey:t.websiteKey,signal:n.signal});o&&!n.signal.aborted&&se(s)}catch(s){if(!o||s?.name==="AbortError")return;t.onError&&x(t.onError,s)}})(),K=()=>n.abort()}return{destroy(){o=!1,u&&u.abort(),K&&K(),a.replaceChildren(),a.classList.remove("mylikita-widget")},reset:ee,getForm(){return{name:q.input.value,phone:z.input.value,email:R.input.value}}}}function _(i,e,{type:t="text",required:r=!1,maxlength:a,inputmode:o}={}){let d=l("div",{className:"mylikita-widget__field"}),u=l("label",{className:"mylikita-widget__label",attrs:{for:`mlw-${i}`}});u.append(document.createTextNode(e)),r&&u.append(l("span",{className:"req",text:" *"}));let f;return t==="textarea"?f=l("textarea",{className:"mylikita-widget__textarea",attrs:{id:`mlw-${i}`,rows:3,maxlength:a||""}}):f=l("input",{className:"mylikita-widget__input",attrs:{id:`mlw-${i}`,type:t,inputmode:o||""}}),r&&f.setAttribute("required",""),d.append(u,f),{wrap:d,input:f}}function j(i,e,t){let r=l("div",{className:"mylikita-widget__field"}),a=l("label",{className:"mylikita-widget__label",attrs:{for:`mlw-${i}`}});a.textContent=e;let o=l("select",{className:"mylikita-widget__select",attrs:{id:`mlw-${i}`}});for(let d of t){let u=l("option",{text:d.label});u.value=d.value,o.append(u)}return r.append(a,o),{wrap:r,input:o}}function l(i,{className:e,text:t,attrs:r={}}={}){let a=document.createElement(i);e&&(a.className=e),t!==void 0&&(a.textContent=t);for(let[o,d]of Object.entries(r))d===void 0||d===""||a.setAttribute(o,d);return a}function ve(i){return i==="success"?"\u2713":i==="danger"?"!":"\u2026"}function he(i){try{return sessionStorage.getItem(i)||null}catch{return null}}function x(i,...e){try{i(...e)}catch{}}function ne(i){let e=t=>String(t).padStart(2,"0");return`${i.getFullYear()}-${e(i.getMonth()+1)}-${e(i.getDate())}T${e(i.getHours())}:${e(i.getMinutes())}`}function ke(){if(document.getElementById(ae))return;let i=document.createElement("style");i.id=ae,i.textContent=re,document.head.appendChild(i)}function Se(i,e){for(let[t,r]of Object.entries($(e)))i.style.setProperty(t,r)}return _e(Ee);})();
+
+</script>
+  <script>
+    // ── in-page mock relay (implements the v1 contract: POST /v1/bookings,
+    //    GET /v1/bookings/:ref). Swapped in by overriding global fetch ─────
+    // NOTE: demo-only. A production page must NOT override fetch — point the
+    // widget at the real relay URL instead.
+    const bookings = new Map(); // booking_ref -> { payload, polls }
+    const log = (line) => {
+      const el = document.getElementById('log');
+      el.innerHTML = line + '\n' + el.innerHTML;
+    };
+
+    const mockRelay = async (url, init) => {
+      const method = (init && init.method) || 'GET';
+      const u = new URL(url, location.href);
+
+      if (method === 'POST' && u.pathname === '/v1/bookings') {
+        const body = JSON.parse(init.body);
+        const existing = [...bookings.values()].find((b) => b.external_ref === body.external_ref);
+        if (existing) {
+          log('<b>[mock relay]</b> idempotent replay — same external_ref, returning existing booking');
+          return json(201, { booking_ref: existing.booking_ref, status: 'pending_confirmation' });
+        }
+        const dup = [...bookings.values()].find(
+          (b) => b.phone === body.patient_phone && b.datetime === body.appt_datetime
+        );
+        if (dup) {
+          log('<b>[mock relay]</b> duplicate slot → 409 duplicate_booking');
+          return json(409, { error: 'duplicate_booking', message: 'This patient already has this appointment slot booked', booking_ref: dup.booking_ref });
+        }
+        const booking_ref = 'MLB-' + Date.now().toString(36).toUpperCase();
+        bookings.set(booking_ref, { ...body, booking_ref, external_ref: body.external_ref, phone: body.patient_phone, datetime: body.appt_datetime, polls: 0 });
+        log('<b>[mock relay]</b> booking ' + booking_ref + ' stored (pending_confirmation)');
+        return json(201, { booking_ref, status: 'pending_confirmation' });
+      }
+
+      if (method === 'GET' && u.pathname === '/v1/providers') {
+        log('<b>[mock relay]</b> GET /v1/providers — serving the mapped provider list');
+        return json(200, {
+          facility_id: FACILITY,
+          providers: [
+            { external_id: 'dr-khalil', name: 'Dr. Khalil', specialty: 'General medicine' },
+            { external_id: 'dr-amina', name: 'Dr. Amina', specialty: 'Dentistry' },
+          ],
+        });
+      }
+
+      if (method === 'GET' && u.pathname.startsWith('/v1/bookings/')) {
+        const ref = decodeURIComponent(u.pathname.split('/').pop());
+        const b = bookings.get(ref);
+        if (!b) return json(404, { error: 'not_found', message: 'Unknown booking_ref' });
+        b.polls += 1;
+        // Transition to confirmed on the second poll so the demo shows the poll loop.
+        const status = b.polls >= 2 ? 'confirmed' : 'pending_confirmation';
+        log('<b>[mock relay]</b> poll ' + ref + ' → ' + status);
+        return json(200, { booking_ref: ref, status, appt_ref: status === 'confirmed' ? 'APT-DEMO123' : undefined });
+      }
+
+      return json(500, { error: 'server_error', message: 'mock relay: unhandled ' + method + ' ' + url });
+    };
+
+    const realFetch = window.fetch.bind(window);
+    window.fetch = (url, init) => mockRelay(url, init);
+
+    function json(status, body) {
+      return Promise.resolve(new Response(JSON.stringify(body), {
+        status,
+        headers: { 'Content-Type': 'application/json' },
+      }));
+    }
+
+    // ── mount two widgets ──────────────────────────────────────────────────
+    const KEY = 'wk_demo_public_key';
+    const FACILITY = 'F1';
+
+    MyLikitaBookingWidget.createBookingWidget(document.getElementById('booking'), {
+      // The in-page mock relay overrides fetch, so this URL is never actually
+      // contacted — the widget still requires a non-empty relay URL.
+      relayUrl: 'https://api.mylikita.clinic',
+      websiteKey: KEY,
+      facilityId: FACILITY,
+      providers: [{ external_id: 'dr-khalil', label: 'Dr. Khalil' }, { external_id: 'dr-amina', label: 'Dr. Amina' }],
+      services: ['General consultation', 'Dental check-up', 'X-ray'],
+      pollIntervalMs: 800,
+      maxTries: 20,
+      onStatus: (s) => log('<b>[widget 1]</b> status → ' + s.status + (s.appt_ref ? ' (' + s.appt_ref + ')' : '')),
+      onBooking: (b) => log('<b>[widget 1]</b> booked → ' + b.booking_ref),
+    });
+
+    const w2 = MyLikitaBookingWidget.createBookingWidget(document.getElementById('booking2'), {
+      relayUrl: 'https://api.mylikita.clinic',
+      websiteKey: KEY,
+      facilityId: FACILITY,
+      // Phase C2/C3: no static providers — load them from the relay's
+      // GET /v1/providers on mount (the mock serves the mapped list).
+      loadProviders: true,
+      pollIntervalMs: 800,
+      maxTries: 20,
+      theme: { primary: '#0d9488', primaryDark: '#0f766e' },
+      onStatus: (s) => log('<b>[widget 2]</b> status → ' + s.status),
+      onError: (e) => log('<b>[widget 2]</b> provider fetch failed (non-fatal): ' + e.message),
+    });
+
+    document.querySelectorAll('[data-theme]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const preset = btn.dataset.theme;
+        const vars = {
+          teal: { '--mlw-primary': '#0d9488', '--mlw-primary-dark': '#0f766e' },
+          sunset: { '--mlw-primary': '#ea580c', '--mlw-primary-dark': '#c2410c', '--mlw-bg': '#fff7ed' },
+        }[preset] || {};
+        const node = document.getElementById('booking2');
+        for (const k of ['--mlw-primary', '--mlw-primary-dark', '--mlw-bg']) node.style.removeProperty(k);
+        Object.entries(vars).forEach(([k, v]) => node.style.setProperty(k, v));
+        log('<b>[demo]</b> theme applied via CSS variables on .mylikita-widget');
+      });
+    });
+
+    log('<b>[demo]</b> ready — submit a booking; it flips to confirmed after two polls.');
+  </script>
+</body>
+</html>