@resira/ui 0.4.6 → 0.4.8

package/README.md

@@ -1,238 +1,238 @@
-# @resira/ui v0.3.2
-
-React booking UI for Resira. It includes a ready-to-embed widget, modal flow, provider, hooks, and lower-level components for custom booking experiences.
-
-## Installation
-
-```bash
-npm install @resira/ui@0.3.2 @resira/sdk@0.3.1
-```
-
-Peer dependencies:
-
-- react >= 18
-- react-dom >= 18
-
-## Quick start
-
-```tsx
-import { ResiraProvider, ResiraBookingWidget } from "@resira/ui";
-import "@resira/ui/styles.css";
-
-export function App() {
-  return (
-    <ResiraProvider
-      apiKey="resira_live_abc123"
-      resourceId="prop-1"
-      domain="rental"
-    >
-      <ResiraBookingWidget />
-    </ResiraProvider>
-  );
-}
-```
-
-You can also use the higher-level modal component:
-
-```tsx
-import { BookingModal } from "@resira/ui";
-import "@resira/ui/styles.css";
-
-<BookingModal apiKey="resira_live_abc123" domain="watersport" />;
-```
-
-## Supported domains
-
-| Domain | Flow |
-| --- | --- |
-| `rental` | Calendar -> guest details -> terms -> payment |
-| `restaurant` | Time slots -> guest details -> terms -> payment |
-| `watersport` | Service -> time -> guest details -> terms -> payment |
-| `service` | Service -> time -> guest details -> terms -> payment |
-
-## ResiraProvider
-
-`ResiraProvider` initializes the SDK client, loads public property configuration, resolves theme and locale values, and provides booking state to child components.
-
-```tsx
-<ResiraProvider
-  apiKey="resira_live_..."
-  resourceId="resource-id"
-  domain="rental"
-  config={{
-    theme: {
-      primaryColor: "#18181b",
-      borderRadius: "16px",
-    },
-    locale: {
-      bookNow: "Book now",
-    },
-    serviceLayout: "vertical",
-    visibleServiceCount: 4,
-    groupServicesByCategory: true,
-    stripePublishableKey: "pk_live_...",
-    showTerms: true,
-    showWaiver: false,
-    depositPercent: 50,
-  }}
->
-  <ResiraBookingWidget />
-</ResiraProvider>
-```
-
-### Provider props
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `apiKey` | `string` | Yes | Resira public API key |
-| `resourceId` | `string` | No | Default resource or property ID. Omit for catalog mode |
-| `domain` | `"rental" \| "restaurant" \| "watersport" \| "service"` | Yes | Booking flow type |
-| `config` | `ResiraProviderConfig` | No | Theme, locale, layout, payment, and rendering overrides |
-| `onClose` | `() => void` | No | Close callback for modal-driven flows |
-
-### Important config options
-
-| Config field | Type | Description |
-| --- | --- | --- |
-| `theme` | `ResiraTheme` | Theme token overrides |
-| `locale` | `ResiraLocale` | Text and i18n overrides |
-| `domainConfig` | `DomainConfig` | Domain-specific rules such as min/max party size or duration |
-| `classNames` | `ResiraClassNames` | CSS class overrides |
-| `serviceLayout` | `"vertical" \| "horizontal"` | Product selector layout |
-| `visibleServiceCount` | `number` | Number of visible services before scrolling |
-| `groupServicesByCategory` | `boolean` | Group services by linked equipment type |
-| `renderServiceCard` | `(product, selected) => ReactNode` | Custom service card rendering |
-| `baseUrl` | `string` | Optional API origin override |
-| `baseUrls` | `Array<string \| WeightedBaseUrl>` | Optional ordered fallback origin list |
-| `stripePublishableKey` | `string` | Stripe publishable key override |
-| `termsText` | `string` | Terms text override |
-| `waiverText` | `string` | Waiver text override |
-| `showWaiver` | `boolean` | Show waiver checkbox |
-| `showTerms` | `boolean` | Show terms checkbox |
-| `showRemainingSpots` | `boolean` | Show remaining capacity labels |
-| `depositPercent` | `number` | Percent charged upfront |
-
-## Styling and customization
-
-Import the stylesheet once:
-
-```tsx
-import "@resira/ui/styles.css";
-```
-
-The main customization layers are:
-
-- `theme` tokens on `ResiraProvider`
-- CSS custom properties under `.resira-root`
-- `classNames` and `renderServiceCard` for deeper control
-
-For more styling details, see [CUSTOMIZATION.md](./CUSTOMIZATION.md).
-
-## Payment and remote config
-
-The provider loads public configuration such as:
-
-- Stripe publishable key
-- deposit percentage
-- terms requirements
-- refund policy
-
-You can override those values locally through `config` when needed.
-
-## Hooks and components
-
-Main exports:
-
-- `ResiraProvider`
-- `useResira`
-- `ResiraBookingWidget`
-- `BookingModal`
-- `BookingCalendar`
-- `TimeSlotPicker`
-- `ResourcePicker`
-- `ProductSelector`
-- `GuestForm`
-- `validateGuestForm`
-- `WaiverConsent`
-- `PaymentForm`
-- `SummaryPreview`
-- `ConfirmationView`
-- `useAvailability`
-- `useReservation`
-- `useResources`
-- `useProducts`
-- `usePaymentIntent`
-- `DishShowcase`
-- `useDish`
-- `useDishes`
-
-## DishShowcase
-
-The `DishShowcase` component renders a trigger button that opens a nested modal for browsing dishes with 3D model previews and AR viewing. It uses `<model-viewer>` for the 3D experience.
-
-### Prerequisites
-
-Load the `<model-viewer>` web component in your page:
-
-```html
-<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0/model-viewer.min.js"></script>
-```
-
-### Single dish (by ID)
-
-The `dishId` is shown on the dish page in the admin dashboard for easy copying.
-
-```tsx
-import { DishShowcase } from "@resira/ui";
-
-<DishShowcase dishId="dish-uuid">
-  View in 3D
-</DishShowcase>
-```
-
-### Browse all dishes
-
-```tsx
-<DishShowcase showAll>
-  Explore Our Menu
-</DishShowcase>
-```
-
-### Filter by category
-
-```tsx
-<DishShowcase showAll category="Main">
-  View Main Courses
-</DishShowcase>
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `dishId` | `string` | — | Single dish ID, opens directly to 3D viewer |
-| `showAll` | `boolean` | `false` | Show all dishes in a browsable grid |
-| `category` | `string` | — | Filter dishes by category |
-| `className` | `string` | — | Custom CSS class on the trigger button |
-| `style` | `CSSProperties` | — | Custom inline styles on the trigger button |
-| `children` | `ReactNode` | required | Button label / content |
-
-### Inside a BookingModal
-
-`DishShowcase` works as a nested modal — it renders above the booking modal with its own overlay and focus trap:
-
-```tsx
-<BookingModal apiKey="resira_live_..." domain="restaurant">
-  <DishShowcase dishId="dish-uuid" style={{ marginBottom: 12 }}>
-    Preview this dish in 3D
-  </DishShowcase>
-</BookingModal>
-```
-
-## Notes
-
-- The widget supports catalog mode when `resourceId` is omitted.
-- Service and watersport flows group services by linked equipment category by default.
-- Loading and error states now announce themselves to assistive technologies on the main widget surfaces.
-- Client-side API origin stickiness/load-balancing has been removed; routing is deterministic unless you pass explicit fallback origins.
-- The package is intended for browser usage and ships CSS separately via `@resira/ui/styles.css`.
+# @resira/ui v0.3.2
+
+React booking UI for Resira. It includes a ready-to-embed widget, modal flow, provider, hooks, and lower-level components for custom booking experiences.
+
+## Installation
+
+```bash
+npm install @resira/ui@0.3.2 @resira/sdk@0.3.1
+```
+
+Peer dependencies:
+
+- react >= 18
+- react-dom >= 18
+
+## Quick start
+
+```tsx
+import { ResiraProvider, ResiraBookingWidget } from "@resira/ui";
+import "@resira/ui/styles.css";
+
+export function App() {
+  return (
+    <ResiraProvider
+      apiKey="resira_live_abc123"
+      resourceId="prop-1"
+      domain="rental"
+    >
+      <ResiraBookingWidget />
+    </ResiraProvider>
+  );
+}
+```
+
+You can also use the higher-level modal component:
+
+```tsx
+import { BookingModal } from "@resira/ui";
+import "@resira/ui/styles.css";
+
+<BookingModal apiKey="resira_live_abc123" domain="watersport" />;
+```
+
+## Supported domains
+
+| Domain | Flow |
+| --- | --- |
+| `rental` | Calendar -> guest details -> terms -> payment |
+| `restaurant` | Time slots -> guest details -> terms -> payment |
+| `watersport` | Service -> time -> guest details -> terms -> payment |
+| `service` | Service -> time -> guest details -> terms -> payment |
+
+## ResiraProvider
+
+`ResiraProvider` initializes the SDK client, loads public property configuration, resolves theme and locale values, and provides booking state to child components.
+
+```tsx
+<ResiraProvider
+  apiKey="resira_live_..."
+  resourceId="resource-id"
+  domain="rental"
+  config={{
+    theme: {
+      primaryColor: "#18181b",
+      borderRadius: "16px",
+    },
+    locale: {
+      bookNow: "Book now",
+    },
+    serviceLayout: "vertical",
+    visibleServiceCount: 4,
+    groupServicesByCategory: true,
+    stripePublishableKey: "pk_live_...",
+    showTerms: true,
+    showWaiver: false,
+    depositPercent: 50,
+  }}
+>
+  <ResiraBookingWidget />
+</ResiraProvider>
+```
+
+### Provider props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `apiKey` | `string` | Yes | Resira public API key |
+| `resourceId` | `string` | No | Default resource or property ID. Omit for catalog mode |
+| `domain` | `"rental" \| "restaurant" \| "watersport" \| "service"` | Yes | Booking flow type |
+| `config` | `ResiraProviderConfig` | No | Theme, locale, layout, payment, and rendering overrides |
+| `onClose` | `() => void` | No | Close callback for modal-driven flows |
+
+### Important config options
+
+| Config field | Type | Description |
+| --- | --- | --- |
+| `theme` | `ResiraTheme` | Theme token overrides |
+| `locale` | `ResiraLocale` | Text and i18n overrides |
+| `domainConfig` | `DomainConfig` | Domain-specific rules such as min/max party size or duration |
+| `classNames` | `ResiraClassNames` | CSS class overrides |
+| `serviceLayout` | `"vertical" \| "horizontal"` | Product selector layout |
+| `visibleServiceCount` | `number` | Number of visible services before scrolling |
+| `groupServicesByCategory` | `boolean` | Group services by linked equipment type |
+| `renderServiceCard` | `(product, selected) => ReactNode` | Custom service card rendering |
+| `baseUrl` | `string` | Optional API origin override |
+| `baseUrls` | `Array<string \| WeightedBaseUrl>` | Optional ordered fallback origin list |
+| `stripePublishableKey` | `string` | Stripe publishable key override |
+| `termsText` | `string` | Terms text override |
+| `waiverText` | `string` | Waiver text override |
+| `showWaiver` | `boolean` | Show waiver checkbox |
+| `showTerms` | `boolean` | Show terms checkbox |
+| `showRemainingSpots` | `boolean` | Show remaining capacity labels |
+| `depositPercent` | `number` | Percent charged upfront |
+
+## Styling and customization
+
+Import the stylesheet once:
+
+```tsx
+import "@resira/ui/styles.css";
+```
+
+The main customization layers are:
+
+- `theme` tokens on `ResiraProvider`
+- CSS custom properties under `.resira-root`
+- `classNames` and `renderServiceCard` for deeper control
+
+For more styling details, see [CUSTOMIZATION.md](./CUSTOMIZATION.md).
+
+## Payment and remote config
+
+The provider loads public configuration such as:
+
+- Stripe publishable key
+- deposit percentage
+- terms requirements
+- refund policy
+
+You can override those values locally through `config` when needed.
+
+## Hooks and components
+
+Main exports:
+
+- `ResiraProvider`
+- `useResira`
+- `ResiraBookingWidget`
+- `BookingModal`
+- `BookingCalendar`
+- `TimeSlotPicker`
+- `ResourcePicker`
+- `ProductSelector`
+- `GuestForm`
+- `validateGuestForm`
+- `WaiverConsent`
+- `PaymentForm`
+- `SummaryPreview`
+- `ConfirmationView`
+- `useAvailability`
+- `useReservation`
+- `useResources`
+- `useProducts`
+- `usePaymentIntent`
+- `DishShowcase`
+- `useDish`
+- `useDishes`
+
+## DishShowcase
+
+The `DishShowcase` component renders a trigger button that opens a nested modal for browsing dishes with 3D model previews and AR viewing. It uses `<model-viewer>` for the 3D experience.
+
+### Prerequisites
+
+Load the `<model-viewer>` web component in your page:
+
+```html
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0/model-viewer.min.js"></script>
+```
+
+### Single dish (by ID)
+
+The `dishId` is shown on the dish page in the admin dashboard for easy copying.
+
+```tsx
+import { DishShowcase } from "@resira/ui";
+
+<DishShowcase dishId="dish-uuid">
+  View in 3D
+</DishShowcase>
+```
+
+### Browse all dishes
+
+```tsx
+<DishShowcase showAll>
+  Explore Our Menu
+</DishShowcase>
+```
+
+### Filter by category
+
+```tsx
+<DishShowcase showAll category="Main">
+  View Main Courses
+</DishShowcase>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `dishId` | `string` | — | Single dish ID, opens directly to 3D viewer |
+| `showAll` | `boolean` | `false` | Show all dishes in a browsable grid |
+| `category` | `string` | — | Filter dishes by category |
+| `className` | `string` | — | Custom CSS class on the trigger button |
+| `style` | `CSSProperties` | — | Custom inline styles on the trigger button |
+| `children` | `ReactNode` | required | Button label / content |
+
+### Inside a BookingModal
+
+`DishShowcase` works as a nested modal — it renders above the booking modal with its own overlay and focus trap:
+
+```tsx
+<BookingModal apiKey="resira_live_..." domain="restaurant">
+  <DishShowcase dishId="dish-uuid" style={{ marginBottom: 12 }}>
+    Preview this dish in 3D
+  </DishShowcase>
+</BookingModal>
+```
+
+## Notes
+
+- The widget supports catalog mode when `resourceId` is omitted.
+- Service and watersport flows group services by linked equipment category by default.
+- Loading and error states now announce themselves to assistive technologies on the main widget surfaces.
+- Client-side API origin stickiness/load-balancing has been removed; routing is deterministic unless you pass explicit fallback origins.
+- The package is intended for browser usage and ships CSS separately via `@resira/ui/styles.css`.

