@easypayment/medusa-paypal-ui 1.0.38 → 1.0.40

package/dist/index.cjs

@@ -235,6 +235,44 @@ function PayPalSmartButtons(props) {
           ]
         }
       ),
+      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,
         {
@@ -275,19 +313,26 @@ function PayPalSmartButtons(props) {
           }
         }
       ),
-      error ? /* @__PURE__ */ jsxRuntime.jsx(
+      error ? /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           style: {
             marginTop: 10,
-            padding: "8px 12px",
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 8,
+            padding: "10px 14px",
             background: "#fef2f2",
             border: "1px solid #fecaca",
-            borderRadius: 6,
+            borderRadius: 8,
             fontSize: 13,
-            color: "#b91c1c"
+            color: "#b91c1c",
+            lineHeight: 1.5
           },
-          children: error
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
+          ]
         }
       ) : null
     ] })
@@ -732,12 +777,262 @@ function MedusaNextPayPalAdapter(props) {
     )
   ] }, selectedProviderId);
 }
+var PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal";
+var PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
+var PAYPAL_PROVIDER_IDS = [
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID
+];
+function isPayPalProviderId(id) {
+  if (!id) return false;
+  return PAYPAL_PROVIDER_IDS.includes(id);
+}
+var SPIN_STYLE4 = `@keyframes _pp_section_spin { to { transform: rotate(360deg) } }`;
+function SessionInitCard() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "14px 16px",
+        marginTop: 8,
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 10
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: SPIN_STYLE4 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: "50%",
+              border: "2.5px solid #e5e7eb",
+              borderTopColor: "#0070ba",
+              animation: "_pp_section_spin .7s linear infinite",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Setting up payment\u2026" })
+      ]
+    }
+  );
+}
+function ConfigLoadingCard() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "14px 16px",
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 10
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: SPIN_STYLE4 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: 22,
+              height: 22,
+              borderRadius: "50%",
+              border: "2.5px solid #e5e7eb",
+              borderTopColor: "#0070ba",
+              animation: "_pp_section_spin .7s linear infinite",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Connecting to PayPal\u2026" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: "Setting up secure payment" })
+        ] })
+      ]
+    }
+  );
+}
+function ErrorCard({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        padding: "12px 16px",
+        background: "#fef2f2",
+        border: "1px solid #fecaca",
+        borderRadius: 10,
+        fontSize: 13,
+        color: "#b91c1c"
+      },
+      children: message
+    }
+  );
+}
+function PayPalPaymentSection({
+  cartId,
+  selectedProviderId,
+  baseUrl,
+  publishableApiKey,
+  sessionLoading = false,
+  onSuccess,
+  onError,
+  onPaid
+}) {
+  const shouldRender = isPayPalProviderId(selectedProviderId);
+  const { config, loading, error } = usePayPalConfig({
+    baseUrl,
+    publishableApiKey,
+    cartId,
+    enabled: shouldRender
+  });
+  const handlePaid = react.useCallback(
+    (captureResult) => {
+      onPaid?.(captureResult);
+      onSuccess?.(cartId);
+    },
+    [cartId, onPaid, onSuccess]
+  );
+  if (!shouldRender) return null;
+  if (sessionLoading) return /* @__PURE__ */ jsxRuntime.jsx(SessionInitCard, {});
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(ConfigLoadingCard, {});
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx(ErrorCard, { message: error });
+  if (!config) return null;
+  if (config.paypal_enabled === false && selectedProviderId === PAYPAL_WALLET_PROVIDER_ID) {
+    return null;
+  }
+  const isCardProvider = selectedProviderId === PAYPAL_CARD_PROVIDER_ID;
+  if (isCardProvider && config.card_enabled === false) return null;
+  const disableFunding = Array.isArray(config.disable_buttons) ? config.disable_buttons.join(",") : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PayPalCurrencyNotice, { config }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PayPalProvider,
+      {
+        config,
+        intent: config.intent === "authorize" ? "authorize" : "capture",
+        disableFunding,
+        children: isCardProvider ? /* @__PURE__ */ jsxRuntime.jsx(
+          PayPalAdvancedCard,
+          {
+            baseUrl,
+            publishableApiKey,
+            cartId,
+            config,
+            onPaid: handlePaid,
+            onError
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          PayPalSmartButtons,
+          {
+            baseUrl,
+            publishableApiKey,
+            cartId,
+            config,
+            onPaid: handlePaid,
+            onError
+          }
+        )
+      }
+    )
+  ] }, selectedProviderId);
+}
+var _cache2 = /* @__PURE__ */ new Map();
+var CACHE_TTL2 = 5 * 60 * 1e3;
+function cacheKey2(baseUrl, cartId) {
+  return `ppm::${baseUrl}::${cartId ?? ""}`;
+}
+var DEFAULT_RESULT = {
+  paypalEnabled: true,
+  paypalTitle: "PayPal",
+  cardEnabled: true,
+  cardTitle: "Credit or Debit Card",
+  loading: false
+};
+function usePayPalPaymentMethods({
+  baseUrl,
+  publishableApiKey,
+  cartId,
+  enabled = true
+}) {
+  const api = react.useMemo(
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
+    [baseUrl, publishableApiKey]
+  );
+  const key = cacheKey2(baseUrl, cartId);
+  const hit = _cache2.get(key);
+  const seed = hit && Date.now() - hit.at < CACHE_TTL2 ? hit.result : null;
+  const [result, setResult] = react.useState(seed ?? { ...DEFAULT_RESULT, loading: enabled });
+  const fetchIdRef = react.useRef(0);
+  react.useEffect(() => {
+    if (!enabled) {
+      setResult((prev) => ({ ...prev, loading: false }));
+      return;
+    }
+    const k = cacheKey2(baseUrl, cartId);
+    const cached = _cache2.get(k);
+    if (cached && Date.now() - cached.at < CACHE_TTL2) {
+      setResult(cached.result);
+      return;
+    }
+    const id = ++fetchIdRef.current;
+    let mounted = true;
+    const controller = new AbortController();
+    setResult((prev) => ({ ...prev, loading: true }));
+    (async () => {
+      try {
+        const cfg = await api.getConfig(cartId, controller.signal);
+        if (!mounted || id !== fetchIdRef.current) return;
+        const next = {
+          paypalEnabled: cfg.paypal_enabled !== false,
+          paypalTitle: typeof cfg.paypal_title === "string" && cfg.paypal_title ? cfg.paypal_title : "PayPal",
+          cardEnabled: cfg.card_enabled !== false,
+          cardTitle: typeof cfg.card_title === "string" && cfg.card_title ? cfg.card_title : "Credit or Debit Card",
+          loading: false
+        };
+        _cache2.set(k, { result: next, at: Date.now() });
+        setResult(next);
+      } catch (e) {
+        if (e?.name === "AbortError") return;
+        if (!mounted || id !== fetchIdRef.current) return;
+        if (e?.message?.includes("403") || e?.message?.includes("Forbidden")) {
+          const disabled = {
+            ...DEFAULT_RESULT,
+            paypalEnabled: false,
+            cardEnabled: false,
+            loading: false
+          };
+          setResult(disabled);
+          return;
+        }
+        setResult({ ...DEFAULT_RESULT, loading: false });
+      }
+    })();
+    return () => {
+      mounted = false;
+      controller.abort();
+    };
+  }, [api, baseUrl, cartId, enabled]);
+  return result;
+}
 
 exports.MedusaNextPayPalAdapter = MedusaNextPayPalAdapter;
+exports.PAYPAL_CARD_PROVIDER_ID = PAYPAL_CARD_PROVIDER_ID;
+exports.PAYPAL_WALLET_PROVIDER_ID = PAYPAL_WALLET_PROVIDER_ID;
 exports.PayPalAdvancedCard = PayPalAdvancedCard;
 exports.PayPalCurrencyNotice = PayPalCurrencyNotice;
+exports.PayPalPaymentSection = PayPalPaymentSection;
 exports.PayPalProvider = PayPalProvider;
 exports.PayPalSmartButtons = PayPalSmartButtons;
 exports.createPayPalStoreApi = createPayPalStoreApi;
+exports.isPayPalProviderId = isPayPalProviderId;
 exports.usePayPalConfig = usePayPalConfig;
+exports.usePayPalPaymentMethods = usePayPalPaymentMethods;
 //# sourceMappingURL=index.cjs.map