@propeller-commerce/propeller-v2-react-ui 0.26.1 → 0.27.0

package/CHANGELOG.md

@@ -8,6 +8,33 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.27.0] - 2026-09-28
+
+### Fixed
+
+- **A quantity field could not be cleared and retyped.** The typed-input handler
+  only committed a value once it was at or above the minimum, so with a minimum
+  of 2, backspacing to empty or typing "1" was ignored and the previous number
+  stayed stuck in the box. The field now accepts any keystroke while editing and
+  resolves to a valid quantity on blur. (PWP-970)
+
+- **Incrementing an off-grid quantity kept it off-grid.** `increment()` added the
+  step without first snapping to the `min + n*step` grid, so a quantity that was
+  already off it never returned. Both steppers now snap first. (PWP-970)
+
+- **Quick order ignored the order step.** Its quantity input was hardcoded to
+  `step={1}` and nothing snapped, while bulk paste and spreadsheet upload are the
+  primary ordering route for a wholesale account. `QuickOrderMatch` now carries
+  `step` alongside `minQuantity`, and typed quantities snap to it. (PWP-970)
+
+- **`OrderItemCard` accepted a misconfiguration in silence.** It ships from the
+  RSC-safe `/pure` entry and reads no context, so the host must supply `language`
+  and `configuration.urls` — but both are optional, nothing warned, and the
+  failure only showed as a wrong-language name or a link that dropped the locale
+  prefix two clicks later. A development-only warning now names each omission
+  once. `titleLinkable` defaults to true, so the link case applies unless a host
+  opts out. (PWP-972)
+
 ## [0.26.1] - 2026-09-28
 
 ### Fixed

package/dist/index.cjs

