@propeller-commerce/propeller-v2-react-ui 0.18.0 → 0.19.1

package/dist/pure.d.cts

@@ -252,9 +252,22 @@ interface OrderItemCardProps {
      * This component is RSC-safe (no hooks, no context), so the host has to pass
      * it — there is nothing to read it from. Without it a non-default storefront
      * renders default-language names and, worse, default-language slugs in the
-     * links (PWP-940).
+     * links.
      */
     language?: string;
+    /**
+     * URL builders from the host's configuration. Supply them and the item link
+     * is generated the same way every other link on the storefront is — which is
+     * what carries the locale prefix. Without it the component falls back to a
+     * bare `/product/:id/:slug`, and on a prefixed storefront that link drops the
+     * visitor onto the default language.
+     */
+    configuration?: {
+        urls?: {
+            getProductUrl?: (product: Product, language?: string) => string;
+            getClusterUrl?: (cluster: Cluster, language?: string) => string;
+        };
+    };
     /** Should the item title be a link to the PDP */
     titleLinkable?: boolean;
     /** Display a small thumbnail of the order item */
@@ -286,6 +299,15 @@ interface OrderItemCardProps {
 /**
  * Renders a single order line item as a table row (with optional indented
  * child-item rows), showing image, SKU, quantity, discount and price.
+ *
+ * `orderItem.product` is optional and really can be absent: a product that is
+ * hidden, withdrawn or deleted from the catalog still appears on the orders and
+ * quotes it was sold on, but the API returns no product record for it. Every
+ * product-derived value below therefore falls back to the order item, which
+ * carries its own snapshot of the line — name, sku, quantity and prices — taken
+ * when the order was placed. Such a row renders as plain text: the placeholder
+ * thumbnail, the untranslated `orderItem.name` (there are no localized names to
+ * resolve), and no PDP link (there are no slugs to build one from).
  */
 declare function OrderItemCard(props: OrderItemCardProps): React.JSX.Element;
 
@@ -297,6 +319,12 @@ declare function OrderItemCard(props: OrderItemCardProps): React.JSX.Element;
  */
 
 interface OrderSummaryProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /** The order object from propeller-sdk-v2 */
     order: any;
     /** The CSS class for the order summary container */
@@ -360,6 +388,12 @@ declare function OrderSummary(props: OrderSummaryProps): React.JSX.Element;
  */
 
 interface OrderTotalsProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /** The order/quote used to populate the summary data */
     order: Order;
     /** Order summary block title */
@@ -397,6 +431,12 @@ declare function OrderTotals(props: OrderTotalsProps): React.JSX.Element;
  */
 
 interface ProductBulkPricesProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /**
      * Bulk price tiers from the product.
      * Obtain from `product.bulkPrices`.
@@ -473,6 +513,12 @@ declare function ProductDownloads(props: ProductDownloadsProps): React.JSX.Eleme
  */
 
 interface ProductPriceProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /**
      * ProductPrice object from the product.
      * Obtain from `product.price`.

package/dist/pure.d.ts

@@ -252,9 +252,22 @@ interface OrderItemCardProps {
      * This component is RSC-safe (no hooks, no context), so the host has to pass
      * it — there is nothing to read it from. Without it a non-default storefront
      * renders default-language names and, worse, default-language slugs in the
-     * links (PWP-940).
+     * links.
      */
     language?: string;
+    /**
+     * URL builders from the host's configuration. Supply them and the item link
+     * is generated the same way every other link on the storefront is — which is
+     * what carries the locale prefix. Without it the component falls back to a
+     * bare `/product/:id/:slug`, and on a prefixed storefront that link drops the
+     * visitor onto the default language.
+     */
+    configuration?: {
+        urls?: {
+            getProductUrl?: (product: Product, language?: string) => string;
+            getClusterUrl?: (cluster: Cluster, language?: string) => string;
+        };
+    };
     /** Should the item title be a link to the PDP */
     titleLinkable?: boolean;
     /** Display a small thumbnail of the order item */
@@ -286,6 +299,15 @@ interface OrderItemCardProps {
 /**
  * Renders a single order line item as a table row (with optional indented
  * child-item rows), showing image, SKU, quantity, discount and price.
+ *
+ * `orderItem.product` is optional and really can be absent: a product that is
+ * hidden, withdrawn or deleted from the catalog still appears on the orders and
+ * quotes it was sold on, but the API returns no product record for it. Every
+ * product-derived value below therefore falls back to the order item, which
+ * carries its own snapshot of the line — name, sku, quantity and prices — taken
+ * when the order was placed. Such a row renders as plain text: the placeholder
+ * thumbnail, the untranslated `orderItem.name` (there are no localized names to
+ * resolve), and no PDP link (there are no slugs to build one from).
  */
 declare function OrderItemCard(props: OrderItemCardProps): React.JSX.Element;
 
@@ -297,6 +319,12 @@ declare function OrderItemCard(props: OrderItemCardProps): React.JSX.Element;
  */
 
 interface OrderSummaryProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /** The order object from propeller-sdk-v2 */
     order: any;
     /** The CSS class for the order summary container */
@@ -360,6 +388,12 @@ declare function OrderSummary(props: OrderSummaryProps): React.JSX.Element;
  */
 
 interface OrderTotalsProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /** The order/quote used to populate the summary data */
     order: Order;
     /** Order summary block title */
@@ -397,6 +431,12 @@ declare function OrderTotals(props: OrderTotalsProps): React.JSX.Element;
  */
 
 interface ProductBulkPricesProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /**
      * Bulk price tiers from the product.
      * Obtain from `product.bulkPrices`.
@@ -473,6 +513,12 @@ declare function ProductDownloads(props: ProductDownloadsProps): React.JSX.Eleme
  */
 
 interface ProductPriceProps {
+    /**
+     * Storefront language ('EN', 'NL', …). Decides the number format prices are
+     * rendered in — without it they fall back to Dutch separators regardless of
+     * the language the shopper is reading.
+     */
+    language?: string;
     /**
      * ProductPrice object from the product.
      * Obtain from `product.price`.

package/dist/pure.js

@@ -1,4 +1,4 @@
-import { buildClusterJsonLd, safeJsonStringify, buildItemListJsonLd, buildProductJsonLd, getLabel, getLocalizedValue, isContentHidden, formatPrice, getCountryName } from '@propeller-commerce/propeller-v2-core-ui';
+import { buildClusterJsonLd, safeJsonStringify, buildItemListJsonLd, buildProductJsonLd, getLabel, getLocalizedValue, isContentHidden, formatPrice, localeForLanguage, getCountryName } from '@propeller-commerce/propeller-v2-core-ui';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -247,20 +247,21 @@ var ItemStock_default = React.memo(ItemStock);
 function getProductName(orderItem, language) {
   return getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
-function getClusterUrl(orderItem, language) {
+function getClusterUrl(orderItem, language, urls) {
   const cluster = orderItem?.product?.cluster;
   if (!cluster) return "";
   const id = cluster.clusterId;
   const slug = getLocalizedValue(cluster.slugs, language, "");
   if (!id || !slug) return "";
-  return `/cluster/${id}/${slug}`;
+  return urls?.getClusterUrl?.(cluster, language) || `/cluster/${id}/${slug}`;
 }
-function getProductUrl(orderItem, language) {
-  const cu = getClusterUrl(orderItem, language);
+function getProductUrl(orderItem, language, urls) {
+  const cu = getClusterUrl(orderItem, language, urls);
   if (cu) return cu;
-  const id = orderItem?.product?.productId;
-  const slug = getLocalizedValue(orderItem?.product?.slugs, language, "");
-  if (id && slug) return `/product/${id}/${slug}`;
+  const product = orderItem?.product;
+  const id = product?.productId;
+  const slug = getLocalizedValue(product?.slugs, language, "");
+  if (id && slug) return urls?.getProductUrl?.(product, language) || `/product/${id}/${slug}`;
   return "";
 }
 function OrderItemCard(props) {
@@ -277,7 +278,7 @@ function OrderItemCard(props) {
   const productName = getProductName(item, props.language);
   const productSku = item?.product?.sku || item?.sku || "";
   const productImage = item?.product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url || "";
-  const productUrl = getProductUrl(item, props.language);
+  const productUrl = getProductUrl(item, props.language, props.configuration?.urls);
   const quantity = item?.quantity || 0;
   const priceTotal = item?.priceTotal || 0;
   const discount = item?.discount || 0;
@@ -290,7 +291,7 @@ function OrderItemCard(props) {
       return props.formatPrice(price);
     }
     if (!price && price !== 0) return "-";
-    return formatPrice(price, { symbol: props.currency ?? "\u20AC" });
+    return formatPrice(price, { symbol: props.currency ?? "\u20AC", locale: localeForLanguage(props.language) });
   }
   const discountDisplay = discountPercentage > 0 ? `${formatItemPrice(discount)} (${discountPercentage.toFixed(2).replace(".", ",")}%)` : formatItemPrice(discount);
   return /* @__PURE__ */ jsxs("tbody", { className: "propeller-order-item-card", children: [
@@ -369,11 +370,11 @@ function OrderItemCard(props) {
               className: isChildItem ? "propeller-order-item-card__cell propeller-order-item-card__cell--price px-6 py-2 text-right whitespace-nowrap text-sm text-muted-foreground" : "propeller-order-item-card__cell propeller-order-item-card__cell--price px-6 py-4 text-right whitespace-nowrap",
               children: (() => {
                 const PriceImpl = props.priceComponent;
-                if (PriceImpl) {
+                if (PriceImpl && item?.product?.price) {
                   return /* @__PURE__ */ jsx(
                     PriceImpl,
                     {
-                      price: item?.product?.price,
+                      price: item.product.price,
                       currency: props.currency,
                       labels: props.labels
                     }
@@ -431,7 +432,7 @@ function OrderSummary(props) {
     if (props.formatPrice) {
       return props.formatPrice(price);
     }
-    return formatPrice(price || 0, { symbol: props.currency ?? "\u20AC" });
+    return formatPrice(price || 0, { symbol: props.currency ?? "\u20AC", locale: localeForLanguage(props.language) });
   }
   function numericDate(dateString) {
     const d = new Date(dateString);
@@ -539,7 +540,7 @@ function OrderTotals(props) {
   const postageData = props.order?.postageData;
   function formatItemPrice(price) {
     if (props.formatPrice) return props.formatPrice(price);
-    return formatPrice(price || 0, { symbol: props.currency ?? "\u20AC" });
+    return formatPrice(price || 0, { symbol: props.currency ?? "\u20AC", locale: localeForLanguage(props.language) });
   }
   const subtotal = total?.gross || 0;
   const hasDiscount = !!total && total.discountType !== OrderDiscountType.N && total.discountValue > 0;
@@ -667,7 +668,7 @@ function ProductBulkPrices(props) {
   function getPrice(tier) {
     const value = includeTax ? tier.net : tier.gross;
     if (value === null || value === void 0) return "";
-    return formatPrice(value, { symbol: props.currency ?? "\u20AC" });
+    return formatPrice(value, { symbol: props.currency ?? "\u20AC", locale: localeForLanguage(props.language) });
   }
   function getQuantityLabel(tier, index) {
     const discount = tier.discount;
@@ -678,13 +679,14 @@ function ProductBulkPrices(props) {
     if (nextQty) return `${qty}\u2013${nextQty - 1}`;
     return `${qty}+`;
   }
+  const title = props.labels?.title ?? "Volume pricing";
   return /* @__PURE__ */ jsx(Fragment, { children: !isHidden && hasItems ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(`propeller-product-bulk-prices ${props.className || ""}`),
       "data-include-tax": includeTax ? "true" : "false",
       children: [
-        getLabel(props.labels, "title", "Volume pricing") ? /* @__PURE__ */ jsx("h3", { className: "propeller-product-bulk-prices__title text-base font-semibold text-foreground mb-3", children: getLabel(props.labels, "title", "Volume pricing") }) : null,
+        title ? /* @__PURE__ */ jsx("h3", { className: "propeller-product-bulk-prices__title text-base font-semibold text-foreground mb-3", children: title }) : null,
         /* @__PURE__ */ jsx("div", { className: "propeller-product-bulk-prices__table-wrapper overflow-hidden rounded-container border border-border", children: /* @__PURE__ */ jsxs("table", { className: "propeller-product-bulk-prices__table w-full text-sm", children: [
           /* @__PURE__ */ jsx("thead", { className: "propeller-product-bulk-prices__thead bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
             /* @__PURE__ */ jsx("th", { className: "propeller-product-bulk-prices__th propeller-product-bulk-prices__th--quantity px-4 py-2 text-left font-medium text-muted-foreground", children: getLabel(props.labels, "quantityFrom", "Qty from") }),
@@ -781,7 +783,7 @@ function ProductPriceDisplay(props) {
   }
   function formatPrice5(value) {
     if (value === null || value === void 0) return "";
-    return formatPrice(value, { symbol: props.currency ?? "\u20AC" });
+    return formatPrice(value, { symbol: props.currency ?? "\u20AC", locale: localeForLanguage(props.language) });
   }
   function getOptionsTotal(useNet) {
     const options = props.options || [];