@propeller-commerce/propeller-v2-react-ui 0.19.2 → 0.20.0

package/CHANGELOG.md

@@ -8,6 +8,87 @@ 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.20.0] - 2026-09-21
+
+### Fixed
+
+- `FavoriteListDetails` and `useCart.getCrossupsells` priced items for the
+  contact's default company instead of the company selected in the switcher, so
+  a multi-company contact saw the wrong prices while the cart charged the
+  selected company's. Both now resolve the active company as
+  `companyId ?? user.company.companyId`, matching `useProductSlider`.
+- `FavoriteListDetails` and `CartItem` fetched only on mount, leaving stale
+  prices on screen after a company switch. Both now re-fetch when `companyId`
+  changes.
+
+- The closed `CartIconAndSidebar` panel widened the document by its own content
+  width (~128px once the cart had items), giving signed-in users a stray
+  horizontal scrollbar. A transform does not remove an element from scrollable
+  overflow, so the parked drawer is now `visibility: hidden` while closed.
+  (PWP-1002)
+- `ProductDescription`, `ProductShortDescription`, `CategoryDescription` and
+  `CategoryShortDescription` emitted Tailwind Typography `prose` classes, but
+  the plugin is installed neither here nor in the consuming apps — so the
+  classes compiled to nothing while this package's own Preflight stripped list
+  markers, and bullet lists rendered as bare lines. The four surfaces now carry
+  real styling in `dist/styles.css`, with no consumer plugin required.
+  (PWP-1000)
+- `ItemStock` rendered `(120pcs)` with no separator between the count and the
+  unit label. (PWP-1005a)
+- `OrderList` filter labels carried Tailwind's `capitalize`, which title-cases
+  every word and mangled translated labels ("Terme De Recherche",
+  "Aangemaakt Op"). The dictionaries already carry the right casing.
+  (PWP-1005b)
+- `AccountIconAndMenu` hardcoded a dark-header scheme (`text-white`,
+  `hover:bg-white/10`) that rendered white-on-light, and styled its active
+  sidebar link with the `secondary` ramp where every other selected surface in
+  the package uses `primary`. Both now use theme tokens. (PWP-1005c)
+
+### Added
+
+- `FavoriteListDetails` accepts a `companyId` prop, resolved from
+  `PropellerProvider` when omitted.
+- `AccountIconAndMenu` accepts a `linkClassName` prop for its sidebar links,
+  which previously had no class escape hatch. (PWP-1005c)
+
+- The purchase-authorization rule existed in three divergent copies — `useCart`
+  compared `<=`, `CartSummary` and `CartIconAndSidebar` compared `>`, and only
+  `CartSummary` coerced `companyId` numerically, so a string company id from a
+  cookie matched in one place and not the others. All three now call
+  `isOverAuthorizationLimit` from core-ui.
+
+  This also fixes the hook failing open: `useCart.checkoutAllowed` returned
+  `true` when its own internal cart was null, which it is until the consumer
+  calls `addItem`/`resolveCart` — so an app reading it for a cart it fetched
+  itself was told an over-limit cart could check out. (PWP-988)
+
+### Removed
+
+- **Breaking:** `ProductGrid.renderProductCard` and `renderClusterCard`. Both
+  were declared in the public type but never invoked — only tested for
+  truthiness, which suppressed the default card and rendered nothing. Setting
+  either produced an empty grid. They were superseded by the compound-component
+  work that introduced `productCardComponent` / `clusterCardComponent`; the call
+  that used them was replaced then, and only the guard survived. Use
+  `productCardComponent` / `clusterCardComponent` to swap a whole card, or
+  `ProductGrid.Items.renderItem` for per-item control. No working usage was
+  possible, so nothing that functioned is lost. (PWP-985)
+
+### Changed
+
+- `ProductDownloads.downloads` and `ProductVideos.videos` are now optional and
+  nullable, matching what the API actually returns — it answers `null`, not an
+  empty page, when a product has no documents or videos. Both components
+  already handled the absent case; only the types disagreed, which forced casts
+  at the `ProductTabs` call sites. Those are gone. (PWP-1009)
+- `GridPagination.products` is now structural (`{ page, pages }`) instead of a
+  full `ProductsResponse`. A real response still fits; callers holding the two
+  numbers on their own no longer need a cast. (PWP-1005e)
+- **Breaking (types):** `GridToolbar.viewMode` and `onViewChange` are narrowed
+  from `string` to `'grid' | 'list'`, matching their documented contract. A
+  consumer passing a plain `string` will need a cast or a narrower type.
+  (PWP-1005d)
+
 ## [0.19.2] - 2026-08-27
 
 ### Fixed

package/dist/index.cjs

