@propeller-commerce/propeller-v2-react-ui 0.26.0 → 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

@@ -7,7 +7,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ProductStatus, ProductSortField, SortOrder, CrossupsellType, PriceDisplay, CartStatus, CartAddressType, Gender, YesNo, AddressType, MagicTokenService, PaymentStatuses, OrderSearchFields, OrderItemClass, ProductSearchableField, machineService, PurchaseRole, AttributeType, OrderSortField, OrderType, BundleCondition, OrderDiscountType } from '@propeller-commerce/propeller-sdk-v2';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { User, Trash2, MessageSquareQuote } from 'lucide-react';
+import { User, Trash2, Tag } from 'lucide-react';
 
 // src/index.ts
 var PropellerDepsContext = createContext(null);
@@ -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(
@@ -7638,7 +7655,7 @@ function CartIconAndSidebar(rawProps) {
               ]
             }
           ),
-          props.showTotals && isHovered && totalItems > 0 ? /* @__PURE__ */ jsxs("div", { className: "propeller-cart-icon__popover absolute top-full right-0 mt-1 z-40 bg-popover border border-border rounded-container shadow-lg px-3 py-2 min-w-[140px] text-sm whitespace-nowrap", children: [
+          props.showTotals && isHovered && totalItems > 0 ? /* @__PURE__ */ jsxs("div", { className: "propeller-cart-icon__popover absolute top-full right-0 mt-1 z-40 bg-popover text-foreground border border-border rounded-container shadow-lg px-3 py-2 min-w-[140px] text-sm whitespace-nowrap", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4", children: [
               /* @__PURE__ */ jsx("span", { className: "propeller-cart-icon__popover-label text-muted-foreground", children: totalLabel("totalLabel") }),
               /* @__PURE__ */ jsx("span", { className: "propeller-cart-icon__popover-total font-semibold text-foreground", children: totalPrice })
@@ -7666,7 +7683,7 @@ function CartIconAndSidebar(rawProps) {
         "aria-modal": "true",
         "aria-label": sidebarTitle,
         "data-open": sidebarOpen ? "true" : "false",
-        className: cn(`propeller-cart-icon__sidebar fixed inset-y-0 right-0 z-[70] w-full max-w-md bg-card shadow-2xl transform transition-transform duration-300 ease-in-out border-l border-border${sidebarOpen ? " translate-x-0" : " translate-x-full"}${props.sidebarClassName ? " " + props.sidebarClassName : ""}`),
+        className: cn(`propeller-cart-icon__sidebar fixed inset-y-0 right-0 z-[70] w-full max-w-md bg-card text-foreground shadow-2xl transform transition-transform duration-300 ease-in-out border-l border-border${sidebarOpen ? " translate-x-0" : " translate-x-full"}${props.sidebarClassName ? " " + props.sidebarClassName : ""}`),
         children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full", children: isMounted ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { className: "propeller-cart-icon__sidebar-header flex items-center justify-between px-5 py-4 border-b border-border", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -9327,7 +9344,7 @@ function ProductCardPrice(props) {
   ) });
 }
 function ProductCardAddToCart(props) {
-  const { product, resolved } = useProductCard();
+  const { product, derived, resolved, handleProductClick } = useProductCard();
   if (isContentHidden(resolved.portalMode, resolved.user, resolved.isAuthenticated)) {
     return /* @__PURE__ */ jsx(
       LoginToOrderButton_default,
@@ -9338,6 +9355,19 @@ function ProductCardAddToCart(props) {
       }
     );
   }
+  if (isPriceOnRequest(product)) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: derived.productUrl,
+        onClick: handleProductClick,
+        className: cn(
+          `propeller-product-card__view-product inline-flex h-10 w-full items-center justify-center rounded-control bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 ${props.className || ""}`
+        ),
+        children: getLabel(resolved.priceLabels, "requestPrice", "Request a price")
+      }
+    );
+  }
   const InjectedAddToCart = resolved.addToCartComponent;
   if (InjectedAddToCart) {
     return /* @__PURE__ */ jsx(
@@ -11893,7 +11923,7 @@ function FavoriteListItemActions(props) {
       className: props.className ?? "propeller-favorite-list-item__actions flex items-center gap-2 flex-shrink-0",
       onClick: (e) => e.stopPropagation(),
       children: [
-        resolved.allowAddToCart !== false && isProduct && !!resolved.graphqlClient ? /* @__PURE__ */ jsx(
+        resolved.allowAddToCart !== false && isProduct && !!resolved.graphqlClient && !isPriceOnRequest(product) ? /* @__PURE__ */ jsx(
           AddToCart_default,
           {
             className: "flex items-center gap-2",
@@ -13870,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";
 }
@@ -13893,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;
@@ -14656,7 +14709,7 @@ function RequestPriceButton(props) {
         if (props.onRequestPrice) props.onRequestPrice();
       },
       children: [
-        /* @__PURE__ */ jsx(MessageSquareQuote, { className: "propeller-request-price__icon w-4 h-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(Tag, { className: "propeller-request-price__icon w-4 h-4", "aria-hidden": "true" }),
         label
       ]
     }
@@ -14664,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 {
@@ -14675,6 +14732,7 @@ function blankRow() {
     grossPrice: 0,
     quantity: 1,
     minQuantity: 1,
+    step: 1,
     matches: [],
     searching: false,
     searched: false
@@ -14768,6 +14826,7 @@ function QuickOrderInner(props) {
         grossPrice: match.grossPrice,
         quantity: match.minQuantity,
         minQuantity: match.minQuantity,
+        step: match.step,
         matches: [],
         searching: false,
         searched: false
@@ -14780,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
         )
       );
     },
@@ -14833,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) {
@@ -14964,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),
@@ -19332,7 +19392,7 @@ function SearchBar(rawProps) {
                 // boilerplate's dark header band happened to make work: on a
                 // light header `bg-white/95 border-white/20` rendered as an
                 // invisible input.
-                "propeller-search-bar__input w-full pl-10 pr-10 py-2 bg-card border border-input rounded-container focus:outline-none focus:ring-2 focus:ring-secondary placeholder:text-muted-foreground",
+                "propeller-search-bar__input w-full pl-10 pr-10 py-2 bg-card text-foreground border border-input rounded-container focus:outline-none focus:ring-2 focus:ring-secondary placeholder:text-muted-foreground",
                 props.inputClassName
               ),
               placeholder: props.placeholder || "Search products...",
@@ -19342,7 +19402,7 @@ function SearchBar(rawProps) {
           ),
           searchLoading ? /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__spinner-wrapper absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__spinner animate-spin rounded-full h-5 w-5 border-b-2 border-primary" }) }) : null
         ] }) }),
-        showDropdown ? /* @__PURE__ */ jsxs("div", { className: "propeller-search-bar__dropdown absolute top-full left-0 right-0 mt-2 bg-card rounded-container shadow-xl border border-border z-50 flex flex-col max-h-96", children: [
+        showDropdown ? /* @__PURE__ */ jsxs("div", { className: "propeller-search-bar__dropdown absolute top-full left-0 right-0 mt-2 bg-card text-foreground rounded-container shadow-xl border border-border z-50 flex flex-col max-h-96", children: [
           results.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__results flex-1 overflow-y-auto", children: results?.map((result, index) => {
               const ResultTag = props.getResultHref ? "a" : "div";