@ordinatio/booking-widget 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -20,14 +20,14 @@ interface BookingWidgetProps {
     /** Appointment type slug for team mode (ROUND_ROBIN/LOAD_BALANCED). */
     typeSlug?: string;
     /**
-     * Organization slug (e.g., "1701bespoke"), from Organization.slug. Optional —
+     * Organization slug (e.g., "acme"), from Organization.slug. Optional —
      * omitting it falls back to the legacy bare-slug directory lookup (works only
      * while the calendar/type's slug is unclaimed by another org). New embed code
      * always sets this; it exists as an optional prop only for backward
      * compatibility with widget instances embedded before org-qualified URLs shipped.
      */
     orgSlug?: string;
-    /** API base URL (e.g., "https://system.1701bespoke.com"). Empty string for same-origin. */
+    /** API base URL (e.g., "https://booking.acme.example"). Empty string for same-origin. */
     apiBaseUrl: string;
     /**
      * Built-in color scheme preset. Overrides nothing the caller sets explicitly in `theme`.
@@ -51,6 +51,12 @@ interface BookingWidgetProps {
     redirectDelay?: number;
     /** Whether to show the built-in "confirmation sent to {email}" line on the confirmation step (default: true). */
     showContactInfo?: boolean;
+    /**
+     * Whether to load the organization's brand (name, logo, colours, font, footer) from the server and apply it
+     * (default: true). A `theme` value you set yourself always wins over the brand's. Servers without branding answer
+     * with no brand and the widget looks as it always has.
+     */
+    showBrand?: boolean;
 }
 interface BookingWidgetTheme {
     primaryColor?: string;

package/dist/index.mjs

@@ -1,11 +1,11 @@
 'use client';
 
 // src/BookingWidget.tsx
-import { useRef as useRef4, useEffect as useEffect6 } from "react";
+import { useRef as useRef4, useEffect as useEffect7 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/BookingFlowInner.tsx
-import { useRef as useRef3, useEffect as useEffect5 } from "react";
+import { useRef as useRef3, useEffect as useEffect6 } from "react";
 
 // src/hooks/useBookingFlow.ts
 import { useState, useCallback, useRef } from "react";
@@ -232,6 +232,32 @@ async function getWidgetInit(apiBaseUrl, calendarSlug, orgSlug) {
   const response = await safeFetch(url);
   return handleResponse(response);
 }
+async function getBrand(apiBaseUrl, orgSlug) {
+  try {
+    const query = orgSlug ? `?orgSlug=${encodeURIComponent(orgSlug)}` : "";
+    const response = await fetch(buildUrl(apiBaseUrl, `/api/scheduling/brand${query}`));
+    if (!response.ok) {
+      if (response.status !== 404 && response.status !== 501) console.warn(`[booking-widget] could not load the brand (HTTP ${response.status})`);
+      return null;
+    }
+    const body = await response.json();
+    const brand = body?.brand;
+    if (!brand || typeof brand.displayName !== "string" || brand.displayName.length === 0) return null;
+    const text = (value) => typeof value === "string" && value.length > 0 ? value : null;
+    return {
+      displayName: brand.displayName,
+      logoUrl: text(brand.logoUrl),
+      primaryColor: text(brand.primaryColor),
+      accentColor: text(brand.accentColor),
+      backgroundColor: text(brand.backgroundColor),
+      textColor: text(brand.textColor),
+      fontFamily: text(brand.fontFamily),
+      footerText: text(brand.footerText)
+    };
+  } catch {
+    return null;
+  }
+}
 async function getAvailability(apiBaseUrl, calendarId, date, typeId, timezone, orgSlug) {
   const params = new URLSearchParams({
     calendarId,
@@ -1525,6 +1551,61 @@ function StaffPickerRow({ staff, value, onChange }) {
   ] });
 }
 
+// src/hooks/use-brand.ts
+import { useEffect as useEffect5, useState as useState6 } from "react";
+function useBrand(apiBaseUrl, orgSlug, enabled) {
+  const [brand, setBrand] = useState6(null);
+  useEffect5(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const loaded = await getBrand(apiBaseUrl, orgSlug);
+        if (!cancelled) setBrand(loaded);
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBaseUrl, orgSlug, enabled]);
+  return enabled ? brand : null;
+}
+
+// src/sanitize-css-value.ts
+var DANGEROUS_PATTERN = /[;{}`@\n\r]|url\s*\(|expression\s*\(/i;
+function sanitizeCSSValue(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return null;
+  if (DANGEROUS_PATTERN.test(trimmed)) return null;
+  return trimmed;
+}
+
+// src/utils/brand-style.ts
+var HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+var FONT = /^[A-Za-z0-9 ,-]{1,100}$/;
+var VARIABLE = {
+  primaryColor: "--obw-primary",
+  accentColor: "--obw-accent",
+  backgroundColor: "--obw-bg",
+  textColor: "--obw-text",
+  fontFamily: "--obw-font"
+};
+function brandStyle(brand, theme) {
+  const style = {};
+  if (!brand) return style;
+  for (const key of Object.keys(VARIABLE)) {
+    const value = brand[key];
+    if (!value || theme?.[key]) continue;
+    const safe = sanitizeCSSValue(value);
+    if (safe && (key === "fontFamily" ? FONT.test(safe) : HEX.test(safe))) style[VARIABLE[key]] = safe;
+  }
+  return style;
+}
+function safeLogoUrl(brand) {
+  return brand?.logoUrl && /^https:\/\//i.test(brand.logoUrl) ? brand.logoUrl : null;
+}
+
 // src/BookingFlowInner.tsx
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var STEP_LABELS = {
@@ -1545,13 +1626,16 @@ function BookingFlowInner(props) {
     onBooked: props.onBooked,
     onError: props.onError
   });
+  const brand = useBrand(props.apiBaseUrl, props.orgSlug, props.showBrand !== false);
+  const brandVariables = brandStyle(brand, props.theme);
+  const logoUrl = safeLogoUrl(brand);
   const staffList = state.teamMode && state.selectedType?.calendars?.length ? state.selectedType.calendars.map((c) => ({
     id: c.calendar.id,
     name: c.calendar.staffName ?? c.calendar.name,
     avatar: c.calendar.staffAvatar
   })) : [];
   const stepRef = useRef3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (stepRef.current && !state.isLoading) {
       stepRef.current.focus();
     }
@@ -1562,7 +1646,11 @@ function BookingFlowInner(props) {
   if (state.error && !state.calendar && !state.selectedType) {
     return /* @__PURE__ */ jsx11("div", { className: "obw-container", children: /* @__PURE__ */ jsx11("div", { className: "obw-error", role: "alert", children: state.error }) });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "obw-container", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "obw-container", style: brandVariables, children: [
+    brand && /* @__PURE__ */ jsxs11("div", { className: "obw-brand", children: [
+      logoUrl && /* @__PURE__ */ jsx11("img", { className: "obw-brand-logo", src: logoUrl, alt: "" }),
+      /* @__PURE__ */ jsx11("span", { className: "obw-brand-name", children: brand.displayName })
+    ] }),
     /* @__PURE__ */ jsx11("div", { "aria-live": "polite", "aria-atomic": "true", className: "obw-sr-only", children: state.error && state.step === "details" ? state.error : "" }),
     state.step !== "confirmed" && !props.typeSlug && state.calendar && /* @__PURE__ */ jsxs11("div", { className: "obw-header", children: [
       /* @__PURE__ */ jsx11("div", { className: "obw-title", children: state.calendar.name }),
@@ -1684,19 +1772,11 @@ function BookingFlowInner(props) {
           )
         ]
       }
-    )
+    ),
+    brand?.footerText && /* @__PURE__ */ jsx11("div", { className: "obw-brand-footer", children: brand.footerText })
   ] });
 }
 
-// src/sanitize-css-value.ts
-var DANGEROUS_PATTERN = /[;{}`@\n\r]|url\s*\(|expression\s*\(/i;
-function sanitizeCSSValue(value) {
-  const trimmed = value.trim();
-  if (trimmed.length === 0) return null;
-  if (DANGEROUS_PATTERN.test(trimmed)) return null;
-  return trimmed;
-}
-
 // src/styles/widget.css
 var widget_default = `/* ===========================================
    @ordinatio/booking-widget \u2014 Self-contained CSS
@@ -2448,6 +2528,33 @@ var widget_default = `/* ===========================================
   border-radius: 50%;
   object-fit: cover;
 }
+
+/* Organization brand: the logo and name above the flow, a footer line below it. */
+.obw-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  margin-bottom: 1rem;
+}
+
+.obw-brand-logo {
+  max-height: 2.5rem;
+  max-width: 10rem;
+  object-fit: contain;
+}
+
+.obw-brand-name {
+  font-weight: 600;
+  color: var(--obw-text);
+}
+
+.obw-brand-footer {
+  margin-top: 1rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--obw-text-muted);
+}
 `;
 
 // src/BookingWidget.tsx
@@ -2515,7 +2622,7 @@ function IsolatedWidget(props) {
       )
     );
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (!hostRef.current) return;
     let shadow = hostRef.current.shadowRoot;
     if (!shadow) {
@@ -2552,7 +2659,7 @@ function IsolatedWidget(props) {
     };
   }, [props.calendarSlug, props.typeSlug, props.orgSlug, props.apiBaseUrl, themeJSON]);
   const hasMountedRef = useRef4(false);
-  useEffect6(() => {
+  useEffect7(() => {
     if (hasMountedRef.current && rootRef.current) renderFlow();
     hasMountedRef.current = true;
   }, [props.confirmationMessage, props.redirectUrl, props.redirectDelay, props.showContactInfo]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordinatio/booking-widget",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "license": "MIT",
   "description": "Embeddable booking widget for Ordinatio scheduling. Shadow DOM isolation, themeable, no iframes.",