@propeller-commerce/propeller-v2-react-ui 0.4.22 → 0.4.24

package/dist/index.d.cts

@@ -3051,6 +3051,12 @@ interface CartIconAndSidebarProps {
      * continueShopping, qty, total, checkoutButton, cartPageButton, closeLabel
      */
     labels?: Record<string, string>;
+    /**
+     * Labels forwarded to the inner CartItem rows (e.g. `qtyPrefix`). Without
+     * this the sidebar's line items fell back to English ("Qty:") even on a
+     * localized page. Keys match CartItem's label map.
+     */
+    cartItemLabels?: Record<string, string>;
     /** Logged-in user — used to determine purchaser role and authorization limit */
     user?: Contact | Customer;
     /** Configuration object passed to the component */
@@ -3165,6 +3171,14 @@ interface CartPaymethodsProps {
     currency?: string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * Localized display names for payment methods, keyed by the method **code**
+     * (lower-cased, e.g. `{ pickup: 'Bij afhalen', on_account: 'Op rekening' }`).
+     * The backend `method.name` is often an un-localized English string (e.g.
+     * "On pickup"), so this map lets the host override it per locale. Lookup
+     * order: `paymethodLabels[code]` → `method.name` → `method.code`.
+     */
+    paymethodLabels?: Record<string, string>;
 }
 /**
  * Renders the cart's available payment methods as a selectable grid. Hides the
@@ -3738,12 +3752,20 @@ interface DeliveryDateProps {
     containerClass?: string;
     /** Pre-selected date from cart (e.g. cart.postageData.requestDate: "2026-04-17T00:00:00.000Z") */
     initialDate?: string;
+    /**
+     * Active language/locale (e.g. `'NL'`). Sets the `lang` attribute on the
+     * native `<input type="date">` so the browser renders its calendar chrome
+     * (month name, weekday headers, Today/Clear) in that locale. Resolved from
+     * `<PropellerProvider>` when omitted. The quick-pick tile text is localized
+     * separately via `labels` (day_N / month_N keys).
+     */
+    language?: string;
 }
 /**
  * Delivery-date selector: quick-pick tiles for the next few days plus an
  * optional custom date picker, with validation against a minimum date.
  */
-declare function DeliveryDate(props: DeliveryDateProps): React$1.JSX.Element;
+declare function DeliveryDate(rawProps: DeliveryDateProps): React$1.JSX.Element;
 
 /**
  * @rsc-blocked — Client-only component: JSX event handlers (onClick/onChange/etc.).
@@ -6503,8 +6525,16 @@ interface SearchBarResult {
     name: string;
     /** SKU code */
     sku?: string;
-    /** Price value */
+    /**
+     * Leading price value (kept for back-compat / consumer callbacks). Populated
+     * with the tax-inclusive (net) or exclusive (gross) amount per the active
+     * toggle — see `priceNet`/`priceGross` for both raw values.
+     */
     price?: number;
+    /** Tax-inclusive price (SDK `price.net`). */
+    priceNet?: number;
+    /** Tax-exclusive price (SDK `price.gross`). */
+    priceGross?: number;
     /** Image URL */
     imageUrl?: string;
     /** URL path to navigate to */
