npm - @superlogic/spree-pay - Versions diffs - 0.4.8 → 0.4.11 - Mend

@superlogic/spree-pay 0.4.8 → 0.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/build/{CryptoComTab-3SEGMLPB.js → CryptoComTab-OCWI7MFM.js} +4 -3
package/build/{CryptoTab-DQCQF6BG.js → CryptoTab-4WXYLS43.js} +79 -81
package/build/{chunk-SKM7ZAUY.js → chunk-NAY4SEME.js} +20 -13
package/build/{chunk-EXKCBGNL.js → chunk-VDX65MBD.js} +4 -2
package/build/{chunk-W43VOUYP.js → chunk-WHTBHEIN.js} +1 -1
package/build/index.cjs +114 -105
package/build/index.css +1 -1
package/build/index.js +35 -34
package/package.json +10 -10

package/build/{CryptoComTab-3SEGMLPB.js → CryptoComTab-OCWI7MFM.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-EXKCBGNL.js";
+} from "./chunk-VDX65MBD.js";
 import {
   InfoBanner,
   Legal,
@@ -12,7 +12,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-SKM7ZAUY.js";
+} from "./chunk-NAY4SEME.js";
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";
@@ -78,11 +78,12 @@ var useCryptoComPayment = () => {
 import { jsx, jsxs } from "react/jsx-runtime";
 var Checkout = () => {
   const { appProps } = useStaticConfig();
+  const { isInternalProcessing } = useSpreePaymentMethod();
   return /* @__PURE__ */ jsx(
     "button",
     {
       onClick: appProps.onProcess,
-      disabled: appProps.isProcessing,
+      disabled: !!appProps.isProcessing || isInternalProcessing,
       className: "flex flex-col items-center rounded-md bg-(--crypto-pay-bg) p-2 text-(--brand-primary) hover:bg-(--crypto-pay-bg-hover) disabled:cursor-not-allowed disabled:bg-(--crypto-pay-bg-hover) disabled:text-(--disabled)",
       children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-7 w-[76px]", fill: "none", viewBox: "0 0 76 28", children: [
         /* @__PURE__ */ jsx(

package/build/{CryptoTab-DQCQF6BG.js → CryptoTab-4WXYLS43.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-W43VOUYP.js";
+} from "./chunk-WHTBHEIN.js";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-SKM7ZAUY.js";
+} from "./chunk-NAY4SEME.js";
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";
@@ -409,7 +409,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn2(
-        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input px-universal-2xs py-universal-6xs rounded-radius-universal-xs text-body-m file:text-label-s file:font-label-primary flex h-9 w-full min-w-0 border bg-transparent text-(--color-text-icons-primary-default) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent placeholder:text-(--color-text-icons-tertiary-default) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input px-universal-2xs py-universal-6xs rounded-radius-universal-xs text-body-m file:text-label-s file:font-label-primary flex h-9 w-full min-w-0 border bg-transparent text-(--color-text-icons-primary-default) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent placeholder:text-(--color-text-icons-tertiary-default) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 max-md:text-[16px]",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
@@ -619,95 +619,93 @@ var CryptoSelectModal = NiceModal.create(() => {
     setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
   };
   const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
-  return /* @__PURE__ */ jsxs4(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
-    /* @__PURE__ */ jsx8(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-    /* @__PURE__ */ jsxs4(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsx8("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-6", viewBox: "0 0 24 25", children: /* @__PURE__ */ jsx8("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
-          /* @__PURE__ */ jsx8(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
-          /* @__PURE__ */ jsx8("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 17", children: /* @__PURE__ */ jsx8(
-            "path",
-            {
-              fill: "currentColor",
-              d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
-            }
-          ) }) })
-        ] }),
-        /* @__PURE__ */ jsx8(Input, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+  return /* @__PURE__ */ jsx8(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: /* @__PURE__ */ jsxs4(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
+    /* @__PURE__ */ jsx8(DialogDescription, { className: "sr-only", children: "Crypto Select Modal" }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsx8("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-6", viewBox: "0 0 24 25", children: /* @__PURE__ */ jsx8("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
+        /* @__PURE__ */ jsx8(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
+        /* @__PURE__ */ jsx8("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 17", children: /* @__PURE__ */ jsx8(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
+          }
+        ) }) })
       ] }),
-      /* @__PURE__ */ jsx8(Separator2, { className: "hidden md:block" }),
-      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
-        (error || nativeError) && /* @__PURE__ */ jsx8("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
-        /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-1", children: [
-          isLoadingNative && /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-          nativeBalance && /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsx8(Input, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+    ] }),
+    /* @__PURE__ */ jsx8(Separator2, { className: "hidden md:block" }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+      /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
+      (error || nativeError) && /* @__PURE__ */ jsx8("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-1", children: [
+        isLoadingNative && /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+        nativeBalance && /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
+            onClick: () => handleSelect(nativeBalance),
+            children: [
+              /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                nativeBalance.logoURI && /* @__PURE__ */ jsx8("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
+                /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+              ] }),
+              /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+            ]
+          },
+          nativeBalance.symbol
+        ),
+        isLoading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+          /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+          /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
+        ] }),
+        erc20Balances.map((coin) => {
+          const Icon = getSymbolLogo(coin.symbol);
+          return /* @__PURE__ */ jsxs4(
             "button",
             {
-              className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
-              onClick: () => handleSelect(nativeBalance),
+              className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
+              onClick: () => handleSelect(coin),
               children: [
                 /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ jsx8("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
-                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  Boolean(Icon) && Icon,
+                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: coin.symbol })
                 ] }),
-                /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: coin.formatted })
               ]
             },
