@doany-ai/calendar 0.1.0-alpha.0 → 0.1.0-alpha.1

package/README.md

@@ -108,7 +108,7 @@ A month of class sessions: the days with sessions are marked on the calendar; th
 
 ### `PackageList`, `PackageCard`
 
-The packages of uses a visitor can buy (`doany.catalog.list({ type: "package", purchasable: true })`), as pricing cards: name, price, description, and the way to buy — which the site provides, because buying is `@doany-ai/commerce`'s job:
+The packages of uses a visitor can buy (`doany.catalog.list({ type: "plan", purchasable: true })`), as pricing cards: name, price, description, and the way to buy — which the site provides, because buying is `@doany-ai/commerce`'s job:
 
 ```jsx
 <PackageList

package/dist/components/attendee-form.js

@@ -8,6 +8,7 @@ import { Textarea } from "@doany-ai/app-core/ui/textarea";
 import { Loader2 } from "lucide-react";
 import { useState } from "react";
 import { calendarLabels } from "../labels.js";
+import { isE164, normalizePhone } from "../phone.js";
 function Question({ field, value, onChange }) {
     const id = `doany-booking-${field.key}`;
     if (field.type === "checkbox") {
@@ -41,9 +42,14 @@ export function AttendeeForm({ fields = [], phoneRequired = false, defaultValues
         onSubmit({
             name: name.trim(),
             ...(email.trim() ? { email: email.trim() } : {}),
-            ...(phone.trim() ? { phone: phone.trim() } : {}),
+            ...(phone.trim() ? { phone: normalizePhone(phone) } : {}),
             answers,
         });
     };
-    return (_jsxs("form", { onSubmit: submit, className: cn("space-y-4", className), children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "doany-attendee-name", children: labels.name }), _jsx(Input, { id: "doany-attendee-name", autoComplete: "name", value: name, onChange: (e) => setName(e.target.value), required: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "doany-attendee-email", children: labels.email }), _jsx(Input, { id: "doany-attendee-email", type: "email", autoComplete: "email", value: email, onChange: (e) => setEmail(e.target.value), required: !phoneRequired && !phone.trim() })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "doany-attendee-phone", children: labels.phone }), _jsx(Input, { id: "doany-attendee-phone", type: "tel", autoComplete: "tel", value: phone, onChange: (e) => setPhone(e.target.value), required: phoneRequired })] }), fields.map((field) => (_jsx(Question, { field: field, value: answers[field.key], onChange: (v) => setAnswers((a) => ({ ...a, [field.key]: v })) }, field.key))), error && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })), _jsxs("div", { className: "flex items-center gap-3 pt-1", children: [secondaryAction, _jsxs(Button, { type: "submit", className: "h-10 flex-1 rounded-full", disabled: busy, children: [busy && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), busy ? labels.booking : (submitLabel ?? labels.confirmBooking)] })] })] }));
+    return (_jsxs("form", { onSubmit: submit, className: cn("space-y-4", className), children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "doany-attendee-name", children: labels.name }), _jsx(Input, { id: "doany-attendee-name", autoComplete: "name", value: name, onChange: (e) => setName(e.target.value), required: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "doany-attendee-email", children: labels.email }), _jsx(Input, { id: "doany-attendee-email", type: "email", autoComplete: "email", value: email, onChange: (e) => setEmail(e.target.value), required: !phoneRequired && !phone.trim() })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "doany-attendee-phone", children: labels.phone }), _jsx(Input, { id: "doany-attendee-phone", type: "tel", autoComplete: "tel", value: phone, onChange: (e) => {
+                            // The platform takes E.164 only: say so before the submit does.
+                            const normalized = normalizePhone(e.target.value);
+                            e.target.setCustomValidity(!normalized || isE164(normalized) ? "" : labels.phoneFormat);
+                            setPhone(e.target.value);
+                        }, required: phoneRequired })] }), fields.map((field) => (_jsx(Question, { field: field, value: answers[field.key], onChange: (v) => setAnswers((a) => ({ ...a, [field.key]: v })) }, field.key))), error && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })), _jsxs("div", { className: "flex items-center gap-3 pt-1", children: [secondaryAction, _jsxs(Button, { type: "submit", className: "h-10 flex-1 rounded-full", disabled: busy, children: [busy && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), busy ? labels.booking : (submitLabel ?? labels.confirmBooking)] })] })] }));
 }

package/dist/components/booking-flow.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import { type CalendarLabels } from "../labels.js";
-import type { BookingResult } from "../types.js";
+import type { BookingFunding, BookingResult } from "../types.js";
 export interface BookingFlowProps {
     /** The service's booking settings id (`BookableService.id`). */
     serviceSettingId: string;
@@ -10,6 +10,8 @@ export interface BookingFlowProps {
     timezone?: string;
     /** For a service at the customer's address: where. */
     address?: string;
+    /** Pay with a package the customer holds (its entitlement) instead of the service's default. */
+    funding?: BookingFunding;
     /**
      * `split` (default): the service's summary in a column beside the steps
      * when the flow is at least 48rem wide, on top of them otherwise (its own
@@ -43,4 +45,4 @@ export interface BookingFlowProps {
  * Book an appointment in one place: the service's variant, a day and a time,
  * who it is for, then the confirmation (or the payment that confirms it).
  */
-export declare function BookingFlow({ serviceSettingId, catalogItemVariantId, timezone: given, address, layout, order, image: givenImage, showDetails, renderPayment, onBooked, children, locale, labels: givenLabels, className, }: BookingFlowProps): import("react").JSX.Element;
+export declare function BookingFlow({ serviceSettingId, catalogItemVariantId, timezone: given, address, funding, layout, order, image: givenImage, showDetails, renderPayment, onBooked, children, locale, labels: givenLabels, className, }: BookingFlowProps): import("react").JSX.Element;

package/dist/components/booking-flow.js

@@ -1,7 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "@doany-ai/app-core/media";
 import { cn } from "@doany-ai/app-core";
 import { useAuth } from "@doany-ai/app-core/auth";
 import { Button } from "@doany-ai/app-core/ui/button";
+import { Input } from "@doany-ai/app-core/ui/input";
+import { Label } from "@doany-ai/app-core/ui/label";
 import { Skeleton } from "@doany-ai/app-core/ui/skeleton";
 import { CalendarCheck, CheckCircle2, Clock, Globe, MapPin, Tag, Users } from "lucide-react";
 import { useState } from "react";
@@ -41,13 +44,13 @@ function Summary({ service, variant, slot, timezone, image, description, locale,
     // column. `stacked` is always the row; `split` is the row until the flow
     // is 48rem wide. (The classes are spelled out: Tailwind finds them by
     // scanning the built file for literal tokens.)
-    return (_jsxs("aside", { className: cn("flex flex-wrap items-start gap-x-8 gap-y-3", !stacked && "[@container(min-width:48rem)]:block [@container(min-width:48rem)]:space-y-4"), children: [_jsxs("div", { className: "flex items-start gap-4", children: [image ? _jsx("img", { src: image, alt: "", className: "h-16 w-16 shrink-0 rounded-xl object-cover" }) : null, _jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "font-heading text-xl font-semibold leading-tight tracking-tight", children: service.item_name }), description ? _jsx("p", { className: cn("line-clamp-2 text-sm text-muted-foreground", !stacked && "[@container(min-width:48rem)]:line-clamp-4"), children: description }) : null] })] }), _jsx("ul", { className: cn("flex flex-wrap gap-x-5 gap-y-1.5 text-sm text-muted-foreground", !stacked && "[@container(min-width:48rem)]:block [@container(min-width:48rem)]:space-y-2.5"), children: rows.map(([Icon, text], i) => text ? (_jsxs("li", { className: cn("flex items-center gap-2", i === 3 && "font-medium text-foreground"), children: [_jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: text })] }, i)) : null) })] }));
+    return (_jsxs("aside", { className: cn("flex flex-wrap items-start gap-x-8 gap-y-3", !stacked && "[@container(min-width:48rem)]:block [@container(min-width:48rem)]:space-y-4"), children: [_jsxs("div", { className: "flex items-start gap-4", children: [image ? _jsx(Image, { src: image, alt: "", className: "h-16 w-16 shrink-0 rounded-xl object-cover" }) : null, _jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "font-heading text-xl font-semibold leading-tight tracking-tight", children: service.item_name }), description ? _jsx("p", { className: cn("line-clamp-2 text-sm text-muted-foreground", !stacked && "[@container(min-width:48rem)]:line-clamp-4"), children: description }) : null] })] }), _jsx("ul", { className: cn("flex flex-wrap gap-x-5 gap-y-1.5 text-sm text-muted-foreground", !stacked && "[@container(min-width:48rem)]:block [@container(min-width:48rem)]:space-y-2.5"), children: rows.map(([Icon, text], i) => text ? (_jsxs("li", { className: cn("flex items-center gap-2", i === 3 && "font-medium text-foreground"), children: [_jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: text })] }, i)) : null) })] }));
 }
 /**
  * Book an appointment in one place: the service's variant, a day and a time,
  * who it is for, then the confirmation (or the payment that confirms it).
  */
-export function BookingFlow({ serviceSettingId, catalogItemVariantId, timezone: given, address, layout = "split", order = "when-first", image: givenImage, showDetails = true, renderPayment, onBooked, children, locale, labels: givenLabels, className, }) {
+export function BookingFlow({ serviceSettingId, catalogItemVariantId, timezone: given, address, funding, layout = "split", order = "when-first", image: givenImage, showDetails = true, renderPayment, onBooked, children, locale, labels: givenLabels, className, }) {
     const labels = calendarLabels(givenLabels);
     const { data: service, isLoading, isError } = useBookableService(serviceSettingId);
     const details = useServiceDetails(showDetails);
@@ -56,6 +59,10 @@ export function BookingFlow({ serviceSettingId, catalogItemVariantId, timezone:
     const [variantId, setVariantId] = useState(catalogItemVariantId ?? null);
     const [slot, setSlot] = useState(null);
     const [attendee, setAttendee] = useState(null);
+    // A service at the customer's address needs one: the site's `address` prop,
+    // else the one the visitor types with their details.
+    const [customerAddress, setCustomerAddress] = useState("");
+    const [addressMissing, setAddressMissing] = useState(false);
     const [step, setStep] = useState(order === "who-first" ? "who" : "when");
     const [result, setResult] = useState(null);
     const book = useBook();
@@ -73,13 +80,16 @@ export function BookingFlow({ serviceSettingId, catalogItemVariantId, timezone:
     const item = details.byItem.get(service.catalog_item_id);
     const image = givenImage === undefined ? item?.image_url : givenImage;
     const description = showDetails ? item?.description : null;
+    const asksAddress = service.location_type === "customer_address" && !address;
+    const bookingAddress = address || (asksAddress ? customerAddress.trim() : "");
     const place = (who, at) => book.mutate({
         service_setting_id: service.id,
         catalog_item_variant_id: variant.id,
         start_at: at.start_at,
         slot_token: at.slot_token,
         attendee: { ...who, timezone },
-        ...(address ? { address } : {}),
+        ...(bookingAddress ? { address: bookingAddress } : {}),
+        ...(funding ? { funding } : {}),
     }, {
         onSuccess: (booked) => {
             setResult(booked);
@@ -100,7 +110,14 @@ export function BookingFlow({ serviceSettingId, catalogItemVariantId, timezone:
         body = (_jsxs("div", { className: "space-y-6", children: [pending ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "rounded-xl border border-border bg-muted/40 p-5", children: [_jsx("h3", { className: "font-heading text-lg font-semibold", children: labels.payToConfirmTitle }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.payToConfirmBody(result.registration?.hold_expires_at ? formatDateTime(result.registration.hold_expires_at, timezone, locale) : "") })] }), renderPayment?.(result)] })) : (_jsxs("div", { className: "flex items-start gap-3 rounded-xl bg-success/10 p-5 text-success", children: [_jsx(CheckCircle2, { className: "mt-0.5 h-5 w-5 shrink-0", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("h3", { className: "font-heading text-lg font-semibold", children: labels.bookedTitle }), _jsx("p", { className: "mt-1 text-sm", children: labels.bookedBody(slot ? formatDateTime(slot.start_at, timezone, locale) : "") })] })] })), children?.(result)] }));
     }
     else if (step === "who") {
-        body = (_jsxs("div", { className: "space-y-5", children: [_jsx("h3", { className: "font-heading text-base font-semibold", children: labels.yourDetails }), _jsx(AttendeeForm, { fields: service.booking_fields, phoneRequired: service.phone_required, defaultValues: { name: user?.full_name ?? "", email: user?.email ?? "", ...(attendee ?? {}) }, onSubmit: (who) => {
+        body = (_jsxs("div", { className: "space-y-5", children: [_jsx("h3", { className: "font-heading text-base font-semibold", children: labels.yourDetails }), asksAddress ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "doany-booking-address", children: labels.yourAddress }), _jsx(Input, { id: "doany-booking-address", autoComplete: "street-address", value: customerAddress, onChange: (e) => {
+                                setCustomerAddress(e.target.value);
+                                setAddressMissing(false);
+                            }, "aria-invalid": addressMissing || undefined, required: true }), addressMissing ? (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: labels.addressRequired })) : null] })) : null, _jsx(AttendeeForm, { fields: service.booking_fields, phoneRequired: service.phone_required, defaultValues: { name: user?.full_name ?? "", email: user?.email ?? "", ...(attendee ?? {}) }, onSubmit: (who) => {
+                        if (asksAddress && !customerAddress.trim()) {
+                            setAddressMissing(true);
+                            return;
+                        }
                         setAttendee(who);
                         if (order === "who-first")
                             setStep("when");

package/dist/components/booking-status.js

@@ -4,8 +4,9 @@ import { Button } from "@doany-ai/app-core/ui/button";
 import { Skeleton } from "@doany-ai/app-core/ui/skeleton";
 import { CalendarCheck, Clock, Loader2, MapPin, XCircle } from "lucide-react";
 import { useState } from "react";
+import { useBookingAccessToken } from "../booking-link.js";
 import { browserTimezone, formatDateTime } from "../format.js";
-import { useCancelRegistration, useRegistration } from "../hooks.js";
+import { operationSettled, useCalendarOperation, useCancelRegistration, useRegistration } from "../hooks.js";
 import { calendarLabels } from "../labels.js";
 const statusLabel = (status, labels) => status === "confirmed" ? labels.statusConfirmed : status === "pending_payment" ? labels.statusPendingPayment : status === "canceled" ? labels.statusCanceled : labels.statusExpired;
 function where(booking, labels) {
@@ -21,8 +22,13 @@ function where(booking, labels) {
 export function BookingStatus({ registrationId, accessToken, timezone: given, allowCancel = true, children, locale, labels: givenLabels, className }) {
     const labels = calendarLabels(givenLabels);
     const timezone = given ?? browserTimezone();
-    const { data, isLoading, isError, error, refetch } = useRegistration(registrationId, { accessToken });
+    // The token the page opened with: the given one, the link's `#t=`, or this
+    // browser session's. The detail, the cancel and its operation all use it.
+    const token = useBookingAccessToken(registrationId, accessToken);
+    const { data, isLoading, isError, error, refetch } = useRegistration(registrationId, { accessToken: token });
     const cancel = useCancelRegistration();
