@easypayment/medusa-paypal-ui 1.0.41 → 1.0.43

package/dist/index.cjs

@@ -184,6 +184,21 @@ var BUTTON_WIDTH_MAP = {
   large: "500px",
   responsive: "100%"
 };
+async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
+  try {
+    await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}
+      },
+      body: JSON.stringify({ cart_id: cartId }),
+      credentials: "include"
+    });
+  } catch (e) {
+    console.warn("[PayPal] paypal-complete call failed:", e);
+  }
+}
 function PayPalSmartButtons(props) {
   const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props;
   const api = react.useMemo(
@@ -194,149 +209,147 @@ function PayPalSmartButtons(props) {
   const [processing, setProcessing] = react.useState(false);
   if (!config.currency_supported) return null;
   const containerWidth = BUTTON_WIDTH_MAP[config.button_width ?? "responsive"] ?? "100%";
-  return (
-    // ── CHANGED: added position: relative so the overlay can sit on top ──────
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: containerWidth, position: "relative" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: SPIN_STYLE }),
-      processing && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: 0,
-            zIndex: 10,
-            background: "rgba(255,255,255,0.90)",
-            borderRadius: 8,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 10,
-            minHeight: 60
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  width: 28,
-                  height: 28,
-                  borderRadius: "50%",
-                  border: "2.5px solid #e5e7eb",
-                  borderTopColor: "#0070ba",
-                  animation: "_pp_spin .7s linear infinite"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, color: "#374151", fontWeight: 500 }, children: "Processing your payment\u2026" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
-            ] })
-          ]
-        }
-      ),
-      config.environment === "sandbox" && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "flex-start",
-            gap: 8,
-            padding: "10px 14px",
-            background: "#eff6ff",
-            border: "1px solid #bfdbfe",
-            borderRadius: 8,
-            fontSize: 13,
-            color: "#1e40af",
-            lineHeight: 1.5,
-            marginBottom: 10
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "#1e40af",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                style: { flexShrink: 0, marginTop: 1 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v4M12 16h.01" })
-                ]
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: containerWidth, position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: SPIN_STYLE }),
+    processing && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 10,
+          background: "rgba(255,255,255,0.90)",
+          borderRadius: 8,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 10,
+          minHeight: 60
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: 28,
+                height: 28,
+                borderRadius: "50%",
+                border: "2.5px solid #e5e7eb",
+                borderTopColor: "#0070ba",
+                animation: "_pp_spin .7s linear infinite"
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sandbox mode \u2014 you will not be charged. Use your PayPal sandbox account to complete the payment." })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactPaypalJs.PayPalButtons,
-        {
-          style: {
-            layout: "vertical",
-            color: config.button_color,
-            shape: config.button_shape,
-            label: config.button_label,
-            height: config.button_height
-          },
-          createOrder: async () => {
-            setError(null);
-            const r = await api.createOrder(cartId);
-            return r.id;
-          },
-          onApprove: async (data) => {
-            try {
-              setProcessing(true);
-              setError(null);
-              const orderId = String(data?.orderID || "");
-              const result = await api.captureOrder(cartId, orderId);
-              onPaid?.(result);
-            } catch (e) {
-              const msg = e instanceof Error ? e.message : "Payment capture failed";
-              setError(msg);
-              onError?.(msg);
-              setProcessing(false);
             }
-          },
-          onCancel: () => {
-            setProcessing(false);
-          },
-          onError: (err) => {
-            setProcessing(false);
-            const msg = err instanceof Error ? err.message : err?.message || "PayPal error";
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, color: "#374151", fontWeight: 500 }, children: "Processing your payment\u2026" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
+          ] })
+        ]
+      }
+    ),
+    config.environment === "sandbox" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 8,
+          padding: "10px 14px",
+          background: "#eff6ff",
+          border: "1px solid #bfdbfe",
+          borderRadius: 8,
+          fontSize: 13,
+          color: "#1e40af",
+          lineHeight: 1.5,
+          marginBottom: 10
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "#1e40af",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              style: { flexShrink: 0, marginTop: 1 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v4M12 16h.01" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sandbox mode \u2014 you will not be charged. Use your PayPal sandbox account to complete the payment." })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactPaypalJs.PayPalButtons,
+      {
+        style: {
+          layout: "vertical",
+          color: config.button_color,
+          shape: config.button_shape,
+          label: config.button_label,
+          height: config.button_height
+        },
+        createOrder: async () => {
+          setError(null);
+          const r = await api.createOrder(cartId);
+          return r.id;
+        },
+        onApprove: async (data) => {
+          try {
+            setProcessing(true);
+            setError(null);
+            const orderId = String(data?.orderID || "");
+            const result = await api.captureOrder(cartId, orderId);
+            await markPaymentComplete(baseUrl, cartId, publishableApiKey);
+            onPaid?.(result);
+          } catch (e) {
+            const msg = e instanceof Error ? e.message : "Payment capture failed";
             setError(msg);
             onError?.(msg);
+            setProcessing(false);
           }
+        },
+        onCancel: () => {
+          setProcessing(false);
+        },
+        onError: (err) => {
+          setProcessing(false);
+          const msg = err instanceof Error ? err.message : err?.message || "PayPal error";
+          setError(msg);
+          onError?.(msg);
         }
-      ),
-      error ? /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            marginTop: 10,
-            display: "flex",
-            alignItems: "flex-start",
-            gap: 8,
-            padding: "10px 14px",
-            background: "#fef2f2",
-            border: "1px solid #fecaca",
-            borderRadius: 8,
-            fontSize: 13,
-            color: "#b91c1c",
-            lineHeight: 1.5
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
-          ]
-        }
-      ) : null
-    ] })
-  );
+      }
+    ),
+    error ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 10,
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 8,
+          padding: "10px 14px",
+          background: "#fef2f2",
+          border: "1px solid #fecaca",
+          borderRadius: 8,
+          fontSize: 13,
+          color: "#b91c1c",
+          lineHeight: 1.5
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
+        ]
+      }
+    ) : null
+  ] });
 }
 var SPIN_STYLE2 = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
 var cardStyle = {
@@ -381,6 +394,21 @@ var labelStyle = {
   marginBottom: 6,
   letterSpacing: "0.01em"
 };
+async function markPaymentComplete2(baseUrl, cartId, publishableApiKey) {
+  try {
+    await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}
+      },
+      body: JSON.stringify({ cart_id: cartId }),
+      credentials: "include"
+    });
+  } catch (e) {
+    console.warn("[PayPal Card] paypal-complete call failed:", e);
+  }
+}
 function SubmitButton({
   disabled,
   label,
@@ -508,6 +536,7 @@ function PayPalAdvancedCard(props) {
             setError(null);
             const orderId = String(data?.orderID || "");
             const result = await api.captureOrder(cartId, orderId);
+            await markPaymentComplete2(baseUrl, cartId, publishableApiKey);
             onPaid?.(result);
           } catch (e) {
             const msg = e instanceof Error ? e.message : "Card payment failed";