@propeller-commerce/propeller-v2-react-ui 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -8,6 +8,88 @@ 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.30.0] - 2026-10-06
+
+### Added
+
+- **`isPriceOnRequest` is exported from `/shared`.** It was only on the main
+  entry, so a Server Component could not ask "is this a quoted product?"
+  without drawing a client boundary — leaving server-rendered price blocks
+  unable to choose between an amount and the quote label. The function is plain
+  TS with no React, so `/shared` is where it belongs.
+
+### Fixed
+
+- **`<SearchBar>` resolves its placeholder from `labels`.** It read
+  `props.placeholder` and fell straight back to the English
+  `'Search products...'`, never consulting the label bag every other string in
+  the component goes through. A host that passed only `labels` therefore got an
+  English placeholder in an otherwise translated header. The explicit prop
+  still wins, then `labels.placeholder`, then English.
+
+## [0.29.0] - 2026-10-05
+
+### Fixed
+
+- **Listings no longer drop the company's orderlist on a client-side fetch.**
+  `useProductSearch` sent `applyOrderlists: false` whenever the caller passed
+  no explicit `orderlistIds` — which is every app — so the backend was told to
+  ignore the company's own orderlists. The server render omits the flag and is
+  correctly scoped, so a category page painted the right products and then the
+  first sort, filter, page or company change replaced them with the unscoped
+  catalogue, priced and orderable. The flag is now sent only when the caller
+  actually asks for it, in both the grid fetch and the search-bar preview.
+  `useQuickOrder` had the same default, which let a bulk paste resolve SKUs
+  outside the contract.
+
+  Callers that relied on the implicit `false` for an intentionally unscoped
+  listing must now pass `applyOrderlists={false}` explicitly.
+
+- **`<ProductSlider>` is scoped to the viewer and priced for their company.**
+  `fetchProducts` sent no `userId`, no `companyId` and no
+  `priceCalculateProductInput`, and resolved its ids through the flat
+  `products` resolver, which does not apply orderlist scoping. A featured
+  slider therefore showed products outside the company's assortment at the
+  default company's prices. Its `filterToAssortment` step — whose only job is
+  dropping out-of-assortment crossupsells — asked the same resolver and so
+  could never filter anything. Both now go through `category.products` over
+  `configuration.baseCategoryId`, the path the grid and quick order already
+  use. Without a resolved base category the primary fetch returns nothing
+  rather than an unscoped list, while the crossupsell check falls through to
+  the unverified items so a slider is never blanked by a failed check.
+
+- **Cart quantity steppers keep the line on the order grid.** `CartItem` read
+  `minimumQuantity` and the step but used them only to disable the decrement
+  button: the buttons added or subtracted the step from whatever was there, so
+  a line already off the grid stayed off it (min 2, step 3: 9 → 12). The typed
+  field committed only values at or above the minimum, so clearing it or typing
+  below the minimum left the old quantity stuck. Both steppers now resolve to
+  the grid first, and editing goes through a draft value that resolves on blur
+  — the same rule `<AddToCart>` and `<QuickOrder>` already followed.
+
+- **Add to cart recovers when the remembered cart is gone.** A cart ordered in
+  another browser or deleted leaves its id behind in the host's storage, and
+  every later `cartAddItem` answered `CART_NOT_FOUND_ERROR`. Nothing forgot the
+  id, so each retry failed identically and the badge kept showing the dead
+  cart. `addItem` now forgets it and starts a fresh cart once, then re-adds;
+  the recovery is bounded because cart initialisation only ever returns an
+  `OPEN` cart, and it is skipped when the caller passed `createCart: false`.
+
+- **`useProductInfo` no longer sends every company orderlist as an allowlist.**
+  It fetched all orderlists for the company and passed their ids to
+  `product(orderlistIds:)` with no filter on type, so a NEGATIVE (exclusion)
+  list was applied as an allowlist and inverted the filter. Scoping is left to
+  the backend, which merges positive and negative lists itself — one fewer
+  request per product page.
+
+### Changed
+
+- **The min/step rule comes from `propeller-v2-core-ui`.** `AddToCart`,
+  `QuickOrder` and `CartItem` each carried their own copy, and they had
+  drifted — two of them divided by an unguarded step. All now call
+  `resolveOrderableQuantity` from core-ui 0.11.0, which is the new minimum for
+  this package.
+
 ## [0.28.0] - 2026-10-02
 
 ### Added

