@propeller-commerce/propeller-v2-react-ui 0.15.10 → 0.15.11

package/dist/index.js

@@ -6407,6 +6407,12 @@ function CartBonusItems(rawProps) {
   ] });
 }
 var CartBonusItems_default = CartBonusItems;
+
+// src/composables/shared/utils/preselect.ts
+function pickPreselected(items, stored, keyOf) {
+  const list = items || [];
+  return (stored ? list.find((item) => keyOf(item) === stored) : void 0) || list[0];
+}
 function CartCarriers(props) {
   const [selectedName, setSelectedName] = useState("");
   const containerClass = props.carriersContainerClass || "cart-carriers";
@@ -6420,16 +6426,16 @@ function CartCarriers(props) {
     setSelectedName(carrier.name);
     if (props.onCarrierSelect) props.onCarrierSelect(carrier);
   }
+  const preselected = pickPreselected(
+    carriers,
+    props.cart?.postageData?.carrier,
+    (c) => c.name
+  );
+  const activeName = selectedName || preselected?.name || "";
   useEffect(() => {
-    if (!selectedName && props.cart?.postageData?.carrier) {
-      const name = props.cart.postageData.carrier;
-      setSelectedName(name);
-      if (props.onCarrierSelect) {
-        const match = carriers.find((c) => c.name === name);
-        if (match) props.onCarrierSelect(match);
-      }
-    }
-  }, [props.cart, selectedName, props.onCarrierSelect, carriers, props]);
+    if (selectedName || !preselected) return;
+    if (props.onCarrierSelect) props.onCarrierSelect(preselected);
+  }, [preselected?.name]);
   return /* @__PURE__ */ jsxs("div", { className: `propeller-cart-carriers ${containerClass}`, children: [
     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 || "" : "";
@@ -6437,8 +6443,8 @@ function CartCarriers(props) {
         "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"}`,
+          "data-selected": activeName === 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 ${activeName === 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,
@@ -7742,16 +7748,16 @@ function CartPaymethods(rawProps) {
     setSelectedCode(method.code);
     if (props.onPaymethodSelect) props.onPaymethodSelect(method);
   }
+  const preselected = pickPreselected(
+    payMethods,
+    props.cart?.paymentData?.method,
+    (m) => m.code
+  );
+  const activeCode = selectedCode || preselected?.code || "";
   useEffect(() => {
-    if (!selectedCode && props.cart?.paymentData?.method) {
-      const code = props.cart.paymentData.method;
-      setSelectedCode(code);
-      if (props.onPaymethodSelect) {
-        const match = payMethods.find((m) => m.code === code);
-        if (match) props.onPaymethodSelect(match);
-      }
-    }
-  }, [props.cart, selectedCode, props.onPaymethodSelect, payMethods, props]);
+    if (selectedCode || !preselected) return;
+    if (props.onPaymethodSelect) props.onPaymethodSelect(preselected);
+  }, [preselected?.code]);
   return /* @__PURE__ */ jsxs("div", { className: `propeller-cart-paymethods ${containerClass}`, children: [
     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) : "";
@@ -7759,8 +7765,8 @@ function CartPaymethods(rawProps) {
         "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"}`,
+          "data-selected": activeCode === 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 ${activeCode === 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(