+    const operationId = cancel.data && "operation_id" in cancel.data ? cancel.data.operation_id : null;
+    const operation = useCalendarOperation(operationId, { registrationId, accessToken: token });
     const [confirming, setConfirming] = useState(false);
     if (isLoading) {
         return (_jsxs("div", { className: cn("space-y-3", className), "aria-busy": "true", children: [_jsx(Skeleton, { className: "h-6 w-1/3" }), _jsx(Skeleton, { className: "h-24 w-full rounded-2xl" })] }));
@@ -38,6 +44,10 @@ export function BookingStatus({ registrationId, accessToken, timezone: given, al
     const Icon = status === "confirmed" ? CalendarCheck : status === "pending_payment" ? Clock : XCircle;
     const tone = status === "confirmed" ? "bg-success/10 text-success" : status === "pending_payment" ? "bg-muted text-muted-foreground" : "bg-destructive/10 text-destructive";
     const place = where(booking, labels);
-    const processing = cancel.data && "operation_id" in cancel.data;
-    return (_jsxs("section", { className: cn("space-y-5", className), children: [_jsxs("div", { className: cn("flex items-center gap-3 rounded-2xl p-4", tone), children: [_jsx(Icon, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }), _jsx("p", { className: "font-semibold", children: statusLabel(status, labels) })] }), _jsxs("dl", { className: "space-y-3 rounded-2xl border border-border bg-card p-5 text-sm", children: [_jsxs("div", { children: [_jsx("dt", { className: "text-muted-foreground", children: booking.item_name }), _jsx("dd", { className: "font-heading text-lg font-semibold", children: formatDateTime(booking.start_at, timezone, locale) })] }), _jsx("div", { className: "text-muted-foreground", children: booking.variant_name }), place && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { children: place })] }))] }), canCancel && (_jsxs("div", { className: "space-y-3", children: [processing ? (_jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }), labels.cancelProcessing] })) : confirming ? (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-sm", children: labels.cancelConfirm }), _jsx(Button, { variant: "destructive", size: "sm", className: "rounded-full", disabled: cancel.isPending, onClick: () => cancel.mutate({ registrationId, accessToken, registration_version: registration.version, booking_version: booking.version }, { onSettled: () => setConfirming(false) }), children: cancel.isPending ? labels.canceling : labels.cancelBooking }), _jsx(Button, { variant: "outline", size: "sm", className: "rounded-full", onClick: () => setConfirming(false), disabled: cancel.isPending, children: labels.keepBooking })] })) : (_jsx(Button, { variant: "outline", size: "sm", className: "rounded-full", onClick: () => setConfirming(true), children: labels.cancelBooking })), cancel.isError && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: givenLabels?.cancelFailed ?? (cancel.error?.message || labels.cancelFailed) }))] })), children?.(status, data)] }));
+    const meetingUrl = booking.location_type === "online" ? (booking.meeting?.meeting_url ?? null) : null;
+    // A cancel that waits on a payment: processing until its operation settles.
+    const settled = operationSettled(operation.data);
+    const processing = Boolean(operationId) && !settled;
+    const operationFailed = settled && operation.data?.status !== "succeeded";
+    return (_jsxs("section", { className: cn("space-y-5", className), children: [_jsxs("div", { className: cn("flex items-center gap-3 rounded-2xl p-4", tone), children: [_jsx(Icon, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }), _jsx("p", { className: "font-semibold", children: statusLabel(status, labels) })] }), _jsxs("dl", { className: "space-y-3 rounded-2xl border border-border bg-card p-5 text-sm", children: [_jsxs("div", { children: [_jsx("dt", { className: "text-muted-foreground", children: booking.item_name }), _jsx("dd", { className: "font-heading text-lg font-semibold", children: formatDateTime(booking.start_at, timezone, locale) })] }), _jsx("div", { className: "text-muted-foreground", children: booking.variant_name }), place && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { children: place })] })), meetingUrl && live && (_jsx("div", { children: _jsx("a", { href: meetingUrl, target: "_blank", rel: "noreferrer", className: "font-medium underline underline-offset-4", children: labels.joinMeeting }) }))] }), canCancel && (_jsxs("div", { className: "space-y-3", children: [processing ? (_jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }), labels.cancelProcessing] })) : confirming ? (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-sm", children: labels.cancelConfirm }), _jsx(Button, { variant: "destructive", size: "sm", className: "rounded-full", disabled: cancel.isPending, onClick: () => cancel.mutate({ registrationId, accessToken: token, registration_version: registration.version, booking_version: booking.version }, { onSettled: () => setConfirming(false) }), children: cancel.isPending ? labels.canceling : labels.cancelBooking }), _jsx(Button, { variant: "outline", size: "sm", className: "rounded-full", onClick: () => setConfirming(false), disabled: cancel.isPending, children: labels.keepBooking })] })) : (_jsx(Button, { variant: "outline", size: "sm", className: "rounded-full", onClick: () => setConfirming(true), children: labels.cancelBooking })), (cancel.isError || operationFailed || operation.isError) && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: givenLabels?.cancelFailed ?? (cancel.error?.message || labels.cancelFailed) }))] })), children?.(status, data)] }));
 }