@@ -2634,6 +2634,7 @@ function toMatch(item, language) {
   const netPrice = displayItem?.price?.net ?? 0;
   const grossPrice = displayItem?.price?.gross ?? 0;
   const minQuantity = Math.max(1, displayItem?.minimumQuantity ?? 1);
+  const step = Math.max(1, displayItem?.unit ?? 1);
   const imageUrl = isCluster ? propellerV2CoreUi.getClusterImageUrl(item) : propellerV2CoreUi.getProductImageUrl(item);
   return {
     productId,
@@ -2643,6 +2644,7 @@ function toMatch(item, language) {
     netPrice,
     grossPrice,
     minQuantity,
+    step,
     imageUrl,
     priceOnRequest: isPriceOnRequest(item)
   };
@@ -4779,6 +4781,7 @@ function AddToCart(rawProps) {
     onCartCreated: props.onCartCreated
   });
   const [quantity, setQuantity] = React6.useState(() => getMinQuantity(props.product));
+  const [quantityDraft, setQuantityDraft] = React6.useState(null);
   const [toastMessage, setToastMessage] = React6.useState(() => "");
   const [toastType, setToastType] = React6.useState(() => "");
   const [toastVisible, setToastVisible] = React6.useState(() => false);
@@ -4801,16 +4804,42 @@ function AddToCart(rawProps) {
   function dismissToast() {
     setToastVisible(false);
   }
+  function snapQuantity(value) {
+    const min = getMinQuantity(props.product);
+    const step = getStep(props.product);
+    if (value <= min) return min;
+    return Math.round((value - min) / step) * step + min;
+  }
   function increment() {
-    setQuantity(quantity + getStep(props.product));
+    setQuantityDraft(null);
+    const snapped = snapQuantity(quantity);
+    setQuantity(snapped === quantity ? quantity + getStep(props.product) : snapped);
   }
   function decrement() {
     const min = getMinQuantity(props.product);
     const step = getStep(props.product);
+    setQuantityDraft(null);
+    const snapped = snapQuantity(quantity);
+    if (snapped !== quantity) {
+      setQuantity(snapped);
+      return;
+    }
     if (quantity - step >= min) {
       setQuantity(quantity - step);
     }
   }
+  function handleQuantityInput(raw) {
+    setQuantityDraft(raw);
+    const val = parseInt(raw, 10);
+    if (!isNaN(val) && val >= getMinQuantity(props.product)) {
+      setQuantity(snapQuantity(val));
+    }
+  }
+  function handleQuantityBlur() {
+    const val = parseInt(quantityDraft ?? "", 10);
+    setQuantity(isNaN(val) ? getMinQuantity(props.product) : snapQuantity(val));
+    setQuantityDraft(null);
+  }
   function getModalImageUrl() {
     if (addedCartItem) {
       const img = addedCartItem.product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url;
@@ -4940,15 +4969,9 @@ function AddToCart(rawProps) {
                 className: "propeller-add-to-cart__quantity flex-1 md:flex-none md:w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                 min: getMinQuantity(props.product),
                 step: getStep(props.product),
-                value: quantity,
-                onChange: (e) => {
-                  const val = parseInt(e.target.value, 10);
-                  const min = getMinQuantity(props.product);
-                  const step = getStep(props.product);
-                  if (!isNaN(val) && val >= min) {
-                    setQuantity(Math.round((val - min) / step) * step + min);
-                  }
-                }
+                value: quantityDraft ?? quantity,
+                onChange: (e) => handleQuantityInput(e.target.value),
+                onBlur: handleQuantityBlur
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4973,15 +4996,9 @@ function AddToCart(rawProps) {
               className: "propeller-add-to-cart__quantity w-full md:w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
               min: getMinQuantity(props.product),
               step: getStep(props.product),
-              value: quantity,
-              onChange: (e) => {
-                const val = parseInt(e.target.value, 10);
-                const min = getMinQuantity(props.product);
-                const step = getStep(props.product);
-                if (!isNaN(val) && val >= min) {
-                  setQuantity(Math.round((val - min) / step) * step + min);
-                }
-              }
+              value: quantityDraft ?? quantity,
+              onChange: (e) => handleQuantityInput(e.target.value),
+              onBlur: handleQuantityBlur
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13903,6 +13920,28 @@ function OrderActions(rawProps) {
   );
 }
 var OrderActions_default = OrderActions;
+var warnedOnce = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (warnedOnce.has(key)) return;
+  warnedOnce.add(key);
+  console.warn(message);
+}
+function warnMissingProps(props) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!props.language) {
+    warnOnce(
+      "language",
+      "[OrderItemCard] No `language` prop: product names resolve in the default catalogue language, whatever page they are on. This component reads no context (it ships from the RSC-safe /pure entry), so the host must pass it."
+    );
+  }
+  const linkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
+  if (linkable && !props.configuration?.urls) {
+    warnOnce(
+      "urls",
+      "[OrderItemCard] Title is linkable but no `configuration.urls` was passed: links fall back to a literal /product/:id/:slug and lose the locale prefix. Pass the url builders from the host, or set titleLinkable={false}."
+    );
+  }
+}
 function getProductName3(orderItem, language) {
   return propellerV2CoreUi.getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
@@ -13926,6 +13965,7 @@ function getProductUrl(orderItem, language, urls) {
 function OrderItemCard(props) {
   const item = props.orderItem;
   const isChildItem = props.isChildItem || false;
+  warnMissingProps(props);
   const titleLinkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
   const showImage = isChildItem ? false : props.showImage !== void 0 ? props.showImage : true;
   const showSku = isChildItem ? false : props.showSku !== void 0 ? props.showSku : true;
@@ -14697,6 +14737,10 @@ function RequestPriceButton(props) {
 }
 var RequestPriceButton_default = RequestPriceButton;
 var ROW_SEQ = 0;
+function snapToStep(value, min, step) {
+  if (!Number.isFinite(value) || value <= min) return min;
+  return Math.round((value - min) / (step || 1)) * (step || 1) + min;
+}
 function blankRow() {
   ROW_SEQ += 1;
   return {
@@ -14708,6 +14752,7 @@ function blankRow() {
     grossPrice: 0,
     quantity: 1,
     minQuantity: 1,
+    step: 1,
     matches: [],
     searching: false,
     searched: false
@@ -14801,6 +14846,7 @@ function QuickOrderInner(props) {
         grossPrice: match.grossPrice,
         quantity: match.minQuantity,
         minQuantity: match.minQuantity,
+        step: match.step,
         matches: [],
         searching: false,
         searched: false
@@ -14813,7 +14859,7 @@ function QuickOrderInner(props) {
       const n = parseInt(raw, 10);
       setRows(
         (prev) => prev.map(
-          (r) => r.key === key ? { ...r, quantity: Number.isFinite(n) && n > 0 ? Math.max(r.minQuantity, n) : r.minQuantity } : r
+          (r) => r.key === key ? { ...r, quantity: snapToStep(n, r.minQuantity, r.step) } : r
         )
       );
     },
@@ -14866,7 +14912,8 @@ function QuickOrderInner(props) {
             netPrice: exact.netPrice,
             grossPrice: exact.grossPrice,
             quantity: Math.max(exact.minQuantity, line.quantity),
-            minQuantity: exact.minQuantity
+            minQuantity: exact.minQuantity,
+            step: exact.step
           });
         }
         if (resolved.length) {
@@ -14997,7 +15044,7 @@ function QuickOrderInner(props) {
           {
             type: "number",
             min: r.minQuantity,
-            step: 1,
+            step: r.step || 1,
             value: r.productId ? r.quantity : "",
             disabled: !r.productId,
             onChange: (e) => setQuantity(r.key, e.target.value),