@resira/ui 0.4.3 → 0.4.6

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

@@ -1606,6 +1606,99 @@ function formatDuration(minutes) {
   return `${h}h ${m}m`;
 }
 var PLACEHOLDER_IMG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240' fill='%23e2e8f0'%3E%3Crect width='400' height='240' rx='8'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='system-ui' font-size='16' fill='%2394a3b8'%3ENo image%3C/text%3E%3C/svg%3E";
+function resolveImages(resource) {
+  if (resource.images && resource.images.length > 0) return resource.images;
+  if (resource.imageUrl) return [{ url: resource.imageUrl }];
+  return [];
+}
+function ChevronLeftIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronRightIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ResourceImageCarousel({
+  images,
+  alt
+}) {
+  const [idx, setIdx] = react.useState(0);
+  const hasMultiple = images.length > 1;
+  const current = images[idx] ?? images[0];
+  const goPrev = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      setIdx((i) => (i - 1 + images.length) % images.length);
+    },
+    [images.length]
+  );
+  const goNext = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      setIdx((i) => (i + 1) % images.length);
+    },
+    [images.length]
+  );
+  if (!current) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: PLACEHOLDER_IMG,
+        alt,
+        loading: "lazy"
+      }
+    );
+  }
+  const ds = current.displaySettings;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-resource-carousel", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: current.url,
+        alt,
+        loading: "lazy",
+        style: {
+          objectFit: ds?.objectFit ?? "cover",
+          objectPosition: ds?.objectPosition ?? "center center",
+          transform: ds?.zoom && ds.zoom !== 1 ? `scale(${ds.zoom})` : void 0
+        }
+      }
+    ),
+    hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-resource-carousel-btn resira-resource-carousel-prev",
+          onClick: goPrev,
+          "aria-label": "Previous image",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon2, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-resource-carousel-btn resira-resource-carousel-next",
+          onClick: goNext,
+          "aria-label": "Next image",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon2, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-resource-carousel-dots", children: images.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `resira-resource-carousel-dot${i === idx ? " resira-resource-carousel-dot--active" : ""}`
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-resource-carousel-count", children: [
+        idx + 1,
+        "/",
+        images.length
+      ] })
+    ] })
+  ] });
+}
 function ResourcePicker({
   resources,
   selectedIds,
@@ -1641,14 +1734,17 @@ function ResourcePicker({
           onClick: () => onSelect(resource.id),
           "aria-pressed": isSelected,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-resource-card-image", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: resource.imageUrl ?? PLACEHOLDER_IMG,
-                alt: resource.name,
-                loading: "lazy"
-              }
-            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-resource-card-image", children: (() => {
+              const images = resolveImages(resource);
+              return images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ResourceImageCarousel, { images, alt: resource.name }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: PLACEHOLDER_IMG,
+                  alt: resource.name,
+                  loading: "lazy"
+                }
+              );
+            })() }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-resource-card-content", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "resira-resource-card-name", children: resource.name }),
               resource.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-resource-card-description", children: resource.description }),
@@ -1716,17 +1812,18 @@ function groupProductsByCategory(products, resources) {
     const groupId = categoryType?.toLowerCase() ?? UNCATEGORIZED_CATEGORY_KEY;
     const label = categoryType ? formatCategoryLabel(categoryType) : UNCATEGORIZED_CATEGORY_LABEL;
     if (!groups.has(groupId)) {
+      const catImage = categoryResource?.images?.[0]?.url ?? categoryResource?.imageUrl ?? void 0;
       groups.set(groupId, {
         id: groupId,
         label,
-        imageUrl: categoryResource?.imageUrl ?? void 0,
+        imageUrl: catImage,
         products: []
       });
     }
     const group = groups.get(groupId);
     group.products.push(product);
-    if (!group.imageUrl && categoryResource?.imageUrl) {
-      group.imageUrl = categoryResource.imageUrl;
+    if (!group.imageUrl && categoryResource) {
+      group.imageUrl = categoryResource.images?.[0]?.url ?? categoryResource.imageUrl;
     }
   });
   return Array.from(groups.values());
@@ -1779,10 +1876,6 @@ 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}`;
@@ -1803,22 +1896,17 @@ function ServiceOverlayCard({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-service-overlay-card-bottom", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-service-overlay-card-price", children: [
-          pricePrefix,
-          formatPrice2(lowestPrice, currency),
+          formatPrice2(product.priceCents, 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: [
-          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: [
+          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 ",
@@ -3035,14 +3123,8 @@ function ResiraBookingWidget() {
           partySize: clampedPartySize
         };
       });
-      if (step === "resource" && isServiceBased) {
-        const nextIdx = stepIndex("resource", STEPS) + 1;
-        if (nextIdx < STEPS.length) {
-          setStep(STEPS[nextIdx]);
-        }
-      }
     },
-    [setActiveResourceId, domainConfig.maxPartySize, step, isServiceBased, STEPS]
+    [setActiveResourceId, domainConfig.maxPartySize]
   );
   const handleResourceSelect = react.useCallback(
     (resourceId) => {