package/dist/index.cjs

@@ -652,6 +652,101 @@ function useCheckoutSession(token) {
   }, [client, token]);
   return { session, loading, error, errorCode };
 }
+function formatPriceCentsUtil(cents, currency) {
+  return new Intl.NumberFormat("default", { style: "currency", currency }).format(cents / 100);
+}
+function formatDurationUtil(minutes) {
+  if (minutes < 60) return `${minutes} min`;
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}
+function enrichProduct(product) {
+  const currency = product.currency ?? "EUR";
+  const options = [];
+  if (product.durationPricing?.length) {
+    for (const dp of product.durationPricing) {
+      options.push({
+        durationMinutes: dp.durationMinutes,
+        durationLabel: formatDurationUtil(dp.durationMinutes),
+        priceCents: dp.priceCents,
+        priceFormatted: formatPriceCentsUtil(dp.priceCents, currency)
+      });
+    }
+  } else {
+    options.push({
+      durationMinutes: product.durationMinutes,
+      durationLabel: formatDurationUtil(product.durationMinutes),
+      priceCents: product.priceCents,
+      priceFormatted: formatPriceCentsUtil(product.priceCents, currency)
+    });
+  }
+  const lowestPriceCents = Math.min(...options.map((o) => o.priceCents));
+  return {
+    id: product.id,
+    name: product.name,
+    description: product.description,
+    imageUrl: product.imageUrl,
+    currency,
+    active: product.active,
+    pricingModel: product.pricingModel,
+    priceCents: product.priceCents,
+    priceFormatted: formatPriceCentsUtil(product.priceCents, currency),
+    lowestPriceCents,
+    lowestPriceFormatted: formatPriceCentsUtil(lowestPriceCents, currency),
+    hasMultipleOptions: options.length > 1,
+    durationMinutes: product.durationMinutes,
+    durationLabel: formatDurationUtil(product.durationMinutes),
+    options,
+    maxPartySize: product.maxPartySize,
+    equipmentIds: product.equipmentIds,
+    equipmentNames: product.equipmentNames,
+    serviceColor: product.serviceColor,
+    sortOrder: product.sortOrder,
+    raw: product
+  };
+}
+function useServices() {
+  const { client } = useResira();
+  const [services, setServices] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const [fetchCount, setFetchCount] = react.useState(0);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    async function load() {
+      try {
+        const data = await client.listProducts();
+        if (!cancelled) {
+          setServices((data.products ?? []).map(enrichProduct));
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load services");
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, fetchCount]);
+  const refetch = react.useCallback(() => setFetchCount((c) => c + 1), []);
+  return { services, loading, error, refetch };
+}
+async function fetchServices(apiKey, opts) {
+  const { Resira: Resira2 } = await import('@resira/sdk');
+  const client = new Resira2({
+    apiKey,
+    ...opts?.baseUrl ? { baseUrl: opts.baseUrl } : {}
+  });
+  const data = await client.listProducts();
+  return (data.products ?? []).map(enrichProduct);
+}
 var defaultSize = 20;
 function CalendarIcon({ size = defaultSize, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1876,6 +1971,10 @@ function ServiceOverlayCard({
 }) {
   const currency = product.currency ?? "EUR";
   const priceLabel = product.pricingModel === "per_rider" ? "per rider" : product.pricingModel === "per_person" ? locale.perPerson : locale.perSession;
+  const hasMultipleOptions = (product.durationPricing?.length ?? 0) > 1 || (product.riderTierPricing?.length ?? 0) > 1;
+  const lowestPrice = hasMultipleOptions && product.durationPricing?.length ? Math.min(...product.durationPricing.map((dp) => dp.priceCents)) : product.priceCents;
+  const pricePrefix = hasMultipleOptions ? "from " : "";
+  const optionCount = product.durationPricing?.length ?? (product.riderTierPricing?.length ?? 0);
   let className = "resira-service-overlay-card";
   if (isSelected) className += " resira-service-overlay-card--selected";
   if (cardClassName) className += ` ${cardClassName}`;
@@ -1896,17 +1995,22 @@ function ServiceOverlayCard({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-bottom", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-price", children: [
-          formatPrice2(product.priceCents, currency),
+          pricePrefix,
+          formatPrice2(lowestPrice, currency),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-price-unit", children: [
             "/",
             priceLabel
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-pills", children: [
-          product.durationMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+          hasMultipleOptions && optionCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 11 }),
+            optionCount,
+            " options"
+          ] }) : product.durationMinutes > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-pill", children: [
             /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 11 }),
             formatDuration2(product.durationMinutes)