package/dist/components/package-list.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from "@doany-ai/app-core/media";
 import { cn } from "@doany-ai/app-core";
 import { Button } from "@doany-ai/app-core/ui/button";
 import { Skeleton } from "@doany-ai/app-core/ui/skeleton";
@@ -14,7 +15,7 @@ export function PackageCard({ item, renderBuy, onBuy, footer, highlighted = fals
     const labels = calendarLabels(given);
     const variant = packageVariant(item);
     const price = variant ? variantPriceLabel(variant, locale, { free: labels.free }) : null;
-    return (_jsxs("article", { className: cn("flex flex-col gap-4 rounded-2xl border bg-card p-6 text-card-foreground shadow-soft transition-shadow hover:shadow-card", highlighted ? "border-primary ring-1 ring-primary" : "border-border", className), children: [item.image_url ? _jsx("img", { src: item.image_url, alt: "", className: "aspect-[3/2] w-full rounded-xl object-cover" }) : null, _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "font-heading text-lg font-semibold leading-tight", children: item.name }), variant && variant.name !== item.name ? _jsx("p", { className: "text-sm text-muted-foreground", children: variant.name }) : null] }), price ? _jsx("p", { className: "font-heading text-3xl font-semibold tracking-tight", children: price }) : null, item.description ? _jsx("p", { className: "text-sm text-muted-foreground", children: item.description }) : null, footer, _jsx("div", { className: "mt-auto pt-2", children: variant
+    return (_jsxs("article", { className: cn("flex flex-col gap-4 rounded-2xl border bg-card p-6 text-card-foreground shadow-soft transition-shadow hover:shadow-card", highlighted ? "border-primary ring-1 ring-primary" : "border-border", className), children: [item.image_url ? _jsx(Image, { src: item.image_url, alt: "", className: "aspect-[3/2] w-full rounded-xl object-cover" }) : null, _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "font-heading text-lg font-semibold leading-tight", children: item.name }), variant && variant.name !== item.name ? _jsx("p", { className: "text-sm text-muted-foreground", children: variant.name }) : null] }), price ? _jsx("p", { className: "font-heading text-3xl font-semibold tracking-tight", children: price }) : null, item.description ? _jsx("p", { className: "text-sm text-muted-foreground", children: item.description }) : null, footer, _jsx("div", { className: "mt-auto pt-2", children: variant
                     ? (renderBuy?.(item, variant) ?? (_jsx(Button, { className: "h-11 w-full rounded-lg font-semibold", onClick: () => onBuy?.(item, variant), children: labels.buy })))
                     : null })] }));
 }
