@resira/ui 0.4.2 → 0.4.5

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(
@@ -1779,6 +1874,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}`;
@@ -1799,17 +1898,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 ",
@@ -3026,8 +3130,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) => {
@@ -4245,6 +4355,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;
@@ -4256,6 +4367,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