@lime-bundles/react 7.0.0 → 7.2.0

package/README.md

@@ -43,6 +43,7 @@ Same props for `<VolumeBundle>` and `<MixMatchBundle>`.
 | `onError` | `(error: Error) => void` |  | Fires on fetch, parse, or cart failure. |
 | `locale` | `string` |  | BCP-47 tag forwarded to the Storefront API. |
 | `className` | `string` |  | Applied to the outer wrapper. |
+| `productId` | `string` |  | The product page the component is rendered on — full GID or bare numeric id. `<VolumeBundle>` prices and sells this product; without it, it falls back to the bundle's first product, so always pass it for bundles spanning more than one product. |
 
 `CartLineInput` matches Shopify Hydrogen's shape. A structural-compat test guards the contract across versions. Always preserve `attributes[]` so `_lime_bundle_gid` reaches Shopify; the `orders/create` webhook keys off it for purchase attribution.
 

package/dist/index.cjs

@@ -1004,7 +1004,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
             src: thumbImage.url,
             alt: thumbImage.altText ?? product.title,
             className: "lb-bundle__product-image",
-            loading: "lazy"
+            loading: "lazy",
+            width: thumbImage.width ?? void 0,
+            height: thumbImage.height ?? void 0
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
@@ -1610,7 +1612,9 @@ function MixMatchPickerRow({
             {
               src: thumbImage.url,
               alt: thumbImage.altText ?? product.title,
-              loading: "lazy"
+              loading: "lazy",
+              width: thumbImage.width ?? void 0,
+              height: thumbImage.height ?? void 0
             }
           ),
           variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
@@ -2336,7 +2340,8 @@ function VolumeBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    productId
   } = props;
   const result = useBundleData({
     shopDomain,
@@ -2386,7 +2391,7 @@ function VolumeBundle(props) {
       );
     }
   }, [result, onError]);