-            nativeBalance.symbol
-          ),
-          isLoading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
-          ] }),
-          erc20Balances.map((coin) => {
-            const Icon = getSymbolLogo(coin.symbol);
-            return /* @__PURE__ */ jsxs4(
-              "button",
-              {
-                className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
-                onClick: () => handleSelect(coin),
-                children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-                    Boolean(Icon) && Icon,
-                    /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: coin.symbol })
-                  ] }),
-                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: coin.formatted })
-                ]
-              },
-              coin.symbol
-            );
-          })
+            coin.symbol
+          );
+        })
+      ] }),
+      /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
+        tokensIsLoading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+          /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+          /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
         ] }),
-        /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
-        /* @__PURE__ */ jsxs4("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
-          tokensIsLoading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
-          ] }),
-          filteredCoins.map((token) => {
-            const userCoin = userCoins.find((c) => c.symbol === token.symbol);
-            return /* @__PURE__ */ jsx8(
-              "button",
-              {
-                disabled: !userCoin,
-                onClick: () => userCoin && handleSelect(userCoin),
-                className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
-                children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-                  token.logoURI ? /* @__PURE__ */ jsx8("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx8("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
-                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: token.symbol })
-                ] })
-              },
-              token.symbol
-            );
-          })
-        ] })
+        filteredCoins.map((token) => {
+          const userCoin = userCoins.find((c) => c.symbol === token.symbol);
+          return /* @__PURE__ */ jsx8(
+            "button",
+            {
+              disabled: !userCoin,
+              onClick: () => userCoin && handleSelect(userCoin),
+              className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
+              children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                token.logoURI ? /* @__PURE__ */ jsx8("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx8("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
+                /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: token.symbol })
+              ] })
+            },
+            token.symbol
+          );
+        })
       ] })
     ] })
-  ] });
+  ] }) });
 });
 CryptoSelectModal.displayName = "CryptoSelectModal";

package/build/{chunk-SKM7ZAUY.js → chunk-NAY4SEME.js} RENAMED Viewed

