@propeller-commerce/propeller-v2-react-ui 0.4.23 → 0.4.25

package/dist/index.d.cts

@@ -2574,6 +2574,12 @@ interface AddressCardProps {
     enableSetDefault?: boolean;
     /** Display the "Default ... Address" badge @default false */
     showDefaultBadge?: boolean;
+    /**
+     * Display the address-type badge (invoice/delivery chip) @default true.
+     * Set to `false` where the surrounding heading already names the address
+     * type, to avoid a redundant raw-looking chip.
+     */
+    showTypeBadge?: boolean;
     /** Called when address is edited; receives the updated address object */
     onEdit?: (address: Address) => void | Promise<void>;
     /** Called after address edit completes */
@@ -3051,6 +3057,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 +3177,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
@@ -4731,6 +4751,13 @@ interface OrderListProps {
     formatDate?: (dateString: string) => string;
     /** Get status color */
     getStatusColor?: (status: string) => string;
+    /**
+     * Localized display labels for order/quote statuses, keyed by the raw backend
+     * status value (e.g. `{ NEW: 'Nieuw', CONFIRMED: 'Bevestigd', REQUEST:
+     * 'Aangevraagd' }`). Unknown statuses fall back to the raw value. Without
+     * this the list printed the raw enum (NEW/CONFIRMED/REQUEST) to the customer.
+     */
+    statusLabels?: Record<string, string>;
     /** Localization label overrides for UI strings. */
     labels?: {
         /** Text for the per-row "View" action button. */
@@ -4824,6 +4851,19 @@ interface OrderSummaryProps {
     formatDate?: (dateString: string) => string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * Localized order/quote status labels, keyed by the raw backend status
+     * (e.g. `{ NEW: 'Nieuw', REQUEST: 'Aangevraagd' }`). Unknown → raw value.
+     */
+    statusLabels?: Record<string, string>;
+    /**
+     * Localized payment-method names, keyed by the raw method value LOWER-CASED
+     * (e.g. `{ rekening: 'Op rekening', account: 'Op rekening' }`). The backend
+     * sends different raw values on the order vs quote path (REKENING / ACCOUNT),
+     * so mapping both here makes the same method render identically. Unknown →
+     * raw value.
+     */
+    paymethodLabels?: Record<string, string>;
     /** List of countries for resolving codes to names [{code: 'NL', name: 'Netherlands'}, ...] */
     countries?: {
         code: string;

package/dist/index.d.ts

@@ -2574,6 +2574,12 @@ interface AddressCardProps {
     enableSetDefault?: boolean;
     /** Display the "Default ... Address" badge @default false */
     showDefaultBadge?: boolean;
+    /**
+     * Display the address-type badge (invoice/delivery chip) @default true.
+     * Set to `false` where the surrounding heading already names the address
+     * type, to avoid a redundant raw-looking chip.
+     */
+    showTypeBadge?: boolean;
     /** Called when address is edited; receives the updated address object */
     onEdit?: (address: Address) => void | Promise<void>;
     /** Called after address edit completes */
@@ -3051,6 +3057,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 +3177,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
@@ -4731,6 +4751,13 @@ interface OrderListProps {
     formatDate?: (dateString: string) => string;
     /** Get status color */
     getStatusColor?: (status: string) => string;
+    /**
+     * Localized display labels for order/quote statuses, keyed by the raw backend
+     * status value (e.g. `{ NEW: 'Nieuw', CONFIRMED: 'Bevestigd', REQUEST:
+     * 'Aangevraagd' }`). Unknown statuses fall back to the raw value. Without
+     * this the list printed the raw enum (NEW/CONFIRMED/REQUEST) to the customer.
+     */
+    statusLabels?: Record<string, string>;
     /** Localization label overrides for UI strings. */
     labels?: {
         /** Text for the per-row "View" action button. */
@@ -4824,6 +4851,19 @@ interface OrderSummaryProps {
     formatDate?: (dateString: string) => string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * Localized order/quote status labels, keyed by the raw backend status
+     * (e.g. `{ NEW: 'Nieuw', REQUEST: 'Aangevraagd' }`). Unknown → raw value.
+     */
+    statusLabels?: Record<string, string>;
+    /**
+     * Localized payment-method names, keyed by the raw method value LOWER-CASED
+     * (e.g. `{ rekening: 'Op rekening', account: 'Op rekening' }`). The backend
+     * sends different raw values on the order vs quote path (REKENING / ACCOUNT),
+     * so mapping both here makes the same method render identically. Unknown →
+     * raw value.
+     */
+    paymethodLabels?: Record<string, string>;
     /** List of countries for resolving codes to names [{code: 'NL', name: 'Netherlands'}, ...] */
     countries?: {
         code: string;

package/dist/index.js

@@ -3258,10 +3258,15 @@ function LoginForm(rawProps) {
         ] }) : null,
         props.accountHeaderLoginForm ? /* @__PURE__ */ jsxs("div", { className: "propeller-login-form__footer flex flex-col gap-2 text-sm pt-3 text-center", children: [
           /* @__PURE__ */ jsx(LoginFormForgotPasswordLink, {}),
-          /* @__PURE__ */ jsxs("div", { className: "propeller-login-form__register text-xs text-muted-foreground", children: [
-            getLabel(props.labels, "noAccount", "Don't have an account?"),
-            /* @__PURE__ */ jsx(LoginFormRegisterLink, {})
-          ] })
+          /* @__PURE__ */ jsx("div", { className: "propeller-login-form__register text-xs text-muted-foreground", children: (() => {
+            const tpl = getLabel(props.labels, "noAccount", "Don't have an account? {link}");
+            const [before, after = ""] = tpl.split("{link}");
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              before,
+              /* @__PURE__ */ jsx(LoginFormRegisterLink, {}),
+              after
+            ] });
+          })() })
         ] }) : null
       ]
     }
@@ -5430,7 +5435,8 @@ function AddressCard(rawProps) {
   ] });
 }
 function AddressCardTypeBadge(props) {
-  const { derived } = useAddressCardContext();
+  const { derived, resolved } = useAddressCardContext();
+  if (resolved.showTypeBadge === false) return null;
   if (!derived.addressType) return null;
   return /* @__PURE__ */ jsx(
     "span",
@@ -6910,6 +6916,7 @@ function CartIconAndSidebar(rawProps) {
                 language: props.language,
                 configuration: props.configuration,
                 companyId: props.companyId,
+                labels: props.cartItemLabels,
                 cardFrame: false,
                 showDelete: false,
                 readOnlyQuantity: true,
@@ -7015,11 +7022,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();
@@ -7128,18 +7135,23 @@ function CartOverview(props) {
             onChange: (event) => setTermsAccepted(event.target.checked)
           }
         ),
-        /* @__PURE__ */ jsxs("label", { htmlFor: "cart-overview-terms", className: "text-sm leading-none", children: [
-          getLabel(props.labels, "termsPrefix", "I agree to the"),
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: "#",
-              className: "text-primary hover:underline font-medium",
-              onClick: handleTermsLinkClick,
-              children: getLabel(props.labels, "termsLink", "Terms and Conditions")
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx("label", { htmlFor: "cart-overview-terms", className: "text-sm leading-none", children: (() => {
+          const tpl = getLabel(props.labels, "termsConsent", "I agree to the {link}");
+          const [before, after = ""] = tpl.split("{link}");
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            before,
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "#",
+                className: "text-primary hover:underline font-medium",
+                onClick: handleTermsLinkClick,
+                children: getLabel(props.labels, "termsLink", "Terms and Conditions")
+              }
+            ),
+            after
+          ] });
+        })() })
       ] }) : null,
       showPurchaseButton ? /* @__PURE__ */ jsxs(
         "button",
@@ -7182,6 +7194,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);
@@ -7212,10 +7228,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
@@ -9672,10 +9688,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;
@@ -9899,7 +9916,7 @@ function FavoriteLists(rawProps) {
                     ),
                     getTotalCount(list),
                     "\xA0",
