@resira/ui 0.3.2 → 0.4.0

package/dist/index.d.cts

@@ -234,6 +234,28 @@ interface ResiraClassNames {
     /** Price preview panel. */
     pricePreview?: string;
 }
+/** Pre-filled selection data for deeplink integration. */
+interface DeeplinkSelection {
+    /** Pre-selected product/service ID. */
+    productId?: string;
+    /** Pre-selected date (YYYY-MM-DD). */
+    date?: string;
+    /** Pre-selected party size. */
+    partySize?: number;
+    /** Pre-selected duration in minutes. */
+    duration?: number;
+}
+/** Pre-filled guest data for deeplink integration. */
+interface DeeplinkGuest {
+    /** Guest name. */
+    name?: string;
+    /** Guest email. */
+    email?: string;
+    /** Guest phone. */
+    phone?: string;
+    /** Notes. */
+    notes?: string;
+}
 /** Configuration passed to ResiraProvider. */
 interface ResiraProviderConfig {
     /** Theme overrides. */
@@ -270,6 +292,23 @@ interface ResiraProviderConfig {
     showRemainingSpots?: boolean;
     /** Percentage of total to charge upfront (0-100). Default 100. */
     depositPercent?: number;
+    /** Whether to show the step indicator bar. @default true */
+    showStepIndicator?: boolean;
+    /** Pre-fill booking data for deeplink integration. */
+    deeplink?: DeeplinkSelection;
+    /** Pre-fill guest information. */
+    deeplinkGuest?: DeeplinkGuest;
+    /** Called when the booking step changes. */
+    onStepChange?: (step: BookingStep) => void;
+    /** Called when a booking is successfully completed. */
+    onBookingComplete?: (data: {
+        reservationId?: string;
+        product?: Product;
+        selection: BookingSelection;
+        guest: GuestFormValues;
+    }) => void;
+    /** Called when an error occurs during the booking flow. */
+    onError?: (code: string, message: string) => void;
 }
 /** Props for the ResiraProvider component. */
 interface ResiraProviderProps {
@@ -336,6 +375,23 @@ interface ResiraContextValue {
     groupServicesByCategory: boolean;
     /** Custom render function for service cards. */
     renderServiceCard?: (product: Product, selected: boolean) => React.ReactNode;
+    /** Whether the step indicator bar is visible. */
+    showStepIndicator: boolean;
+    /** Pre-fill booking data for deeplink integration. */
+    deeplink?: DeeplinkSelection;
+    /** Pre-fill guest information. */
+    deeplinkGuest?: DeeplinkGuest;
+    /** Called when the booking step changes. */
+    onStepChange?: (step: BookingStep) => void;
+    /** Called when a booking is successfully completed. */
+    onBookingComplete?: (data: {
+        reservationId?: string;
+        product?: Product;
+        selection: BookingSelection;
+        guest: GuestFormValues;
+    }) => void;
+    /** Called when an error occurs during the booking flow. */
+    onError?: (code: string, message: string) => void;
 }
 /** Steps in the booking flow. */
 type BookingStep = "resource" | "availability" | "details" | "terms" | "payment" | "confirmation";
@@ -465,14 +521,13 @@ interface ProductSelectorProps {
     onSelect: (product: Product) => void;
     loading?: boolean;
     error?: string | null;
-    /** Override layout from provider. */
     layout?: ServiceLayout;
-    /** Override visible count from provider. */
     visibleCount?: number;
-    /** Override category grouping from provider. @default true */
     groupByCategory?: boolean;
+    /** Pre-select a specific category to show (skip category tiles). */
+    initialCategory?: string;
 }
-declare function ProductSelector({ products, resources, selectedId, onSelect, loading, error, layout: layoutProp, visibleCount: visibleCountProp, groupByCategory: groupByCategoryProp, }: ProductSelectorProps): react_jsx_runtime.JSX.Element;
+declare function ProductSelector({ products, resources, selectedId, onSelect, loading, error, layout: layoutProp, visibleCount: visibleCountProp, groupByCategory: groupByCategoryProp, initialCategory, }: ProductSelectorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Validate the guest form. Returns an errors object (empty = valid).
@@ -743,4 +798,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, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, 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, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, 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, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };

package/dist/index.d.ts

@@ -234,6 +234,28 @@ interface ResiraClassNames {
     /** Price preview panel. */
     pricePreview?: string;
 }
+/** Pre-filled selection data for deeplink integration. */
+interface DeeplinkSelection {
+    /** Pre-selected product/service ID. */
+    productId?: string;
+    /** Pre-selected date (YYYY-MM-DD). */
+    date?: string;
+    /** Pre-selected party size. */
+    partySize?: number;
+    /** Pre-selected duration in minutes. */
+    duration?: number;
+}
+/** Pre-filled guest data for deeplink integration. */
+interface DeeplinkGuest {
+    /** Guest name. */
+    name?: string;
+    /** Guest email. */
+    email?: string;
+    /** Guest phone. */
+    phone?: string;
+    /** Notes. */
+    notes?: string;
+}
 /** Configuration passed to ResiraProvider. */
 interface ResiraProviderConfig {
     /** Theme overrides. */
@@ -270,6 +292,23 @@ interface ResiraProviderConfig {
     showRemainingSpots?: boolean;
     /** Percentage of total to charge upfront (0-100). Default 100. */
     depositPercent?: number;
+    /** Whether to show the step indicator bar. @default true */
+    showStepIndicator?: boolean;
+    /** Pre-fill booking data for deeplink integration. */
+    deeplink?: DeeplinkSelection;
+    /** Pre-fill guest information. */
+    deeplinkGuest?: DeeplinkGuest;
+    /** Called when the booking step changes. */
+    onStepChange?: (step: BookingStep) => void;
+    /** Called when a booking is successfully completed. */
+    onBookingComplete?: (data: {
+        reservationId?: string;
+        product?: Product;
+        selection: BookingSelection;
+        guest: GuestFormValues;
+    }) => void;
+    /** Called when an error occurs during the booking flow. */
+    onError?: (code: string, message: string) => void;
 }
 /** Props for the ResiraProvider component. */
 interface ResiraProviderProps {
@@ -336,6 +375,23 @@ interface ResiraContextValue {
     groupServicesByCategory: boolean;
     /** Custom render function for service cards. */
     renderServiceCard?: (product: Product, selected: boolean) => React.ReactNode;
+    /** Whether the step indicator bar is visible. */
+    showStepIndicator: boolean;
+    /** Pre-fill booking data for deeplink integration. */
+    deeplink?: DeeplinkSelection;
+    /** Pre-fill guest information. */
+    deeplinkGuest?: DeeplinkGuest;
+    /** Called when the booking step changes. */
+    onStepChange?: (step: BookingStep) => void;
+    /** Called when a booking is successfully completed. */
+    onBookingComplete?: (data: {
+        reservationId?: string;
+        product?: Product;
+        selection: BookingSelection;
+        guest: GuestFormValues;
+    }) => void;
+    /** Called when an error occurs during the booking flow. */
+    onError?: (code: string, message: string) => void;
 }
 /** Steps in the booking flow. */
 type BookingStep = "resource" | "availability" | "details" | "terms" | "payment" | "confirmation";
@@ -465,14 +521,13 @@ interface ProductSelectorProps {
     onSelect: (product: Product) => void;
     loading?: boolean;
     error?: string | null;
-    /** Override layout from provider. */
     layout?: ServiceLayout;
-    /** Override visible count from provider. */
     visibleCount?: number;
-    /** Override category grouping from provider. @default true */
     groupByCategory?: boolean;
+    /** Pre-select a specific category to show (skip category tiles). */
+    initialCategory?: string;
 }
-declare function ProductSelector({ products, resources, selectedId, onSelect, loading, error, layout: layoutProp, visibleCount: visibleCountProp, groupByCategory: groupByCategoryProp, }: ProductSelectorProps): react_jsx_runtime.JSX.Element;
+declare function ProductSelector({ products, resources, selectedId, onSelect, loading, error, layout: layoutProp, visibleCount: visibleCountProp, groupByCategory: groupByCategoryProp, initialCategory, }: ProductSelectorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Validate the guest form. Returns an errors object (empty = valid).
@@ -743,4 +798,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, ChevronLeftIcon, ChevronRightIcon, ClockIcon, ConfirmationView, CreditCardIcon, CubeIcon, DEFAULT_LOCALE, DEFAULT_THEME, 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, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };
+export { AlertCircleIcon, BookingCalendar, BookingModal, type BookingSelection, type BookingStep, CalendarIcon, CheckCircleIcon, CheckIcon, 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, useDish, useDishes, usePaymentIntent, useProducts, useReservation, useResira, useResources, validateGuestForm };

package/dist/index.js

@@ -222,6 +222,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 = useMemo(() => themeToCSS(theme), [theme]);
   const value = useMemo(
     () => ({
@@ -248,9 +254,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__ */ jsx(ResiraContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "resira-root", style: cssVars, children }) });
 }
@@ -1630,39 +1642,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__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M19 12H5" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 19l-7-7 7-7" })
+  ] });
+}
+function CategoryTile({
+  group,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "resira-category-tile",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "resira-category-tile-image", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: group.imageUrl || PLACEHOLDER_IMG2,
+              alt: group.label,
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "resira-category-tile-overlay" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "resira-category-tile-content", children: [
+          /* @__PURE__ */ jsx("h3", { className: "resira-category-tile-name", children: group.label }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx("div", { className: "resira-service-card-image", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "resira-service-overlay-card-bg", children: /* @__PURE__ */ jsx(
       "img",
       {
         src: product.imageUrl ?? PLACEHOLDER_IMG2,
@@ -1670,30 +1733,27 @@ function DefaultServiceCard({
         loading: "lazy"
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "resira-service-card-body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "resira-service-card-top", children: [
-        /* @__PURE__ */ jsx("h3", { className: "resira-service-card-name", children: product.name }),
-        product.description && /* @__PURE__ */ jsx("p", { className: "resira-service-card-desc", children: product.description })
+    /* @__PURE__ */ jsx("div", { className: "resira-service-overlay-card-gradient" }),
+    /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-content", children: [
+      /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-top", children: [
+        /* @__PURE__ */ jsx("h3", { className: "resira-service-overlay-card-name", children: product.name }),
+        product.description && /* @__PURE__ */ jsx("p", { className: "resira-service-overlay-card-desc", children: product.description })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "resira-service-card-bottom", children: [
-        /* @__PURE__ */ jsxs("span", { className: "resira-service-card-price", children: [
+      /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-bottom", children: [
+        /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-price", children: [
           formatPrice2(product.priceCents, currency),
-          /* @__PURE__ */ jsxs("span", { className: "resira-service-card-price-unit", children: [
+          /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-price-unit", children: [
             "/",
             priceLabel
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "resira-service-card-pills", children: [
-          product.durationMinutes > 0 && /* @__PURE__ */ jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsx(ClockIcon, { size: 12 }),
+        /* @__PURE__ */ jsxs("div", { className: "resira-service-overlay-card-pills", children: [
+          product.durationMinutes > 0 && /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+            /* @__PURE__ */ jsx(ClockIcon, { size: 11 }),
             formatDuration2(product.durationMinutes)
           ] }),
-          product.pricingModel === "per_person" && /* @__PURE__ */ jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsx(UsersIcon, { size: 12 }),
-            product.maxPartySize ? `1\u2013${product.maxPartySize}` : locale.perPerson
-          ] }),
-          product.maxPartySize && product.pricingModel !== "per_person" && /* @__PURE__ */ jsxs("span", { className: "resira-service-card-pill", children: [
-            /* @__PURE__ */ jsx(UsersIcon, { size: 12 }),
+          product.maxPartySize && /* @__PURE__ */ jsxs("span", { className: "resira-service-overlay-card-pill", children: [
+            /* @__PURE__ */ jsx(UsersIcon, { size: 11 }),
             "max ",
             product.maxPartySize
           ] })
@@ -1721,7 +1781,8 @@ function ProductSelector({
   error = null,
   layout: layoutProp,
   visibleCount: visibleCountProp,
-  groupByCategory: groupByCategoryProp
+  groupByCategory: groupByCategoryProp,
+  initialCategory
 }) {
   const {
     locale,
@@ -1735,21 +1796,37 @@ function ProductSelector({
   const visibleCount = visibleCountProp ?? providerCount;
   const groupByCategory = groupByCategoryProp ?? providerGroupByCategory;
   const containerRef = useRef(null);
+  const [activeCategory, setActiveCategory] = useState(initialCategory ?? null);
   const productGroups = 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 = useMemo(() => {
-    if (layout === "horizontal") {
-      return {};
+  const skipCategoryView = productGroups.length <= 1;
+  useEffect(() => {
+    if (initialCategory && productGroups.some((g) => g.id === initialCategory)) {
+      setActiveCategory(initialCategory);
+    }
+  }, [initialCategory, productGroups]);
+  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 = useMemo(
+    () => productGroups.find((g) => g.id === activeCategory) ?? null,
+    [productGroups, activeCategory]
+  );
+  const displayProducts = useMemo(() => {
+    if (skipCategoryView) return products;
+    return activeCategoryGroup?.products ?? [];
+  }, [skipCategoryView, products, activeCategoryGroup]);
+  const containerStyle = 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__ */ jsxs("div", { className: "resira-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
       /* @__PURE__ */ jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
@@ -1762,54 +1839,64 @@ function ProductSelector({
   if (products.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "resira-empty", children: /* @__PURE__ */ jsx("p", { children: "No services available at the moment." }) });
   }
+  if (groupByCategory && !skipCategoryView && !activeCategory) {
+    return /* @__PURE__ */ jsx("div", { className: "resira-service-picker", children: /* @__PURE__ */ jsx("div", { className: "resira-category-grid", children: productGroups.map((group) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "resira-service-picker", children: [
+    groupByCategory && !skipCategoryView && activeCategory && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "resira-category-back",
+        onClick: () => setActiveCategory(null),
+        children: [
+          /* @__PURE__ */ jsx(BackArrow, {}),
+          /* @__PURE__ */ jsx("span", { children: activeCategoryGroup?.label ?? "All categories" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: containerRef,
-        className: groupByCategory ? "resira-service-group-list" : listClassName,
+        className: listClassName,
         style: containerStyle,
-        children: productGroups.map((group) => /* @__PURE__ */ jsxs("section", { className: "resira-service-group", "aria-label": group.label || locale.chooseService, children: [
-          groupByCategory && group.label && /* @__PURE__ */ jsxs("div", { className: "resira-service-group-header", children: [
-            /* @__PURE__ */ jsx("h3", { className: "resira-service-group-title", children: group.label }),
-            /* @__PURE__ */ jsx("span", { className: "resira-service-group-count", children: group.products.length })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: groupByCategory ? groupedListClassName : listClassName, children: group.products.map((product) => {
-            const isSelected = selectedId === product.id;
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "resira-service-card-btn",
-                onClick: () => onSelect(product),
-                "aria-pressed": isSelected,
-                children: renderServiceCard ? renderServiceCard(product, isSelected) : /* @__PURE__ */ 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__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "resira-service-card-btn",
+              onClick: () => onSelect(product),
+              "aria-pressed": isSelected,
+              children: renderServiceCard ? renderServiceCard(product, isSelected) : /* @__PURE__ */ jsx(
+                ServiceOverlayCard,
+                {
+                  product,
+                  isSelected,
+                  locale,
+                  cardClassName: isSelected ? classNames.serviceCardSelected : classNames.serviceCard
+                }
+              )
+            },
+            product.id
+          );
+        })
       }
     ),
-    layout === "vertical" && products.length > visibleCount && /* @__PURE__ */ jsxs("div", { className: "resira-service-scroll-hint", children: [
+    displayProducts.length > visibleCount && /* @__PURE__ */ jsxs("div", { className: "resira-service-scroll-hint", children: [
       /* @__PURE__ */ jsx("span", { children: "Scroll for more" }),
       /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" }) })
     ] })
@@ -2604,7 +2691,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";
@@ -2962,8 +3055,9 @@ function ResiraBookingWidget() {
       setStep("confirmation");
     }
   }, [createPayment, paymentPayload, confirmPayment]);
-  const handlePaymentError = useCallback((_msg) => {
-  }, []);
+  const handlePaymentError = useCallback((msg) => {
+    onError?.("payment_error", msg);
+  }, [onError]);
   const handleSubmitNoPayment = useCallback(async () => {
     if (showTerms && !termsAccepted) {
       setTermsError(locale.termsRequired);
@@ -2993,9 +3087,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] = useState(false);
+  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]);
+  useEffect(() => {
+    onStepChange?.(step);
+  }, [step, onStepChange]);
+  useEffect(() => {
+    if (step === "confirmation") {
+      const bookingId = reservation?.id ?? paymentIntent?.reservationId;
+      onBookingComplete?.({
+        reservationId: bookingId,
+        product: selectedProduct ?? void 0,
+        selection,
+        guest
+      });
+    }
+  }, [step]);
+  useEffect(() => {
+    if (submitError) onError?.("submit_error", submitError);
+  }, [submitError, onError]);
+  useEffect(() => {
+    if (paymentError) onError?.("payment_error", paymentError);
+  }, [paymentError, onError]);
   return /* @__PURE__ */ jsxs("div", { className: "resira-widget", children: [
     step !== "confirmation" && /* @__PURE__ */ jsxs("div", { className: "resira-widget-topbar", children: [
-      /* @__PURE__ */ jsx("nav", { className: "resira-steps", "aria-label": "Booking steps", children: STEPS.filter((s) => s !== "confirmation").map((s, i) => {
+      showStepIndicator && /* @__PURE__ */ 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__ */ jsxs(