-          ] }),
+          ] }) : null,
           product.maxPartySize && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-pill", children: [
             /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, { size: 11 }),
             "max ",
@@ -2987,10 +3091,10 @@ function ResiraBookingWidget() {
   const currency = selectedProduct?.currency ?? availability?.currency ?? "EUR";
   const activeRiderDurationPricing = react.useMemo(() => {
     if (selectedProduct?.pricingModel === "per_rider" && selectedProduct.riderTierPricing?.length) {
-      const sorted = [...selectedProduct.riderTierPricing].sort((a, b) => a.riders - b.riders);
-      const exact = sorted.find((t) => t.riders === selection.partySize);
+      const sorted = [...selectedProduct.riderTierPricing].sort((a, b) => (a.riders ?? a.minRiders ?? 0) - (b.riders ?? b.minRiders ?? 0));
+      const exact = sorted.find((t) => t.riders === selection.partySize || t.minRiders != null && t.maxRiders != null && selection.partySize >= t.minRiders && selection.partySize <= t.maxRiders);
       if (exact) return exact.durationPricing;
-      const closest = sorted.find((t) => t.riders >= selection.partySize);
+      const closest = sorted.find((t) => (t.riders ?? t.minRiders ?? 0) >= selection.partySize);
       return closest?.durationPricing ?? sorted[sorted.length - 1]?.durationPricing ?? [];
     }
     return null;
@@ -3123,8 +3227,14 @@ function ResiraBookingWidget() {
           partySize: clampedPartySize
         };
       });
+      if (step === "resource" && isServiceBased) {
+        const nextIdx = stepIndex("resource", STEPS) + 1;
+        if (nextIdx < STEPS.length) {
+          setStep(STEPS[nextIdx]);
+        }
+      }
     },
-    [setActiveResourceId, domainConfig.maxPartySize]
+    [setActiveResourceId, domainConfig.maxPartySize, step, isServiceBased, STEPS]
   );
   const handleResourceSelect = react.useCallback(
     (resourceId) => {
@@ -4342,6 +4452,7 @@ exports.UsersIcon = UsersIcon;
 exports.ViewfinderIcon = ViewfinderIcon;
 exports.WaiverConsent = WaiverConsent;
 exports.XIcon = XIcon;
+exports.fetchServices = fetchServices;
 exports.resolveTheme = resolveTheme;
 exports.themeToCSS = themeToCSS;
 exports.useAvailability = useAvailability;
@@ -4353,6 +4464,7 @@ exports.useProducts = useProducts;
 exports.useReservation = useReservation;
 exports.useResira = useResira;
 exports.useResources = useResources;
+exports.useServices = useServices;
 exports.validateGuestForm = validateGuestForm;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map