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

package/dist/index.d.cts

@@ -3110,6 +3110,8 @@ interface CartPaymethodsProps {
     paymentsContainerClass?: string;
     /** Display the on account payment method for anonymous users */
     showOnAccountForGuests?: boolean;
+    /** Display the payment method logo (default: true). Falls back to the name when no logo is set. */
+    showPaymethodLogo?: boolean;
     /** Action when a payment method is selected */
     onPaymethodSelect?: (paymethod: CartPaymethod) => void;
     /** Custom price formatting function */

package/dist/index.d.ts

@@ -3110,6 +3110,8 @@ interface CartPaymethodsProps {
     paymentsContainerClass?: string;
     /** Display the on account payment method for anonymous users */
     showOnAccountForGuests?: boolean;
+    /** Display the payment method logo (default: true). Falls back to the name when no logo is set. */
+    showPaymethodLogo?: boolean;
     /** Action when a payment method is selected */
     onPaymethodSelect?: (paymethod: CartPaymethod) => void;
     /** Custom price formatting function */

package/dist/index.js

@@ -5877,28 +5877,27 @@ function CartCarriers(props) {
     }
   }, [props.cart, selectedName, props.onCarrierSelect, carriers, props]);
   return /* @__PURE__ */ jsxs("div", { className: `propeller-cart-carriers ${containerClass}`, children: [
-    carriers.length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "propeller-cart-carriers__carrier-row flex justify-between items-center", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              showLogo && (carrier.logo || "") ? /* @__PURE__ */ jsx("img", { className: "propeller-cart-carriers__carrier-logo h-6 w-auto", src: carrier.logo || "", alt: carrier.name }) : null,
-              /* @__PURE__ */ jsx("span", { className: "propeller-cart-carriers__carrier-name font-medium", children: carrier.name })
-            ] }),
-            props.showPrice !== false ? /* @__PURE__ */ 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__ */ jsxs("p", { className: "propeller-cart-carriers__carrier-deadline text-xs text-muted-foreground", children: [
-            getLabel(props.labels, "deliveryDeadline", "Delivery deadline:"),
-            carrier.deliveryDeadline
-          ] }) : null
-        ]
-      },
-      `${carrier.name}-${index}`
-    )) }) : null,
+    carriers.length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "propeller-cart-carriers__carrier-logo-wrap flex items-center justify-center h-10 w-full", children: /* @__PURE__ */ 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__ */ jsx("span", { className: "propeller-cart-carriers__carrier-name font-medium text-sm", children: carrier.name }),
+            carrier.deliveryDeadline ? /* @__PURE__ */ jsxs("p", { className: "propeller-cart-carriers__carrier-deadline text-xs text-muted-foreground", children: [
+              getLabel(props.labels, "deliveryDeadline", "Delivery deadline:"),
+              carrier.deliveryDeadline
+            ] }) : null
+          ]
+        },
+        `${carrier.name}-${index}`
+      );
+    }) }) : null,
     carriers.length === 0 ? /* @__PURE__ */ jsx("p", { className: "propeller-cart-carriers__empty text-muted-foreground italic", children: getLabel(props.labels, "noCarriers", "No carriers available.") }) : null
   ] });
 }
@@ -7147,11 +7146,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] = 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;
@@ -7177,19 +7180,30 @@ function CartPaymethods(rawProps) {
     }
   }, [props.cart, selectedCode, props.onPaymethodSelect, payMethods, props]);
   return /* @__PURE__ */ jsxs("div", { className: `propeller-cart-paymethods ${containerClass}`, children: [
-    payMethods.length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "propeller-cart-paymethods__method-row flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "propeller-cart-paymethods__method-name font-medium", children: method.name || method.code }) }),
-          method.price > 0 ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "propeller-cart-paymethods__method-logo-wrap flex items-center justify-center h-10 w-full", children: /* @__PURE__ */ 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__ */ jsx("span", { className: "propeller-cart-paymethods__method-name font-medium text-sm", children: method.name || method.code })
+          ]
+        },
+        method.code
+      );
+    }) }) : null,
     payMethods.length === 0 ? /* @__PURE__ */ jsx("p", { className: "propeller-cart-paymethods__empty text-muted-foreground italic", children: getLabel(props.labels, "noMethods", "No payment methods available.") }) : null
   ] });
 }