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

package/dist/pure.d.cts

@@ -245,6 +245,16 @@ interface OrderItemCardProps {
     orderItem: OrderItem;
     /** Child order items (rendered as indented sub-rows beneath the parent) */
     childItems?: OrderItem[];
+    /**
+     * Language used to resolve localized product names and the slugs in the
+     * item's PDP link. Defaults to the catalog's default language.
+     *
+     * 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).
+     */
+    language?: string;
     /** Should the item title be a link to the PDP */
     titleLinkable?: boolean;
     /** Display a small thumbnail of the order item */

package/dist/pure.d.ts

@@ -245,6 +245,16 @@ interface OrderItemCardProps {
     orderItem: OrderItem;
     /** Child order items (rendered as indented sub-rows beneath the parent) */
     childItems?: OrderItem[];
+    /**
+     * Language used to resolve localized product names and the slugs in the
+     * item's PDP link. Defaults to the catalog's default language.
+     *
+     * 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).
+     */
+    language?: string;
     /** Should the item title be a link to the PDP */
     titleLinkable?: boolean;
     /** Display a small thumbnail of the order item */

package/dist/pure.js

@@ -1,9 +1,14 @@
-import { buildClusterJsonLd, safeJsonStringify, buildItemListJsonLd, buildProductJsonLd, getLabel, isContentHidden, formatPrice, getCountryName } from '@propeller-commerce/propeller-v2-core-ui';
+import { buildClusterJsonLd, safeJsonStringify, buildItemListJsonLd, buildProductJsonLd, getLabel, getLocalizedValue, isContentHidden, formatPrice, 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';
 import * as React from 'react';
 import { OrderDiscountType, YesNo } from '@propeller-commerce/propeller-sdk-v2';
 
 // src/components/Breadcrumbs.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 function Breadcrumbs(props) {
   const lang = props.language || "NL";
   const path = props.categoryPath || [];
@@ -36,7 +41,7 @@ function Breadcrumbs(props) {
     return index === displayItems.length - 1;
   }
   const showSeparatorBefore = (index) => props.showHome !== false || index > 0;
-  return /* @__PURE__ */ jsx("nav", { "aria-label": getLabel(props.labels, "breadcrumbAriaLabel", "Breadcrumb"), className: `propeller-breadcrumbs ${props.className || ""}`, children: /* @__PURE__ */ jsxs("ol", { className: "propeller-breadcrumbs__list flex flex-wrap items-center text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": getLabel(props.labels, "breadcrumbAriaLabel", "Breadcrumb"), className: cn(`propeller-breadcrumbs ${props.className || ""}`), children: /* @__PURE__ */ jsxs("ol", { className: "propeller-breadcrumbs__list flex flex-wrap items-center text-sm text-muted-foreground", children: [
     props.showHome !== false ? /* @__PURE__ */ jsx("li", { className: "propeller-breadcrumbs__item flex items-center", "data-home": "true", children: /* @__PURE__ */ jsx(
       "a",
       {
@@ -142,7 +147,7 @@ function CategoryShortDescription(props) {
     (d) => d.language === props.language
   );
   const html = match?.value || "";
-  return /* @__PURE__ */ jsx(Fragment, { children: !!html ? /* @__PURE__ */ jsx("div", { className: `propeller-category-short-description mb-6 ${props.className || ""}`, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: !!html ? /* @__PURE__ */ jsx("div", { className: cn(`propeller-category-short-description mb-6 ${props.className || ""}`), children: /* @__PURE__ */ jsx(
     "div",
     {
       className: "propeller-category-short-description__content prose prose-slate max-w-none text-muted-foreground",
@@ -152,7 +157,7 @@ function CategoryShortDescription(props) {
 }
 var CategoryShortDescription_default = CategoryShortDescription;
 function GridTitle(props) {
-  return /* @__PURE__ */ jsx("div", { className: `propeller-grid-title mb-8 ${props.className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn(`propeller-grid-title mb-8 ${props.className || ""}`), children: /* @__PURE__ */ jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
     props.headingLevel === "h2" ? /* @__PURE__ */ jsx("h2", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null,
     props.headingLevel !== "h2" ? /* @__PURE__ */ jsx("h1", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null
   ] }) });
@@ -200,7 +205,7 @@ function ItemStock(props) {
   return /* @__PURE__ */ jsx(Fragment, { children: hasInventory() ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `propeller-item-stock flex flex-wrap items-center gap-1.5 ${props.className || ""}`,
+      className: cn(`propeller-item-stock flex flex-wrap items-center gap-1.5 ${props.className || ""}`),
       "data-available": isAvailable() ? "true" : "false",
       "data-stock": getStockStatusData(),
       children: [
@@ -239,22 +244,22 @@ function ItemStock(props) {
   ) }) : null });
 }
 var ItemStock_default = React.memo(ItemStock);
-function getProductName(orderItem) {
-  return orderItem?.product?.names?.[0]?.value || orderItem?.name || "Unknown Product";
+function getProductName(orderItem, language) {
+  return getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
-function getClusterUrl(orderItem) {
+function getClusterUrl(orderItem, language) {
   const cluster = orderItem?.product?.cluster;
   if (!cluster) return "";
   const id = cluster.clusterId;
-  const slug = cluster.slugs?.[0]?.value || "";
+  const slug = getLocalizedValue(cluster.slugs, language, "");
   if (!id || !slug) return "";
   return `/cluster/${id}/${slug}`;
 }
-function getProductUrl(orderItem) {
-  const cu = getClusterUrl(orderItem);
+function getProductUrl(orderItem, language) {
+  const cu = getClusterUrl(orderItem, language);
   if (cu) return cu;
   const id = orderItem?.product?.productId;
-  const slug = orderItem?.product?.slugs?.[0]?.value || "";
+  const slug = getLocalizedValue(orderItem?.product?.slugs, language, "");
   if (id && slug) return `/product/${id}/${slug}`;
   return "";
 }
@@ -269,10 +274,10 @@ function OrderItemCard(props) {
   const showDiscount = props.showDiscount !== void 0 ? props.showDiscount : false;
   const showStockComponent = props.showStockComponent !== void 0 ? props.showStockComponent : false;
   const showItemNotes = props.showItemNotes !== void 0 ? props.showItemNotes : false;
-  const productName = getProductName(item);
+  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);
+  const productUrl = getProductUrl(item, props.language);
   const quantity = item?.quantity || 0;
   const priceTotal = item?.priceTotal || 0;
   const discount = item?.discount || 0;
@@ -387,7 +392,7 @@ function OrderItemCard(props) {
         className: "propeller-order-item-card__child-row border-0",
         "data-child": "true",
         children: [
-          /* @__PURE__ */ jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--product px-6 py-2 pl-28", children: /* @__PURE__ */ jsx("span", { className: "propeller-order-item-card__child-title text-sm text-muted-foreground", children: child.product?.names?.[0]?.value || child.name || "Unknown" }) }),
+          /* @__PURE__ */ jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--product px-6 py-2 pl-28", children: /* @__PURE__ */ jsx("span", { className: "propeller-order-item-card__child-title text-sm text-muted-foreground", children: getLocalizedValue(child.product?.names, props.language, "") || child.name || "Unknown" }) }),
           showQuantity ? /* @__PURE__ */ jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--quantity px-6 py-2 text-center text-sm text-muted-foreground", children: child.quantity || 0 }) : null,
           showDiscount ? /* @__PURE__ */ jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--discount px-6 py-2 text-right text-sm text-muted-foreground" }) : null,
           showPrice ? /* @__PURE__ */ jsx("td", { className: "propeller-order-item-card__cell propeller-order-item-card__cell--price px-6 py-2 text-right whitespace-nowrap text-sm text-muted-foreground", children: formatItemPrice(child.priceTotal || 0) }) : null
@@ -676,7 +681,7 @@ function ProductBulkPrices(props) {
   return /* @__PURE__ */ jsx(Fragment, { children: !isHidden && hasItems ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `propeller-product-bulk-prices ${props.className || ""}`,
+      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,
@@ -716,7 +721,7 @@ function ProductDownloads(props) {
     const match = alts.find((a) => a.language === lang);
     return match?.value || alts?.[0]?.value || "Download";
   }
-  return /* @__PURE__ */ jsxs("div", { className: `propeller-product-downloads ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(`propeller-product-downloads ${props.className || ""}`), children: [
     hasItems ? /* @__PURE__ */ jsx("h3", { className: "propeller-product-downloads__title text-base font-semibold text-foreground mb-3", children: getLabel(props.labels, "title", "Downloads") }) : null,
     hasItems ? /* @__PURE__ */ jsx("ul", { className: "propeller-product-downloads__list space-y-2", children: items.map((doc, index) => /* @__PURE__ */ jsx("li", { className: "propeller-product-downloads__item", children: !!getDocumentUrl(doc) ? /* @__PURE__ */ jsxs(
       "a",
@@ -819,7 +824,7 @@ function ProductPriceDisplay(props) {
   function getSecondaryTaxLabel() {
     return props.includeTax ? getLabel(props.labels, "exclTax", "excl. VAT") : getLabel(props.labels, "inclTax", "incl. VAT");
   }
-  return /* @__PURE__ */ jsxs("div", { className: `propeller-product-price ${props.className || ""}`, "data-hidden": isHidden() ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(`propeller-product-price ${props.className || ""}`), "data-hidden": isHidden() ? "true" : "false", children: [
     isHidden() && props.showLoginPrompt !== false ? /* @__PURE__ */ jsx("p", { className: "propeller-product-price__login-prompt text-sm text-muted-foreground italic", children: getLabel(props.labels, "loginToSeePrices", "Log in to see prices") }) : null,
     !isHidden() && !!getLeadingPrice() ? /* @__PURE__ */ jsxs("div", { className: "propeller-product-price__content flex flex-col gap-0.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "propeller-product-price__primary flex items-baseline gap-2", children: [
@@ -853,7 +858,7 @@ function ProductShortDescription(props) {
     "div",
     {
       dangerouslySetInnerHTML: { __html: html },
-      className: `propeller-product-short-description prose prose-slate max-w-none text-muted-foreground ${props.className || ""}`
+      className: cn(`propeller-product-short-description prose prose-slate max-w-none text-muted-foreground ${props.className || ""}`)
     }
   ) : null });
 }
@@ -896,7 +901,7 @@ function ProductVideos(props) {
     }
     return uri;
   }
-  return /* @__PURE__ */ jsxs("div", { className: `propeller-product-videos ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(`propeller-product-videos ${props.className || ""}`), children: [
     hasItems ? /* @__PURE__ */ jsx("h3", { className: "propeller-product-videos__title text-base font-semibold text-foreground mb-3", children: getLabel(props.labels, "title", "Videos") }) : null,
     hasItems ? /* @__PURE__ */ jsx("div", { className: "propeller-product-videos__list space-y-4", children: items.map((video, index) => /* @__PURE__ */ jsx(
       "div",