@@ -6541,6 +6571,19 @@ interface SearchBarProps {
     currency?: string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * When true, the tax-inclusive (net) price leads; false shows tax-exclusive
+     * (gross). Note the SDK mapping: `price.net` = incl. VAT, `price.gross` =
+     * excl. VAT. Resolved from `<PropellerProvider>` when omitted; defaults to
+     * `false` (excl.). Mirrors ProductCard/ProductPrice so the dropdown agrees
+     * with every other price surface.
+     */
+    includeTax?: boolean;
+    /**
+     * Labels for the incl./excl. price suffix. Keys: `inclTax`, `exclTax`.
+     * Falls back to English 'incl. VAT' / 'excl. VAT'.
+     */
+    priceLabels?: Record<string, string>;
     /** Additional class name for the container */
     containerClassName?: string;
     /** Tax zone used for price calculation. Defaults to 'NL'. */

package/dist/index.d.ts

@@ -3051,6 +3051,12 @@ interface CartIconAndSidebarProps {
      * continueShopping, qty, total, checkoutButton, cartPageButton, closeLabel
      */
     labels?: Record<string, string>;
+    /**
+     * Labels forwarded to the inner CartItem rows (e.g. `qtyPrefix`). Without
+     * this the sidebar's line items fell back to English ("Qty:") even on a
+     * localized page. Keys match CartItem's label map.
+     */
+    cartItemLabels?: Record<string, string>;
     /** Logged-in user — used to determine purchaser role and authorization limit */
     user?: Contact | Customer;
     /** Configuration object passed to the component */
@@ -3165,6 +3171,14 @@ interface CartPaymethodsProps {
     currency?: string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * Localized display names for payment methods, keyed by the method **code**
+     * (lower-cased, e.g. `{ pickup: 'Bij afhalen', on_account: 'Op rekening' }`).
+     * The backend `method.name` is often an un-localized English string (e.g.
+     * "On pickup"), so this map lets the host override it per locale. Lookup
+     * order: `paymethodLabels[code]` → `method.name` → `method.code`.
+     */
+    paymethodLabels?: Record<string, string>;
 }
 /**
  * Renders the cart's available payment methods as a selectable grid. Hides the
@@ -3738,12 +3752,20 @@ interface DeliveryDateProps {
     containerClass?: string;
     /** Pre-selected date from cart (e.g. cart.postageData.requestDate: "2026-04-17T00:00:00.000Z") */
     initialDate?: string;
+    /**
+     * Active language/locale (e.g. `'NL'`). Sets the `lang` attribute on the
+     * native `<input type="date">` so the browser renders its calendar chrome
+     * (month name, weekday headers, Today/Clear) in that locale. Resolved from
+     * `<PropellerProvider>` when omitted. The quick-pick tile text is localized
+     * separately via `labels` (day_N / month_N keys).
+     */
+    language?: string;
 }
 /**
  * Delivery-date selector: quick-pick tiles for the next few days plus an
  * optional custom date picker, with validation against a minimum date.
  */
-declare function DeliveryDate(props: DeliveryDateProps): React$1.JSX.Element;
+declare function DeliveryDate(rawProps: DeliveryDateProps): React$1.JSX.Element;
 
 /**
  * @rsc-blocked — Client-only component: JSX event handlers (onClick/onChange/etc.).
@@ -6503,8 +6525,16 @@ interface SearchBarResult {
     name: string;
     /** SKU code */
     sku?: string;
-    /** Price value */
+    /**
+     * Leading price value (kept for back-compat / consumer callbacks). Populated
+     * with the tax-inclusive (net) or exclusive (gross) amount per the active
+     * toggle — see `priceNet`/`priceGross` for both raw values.
+     */
     price?: number;
+    /** Tax-inclusive price (SDK `price.net`). */
+    priceNet?: number;
+    /** Tax-exclusive price (SDK `price.gross`). */
+    priceGross?: number;
     /** Image URL */
     imageUrl?: string;
     /** URL path to navigate to */
@@ -6541,6 +6571,19 @@ interface SearchBarProps {
     currency?: string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * When true, the tax-inclusive (net) price leads; false shows tax-exclusive
+     * (gross). Note the SDK mapping: `price.net` = incl. VAT, `price.gross` =
+     * excl. VAT. Resolved from `<PropellerProvider>` when omitted; defaults to
+     * `false` (excl.). Mirrors ProductCard/ProductPrice so the dropdown agrees
+     * with every other price surface.
+     */
+    includeTax?: boolean;
+    /**
+     * Labels for the incl./excl. price suffix. Keys: `inclTax`, `exclTax`.
+     * Falls back to English 'incl. VAT' / 'excl. VAT'.
+     */
+    priceLabels?: Record<string, string>;
     /** Additional class name for the container */
     containerClassName?: string;
     /** Tax zone used for price calculation. Defaults to 'NL'. */

package/dist/index.js

@@ -6705,8 +6705,9 @@ function CartIconAndSidebar(rawProps) {
     (sum, item) => sum + item.quantity,
     0
   );
-  const totalNet = props.cart?.total?.totalNet;
-  const totalPrice = totalNet === void 0 || totalNet === null ? money(0) : money(totalNet);
+  const useTax = !!props.includeTax;
+  const totalRaw = useTax ? props.cart?.total?.totalNet : props.cart?.total?.totalGross;
+  const totalPrice = totalRaw === void 0 || totalRaw === null ? money(0) : money(totalRaw);
   const sidebarTitle = props.cartSidebarTitle || props.labels?.["cartSidebarTitle"] || "Shopping cart";
   const purchaserPAC = findPurchaserPAC(props.user, props.companyId);
   const totalGross = props.cart?.total?.totalGross ?? 0;
@@ -6909,6 +6910,7 @@ function CartIconAndSidebar(rawProps) {
                 language: props.language,
                 configuration: props.configuration,
                 companyId: props.companyId,
+                labels: props.cartItemLabels,
                 cardFrame: false,
                 showDelete: false,
                 readOnlyQuantity: true,
@@ -6916,7 +6918,7 @@ function CartIconAndSidebar(rawProps) {
                 showCartItemNotesField: false,
                 showCrossupsells: false,
                 showStockComponent: false,
-                includeTax: false,
+                includeTax: useTax,
                 className: "propeller-cart-icon__item",
                 children: [
                   /* @__PURE__ */ jsx(CartItem_default.Image, { className: "w-20 h-20 flex-shrink-0 bg-surface-hover rounded-control overflow-hidden border border-border-subtle" }),
@@ -6937,7 +6939,7 @@ function CartIconAndSidebar(rawProps) {
               },
               item.itemId
             )) }),
-            /* @__PURE__ */ jsx(CartBonusItemsImpl, { cart: props.cart, includeTax: true, className: "mt-4" })
+            /* @__PURE__ */ jsx(CartBonusItemsImpl, { cart: props.cart, includeTax: useTax, className: "mt-4" })
           ] }),
           " ",
           items.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "propeller-cart-icon__sidebar-footer px-5 py-4 border-t border-border space-y-3 bg-surface-hover", children: [
@@ -7014,11 +7016,11 @@ function CartOverview(props) {
   function requestDate() {
     const date = props.cart?.postageData?.requestDate;
     if (!date) return "";
-    try {
-      return new Date(date).toLocaleDateString();
-    } catch {
-      return date;
-    }
+    const d = new Date(date);
+    if (isNaN(d.getTime())) return date;
+    const day = String(d.getDate()).padStart(2, "0");
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    return `${day}-${month}-${d.getFullYear()}`;
   }
   function handleTermsLinkClick(event) {
     event.preventDefault();
@@ -7181,6 +7183,10 @@ function CartPaymethods(rawProps) {
     if (props.formatPrice) return props.formatPrice(price);
     return formatPrice(price || 0, { symbol: props.currency ?? "\u20AC" });
   }
+  function methodName(method) {
+    const code = (method.code || "").toLowerCase();
+    return props.paymethodLabels?.[code] || method.name || method.code || "";
+  }
   function handleSelect(method) {
     setSelectedCode(method.code);
     if (props.onPaymethodSelect) props.onPaymethodSelect(method);
@@ -7211,10 +7217,10 @@ function CartPaymethods(rawProps) {
               {
                 className: "propeller-cart-paymethods__method-logo max-h-10 max-w-[80%] w-auto object-contain",
                 src: logoUrl,
-                alt: method.name || method.code
+                alt: methodName(method)
               }
             ) }) : null,
-            /* @__PURE__ */ jsx("span", { className: "propeller-cart-paymethods__method-name font-medium text-sm", children: method.name || method.code })
+            /* @__PURE__ */ jsx("span", { className: "propeller-cart-paymethods__method-name font-medium text-sm", children: methodName(method) })
           ]
         },
         method.code
