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

package/CHANGELOG.md

@@ -8,6 +8,27 @@ 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.15.11] - 2026-08-11
+
+### Fixed
+
+- **Checkout step 3 opened with nothing selected on a fresh cart (PWP-934).**
+  `CartPaymethods` and `CartCarriers` only ever adopted a value the cart already
+  stored, so a cart that had never reached step 3 — every first order, and every
+  order after the cart is recreated — rendered both grids blank and refused to
+  continue until the user clicked. They now preselect the cart's stored option
+  when there is one and otherwise the first option offered, so Continue works
+  straight away. A stored value the backend no longer offers also falls back
+  instead of leaving an invisible selection.
+
+### Changed
+
+- The active option is now derived from the cart rather than mirrored into state
+  by an effect, so it is present in the first render (including SSR) instead of
+  appearing after hydration. `onPaymethodSelect` / `onCarrierSelect` still fire
+  once for the preselection, so hosts that persist the choice — and price the
+  transaction costs off it — keep working unchanged.
+
 ## [0.15.10] - 2026-08-11
 
 ### Fixed

package/dist/index.cjs

@@ -6427,6 +6427,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] = React6.useState("");
   const containerClass = props.carriersContainerClass || "cart-carriers";
@@ -6440,16 +6446,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 || "";
   React6.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__ */ jsxRuntime.jsxs("div", { className: `propeller-cart-carriers ${containerClass}`, children: [
     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 || "" : "";
@@ -6457,8 +6463,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__ */ 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,
@@ -7762,16 +7768,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 || "";
   React6.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__ */ jsxRuntime.jsxs("div", { className: `propeller-cart-paymethods ${containerClass}`, children: [
     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) : "";
@@ -7779,8 +7785,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__ */ 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(