-  const product = bundle?.products[0];
+  const product = bundle ? (0, import_core11.resolveContextProduct)(bundle.products, { productId }) : void 0;
   const variants = (0, import_react13.useMemo)(() => product?.variants.nodes ?? [], [product]);
   const optionNames = (0, import_react13.useMemo)(() => {
     const first = variants[0];
@@ -2519,7 +2524,9 @@ function VolumeBundle(props) {
               src: thumbImage.url,
               alt: thumbImage.altText ?? product.title,
               className: "lb-bundle__product-image",
-              loading: "lazy"
+              loading: "lazy",
+              width: thumbImage.width ?? void 0,
+              height: thumbImage.height ?? void 0
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__product-info", children: [
@@ -2963,7 +2970,9 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
         src: thumbImage.url,
         alt: thumbImage.altText ?? product.title,
         className: "lb-bundle__product-image",
-        loading: "lazy"
+        loading: "lazy",
+        width: thumbImage.width ?? void 0,
+        height: thumbImage.height ?? void 0
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__product-info", children: [
@@ -3515,7 +3524,9 @@ function MultiStepPickerRow({
             {
               src: thumbImage.url,
               alt: thumbImage.altText ?? product.title,
-              loading: "lazy"
+              loading: "lazy",
+              width: thumbImage.width ?? void 0,
+              height: thumbImage.height ?? void 0
             }
           ),
           variantInStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
@@ -3809,6 +3820,9 @@ function MultiStepBundle(props) {
   const allSatisfied = steps.length > 0 && steps.every((_, i) => stepSatisfied(i));
   const valid = !!bundle && allSatisfied;
   const completedSteps = steps.filter((_, i) => stepSatisfied(i)).length;
+  const firstUnsatisfied = steps.findIndex((_, i) => !stepSatisfied(i));
+  const remainingSteps = steps.length - completedSteps;
+  const anyPicks = selections.some((s) => s.length > 0);
   const summary = (0, import_react16.useMemo)(() => {
     let comparePrice = 0;
     let salePrice = 0;
@@ -4051,115 +4065,156 @@ function MultiStepBundle(props) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          "section",
-          {
-            className: "lb-multi-step__group",
-            "data-step-group": i,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react16.Fragment, { children: [
+          i === firstUnsatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "lb-mix-match__add-product lb-multi-step__door",
+              "data-step-door": firstUnsatisfied,
+              "aria-label": `${anyPicks ? "Continue building" : "Choose your products"}: ${step.name}`,
+              onClick: () => setPickerOpenAt(firstUnsatisfied),
+              children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "span",
                   {
-                    className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
-                    "data-step-count": i,
-                    children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
+                    className: "lb-mix-match__add-product-icon",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon2, {})
                   }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "div",
-                {
-                  className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
-                  "data-step-slots": i,
-                  children: (selections[i] ?? []).map((item, index) => (
-                    /* Whole card reopens the wizard AT this step. The inner
-                       title button provides the keyboard/AT path (its
-                       activation bubbles here); × stops propagation. */
-                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "div",
-                      {
-                        className: "lb-mix-match__slot lb-mix-match__slot--filled",
-                        onClick: () => setPickerOpenAt(i),
-                        children: [
-                          item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            "img",
-                            {
-                              src: item.featuredImage,
-                              alt: item.title,
-                              loading: "lazy"
-                            }
-                          ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                              "button",
-                              {
-                                type: "button",
-                                className: "lb-mix-match__filled-title",
-                                "aria-label": `Edit selection: ${item.title}`,
-                                children: item.title
-                              }
-                            ),
-                            item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
-                              item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core14.formatMoney)(item.compareAtPrice, currency) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core14.formatMoney)(item.price, currency) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
-                            ] }),
-                            item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
-                          ] }),
-                          canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            "button",
-                            {
-                              type: "button",
-                              className: "lb-mix-match__slot-remove",
-                              "aria-label": `Remove ${item.title}`,
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                removeSlot(i, index);
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon4, {})
-                            }
-                          ) : (
-                            /* Required pick at its floor — quiet state chip instead
-                               of the ×; removal returns once another slot covers
-                               the product's minimum (variant swap flow). */
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
-                          )
-                        ]
-                      },
-                      `${item.productId}:${item.variantId}:${index}`
-                    )
-                  ))
-                }
-              ),
-              (0, import_core14.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-multi-step__door-copy", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__add-product-label", children: anyPicks ? "Continue building" : "Choose your products" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__door-sub", children: anyPicks ? `${remainingSteps} ${remainingSteps === 1 ? "step" : "steps"} to go` : `${steps.length} quick ${steps.length === 1 ? "step" : "steps"}` })
+                ] })
+              ]
+            }
+          ),
+          (selections[i] ?? []).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "section",
+            {
+              className: "lb-multi-step__group",
+              "data-step-group": i,
+              "data-step-mode": "row",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "button",
                 {
                   type: "button",
-                  className: "lb-mix-match__add-product lb-multi-step__step-trigger",
-                  "data-step-trigger": i,
+                  className: "lb-multi-step__step-row",
+                  "data-step-row": i,
                   "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
                   onClick: () => setPickerOpenAt(i),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
-                        className: "lb-mix-match__add-product-icon",
+                        className: "lb-multi-step__step-ix",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon2, {})
+                        children: i + 1
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "span",
+                      {
+                        className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
+                        "data-step-count": i,
+                        children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
+                      }
+                    )
                   ]
                 }
               )
-            ]
-          },
-          i
-        )) }),
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "section",
+            {
+              className: "lb-multi-step__group",
+              "data-step-group": i,
+              "data-step-mode": "open",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "span",
+                    {
+                      className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
+                      "data-step-count": i,
+                      children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "div",
+                  {
+                    className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
+                    "data-step-slots": i,
+                    children: (selections[i] ?? []).map((item, index) => (
+                      /* Whole card reopens the wizard AT this step. The inner
+                         title button provides the keyboard/AT path (its
+                         activation bubbles here); × stops propagation. */
+                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                        "div",
+                        {
+                          className: "lb-mix-match__slot lb-mix-match__slot--filled",
+                          onClick: () => setPickerOpenAt(i),
+                          children: [
+                            item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              "img",
+                              {
+                                src: item.featuredImage,
+                                alt: item.title,
+                                loading: "lazy"
+                              }
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: "lb-mix-match__filled-title",
+                                  "aria-label": `Edit selection: ${item.title}`,
+                                  children: item.title
+                                }
+                              ),
+                              item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
+                                item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core14.formatMoney)(item.compareAtPrice, currency) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core14.formatMoney)(item.price, currency) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
+                              ] }),
+                              item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
+                            ] }),
+                            canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                className: "lb-mix-match__slot-remove",
+                                "aria-label": `Remove ${item.title}`,
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  removeSlot(i, index);
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon4, {})
+                              }
+                            ) : (
+                              /* Required pick at its floor — quiet state chip instead
+                                 of the ×; removal returns once another slot covers
+                                 the product's minimum (variant swap flow). */
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
+                            )
+                          ]
+                        },
+                        `${item.productId}:${item.variantId}:${index}`
+                      )
+                    ))
+                  }
+                )
+              ]
+            }
+          )
+        ] }, i)) }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-divider" }),
         allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary__text", children: [