@@ -8380,7 +8386,8 @@ function computeUpcomingDates(count, skipWeekends) {
   }
   return days;
 }
-function DeliveryDate(props) {
+function DeliveryDate(rawProps) {
+  const props = useInfraProps(rawProps);
   const [selectedDate, setSelectedDate] = useState("");
   const [modalOpen, setModalOpen] = useState(false);
   const [customDateValue, setCustomDateValue] = useState("");
@@ -8401,7 +8408,9 @@ function DeliveryDate(props) {
     if (!isoDate) return "";
     const date = new Date(isoDate);
     if (isNaN(date.getTime())) return "";
-    return `${WEEKDAYS[date.getDay()]}, ${MONTHS[date.getMonth()]} ${date.getDate()}`;
+    const weekday = getLabel(props.labels, `day_${date.getDay()}`, WEEKDAYS[date.getDay()]);
+    const month = getLabel(props.labels, `month_${date.getMonth()}`, MONTHS[date.getMonth()]);
+    return `${weekday}, ${month} ${date.getDate()}`;
   }
   function handleSelect(isoDate) {
     setSelectedDate(isoDate);
@@ -8515,6 +8524,7 @@ function DeliveryDate(props) {
             "input",
             {
               type: "date",
+              lang: props.language ? props.language.toLowerCase() : void 0,
               className: `propeller-delivery-date__input w-full border rounded-control px-3 py-2 text-sm focus:outline-none focus:ring-2 ${customDateError ? "border-destructive focus:ring-destructive focus:border-destructive" : "border-input focus:ring-secondary focus:border-secondary"}`,
               min: minDate,
               value: customDateValue,
@@ -9667,10 +9677,11 @@ function FavoriteLists(rawProps) {
     if (props.formatDate) return props.formatDate(dateString);
     if (!dateString) return "-";
     const d = new Date(dateString);
+    if (isNaN(d.getTime())) return dateString;
     const day = String(d.getDate()).padStart(2, "0");
     const month = String(d.getMonth() + 1).padStart(2, "0");
     const year = d.getFullYear();
-    return `${day}/${month}/${year}`;
+    return `${day}-${month}-${year}`;
   }
   function getProductCount(list) {
     const products = list.products;
@@ -11815,7 +11826,11 @@ function OrderList(rawProps) {
   function formatDate(dateString) {
     if (props.formatDate) return props.formatDate(dateString);
     if (!dateString) return "-";
-    return new Date(dateString).toLocaleDateString();
+    const d = new Date(dateString);
+    if (isNaN(d.getTime())) return dateString;
+    const day = String(d.getDate()).padStart(2, "0");
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    return `${day}-${month}-${d.getFullYear()}`;
   }
   function formatPrice17(price) {
     if (props.formatPrice) return props.formatPrice(price);
@@ -12252,7 +12267,10 @@ function OrderShipments(props) {
   function formatDate(dateStr) {
     if (!dateStr) return "-";
     const d = new Date(dateStr);
-    return `${d.getDate()}.${d.getMonth() + 1}.${d.getFullYear()}`;
+    if (isNaN(d.getTime())) return dateStr;
+    const day = String(d.getDate()).padStart(2, "0");
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    return `${day}-${month}-${d.getFullYear()}`;
   }
   function getOrderItemForShipmentItem(shipmentItem) {
     if (!props.order?.items || !shipmentItem.orderItemId) return null;
@@ -12469,15 +12487,18 @@ function OrderSummary(props) {
     }
     return formatPrice(price || 0, { symbol: props.currency ?? "\u20AC" });
   }
+  function numericDate(dateString) {
+    const d = new Date(dateString);
+    if (isNaN(d.getTime())) return dateString;
+    const day = String(d.getDate()).padStart(2, "0");
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    return `${day}-${month}-${d.getFullYear()}`;
+  }
   function formatOrderDate(dateString) {
     if (props.formatDate) {
       return props.formatDate(dateString);
     }
-    try {
-      return new Date(dateString).toLocaleDateString("en-US");
-    } catch {
-      return dateString;
-    }
+    return numericDate(dateString);
   }
   const requestDateRaw = order?.postageData?.requestDate;
   let requestDate = "";
@@ -12485,11 +12506,7 @@ function OrderSummary(props) {
     if (props.formatDate) {
       requestDate = props.formatDate(requestDateRaw);
     } else {
-      try {
-        requestDate = new Date(requestDateRaw).toLocaleDateString("en-US");
-      } catch {
-        requestDate = requestDateRaw;
-      }
+      requestDate = numericDate(requestDateRaw);
     }
   }
   const getCountryName$1 = (code) => getCountryName(code, props.countries);
@@ -15910,7 +15927,10 @@ function PurchaseAuthorizationRequests(rawProps) {
     if (props.formatDate) return props.formatDate(dateStr);
     if (!dateStr) return "-";
     const d = new Date(dateStr);
-    return `${d.getDate()}.${d.getMonth() + 1}.${d.getFullYear()}`;
+    if (isNaN(d.getTime())) return dateStr;
+    const day = String(d.getDate()).padStart(2, "0");
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    return `${day}-${month}-${d.getFullYear()}`;
   }
   function formatPrice17(price) {
     if (props.formatPrice) return props.formatPrice(price);
@@ -17127,11 +17147,17 @@ function mapToSearchBarResult(item) {
   const id = isCluster ? item.clusterId : item.productId;
   const slug = item.slugs?.[0]?.value || "";
   const url = isCluster ? "/cluster/" + id + "/" + slug : "/product/" + id + "/" + slug;
+  const priceNet = displayItem?.price?.net || 0;
+  const priceGross = displayItem?.price?.gross || 0;
   return {
     id,
     name: item.names?.[0]?.value || "Product",
     sku: item.sku || displayItem?.sku || "",
-    price: displayItem?.price?.gross || 0,
+    // `price` stays the gross value for back-compat; the row picks net/gross
+    // from the two explicit fields below per the toggle.
+    price: priceGross,
+    priceNet,
+    priceGross,
     imageUrl: displayItem?.media?.images?.items?.[0]?.imageVariants?.[0]?.url || "",
     url,
     isCluster
@@ -17160,6 +17186,13 @@ function SearchBar(rawProps) {
     }
     return formatPrice(price || 0, { symbol: props.currency ?? "\u20AC" });
   }
+  const useTax = !!props.includeTax;
+  function leadingPrice(result) {
+    return useTax ? result.priceNet ?? result.price ?? 0 : result.priceGross ?? result.price ?? 0;
+  }
+  function priceTaxLabel() {
+    return useTax ? getLabel(props.priceLabels, "inclTax", "incl. VAT") : getLabel(props.priceLabels, "exclTax", "excl. VAT");
+  }
   function noImageUrl() {
     return props.noImageUrl || "";
   }
@@ -17278,7 +17311,10 @@ function SearchBar(rawProps) {
                       result.sku
                     ] }) : null
                   ] }),
-                  result.price !== void 0 && result.price !== null ? /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__result-price text-sm font-semibold text-foreground flex-shrink-0", children: formatItemPrice(result.price) }) : null
+                  result.price !== void 0 && result.price !== null ? /* @__PURE__ */ jsxs("div", { className: "propeller-search-bar__result-price text-sm font-semibold text-foreground flex-shrink-0 text-right", children: [
+                    /* @__PURE__ */ jsx("span", { className: "propeller-search-bar__result-price-value", children: formatItemPrice(leadingPrice(result)) }),
+                    /* @__PURE__ */ jsx("span", { className: "propeller-search-bar__result-price-label block text-xs font-normal text-muted-foreground", children: priceTaxLabel() })
+                  ] }) : null
                 ]
               },
               result.id + "-" + index