@@ -10,7 +10,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 // package.json
-var version = "0.4.8";
+var version = "0.4.11";
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -147,6 +147,7 @@ var processLogger = logger.child("process");
 var SpreePayActionsContext = createContext(void 0);
 var SpreePayProvider = ({ children, env }) => {
   const processRef = useRef(null);
+  const inFlightRef = useRef(false);
   const [selectedPaymentMethod, setSelectedPaymentMethod] = useState({
     type: "CREDIT_CARD" /* CREDIT_CARD */,
     method: null
@@ -162,12 +163,20 @@ var SpreePayProvider = ({ children, env }) => {
         processLogger.error("Process function not registered", error);
         throw error;
       }
+      if (inFlightRef.current) {
+        processLogger.warn("Payment process already in flight, ignoring duplicate call", {
+          hash: data.hash,
+          paymentType: selectedPaymentMethod.type
+        });
+        throw new PaymentError("Payment already in progress", "FAILED" /* FAILED */);
+      }
       processLogger.info("Payment process started", {
         hash: data.hash,
         capture: data.capture,
         hasMetadata: Boolean(data.metadata),
         paymentType: selectedPaymentMethod.type
       });
+      inFlightRef.current = true;
       setInternalProcessing(true);
       try {
         const result = await processRef.current(data);
@@ -187,6 +196,7 @@ var SpreePayProvider = ({ children, env }) => {
         if (e instanceof Error) throw e;
         throw new PaymentError("Payment failed", "FAILED" /* FAILED */, e);
       } finally {
+        inFlightRef.current = false;
         setInternalProcessing(false);
       }
     },
@@ -235,7 +245,7 @@ var useSpreePayRegister = () => {
 };
 // src/context/StaticConfigContext.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect, useMemo, useState as useState2 } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
 // src/context/config.ts
 var config = {
@@ -253,8 +263,8 @@ var config = {
       keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org"
     },
     umhp: {
-      slapiUrl: "https://slapi.dev.umusicpassport.com",
-      keycloakUrl: "https://auth.dev.umusicpassport.com"
+      slapiUrl: "https://slapi.dev.umpulse.superlogic.com",
+      keycloakUrl: "https://auth.dev.umpulse.superlogic.com"
     },
     cdc: {
       slapiUrl: "https://slapi.dev.travel.crypto.superlogic.com",
@@ -279,8 +289,8 @@ var config = {
       keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org"
     },
     umhp: {
-      slapiUrl: "https://slapi.stg.umusicpassport.com",
-      keycloakUrl: "https://auth.stg.umusicpassport.com"
+      slapiUrl: "https://slapi.stg.umpulse.superlogic.com",
+      keycloakUrl: "https://auth.stg.umpulse.superlogic.com"
     },
     cdc: {
       slapiUrl: "https://slapi.stg.travel.crypto.superlogic.com",
@@ -305,8 +315,8 @@ var config = {
       keycloakUrl: "https://sso.tickets.qiibeefoundation.org"
     },
     umhp: {
-      slapiUrl: "https://slapi.umusicpassport.com",
-      keycloakUrl: "https://auth.umusicpassport.com"
+      slapiUrl: "https://slapi.umpulse.com",
+      keycloakUrl: "https://auth.umpulse.com"
     },
     cdc: {
       slapiUrl: "https://slapi.travel.crypto.com",
@@ -324,10 +334,6 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var StaticConfigContext = createContext2(null);
 var StaticConfigProvider = ({ children, props }) => {
   const { environment, tenantId } = useSpreePayEnv();
-  const [appProps, setAppProps] = useState2(props);
-  useEffect(() => {
-    setAppProps(props);
-  }, [props]);
   const staticConfig = useMemo(() => {
     const envConfig = config[environment];
     const isKnownTenant = tenantId in envConfig;
@@ -340,7 +346,8 @@ var StaticConfigProvider = ({ children, props }) => {
     const appKey = isKnownTenant ? tenantId : "moca";
     return envConfig[appKey];
   }, [environment, tenantId]);
-  return /* @__PURE__ */ jsx2(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
+  const value = useMemo(() => ({ staticConfig, appProps: props }), [staticConfig, props]);
+  return /* @__PURE__ */ jsx2(StaticConfigContext.Provider, { value, children });
 };
 var useStaticConfig = () => {
   const ctx = useContext2(StaticConfigContext);

package/build/{chunk-EXKCBGNL.js → chunk-VDX65MBD.js} RENAMED Viewed

@@ -1,8 +1,9 @@
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogTitle
-} from "./chunk-SKM7ZAUY.js";
+} from "./chunk-NAY4SEME.js";
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";
@@ -37,7 +38,8 @@ var Iframe3ds = NiceModal.create(({ url }) => {
     modal.remove();
   };
   return /* @__PURE__ */ jsx(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
-    /* @__PURE__ */ jsx(DialogTitle, { className: "hidden", children: "Payment Verification" }),
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Payment Verification" }),
+    /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: "Complete 3D Secure verification to finalize your payment" }),
     /* @__PURE__ */ jsx(
       "iframe",
       {

package/build/{chunk-W43VOUYP.js → chunk-WHTBHEIN.js} RENAMED Viewed

@@ -6,7 +6,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-SKM7ZAUY.js";
+} from "./chunk-NAY4SEME.js";
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";

package/build/index.cjs CHANGED Viewed

@@ -69,7 +69,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.4.8";
+    version = "0.4.11";
   }
 });
@@ -207,6 +207,7 @@ var init_SpreePayActionsContext = __esm({
     SpreePayActionsContext = (0, import_react.createContext)(void 0);
     SpreePayProvider = ({ children, env }) => {
       const processRef = (0, import_react.useRef)(null);
+      const inFlightRef = (0, import_react.useRef)(false);
       const [selectedPaymentMethod, setSelectedPaymentMethod] = (0, import_react.useState)({
         type: "CREDIT_CARD" /* CREDIT_CARD */,
         method: null
@@ -222,12 +223,20 @@ var init_SpreePayActionsContext = __esm({
             processLogger.error("Process function not registered", error);
             throw error;
           }
+          if (inFlightRef.current) {
+            processLogger.warn("Payment process already in flight, ignoring duplicate call", {
+              hash: data.hash,
+              paymentType: selectedPaymentMethod.type
+            });
+            throw new PaymentError("Payment already in progress", "FAILED" /* FAILED */);
+          }
           processLogger.info("Payment process started", {
             hash: data.hash,
             capture: data.capture,
             hasMetadata: Boolean(data.metadata),
             paymentType: selectedPaymentMethod.type
           });
+          inFlightRef.current = true;
           setInternalProcessing(true);
           try {
             const result = await processRef.current(data);
@@ -247,6 +256,7 @@ var init_SpreePayActionsContext = __esm({
             if (e instanceof Error) throw e;
             throw new PaymentError("Payment failed", "FAILED" /* FAILED */, e);
           } finally {
+            inFlightRef.current = false;
             setInternalProcessing(false);
           }
         },
@@ -316,8 +326,8 @@ var init_config = __esm({
           keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org"
         },
         umhp: {
-          slapiUrl: "https://slapi.dev.umusicpassport.com",
-          keycloakUrl: "https://auth.dev.umusicpassport.com"
+          slapiUrl: "https://slapi.dev.umpulse.superlogic.com",
+          keycloakUrl: "https://auth.dev.umpulse.superlogic.com"
         },
         cdc: {
           slapiUrl: "https://slapi.dev.travel.crypto.superlogic.com",
@@ -342,8 +352,8 @@ var init_config = __esm({
           keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org"
         },
         umhp: {
-          slapiUrl: "https://slapi.stg.umusicpassport.com",
-          keycloakUrl: "https://auth.stg.umusicpassport.com"
+          slapiUrl: "https://slapi.stg.umpulse.superlogic.com",
+          keycloakUrl: "https://auth.stg.umpulse.superlogic.com"
         },
         cdc: {
           slapiUrl: "https://slapi.stg.travel.crypto.superlogic.com",
@@ -368,8 +378,8 @@ var init_config = __esm({
           keycloakUrl: "https://sso.tickets.qiibeefoundation.org"
         },
         umhp: {
-          slapiUrl: "https://slapi.umusicpassport.com",
-          keycloakUrl: "https://auth.umusicpassport.com"
+          slapiUrl: "https://slapi.umpulse.com",
+          keycloakUrl: "https://auth.umpulse.com"
         },
         cdc: {
           slapiUrl: "https://slapi.travel.crypto.com",
@@ -398,10 +408,6 @@ var init_StaticConfigContext = __esm({
     StaticConfigContext = (0, import_react2.createContext)(null);
     StaticConfigProvider = ({ children, props }) => {
       const { environment, tenantId } = useSpreePayEnv();
-      const [appProps, setAppProps] = (0, import_react2.useState)(props);
-      (0, import_react2.useEffect)(() => {
-        setAppProps(props);
-      }, [props]);
       const staticConfig = (0, import_react2.useMemo)(() => {
         const envConfig = config[environment];
         const isKnownTenant = tenantId in envConfig;
@@ -414,7 +420,8 @@ var init_StaticConfigContext = __esm({
         const appKey = isKnownTenant ? tenantId : "moca";
         return envConfig[appKey];
       }, [environment, tenantId]);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
+      const value = (0, import_react2.useMemo)(() => ({ staticConfig, appProps: props }), [staticConfig, props]);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value, children });
     };
     useStaticConfig = () => {
       const ctx = (0, import_react2.useContext)(StaticConfigContext);
@@ -589,7 +596,8 @@ var init_Iframe3ds = __esm({
         modal.remove();
       };
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogTitle, { className: "hidden", children: "Payment Verification" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogTitle, { className: "sr-only", children: "Payment Verification" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogDescription, { className: "sr-only", children: "Complete 3D Secure verification to finalize your payment" }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "iframe",
           {
@@ -1814,7 +1822,7 @@ function Input2({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn2(
-        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input px-universal-2xs py-universal-6xs rounded-radius-universal-xs text-body-m file:text-label-s file:font-label-primary flex h-9 w-full min-w-0 border bg-transparent text-(--color-text-icons-primary-default) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent placeholder:text-(--color-text-icons-tertiary-default) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input px-universal-2xs py-universal-6xs rounded-radius-universal-xs text-body-m file:text-label-s file:font-label-primary flex h-9 w-full min-w-0 border bg-transparent text-(--color-text-icons-primary-default) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent placeholder:text-(--color-text-icons-tertiary-default) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 max-md:text-[16px]",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
@@ -2086,95 +2094,93 @@ var init_CryptoSelectModal = __esm({
         setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
       };
       const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-6", viewBox: "0 0 24 25", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 17", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                "path",
-                {
-                  fill: "currentColor",
-                  d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
-                }
-              ) }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogDescription, { className: "sr-only", children: "Crypto Select Modal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-6", viewBox: "0 0 24 25", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 17", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "path",
+              {
+                fill: "currentColor",
+                d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
+              }
+            ) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Separator2, { className: "hidden md:block" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
-            (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-              isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-              nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Separator2, { className: "hidden md:block" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
+          (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+            isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              "button",
+              {
+                className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
+                onClick: () => handleSelect(nativeBalance),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                ]
+              },
+              nativeBalance.symbol
+            ),
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
+            ] }),
+            erc20Balances.map((coin) => {
+              const Icon = getSymbolLogo(coin.symbol);
+              return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
                 "button",
                 {
-                  className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
-                  onClick: () => handleSelect(nativeBalance),
+                  className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
+                  onClick: () => handleSelect(coin),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                      Boolean(Icon) && Icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
                   ]
                 },
-                nativeBalance.symbol
-              ),
-              isLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
-              ] }),
-              erc20Balances.map((coin) => {
-                const Icon = getSymbolLogo(coin.symbol);
-                return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                  "button",
-                  {
-                    className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
-                    onClick: () => handleSelect(coin),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
-                        Boolean(Icon) && Icon,
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
-                    ]
-                  },
-                  coin.symbol
-                );
-              })
+                coin.symbol
+              );
+            })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
+            tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
-              tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
-              ] }),
-              filteredCoins.map((token) => {
-                const userCoin = userCoins.find((c) => c.symbol === token.symbol);
-                return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  "button",
-                  {
-                    disabled: !userCoin,
-                    onClick: () => userCoin && handleSelect(userCoin),
-                    className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
-                    ] })
-                  },
-                  token.symbol
-                );
-              })
-            ] })
+            filteredCoins.map((token) => {
+              const userCoin = userCoins.find((c) => c.symbol === token.symbol);
+              return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                "button",
+                {
+                  disabled: !userCoin,
+                  onClick: () => userCoin && handleSelect(userCoin),
+                  className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
+                  ] })
+                },
+                token.symbol
+              );
+            })
           ] })
         ] })
