@bookslot/react 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @bookslot/react
 
-The [BookSlot](https://bookslot-rho.vercel.app) booking widget as a React component. Works in Next.js (App Router and Pages Router), Vite, Remix and any other React app.
+The [BookSlot](https://bookslot.taulantsela.com) booking widget as a React component. Works in Next.js (App Router and Pages Router), Vite, Remix and any other React app.
 
 ```bash
 npm install @bookslot/react
@@ -16,7 +16,7 @@ export function Booking() {
 
 That's a working booking form. It loads the widget from BookSlot, resizes itself to fit, and shows the shop's services and free times. Find your shop slug in the BookSlot dashboard.
 
-The package is already marked `"use client"`, so in the Next.js App Router a server component can render it with `shop`, `theme`, `service` and `customer`. Callbacks such as `onBooked` are functions, which React can't send from the server, so pass those from a client component.
+The package is already marked `"use client"`, so in the Next.js App Router a server component can render it with `shop`, `theme`, `service`, `staff` and `customer`. Callbacks such as `onBooked` are functions, which React can't send from the server, so pass those from a client component.
 
 ## Match your site, prefill, react to bookings (Pro)
 
@@ -25,7 +25,8 @@ The package is already marked `"use client"`, so in the Next.js App Router a ser
   shop="your-shop-slug"
   theme={{ primary: "#2dd4bf", scheme: "dark", radius: 6, font: "system" }}
   service="svc_…"                                   // preselect; can change any time
-  customer={{ name: user.name, email: user.email }} // the signed-in user
+  staff="stf_…"                                     // preselect a staff member
+  customer={{ name: user.name, email: user.email, fields: { any_allergies: "None" } }}
   onBooked={(booking) => router.push(`/thanks?id=${booking.appointmentId}`)}
 />
 ```
@@ -40,14 +41,15 @@ On the Free plan the widget still works, but it ignores these options and shows
 | `bookslotUrl` | `string` | Where BookSlot runs. Defaults to the hosted service. |
 | `theme` | `{ primary?, background?, text?, radius?, font?, scheme? }` | Pro. Hex colours, radius 0–32, font `sans` / `system` / `serif` / `mono`, scheme `light` / `dark` / `auto`. Changing it reloads the widget. |
 | `service` | `string` | Pro. Service id to preselect, listed in **Dashboard → Widget**. |
-| `customer` | `{ name?, email?, phone?, notes? }` | Pro. Fills in the form. Sent with `postMessage`, never in the URL. |
+| `staff` | `string` | Pro. Staff member id to preselect, listed in **Dashboard → Widget**; `""` switches back to anyone. |
+| `customer` | `{ name?, email?, phone?, notes?, fields? }` | Pro. Fills in the form; `fields` answers custom questions by key. Sent with `postMessage`, never in the URL. |
 | `initialHeight` | `number` | Height before the widget reports its size. Default 720. |
 | `maxWidth` | `number \| string` | Default 480px. |
 | `title` | `string` | Accessible title of the iframe. |
 | `className`, `style` | | Applied to the wrapper `div`. |
 | `onReady` | `({ shop }) => void` | The widget loaded. |
 | `onResize` | `({ height }) => void` | The widget changed height. |
-| `onBooked` | `(booking) => void` | Pro. `{ appointmentId, serviceId, serviceName, startsAt, endsAt, when }`. |
+| `onBooked` | `(booking) => void` | Pro. `{ appointmentId, serviceId, serviceName, staffId, staffName, startsAt, endsAt, when }`. |
 | `onError` | `({ message }) => void` | Pro for booking errors; also called if the widget script can't load. |
 
 ## Without React
@@ -55,7 +57,7 @@ On the Free plan the widget still works, but it ignores these options and shows
 Load the script and call it directly:
 
 ```html
-<script src="https://bookslot-rho.vercel.app/widget.js" data-shop="your-shop-slug" async></script>
+<script src="https://bookslot.taulantsela.com/widget.js" data-shop="your-shop-slug" async></script>
 ```
 
 `loadBookSlot(url?)` is exported too, if you want the underlying `BookSlot.mount` API in React.

package/dist/index.cjs

@@ -28,7 +28,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var DEFAULT_BOOKSLOT_URL = "https://bookslot-rho.vercel.app";
+var DEFAULT_BOOKSLOT_URL = "https://bookslot.taulantsela.com";
 function apiFor(origin, { justLoaded = false } = {}) {
   var _a;
   const globals = window;
@@ -74,6 +74,7 @@ function BookSlotWidget({
   bookslotUrl = DEFAULT_BOOKSLOT_URL,
   theme,
   service,
+  staff,
   customer,
   initialHeight,
   maxWidth,
@@ -87,9 +88,9 @@ function BookSlotWidget({
 }) {
   const container = (0, import_react.useRef)(null);
   const widget = (0, import_react.useRef)(null);
-  const latest = (0, import_react.useRef)({ service, customer, onReady, onResize, onBooked, onError });
+  const latest = (0, import_react.useRef)({ service, staff, customer, onReady, onResize, onBooked, onError });
   (0, import_react.useEffect)(() => {
-    latest.current = { service, customer, onReady, onResize, onBooked, onError };
+    latest.current = { service, staff, customer, onReady, onResize, onBooked, onError };
   });
   const themeKey = JSON.stringify(theme != null ? theme : {});
   (0, import_react.useEffect)(() => {
@@ -98,11 +99,12 @@ function BookSlotWidget({
     loadBookSlot(bookslotUrl).then(
       (api) => {
         if (cancelled || !container.current) return;
-        const { service: service2, customer: customer2 } = latest.current;
+        const { service: service2, staff: staff2, customer: customer2 } = latest.current;
         instance = api.mount(container.current, {
           shop,
           theme: JSON.parse(themeKey),
           service: service2,
+          staff: staff2 || void 0,
           prefill: customer2,
           height: initialHeight,
           maxWidth,
@@ -136,8 +138,8 @@ function BookSlotWidget({
   }, [shop, bookslotUrl, themeKey, initialHeight, maxWidth, title]);
   (0, import_react.useEffect)(() => {
     var _a;
-    if (service) (_a = widget.current) == null ? void 0 : _a.prefill({}, service);
-  }, [service]);
+    if (service || staff !== void 0) (_a = widget.current) == null ? void 0 : _a.prefill({}, service, staff);
+  }, [service, staff]);
   const customerKey = JSON.stringify(customer != null ? customer : {});
   (0, import_react.useEffect)(() => {
     var _a;

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
 
-declare const DEFAULT_BOOKSLOT_URL = "https://bookslot-rho.vercel.app";
+declare const DEFAULT_BOOKSLOT_URL = "https://bookslot.taulantsela.com";
 type BookSlotTheme = {
     /** Hex colour for buttons and highlights. */
     primary?: string;
@@ -19,11 +19,16 @@ type BookSlotCustomer = {
     email?: string;
     phone?: string;
     notes?: string;
+    /** Answers to the shop's custom questions, keyed by question key (Dashboard → Booking form). */
+    fields?: Record<string, string | number | boolean>;
 };
 type BookSlotBooking = {
     appointmentId: string;
     serviceId: string;
     serviceName: string;
+    /** Who it's with; null when the shop has no staff. */
+    staffId: string | null;
+    staffName: string | null;
     /** ISO timestamp. */
     startsAt: string;
     /** ISO timestamp. */
@@ -40,6 +45,8 @@ type BookSlotWidgetProps = {
     theme?: BookSlotTheme;
     /** Pro: service id to preselect (listed in Dashboard → Widget). Can change at any time. */
     service?: string;
+    /** Pro: staff member id to preselect (listed in Dashboard → Widget), or "" for anyone. Can change at any time. */
+    staff?: string;
     /** Pro: details of the signed-in user. Sent by postMessage, never in the URL. */
     customer?: BookSlotCustomer;
     /** Height in pixels before the widget reports its own size. Default 720. */
@@ -66,7 +73,7 @@ type BookSlotWidgetProps = {
 type EventName = "ready" | "resize" | "booked" | "error";
 type BookSlotInstance = {
     on(type: EventName, fn: (detail: unknown) => void): BookSlotInstance;
-    prefill(customer: BookSlotCustomer, service?: string): BookSlotInstance;
+    prefill(customer: BookSlotCustomer, service?: string, staff?: string): BookSlotInstance;
     destroy(): void;
 };
 type BookSlotApi = {
@@ -77,6 +84,6 @@ type BookSlotApi = {
 };
 /** Loads widget.js once per BookSlot address and resolves with that address's API. */
 declare function loadBookSlot(bookslotUrl?: string): Promise<BookSlotApi>;
-declare function BookSlotWidget({ shop, bookslotUrl, theme, service, customer, initialHeight, maxWidth, title, className, style, onReady, onResize, onBooked, onError, }: BookSlotWidgetProps): react.JSX.Element;
+declare function BookSlotWidget({ shop, bookslotUrl, theme, service, staff, customer, initialHeight, maxWidth, title, className, style, onReady, onResize, onBooked, onError, }: BookSlotWidgetProps): react.JSX.Element;
 
 export { type BookSlotBooking, type BookSlotCustomer, type BookSlotTheme, BookSlotWidget, type BookSlotWidgetProps, DEFAULT_BOOKSLOT_URL, loadBookSlot };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
 
-declare const DEFAULT_BOOKSLOT_URL = "https://bookslot-rho.vercel.app";
+declare const DEFAULT_BOOKSLOT_URL = "https://bookslot.taulantsela.com";
 type BookSlotTheme = {
     /** Hex colour for buttons and highlights. */
     primary?: string;
@@ -19,11 +19,16 @@ type BookSlotCustomer = {
     email?: string;
     phone?: string;
     notes?: string;
+    /** Answers to the shop's custom questions, keyed by question key (Dashboard → Booking form). */
+    fields?: Record<string, string | number | boolean>;
 };
 type BookSlotBooking = {
     appointmentId: string;
     serviceId: string;
     serviceName: string;
+    /** Who it's with; null when the shop has no staff. */
+    staffId: string | null;
+    staffName: string | null;
     /** ISO timestamp. */
     startsAt: string;
     /** ISO timestamp. */
@@ -40,6 +45,8 @@ type BookSlotWidgetProps = {
     theme?: BookSlotTheme;
     /** Pro: service id to preselect (listed in Dashboard → Widget). Can change at any time. */
     service?: string;
+    /** Pro: staff member id to preselect (listed in Dashboard → Widget), or "" for anyone. Can change at any time. */
+    staff?: string;
     /** Pro: details of the signed-in user. Sent by postMessage, never in the URL. */
     customer?: BookSlotCustomer;
     /** Height in pixels before the widget reports its own size. Default 720. */
@@ -66,7 +73,7 @@ type BookSlotWidgetProps = {
 type EventName = "ready" | "resize" | "booked" | "error";
 type BookSlotInstance = {
     on(type: EventName, fn: (detail: unknown) => void): BookSlotInstance;
-    prefill(customer: BookSlotCustomer, service?: string): BookSlotInstance;
+    prefill(customer: BookSlotCustomer, service?: string, staff?: string): BookSlotInstance;
     destroy(): void;
 };
 type BookSlotApi = {
@@ -77,6 +84,6 @@ type BookSlotApi = {
 };
 /** Loads widget.js once per BookSlot address and resolves with that address's API. */
 declare function loadBookSlot(bookslotUrl?: string): Promise<BookSlotApi>;
-declare function BookSlotWidget({ shop, bookslotUrl, theme, service, customer, initialHeight, maxWidth, title, className, style, onReady, onResize, onBooked, onError, }: BookSlotWidgetProps): react.JSX.Element;
+declare function BookSlotWidget({ shop, bookslotUrl, theme, service, staff, customer, initialHeight, maxWidth, title, className, style, onReady, onResize, onBooked, onError, }: BookSlotWidgetProps): react.JSX.Element;
 
 export { type BookSlotBooking, type BookSlotCustomer, type BookSlotTheme, BookSlotWidget, type BookSlotWidgetProps, DEFAULT_BOOKSLOT_URL, loadBookSlot };

package/dist/index.js

@@ -3,7 +3,7 @@
 // src/index.tsx
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-var DEFAULT_BOOKSLOT_URL = "https://bookslot-rho.vercel.app";
+var DEFAULT_BOOKSLOT_URL = "https://bookslot.taulantsela.com";
 function apiFor(origin, { justLoaded = false } = {}) {
   var _a;
   const globals = window;
@@ -49,6 +49,7 @@ function BookSlotWidget({
   bookslotUrl = DEFAULT_BOOKSLOT_URL,
   theme,
   service,
+  staff,
   customer,
   initialHeight,
   maxWidth,
@@ -62,9 +63,9 @@ function BookSlotWidget({
 }) {
   const container = useRef(null);
   const widget = useRef(null);
-  const latest = useRef({ service, customer, onReady, onResize, onBooked, onError });
+  const latest = useRef({ service, staff, customer, onReady, onResize, onBooked, onError });
   useEffect(() => {
-    latest.current = { service, customer, onReady, onResize, onBooked, onError };
+    latest.current = { service, staff, customer, onReady, onResize, onBooked, onError };
   });
   const themeKey = JSON.stringify(theme != null ? theme : {});
   useEffect(() => {
@@ -73,11 +74,12 @@ function BookSlotWidget({
     loadBookSlot(bookslotUrl).then(
       (api) => {
         if (cancelled || !container.current) return;
-        const { service: service2, customer: customer2 } = latest.current;
+        const { service: service2, staff: staff2, customer: customer2 } = latest.current;
         instance = api.mount(container.current, {
           shop,
           theme: JSON.parse(themeKey),
           service: service2,
+          staff: staff2 || void 0,
           prefill: customer2,
           height: initialHeight,
           maxWidth,
@@ -111,8 +113,8 @@ function BookSlotWidget({
   }, [shop, bookslotUrl, themeKey, initialHeight, maxWidth, title]);
   useEffect(() => {
     var _a;
-    if (service) (_a = widget.current) == null ? void 0 : _a.prefill({}, service);
-  }, [service]);
+    if (service || staff !== void 0) (_a = widget.current) == null ? void 0 : _a.prefill({}, service, staff);
+  }, [service, staff]);
   const customerKey = JSON.stringify(customer != null ? customer : {});
   useEffect(() => {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bookslot/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React component for the BookSlot booking widget",
   "license": "MIT",
   "type": "module",
@@ -34,7 +34,7 @@
     "nextjs",
     "bookslot"
   ],
-  "homepage": "https://bookslot-rho.vercel.app",
+  "homepage": "https://bookslot.taulantsela.com",
   "peerDependencies": {
     "react": ">=18"
   },