@superlogic/spree-pay 0.1.31 → 0.1.35

package/build/index.js

@@ -1,10 +1,10 @@
 // src/SpreePay.tsx
-import { useEffect as useEffect12, useLayoutEffect as useLayoutEffect3, useMemo as useMemo9, useRef as useRef7, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo10, useState as useState14 } from "react";
 import NiceModal7 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
 // package.json
-var version = "0.1.31";
+var version = "0.1.35";
 
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -56,7 +56,8 @@ var SpreePayProvider = ({ children, env }) => {
     }
   }, []);
   const value = {
-    env,
+    // Set default to true for web3 points to backward compatibility
+    env: { ...env, useWeb3Points: env.useWeb3Points ?? true },
     enabled: Boolean(selectedPaymentMethod.method),
     isInternalProcessing,
     process,
@@ -110,6 +111,16 @@ var CONFIG = {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
+    },
+    umhp: {
+      slapiUrl: "https://slapi.dev.umusicpassport.com",
+      keycloakUrl: "https://auth.dev.umusicpassport.com",
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
@@ -122,6 +133,16 @@ var CONFIG = {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.stg.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
+    },
+    umhp: {
+      slapiUrl: "https://slapi.stg.umusicpassport.com",
+      keycloakUrl: "https://auth.stg.umusicpassport.com",
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
@@ -134,6 +155,16 @@ var CONFIG = {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
+    },
+    umhp: {
+      slapiUrl: "https://slapi.umusicpassport.com",
+      keycloakUrl: "https://auth.umusicpassport.com",
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -787,7 +818,11 @@ async function longPollCardStatus(paymentId) {
     if (detail.status === "FAILED" /* FAILED */) {
       throw new Error(`Something went wrong with the ${detail.validationType} payment`);
     }
-    if (detail.validationType === "POINTS") {
+    if (
+      // Process to points payment
+      detail.validationType === "POINTS" || // early card payment completion
+      ["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)
+    ) {
       return detail.status;
     }
     if (!shown3ds && detail.card?.redirectUrl) {
@@ -804,7 +839,7 @@ async function longPollCardStatus(paymentId) {
 }
 
 // src/hooks/payments/usePointsPayment.ts
-var usePointsPayment = () => {
+var usePointsPayment = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const pointsPayment = async (params) => {
@@ -814,31 +849,42 @@ var usePointsPayment = () => {
     const { hash, capture, metadata } = params;
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
-      capture,
+      // capture should be always true for web2 points payments
+      capture: mode === "web2" ? true : capture,
       metadata,
       type: "POINTS" /* POINTS */
     });
-    const wallet = peekAirWallet();
-    if (!wallet || !spreePayConfig?.pointsChain) {
-      throw new Error("AirWallet not found");
-    }
-    const transaction = await handleSendErc20({
-      amount: params.points,
-      token: spreePayConfig.pointsChain.pointsCoin,
-      recipient: spreePayConfig.pointsChain.recipientAddress
-    });
-    if (!transaction) {
-      throw new Error("Points transaction failed");
+    if (mode === "web3") {
+      const wallet = peekAirWallet();
+      if (!wallet || !spreePayConfig?.pointsChain) {
+        throw new Error("AirWallet not found");
+      }
+      const transaction = await handleSendErc20({
+        amount: params.points,
+        token: spreePayConfig.pointsChain.pointsCoin,
+        recipient: spreePayConfig.pointsChain.recipientAddress
+      });
+      if (!transaction) {
+        throw new Error("Points transaction failed");
+      }
+      await SlapiPaymentService.validatePoints({
+        paymentId: paymentResData.id,
+        txHash: transaction.txHash
+      });
+      const pointsStatus2 = await longPollPoints(paymentResData.id);
+      return {
+        status: pointsStatus2,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash,
+        paymentId: paymentResData.id,
+        paymentType: "POINTS" /* POINTS */
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
     const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       status: pointsStatus,
       txId: paymentResData.txId,
-      txHash: transaction.txHash,
+      txHash: null,
       paymentId: paymentResData.id,
       paymentType: "POINTS" /* POINTS */
     };
@@ -847,7 +893,7 @@ var usePointsPayment = () => {
 };
 
 // src/hooks/payments/useSplitCardPayments.ts
-var useSplitCardPayments = () => {
+var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
@@ -881,30 +927,39 @@ var useSplitCardPayments = () => {
         amount: points
       }
     });
-    await longPollCardStatus(paymentResData.id);
-    const wallet = peekAirWallet();
-    if (!wallet || !spreePayConfig?.pointsChain) {
-      throw new Error("AirWallet not found");
-    }
-    const transaction = await handleSendErc20({
-      amount: params.points,
-      token: spreePayConfig.pointsChain.pointsCoin,
-      recipient: spreePayConfig.pointsChain.recipientAddress
-    });
-    if (!transaction) {
-      throw new Error("Points transaction failed");
+    const cardStatus = await longPollCardStatus(paymentResData.id);
+    if (mode === "web3") {
+      const wallet = peekAirWallet();
+      if (!wallet || !spreePayConfig?.pointsChain) {
+        throw new Error("AirWallet not found");
+      }
+      const transaction = await handleSendErc20({
+        amount: params.points,
+        token: spreePayConfig.pointsChain.pointsCoin,
+        recipient: spreePayConfig.pointsChain.recipientAddress
+      });
+      if (!transaction) {
+        throw new Error("Points transaction failed");
+      }
+      await SlapiPaymentService.validatePoints({
+        paymentId: paymentResData.id,
+        txHash: transaction.txHash
+      });
+      const pointsStatus = await longPollPoints(paymentResData.id);
+      return {
+        paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
+        status: pointsStatus,
+        paymentId: paymentResData.id,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
-    const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
-      status: pointsStatus,
+      status: cardStatus,
       paymentId: paymentResData.id,
       txId: paymentResData.txId,
-      txHash: transaction.txHash
+      txHash: null
     };
   };
   return { splitPayment };
@@ -944,7 +999,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ jsxs6("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+  return /* @__PURE__ */ jsxs6("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
     /* @__PURE__ */ jsx8(
       "div",
       {
@@ -958,7 +1013,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
       "div",
       {
         className: cn(
-          "flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
+          "flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
           {
             "border-primary": isSelected
           }
@@ -1001,8 +1056,8 @@ var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
     return /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
-      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
+      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
+      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
     ] });
   }
   if (cards.length === 0) return null;
@@ -1326,7 +1381,7 @@ var PointsSwitch = (props) => {
 };
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -1362,7 +1417,7 @@ function clamp(value, [min, max]) {
   return Math.min(max, Math.max(min, value));
 }
 
-// ../../node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive/dist/index.mjs
+// ../../node_modules/@radix-ui/primitive/dist/index.mjs
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -1545,7 +1600,6 @@ function useUncontrolledState({
 function isFunction(value) {
   return typeof value === "function";
 }
-var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 
 // ../../node_modules/@radix-ui/react-direction/dist/index.mjs
 import * as React6 from "react";
@@ -1636,7 +1690,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
-      window[Symbol.for("radix-ui")] = true;
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
     return /* @__PURE__ */ jsx19(Comp, { ...primitiveProps, ref: forwardedRef });
   });
@@ -2265,14 +2319,8 @@ function cn2(...inputs) {
 
 // src/ui/slider.tsx
 import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
-function Slider2({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}) {
+function Slider2(props) {
+  const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
   const _values = React12.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
@@ -2289,20 +2337,20 @@ function Slider2({
         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
         className
       ),
-      ...props,
+      ...rest,
       children: [
         /* @__PURE__ */ jsx23(
           Track,
           {
             "data-slot": "slider-track",
             className: cn2(
-              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+              "relative grow overflow-hidden rounded-full bg-black/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
             children: /* @__PURE__ */ jsx23(
               Range,
               {
                 "data-slot": "slider-range",
-                className: cn2("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+                className: cn2("absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
               }
             )
           }
@@ -2311,7 +2359,7 @@ function Slider2({
           Thumb2,
           {
             "data-slot": "slider-thumb",
-            className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            className: "ring-ring/50 block size-5 shrink-0 rounded-full border-1 border-white bg-black shadow-sm shadow-[#00000033] transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           index
         ))
@@ -2345,7 +2393,7 @@ var PointsSelector = (props) => {
     {
       disabled: isDisabled,
       onClick: onSelect,
-      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
+      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border-1 border-transparent", {
         "border-primary": isSelected,
         "cursor-not-allowed opacity-50": isDisabled
       }),
@@ -2419,6 +2467,7 @@ var SplitBlock = (props) => {
   const [walletReady, setWalletReady] = useState9(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { env } = useSpreePayEnv();
+  const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
   const initWallet = useCallback4(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2440,11 +2489,20 @@ var SplitBlock = (props) => {
     [onToggle, env.environment]
   );
   useEffect6(() => {
-    setAddress(null);
-    setWalletReady(false);
-    initWallet(spreePayConfig?.pointsChain);
-  }, [spreePayConfig?.pointsChain, initWallet]);
-  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
+    if (!env.useWeb3Points) return;
+    const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
+    prevPointsChainRef.current = spreePayConfig?.pointsChain;
+    const doInit = async () => {
+      if (pointsChainChanged) {
+        setAddress(null);
+        setWalletReady(false);
+      }
+      await initWallet(spreePayConfig?.pointsChain);
+    };
+    doInit();
+  }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
+  const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
+  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
     /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
       /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2497,14 +2555,16 @@ var Points = () => {
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { mutateBalance } = useSlapiBalance();
+  const isWeb3Enabled = Boolean(env.useWeb3Points);
   const { cardPayment } = useCardPayment();
-  const { splitPayment } = useSplitCardPayments();
-  const { pointsPayment } = usePointsPayment();
+  const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
+  const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
   const handlePay = useCallback5(
     async (data) => {
       try {
@@ -2525,7 +2585,9 @@ var CreditCardTab = () => {
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       } finally {
-        setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        if ("token" in (selectedPaymentMethod.method || {})) {
+          setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        }
         mutateCards();
         mutateBalance();
       }
@@ -2546,13 +2608,13 @@ var CreditCardTab = () => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs15("div", { children: [
-    /* @__PURE__ */ jsx27("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx27(CreditCard, {}) }),
+    /* @__PURE__ */ jsx27("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx27(CreditCard, {}) }),
     /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-6 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ jsx27(Points, {}) })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import NiceModal6 from "@ebay/nice-modal-react";
 import { RainbowKitProvider, getDefaultConfig, lightTheme } from "@rainbow-me/rainbowkit";
@@ -2594,10 +2656,13 @@ async function waitForTransactionReceipt(config, parameters) {
   const receipt = await action({ ...rest, timeout });
   if (receipt.status === "reverted") {
     const action_getTransaction = getAction(client, getTransaction, "getTransaction");
-    const txn = await action_getTransaction({ hash: receipt.transactionHash });
+    const { from: account, ...txn } = await action_getTransaction({
+      hash: receipt.transactionHash
+    });
     const action_call = getAction(client, call, "call");
     const code = await action_call({
       ...txn,
+      account,
       data: txn.input,
       gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
       maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
@@ -2910,18 +2975,58 @@ function Input2({ className, type, ...props }) {
 }
 
 // ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+import * as React14 from "react";
+
+// ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
 import * as React13 from "react";
+import * as ReactDOM2 from "react-dom";
+import { createSlot as createSlot3 } from "@radix-ui/react-slot";
 import { jsx as jsx32 } from "react/jsx-runtime";
+var NODES2 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive2 = NODES2.reduce((primitive, node) => {
+  const Slot2 = createSlot3(`Primitive.${node}`);
+  const Node2 = React13.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx32(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+
+// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+import { jsx as jsx33 } from "react/jsx-runtime";
 var NAME = "Separator";
 var DEFAULT_ORIENTATION = "horizontal";
 var ORIENTATIONS = ["horizontal", "vertical"];
-var Separator = React13.forwardRef((props, forwardedRef) => {
+var Separator = React14.forwardRef((props, forwardedRef) => {
   const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
   const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
   const ariaOrientation = orientation === "vertical" ? orientation : void 0;
   const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
-  return /* @__PURE__ */ jsx32(
-    Primitive.div,
+  return /* @__PURE__ */ jsx33(
+    Primitive2.div,
     {
       "data-orientation": orientation,
       ...semanticProps,
@@ -2937,14 +3042,14 @@ function isValidOrientation(orientation) {
 var Root6 = Separator;
 
 // ../ui/src/components/separator.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Root6,
     {
       "data-slot": "separator",
@@ -2960,17 +3065,17 @@ function Separator2({
 }
 
 // src/hooks/useBaseERC20Token.ts
-import * as React14 from "react";
+import * as React15 from "react";
 import { erc20Abi as erc20Abi3, formatUnits, getAddress } from "viem";
 import { useAccount, usePublicClient } from "wagmi";
 function useBaseERC20Token() {
   const { address } = useAccount();
   const baseClient = usePublicClient({ chainId: BASE_CHAIN_ID });
   const defaultClient = usePublicClient();
-  const [rows, setRows] = React14.useState([]);
-  const [isLoading, setLoading] = React14.useState(false);
-  const [error, setError] = React14.useState(null);
-  React14.useEffect(() => {
+  const [rows, setRows] = React15.useState([]);
+  const [isLoading, setLoading] = React15.useState(false);
+  const [error, setError] = React15.useState(null);
+  React15.useEffect(() => {
     let cancelled = false;
     async function run() {
       const client = baseClient ?? defaultClient;
@@ -3051,7 +3156,7 @@ var useBaseTokens = () => {
 };
 
 // src/modals/CryptoSelectModal.tsx
-import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var CryptoSelectModal = NiceModal4.create(() => {
   const modal = useModal2();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
@@ -3071,13 +3176,13 @@ var CryptoSelectModal = NiceModal4.create(() => {
   const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
   const userCoinSymbols = userCoins.map((c) => c.symbol);
   return /* @__PURE__ */ jsxs19(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
-    /* @__PURE__ */ jsx34(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
+    /* @__PURE__ */ jsx35(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
     /* @__PURE__ */ jsxs19(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
       /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
         /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsx34("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx34("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
-          /* @__PURE__ */ jsx34(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
-          /* @__PURE__ */ jsx34("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx35("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
+          /* @__PURE__ */ jsx35(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
+          /* @__PURE__ */ jsx35("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx35(
             "path",
             {
               fill: "#000",
@@ -3085,14 +3190,14 @@ var CryptoSelectModal = NiceModal4.create(() => {
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsx34(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+        /* @__PURE__ */ jsx35(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
       ] }),
-      /* @__PURE__ */ jsx34(Separator2, { className: "hidden md:block" }),
+      /* @__PURE__ */ jsx35(Separator2, { className: "hidden md:block" }),
       /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
-        (error || nativeError) && /* @__PURE__ */ jsx34("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
+        /* @__PURE__ */ jsx35("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
+        (error || nativeError) && /* @__PURE__ */ jsx35("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
         /* @__PURE__ */ jsxs19("div", { className: "flex w-full flex-col gap-1", children: [
-          isLoadingNative && /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+          isLoadingNative && /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
           nativeBalance && /* @__PURE__ */ jsxs19(
             "button",
             {
@@ -3100,7 +3205,7 @@ var CryptoSelectModal = NiceModal4.create(() => {
               onClick: () => handleSelect(nativeBalance),
               children: [
                 /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ jsx34(
+                  nativeBalance.logoURI && /* @__PURE__ */ jsx35(
                     "img",
                     {
                       className: "h-8 w-8 shrink-0",
@@ -3108,17 +3213,17 @@ var CryptoSelectModal = NiceModal4.create(() => {
                       alt: `${nativeBalance.symbol} logo`
                     }
                   ),
-                  /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                 ] }),
-                /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
               ]
             },
             nativeBalance.symbol
           ),
           isLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
-            /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+            /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
           erc20Balances.map((coin) => {
             const Icon = getSymbolLogo(coin.symbol);
@@ -3130,31 +3235,31 @@ var CryptoSelectModal = NiceModal4.create(() => {
                 children: [
                   /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
                     Boolean(Icon) && Icon,
-                    /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.symbol })
+                    /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: coin.symbol })
                   ] }),
-                  /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.formatted })
+                  /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: coin.formatted })
                 ]
               },
               coin.symbol
             );
           })
         ] }),
-        /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
+        /* @__PURE__ */ jsx35("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
         /* @__PURE__ */ jsxs19("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
           tokensIsLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
-            /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+            /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
-          filteredCoins.map((token) => /* @__PURE__ */ jsx34(
+          filteredCoins.map((token) => /* @__PURE__ */ jsx35(
             "button",
             {
               disabled: !userCoinSymbols.includes(token.symbol),
               onClick: () => handleSelect(userCoins.find((c) => c.symbol === token.symbol)),
               className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
               children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                token.logoURI ? /* @__PURE__ */ jsx34("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx34("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
-                /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: token.symbol })
+                token.logoURI ? /* @__PURE__ */ jsx35("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx35("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
+                /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: token.symbol })
               ] })
             },
             token.symbol
@@ -3167,44 +3272,44 @@ var CryptoSelectModal = NiceModal4.create(() => {
 CryptoSelectModal.displayName = "CryptoSelectModal";
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var SelectCoinButton = () => {
   const openModal = () => {
     NiceModal5.show(CryptoSelectModal);
   };
   return /* @__PURE__ */ jsxs20("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ jsx35("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx35("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
+    /* @__PURE__ */ jsx36("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
     /* @__PURE__ */ jsxs20("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
-      /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx35("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
-      /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx35("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
+      /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx36("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
+      /* @__PURE__ */ jsx36("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx36("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 var SelectedCoin = (props) => {
   const { coin, balance, logoURI } = props;
   const Icon = getSymbolLogo(coin);
   return /* @__PURE__ */ jsxs21("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ jsx36("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx36("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
+    /* @__PURE__ */ jsx37("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx37("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx37("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
     /* @__PURE__ */ jsxs21("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
       /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
         Icon,
-        !Icon && logoURI && /* @__PURE__ */ jsx36("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-        /* @__PURE__ */ jsx36("p", { className: "font-semibold text-black", children: coin }),
-        /* @__PURE__ */ jsx36("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx36("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
+        !Icon && logoURI && /* @__PURE__ */ jsx37("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        /* @__PURE__ */ jsx37("p", { className: "font-semibold text-black", children: coin }),
+        /* @__PURE__ */ jsx37("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx37("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
       ] }),
       /* @__PURE__ */ jsxs21("p", { className: "text-xs font-medium text-black/50", children: [
         "Wallet balance ",
-        /* @__PURE__ */ jsx36("span", { className: "text-black", children: balance })
+        /* @__PURE__ */ jsx37("span", { className: "text-black", children: balance })
       ] })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var Crypto = () => {
   const { address } = useAccount3();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -3230,12 +3335,12 @@ var Crypto = () => {
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-baseline gap-4", children: [
     /* @__PURE__ */ jsxs22("div", { className: "flex w-full items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx37("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
-      /* @__PURE__ */ jsx37(ConnectButton, {})
+      /* @__PURE__ */ jsx38("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
+      /* @__PURE__ */ jsx38(ConnectButton, {})
     ] }),
-    !isWalletConnected && /* @__PURE__ */ jsx37(Logos, {}),
+    !isWalletConnected && /* @__PURE__ */ jsx38(Logos, {}),
     isWalletConnected && /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-1", children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx37(
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx38(
         SelectedCoin,
         {
           coin: selectedPaymentMethod.method.symbol,
@@ -3243,13 +3348,13 @@ var Crypto = () => {
           logoURI: selectedPaymentMethod.method.logoURI
         }
       ),
-      /* @__PURE__ */ jsx37(SelectCoinButton, {})
+      /* @__PURE__ */ jsx38(SelectCoinButton, {})
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
 var CHAINS = [base];
 var wagmiConfigCache = /* @__PURE__ */ new Map();
@@ -3264,36 +3369,34 @@ function getCachedWagmiConfig(projectId, appName) {
 }
 var CryptoWrapper = () => {
   const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-  const [wagmiConfig, setWagmiConfig] = useState13(null);
-  useEffect10(() => {
-    if (!spreePayConfig) return;
-    const cfg2 = getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
-    setWagmiConfig((prev) => prev ? prev : cfg2);
+  const wagmiConfig = useMemo9(() => {
+    if (!spreePayConfig) return null;
+    return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
   }, [spreePayConfig]);
   if (configIsLoading || !wagmiConfig) return null;
-  return /* @__PURE__ */ jsx38(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx38(NiceModal6.Provider, { children: /* @__PURE__ */ jsx38(Crypto, {}) }) }) }) });
+  return /* @__PURE__ */ jsx39(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx39(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx39(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx39(NiceModal6.Provider, { children: /* @__PURE__ */ jsx39(Crypto, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var CryptoTab = () => {
   const { spreePayConfig } = useSpreePayConfig();
   return /* @__PURE__ */ jsxs23("div", { children: [
-    /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
-    /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
+    /* @__PURE__ */ jsx40("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx40(CryptoWrapper, {}) }),
+    /* @__PURE__ */ jsx40("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx40(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 
 // src/components/TabButtons.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
-var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
-  return /* @__PURE__ */ jsx40(
+import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
+  return /* @__PURE__ */ jsx41(
     "button",
     {
       disabled: isDisabled,
       onClick,
       className: cn(
-        "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black/50 px-2.5 py-1.5 text-sm text-black",
+        "flex w-[132px] flex-col items-baseline rounded-sm border border-black/50 px-2.5 py-1.5 text-sm text-black",
         { "opacity-50": !isActive || isDisabled },
         { "cursor-not-allowed": isDisabled },
         { "bg-primary/7 border-primary text-primary": isActive }
@@ -3304,98 +3407,88 @@ var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
-  const { spreePayConfig } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
   return /* @__PURE__ */ jsxs24("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsxs24(
-      TabButton,
-      {
-        isDisabled: !spreePayConfig?.creditCard.enabled,
-        onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
-        isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
-        children: [
-          /* @__PURE__ */ jsx40("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx40(
-            "path",
-            {
-              fill: "currentColor",
-              d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
-            }
-          ) }),
-          /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Card" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs24(
-      TabButton,
-      {
-        isDisabled: !spreePayConfig?.crypto.enabled,
-        onClick: handleChange("CRYPTO" /* CRYPTO */),
-        isActive: value === "CRYPTO" /* CRYPTO */,
-        children: [
-          /* @__PURE__ */ jsxs24("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
-            /* @__PURE__ */ jsx40(
-              "path",
-              {
-                fill: "currentColor",
-                d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
-              }
-            ),
-            /* @__PURE__ */ jsx40(
-              "path",
-              {
-                fill: "currentColor",
-                d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
-              }
-            ),
-            /* @__PURE__ */ jsx40("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
-          ] }),
-          /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Crypto" })
-        ]
-      }
-    )
+    configIsLoading && /* @__PURE__ */ jsxs24(Fragment7, { children: [
+      /* @__PURE__ */ jsx41("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
+      /* @__PURE__ */ jsx41("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
+    ] }),
+    spreePayConfig?.creditCard.enabled && /* @__PURE__ */ jsxs24(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
+      /* @__PURE__ */ jsx41("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx41(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
+        }
+      ) }),
+      /* @__PURE__ */ jsx41("p", { className: "text-sm font-medium", children: "Card" })
+    ] }),
+    spreePayConfig?.crypto.enabled && /* @__PURE__ */ jsxs24(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
+      /* @__PURE__ */ jsxs24("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
+        /* @__PURE__ */ jsx41(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
+          }
+        ),
+        /* @__PURE__ */ jsx41("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+      ] }),
+      /* @__PURE__ */ jsx41("p", { className: "text-sm font-medium", children: "Crypto" })
+    ] })
   ] });
 };
 
 // src/components/Tabs.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var Tabs = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   return /* @__PURE__ */ jsxs25("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
     /* @__PURE__ */ jsxs25("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
-      /* @__PURE__ */ jsx41("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
-      /* @__PURE__ */ jsx41(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+      /* @__PURE__ */ jsx42("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
+      /* @__PURE__ */ jsx42(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx41(CreditCardTab, {}),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx41(CryptoTab, {})
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx42(CreditCardTab, {}),
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx42(CryptoTab, {})
   ] });
 };
 
 // src/SpreePayContent.tsx
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var SpreePayContent = ({ isLoggedIn }) => {
   return /* @__PURE__ */ jsxs26("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx42(Tabs, {}),
-    /* @__PURE__ */ jsx42(CheckoutButton, { isLoggedIn }),
-    /* @__PURE__ */ jsx42(SpreeLegal, {})
+    /* @__PURE__ */ jsx43(Tabs, {}),
+    /* @__PURE__ */ jsx43(CheckoutButton, { isLoggedIn }),
+    /* @__PURE__ */ jsx43(SpreeLegal, {})
   ] });
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef6, useState as useState14 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef7, useState as useState13 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 function useKeycloakSSO(config) {
   const { url, realm, clientId, ssoPageURI, enabled } = config;
-  const initRef = useRef6(false);
-  const kcRef = useRef6(null);
-  const refreshTimerRef = useRef6(null);
-  const [error, setError] = useState14(null);
-  const [isChecking, setIsChecking] = useState14(enabled);
-  const [accessToken, setAccessToken] = useState14(null);
+  const initRef = useRef7(false);
+  const kcRef = useRef7(null);
+  const refreshTimerRef = useRef7(null);
+  const scheduleRefreshRef = useRef7(() => {
+  });
+  const [error, setError] = useState13(null);
+  const [isChecking, setIsChecking] = useState13(enabled);
+  const [accessToken, setAccessToken] = useState13(null);
   const scheduleRefresh = useCallback7(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
@@ -3410,17 +3503,19 @@ function useKeycloakSSO(config) {
       kc.updateToken(refreshAheadSeconds).then((refreshed) => {
         if (refreshed) {
           setAccessToken(kc.token ?? null);
-          scheduleRefresh();
+          scheduleRefreshRef.current();
         }
       }).catch((_) => {
         kc.login().catch(console.error);
       });
     }, delayMs);
   }, []);
-  useEffect11(() => {
+  useEffect10(() => {
+    scheduleRefreshRef.current = scheduleRefresh;
+  }, [scheduleRefresh]);
+  useEffect10(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
-    setIsChecking(true);
     const kc = new Keycloak({ url, realm, clientId });
     kcRef.current = kc;
     kc.onTokenExpired = () => {
@@ -3452,21 +3547,20 @@ function useKeycloakSSO(config) {
 }
 
 // src/SpreePay.tsx
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var SpreePayInner = () => {
-  const rootRef = useRef7(null);
-  const [portalEl, setPortalEl] = useState15(null);
-  useLayoutEffect3(() => {
-    if (!rootRef.current) return;
-    const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
+  const [portalEl, setPortalEl] = useState14(null);
+  const rootRef = useCallback8((node) => {
+    if (!node) return;
+    const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
-  useEffect12(() => {
+  useEffect11(() => {
     console.log(`[spree-pay] v${version}`);
   }, []);
   const { env } = useSpreePayEnv();
   const { staticConfig, appProps } = useStaticConfig();
-  const tenantId = env?.tenantId || "bookit";
+  const tenantId = env?.tenantId;
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: staticConfig.keycloakUrl,
@@ -3475,7 +3569,7 @@ var SpreePayInner = () => {
     enabled: !env?.accessToken
   });
   const _accessToken = env.accessToken ?? accessToken;
-  const slapiFetcher = useMemo9(() => {
+  const slapiFetcher = useMemo10(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -3487,12 +3581,12 @@ var SpreePayInner = () => {
   const getContent = () => {
     if (isChecking) {
       return /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx43(SpreeLegal, {})
+        /* @__PURE__ */ jsx44("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ jsx44("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ jsx44(SpreeLegal, {})
       ] });
     }
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx44(
       SWRConfig,
       {
         value: {
@@ -3501,23 +3595,23 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx43(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx43(NiceModal7.Provider, { children: /* @__PURE__ */ jsx43(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
+        children: /* @__PURE__ */ jsx44(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx44(NiceModal7.Provider, { children: /* @__PURE__ */ jsx44(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
       }
     );
   };
   return /* @__PURE__ */ jsxs27("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
-    /* @__PURE__ */ jsx43("div", { className: "sl-spreepay__portal" }),
+    /* @__PURE__ */ jsx44("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ jsx43(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx43(SpreePayInner, {}) });
+  return /* @__PURE__ */ jsx44(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx44(SpreePayInner, {}) });
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect12 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect13(() => {
+  useEffect12(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }