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

package/dist/index.d.cts

@@ -1381,9 +1381,7 @@ interface UseProductInfoReturn {
  *
  * @remarks
  * GraphQL integration: services are built per-call via `createServices(graphqlClient)`.
- * `fetchProduct` runs two sequential calls — first `services.orderlist.getOrderlists()`
- * (`OrderlistService`, only when a user + company are present, to resolve price-tier
- * orderlist ids), then `services.product.getProduct()` (`ProductService`) with
+ * `fetchProduct` calls `services.product.getProduct()` (`ProductService`) with
  * `priceCalculateProductInput` / `userBulkPriceProductInput` for per-user pricing.
  * `fetchCluster` runs `services.cluster.getClusterConfig()` then
  * `services.cluster.getCluster()` (`ClusterService`), passing the config-derived
@@ -1918,8 +1916,8 @@ declare function useMachines(options: UseMachinesOptions): UseMachinesReturn;
  *
  * Responsibilities:
  * - fetchCrossupsells: CrossupsellService with priceCalculateProductInput + extract productTo/clusterTo
- * - fetchProducts: ProductService.getProducts() batch call (NOT per-item getProduct())
- *   with statuses filter and filterAvailableAttributeInput
+ * - fetchProducts: one `category.products` batch call over `baseCategoryId`
+ *   (the flat `products` resolver ignores orderlist scoping), priced per user
  * - Scroll position tracking for responsive sliding
  */
 
@@ -1949,6 +1947,8 @@ interface UseProductSliderOptions {
         /** The channel's anonymous user, seeded by the host. Scopes logged-out
          *  listings exactly like the SSR seed does. */
         anonymousUserId?: number;
+        /** Catalog root. Required for orderlist-scoped fetching — see the remarks. */
+        baseCategoryId?: number;
         imageSearchFiltersGrid?: MediaImageProductSearchInput;
         imageVariantFiltersMedium?: TransformationsInput;
     };

package/dist/index.d.ts

@@ -1381,9 +1381,7 @@ interface UseProductInfoReturn {
  *
  * @remarks
  * GraphQL integration: services are built per-call via `createServices(graphqlClient)`.
- * `fetchProduct` runs two sequential calls — first `services.orderlist.getOrderlists()`
- * (`OrderlistService`, only when a user + company are present, to resolve price-tier
- * orderlist ids), then `services.product.getProduct()` (`ProductService`) with
+ * `fetchProduct` calls `services.product.getProduct()` (`ProductService`) with
  * `priceCalculateProductInput` / `userBulkPriceProductInput` for per-user pricing.
  * `fetchCluster` runs `services.cluster.getClusterConfig()` then
  * `services.cluster.getCluster()` (`ClusterService`), passing the config-derived
@@ -1918,8 +1916,8 @@ declare function useMachines(options: UseMachinesOptions): UseMachinesReturn;
  *
  * Responsibilities:
  * - fetchCrossupsells: CrossupsellService with priceCalculateProductInput + extract productTo/clusterTo
- * - fetchProducts: ProductService.getProducts() batch call (NOT per-item getProduct())
- *   with statuses filter and filterAvailableAttributeInput
+ * - fetchProducts: one `category.products` batch call over `baseCategoryId`
+ *   (the flat `products` resolver ignores orderlist scoping), priced per user
  * - Scroll position tracking for responsive sliding
  */
 
@@ -1949,6 +1947,8 @@ interface UseProductSliderOptions {
         /** The channel's anonymous user, seeded by the host. Scopes logged-out
          *  listings exactly like the SSR seed does. */
         anonymousUserId?: number;
+        /** Catalog root. Required for orderlist-scoped fetching — see the remarks. */
+        baseCategoryId?: number;
         imageSearchFiltersGrid?: MediaImageProductSearchInput;
         imageVariantFiltersMedium?: TransformationsInput;
     };

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { getLabel, getLocalizedValue, formatPrice, localeForLanguage, getClusterSku, getClusterImageUrl, isContentHidden, getProductSku, getProductImageUrl, createServices, isCheckoutAllowed, err, ok, formatSurcharge, deriveUserMode, isContact, isCustomer, getAddresses, attributeNameMatches, getAttributeDisplayName, filterProductsBySelections, extractAttributeValues, buildInventoryFilter, findPurchaserPac, isOverAuthorizationLimit, MIN_STOCK_THRESHOLD, getNettedBonusItems, getLanguageString, collectAttributeValues, getCountryName, resolveLanguageEntry, getLanguageUri } from '@propeller-commerce/propeller-v2-core-ui';
+import { getLabel, getLocalizedValue, formatPrice, localeForLanguage, getClusterSku, getClusterImageUrl, isContentHidden, getProductSku, getProductImageUrl, createServices, isCheckoutAllowed, err, ok, formatSurcharge, deriveUserMode, isContact, isCustomer, getAddresses, resolveOrderableQuantity, attributeNameMatches, getAttributeDisplayName, filterProductsBySelections, extractAttributeValues, buildInventoryFilter, findPurchaserPac, isOverAuthorizationLimit, MIN_STOCK_THRESHOLD, getNettedBonusItems, getLanguageString, collectAttributeValues, getCountryName, resolveLanguageEntry, getLanguageUri } from '@propeller-commerce/propeller-v2-core-ui';
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React6 from 'react';
 import { createContext, useState, useContext, useRef, useCallback, useEffect, useMemo, useSyncExternalStore } from 'react';
@@ -600,6 +600,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,
@@ -739,6 +747,11 @@ function useCart(options) {
     setCreatedCartId(c.cartId);
     cartIdRef.current = c.cartId;
   }, []);
+  const forgetCart = useCallback(() => {
+    setCart(null);
+    setCreatedCartId("");
+    cartIdRef.current = "";
+  }, []);
   const imageSearchFilters = useCallback(
     () => configuration?.imageSearchFiltersGrid ?? DEFAULT_IMAGE_SEARCH_FILTERS,
     [configuration]
@@ -822,13 +835,28 @@ function useCart(options) {
         } else return err("No cart ID provided");
       }
       const service = 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);
