@propeller-commerce/propeller-v2-react-ui 0.4.12 → 0.4.13

package/CHANGELOG.md

@@ -8,6 +8,26 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.4.13] - 2026-06-25
+
+### Added
+
+- **Payment-method logos in `CartPaymethods`.** The component now renders each
+  method's `logo` (SDK `CartPaymethod.logo`, available in
+  `@propeller-commerce/propeller-sdk-v2` `^0.11.3`) as a square tile — logo on
+  top, name below — matching the carrier tiles. Falls back to the method name
+  when a method has no logo. New `showPaymethodLogo?: boolean` prop (default
+  `true`) mirrors `CartCarriers`' `showCarrierLogo`.
+
+### Changed
+
+- **`CartPaymethods` and `CartCarriers` now lay out as a square logo grid**
+  (`grid-cols-2 sm:3 lg:4`, `aspect-square` tiles, centered logo + name, price
+  badge in the corner) instead of the previous single-column name rows. Same
+  selection behaviour, BEM classes, and `data-selected` hooks.
+- **Bumped `@propeller-commerce/propeller-sdk-v2` to `^0.11.3`** — adds the
+  `logo` field to `CartPaymethod`.
+
 ## [0.4.12] - 2026-06-24
 
 ### Changed

package/dist/index.cjs

@@ -5897,28 +5897,27 @@ function CartCarriers(props) {
     }
   }, [props.cart, selectedName, props.onCarrierSelect, carriers, props]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-cart-carriers ${containerClass}`, children: [
-    carriers.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cart-carriers__grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: carriers.map((carrier, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        onClick: () => handleSelect(carrier),
-        "data-selected": selectedName === carrier.name ? "true" : "false",
-        className: `propeller-cart-carriers__carrier cursor-pointer border border-border rounded-container p-4 flex flex-col gap-2 transition-all ${selectedName === carrier.name ? "border-secondary bg-secondary/5 shadow-sm" : "hover:border-secondary/30"}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cart-carriers__carrier-row flex justify-between items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              showLogo && (carrier.logo || "") ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "propeller-cart-carriers__carrier-logo h-6 w-auto", src: carrier.logo || "", alt: carrier.name }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-carriers__carrier-name font-medium", children: carrier.name })
-            ] }),
-            props.showPrice !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-carriers__carrier-price text-xs bg-surface-hover text-muted-foreground px-2 py-1 rounded-full", children: formatCarrierPrice(carrier.price) }) : null
-          ] }),
-          carrier.deliveryDeadline ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "propeller-cart-carriers__carrier-deadline text-xs text-muted-foreground", children: [
-            propellerV2CoreUi.getLabel(props.labels, "deliveryDeadline", "Delivery deadline:"),
-            carrier.deliveryDeadline
-          ] }) : null
-        ]
-      },
-      `${carrier.name}-${index}`
-    )) }) : null,
+    carriers.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cart-carriers__grid grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: carriers.map((carrier, index) => {
+      const logoUrl = showLogo ? carrier.logo || "" : "";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onClick: () => handleSelect(carrier),
+          "data-selected": selectedName === carrier.name ? "true" : "false",
+          className: `propeller-cart-carriers__carrier relative cursor-pointer border rounded-container p-3 flex flex-col items-center justify-center gap-2 text-center aspect-square transition-all ${selectedName === carrier.name ? "border-secondary bg-secondary/5 shadow-sm" : "border-border hover:border-secondary/30"}`,
+          children: [
+            props.showPrice !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-carriers__carrier-price absolute top-2 right-2 text-xs bg-surface-hover text-muted-foreground px-2 py-0.5 rounded-full", children: formatCarrierPrice(carrier.price) }) : null,
+            logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-carriers__carrier-logo-wrap flex items-center justify-center h-10 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: "propeller-cart-carriers__carrier-logo max-h-10 max-w-[80%] w-auto object-contain", src: logoUrl, alt: carrier.name }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-carriers__carrier-name font-medium text-sm", children: carrier.name }),
+            carrier.deliveryDeadline ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "propeller-cart-carriers__carrier-deadline text-xs text-muted-foreground", children: [
+              propellerV2CoreUi.getLabel(props.labels, "deliveryDeadline", "Delivery deadline:"),
+              carrier.deliveryDeadline
+            ] }) : null
+          ]
+        },
+        `${carrier.name}-${index}`
+      );
+    }) }) : null,
     carriers.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-cart-carriers__empty text-muted-foreground italic", children: propellerV2CoreUi.getLabel(props.labels, "noCarriers", "No carriers available.") }) : null
   ] });
 }