-                    getLabel(props.labels, "items", "items")
+                    getTotalCount(list) === 1 ? getLabel(props.labels, "itemSingular", "item") : getLabel(props.labels, "itemPlural", "items")
                   ] }) : null
                 ] })
               ] }) : null
@@ -10083,15 +10100,15 @@ function FavoriteLists(rawProps) {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("p", { className: "propeller-favorite-lists__delete-prompt", children: [
-          getLabel(props.labels, "deleteConfirm", "Are you sure you want to delete"),
-          /* @__PURE__ */ jsxs("strong", { children: [
-            '"',
-            listToDelete?.name,
-            '"'
-          ] }),
-          "?"
-        ] }),
+        /* @__PURE__ */ jsx("p", { className: "propeller-favorite-lists__delete-prompt", children: (() => {
+          const tpl = getLabel(props.labels, "deleteConfirm", 'Are you sure you want to delete "{name}"?');
+          const [before, after = ""] = tpl.split("{name}");
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            before,
+            /* @__PURE__ */ jsx("strong", { children: listToDelete?.name }),
+            after
+          ] });
+        })() }),
         /* @__PURE__ */ jsx("p", { className: "propeller-favorite-lists__delete-warning text-sm text-destructive", children: getLabel(props.labels, "deleteWarning", "This action cannot be undone.") })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 pt-6", children: [