@@ -745,6 +745,7 @@ var DEFAULT_IMAGE_VARIANT_FILTERS = {
 function useCart(options) {
   const { graphqlClient, user, companyId, configuration, onCartCreated } = options;
   const language = options.language || configuration?.language || "NL";
+  const resolvedCompanyId = companyId ?? (user && "contactId" in user ? user.company?.companyId : void 0);
   const [cart, setCart] = React6.useState(null);
   const [createdCartId, setCreatedCartId] = React6.useState("");
   const cartId = options.cartId || createdCartId;
@@ -766,20 +767,10 @@ function useCart(options) {
   const [loading, setLoading] = React6.useState(false);
   const [error, setError] = React6.useState(null);
   const notesTimers = React6.useRef({});
-  const checkoutAllowed = React6.useMemo(() => {
-    if (!user || !("contactId" in user)) return true;
-    if (!companyId) return true;
-    if (!cart) return true;
-    const pacData = user.purchaseAuthorizationConfigs;
-    const items = pacData?.items ?? [];
-    const purchaserPac = items.find(
-      (pac) => pac.purchaseRole === propellerSdkV2.PurchaseRole.PURCHASER && pac.company?.companyId === companyId
-    );
-    if (!purchaserPac) return true;
-    const limit = purchaserPac.authorizationLimit ?? 0;
-    const totalGross = cart.total?.totalGross ?? 0;
-    return totalGross <= limit;
-  }, [user, companyId, cart]);
+  const checkoutAllowed = React6.useMemo(
+    () => propellerV2CoreUi.isCheckoutAllowed(user, companyId, cart),
+    [user, companyId, cart]
+  );
   function getMinQuantity(product) {
     const min = product?.minimumQuantity;
     return min && min > 0 ? min : 1;
@@ -968,7 +959,8 @@ function useCart(options) {
         imageVariantFilters: opts.imageVariantFilters ?? imageVariantFilters(),
         priceCalculateProductInput: {
           taxZone: taxZone || "NL",
-          ...user && "company" in user && { companyId: user?.company?.companyId },
+          // Switcher selection wins; the contact's default company is the fallback.
+          ...resolvedCompanyId !== void 0 && { companyId: resolvedCompanyId },
           ...user && "contactId" in user && { contactId: user?.contactId },
           ...user && "customerId" in user && { customerId: user?.customerId }
         }
@@ -978,7 +970,7 @@ function useCart(options) {
     } catch {
       return [];
     }
-  }, [graphqlClient, language, user, imageSearchFilters, imageVariantFilters]);
+  }, [graphqlClient, language, user, resolvedCompanyId, imageSearchFilters, imageVariantFilters]);
   return { cart, cartId, loading, error, checkoutAllowed, resolveCart, addItem, addItems, updateItemQuantity, updateItemNotes, deleteItem, addActionCode, removeActionCode, requestAuthorization, processCart, getCrossupsells, getMinQuantity, getStep };
 }
 function buildAddressInput(type, addr) {
@@ -4211,7 +4203,9 @@ function AccountIconAndMenu(rawProps) {
               href: link.href,
               onClick: (event) => handleMenuLinkClick(event, link.href),
               "data-active": isActiveLink(link.href) ? "true" : "false",
-              className: `propeller-account-menu__link flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors ${isActiveLink(link.href) ? "bg-secondary/5 text-secondary border-l-2 border-secondary" : "text-muted-foreground hover:bg-surface-hover hover:text-foreground"}`,
+              className: cn(
+                `propeller-account-menu__link flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors ${isActiveLink(link.href) ? "bg-primary/5 text-primary border-l-2 border-primary" : "text-muted-foreground hover:bg-surface-hover hover:text-foreground"}${props.linkClassName ? " " + props.linkClassName : ""}`
+              ),
               children: link.label
             }
           ) }, link.href)) }) }),
@@ -4233,7 +4227,7 @@ function AccountIconAndMenu(rawProps) {
               onClick: (event) => handleIconClick(),
               "aria-label": propellerV2CoreUi.getLabel(props.labels, "accountLabel", "Account"),
               "data-open": menuOpen ? "true" : "false",
-              className: cn(`propeller-account-menu__trigger inline-flex items-center gap-2 px-3 py-2 rounded-control text-sm font-medium transition-colors text-white hover:bg-white/10${props.iconClassName ? " " + props.iconClassName : ""}`),
+              className: cn(`propeller-account-menu__trigger inline-flex items-center gap-2 px-3 py-2 rounded-control text-sm font-medium transition-colors text-foreground hover:bg-surface-hover${props.iconClassName ? " " + props.iconClassName : ""}`),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
@@ -6631,6 +6625,7 @@ function ItemStock(props) {
               getTotalQuantity() > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "propeller-item-stock__count opacity-70", children: [
                 "(",
                 getTotalQuantity(),
+                " ",
                 propellerV2CoreUi.getLabel(props.labels, "pieces", "pcs"),
                 ")"
               ] }) : null