package/dist/index.cjs

@@ -620,6 +620,14 @@ function useAuth(options) {
   }, [graphqlClient]);
   return { loading, error, login, magicLogin, createMagicToken, registerContact, registerCustomer, forgotPassword };
 }
+var CART_NOT_FOUND = "CART_NOT_FOUND_ERROR";
+function isCartNotFound(error) {
+  const entries = error?.errors;
+  if (!Array.isArray(entries)) return false;
+  return entries.some(
+    (e) => e?.extensions?.code === CART_NOT_FOUND || /cart:?\s*\S+\s+not found/i.test(e?.message ?? "")
+  );
+}
 async function initCart(config) {
   const {
     services,
@@ -759,6 +767,11 @@ function useCart(options) {
     setCreatedCartId(c.cartId);
     cartIdRef.current = c.cartId;
   }, []);
+  const forgetCart = React6.useCallback(() => {
+    setCart(null);
+    setCreatedCartId("");
+    cartIdRef.current = "";
+  }, []);
   const imageSearchFilters = React6.useCallback(
     () => configuration?.imageSearchFiltersGrid ?? DEFAULT_IMAGE_SEARCH_FILTERS,
     [configuration]
@@ -842,13 +855,28 @@ function useCart(options) {
         } else return propellerV2CoreUi.err("No cart ID provided");
       }
       const service = propellerV2CoreUi.createServices(graphqlClient).cart;
-      const resultCart = await service.addItemToCart({
-        id: resolvedCartId,
-        input: { productId: opts.product.productId, quantity: opts.quantity, ...opts.cluster?.clusterId !== void 0 && { clusterId: opts.cluster.clusterId }, ...childItemInputs && { childItems: childItemInputs }, ...opts.notes && { notes: opts.notes }, ...opts.price !== void 0 && { price: opts.price } },
-        language,
-        imageSearchFilters: imageSearchFilters(),
-        imageVariantFilters: imageVariantFilters()
-      });
+      const input = { productId: opts.product.productId, quantity: opts.quantity, ...opts.cluster?.clusterId !== void 0 && { clusterId: opts.cluster.clusterId }, ...childItemInputs && { childItems: childItemInputs }, ...opts.notes && { notes: opts.notes }, ...opts.price !== void 0 && { price: opts.price } };
+      let resultCart;
+      try {
+        resultCart = await service.addItemToCart({
+          id: resolvedCartId,
+          input,
+          language,
+          imageSearchFilters: imageSearchFilters(),
+          imageVariantFilters: imageVariantFilters()
+        });
+      } catch (e) {
+        if (!isCartNotFound(e) || !opts.createCart) throw e;
+        forgetCart();
+        const fresh = await resolveCart();
+        resultCart = await service.addItemToCart({
+          id: fresh.cartId,
+          input,
+          language,
+          imageSearchFilters: imageSearchFilters(),
+          imageVariantFilters: imageVariantFilters()
+        });
+      }
       rememberCart(resultCart);
       const addedItem = resultCart.items?.find((i) => i.productId === opts.product.productId) ?? null;
       opts.afterAddToCart?.(resultCart, addedItem);
@@ -860,7 +888,7 @@ function useCart(options) {
     } finally {
       setLoading(false);
     }
-  }, [graphqlClient, cartId, language, configuration, resolveCart, rememberCart, imageSearchFilters, imageVariantFilters]);
+  }, [graphqlClient, cartId, language, configuration, resolveCart, rememberCart, forgetCart, imageSearchFilters, imageVariantFilters]);
   const addItems = React6.useCallback(async (items) => {
     const added = [];
     let lastCart = null;
@@ -2146,19 +2174,8 @@ function useProductInfo(options) {
     setLoading(true);
     setError(null);
     try {
-      let orderlistIds = [];
-      let applyOrderlists = true;
-      if (options.orderlistIds && options.orderlistIds.length > 0) {
-        orderlistIds = options.orderlistIds;
-        applyOrderlists = options.applyOrderlists !== false;
-      } else if (options.applyOrderlists === false) {
-        applyOrderlists = false;
-      } else if (options.user && options.companyId) {
-        const orderlistService = propellerV2CoreUi.createServices(graphqlClient).orderlist;
-        const searchInput = { companyIds: [options.companyId] };
-        const orderlists = await orderlistService.getOrderlists(searchInput);
-        orderlistIds = (orderlists?.items ?? []).map((ol) => ol.id);
-      }
+      const orderlistIds = options.orderlistIds ?? [];
+      const applyOrderlists = options.applyOrderlists !== false;
       const service = propellerV2CoreUi.createServices(graphqlClient).product;
       const attributeInput = buildAttributeInput2();
       const variables = {
@@ -2369,7 +2386,7 @@ function useProductSearch(options) {
       const orderlistScope = options.orderlistIds && options.orderlistIds.length > 0 ? {
         applyOrderlists: options.applyOrderlists !== false,
         orderlistIds: options.orderlistIds
-      } : { applyOrderlists: false };
+      } : options.applyOrderlists === false ? { applyOrderlists: false } : {};
       const categoryProductSearchInput = {
         language: lang,
         page: pagination.currentPage,
@@ -2499,7 +2516,7 @@ function useProductSearch(options) {
           const orderlistScope = options.orderlistIds && options.orderlistIds.length > 0 ? {
             applyOrderlists: options.applyOrderlists !== false,
             orderlistIds: options.orderlistIds
-          } : { applyOrderlists: false };
+          } : options.applyOrderlists === false ? { applyOrderlists: false } : {};
           const userId = resolveListingUserId(options.user, configuration);
           const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
           const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
@@ -2675,7 +2692,7 @@ function useQuickOrder(options) {
       if (!catId) return [];
       try {
         const service = propellerV2CoreUi.createServices(graphqlClient).category;
-        const orderlistScope = orderlistIds && orderlistIds.length > 0 ? { applyOrderlists: applyOrderlists !== false, orderlistIds } : { applyOrderlists: false };
+        const orderlistScope = orderlistIds && orderlistIds.length > 0 ? { applyOrderlists: applyOrderlists !== false, orderlistIds } : applyOrderlists === false ? { applyOrderlists: false } : {};
         const userId = resolveListingUserId(user, configuration);
         const contactId = user && "contactId" in user ? user.contactId : void 0;
         const customerId = user && "customerId" in user ? user.customerId : void 0;
@@ -3284,28 +3301,33 @@ function useProductSlider(options) {
       }
     }
     if (!productIds.length && !clusterIds.length) return items;
+    const catId = configuration.baseCategoryId;
+    if (!catId) return items;
     const userId = resolveUserId();
     const companyId = resolveCompanyId();
-    const searchInput = {
+    const categoryProductSearchInput = {
       ...productIds.length && { productIds },
       ...clusterIds.length && { clusterIds },
       language,
       page: 1,
       offset: 50,
       statuses: [propellerSdkV2.ProductStatus.A, propellerSdkV2.ProductStatus.P, propellerSdkV2.ProductStatus.T, propellerSdkV2.ProductStatus.S],
+      hidden: false,
       ...userId !== void 0 && { userId },
       ...companyId !== void 0 && { companyId }
     };
     const filterAvailableAttributeInput = { isSearchable: true };
     const variables = {
-      input: searchInput,
+      categoryId: catId,
+      language,
+      categoryProductSearchInput,
+      filterAvailableAttributeInput,
       imageSearchFilters: configuration.imageSearchFiltersGrid,
-      imageVariantFilters: configuration.imageVariantFiltersMedium,
-      filterAvailableAttributeInput
+      imageVariantFilters: configuration.imageVariantFiltersMedium
     };
     try {
-      const response = await propellerV2CoreUi.createServices(graphqlClient).product.getProducts(variables);
-      const resolved = response?.items ?? [];
+      const response = await propellerV2CoreUi.createServices(graphqlClient).category.getCategory(variables);
+      const resolved = response?.products?.items ?? [];
       const allowed = /* @__PURE__ */ new Set();
       for (const r of resolved) {
         const id = r.productId ?? r.clusterId;
@@ -3361,10 +3383,17 @@ function useProductSlider(options) {
     setLoading(true);
     setError(null);
     try {
-      const service = propellerV2CoreUi.createServices(graphqlClient).product;
-      const searchInput = {
-        productIds,
-        clusterIds,
+      const catId = configuration.baseCategoryId;
+      if (!catId) {
+        setProducts([]);
+        return;
+      }
+      const service = propellerV2CoreUi.createServices(graphqlClient).category;
+      const userId = resolveUserId();
+      const companyId = resolveCompanyId();
+      const categoryProductSearchInput = {
+        ...productIds.length && { productIds },
+        ...clusterIds.length && { clusterIds },
         language,
         page: 1,
         offset: 50,
@@ -3373,17 +3402,24 @@ function useProductSlider(options) {
           propellerSdkV2.ProductStatus.P,
           propellerSdkV2.ProductStatus.T,
           propellerSdkV2.ProductStatus.S
-        ]
+        ],
+        hidden: false,
+        ...userId !== void 0 && { userId },
+        ...companyId !== void 0 && { companyId }
       };
       const filterAvailableAttributeInput = { isSearchable: true };
       const variables = {
-        input: searchInput,
+        categoryId: catId,
+        language,
+        categoryProductSearchInput,
+        priceCalculateProductInput: buildPriceInput(),
+        filterAvailableAttributeInput,
         imageSearchFilters: configuration.imageSearchFiltersGrid,
-        imageVariantFilters: configuration.imageVariantFiltersMedium,
-        filterAvailableAttributeInput
+        imageVariantFilters: configuration.imageVariantFiltersMedium
       };
-      const response = await service.getProducts(variables);
-      setProducts(response?.items ?? []);
+      const response = await service.getCategory(variables);
+      const productsResponse = response?.products;
+      setProducts(productsResponse?.items ?? []);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to fetch products");
       setProducts([]);
@@ -4827,10 +4863,7 @@ function AddToCart(rawProps) {
     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;
+    return propellerV2CoreUi.resolveOrderableQuantity(value, getMinQuantity(props.product), getStep(props.product));
   }
   function increment() {
     setQuantityDraft(null);
@@ -6939,6 +6972,7 @@ function CartItem(rawProps) {
     companyId: props.companyId
   });
   const [quantity, setQuantity] = React6.useState(() => props.cartItem.quantity || 1);
+  const [quantityDraft, setQuantityDraft] = React6.useState(() => null);
   const [notes, setNotes] = React6.useState(() => props.cartItem.notes || "");
   const [loading, setLoading] = React6.useState(() => false);
   const [deleting, setDeleting] = React6.useState(() => false);
@@ -7062,6 +7096,34 @@ function CartItem(rawProps) {
       setLoading(false);
     }
   }
+  function handleQuantityDecrement() {
+    setQuantityDraft(null);
+    const orderable = propellerV2CoreUi.resolveOrderableQuantity(quantity, minQuantity, step);
+    if (orderable !== quantity) {
+      handleQuantityChange(orderable);
+      return;
+    }
+    if (quantity - step >= minQuantity) handleQuantityChange(quantity - step);
+  }
+  function handleQuantityIncrement() {
+    setQuantityDraft(null);
+    const orderable = propellerV2CoreUi.resolveOrderableQuantity(quantity, minQuantity, step);
+    handleQuantityChange(orderable === quantity ? quantity + step : orderable);
+  }
+  function handleQuantityInput(raw) {
+    setQuantityDraft(raw);
+    const val = parseInt(raw, 10);
+    if (!isNaN(val) && val >= minQuantity) {
+      handleQuantityChange(propellerV2CoreUi.resolveOrderableQuantity(val, minQuantity, step));
+    }
+  }
+  function handleQuantityBlur() {
+    if (quantityDraft === null) return;
+    const val = parseInt(quantityDraft, 10);
+    setQuantityDraft(null);
+    const orderable = propellerV2CoreUi.resolveOrderableQuantity(val, minQuantity, step);
+    if (orderable !== quantity) handleQuantityChange(orderable);
+  }
   function handleNoteChange(note) {
     setNotes(note);
     if (props.onNoteChange) {
@@ -7164,7 +7226,8 @@ function CartItem(rawProps) {
       deleting,
       crossupsells,
       visibleCrossupsells: getVisibleCrossupsells(),
-      addingCrossupsellId
+      addingCrossupsellId,
+      quantityDraft
     },
     helpers: {
       getBundleItemName,
@@ -7177,6 +7240,10 @@ function CartItem(rawProps) {
     },
     handlers: {
       onQuantityChange: handleQuantityChange,
+      onQuantityDecrement: handleQuantityDecrement,
+      onQuantityIncrement: handleQuantityIncrement,
+      onQuantityInput: handleQuantityInput,
+      onQuantityBlur: handleQuantityBlur,
       onNoteChange: handleNoteChange,
       onDelete: handleDelete,
       onTitleClick: (e) => props.onTitleClick?.(e, props.cartItem),
@@ -7491,7 +7558,7 @@ function CartItemQuantity(props = {}) {
         {
           type: "button",
           className: "propeller-cart-item__decrement px-2.5 h-full text-muted-foreground hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors rounded-l-control select-none",
-          onClick: () => handlers.onQuantityChange(derived.quantity - derived.step),
+          onClick: handlers.onQuantityDecrement,
           disabled: derived.quantity <= derived.minQuantity || state.loading,
           children: "-"
         }
@@ -7503,13 +7570,9 @@ function CartItemQuantity(props = {}) {
           className: "propeller-cart-item__quantity w-10 text-center text-sm bg-transparent border-x border-input h-full focus:ring-0 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
           min: derived.minQuantity,
           step: derived.step,
-          value: derived.quantity,
-          onChange: (e) => {
-            const val = parseInt(e.target.value, 10);
-            if (!isNaN(val) && val >= derived.minQuantity) {
-              handlers.onQuantityChange(Math.round((val - derived.minQuantity) / derived.step) * derived.step + derived.minQuantity);
-            }
-          }
+          value: state.quantityDraft ?? derived.quantity,
+          onChange: (e) => handlers.onQuantityInput(e.target.value),
+          onBlur: handlers.onQuantityBlur
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -7517,7 +7580,7 @@ function CartItemQuantity(props = {}) {
         {
           type: "button",
           className: "propeller-cart-item__increment px-2.5 h-full text-muted-foreground hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors rounded-r-control select-none",
-          onClick: () => handlers.onQuantityChange(derived.quantity + derived.step),
+          onClick: handlers.onQuantityIncrement,
           disabled: state.loading,
           children: "+"
         }
@@ -7531,13 +7594,9 @@ function CartItemQuantity(props = {}) {
       className: props.className ?? "propeller-cart-item__quantity w-14 h-9 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-primary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
       min: derived.minQuantity,
       step: derived.step,
-      value: derived.quantity,
-      onChange: (e) => {
-        const val = parseInt(e.target.value, 10);
-        if (!isNaN(val) && val >= derived.minQuantity) {
-          handlers.onQuantityChange(Math.round((val - derived.minQuantity) / derived.step) * derived.step + derived.minQuantity);
-        }
-      }
+      value: state.quantityDraft ?? derived.quantity,
+      onChange: (e) => handlers.onQuantityInput(e.target.value),
+      onBlur: handlers.onQuantityBlur
     }
   );
 }
@@ -14795,10 +14854,6 @@ 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 {
@@ -14918,7 +14973,7 @@ function QuickOrderInner(props) {
       const n = parseInt(raw, 10);
       setRows(
         (prev) => prev.map(
-          (r) => r.key === key ? { ...r, quantity: snapToStep(n, r.minQuantity, r.step) } : r
+          (r) => r.key === key ? { ...r, quantity: propellerV2CoreUi.resolveOrderableQuantity(n, r.minQuantity, r.step) } : r
         )
       );
     },
@@ -19489,7 +19544,7 @@ function SearchBar(rawProps) {
                 "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...",
+              placeholder: props.placeholder || propellerV2CoreUi.getLabel(props.labels, "placeholder", "Search products..."),
               value: localTerm,
               onChange: (e) => handleInputChange(e.target.value)
             }