@propeller-commerce/propeller-v2-react-ui 0.4.15 → 0.4.17

package/CHANGELOG.md

@@ -8,6 +8,43 @@ 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.4.17] - 2026-07-09
+
+### Added
+
+- `ProductCard` / `ProductGrid`: new `belowName?: (product: Product) => ReactNode`
+  render prop. Renders arbitrary host-supplied content directly below the
+  product name (and above the short description / price) in both the grid and
+  row layouts, without forking the card — e.g. package descriptions or custom
+  badges. On `ProductGrid` it cascades to every card via `ProductGridConfig`;
+  on `ProductCard` it can also be set per-card (explicit prop wins over grid
+  context). Also exposed as the `<ProductCard.BelowName>` compound subcomponent.
+
+## [0.4.16] - 2026-07-09
+
+### Added
+
+- `ProductGrid`, `SearchBar`, `ProductInfo`: new `orderlistIds?: number[]` and
+  `applyOrderlists?: boolean` props to scope the product/search fetch to
+  specific orderlists (e.g. a chosen B2B contract). When `orderlistIds` is
+  non-empty, orderlists are applied (unless `applyOrderlists` is `false`);
+  otherwise `applyOrderlists: false` is sent so an authenticated user without a
+  contract still sees the full catalogue. Threaded through `useProductSearch`
+  and `useProductInfo` (explicit ids override the composable's default
+  all-company-orderlists resolution).
+- `Menu`: new `getUrl?: (category: Category) => string` prop — a custom URL
+  builder that overrides `menuLinkFormat` / `configuration.urls.getCategoryUrl`,
+  letting hosts inject dynamic query strings (e.g. `?contract=…`). Mirrors the
+  existing `Breadcrumbs.getUrl`.
+- `GridToolbar`: new `hidePriceSort?: boolean` prop to hide the price sort
+  option entirely (closed B2B portals where prices are "by quotation").
+- `ProductTabs` / `ProductSpecifications`: new
+  `specificationsPackageDescription?` (ProductTabs) → `packageDescription?`
+  (ProductSpecifications) passthrough, rendering an extra package-description
+  string above the specifications table.
+
+All additions are additive and backward-compatible.
+
 ## [0.4.15] - 2026-07-08
 
 ### Changed

package/dist/index.cjs

