@propeller-commerce/propeller-v2-react-ui 0.16.0 → 0.19.0

package/dist/pure.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 var propellerV2CoreUi = require('@propeller-commerce/propeller-v2-core-ui');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var propellerSdkV2 = require('@propeller-commerce/propeller-sdk-v2');
@@ -26,6 +28,9 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/components/Breadcrumbs.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 function Breadcrumbs(props) {
   const lang = props.language || "NL";
   const path = props.categoryPath || [];
@@ -58,7 +63,7 @@ function Breadcrumbs(props) {
     return index === displayItems.length - 1;
   }
   const showSeparatorBefore = (index) => props.showHome !== false || index > 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": propellerV2CoreUi.getLabel(props.labels, "breadcrumbAriaLabel", "Breadcrumb"), className: `propeller-breadcrumbs ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "propeller-breadcrumbs__list flex flex-wrap items-center text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": propellerV2CoreUi.getLabel(props.labels, "breadcrumbAriaLabel", "Breadcrumb"), className: cn(`propeller-breadcrumbs ${props.className || ""}`), children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "propeller-breadcrumbs__list flex flex-wrap items-center text-sm text-muted-foreground", children: [
     props.showHome !== false ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "propeller-breadcrumbs__item flex items-center", "data-home": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
       "a",
       {
@@ -164,7 +169,7 @@ function CategoryShortDescription(props) {
     (d) => d.language === props.language
   );
   const html = match?.value || "";
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!html ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-category-short-description mb-6 ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  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",
@@ -174,7 +179,7 @@ function CategoryShortDescription(props) {
 }
 var CategoryShortDescription_default = CategoryShortDescription;
 function GridTitle(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-grid-title mb-8 ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`propeller-grid-title mb-8 ${props.className || ""}`), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
     props.headingLevel === "h2" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null,
     props.headingLevel !== "h2" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null
   ] }) });