@@ -23,7 +24,7 @@ export function PackageList({ category, limit, highlight, footerFor, renderItem,
     const labels = calendarLabels(card.labels);
     const { packages, isLoading, isError, error, refetch } = usePackages({ category, limit });
     if (isLoading) {
-        return (_jsx("div", { className: cn("grid gap-5 sm:grid-cols-2 lg:grid-cols-3", className), "aria-busy": "true", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-64 rounded-2xl" }, i))) }));
+        return (_jsx("div", { className: cn("grid gap-5 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]", className), "aria-busy": "true", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-64 rounded-2xl" }, i))) }));
     }
     if (isError) {
         return (_jsxs("div", { role: "alert", className: "space-y-3 py-12 text-center text-sm text-destructive", children: [_jsx("p", { children: card.labels?.loadError ?? (error?.message || labels.loadError) }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => refetch(), children: labels.tryAgain })] }));
@@ -31,5 +32,5 @@ export function PackageList({ category, limit, highlight, footerFor, renderItem,
     if (!packages.length) {
         return _jsx(_Fragment, { children: empty ?? _jsx("p", { className: "rounded-2xl border border-dashed border-border py-14 text-center text-sm text-muted-foreground", children: labels.noPackages }) });
     }
-    return (_jsx("div", { className: cn("grid gap-5 sm:grid-cols-2 lg:grid-cols-3", className), children: packages.map((item) => (renderItem ? renderItem(item) : _jsx(PackageCard, { item: item, highlighted: highlight?.(item), footer: footerFor?.(item), ...card }, item.id))) }));
+    return (_jsx("div", { className: cn("grid gap-5 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]", className), children: packages.map((item) => (renderItem ? renderItem(item) : _jsx(PackageCard, { item: item, highlighted: highlight?.(item), footer: footerFor?.(item), ...card }, item.id))) }));
 }

package/dist/components/service-list.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from "@doany-ai/app-core/media";
 import { cn } from "@doany-ai/app-core";
 import { Button } from "@doany-ai/app-core/ui/button";
 import { Skeleton } from "@doany-ai/app-core/ui/skeleton";
@@ -19,9 +20,9 @@ export function ServiceCard({ service, details, href, onSelect, renderLink, foot
     const action = href ? (renderLink ? (renderLink({ href, className: "inline-flex", children: button })) : (_jsx("a", { href: href, className: "inline-flex", children: button }))) : (_jsx(Button, { variant: "secondary", className: "rounded-lg bg-primary/10 px-5 font-semibold text-primary hover:bg-primary/15", onClick: () => onSelect?.(service), children: cta }));
     const image = details?.image_url;
     if (shape === "row") {
-        return (_jsxs("article", { className: cn("flex gap-4 rounded-2xl border border-border bg-card p-4 text-card-foreground shadow-soft transition-shadow hover:shadow-card", className), children: [image ? _jsx("img", { src: image, alt: "", className: "h-24 w-24 shrink-0 rounded-xl object-cover sm:h-28 sm:w-28" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h3", { className: "font-heading text-lg font-semibold leading-tight", children: service.item_name }), details?.description ? _jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: details.description }) : null, footer, _jsxs("div", { className: "mt-auto flex flex-wrap items-center justify-between gap-3 pt-1", children: [_jsx(Meta, { service: service, locale: locale, labels: labels }), action] })] })] }));
+        return (_jsxs("article", { className: cn("flex gap-4 rounded-2xl border border-border bg-card p-4 text-card-foreground shadow-soft transition-shadow hover:shadow-card", className), children: [image ? _jsx(Image, { src: image, alt: "", className: "h-24 w-24 shrink-0 rounded-xl object-cover sm:h-28 sm:w-28" }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h3", { className: "font-heading text-lg font-semibold leading-tight", children: service.item_name }), details?.description ? _jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: details.description }) : null, footer, _jsxs("div", { className: "mt-auto flex flex-wrap items-center justify-between gap-3 pt-1", children: [_jsx(Meta, { service: service, locale: locale, labels: labels }), action] })] })] }));
     }
-    return (_jsxs("article", { className: cn("flex flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-soft transition-shadow hover:shadow-card", className), children: [image ? (_jsx("div", { className: "aspect-[4/3] overflow-hidden bg-muted", children: _jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" }) })) : null, _jsxs("div", { className: "flex flex-1 flex-col gap-3 p-5", children: [_jsx("h3", { className: "font-heading text-lg font-semibold leading-tight", children: service.item_name }), details?.description ? _jsx("p", { className: "line-clamp-3 text-sm text-muted-foreground", children: details.description }) : null, footer, _jsxs("div", { className: "mt-auto flex flex-wrap items-center justify-between gap-3 pt-2", children: [_jsx(Meta, { service: service, locale: locale, labels: labels }), action] })] })] }));
+    return (_jsxs("article", { className: cn("flex flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-soft transition-shadow hover:shadow-card", className), children: [image ? (_jsx("div", { className: "aspect-[4/3] overflow-hidden bg-muted", children: _jsx(Image, { src: image, alt: "", className: "h-full w-full object-cover" }) })) : null, _jsxs("div", { className: "flex flex-1 flex-col gap-3 p-5", children: [_jsx("h3", { className: "font-heading text-lg font-semibold leading-tight", children: service.item_name }), details?.description ? _jsx("p", { className: "line-clamp-3 text-sm text-muted-foreground", children: details.description }) : null, footer, _jsxs("div", { className: "mt-auto flex flex-wrap items-center justify-between gap-3 pt-2", children: [_jsx(Meta, { service: service, locale: locale, labels: labels }), action] })] })] }));
 }
 const UNCATEGORIZED = "";
 /** Every service a visitor can book, as cards, with a Load more when there are more. */
@@ -46,7 +47,7 @@ export function ServiceList({ params, hrefFor, renderItem, empty, variant = "gri
         return [...map.entries()].sort(([a], [b]) => (a === UNCATEGORIZED ? 1 : b === UNCATEGORIZED ? -1 : a.localeCompare(b)));
     }, [variant, services, details.byItem, query]);
     if (isLoading) {
-        return (_jsx("div", { className: cn(variant === "menu" ? "space-y-3" : "grid gap-5 sm:grid-cols-2 lg:grid-cols-3", className), "aria-busy": "true", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: variant === "menu" ? "h-32 rounded-2xl" : "h-48 rounded-2xl" }, i))) }));
+        return (_jsx("div", { className: cn(variant === "menu" ? "space-y-3" : "grid gap-5 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]", className), "aria-busy": "true", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: variant === "menu" ? "h-32 rounded-2xl" : "h-48 rounded-2xl" }, i))) }));
     }
     if (isError) {
         return (_jsxs("div", { role: "alert", className: "space-y-3 py-12 text-center text-sm text-destructive", children: [_jsx("p", { children: card.labels?.loadError ?? (error?.message || labels.loadError) }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => refetch(), children: labels.tryAgain })] }));
@@ -62,7 +63,7 @@ export function ServiceList({ params, hrefFor, renderItem, empty, variant = "gri
         return (_jsxs("div", { className: cn("space-y-6", className), children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("label", { className: "relative block max-w-md", children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }), _jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: labels.searchServices, "aria-label": labels.searchServices, className: "h-11 w-full rounded-xl border border-input bg-background pl-10 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring" })] }), categories.length > 1 && (_jsx("div", { role: "tablist", className: "-mb-px flex gap-6 overflow-x-auto border-b border-border", children: [null, ...categories].map((name) => {
                                 const on = name === category;
                                 return (_jsx("button", { type: "button", role: "tab", "aria-selected": on, onClick: () => setCategory(name), className: cn("whitespace-nowrap border-b-2 px-1 pb-3 text-sm font-medium transition-colors", on ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"), children: name === null ? labels.allServices : name || labels.options }, name ?? "*"));
-                            }) }))] }), !shown.length ? (_jsx("p", { className: "rounded-2xl border border-dashed border-border py-14 text-center text-sm text-muted-foreground", children: labels.noMatches })) : (shown.map(([name, list]) => (_jsxs("section", { className: "space-y-3", children: [name ? _jsx("h3", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: name }) : null, _jsx("div", { className: "grid gap-4 lg:grid-cols-2", children: list.map((service) => cardOf(service, "row")) })] }, name || "*")))), more] }));
+                            }) }))] }), !shown.length ? (_jsx("p", { className: "rounded-2xl border border-dashed border-border py-14 text-center text-sm text-muted-foreground", children: labels.noMatches })) : (shown.map(([name, list]) => (_jsxs("section", { className: "space-y-3", children: [name ? _jsx("h3", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: name }) : null, _jsx("div", { className: "grid gap-4 grid-cols-[repeat(auto-fill,minmax(22rem,1fr))]", children: list.map((service) => cardOf(service, "row")) })] }, name || "*")))), more] }));
     }
-    return (_jsxs("div", { className: cn("space-y-6", className), children: [_jsx("div", { className: "grid gap-5 sm:grid-cols-2 lg:grid-cols-3", children: services.map((service) => cardOf(service, "tile")) }), more] }));
+    return (_jsxs("div", { className: cn("space-y-6", className), children: [_jsx("div", { className: "grid gap-5 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]", children: services.map((service) => cardOf(service, "tile")) }), more] }));
 }

package/dist/components/session-calendar.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import { type CalendarLabels } from "../labels.js";
-import type { BookingResult } from "../types.js";
+import type { BookingResult, BookingFunding } from "../types.js";
 export interface SessionCalendarProps {
     /** Only this class's sessions. */
     serviceSettingId?: string;
@@ -8,6 +8,8 @@ export interface SessionCalendarProps {
     timezone?: string;
     /** A session paid online: the payment, given the registration. */
     renderPayment?: (result: BookingResult) => ReactNode;
+    /** Pay with a package the customer holds (its entitlement) instead of the ticket's default. */
+    funding?: BookingFunding;
     onRegistered?: (result: BookingResult) => void;
     locale?: string;
     labels?: Partial<CalendarLabels>;
@@ -18,4 +20,4 @@ export interface SessionCalendarProps {
  * calendar; the chosen day's sessions, with their seats, are listed beside
  * it, each with Register.
  */
-export declare function SessionCalendar({ serviceSettingId, timezone: given, renderPayment, onRegistered, locale, labels: givenLabels, className }: SessionCalendarProps): import("react").JSX.Element;
+export declare function SessionCalendar({ serviceSettingId, timezone: given, renderPayment, onRegistered, funding, locale, labels: givenLabels, className }: SessionCalendarProps): import("react").JSX.Element;

package/dist/components/session-calendar.js

@@ -17,7 +17,7 @@ import { RegisterDialog, sessionIsFull } from "./session-list.js";
  * calendar; the chosen day's sessions, with their seats, are listed beside
  * it, each with Register.
  */
-export function SessionCalendar({ serviceSettingId, timezone: given, renderPayment, onRegistered, locale, labels: givenLabels, className }) {
+export function SessionCalendar({ serviceSettingId, timezone: given, renderPayment, onRegistered, funding, locale, labels: givenLabels, className }) {
     const labels = calendarLabels(givenLabels);
     const timezone = given ?? browserTimezone();
     const today = useMemo(() => new Date(), []);
@@ -46,7 +46,7 @@ export function SessionCalendar({ serviceSettingId, timezone: given, renderPayme
     const chosen = day ? byDay.get(dayKey(day)) ?? [] : null;
     return (_jsxs("div", { className: cn("grid gap-6 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-card lg:grid-cols-[auto_minmax(0,1fr)]", className), children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Calendar, { mode: "single", month: month, onMonthChange: setMonth, selected: day, onSelect: (picked) => setDay(picked ?? undefined), disabled: { before: today }, modifiers: { hasSessions: marked }, modifiersClassNames: { hasSessions: "after:absolute after:bottom-1 after:left-1/2 after:h-1 after:w-1 after:-translate-x-1/2 after:rounded-full after:bg-primary aria-selected:after:bg-primary-foreground" }, className: "w-fit p-0", classNames: { ...calendarClassNames, day: `${calendarClassNames.day} relative` } }), isLoading ? _jsx(Skeleton, { className: "h-4 w-32" }) : null] }), _jsx("div", { className: "space-y-3 lg:min-h-72", children: isError ? (_jsxs("div", { role: "alert", className: "space-y-3 py-10 text-center text-sm text-destructive", children: [_jsx("p", { children: givenLabels?.loadError ?? (error?.message || labels.loadError) }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => refetch(), children: labels.tryAgain })] })) : !chosen ? (_jsx("p", { className: "rounded-xl border border-dashed border-border py-10 text-center text-sm text-muted-foreground", children: labels.pickDay })) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: "font-heading text-base font-semibold", children: formatDay(new Date(day.getFullYear(), day.getMonth(), day.getDate(), 12).toISOString(), "UTC", locale) }), !chosen.length ? (_jsx("p", { className: "rounded-xl border border-dashed border-border py-10 text-center text-sm text-muted-foreground", children: labels.noSessionsOnDay })) : (_jsx("ul", { className: "space-y-2", children: chosen.map((session) => {
                                 const seats = session.remaining_seats ?? 0;
-                                const full = sessionIsFull(session);
+                                const full = sessionIsFull(session, funding);
                                 return (_jsxs("li", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-border px-4 py-3", children: [_jsx("span", { className: "w-20 font-semibold tabular-nums", children: formatTime(session.start_at, timezone, locale) }), _jsxs("span", { className: "min-w-32 flex-1", children: [_jsx("span", { className: "block font-medium", children: session.item_name }), _jsx("span", { className: "block text-sm text-muted-foreground", children: session.variant_name })] }), _jsxs("span", { className: cn("inline-flex items-center gap-1.5 text-sm", full ? "text-muted-foreground" : "text-foreground"), children: [_jsx(Users, { className: "h-4 w-4", "aria-hidden": "true" }), full ? labels.full : labels.seatsLeft(seats)] }), _jsx(Button, { className: "rounded-lg", size: "sm", disabled: full, onClick: () => setOpen(session), children: labels.register })] }, session.id));
-                            }) }))] })) }), open && _jsx(RegisterDialog, { session: open, timezone: timezone, renderPayment: renderPayment, onRegistered: onRegistered, locale: locale, labels: givenLabels, onClose: () => setOpen(null) })] }));
+                            }) }))] })) }), open && _jsx(RegisterDialog, { session: open, timezone: timezone, renderPayment: renderPayment, funding: funding, onRegistered: onRegistered, locale: locale, labels: givenLabels, onClose: () => setOpen(null) })] }));
 }