@@ -840,7 +868,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 = useCallback(async (items) => {
     const added = [];
     let lastCart = null;
@@ -2126,19 +2154,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 = 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 = createServices(graphqlClient).product;
       const attributeInput = buildAttributeInput2();
       const variables = {
@@ -2349,7 +2366,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,
@@ -2479,7 +2496,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;
@@ -2655,7 +2672,7 @@ function useQuickOrder(options) {
       if (!catId) return [];
       try {
         const service = 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;
@@ -3264,28 +3281,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: [ProductStatus.A, ProductStatus.P, ProductStatus.T, 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 createServices(graphqlClient).product.getProducts(variables);
-      const resolved = response?.items ?? [];
+      const response = await 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;
@@ -3341,10 +3363,17 @@ function useProductSlider(options) {
     setLoading(true);
     setError(null);
     try {
-      const service = createServices(graphqlClient).product;
-      const searchInput = {
-        productIds,
-        clusterIds,
+      const catId = configuration.baseCategoryId;
+      if (!catId) {
+        setProducts([]);
+        return;
+      }
+      const service = createServices(graphqlClient).category;
+      const userId = resolveUserId();
+      const companyId = resolveCompanyId();
+      const categoryProductSearchInput = {
+        ...productIds.length && { productIds },
+        ...clusterIds.length && { clusterIds },
         language,
         page: 1,
         offset: 50,
@@ -3353,17 +3382,24 @@ function useProductSlider(options) {
           ProductStatus.P,
           ProductStatus.T,
           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([]);
@@ -4807,10 +4843,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 resolveOrderableQuantity(value, getMinQuantity(props.product), getStep(props.product));
   }
   function increment() {
     setQuantityDraft(null);
@@ -6919,6 +6952,7 @@ function CartItem(rawProps) {
     companyId: props.companyId
   });
   const [quantity, setQuantity] = useState(() => props.cartItem.quantity || 1);
+  const [quantityDraft, setQuantityDraft] = useState(() => null);
   const [notes, setNotes] = useState(() => props.cartItem.notes || "");
   const [loading, setLoading] = useState(() => false);
   const [deleting, setDeleting] = useState(() => false);
@@ -7042,6 +7076,34 @@ function CartItem(rawProps) {
       setLoading(false);
     }
   }
+  function handleQuantityDecrement() {
+    setQuantityDraft(null);
+    const orderable = resolveOrderableQuantity(quantity, minQuantity, step);
+    if (orderable !== quantity) {
+      handleQuantityChange(orderable);
+      return;
+    }
+    if (quantity - step >= minQuantity) handleQuantityChange(quantity - step);
+  }
+  function handleQuantityIncrement() {
+    setQuantityDraft(null);
+    const orderable = 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(resolveOrderableQuantity(val, minQuantity, step));
+    }
+  }
+  function handleQuantityBlur() {
+    if (quantityDraft === null) return;
+    const val = parseInt(quantityDraft, 10);
+    setQuantityDraft(null);
+    const orderable = resolveOrderableQuantity(val, minQuantity, step);
+    if (orderable !== quantity) handleQuantityChange(orderable);
+  }
   function handleNoteChange(note) {
     setNotes(note);
     if (props.onNoteChange) {
@@ -7144,7 +7206,8 @@ function CartItem(rawProps) {
       deleting,
       crossupsells,
       visibleCrossupsells: getVisibleCrossupsells(),
-      addingCrossupsellId
+      addingCrossupsellId,
+      quantityDraft
     },
     helpers: {
       getBundleItemName,
@@ -7157,6 +7220,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),
@@ -7471,7 +7538,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: "-"
         }
@@ -7483,13 +7550,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__ */ jsx(
@@ -7497,7 +7560,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: "+"
         }
@@ -7511,13 +7574,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
     }
   );
 }
@@ -14775,10 +14834,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 {
@@ -14898,7 +14953,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: resolveOrderableQuantity(n, r.minQuantity, r.step) } : r
         )
       );
     },
@@ -19469,7 +19524,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 || getLabel(props.labels, "placeholder", "Search products..."),
               value: localTerm,
               onChange: (e) => handleInputChange(e.target.value)
             }