@@ -10675,6 +10692,8 @@ var DEFAULT_LABELS2 = {
   [SortOrder.DESC]: "High to Low",
   clearAll: "Clear All",
   products: " Products",
+  productSingular: "Product",
+  productPlural: "Products",
   from: "from",
   results: "results",
   perPage: " per page",
@@ -10768,7 +10787,8 @@ function GridToolbar(rawProps) {
         /* @__PURE__ */ jsxs("div", { className: "propeller-grid-toolbar__bar flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4", children: [
           /* @__PURE__ */ jsx("div", { className: "propeller-grid-toolbar__count text-sm text-muted-foreground font-medium", children: props.itemsFound > 0 ? /* @__PURE__ */ jsxs("span", { children: [
             props.itemsFound,
-            getLabel53("products")
+            "\xA0",
+            props.itemsFound === 1 ? getLabel53("productSingular") : getLabel53("productPlural")
           ] }) : null }),
           /* @__PURE__ */ jsxs("div", { className: "propeller-grid-toolbar__controls flex flex-wrap items-center gap-3", children: [
             /* @__PURE__ */ jsx(
@@ -11820,7 +11840,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);
@@ -11840,6 +11864,9 @@ function OrderList(rawProps) {
         return "bg-warning/10 text-warning";
     }
   }
+  function statusLabel(status) {
+    return props.statusLabels?.[status] || status;
+  }
   function getColumnLabel(col) {
     if (props.columnConfig && props.columnConfig[col]) {
       return props.columnConfig[col];
@@ -12160,7 +12187,7 @@ function OrderList(rawProps) {
                     {
                       className: `propeller-order-list__status px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(order.status)}`,
                       "data-status": order.status,
-                      children: order.status
+                      children: statusLabel(order.status)
                     }
                   ) : null,
                   col === "total" ? /* @__PURE__ */ jsx(Fragment, { children: formatPrice17(order.total?.net) }) : null,
@@ -12257,7 +12284,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;
@@ -12459,11 +12489,13 @@ function OrderSummary(props) {
   const showRemarks = props.showRemarks !== void 0 ? props.showRemarks : true;
   const orderNumber = order?.id || "";
   const orderDate = order?.createdAt || "";
-  const orderStatus = order?.status || "";
+  const rawStatus = order?.status || "";
+  const orderStatus = rawStatus ? props.statusLabels?.[rawStatus] || rawStatus : "";
   const orderTotal = Number(order?.total?.net || 0);
   const orderReference = order?.reference || "";
   const orderRemarks = order?.remarks || "";
-  const paymentMethod = order?.paymentData?.method || "";
+  const rawPaymentMethod = order?.paymentData?.method || "";
+  const paymentMethod = rawPaymentMethod ? props.paymethodLabels?.[rawPaymentMethod.toLowerCase()] || rawPaymentMethod : "";
   const carrierName = order?.postageData?.carrier || "";
   const addresses = order?.addresses || [];
   const invoiceAddress = addresses.find((a) => a.type === "invoice") || null;
@@ -12474,15 +12506,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 = "";
@@ -12490,11 +12525,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);
@@ -15915,7 +15946,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);
@@ -16149,18 +16183,23 @@ function QuoteActions(rawProps) {
           onChange: (event) => handleTermsChange(event.target.checked)
         }
       ),
-      /* @__PURE__ */ jsxs("label", { htmlFor: "quote-actions-terms", className: "text-sm leading-none", children: [
-        getLabel(props.labels, "termsPrefix", "I agree to the"),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: "#",
-            className: "text-primary hover:underline font-medium",
-            onClick: (event) => handleTermsLinkClick(event),
-            children: getLabel(props.labels, "termsLink", "Terms and Conditions")
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx("label", { htmlFor: "quote-actions-terms", className: "text-sm leading-none", children: (() => {
+        const tpl = getLabel(props.labels, "termsConsent", "I agree to the {link}");
+        const [before, after = ""] = tpl.split("{link}");
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          before,
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "#",
+              className: "text-primary hover:underline font-medium",
+              onClick: (event) => handleTermsLinkClick(event),
+              children: getLabel(props.labels, "termsLink", "Terms and Conditions")
+            }
+          ),
+          after
+        ] });
+      })() })
     ] }) : null,
     /* @__PURE__ */ jsxs(
       "button",