package/dist/components/session-list.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from "react";
 import { type SessionsParams } from "../hooks.js";
 import { type CalendarLabels } from "../labels.js";
-import type { Booking, BookingResult } from "../types.js";
+import type { Booking, BookingFunding, BookingResult } from "../types.js";
 export interface SessionListProps {
     /** `service_setting_id` for one class, `from` / `to` for a window, page size (`limit`). */
     params?: SessionsParams;
@@ -22,6 +22,8 @@ export interface SessionListProps {
     maxWeeks?: number;
     /** A seat paid online: what to render while the payment is due (see `BookingFlow`). */
     renderPayment?: (result: BookingResult) => ReactNode;
+    /** Pay with a package the customer holds (its entitlement) instead of the ticket's default. */
+    funding?: BookingFunding;
     onRegistered?: (result: BookingResult) => void;
     /** Shown when there are no sessions. Default: the `noSessions` label. */
     empty?: ReactNode;
@@ -30,17 +32,19 @@ export interface SessionListProps {
     className?: string;
 }
 /** No seat can be taken: no open ticket, no seats left, or registration closed. */
-export declare function sessionIsFull(session: Booking): boolean;
+export declare function sessionIsFull(session: Booking, funding?: BookingFunding): boolean;
 export interface RegisterDialogProps {
     session: Booking;
     timezone: string;
     renderPayment?: (result: BookingResult) => ReactNode;
     onRegistered?: (result: BookingResult) => void;
+    /** Pay with a package the customer holds (its entitlement) instead of the ticket's default. */
+    funding?: BookingFunding;
     locale?: string;
     labels?: Partial<CalendarLabels>;
     onClose: () => void;
 }
 /** Take a seat in one session: the ticket, who it is for, then the confirmation or the payment. */
-export declare function RegisterDialog({ session, timezone, renderPayment, onRegistered, locale, labels: given, onClose }: RegisterDialogProps): import("react").JSX.Element;
+export declare function RegisterDialog({ session, timezone, renderPayment, onRegistered, funding, locale, labels: given, onClose }: RegisterDialogProps): import("react").JSX.Element;
 /** Upcoming class sessions by day, each with its seats and a Register button. */
-export declare function SessionList({ params, timezone: given, variant, paging, maxWeeks, renderPayment, onRegistered, empty, locale, labels: givenLabels, className, }: SessionListProps): import("react").JSX.Element;
+export declare function SessionList({ params, timezone: given, variant, paging, maxWeeks, renderPayment, onRegistered, funding, empty, locale, labels: givenLabels, className, }: SessionListProps): import("react").JSX.Element;

package/dist/components/session-list.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from "@doany-ai/app-core/media";
 import { cn } from "@doany-ai/app-core";
 import { useAuth } from "@doany-ai/app-core/auth";
 import { Button } from "@doany-ai/app-core/ui/button";
@@ -17,18 +18,19 @@ function messageOf(cause, labels, given) {
         return labels.rateLimited;
     return given?.bookingFailed ?? (message || labels.bookingFailed);
 }
-function openVariants(session) {
-    return (session.allowed_variants ?? []).filter((v) => v.is_active && v.registration_status === "open");
+/** The tickets a visitor can take; with a package, the ones open to a package holder too. */
+function openVariants(session, funding) {
+    return (session.allowed_variants ?? []).filter((v) => v.is_active && (v.registration_status === "open" || (Boolean(funding) && v.package_registration_status === "open")));
 }
 /** No seat can be taken: no open ticket, no seats left, or registration closed. */
-export function sessionIsFull(session) {
-    return !openVariants(session).length || (session.remaining_seats ?? 0) <= 0 || !session.allowed_actions.includes("create_registration");
+export function sessionIsFull(session, funding) {
+    return !openVariants(session, funding).length || (session.remaining_seats ?? 0) <= 0 || !session.allowed_actions.includes("create_registration");
 }
 /** Take a seat in one session: the ticket, who it is for, then the confirmation or the payment. */
-export function RegisterDialog({ session, timezone, renderPayment, onRegistered, locale, labels: given, onClose }) {
+export function RegisterDialog({ session, timezone, renderPayment, onRegistered, funding, locale, labels: given, onClose }) {
     const labels = calendarLabels(given);
     const { user } = useAuth();
-    const tickets = openVariants(session);
+    const tickets = openVariants(session, funding);
     const [ticket, setTicket] = useState(tickets.find((t) => t.catalog_item_variant_id === session.catalog_item_variant_id) ?? tickets[0] ?? null);
     const [result, setResult] = useState(null);
     const register = useRegister();
@@ -37,6 +39,7 @@ export function RegisterDialog({ session, timezone, renderPayment, onRegistered,
             bookingId: session.id,
             attendee: { ...attendee, timezone },
             ...(ticket ? { catalog_item_variant_id: ticket.catalog_item_variant_id } : {}),
+            ...(funding ? { funding } : {}),
             expected: {
                 booking_version: session.version,
                 payment_requirement: ticket?.payment_requirement ?? session.payment_requirement,
@@ -58,17 +61,17 @@ export function RegisterDialog({ session, timezone, renderPayment, onRegistered,
                             }) })), _jsx(AttendeeForm, { fields: session.booking_fields_snapshot, phoneRequired: session.phone_required, defaultValues: { name: user?.full_name ?? "", email: user?.email ?? "" }, onSubmit: submit, submitLabel: labels.register, busy: register.isPending, error: register.isError ? messageOf(register.error, labels, given) : null, labels: given })] }))] }) }));
 }
 /** How many of the seats are gone, as a bar, with the count beside it. */
