@resira/ui 0.4.2 → 0.4.5

package/dist/index.d.cts

@@ -790,6 +790,119 @@ interface UseCheckoutSessionReturn {
  * ```
  */
 declare function useCheckoutSession(token: string | undefined): UseCheckoutSessionReturn;
+/** A single duration/price option for a service. */
+interface ServiceOption {
+    /** Duration in minutes. */
+    durationMinutes: number;
+    /** Human-readable duration label (e.g. "1h 30m"). */
+    durationLabel: string;
+    /** Price in minor units (cents). */
+    priceCents: number;
+    /** Formatted price string (e.g. "€50.00"). */
+    priceFormatted: string;
+}
+/** Enriched service data ready for display. */
+interface Service {
+    /** Unique service ID. */
+    id: string;
+    /** Service name. */
+    name: string;
+    /** Optional description. */
+    description?: string;
+    /** Image URL. */
+    imageUrl?: string;
+    /** ISO 4217 currency code. */
+    currency: string;
+    /** Whether the service is active. */
+    active: boolean;
+    /** Pricing model: "per_session" | "per_person" | "per_rider". */
+    pricingModel: string;
+    /** Default/base price in minor units. */
+    priceCents: number;
+    /** Formatted base price (e.g. "€50.00"). */
+    priceFormatted: string;
+    /** Lowest price across all options (for "from €X" display). */
+    lowestPriceCents: number;
+    /** Formatted lowest price. */
+    lowestPriceFormatted: string;
+    /** Whether multiple duration/price options exist. */
+    hasMultipleOptions: boolean;
+    /** Default duration in minutes. */
+    durationMinutes: number;
+    /** Human-readable default duration (e.g. "2h"). */
+    durationLabel: string;
+    /** All available duration/price options. */
+    options: ServiceOption[];
+    /** Maximum party/group size. */
+    maxPartySize?: number;
+    /** IDs of linked equipment/resources. */
+    equipmentIds: string[];
+    /** Names of linked equipment/resources. */
+    equipmentNames?: string[];
+    /** Display color. */
+    serviceColor?: string;
+    /** Sort order. */
+    sortOrder?: number;
+    /** Raw product object from the API. */
+    raw: Product;
+}
+interface UseServicesReturn {
+    /** Enriched service list. */
+    services: Service[];
+    /** Whether loading. */
+    loading: boolean;
+    /** Error message. */
+    error: string | null;
+    /** Re-fetch services. */
+    refetch: () => void;
+}
+/**
+ * Fetch all services for the organisation with enriched display data.
+ *
+ * Returns formatted prices, duration labels, and "from €X" logic
+ * so you can render service cards with your own styling.
+ *
+ * Requires `<ResiraProvider>` ancestor.
+ *
+ * ```tsx
+ * const { services, loading, error } = useServices();
+ *
+ * return services.map(s => (
+ *   <div key={s.id}>
+ *     <h3>{s.name}</h3>
+ *     <img src={s.imageUrl} alt={s.name} />
+ *     <p>{s.hasMultipleOptions ? `from ${s.lowestPriceFormatted}` : s.priceFormatted}</p>
+ *     <p>{s.durationLabel}</p>
+ *     {s.options.map(opt => (
+ *       <span key={opt.durationMinutes}>{opt.durationLabel} — {opt.priceFormatted}</span>
+ *     ))}
+ *   </div>
+ * ));
+ * ```
+ */
+declare function useServices(): UseServicesReturn;
+/**
+ * Fetch all services for an organisation — standalone, no React needed.
+ *
+ * Use this in non-React contexts, server components, scripts, or
+ * when you want full control over rendering.
+ *
+ * ```ts
+ * import { fetchServices } from "@resira/ui";
+ *
+ * const services = await fetchServices("your-api-key");
+ * services.forEach(s => {
+ *   console.log(s.name, s.lowestPriceFormatted, s.options);
+ * });
+ * ```
+ *
+ * @param apiKey  Your Resira public API key
+ * @param opts    Optional: baseUrl override
+ * @returns       Array of enriched Service objects
+ */
+declare function fetchServices(apiKey: string, opts?: {
+    baseUrl?: string;
+}): Promise<Service[]>;
 
 /** Default theme values. */
 declare const DEFAULT_THEME: Required<ResiraTheme>;
@@ -829,4 +942,4 @@ declare function TagIcon({ size, className }: IconProps): react_jsx_runtime.JSX.
 declare function CubeIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 declare function ViewfinderIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type Service, type ServiceLayout, type ServiceOption, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, type UseServicesReturn, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, fetchServices, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, useServices, validateGuestForm };

package/dist/index.d.ts

@@ -790,6 +790,119 @@ interface UseCheckoutSessionReturn {
  * ```
  */
 declare function useCheckoutSession(token: string | undefined): UseCheckoutSessionReturn;
+/** A single duration/price option for a service. */
+interface ServiceOption {
+    /** Duration in minutes. */
+    durationMinutes: number;
+    /** Human-readable duration label (e.g. "1h 30m"). */
+    durationLabel: string;
+    /** Price in minor units (cents). */
+    priceCents: number;
+    /** Formatted price string (e.g. "€50.00"). */
+    priceFormatted: string;
+}
+/** Enriched service data ready for display. */
+interface Service {
+    /** Unique service ID. */
+    id: string;
+    /** Service name. */
+    name: string;
+    /** Optional description. */
+    description?: string;
+    /** Image URL. */
+    imageUrl?: string;
+    /** ISO 4217 currency code. */
+    currency: string;
+    /** Whether the service is active. */
+    active: boolean;
+    /** Pricing model: "per_session" | "per_person" | "per_rider". */
+    pricingModel: string;
+    /** Default/base price in minor units. */
+    priceCents: number;
+    /** Formatted base price (e.g. "€50.00"). */
+    priceFormatted: string;
+    /** Lowest price across all options (for "from €X" display). */
+    lowestPriceCents: number;
+    /** Formatted lowest price. */
+    lowestPriceFormatted: string;
+    /** Whether multiple duration/price options exist. */
+    hasMultipleOptions: boolean;
+    /** Default duration in minutes. */
+    durationMinutes: number;
+    /** Human-readable default duration (e.g. "2h"). */
+    durationLabel: string;
+    /** All available duration/price options. */
+    options: ServiceOption[];
+    /** Maximum party/group size. */
+    maxPartySize?: number;
+    /** IDs of linked equipment/resources. */
+    equipmentIds: string[];
+    /** Names of linked equipment/resources. */
+    equipmentNames?: string[];
+    /** Display color. */
+    serviceColor?: string;
+    /** Sort order. */
+    sortOrder?: number;
+    /** Raw product object from the API. */
+    raw: Product;
+}
+interface UseServicesReturn {
+    /** Enriched service list. */
+    services: Service[];
+    /** Whether loading. */
+    loading: boolean;
+    /** Error message. */
+    error: string | null;
+    /** Re-fetch services. */
+    refetch: () => void;
+}
+/**
+ * Fetch all services for the organisation with enriched display data.
+ *
+ * Returns formatted prices, duration labels, and "from €X" logic
+ * so you can render service cards with your own styling.
+ *
+ * Requires `<ResiraProvider>` ancestor.
+ *
+ * ```tsx
+ * const { services, loading, error } = useServices();
+ *
+ * return services.map(s => (
+ *   <div key={s.id}>
+ *     <h3>{s.name}</h3>
+ *     <img src={s.imageUrl} alt={s.name} />
+ *     <p>{s.hasMultipleOptions ? `from ${s.lowestPriceFormatted}` : s.priceFormatted}</p>
+ *     <p>{s.durationLabel}</p>
+ *     {s.options.map(opt => (
+ *       <span key={opt.durationMinutes}>{opt.durationLabel} — {opt.priceFormatted}</span>
+ *     ))}
+ *   </div>
+ * ));
+ * ```
+ */
+declare function useServices(): UseServicesReturn;
+/**
+ * Fetch all services for an organisation — standalone, no React needed.
+ *
+ * Use this in non-React contexts, server components, scripts, or
+ * when you want full control over rendering.
+ *
+ * ```ts
+ * import { fetchServices } from "@resira/ui";
+ *
+ * const services = await fetchServices("your-api-key");
+ * services.forEach(s => {
+ *   console.log(s.name, s.lowestPriceFormatted, s.options);
+ * });
+ * ```
+ *
+ * @param apiKey  Your Resira public API key
+ * @param opts    Optional: baseUrl override
+ * @returns       Array of enriched Service objects
+ */
+declare function fetchServices(apiKey: string, opts?: {
+    baseUrl?: string;
+}): Promise<Service[]>;
 
 /** Default theme values. */
 declare const DEFAULT_THEME: Required<ResiraTheme>;
@@ -829,4 +942,4 @@ declare function TagIcon({ size, className }: IconProps): react_jsx_runtime.JSX.
 declare function CubeIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 declare function ViewfinderIcon({ size, className }: IconProps): react_jsx_runtime.JSX.Element;
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type ServiceLayout, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, type CheckoutSessionErrorCode, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, type DeeplinkGuest, type DeeplinkSelection, DishShowcase, type DishShowcaseProps, type DomainConfig, GuestForm, type GuestFormErrors, type GuestFormValues, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, type ResiraClassNames, type ResiraContextValue, type ResiraDomain, type ResiraLocale, ResiraProvider, type ResiraProviderConfig, type ResiraProviderProps, type ResiraTheme, ResourcePicker, type Service, type ServiceLayout, type ServiceOption, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, type UseServicesReturn, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, fetchServices, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, useServices, validateGuestForm };