@@ -6864,7 +6859,7 @@ function CartItem(rawProps) {
   }
   React6.useEffect(() => {
     fetchCrossupsells();
-  }, []);
+  }, [props.companyId]);
   React6.useEffect(() => {
     setQuantity(props.cartItem.quantity || 1);
     setNotes(props.cartItem.notes || "");
@@ -7318,13 +7313,6 @@ CartItemExport.Price = CartItemPrice;
 CartItemExport.Quantity = CartItemQuantity;
 CartItemExport.Delete = CartItemDelete;
 var CartItem_default = CartItemExport;
-function findPurchaserPAC(user, companyId) {
-  if (!user || !("contactId" in user) || !companyId) return void 0;
-  const items = user.purchaseAuthorizationConfigs?.items ?? [];
-  return items.find(
-    (pac) => pac.purchaseRole === propellerSdkV2.PurchaseRole.PURCHASER && pac.company?.companyId === companyId
-  );
-}
 function CartIconAndSidebar(rawProps) {
   const props = useInfraProps(rawProps);
   const CartBonusItemsImpl = props.cartBonusItemsComponent ?? CartBonusItems_default;
@@ -7355,10 +7343,9 @@ function CartIconAndSidebar(rawProps) {
     return useTax ? propellerV2CoreUi.getLabel(props.labels, key, "Total") : propellerV2CoreUi.getLabel(props.labels, "totalExclVat", "Total excl. VAT");
   }
   const sidebarTitle = props.cartSidebarTitle || props.labels?.["cartSidebarTitle"] || "Shopping cart";
-  const purchaserPAC = findPurchaserPAC(props.user, props.companyId);
-  const totalGross = props.cart?.total?.totalGross ?? 0;
-  const overLimit = !!purchaserPAC && totalGross > (purchaserPAC.authorizationLimit ?? 0);
-  const showCheckoutButton = props.cartCheckoutButton === false ? false : !props.user || !("contactId" in props.user) || !props.companyId || !purchaserPAC ? true : !overLimit;
+  const purchaserPAC = propellerV2CoreUi.findPurchaserPac(props.user, props.companyId);
+  const overLimit = propellerV2CoreUi.isOverAuthorizationLimit(props.user, props.companyId, props.cart);
+  const showCheckoutButton = props.cartCheckoutButton === false ? false : !purchaserPAC ? true : !overLimit;
   const showRequestAuthorizationButton = !!purchaserPAC && overLimit;
   function handleIconClick() {
     if (props.showCartSidebarOnClick !== false) {
@@ -7971,17 +7958,7 @@ function CartSummary(rawProps) {
     }
   }
   function showRequestAuthorizationButton() {
-    if (!props.user || !("contactId" in props.user)) return false;
-    if (!props.companyId) return false;
-    if (!props.cart) return false;
-    const items = props.user.purchaseAuthorizationConfigs?.items ?? [];
-    const purchaserPAC = items.find(
-      (pac) => pac.purchaseRole === propellerSdkV2.PurchaseRole.PURCHASER && Number(pac.company?.companyId) === Number(props.companyId)
-    );
-    if (!purchaserPAC) return false;
-    const limit = purchaserPAC.authorizationLimit ?? 0;
-    const totalGross = props.cart.total?.totalGross ?? 0;
-    return totalGross > limit;
+    return propellerV2CoreUi.isOverAuthorizationLimit(props.user, props.companyId, props.cart);
   }
   function showRequestQuoteButton() {
     return !!props.onRequestQuoteClick && !!props.user && "contactId" in props.user;
@@ -8121,7 +8098,7 @@ function CategoryDescription(props) {
         !shouldTruncate || expanded ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "propeller-category-description__content prose prose-slate max-w-none text-muted-foreground",
+            className: "propeller-category-description__content text-muted-foreground",
             dangerouslySetInnerHTML: { __html: html }
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-category-description__truncated text-muted-foreground", children: getTruncated() }),
@@ -8147,7 +8124,7 @@ function CategoryShortDescription(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!html ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-category-short-description mb-6 ${props.className || ""}`), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "propeller-category-short-description__content prose prose-slate max-w-none text-muted-foreground",
+      className: "propeller-category-short-description__content text-muted-foreground",
       dangerouslySetInnerHTML: { __html: html }
     }
   ) }) : null });
@@ -9387,27 +9364,24 @@ function ProductGrid(rawProps) {
               {
                 children: [
                   props.beforeItem?.(item, idx),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    isClusterItem(item) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !props.renderClusterCard ? /* @__PURE__ */ jsxRuntime.jsx(
-                      ClusterCardImpl,
-                      {
-                        cluster: item,
-                        labels: props.clusterCardLabels,
-                        stockLabels: props.stockLabels
-                      }
-                    ) : null }) : null,
-                    !isClusterItem(item) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !props.renderProductCard ? /* @__PURE__ */ jsxRuntime.jsx(
-                      ProductCardImpl,
-                      {
-                        product: item,
-                        allowAddToCart: showAddToCart(),
-                        labels: props.productCardLabels,
-                        stockLabels: props.stockLabels,
-                        priceLabels: props.priceLabels,
-                        addToCartLabels: props.addToCartLabels
-                      }
-                    ) : null }) : null
-                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: isClusterItem(item) ? /* @__PURE__ */ jsxRuntime.jsx(
+                    ClusterCardImpl,
+                    {
+                      cluster: item,
+                      labels: props.clusterCardLabels,
+                      stockLabels: props.stockLabels
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    ProductCardImpl,
+                    {
+                      product: item,
+                      allowAddToCart: showAddToCart(),
+                      labels: props.productCardLabels,
+                      stockLabels: props.stockLabels,
+                      priceLabels: props.priceLabels,
+                      addToCartLabels: props.addToCartLabels
+                    }
+                  ) }),
                   props.afterItem?.(item, idx)
                 ]
               },
@@ -11929,8 +11903,9 @@ function FavoriteListDetails(rawProps) {
         if (contact.contactId) {
           priceInput.contactId = contact.contactId;
         }
-        if (contact.company?.companyId) {
-          priceInput.companyId = contact.company.companyId;
+        const activeCompanyId = props.companyId ?? contact.company?.companyId;
+        if (activeCompanyId) {
+          priceInput.companyId = activeCompanyId;
         }
       }
     }
@@ -12006,12 +11981,15 @@ function FavoriteListDetails(rawProps) {
     setPrevListId(props.favoriteListId || "");
     fetchList();
   }, []);
+  const prevCompanyIdRef = React6.useRef(props.companyId);
   React6.useEffect(() => {
-    if (props.favoriteListId && props.favoriteListId !== prevListId) {
-      setPrevListId(props.favoriteListId);
-      fetchList();
-    }
-  }, [props.favoriteListId]);
+    const listChanged = !!props.favoriteListId && props.favoriteListId !== prevListId;
+    const companyChanged = props.companyId !== prevCompanyIdRef.current;
+    if (!listChanged && !companyChanged) return;
+    if (listChanged) setPrevListId(props.favoriteListId);
+    prevCompanyIdRef.current = props.companyId;
+    fetchList();
+  }, [props.favoriteListId, props.companyId]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-favorite-list-details ${props.className || ""}`), "data-loading": loading ? "true" : "false", children: [
     loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-favorite-list-details__skeleton space-y-4", children: [1, 2, 3]?.map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -13887,7 +13865,7 @@ function OrderList(rawProps) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-order-list ${props.className || ""}`), "data-loading": loading ? "true" : "false", children: [
     props.enableSearch && searchFields().length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-order-list__filters mb-6 bg-card p-4 rounded-container shadow space-y-4", children: [
       searchFields().includes("term") ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-order-list__search-field w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "propeller-order-list__filter-label block text-sm font-medium text-muted-foreground capitalize mb-1", children: getColumnLabel("term") }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "propeller-order-list__filter-label block text-sm font-medium text-muted-foreground mb-1", children: getColumnLabel("term") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -13915,7 +13893,7 @@ function OrderList(rawProps) {
         )
       ] }) : null,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4", children: searchFields().filter((f) => f !== "term")?.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "propeller-order-list__filter-label block text-sm font-medium text-muted-foreground capitalize", children: getColumnLabel(field) }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "propeller-order-list__filter-label block text-sm font-medium text-muted-foreground", children: getColumnLabel(field) }),
         field === "createdAt" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-2 w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -15619,7 +15597,7 @@ function ProductDescription(props) {
         !shouldTruncate || expanded ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "propeller-product-description__content prose prose-slate max-w-none text-muted-foreground",
+            className: "propeller-product-description__content text-muted-foreground",
             dangerouslySetInnerHTML: { __html: html }
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-product-description__truncated text-muted-foreground", children: getTruncated() }),
@@ -16361,7 +16339,7 @@ function ProductShortDescription(props) {
     "div",
     {
       dangerouslySetInnerHTML: { __html: html },
-      className: cn(`propeller-product-short-description prose prose-slate max-w-none text-muted-foreground ${props.className || ""}`)
+      className: cn(`propeller-product-short-description text-muted-foreground ${props.className || ""}`)
     }
   ) : null });
 }