-function Seats({ session, labels }) {
+function Seats({ session, labels, funding }) {
     const capacity = session.capacity ?? 0;
     const left = session.remaining_seats ?? 0;
-    const full = sessionIsFull(session);
+    const full = sessionIsFull(session, funding);
     const taken = capacity ? Math.min(1, Math.max(0, (capacity - left) / capacity)) : 0;
     const few = !full && left <= 3;
     return (_jsxs("div", { className: "w-32 space-y-1.5", children: [_jsxs("p", { className: cn("flex items-center gap-1.5 text-xs", full ? "text-muted-foreground" : few ? "font-semibold text-destructive" : "text-muted-foreground"), children: [_jsx(Users, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), full ? labels.full : few ? labels.onlyLeft(left) : capacity ? labels.spotsOf(left, capacity) : labels.seatsLeft(left)] }), _jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", "aria-hidden": "true", children: _jsx("div", { className: cn("h-full rounded-full", full ? "bg-destructive/60" : "bg-primary"), style: { width: `${taken * 100}%` } }) })] }));
 }
 const minutesBetween = (a, b) => Math.round((new Date(b).getTime() - new Date(a).getTime()) / 60000);
 /** Upcoming class sessions by day, each with its seats and a Register button. */
-export function SessionList({ params, timezone: given, variant = "compact", paging = "all", maxWeeks = 8, renderPayment, onRegistered, empty, locale, labels: givenLabels, className, }) {
+export function SessionList({ params, timezone: given, variant = "compact", paging = "all", maxWeeks = 8, renderPayment, onRegistered, funding, empty, locale, labels: givenLabels, className, }) {
     const labels = calendarLabels(givenLabels);
     const timezone = given ?? browserTimezone();
     const detailed = variant === "detailed";
@@ -119,18 +122,18 @@ export function SessionList({ params, timezone: given, variant = "compact", pagi
                 const parts = formatDayParts(list[0].start_at, timezone, locale);
                 return (_jsxs("section", { className: "grid gap-4 md:grid-cols-[5.5rem_1fr] md:gap-8", "aria-label": `${parts.weekday} ${parts.day} ${parts.month}`, children: [_jsxs("div", { className: "flex items-baseline gap-2 md:sticky md:top-24 md:block md:self-start", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-primary", children: parts.weekday }), _jsx("p", { className: "font-heading text-3xl font-semibold leading-none md:mt-1 md:text-5xl", children: parts.day }), _jsx("p", { className: "text-sm text-muted-foreground md:mt-1.5", children: parts.month })] }), _jsx("ul", { className: "divide-y divide-border overflow-hidden rounded-3xl border border-border bg-card shadow-soft", children: list.map((session) => {
                                 const detail = detailOf(session);
-                                const full = sessionIsFull(session);
+                                const full = sessionIsFull(session, funding);
                                 const price = variantPriceLabel({ price_amount: session.price_amount, currency: session.currency }, locale, { free: labels.free });
-                                return (_jsxs("li", { className: "grid grid-cols-[5rem_1fr] items-center gap-x-4 gap-y-3 p-4 sm:grid-cols-[5.5rem_3.5rem_1fr_auto] sm:gap-x-5 sm:px-5", children: [_jsxs("div", { children: [_jsx("p", { className: "font-heading text-lg font-semibold leading-tight tabular-nums", children: formatTime(session.start_at, timezone, locale) }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatDuration(minutesBetween(session.start_at, session.end_at)) })] }), detail?.image_url ? (_jsx("img", { src: detail.image_url, alt: "", className: "hidden h-14 w-14 rounded-2xl object-cover sm:block" })) : (_jsx("span", { className: "hidden h-14 w-14 rounded-2xl bg-muted sm:block", "aria-hidden": "true" })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold", children: session.item_name }), detail?.description ? _jsx("p", { className: "truncate text-sm text-muted-foreground", children: detail.description }) : null, _jsxs("p", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [_jsxs("span", { className: "rounded-full bg-muted px-2.5 py-0.5 font-medium text-foreground", children: [session.variant_name, price ? ` · ${price}` : ""] }), session.address ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MapPin, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), session.address] })) : null] })] }), _jsxs("div", { className: "col-span-2 flex items-center justify-between gap-4 border-t border-border pt-3 sm:col-span-1 sm:flex-col sm:items-end sm:border-0 sm:pt-0", children: [_jsx(Seats, { session: session, labels: labels }), _jsx(Button, { className: "h-10 rounded-full px-5 font-semibold", disabled: full, onClick: () => setOpen(session), children: full ? labels.full : labels.register })] })] }, session.id));
+                                return (_jsxs("li", { className: "grid grid-cols-[5rem_1fr] items-center gap-x-4 gap-y-3 p-4 sm:grid-cols-[5.5rem_3.5rem_1fr_auto] sm:gap-x-5 sm:px-5", children: [_jsxs("div", { children: [_jsx("p", { className: "font-heading text-lg font-semibold leading-tight tabular-nums", children: formatTime(session.start_at, timezone, locale) }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatDuration(minutesBetween(session.start_at, session.end_at)) })] }), detail?.image_url ? (_jsx(Image, { src: detail.image_url, alt: "", className: "hidden h-14 w-14 rounded-2xl object-cover sm:block" })) : (_jsx("span", { className: "hidden h-14 w-14 rounded-2xl bg-muted sm:block", "aria-hidden": "true" })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold", children: session.item_name }), detail?.description ? _jsx("p", { className: "truncate text-sm text-muted-foreground", children: detail.description }) : null, _jsxs("p", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [_jsxs("span", { className: "rounded-full bg-muted px-2.5 py-0.5 font-medium text-foreground", children: [session.variant_name, price ? ` · ${price}` : ""] }), session.address ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MapPin, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), session.address] })) : null] })] }), _jsxs("div", { className: "col-span-2 flex items-center justify-between gap-4 border-t border-border pt-3 sm:col-span-1 sm:flex-col sm:items-end sm:border-0 sm:pt-0", children: [_jsx(Seats, { session: session, labels: labels, funding: funding }), _jsx(Button, { className: "h-10 rounded-full px-5 font-semibold", disabled: full, onClick: () => setOpen(session), children: full ? labels.full : labels.register })] })] }, session.id));
                             }) })] }, key));
             }) }));
     }
     else {
         body = (_jsx("div", { className: "space-y-8", children: days.map(([day, list]) => (_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "font-heading text-base font-semibold", children: day }), _jsx("ul", { className: "divide-y divide-border overflow-hidden rounded-2xl border border-border bg-card shadow-soft", children: list.map((session) => {
                             const seats = session.remaining_seats ?? 0;
-                            const full = sessionIsFull(session);
+                            const full = sessionIsFull(session, funding);
                             return (_jsxs("li", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-4", children: [_jsx("span", { className: "w-24 font-semibold tabular-nums", children: formatTime(session.start_at, timezone, locale) }), _jsxs("span", { className: "min-w-40 flex-1", children: [_jsx("span", { className: "block font-medium", children: session.item_name }), _jsx("span", { className: "block text-sm text-muted-foreground", children: session.variant_name })] }), _jsxs("span", { className: cn("inline-flex items-center gap-1.5 text-sm", full ? "text-muted-foreground" : "text-foreground"), children: [_jsx(Users, { className: "h-4 w-4", "aria-hidden": "true" }), full ? labels.full : labels.seatsLeft(seats)] }), _jsx(Button, { className: "rounded-lg", size: "sm", disabled: full, onClick: () => setOpen(session), children: labels.register })] }, session.id));
                         }) })] }, day))) }));
     }
-    return (_jsxs("div", { className: cn("space-y-6", className), children: [weekBar, body, hasNextPage && !isLoading && !isError && (_jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "outline", className: "min-w-32 rounded-lg", onClick: () => fetchNextPage(), disabled: isFetchingNextPage, children: isFetchingNextPage ? labels.loadingMore : labels.loadMore }) })), open && _jsx(RegisterDialog, { session: open, timezone: timezone, renderPayment: renderPayment, onRegistered: onRegistered, locale: locale, labels: givenLabels, onClose: () => setOpen(null) })] }));
+    return (_jsxs("div", { className: cn("space-y-6", className), children: [weekBar, body, hasNextPage && !isLoading && !isError && (_jsx("div", { className: "flex justify-center", children: _jsx(Button, { variant: "outline", className: "min-w-32 rounded-lg", onClick: () => fetchNextPage(), disabled: isFetchingNextPage, children: isFetchingNextPage ? labels.loadingMore : labels.loadMore }) })), open && _jsx(RegisterDialog, { session: open, timezone: timezone, renderPayment: renderPayment, onRegistered: onRegistered, funding: funding, locale: locale, labels: givenLabels, onClose: () => setOpen(null) })] }));
 }

package/dist/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogItemSummary, BookableService, Booking, BookingMode, BookingResult, BookParams, CancelRegistrationParams, OperationReceipt, Page, RegisterSeatParams, RegistrationAccess, RegistrationDetail, Slot } from "./types.js";
+import type { CatalogItemSummary, BookableService, Booking, BookingMode, BookingResult, BookParams, CancelRegistrationParams, Operation, OperationReceipt, Page, RegisterSeatParams, RegistrationAccess, RegistrationDetail, Slot } from "./types.js";
 /** The query keys this package reads under, for invalidating from elsewhere. */
 export declare const calendarKeys: {
     details: () => readonly ["doany", "calendar", "details"];
@@ -699,6 +699,16 @@ export declare function useRegister(): import("@tanstack/react-query").UseMutati
  * token, the given one, or the one in the booking link's `#t=`).
  */
 export declare function useRegistration(registrationId: string | null | undefined, access?: RegistrationAccess): import("@tanstack/react-query").UseQueryResult<RegistrationDetail, Error>;
+/** Has the operation settled? The backend says when to read again; `null` once it is done. */
+export declare const operationSettled: (operation: Operation | undefined) => boolean;
+/**
+ * A cancel that waits on a payment answers with an operation: read it with
+ * the registration's token until it settles, then the registration is read
+ * again. `registrationId` names the registration to refresh.
+ */
+export declare function useCalendarOperation(operationId: string | null | undefined, { registrationId, accessToken }?: {
+    registrationId?: string;
+} & RegistrationAccess): import("@tanstack/react-query").UseQueryResult<Operation, Error>;
 /** Cancels the visitor's registration, within the service's policy. */
 export declare function useCancelRegistration(): import("@tanstack/react-query").UseMutationResult<OperationReceipt | RegistrationDetail, unknown, {
     registrationId: string;

package/dist/hooks.js

@@ -133,6 +133,31 @@ export function useRegistration(registrationId, access = {}) {
         refetchInterval: (query) => (query.state.data?.registration.status === "pending_payment" ? 3000 : false),
     });
 }