@@ -7167,11 +7166,15 @@ function isOnAccountMethod(method) {
   const code = (method.code || "").toLowerCase();
   return code === "on_account" || code === "onaccount" || code === "on-account";
 }
+function getLogoUrl(method) {
+  return method.logo || "";
+}
 function CartPaymethods(rawProps) {
   const props = useInfraProps(rawProps);
   const [selectedCode, setSelectedCode] = React6.useState("");
   const containerClass = props.paymentsContainerClass || "cart-paymethods";
   const showOnAccountForGuests = !!props.showOnAccountForGuests;
+  const showLogo = props.showPaymethodLogo !== false;
   const isGuest = !props.user;
   const payMethods = (props.cart?.payMethods || []).filter((m) => {
     if (!m?.code) return false;
@@ -7197,19 +7200,30 @@ function CartPaymethods(rawProps) {
     }
   }, [props.cart, selectedCode, props.onPaymethodSelect, payMethods, props]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-cart-paymethods ${containerClass}`, children: [
-    payMethods.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cart-paymethods__grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: payMethods.map((method, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        onClick: () => handleSelect(method),
-        "data-selected": selectedCode === method.code ? "true" : "false",
-        className: `propeller-cart-paymethods__method cursor-pointer border border-border rounded-container p-4 flex flex-col gap-2 transition-all ${selectedCode === method.code ? "border-secondary bg-secondary/5 shadow-sm" : "hover:border-secondary/30"}`,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cart-paymethods__method-row flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-paymethods__method-name font-medium", children: method.name || method.code }) }),
-          method.price > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-paymethods__method-price text-xs bg-surface-hover text-muted-foreground px-2 py-1 rounded-full", children: formatMethodPrice(method.price) }) : null
-        ] })
-      },
-      method.code
-    )) }) : null,
+    payMethods.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cart-paymethods__grid grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: payMethods.map((method, index) => {
+      const logoUrl = showLogo ? getLogoUrl(method) : "";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onClick: () => handleSelect(method),
+          "data-selected": selectedCode === method.code ? "true" : "false",
+          className: `propeller-cart-paymethods__method relative cursor-pointer border rounded-container p-3 flex flex-col items-center justify-center gap-2 text-center aspect-square transition-all ${selectedCode === method.code ? "border-secondary bg-secondary/5 shadow-sm" : "border-border hover:border-secondary/30"}`,
+          children: [
+            method.price > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-paymethods__method-price absolute top-2 right-2 text-xs bg-surface-hover text-muted-foreground px-2 py-0.5 rounded-full", children: formatMethodPrice(method.price) }) : null,
+            logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-paymethods__method-logo-wrap flex items-center justify-center h-10 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                className: "propeller-cart-paymethods__method-logo max-h-10 max-w-[80%] w-auto object-contain",
+                src: logoUrl,
+                alt: method.name || method.code
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-paymethods__method-name font-medium text-sm", children: method.name || method.code })
+          ]
+        },
+        method.code
+      );
+    }) }) : null,
     payMethods.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-cart-paymethods__empty text-muted-foreground italic", children: propellerV2CoreUi.getLabel(props.labels, "noMethods", "No payment methods available.") }) : null
   ] });
 }