@@ -2045,7 +2045,13 @@ function useProductInfo(options) {
     setError(null);
     try {
       let orderlistIds = [];
-      if (options.user && options.companyId) {
+      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);
@@ -2056,7 +2062,7 @@ function useProductInfo(options) {
       const variables = {
         productId,
         language,
-        applyOrderlists: true,
+        applyOrderlists,
         orderlistIds,
         imageSearchFilters: imageSearchFilters ?? configuration.imageSearchFiltersGrid,
         imageVariantFilters: imageVariantFilters ?? configuration.imageVariantFiltersLarge ?? configuration.imageVariantFiltersSmall,
@@ -2240,6 +2246,10 @@ function useProductSearch(options) {
       const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
       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;
+      const orderlistScope = options.orderlistIds && options.orderlistIds.length > 0 ? {
+        applyOrderlists: options.applyOrderlists !== false,
+        orderlistIds: options.orderlistIds
+      } : { applyOrderlists: false };
       const categoryProductSearchInput = {
         language: lang,
         page: pagination.currentPage,
@@ -2257,7 +2267,8 @@ function useProductSearch(options) {
         ...priceFilter && { price: priceFilter },
         ...sortInputs.length && { sortInputs },
         ...options.companyId && { companyId: options.companyId },
-        ...userId !== void 0 && { userId }
+        ...userId !== void 0 && { userId },
+        ...orderlistScope
       };
       const priceCalculateProductInput = {
         taxZone,
@@ -7430,7 +7441,7 @@ function CategoryDescription(props) {
     const plain = html.replace(/<[^>]*>/g, "");
     if (plain.length <= maxLen) return html;
     const truncated = plain.substring(0, maxLen);
-    return truncated.substring(0, truncated.lastIndexOf(" ")) + "\xE2\u20AC\xA6";
+    return truncated.substring(0, truncated.lastIndexOf(" ")) + "\u2026";
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!html ? /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -10697,7 +10708,8 @@ function GridToolbar(rawProps) {
   }
   function getSortOptions() {
     const opts = props.sortOptions || [];
-    return opts.length > 0 ? opts : ALL_SORT_FIELDS;
+    const base = opts.length > 0 ? opts : ALL_SORT_FIELDS;
+    return props.hidePriceSort ? base.filter((f) => f !== propellerSdkV2.ProductSortField.PRICE) : base;
   }
   function getOffsetOptions() {
     const opts = props.offset || [];
@@ -11120,10 +11132,12 @@ function Menu(rawProps) {
   }
   function getCategoryUrl(cat) {
     const lang = props.language || "NL";
-    return props.configuration.urls.getCategoryUrl(
-      { categoryId: cat.categoryId, slug: [{ value: cat.slug, language: lang }] },
-      lang
-    );
+    const category = {
+      categoryId: cat.categoryId,
+      slug: [{ value: cat.slug, language: lang }]
+    };
+    if (props.getUrl) return props.getUrl(category);
+    return props.configuration.urls.getCategoryUrl(category, lang);
   }
   function getSubCategories(cat) {
     return (cat.children || []).filter((sub) => sub.name && sub.slug);
@@ -13308,7 +13322,8 @@ var RESOLVE_SPEC2 = {
   addToCartComponent: { grid: "addToCartComponent" },
   imageComponent: { grid: "imageComponent" },
   badgesComponent: { grid: "badgesComponent" },
-  favoriteComponent: { grid: "favoriteComponent" }
+  favoriteComponent: { grid: "favoriteComponent" },
+  belowName: { grid: "belowName" }
 };
 var ProductCardContext = React6.createContext(null);
 function useProductCard() {
@@ -13389,6 +13404,7 @@ function ProductCardRoot(rawProps) {
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__body flex flex-1 flex-row items-center gap-4 px-4 py-2 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardName, { linkable: true }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(ProductCardBelowName, {}),
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardTextLabels, {}) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardShortDescription, {}) : null
@@ -13404,6 +13420,7 @@ function ProductCardRoot(rawProps) {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && sku ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardName, { linkable: true }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(ProductCardBelowName, {}),
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardTextLabels, {}) : null,
             props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) }) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardManufacturer, {}) : null,
@@ -13586,6 +13603,13 @@ function ProductCardStock(props) {
     }
   );
 }
+function ProductCardBelowName() {
+  const { product, resolved } = useProductCard();
+  if (!resolved.belowName) return null;
+  const content = resolved.belowName(product);
+  if (content == null || content === false) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__below-name", children: content });
+}
 function ProductCardPrice(props) {
   const { product, derived, resolved } = useProductCard();
   if (!product?.price) return null;
@@ -13664,6 +13688,7 @@ ProductCard.Badges = ProductCardBadges;
 ProductCard.Favorite = ProductCardFavorite;
 ProductCard.Name = ProductCardName;
 ProductCard.Sku = ProductCardSku;
+ProductCard.BelowName = ProductCardBelowName;
 ProductCard.ShortDescription = ProductCardShortDescription;
 ProductCard.Manufacturer = ProductCardManufacturer;
 ProductCard.TextLabels = ProductCardTextLabels;
@@ -13938,7 +13963,7 @@ function useProductGrid() {
   const ctx = React6.useContext(ProductGridSearchContext);
   if (!ctx) {
     throw new Error(
-      "<ProductGrid.X> must be rendered inside <ProductGrid>. Got null context \xE2\u20AC\u201D wrap the subcomponents in <ProductGrid categoryId={...}>...</ProductGrid>."
+      "<ProductGrid.X> must be rendered inside <ProductGrid>. Got null context \u2014 wrap the subcomponents in <ProductGrid categoryId={...}>...</ProductGrid>."
     );
   }
   return ctx;
@@ -13959,6 +13984,8 @@ function ProductGrid(rawProps) {
     categoryId: props.categoryId,
     term: props.term,
     brand: props.brand,
+    orderlistIds: props.orderlistIds,
+    applyOrderlists: props.applyOrderlists,
     language: props.language,
     taxZone: props.taxZone,
     user: props.user,
@@ -14044,7 +14071,8 @@ function ProductGrid(rawProps) {
     badgesComponent: props.badgesComponent,
     favoriteComponent: props.favoriteComponent,
     productCardComponent: props.productCardComponent,
-    clusterCardComponent: props.clusterCardComponent
+    clusterCardComponent: props.clusterCardComponent,
+    belowName: props.belowName
   };
   if (rawProps.children !== void 0) {
     const compoundCtx = {
@@ -14361,9 +14389,15 @@ function useProductInfoContext() {
 }
 function ProductInfo(rawProps) {
   const props = useInfraProps(rawProps);
-  const { product: fetchedProduct, loading, fetchProduct } = useProductInfo(
-    props.graphqlClient ? { graphqlClient: props.graphqlClient, language: props.language, configuration: props.configuration } : { graphqlClient: {}, language: props.language, configuration: props.configuration }
-  );
+  const { product: fetchedProduct, loading, fetchProduct } = useProductInfo({
+    graphqlClient: props.graphqlClient ?? {},
+    language: props.language,
+    configuration: props.configuration,
+    user: props.user,
+    companyId: props.companyId,
+    orderlistIds: props.orderlistIds,
+    applyOrderlists: props.applyOrderlists
+  });
   const activeProduct = props.product || fetchedProduct;
   function getProductName5() {
     if (!activeProduct) return "";
@@ -15081,13 +15115,14 @@ function ProductSpecifications(rawProps) {
     if (!props.productId || !props.graphqlClient) return;
     fetchSpecs(props.productId);
   }, [props.productId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !loading && hasPublicAttributes() ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !loading && (hasPublicAttributes() || props.packageDescription) ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `propeller-product-specifications ${props.className || ""}`,
       "data-layout": props.layout === "list" ? "list" : "table",
       "data-grouped": props.grouping ? "true" : "false",
       children: [
+        props.packageDescription ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-product-specifications__package-description mb-4 text-sm text-muted-foreground", children: props.packageDescription }) : null,
         !props.grouping ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           props.layout !== "list" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: getAttributes()?.map((attr, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "propeller-product-specifications__row odd:bg-card even:bg-muted/20", children: [
             /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 font-medium text-foreground w-1/2", children: getAttributeLabel(attr) }),
@@ -15316,7 +15351,8 @@ function ProductTabs(rawProps) {
                 attributes: getSpecsAttributes(),
                 language: props.language,
                 layout: props.specificationsLayout,
-                grouping: props.specificationsGrouping
+                grouping: props.specificationsGrouping,
+                packageDescription: props.specificationsPackageDescription
               }
             ) }) : null,
             isActive("downloads") && isTabVisible("downloads") ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -15419,7 +15455,8 @@ function ProductTabs(rawProps) {
                 attributes: getSpecsAttributes(),
                 language: props.language,
                 layout: props.specificationsLayout,
-                grouping: props.specificationsGrouping
+                grouping: props.specificationsGrouping,
+                packageDescription: props.specificationsPackageDescription
               }
             ) }) : null
           ] }) : null,
@@ -16206,7 +16243,7 @@ function RegisterForm(rawProps) {
   const contactLabel = props.labels?.contactLabel || "Company";
   const customerLabel = props.labels?.customerLabel || "Consumer";
   const emailPlaceholder = props.labels?.emailPlaceholder || "name@example.com";
-  const passwordPlaceholder = props.labels?.passwordPlaceholder || "\xE2\u20AC\xA2\xE2\u20AC\xA2\xE2\u20AC\xA2\xE2\u20AC\xA2\xE2\u20AC\xA2\xE2\u20AC\xA2\xE2\u20AC\xA2\xE2\u20AC\xA2";
+  const passwordPlaceholder = props.labels?.passwordPlaceholder || "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
   const passwordMismatchText = props.labels?.passwordMismatch || "Passwords do not match";
   const loginText = props.labels?.loginText || "Already have an account?";
   const loginLinkText = props.labels?.loginLink || "Log in";
@@ -17110,7 +17147,9 @@ function SearchBar(rawProps) {
     graphqlClient: props.graphqlClient,
     language: props.language,
     configuration: props.configuration || {},
-    companyId: props.companyId
+    companyId: props.companyId,
+    orderlistIds: props.orderlistIds,
+    applyOrderlists: props.applyOrderlists
   });
   const results = searchResults.slice(0, maxResults).map((item) => mapToSearchBarResult(item));
   const itemsFound = searchItemsFound;