@resira/ui 0.3.2 → 0.4.0

package/dist/index.cjs

@@ -224,6 +224,12 @@ function ResiraProvider({
   const visibleServiceCount = config?.visibleServiceCount ?? 4;
   const groupServicesByCategory = config?.groupServicesByCategory ?? true;
   const renderServiceCard = config?.renderServiceCard;
+  const showStepIndicator = config?.showStepIndicator ?? true;
+  const deeplink = config?.deeplink;
+  const deeplinkGuest = config?.deeplinkGuest;
+  const onStepChange = config?.onStepChange;
+  const onBookingComplete = config?.onBookingComplete;
+  const onError = config?.onError;
   const cssVars = react.useMemo(() => themeToCSS(theme), [theme]);
   const value = react.useMemo(
     () => ({
@@ -250,9 +256,15 @@ function ResiraProvider({
       serviceLayout,
       visibleServiceCount,
       groupServicesByCategory,
-      renderServiceCard
+      renderServiceCard,
+      showStepIndicator,
+      deeplink,
+      deeplinkGuest,
+      onStepChange,
+      onBookingComplete,
+      onError
     }),
-    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard]
+    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ResiraContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-root", style: cssVars, children }) });
 }
@@ -1632,39 +1644,90 @@ function formatCategoryLabel(resourceType) {
   return resourceType.trim().split(/[_\-\s]+/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase()).join(" ");
 }
 function groupProductsByCategory(products, resources) {
-  const resourceTypeById = new Map(
-    resources.map((resource) => [resource.id, resource.resourceType])
+  const resourceById = new Map(
+    resources.map((resource) => [resource.id, resource])
   );
   const groups = /* @__PURE__ */ new Map();
   products.forEach((product) => {
-    const categoryType = product.equipmentIds.map((equipmentId) => resourceTypeById.get(equipmentId)?.trim()).find((resourceType) => Boolean(resourceType));
+    let categoryResource;
+    const categoryType = product.equipmentIds.map((equipmentId) => {
+      const res = resourceById.get(equipmentId);
+      if (res?.resourceType?.trim() && !categoryResource) {
+        categoryResource = res;
+      }
+      return res?.resourceType?.trim();
+    }).find((resourceType) => Boolean(resourceType));
     const groupId = categoryType?.toLowerCase() ?? UNCATEGORIZED_CATEGORY_KEY;
     const label = categoryType ? formatCategoryLabel(categoryType) : UNCATEGORIZED_CATEGORY_LABEL;
     if (!groups.has(groupId)) {
       groups.set(groupId, {
         id: groupId,
         label,
+        imageUrl: categoryResource?.imageUrl ?? void 0,
         products: []
       });
     }
-    groups.get(groupId)?.products.push(product);
+    const group = groups.get(groupId);
+    group.products.push(product);
+    if (!group.imageUrl && categoryResource?.imageUrl) {
+      group.imageUrl = categoryResource.imageUrl;
+    }
   });
   return Array.from(groups.values());
 }
-function DefaultServiceCard({
+function BackArrow() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19l-7-7 7-7" })
+  ] });
+}
+function CategoryTile({
+  group,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: "resira-category-tile",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-category-tile-image", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: group.imageUrl || PLACEHOLDER_IMG2,
+              alt: group.label,
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-category-tile-overlay" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-category-tile-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-category-tile-name", children: group.label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-category-tile-count", children: [
+            group.products.length,
+            " ",
+            group.products.length === 1 ? "service" : "services"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ServiceOverlayCard({
   product,
   isSelected,
-  layout,
   locale,
   cardClassName
 }) {
   const currency = product.currency ?? "EUR";
   const priceLabel = product.pricingModel === "per_rider" ? "per rider" : product.pricingModel === "per_person" ? locale.perPerson : locale.perSession;
-  let className = `resira-service-card resira-service-card--${layout}`;
-  if (isSelected) className += " resira-service-card--selected";
+  let className = "resira-service-overlay-card";
+  if (isSelected) className += " resira-service-overlay-card--selected";
   if (cardClassName) className += ` ${cardClassName}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-card-image", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-overlay-card-bg", children: /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: product.imageUrl ?? PLACEHOLDER_IMG2,
@@ -1672,30 +1735,27 @@ function DefaultServiceCard({
         loading: "lazy"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-body", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-top", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-service-card-name", children: product.name }),
-        product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-service-card-desc", children: product.description })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-overlay-card-gradient" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-content", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-top", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-service-overlay-card-name", children: product.name }),
+        product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-service-overlay-card-desc", children: product.description })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-bottom", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-price", children: [
+      /* @__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),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-price-unit", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-price-unit", children: [
             "/",
             priceLabel
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-card-pills", children: [
-          product.durationMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 12 }),
+        /* @__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: [
+            /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 11 }),
             formatDuration2(product.durationMinutes)
           ] }),
-          product.pricingModel === "per_person" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, { size: 12 }),
-            product.maxPartySize ? `1\u2013${product.maxPartySize}` : locale.perPerson
-          ] }),
-          product.maxPartySize && product.pricingModel !== "per_person" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, { size: 12 }),
+          product.maxPartySize && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(UsersIcon, { size: 11 }),
             "max ",
             product.maxPartySize
           ] })
@@ -1723,7 +1783,8 @@ function ProductSelector({
   error = null,
   layout: layoutProp,
   visibleCount: visibleCountProp,
-  groupByCategory: groupByCategoryProp
+  groupByCategory: groupByCategoryProp,
+  initialCategory
 }) {
   const {
     locale,
@@ -1737,21 +1798,37 @@ function ProductSelector({
   const visibleCount = visibleCountProp ?? providerCount;
   const groupByCategory = groupByCategoryProp ?? providerGroupByCategory;
   const containerRef = react.useRef(null);
+  const [activeCategory, setActiveCategory] = react.useState(initialCategory ?? null);
   const productGroups = react.useMemo(
-    () => groupByCategory ? groupProductsByCategory(products, resources) : [{ id: "all", label: "", products }],
+    () => groupByCategory ? groupProductsByCategory(products, resources) : [{ id: "all", label: "", imageUrl: void 0, products }],
     [groupByCategory, products, resources]
   );
-  const containerStyle = react.useMemo(() => {
-    if (layout === "horizontal") {
-      return {};
+  const skipCategoryView = productGroups.length <= 1;
+  react.useEffect(() => {
+    if (initialCategory && productGroups.some((g) => g.id === initialCategory)) {
+      setActiveCategory(initialCategory);
+    }
+  }, [initialCategory, productGroups]);
+  react.useEffect(() => {
+    if (activeCategory && !productGroups.some((g) => g.id === activeCategory)) {
+      setActiveCategory(null);
     }
-    const cardHeight = 88;
-    const gap = 10;
-    const sectionHeaderHeight = groupByCategory ? productGroups.length * 30 : 0;
-    const sectionGap = groupByCategory ? Math.max(productGroups.length - 1, 0) * 12 : 0;
-    const maxHeight = visibleCount * cardHeight + (visibleCount - 1) * gap + sectionHeaderHeight + sectionGap;
+  }, [activeCategory, productGroups]);
+  const activeCategoryGroup = react.useMemo(
+    () => productGroups.find((g) => g.id === activeCategory) ?? null,
+    [productGroups, activeCategory]
+  );
+  const displayProducts = react.useMemo(() => {
+    if (skipCategoryView) return products;
+    return activeCategoryGroup?.products ?? [];
+  }, [skipCategoryView, products, activeCategoryGroup]);
+  const containerStyle = react.useMemo(() => {
+    if (layout === "horizontal") return {};
+    const cardHeight = 180;
+    const gap = 12;
+    const maxHeight = visibleCount * cardHeight + (visibleCount - 1) * gap;
     return { maxHeight, overflowY: "auto" };
-  }, [groupByCategory, layout, productGroups.length, visibleCount]);
+  }, [layout, visibleCount]);
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
@@ -1764,54 +1841,64 @@ function ProductSelector({
   if (products.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No services available at the moment." }) });
   }
+  if (groupByCategory && !skipCategoryView && !activeCategory) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-service-picker", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-category-grid", children: productGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+      CategoryTile,
+      {
+        group,
+        onClick: () => setActiveCategory(group.id)
+      },
+      group.id
+    )) }) });
+  }
   const listClassName = [
-    "resira-service-list",
-    `resira-service-list--${layout}`,
+    "resira-service-overlay-list",
     classNames.serviceList
   ].filter(Boolean).join(" ");
-  const groupedListClassName = [
-    listClassName,
-    groupByCategory ? "resira-service-list--grouped" : ""
-  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-picker", children: [
+    groupByCategory && !skipCategoryView && activeCategory && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "resira-category-back",
+        onClick: () => setActiveCategory(null),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BackArrow, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeCategoryGroup?.label ?? "All categories" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: containerRef,
-        className: groupByCategory ? "resira-service-group-list" : listClassName,
+        className: listClassName,
         style: containerStyle,
-        children: productGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "resira-service-group", "aria-label": group.label || locale.chooseService, children: [
-          groupByCategory && group.label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-group-header", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-service-group-title", children: group.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-service-group-count", children: group.products.length })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: groupByCategory ? groupedListClassName : listClassName, children: group.products.map((product) => {
-            const isSelected = selectedId === product.id;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "resira-service-card-btn",
-                onClick: () => onSelect(product),
-                "aria-pressed": isSelected,
-                children: renderServiceCard ? renderServiceCard(product, isSelected) : /* @__PURE__ */ jsxRuntime.jsx(
-                  DefaultServiceCard,
-                  {
-                    product,
-                    isSelected,
-                    layout,
-                    locale,
-                    cardClassName: isSelected ? classNames.serviceCardSelected : classNames.serviceCard
-                  }
-                )
-              },
-              product.id
-            );
-          }) })
-        ] }, group.id))
+        children: displayProducts.map((product) => {
+          const isSelected = selectedId === product.id;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "resira-service-card-btn",
+              onClick: () => onSelect(product),
+              "aria-pressed": isSelected,
+              children: renderServiceCard ? renderServiceCard(product, isSelected) : /* @__PURE__ */ jsxRuntime.jsx(
+                ServiceOverlayCard,
+                {
+                  product,
+                  isSelected,
+                  locale,
+                  cardClassName: isSelected ? classNames.serviceCardSelected : classNames.serviceCard
+                }
+              )
+            },
+            product.id
+          );
+        })
       }
     ),
-    layout === "vertical" && products.length > visibleCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-scroll-hint", children: [
+    displayProducts.length > visibleCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-scroll-hint", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Scroll for more" }),
       /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4" }) })
     ] })
@@ -2606,7 +2693,13 @@ function ResiraBookingWidget() {
     showWaiver,
     showRemainingSpots,
     depositPercent,
-    onClose
+    onClose,
+    showStepIndicator,
+    deeplink,
+    deeplinkGuest,
+    onStepChange,
+    onBookingComplete,
+    onError
   } = useResira();
   const isDateBased = domain === "rental";
   const isTimeBased = domain === "restaurant" || domain === "watersport" || domain === "service";
@@ -2964,8 +3057,9 @@ function ResiraBookingWidget() {
       setStep("confirmation");
     }
   }, [createPayment, paymentPayload, confirmPayment]);
-  const handlePaymentError = react.useCallback((_msg) => {
-  }, []);
+  const handlePaymentError = react.useCallback((msg) => {
+    onError?.("payment_error", msg);
+  }, [onError]);
   const handleSubmitNoPayment = react.useCallback(async () => {
     if (showTerms && !termsAccepted) {
       setTermsError(locale.termsRequired);
@@ -2995,9 +3089,63 @@ function ResiraBookingWidget() {
   }, [guest, selection, locale, submit, termsAccepted, waiverAccepted, showTerms, showWaiver, activeResourceId, selectedProduct]);
   const footerBusy = submitting || creatingPayment || confirmingPayment || paymentFormSubmitting;
   const paymentActionDisabled = !paymentIntent || !paymentFormReady || paymentFormSubmitting || confirmingPayment;
+  const [deeplinkApplied, setDeeplinkApplied] = react.useState(false);
+  react.useEffect(() => {
+    if (deeplinkApplied || !deeplink) return;
+    if (deeplink.productId && products.length > 0 && !selectedProduct) {
+      const target = products.find((p) => p.id === deeplink.productId);
+      if (target) {
+        handleProductSelect(target);
+      }
+    }
+    if (deeplink.partySize || deeplink.duration || deeplink.date) {
+      setSelection((prev) => ({
+        ...prev,
+        ...deeplink.partySize ? { partySize: deeplink.partySize } : {},
+        ...deeplink.duration ? { duration: deeplink.duration } : {},
+        ...deeplink.date ? { startDate: deeplink.date } : {}
+      }));
+      if (deeplink.date) setSlotDate(deeplink.date);
+    }
+    if (deeplinkGuest) {
+      setGuest((prev) => ({
+        guestName: deeplinkGuest.name ?? prev.guestName,
+        guestEmail: deeplinkGuest.email ?? prev.guestEmail,
+        guestPhone: deeplinkGuest.phone ?? prev.guestPhone,
+        notes: deeplinkGuest.notes ?? prev.notes
+      }));
+    }
+    if (deeplink.productId && step === "resource" && isServiceBased) {
+      const target = products.find((p) => p.id === deeplink.productId);
+      if (target) {
+        setStep(STEPS[stepIndex("resource", STEPS) + 1]);
+      }
+    }
+    setDeeplinkApplied(true);
+  }, [deeplink, deeplinkGuest, products, selectedProduct, step, isServiceBased, STEPS, handleProductSelect]);
+  react.useEffect(() => {
+    onStepChange?.(step);
+  }, [step, onStepChange]);
+  react.useEffect(() => {
+    if (step === "confirmation") {
+      const bookingId = reservation?.id ?? paymentIntent?.reservationId;
+      onBookingComplete?.({
+        reservationId: bookingId,
+        product: selectedProduct ?? void 0,
+        selection,
+        guest
+      });
+    }
+  }, [step]);
+  react.useEffect(() => {
+    if (submitError) onError?.("submit_error", submitError);
+  }, [submitError, onError]);
+  react.useEffect(() => {
+    if (paymentError) onError?.("payment_error", paymentError);
+  }, [paymentError, onError]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-widget", children: [
     step !== "confirmation" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-widget-topbar", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "resira-steps", "aria-label": "Booking steps", children: STEPS.filter((s) => s !== "confirmation").map((s, i) => {
+      showStepIndicator && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "resira-steps", "aria-label": "Booking steps", children: STEPS.filter((s) => s !== "confirmation").map((s, i) => {
         const isCompleted = stepIndex(step, STEPS) > i;
         const isActive = s === step;
         return /* @__PURE__ */ jsxRuntime.jsxs(