+/** Has the operation settled? The backend says when to read again; `null` once it is done. */
+export const operationSettled = (operation) => Boolean(operation) && operation.next_poll_at === null;
+/**
+ * A cancel that waits on a payment answers with an operation: read it with
+ * the registration's token until it settles, then the registration is read
+ * again. `registrationId` names the registration to refresh.
+ */
+export function useCalendarOperation(operationId, { registrationId, accessToken } = {}) {
+    const doany = useDoany();
+    const queryClient = useQueryClient();
+    return useQuery({
+        queryKey: [...calendarKeys.all, "operation", operationId ?? "", accessToken ?? null],
+        queryFn: async () => {
+            const operation = await doany.calendar.operation(operationId, { accessToken, registrationId });
+            if (operationSettled(operation) && registrationId) {
+                void queryClient.invalidateQueries({ queryKey: calendarKeys.anyRegistration(registrationId) });
+                void queryClient.invalidateQueries({ queryKey: [...calendarKeys.all, "slots"] });
+                void queryClient.invalidateQueries({ queryKey: [...calendarKeys.all, "sessions"] });
+            }
+            return operation;
+        },
+        enabled: Boolean(operationId),
+        refetchInterval: (query) => (operationSettled(query.state.data) ? false : 2000),
+    });
+}
 /** Cancels the visitor's registration, within the service's policy. */
 export function useCancelRegistration() {
     const doany = useDoany();

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { calendarKeys, usePackages, useServiceDetails, useBook, useBookableService, useBookableServices, useCancelRegistration, useRegister, useRegistration, useSession, useSessions, useSlots, type BookableServicesParams, type SessionsParams, type UseSlotsParams, } from "./hooks.js";
+export { calendarKeys, usePackages, useServiceDetails, useBook, useBookableService, useBookableServices, useCancelRegistration, useRegister, useRegistration, useCalendarOperation, operationSettled, useSession, useSessions, useSlots, type BookableServicesParams, type SessionsParams, type UseSlotsParams, } from "./hooks.js";
 export { readBookingLinkToken, useBookingAccessToken } from "./booking-link.js";
 export { browserTimezone, defaultVariant, formatDateTime, formatDay, formatDayParts, formatDuration, formatTime, formatTimezone, localDate, servicePriceLabel, variantPriceLabel, } from "./format.js";
 export { calendarLabels, defaultCalendarLabels, type CalendarLabels } from "./labels.js";
@@ -10,4 +10,4 @@ export { SessionList, RegisterDialog, sessionIsFull, type SessionListProps, type
 export { SessionCalendar, type SessionCalendarProps } from "./components/session-calendar.js";
 export { PackageCard, PackageList, packageVariant, type PackageCardProps, type PackageListProps } from "./components/package-list.js";
 export { BookingStatus, type BookingStatusProps } from "./components/booking-status.js";
-export type { Attendee, BookableService, BookableVariant, Booking, BookingField, BookingMode, BookingResult, BookParams, CalendarClient, CancelRegistrationParams, CatalogItemSummary, LocationType, OperationReceipt, Page, PaymentRequirement, Registration, RegistrationAccess, RegistrationDetail, RegistrationStatus, RegisterSeatParams, SessionVariant, Slot, } from "./types.js";
+export type { Attendee, BookableService, BookableVariant, Booking, BookingField, BookingMode, BookingResult, BookingFunding, BookParams, CalendarClient, CancelRegistrationParams, CatalogItemSummary, LocationType, Operation, OperationReceipt, Page, PaymentRequirement, Registration, RegistrationAccess, RegistrationDetail, RegistrationStatus, RegisterSeatParams, SessionVariant, Slot, } from "./types.js";

package/dist/index.js

@@ -5,7 +5,7 @@
 // theme variables, adjust through props (their words through `labels`), or
 // replace while keeping the hooks. The package ships no CSS: the site's
 // Tailwind build scans it (see @doany-ai/app-core/tailwind-preset).
-export { calendarKeys, usePackages, useServiceDetails, useBook, useBookableService, useBookableServices, useCancelRegistration, useRegister, useRegistration, useSession, useSessions, useSlots, } from "./hooks.js";
+export { calendarKeys, usePackages, useServiceDetails, useBook, useBookableService, useBookableServices, useCancelRegistration, useRegister, useRegistration, useCalendarOperation, operationSettled, useSession, useSessions, useSlots, } from "./hooks.js";
 export { readBookingLinkToken, useBookingAccessToken } from "./booking-link.js";
 export { browserTimezone, defaultVariant, formatDateTime, formatDay, formatDayParts, formatDuration, formatTime, formatTimezone, localDate, servicePriceLabel, variantPriceLabel, } from "./format.js";
 export { calendarLabels, defaultCalendarLabels } from "./labels.js";

package/dist/labels.d.ts

@@ -36,6 +36,8 @@ export interface CalendarLabels {
     name: string;
     email: string;
     phone: string;
+    /** Shown while a phone number is not in the international format. */
+    phoneFormat: string;
     /** Under the details form, with the appointment restated. */
     confirmBooking: string;
     booking: string;
@@ -94,6 +96,9 @@ export interface CalendarLabels {
     location: string;
     online: string;
     atYourAddress: string;
+    joinMeeting: string;
+    yourAddress: string;
+    addressRequired: string;
 }
 export declare const defaultCalendarLabels: CalendarLabels;
 /** The defaults with a site's changes on top. */

package/dist/labels.js

@@ -21,6 +21,7 @@ export const defaultCalendarLabels = {
     name: "Name",
     email: "Email",
     phone: "Phone",
+    phoneFormat: "Use the international format, like +1 415 555 0132.",
     confirmBooking: "Confirm booking",
     booking: "Booking…",
     back: "Back",
@@ -68,6 +69,9 @@ export const defaultCalendarLabels = {
     location: "Location",
     online: "Online",
     atYourAddress: "At your address",
+    joinMeeting: "Join online",
+    yourAddress: "Your address",
+    addressRequired: "Tell us the address we should come to.",
 };
 /** The defaults with a site's changes on top. */
 export const calendarLabels = (labels) => labels ? { ...defaultCalendarLabels, ...labels } : defaultCalendarLabels;

package/dist/phone.d.ts

@@ -0,0 +1,4 @@
+/** The platform takes phone numbers in E.164 (`+14155550132`): the visitor's
+ * spaces, dots, dashes and brackets are dropped and a `00` prefix becomes `+`. */
+export declare function normalizePhone(raw: string): string;
+export declare const isE164: (value: string) => boolean;

package/dist/phone.js

@@ -0,0 +1,7 @@
+/** The platform takes phone numbers in E.164 (`+14155550132`): the visitor's
+ * spaces, dots, dashes and brackets are dropped and a `00` prefix becomes `+`. */
+export function normalizePhone(raw) {
+    const trimmed = raw.trim().replace(/[\s().-]/g, "");
+    return trimmed.startsWith("00") ? `+${trimmed.slice(2)}` : trimmed;
+}
+export const isE164 = (value) => /^\+[1-9][0-9]{1,14}$/.test(value);

package/dist/types.d.ts

@@ -76,6 +76,8 @@ export interface SessionVariant {
     is_active: boolean;
     registration_status: string;
     registration_closed_reason: string | null;
+    /** The ticket's status for a package holder: `open` while cash registration is closed (the prepayment window). */
+    package_registration_status?: string | null;
 }
 /** An appointment, or a class session with seats. */
 export interface Booking {
@@ -95,6 +97,10 @@ export interface Booking {
     payment_requirement: PaymentRequirement;
     location_type: LocationType | null;
     address?: string | null;
+    /** An online booking's link, on the registration's own read (never public). */
+    meeting?: {
+        meeting_url: string | null;
+    } | null;
     phone_required: boolean;
     booking_fields_snapshot: BookingField[];
     allowed_actions: string[];
@@ -128,6 +134,11 @@ export interface Registration {
     hold_expires_at: string | null;
     allowed_actions: string[];
 }
+/** How a booking is paid for when not the service's default: a package the customer holds. */
+export interface BookingFunding {
+    kind: "package";
+    entitlement_id: string;
+}
 export interface BookParams {
     service_setting_id: string;
     catalog_item_variant_id: string;
@@ -135,9 +146,13 @@ export interface BookParams {
     slot_token: string;
     attendee: Attendee;
     address?: string;
+    /** Pay with a package the customer holds (its entitlement), instead of the default. */
+    funding?: BookingFunding;
 }
 export interface RegisterSeatParams {
     attendee: Attendee;
+    /** Pay with a package the customer holds (its entitlement), instead of the default. */
+    funding?: BookingFunding;
     catalog_item_variant_id?: string;
     expected: {
         booking_version: number;
@@ -160,6 +175,21 @@ export interface CancelRegistrationParams {
     booking_version: number;
     reason?: string;
 }
+/** A cancel that waits on a payment: what `calendar.operation` reads until it settles. */
+export interface Operation {
+    id: string;
+    status: string;
+    phase: string;
+    updated_at: string;
+    /** When to read again; `null` once the operation has settled. */
+    next_poll_at: string | null;
+    error_code: string | null;
+    result: {
+        booking_id: string;
+        registration_id: string | null;
+        outcome: "canceled" | "payment_settled" | "expired";
+    } | null;
+}
 export interface OperationReceipt {
     operation_id: string;
 }
@@ -238,5 +268,10 @@ export interface CalendarClient extends DoanyClientLike {
                 idempotencyKey?: string;
             }): Promise<RegistrationDetail | OperationReceipt>;
         };
+        /** One operation, read with the registration's token until it settles. */
+        operation(operationId: string, options?: {
+            accessToken?: string;
+            registrationId?: string;
+        }): Promise<Operation>;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doany-ai/calendar",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "description": "Booking the business's services, on a Doany site: calendar hooks and default components (service list, date and time picker, booking flow, class sessions, booking status)",
   "type": "module",
   "sideEffects": false,