package/dist/index.js

@@ -650,6 +650,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] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [fetchCount, setFetchCount] = useState(0);
+  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 = 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__ */ jsxs(
@@ -1777,6 +1872,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}`;
@@ -1797,17 +1896,22 @@ function ServiceOverlayCard({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-bottom", children: [
         /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-price", children: [
-          formatPrice2(product.priceCents, currency),
+          pricePrefix,
+          formatPrice2(lowestPrice, currency),
           /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-price-unit", children: [
             "/",
             priceLabel
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-pills", children: [
-          product.durationMinutes > 0 && /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+          hasMultipleOptions && optionCount > 1 ? /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+            /* @__PURE__ */ jsx(ClockIcon, { size: 11 }),
+            optionCount,
+            " options"
+          ] }) : product.durationMinutes > 0 ? /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
             /* @__PURE__ */ jsx(ClockIcon, { size: 11 }),
             formatDuration2(product.durationMinutes)
-          ] }),
+          ] }) : null,
           product.maxPartySize && /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
             /* @__PURE__ */ jsx(UsersIcon, { size: 11 }),
             "max ",
@@ -3024,8 +3128,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 = useCallback(
     (resourceId) => {
@@ -4207,6 +4317,6 @@ function DishShowcase({
   ] });
 }
 
-export { AlertCircleIcon, BookingCalendar, BookingModal, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, DishShowcase, GuestForm, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, ResiraProvider, ResourcePicker, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, DishShowcase, GuestForm, LockIcon, MailIcon, MinusIcon, NoteIcon, PaymentForm, PhoneIcon, PlusIcon, ProductSelector, ResiraBookingWidget, ResiraProvider, ResourcePicker, ShieldIcon, SummaryPreview, TagIcon, TimeSlotPicker, UserIcon, UsersIcon, ViewfinderIcon, WaiverConsent, XIcon, fetchServices, resolveTheme, themeToCSS, useAvailability, useCheckoutSession, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, useServices, validateGuestForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map