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

package/dist/index.d.cts

@@ -673,14 +673,32 @@ interface UseCheckoutOptions {
 interface PlaceOrderOptions {
     /** Id of the cart to convert. */
     cartId: string;
-    /** Order status to set — `'NEW'` for an order, `'REQUEST'` for a quote request. */
-    orderStatus: 'NEW' | 'REQUEST';
+    /**
+     * Order status to set. `'NEW'` for a completed order, `'REQUEST'` for a quote
+     * request, `'UNFINISHED'` for an order awaiting an external payment (PSP) — the
+     * payment webhook promotes it to its final status later. Any other backend
+     * status string is also accepted.
+     */
+    orderStatus: 'NEW' | 'REQUEST' | 'UNFINISHED' | (string & {});
     /** Customer reference printed on the order. */
     reference?: string;
     /** Free-text order notes. */
     notes?: string;
     /** When `true`, treats this as a quote: suppresses confirmation email/PDF and triggers a quote-send request. */
     isQuoteMode?: boolean;
+    /**
+     * Whether this placement *finalizes* the order — i.e. sends the order
+     * confirmation email, fires the confirm event, attaches the order PDF, and
+     * clears the cart. Defaults to `true` for a normal order and `false` for a
+     * quote.
+     *
+     * Set this to `false` for an order that still awaits an external payment
+     * (e.g. `'UNFINISHED'` orders handed off to a PSP). The confirmation/cart
+     * deletion should then happen when the payment is confirmed (the PSP webhook),
+     * not at placement — otherwise the shopper is emailed and the cart cleared
+     * before they've paid.
+     */
+    finalizeOrder?: boolean;
 }
 /** State and checkout actions returned by {@link useCheckout}. */
 interface UseCheckoutReturn {
@@ -3110,6 +3128,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

@@ -673,14 +673,32 @@ interface UseCheckoutOptions {
 interface PlaceOrderOptions {
     /** Id of the cart to convert. */
     cartId: string;
-    /** Order status to set — `'NEW'` for an order, `'REQUEST'` for a quote request. */
-    orderStatus: 'NEW' | 'REQUEST';
+    /**
+     * Order status to set. `'NEW'` for a completed order, `'REQUEST'` for a quote
+     * request, `'UNFINISHED'` for an order awaiting an external payment (PSP) — the
+     * payment webhook promotes it to its final status later. Any other backend
+     * status string is also accepted.
+     */
+    orderStatus: 'NEW' | 'REQUEST' | 'UNFINISHED' | (string & {});
     /** Customer reference printed on the order. */
     reference?: string;
     /** Free-text order notes. */
     notes?: string;
     /** When `true`, treats this as a quote: suppresses confirmation email/PDF and triggers a quote-send request. */
     isQuoteMode?: boolean;
+    /**
+     * Whether this placement *finalizes* the order — i.e. sends the order
+     * confirmation email, fires the confirm event, attaches the order PDF, and
+     * clears the cart. Defaults to `true` for a normal order and `false` for a
+     * quote.
+     *
+     * Set this to `false` for an order that still awaits an external payment
+     * (e.g. `'UNFINISHED'` orders handed off to a PSP). The confirmation/cart
+     * deletion should then happen when the payment is confirmed (the PSP webhook),
+     * not at placement — otherwise the shopper is emailed and the cart cleared
+     * before they've paid.
+     */
+    finalizeOrder?: boolean;
 }
 /** State and checkout actions returned by {@link useCheckout}. */
 interface UseCheckoutReturn {
@@ -3110,6 +3128,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

@@ -995,6 +995,8 @@ function useCheckout(options) {
         const cartService = createServices(graphqlClient).cart;
         const orderService = createServices(graphqlClient).order;
         const { cartId, orderStatus, reference, notes, isQuoteMode } = opts;
+        const finalizeOrder = opts.finalizeOrder ?? true;
+        const sendConfirmation = finalizeOrder && !isQuoteMode;
         if (reference || notes) {
           await cartService.updateCart({
             id: cartId,
@@ -1016,10 +1018,13 @@ function useCheckout(options) {
           orderId,
           status: orderStatus,
           payStatus: PaymentStatuses.OPEN,
-          sendOrderConfirmationEmail: !isQuoteMode,
-          addPDFAttachment: !isQuoteMode,
-          triggerOrderSendConfirmEvent: !isQuoteMode,
-          deleteCart: true
+          sendOrderConfirmationEmail: sendConfirmation,
+          addPDFAttachment: sendConfirmation,
+          triggerOrderSendConfirmEvent: sendConfirmation,
+          // Keep the cart only for an unfinalized (PSP-pending) order so the
+          // shopper can retry payment; clear it once the order is finalized
+          // (a normal order or a quote).
+          deleteCart: finalizeOrder
         });
         if (isQuoteMode) {
           await orderService.triggerQuoteSendRequest({ orderId, language });
@@ -5877,28 +5882,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 +7151,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 +7185,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
   ] });
 }