@@ -222,7 +227,7 @@ function ItemStock(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasInventory() ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.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: [
@@ -264,20 +269,21 @@ var ItemStock_default = React__namespace.memo(ItemStock);
 function getProductName(orderItem, language) {
   return propellerV2CoreUi.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 = propellerV2CoreUi.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 = propellerV2CoreUi.getLocalizedValue(orderItem?.product?.slugs, language, "");
-  if (id && slug) return `/product/${id}/${slug}`;
+  const product = orderItem?.product;
+  const id = product?.productId;
+  const slug = propellerV2CoreUi.getLocalizedValue(product?.slugs, language, "");
+  if (id && slug) return urls?.getProductUrl?.(product, language) || `/product/${id}/${slug}`;
   return "";
 }
 function OrderItemCard(props) {
@@ -294,7 +300,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;
@@ -307,7 +313,7 @@ function OrderItemCard(props) {
       return props.formatPrice(price);
     }
     if (!price && price !== 0) return "-";
-    return propellerV2CoreUi.formatPrice(price, { symbol: props.currency ?? "\u20AC" });
+    return propellerV2CoreUi.formatPrice(price, { symbol: props.currency ?? "\u20AC", locale: propellerV2CoreUi.localeForLanguage(props.language) });
   }
   const discountDisplay = discountPercentage > 0 ? `${formatItemPrice(discount)} (${discountPercentage.toFixed(2).replace(".", ",")}%)` : formatItemPrice(discount);
   return /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: "propeller-order-item-card", children: [
@@ -448,7 +454,7 @@ function OrderSummary(props) {
     if (props.formatPrice) {
       return props.formatPrice(price);
     }
-    return propellerV2CoreUi.formatPrice(price || 0, { symbol: props.currency ?? "\u20AC" });
+    return propellerV2CoreUi.formatPrice(price || 0, { symbol: props.currency ?? "\u20AC", locale: propellerV2CoreUi.localeForLanguage(props.language) });
   }
   function numericDate(dateString) {
     const d = new Date(dateString);
@@ -556,7 +562,7 @@ function OrderTotals(props) {
   const postageData = props.order?.postageData;
   function formatItemPrice(price) {
     if (props.formatPrice) return props.formatPrice(price);
-    return propellerV2CoreUi.formatPrice(price || 0, { symbol: props.currency ?? "\u20AC" });
+    return propellerV2CoreUi.formatPrice(price || 0, { symbol: props.currency ?? "\u20AC", locale: propellerV2CoreUi.localeForLanguage(props.language) });
   }
   const subtotal = total?.gross || 0;
   const hasDiscount = !!total && total.discountType !== propellerSdkV2.OrderDiscountType.N && total.discountValue > 0;
@@ -684,7 +690,7 @@ function ProductBulkPrices(props) {
   function getPrice(tier) {
     const value = includeTax ? tier.net : tier.gross;
     if (value === null || value === void 0) return "";
-    return propellerV2CoreUi.formatPrice(value, { symbol: props.currency ?? "\u20AC" });
+    return propellerV2CoreUi.formatPrice(value, { symbol: props.currency ?? "\u20AC", locale: propellerV2CoreUi.localeForLanguage(props.language) });
   }
   function getQuantityLabel(tier, index) {
     const discount = tier.discount;
@@ -695,13 +701,14 @@ function ProductBulkPrices(props) {
     if (nextQty) return `${qty}\u2013${nextQty - 1}`;
     return `${qty}+`;
   }
+  const title = props.labels?.title ?? "Volume pricing";
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isHidden && hasItems ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `propeller-product-bulk-prices ${props.className || ""}`,
+      className: cn(`propeller-product-bulk-prices ${props.className || ""}`),
       "data-include-tax": includeTax ? "true" : "false",
       children: [
-        propellerV2CoreUi.getLabel(props.labels, "title", "Volume pricing") ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-product-bulk-prices__title text-base font-semibold text-foreground mb-3", children: propellerV2CoreUi.getLabel(props.labels, "title", "Volume pricing") }) : null,
+        title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-product-bulk-prices__title text-base font-semibold text-foreground mb-3", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-bulk-prices__table-wrapper overflow-hidden rounded-container border border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "propeller-product-bulk-prices__table w-full text-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "propeller-product-bulk-prices__thead bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
             /* @__PURE__ */ jsxRuntime.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: propellerV2CoreUi.getLabel(props.labels, "quantityFrom", "Qty from") }),
@@ -738,7 +745,7 @@ function ProductDownloads(props) {
     const match = alts.find((a) => a.language === lang);
     return match?.value || alts?.[0]?.value || "Download";
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-downloads ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-downloads ${props.className || ""}`), children: [
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-product-downloads__title text-base font-semibold text-foreground mb-3", children: propellerV2CoreUi.getLabel(props.labels, "title", "Downloads") }) : null,
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-product-downloads__list space-y-2", children: items.map((doc, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "propeller-product-downloads__item", children: !!getDocumentUrl(doc) ? /* @__PURE__ */ jsxRuntime.jsxs(
       "a",
@@ -798,7 +805,7 @@ function ProductPriceDisplay(props) {
   }
   function formatPrice5(value) {
     if (value === null || value === void 0) return "";
-    return propellerV2CoreUi.formatPrice(value, { symbol: props.currency ?? "\u20AC" });
+    return propellerV2CoreUi.formatPrice(value, { symbol: props.currency ?? "\u20AC", locale: propellerV2CoreUi.localeForLanguage(props.language) });
   }
   function getOptionsTotal(useNet) {
     const options = props.options || [];
@@ -841,7 +848,7 @@ function ProductPriceDisplay(props) {
   function getSecondaryTaxLabel() {
     return props.includeTax ? propellerV2CoreUi.getLabel(props.labels, "exclTax", "excl. VAT") : propellerV2CoreUi.getLabel(props.labels, "inclTax", "incl. VAT");
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-price ${props.className || ""}`, "data-hidden": isHidden() ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-price ${props.className || ""}`), "data-hidden": isHidden() ? "true" : "false", children: [
     isHidden() && props.showLoginPrompt !== false ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-product-price__login-prompt text-sm text-muted-foreground italic", children: propellerV2CoreUi.getLabel(props.labels, "loginToSeePrices", "Log in to see prices") }) : null,
     !isHidden() && !!getLeadingPrice() ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-price__content flex flex-col gap-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-price__primary flex items-baseline gap-2", children: [
@@ -875,7 +882,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 });
 }
@@ -918,7 +925,7 @@ function ProductVideos(props) {
     }
     return uri;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-product-videos ${props.className || ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(`propeller-product-videos ${props.className || ""}`), children: [
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-product-videos__title text-base font-semibold text-foreground mb-3", children: propellerV2CoreUi.getLabel(props.labels, "title", "Videos") }) : null,
     hasItems ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-videos__list space-y-4", children: items.map((video, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",