-      ] });
+      ] }) });
     });
     CryptoSelectModal.displayName = "CryptoSelectModal";
   }
@@ -2452,15 +2458,17 @@ var import_jsx_runtime43, Checkout;
 var init_Checkout = __esm({
   "src/components/CryptoComTab/Checkout.tsx"() {
     "use strict";
+    init_SpreePayActionsContext();
     init_StaticConfigContext();
     import_jsx_runtime43 = require("react/jsx-runtime");
     Checkout = () => {
       const { appProps } = useStaticConfig();
+      const { isInternalProcessing } = useSpreePaymentMethod();
       return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "button",
         {
           onClick: appProps.onProcess,
-          disabled: appProps.isProcessing,
+          disabled: !!appProps.isProcessing || isInternalProcessing,
           className: "flex flex-col items-center rounded-md bg-(--crypto-pay-bg) p-2 text-(--brand-primary) hover:bg-(--crypto-pay-bg-hover) disabled:cursor-not-allowed disabled:bg-(--crypto-pay-bg-hover) disabled:text-(--disabled)",
           children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-7 w-[76px]", fill: "none", viewBox: "0 0 76 28", children: [
             /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -3333,18 +3341,17 @@ var CreditCardForm = ({ cancel, saveCard }) => {
   const [cardError, setCardError] = (0, import_react8.useState)(void 0);
   const [stripeStyles, setStripeStyles] = (0, import_react8.useState)({});
   const [shouldSaveCard, setShouldSaveCard] = (0, import_react8.useState)(true);
-  const formRef = (0, import_react8.useRef)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react8.useState)(false);
   const elements = (0, import_react_stripe_js.useElements)();
   const stripe = (0, import_react_stripe_js.useStripe)();
   const [id] = (0, import_react8.useState)(() => crypto.randomUUID());
-  const computeStripeStyles = (0, import_react8.useCallback)(() => {
-    const formRefCurrent = formRef.current;
-    if (typeof window === "undefined" || !formRefCurrent) return {};
-    const container = formRefCurrent.closest(".sl-spreepay");
-    if (!container) return {};
+  const formRef = (0, import_react8.useCallback)((node) => {
+    if (!node) return;
+    const container = node.closest(".sl-spreepay");
+    if (!container) return;
     const primary = getComputedStyle(container).getPropertyValue("--primary").trim() || "rgba(255, 255, 255, 0.70)";
     const secondary = getComputedStyle(container).getPropertyValue("--secondary").trim() || "rgba(255, 255, 255, 0.5)";
-    return {
+    setStripeStyles({
       base: {
         fontSize: "16px",
         fontWeight: "500",
@@ -3356,14 +3363,12 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       invalid: {
         color: primary
       }
-    };
+    });
   }, []);
-  (0, import_react8.useEffect)(() => {
-    setStripeStyles(computeStripeStyles());
-  }, [computeStripeStyles]);
   const handleSaveCard = async () => {
-    if (!elements || !stripe) return;
+    if (!elements || !stripe || isSubmitting) return;
     setCardError(void 0);
+    setIsSubmitting(true);
     try {
       const { error: submitError } = await elements.submit();
       if (submitError) {
@@ -3394,6 +3399,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
     } catch (error) {
       cardFormLogger.error("Failed to create Stripe card token", error);
       setCardError("An error occurred while processing your card. Please try again.");
+    } finally {
+      setIsSubmitting(false);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
@@ -3443,6 +3450,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           variant: "outline",
           className: "border-(--b-brand) bg-transparent font-medium text-(--brand-primary) hover:bg-(--s-primary-hover) hover:text-(--brand-primary)",
           onClick: cancel,
+          disabled: isSubmitting,
           children: "Cancel"
         }
       ),
@@ -3451,6 +3459,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
         {
           className: "bg-(--s-brand) font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
           onClick: handleSaveCard,
+          disabled: isSubmitting,
           children: "Add Card"
         }
       )

package/build/index.css CHANGED Viewed

@@ -1784,4 +1784,4 @@
     }
   }
 }
-/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */

package/build/index.js CHANGED Viewed

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-W43VOUYP.js";
+} from "./chunk-WHTBHEIN.js";
 import {
   Iframe3ds
-} from "./chunk-EXKCBGNL.js";
+} from "./chunk-VDX65MBD.js";
 import {
   InfoBanner,
   LogLevel,
@@ -32,10 +32,10 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-SKM7ZAUY.js";
+} from "./chunk-NAY4SEME.js";
 // src/SpreePay.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState12 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo9, useState as useState12 } from "react";
 import NiceModal4 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
@@ -43,7 +43,7 @@ import { SWRConfig } from "swr";
 import { Suspense, lazy } from "react";
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback6, useEffect as useEffect6, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5, useState as useState10 } from "react";
 // src/hooks/payments/useCardPayment.ts
 import NiceModal from "@ebay/nice-modal-react";
@@ -655,7 +655,7 @@ var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
 };
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { useCallback, useEffect, useRef, useState as useState2 } from "react";
+import { useCallback, useState as useState2 } from "react";
 import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
 // src/ui/button.tsx
@@ -737,18 +737,17 @@ var CreditCardForm = ({ cancel, saveCard }) => {
   const [cardError, setCardError] = useState2(void 0);
   const [stripeStyles, setStripeStyles] = useState2({});
   const [shouldSaveCard, setShouldSaveCard] = useState2(true);
-  const formRef = useRef(null);
+  const [isSubmitting, setIsSubmitting] = useState2(false);
   const elements = useElements();
   const stripe = useStripe();
   const [id] = useState2(() => crypto.randomUUID());
-  const computeStripeStyles = useCallback(() => {
-    const formRefCurrent = formRef.current;
-    if (typeof window === "undefined" || !formRefCurrent) return {};
-    const container = formRefCurrent.closest(".sl-spreepay");
-    if (!container) return {};
+  const formRef = useCallback((node) => {
+    if (!node) return;
+    const container = node.closest(".sl-spreepay");
+    if (!container) return;
     const primary = getComputedStyle(container).getPropertyValue("--primary").trim() || "rgba(255, 255, 255, 0.70)";
     const secondary = getComputedStyle(container).getPropertyValue("--secondary").trim() || "rgba(255, 255, 255, 0.5)";
-    return {
+    setStripeStyles({
       base: {
         fontSize: "16px",
         fontWeight: "500",
@@ -760,14 +759,12 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       invalid: {
         color: primary
       }
-    };
+    });
   }, []);
-  useEffect(() => {
-    setStripeStyles(computeStripeStyles());
-  }, [computeStripeStyles]);
   const handleSaveCard = async () => {
-    if (!elements || !stripe) return;
+    if (!elements || !stripe || isSubmitting) return;
     setCardError(void 0);
+    setIsSubmitting(true);
     try {
       const { error: submitError } = await elements.submit();
       if (submitError) {
@@ -798,6 +795,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
     } catch (error) {
       cardFormLogger.error("Failed to create Stripe card token", error);
       setCardError("An error occurred while processing your card. Please try again.");
+    } finally {
+      setIsSubmitting(false);
     }
   };
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -847,6 +846,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           variant: "outline",
           className: "border-(--b-brand) bg-transparent font-medium text-(--brand-primary) hover:bg-(--s-primary-hover) hover:text-(--brand-primary)",
           onClick: cancel,
+          disabled: isSubmitting,
           children: "Cancel"
         }
       ),
@@ -855,6 +855,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
         {
           className: "bg-(--s-brand) font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
           onClick: handleSaveCard,
+          disabled: isSubmitting,
           children: "Add Card"
         }
       )
@@ -925,7 +926,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
 import { useState as useState9 } from "react";
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5, useState as useState8 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -2026,7 +2027,7 @@ var SplitBlock = (props) => {
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-  const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
+  const prevPointsChainRef = useRef5(spreePayConfig?.pointsChain);
   const initWallet = useCallback5(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2050,7 +2051,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -2177,7 +2178,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
       mutateBalance
     ]
   );
-  useEffect6(() => {
+  useEffect5(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs9("div", { children: [
@@ -2259,9 +2260,9 @@ var TabButtons = (props) => {
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-DQCQF6BG.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-4WXYLS43.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-3SEGMLPB.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-OCWI7MFM.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
@@ -2331,16 +2332,16 @@ var ErrorBoundary = class extends Component {
 };
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef6, useState as useState11 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config) {
   const { url, realm, clientId, ssoPageURI, enabled } = config;
-  const initRef = useRef7(false);
-  const kcRef = useRef7(null);
-  const refreshTimerRef = useRef7(null);
-  const scheduleRefreshRef = useRef7(() => {
+  const initRef = useRef6(false);
+  const kcRef = useRef6(null);
+  const refreshTimerRef = useRef6(null);
+  const scheduleRefreshRef = useRef6(() => {
   });
   const [error, setError] = useState11(null);
   const [isChecking, setIsChecking] = useState11(enabled);
@@ -2369,10 +2370,10 @@ function useKeycloakSSO(config) {
       });
     }, delayMs);
   }, []);
-  useEffect7(() => {
+  useEffect6(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new Keycloak({ url, realm, clientId });
@@ -2426,7 +2427,7 @@ var SpreePayInner = () => {
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  useEffect8(() => {
+  useEffect7(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -2481,9 +2482,9 @@ var SpreePay = (props) => {
 };
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect9(() => {
+  useEffect8(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.4.8",
+  "version": "0.4.11",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -47,31 +47,31 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.1.2",
-    "@rainbow-me/rainbowkit": "^2.2.9",
+    "@rainbow-me/rainbowkit": "^2.2.11",
     "@stripe/react-stripe-js": "^3.10.0",
     "@stripe/stripe-js": "^7.9.0",
-    "@tanstack/react-query": "^5.97.0",
+    "@tanstack/react-query": "^5.100.10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "jwt-decode": "^4.0.0",
-    "keycloak-js": "^26.2.3",
-    "lucide-react": "^1.8.0",
+    "keycloak-js": "^26.2.4",
+    "lucide-react": "^1.16.0",
     "swr": "^2.4.1",
-    "tailwind-merge": "^3.5.0",
-    "viem": "^2.47.11",
+    "tailwind-merge": "^3.6.0",
+    "viem": "^2.49.3",
     "wagmi": "^2.19.5",
     "xss": "^1.0.15"
   },
   "devDependencies": {
     "@repo/eslint-config": "^1.0.0",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.3.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss-prefix-selector": "^2.1.1",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.3.0",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   },
   "tsup": {
     "entry": [