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

package/dist/index.d.cts

@@ -1548,6 +1548,8 @@ interface QuickOrderMatch {
     grossPrice: number;
     /** Minimum order quantity (defaults to 1). */
     minQuantity: number;
+    /** Order step: quantities run min, min+step, min+2*step, … (defaults to 1). */
+    step: number;
     /** Thumbnail URL, if any. */
     imageUrl: string;
     /** Price is quoted on request — not orderable through a bulk flow. */

package/dist/index.d.ts

@@ -1548,6 +1548,8 @@ interface QuickOrderMatch {
     grossPrice: number;
     /** Minimum order quantity (defaults to 1). */
     minQuantity: number;
+    /** Order step: quantities run min, min+step, min+2*step, … (defaults to 1). */
+    step: number;
     /** Thumbnail URL, if any. */
     imageUrl: string;
     /** Price is quoted on request — not orderable through a bulk flow. */

package/dist/index.js

@@ -2614,6 +2614,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 ? getClusterImageUrl(item) : getProductImageUrl(item);
   return {
     productId,
@@ -2623,6 +2624,7 @@ function toMatch(item, language) {
     netPrice,
     grossPrice,
     minQuantity,
+    step,
     imageUrl,
     priceOnRequest: isPriceOnRequest(item)
   };
@@ -4759,6 +4761,7 @@ function AddToCart(rawProps) {
     onCartCreated: props.onCartCreated
   });
   const [quantity, setQuantity] = useState(() => getMinQuantity(props.product));
+  const [quantityDraft, setQuantityDraft] = useState(null);
   const [toastMessage, setToastMessage] = useState(() => "");
   const [toastType, setToastType] = useState(() => "");
   const [toastVisible, setToastVisible] = useState(() => false);
@@ -4781,16 +4784,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;
@@ -4920,15 +4949,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__ */ jsxs(
@@ -4953,15 +4976,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__ */ jsxs(
@@ -13883,6 +13900,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 getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
@@ -13906,6 +13945,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;
@@ -14677,6 +14717,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 {
@@ -14688,6 +14732,7 @@ function blankRow() {
     grossPrice: 0,
     quantity: 1,
     minQuantity: 1,
+    step: 1,
     matches: [],
     searching: false,
     searched: false
@@ -14781,6 +14826,7 @@ function QuickOrderInner(props) {
         grossPrice: match.grossPrice,
         quantity: match.minQuantity,
         minQuantity: match.minQuantity,
+        step: match.step,
         matches: [],
         searching: false,
         searched: false
@@ -14793,7 +14839,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
         )
       );
     },
@@ -14846,7 +14892,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) {
@@ -14977,7 +15024,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),