@superlogic/spree-pay 0.1.15 → 0.1.17

package/build/index.js

@@ -1,6 +1,6 @@
 // src/SpreePay.tsx
-import { useLayoutEffect, useMemo as useMemo2, useRef as useRef3, useState as useState7 } from "react";
-import NiceModal6 from "@ebay/nice-modal-react";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef7, useState as useState13 } from "react";
+import NiceModal7 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
 // src/context/SpreePayActionsContext.tsx
@@ -84,6 +84,84 @@ var useSpreePayRegister = () => {
   return { register: ctx.register };
 };
 
+// src/context/StaticConfigContext.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect, useMemo, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CONFIG = {
+  dev: {
+    bookit: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keyklockUrl: "https://auth.dev.join.bookit.com",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    },
+    moca: {
+      slapiUrl: "https://slapi.dev.air.shop",
+      keyklockUrl: "https://login.dev.air.shop",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    }
+  },
+  stg: {
+    bookit: {
+      slapiUrl: "https://slapi.stg.superlogic.com",
+      keyklockUrl: "https://auth.stg.join.bookit.com",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    },
+    moca: {
+      slapiUrl: "https://slapi.stg.air.shop",
+      keyklockUrl: "https://login.stg.air.shop",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    }
+  },
+  prod: {
+    bookit: {
+      slapiUrl: "https://slapi.superlogic.com",
+      keyklockUrl: "https://auth.join.bookit.com",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    },
+    moca: {
+      slapiUrl: "https://slapi.air.shop",
+      keyklockUrl: "https://login.air.shop",
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
+    }
+  }
+};
+var StaticConfigContext = createContext2(null);
+var StaticConfigProvider = ({ children, props }) => {
+  const { env } = useSpreePayEnv();
+  const [appProps, setAppProps] = useState2(props);
+  useEffect(() => {
+    setAppProps(props);
+  }, [props]);
+  const staticConfig = useMemo(() => {
+    return CONFIG[env.environment][env.tenantId];
+  }, [env.environment, env.tenantId]);
+  return /* @__PURE__ */ jsx2(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
+};
+var useStaticConfig = () => {
+  const ctx = useContext2(StaticConfigContext);
+  if (!ctx) throw new Error("useStaticConfig must be used within StaticConfigProvider");
+  return ctx;
+};
+
+// src/hooks/useSpreePayConfig.ts
+import useSWR from "swr";
+var useSpreePayConfig = () => {
+  const { data, isLoading } = useSWR("/v1/tenants/configs/spree-pay");
+  return { spreePayConfig: data, configIsLoading: isLoading };
+};
+
 // src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -92,7 +170,7 @@ function cn(...inputs) {
 }
 
 // src/ui/spinner.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Spinner = (props) => {
   const { size = "md", className } = props;
   const sizeClasses = {
@@ -112,7 +190,7 @@ var Spinner = (props) => {
       width: "24",
       height: "24",
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "path",
           {
             d: "M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",
@@ -122,7 +200,7 @@ var Spinner = (props) => {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "path",
           {
             d: "M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",
@@ -150,8 +228,9 @@ var formatUSD = (amount, currency = "USD") => {
 };
 var formatPoints = (amount, pointsTitle = "Pts") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
+    notation: "compact",
     style: "decimal",
-    maximumFractionDigits: 5,
+    maximumFractionDigits: 1,
     minimumFractionDigits: 0
   }).format(amount);
   return `${formattedAmount} ${pointsTitle}`;
@@ -165,45 +244,85 @@ var formatCoin = (amount, currency = "USDC") => {
   return `${formattedAmount} ${currency}`;
 };
 
+// src/utils/split.ts
+var getSplitAmount = (amount, splitTokens, pointsConversionRatio) => {
+  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !Number.isFinite(pointsConversionRatio)) {
+    return amount;
+  }
+  if (pointsConversionRatio <= 0) return amount;
+  const usdCoveredByPoints = splitTokens / pointsConversionRatio;
+  const remaining = amount - usdCoveredByPoints;
+  return Math.max(0, parseFloat(remaining.toFixed(2)));
+};
+
+// src/utils/transactionFee.ts
+var getTransactionFee = (amount = 0, transactionFeePercentage) => {
+  if (!Number.isFinite(amount) || amount <= 0) return 0;
+  if (!Number.isFinite(transactionFeePercentage) || !transactionFeePercentage || transactionFeePercentage <= 0) {
+    return 0;
+  }
+  const fee = amount * transactionFeePercentage;
+  return Math.round((fee + Number.EPSILON) * 100) / 100;
+};
+
 // src/components/CheckoutButton.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var CheckoutButton = ({ isLoggedIn, isProcessing, amount, onCheckout }) => {
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var CheckoutButton = ({ isLoggedIn }) => {
+  const { staticConfig, appProps } = useStaticConfig();
+  const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
+  const { spreePayConfig } = useSpreePayConfig();
+  const { pointsTitle, pointsConversionRatio } = staticConfig;
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
-  const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing || !isLoggedIn;
-  const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
+  const { splitAmount, type, method } = selectedPaymentMethod;
+  const isDisabled = !amount || !method || !!isProcessing || isInternalProcessing || !isLoggedIn;
+  const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
+  const isCrypto = type === "CRYPTO" /* CRYPTO */;
+  const getCheckoutContent = () => {
+    if (!!isProcessing || isInternalProcessing) {
+      return /* @__PURE__ */ jsx4(Spinner, { className: "inline", size: "sm" });
+    }
+    if (isCC && amount) {
+      const usdAmount = getSplitAmount(amount, splitAmount ?? 0, pointsConversionRatio);
+      if (splitAmount && usdAmount) {
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, pointsTitle)}`;
+      }
+      if (usdAmount) {
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
+      }
+      if (splitAmount) {
+        return `Pay ${formatPoints(splitAmount, pointsTitle)}`;
+      }
+      return "Checkout";
+    }
+    if (isCrypto && amount) {
+      return `Pay ${formatCoin(amount)}`;
+    }
+    return "Checkout";
+  };
   return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col overflow-hidden rounded-3xl border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ jsx3("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsxs2("p", { className: "text-black/50", children: [
+    /* @__PURE__ */ jsx4("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsxs2("p", { className: "text-black/50", children: [
       "By clicking on the button below I acknowledge that I have read and accepted the",
       " ",
-      /* @__PURE__ */ jsx3(
-        "a",
-        {
-          className: "underline",
-          href: "https://uat.travel.air.shop/terms?locale=en-US&currency=USD",
-          target: "_blank",
-          rel: "noreferrer",
-          children: "Terms and Conditions"
-        }
-      ),
+      /* @__PURE__ */ jsx4("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
       "."
     ] }) }),
-    onCheckout && /* @__PURE__ */ jsx3(
+    onProcess && /* @__PURE__ */ jsx4(
       "button",
       {
         disabled: isDisabled,
-        onClick: onCheckout,
+        onClick: onProcess,
         className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
-        children: !!isProcessing || isInternalProcessing ? /* @__PURE__ */ jsx3(Spinner, { className: "inline", size: "sm" }) : amount ? `Pay ${isUSD ? formatUSD(amount) : formatCoin(amount)}` : "Checkout"
+        children: getCheckoutContent()
       }
     )
   ] });
 };
 
 // src/components/SpreeLegal.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var SpreeLegal = () => {
   return /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex items-center gap-4", children: [
-    /* @__PURE__ */ jsx4("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ jsx5(
       "path",
       {
         fill: "#000",
@@ -214,7 +333,7 @@ var SpreeLegal = () => {
     /* @__PURE__ */ jsxs3("p", { className: "text-xs text-black/50", children: [
       "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
       " ",
-      /* @__PURE__ */ jsx4("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
+      /* @__PURE__ */ jsx5("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
       " ",
       "about Spree."
     ] })
@@ -222,20 +341,13 @@ var SpreeLegal = () => {
 };
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState4 } from "react";
-
-// src/hooks/useSlapiBalance.ts
-import useSWR from "swr";
-var useSlapiBalance = () => {
-  const { data, isLoading, mutate } = useSWR(`/v1/loyalty/accounts`);
-  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
-};
+import { useCallback as useCallback5, useEffect as useEffect7 } from "react";
 
-// src/services/cardPayment.ts
+// src/hooks/useCardPayment.ts
 import NiceModal2 from "@ebay/nice-modal-react";
 
 // src/modals/Iframe3ds.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import NiceModal, { useModal } from "@ebay/nice-modal-react";
 
 // src/services/eventBus.ts
@@ -270,17 +382,17 @@ function usePortalContainer() {
 }
 
 // src/ui/dialog.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx5(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
   const container = usePortalContainer();
   const safeContainer = container && document.body.contains(container) ? container : void 0;
-  return /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -299,7 +411,7 @@ function DialogContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx5(DialogOverlay, {}),
+    /* @__PURE__ */ jsx6(DialogOverlay, {}),
     /* @__PURE__ */ jsxs4(
       DialogPrimitive.Content,
       {
@@ -317,8 +429,8 @@ function DialogContent({
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ jsx5(XIcon, {}),
-                /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx6(XIcon, {}),
+                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -328,7 +440,7 @@ function DialogContent({
   ] });
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -338,7 +450,7 @@ function DialogTitle({ className, ...props }) {
   );
 }
 function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -349,10 +461,10 @@ function DialogDescription({ className, ...props }) {
 }
 
 // src/modals/Iframe3ds.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var Iframe3ds = NiceModal.create(({ url }) => {
   const modal = useModal();
-  useEffect(() => {
+  useEffect2(() => {
     return bus.on("paymentIntent", (data) => {
       modal.resolve(data.paymentIntent);
       modal.remove();
@@ -362,9 +474,9 @@ var Iframe3ds = NiceModal.create(({ url }) => {
     modal.reject();
     modal.remove();
   };
-  return /* @__PURE__ */ jsx6(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
-    /* @__PURE__ */ jsx6(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
-    /* @__PURE__ */ jsx6("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
+  return /* @__PURE__ */ jsx7(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
+    /* @__PURE__ */ jsx7(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
+    /* @__PURE__ */ jsx7("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
   ] }) });
 });
 Iframe3ds.displayName = "Iframe3ds";
@@ -466,32 +578,13 @@ var registerApi = (config2) => {
 
 // src/services/slapi.ts
 var SlapiPaymentService = {
-  // checkBallance: async ({ coin, amount, slippage }: CheckBallanceParams) => {
-  //   // if no ballance known, return true and check by wallet
-  //   if (!coin.balance) return true;
-  //   const isUSDC = coin.symbol === COIN.USDC;
-  //   if (isUSDC) return coin.balance > amount;
-  //   const inputDecimals = cryptoAssets[COIN.USDC].decimals; // Decimals for USDC
-  //   const outputDecimals = coin.decimals; // Decimals for the input asset (e.g., SOL, BONK)
-  //   const params = {
-  //     inputMint: env.NEXT_PUBLIC_USDC_MAINNET_MINT_ADDRESS, // should be main net
-  //     outputMint: coin.address,
-  //     amount: Math.floor(amount * Math.pow(10, inputDecimals)), // Convert amount to smallest units
-  //     slippage,
-  //   };
-  //   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  //   const { data } = await jupiterApi.get<any>(`/quote?${qs.stringify(params)}`);
-  //   // Convert back to human-readable form
-  //   const outAmountNumber = data?.outAmount ? Number(data.outAmount) / Math.pow(10, outputDecimals) : null;
-  //   // if no ballance known, return true and check by wallet
-  //   if (!outAmountNumber) return true;
-  //   return coin.balance > outAmountNumber;
-  // },
   createPayment: (params) => {
     const { type, hash, metadata, capture = false } = params;
     let reqParams;
     if (type === "CRYPTO" /* CRYPTO */) {
       reqParams = { type, hash, crypto: params.crypto };
+    } else if (type === "CREDIT_CARD" /* CREDIT_CARD */ && params.points && params.points.amount > 0) {
+      reqParams = { type: "SPLIT" /* SPLIT */, hash, card: params.card, points: params.points };
     } else {
       reqParams = { type, hash, card: params.card };
     }
@@ -500,139 +593,69 @@ var SlapiPaymentService = {
   baseVerify: ({ id, txHash }) => {
     return slapiApi.post(`/v1/base-transactions/transactions/${id}/verify`, { txHash });
   },
-  // signEncodedTransaction: async (signTransaction: SignTransaction, encodedTX: string): Promise<string> => {
-  //   const swapTransactionBuf = Buffer.from(encodedTX, 'base64');
-  //   const transaction = VersionedTransaction.deserialize(swapTransactionBuf);
-  //   // Sign and send the transaction
-  //   const signedTransaction = await signTransaction(transaction);
-  //   return Buffer.from(signedTransaction.serialize()).toString('base64');
-  // },
-  // executeSolana: (params: { txId: string; signedTx: string }) => {
-  //   const { txId, signedTx } = params;
-  //   return slapiApi.post<string>(`/solana-transactions/transactions/${txId}/execute`, { signedTx });
-  // },
-  addCard: (params) => {
-    const { source, hash } = params;
+  addCard: ({ source, hash }) => {
     return slapiApi.post("/v1/payments/cards", { hash, source }).then((data) => ({ data }));
   },
-  validate3DS: (params) => {
-    const { paymentId } = params;
-    return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" }).then((data) => ({ data }));
+  validate3DS: ({ paymentId }) => {
+    return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" /* CREDIT_CARD */ }).then((data) => ({ data }));
+  },
+  validatePoints: ({ paymentId, txHash }) => {
+    return slapiApi.post("/v1/payments/validate", { txHash, paymentId, type: "SPLIT" /* SPLIT */ }).then((data) => ({ data }));
+  },
+  getStatus: (paymentId) => {
+    return slapiApi.get(`/v1/payments/${paymentId}/status`);
   }
 };
 
-// src/services/cardPayment.ts
-var cardPayment = async (params) => {
-  const { card, redirect3dsURI, hash, capture, metadata, transactionFee } = params;
-  let cardId = card.id;
-  if ("token" in card) {
-    const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
-    cardId = cardResData.id;
-  }
-  const { data: paymentResData } = await SlapiPaymentService.createPayment({
-    hash,
-    capture,
-    metadata,
-    type: "CREDIT_CARD" /* CREDIT_CARD */,
-    card: {
-      cardId,
-      transactionFee,
-      returnUrl: `${window.location.origin}${redirect3dsURI}`
-    }
-  });
-  if (paymentResData.redirectUrl) {
-    const paymentIntent = await NiceModal2.show(Iframe3ds, { url: paymentResData.redirectUrl });
-    if (paymentIntent) {
-      const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
-      return {
-        paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
-        status: validateData.status,
-        paymentId: paymentResData.id,
-        txId: paymentResData.txId,
-        txHash: null
-      };
+// src/hooks/useCardPayment.ts
+var useCardPayment = () => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
+  const { appProps } = useStaticConfig();
+  const cardPayment = async (params) => {
+    if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method) {
+      throw new Error("Unsupported payment method");
     }
-  }
-  return {
-    paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
-    status: paymentResData.status,
-    paymentId: paymentResData.id,
-    txId: paymentResData.txId,
-    txHash: null
-  };
-};
-
-// src/components/common/PointsSwitch.tsx
-import { useId } from "react";
-
-// src/ui/label.tsx
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
-    LabelPrimitive.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
+    const { hash, capture, metadata } = params;
+    const card = selectedPaymentMethod.method;
+    let cardId;
+    if ("token" in card) {
+      const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
+      cardId = cardResData.id;
+    } else {
+      cardId = card.id;
     }
-  );
-}
-
-// src/ui/switch.tsx
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Switch({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(
-    SwitchPrimitive.Root,
-    {
-      "data-slot": "switch",
-      className: cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx8(
-        SwitchPrimitive.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        }
-      )
+    const transactionFee = getTransactionFee(appProps.amount, appProps.transactionFeePercentage);
+    const { data: paymentResData } = await SlapiPaymentService.createPayment({
+      hash,
+      capture,
+      metadata,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      card: {
+        cardId,
+        transactionFee,
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+      }
+    });
+    let { status } = paymentResData;
+    if (paymentResData.redirectUrl) {
+      const paymentIntent = await NiceModal2.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      if (paymentIntent) {
+        const { data: validateData } = await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
+        ({ status } = validateData);
+      }
     }
-  );
-}
-
-// src/components/common/PointsSwitch.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var PointsSwitch = (props) => {
-  const { pointsConversionRatio, disabled = false, value, onChange, pointsTitle } = props;
-  const { balance } = useSlapiBalance();
-  const id = useId();
-  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-3", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx9(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-      /* @__PURE__ */ jsxs6(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-        "Use Points ",
-        /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium", children: "Optional" })
-      ] })
-    ] }),
-    balance?.availablePoints ? /* @__PURE__ */ jsxs6("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-      formatPoints(balance.availablePoints, pointsTitle),
-      " ",
-      /* @__PURE__ */ jsx9("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
-    ] }) : null
-  ] });
+    return {
+      status,
+      paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
+      paymentId: paymentResData.id,
+      txId: paymentResData.txId,
+      txHash: null
+    };
+  };
+  return { cardPayment };
 };
 
-// src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { useMemo, useState as useState3 } from "react";
-import { Elements } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
-
 // src/hooks/useCards.ts
 import useSWR2 from "swr";
 var useCards = () => {
@@ -644,15 +667,206 @@ var useCards = () => {
   };
 };
 
-// src/hooks/useConfig.ts
-import useSWR3 from "swr";
-var useConfig = () => {
-  const { data, isLoading } = useSWR3("/v1/tenants/configs/spree-pay");
-  return { config: data, configIsLoading: isLoading };
+// src/hooks/useSplitCardPayments.ts
+import NiceModal3 from "@ebay/nice-modal-react";
+
+// src/services/AirWalletService.ts
+import { AirService, BUILD_ENV } from "@mocanetwork/airkit";
+import { createWalletClient, custom, encodeFunctionData, erc20Abi, parseUnits } from "viem";
+var singletonState = null;
+var initPromise = null;
+var cachedKey = null;
+function optionsKey(opts) {
+  return `${opts.partnerId}|${opts.mocaChain?.id ?? "unknown"}`;
+}
+async function createAndInit(opts) {
+  const air = new AirService({ partnerId: opts.partnerId });
+  try {
+    await air.init({
+      buildEnv: opts.buildEnv ?? BUILD_ENV.SANDBOX,
+      enableLogging: opts.enableLogging ?? true,
+      skipRehydration: opts.skipRehydration ?? false
+    });
+    air.preloadWallet().catch(() => {
+    });
+    const loginRes = await air.login();
+    const address = loginRes?.abstractAccountAddress || null;
+    const walletClient = address ? createWalletClient({
+      transport: custom(air.provider),
+      chain: opts.mocaChain,
+      account: address
+    }) : null;
+    return { walletReady: true, address, walletClient, air, chain: opts.mocaChain };
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : "Unknown error during AirWallet initialization";
+    return { walletReady: false, address: null, walletClient: null, air: null, chain: null, error: msg };
+  }
+}
+async function getAirWallet(options) {
+  const key = optionsKey(options);
+  if (singletonState && cachedKey === key) return singletonState;
+  if (initPromise && cachedKey === key) return initPromise;
+  cachedKey = key;
+  initPromise = createAndInit(options).then((state) => {
+    singletonState = state;
+    return state;
+  });
+  return initPromise;
+}
+function peekAirWallet() {
+  return singletonState;
+}
+async function handleSendErc20(params) {
+  const state = singletonState;
+  if (!state?.walletClient) {
+    console.error("Air wallet is not initialized");
+    throw new Error("Air wallet is not initialized");
+  }
+  if (!params?.recipient) {
+    console.error("Recipient address is not set");
+    throw new Error("Recipient address is not set");
+  }
+  if (!params?.token?.address || !params?.token?.decimals) {
+    console.error("Token address or decimals not set");
+    throw new Error("Token address or decimals not set");
+  }
+  try {
+    const { walletClient } = state;
+    const addresses = await walletClient.getAddresses();
+    const value = parseUnits(String(params.amount), params.token.decimals);
+    const data = encodeFunctionData({
+      abi: erc20Abi,
+      functionName: "transfer",
+      args: [params.recipient, value]
+    });
+    const hash = await walletClient.sendTransaction({
+      account: addresses[0],
+      to: params.token.address,
+      data,
+      value: 0n,
+      chain: state.chain ?? void 0
+    });
+    return { txHash: hash };
+  } catch (error) {
+    if (typeof error === "object" && error !== null && "shortMessage" in error) {
+      console.error(error.shortMessage);
+    } else {
+      console.error("Your wallet balances are insufficient to complete this transaction.");
+    }
+  }
+}
+
+// src/hooks/useSplitCardPayments.ts
+var REFRESH_INTERVAL = 3 * 1e3;
+var MAX_RETRIES = 10;
+async function longPollPoints(paymentId) {
+  let retries = 0;
+  while (retries < MAX_RETRIES) {
+    const { detail } = await SlapiPaymentService.getStatus(paymentId);
+    if (detail.status === "FAILED" /* FAILED */) {
+      throw new Error("Something went wrong with the payment");
+    }
+    if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)) {
+      return detail.status;
+    }
+    await new Promise((res) => setTimeout(res, REFRESH_INTERVAL));
+    retries++;
+  }
+  throw new Error("Points Payment polling timed out");
+}
+async function longPollCardStatus(paymentId) {
+  let retries = 0;
+  let shown3ds = false;
+  while (retries < MAX_RETRIES) {
+    const { detail } = await SlapiPaymentService.getStatus(paymentId);
+    if (detail.status === "FAILED" /* FAILED */) {
+      throw new Error(`Something went wrong with the ${detail.validationType} payment`);
+    }
+    if (detail.validationType === "POINTS") {
+      return detail.status;
+    }
+    if (!shown3ds && detail.card?.redirectUrl) {
+      const paymentIntent = await NiceModal3.show(Iframe3ds, { url: detail.card?.redirectUrl });
+      shown3ds = true;
+      if (paymentIntent) {
+        await SlapiPaymentService.validate3DS({ paymentId });
+      }
+    }
+    await new Promise((res) => setTimeout(res, REFRESH_INTERVAL));
+    retries++;
+  }
+  throw new Error("Payment polling timed out");
+}
+var useSplitCardPayments = () => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
+  const { appProps, staticConfig } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
+  const splitPayment = async (params) => {
+    if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
+      throw new Error("Unsupported payment method");
+    }
+    const { hash, capture, metadata, points } = params;
+    const card = selectedPaymentMethod.method;
+    let cardId;
+    if ("token" in card) {
+      const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
+      cardId = cardResData.id;
+    } else {
+      cardId = card.id;
+    }
+    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, staticConfig.pointsConversionRatio);
+    const transactionFee = getTransactionFee(usdAmount, appProps.transactionFeePercentage);
+    const { data: paymentResData } = await SlapiPaymentService.createPayment({
+      hash,
+      capture,
+      metadata,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      card: {
+        cardId,
+        transactionFee,
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+      },
+      points: {
+        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");
+    }
+    await SlapiPaymentService.validatePoints({
+      paymentId: paymentResData.id,
+      txHash: transaction.txHash
+    });
+    const pointsStatus = await longPollPoints(paymentResData.id);
+    return {
+      paymentType: "SPLIT" /* SPLIT */,
+      status: pointsStatus,
+      paymentId: paymentResData.id,
+      txId: paymentResData.txId,
+      txHash: transaction.txHash
+    };
+  };
+  return { splitPayment };
 };
 
+// src/components/CreditCardTab/CreditCard/CreditCard.tsx
+import { useMemo as useMemo2, useState as useState4 } from "react";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var isRemoveDisabled = true;
 var CardListItem = ({ card, isSelected, onSelect }) => {
   const handleSelect = () => {
@@ -662,17 +876,17 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ jsxs7("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs6("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
           "bg-primary": isSelected
         }),
-        children: /* @__PURE__ */ jsx10("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx10("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
+        children: /* @__PURE__ */ jsx8("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx8("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
       }
     ),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs6(
       "div",
       {
         className: cn(
@@ -682,13 +896,13 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
           }
         ),
         children: [
-          /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs7("p", { className: "text-sm font-medium text-black/50", children: [
+          /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs6("p", { className: "text-sm font-medium text-black/50", children: [
               "Ending in ",
-              /* @__PURE__ */ jsx10("span", { className: "text-black", children: card.lastFourNumbers })
+              /* @__PURE__ */ jsx8("span", { className: "text-black", children: card.lastFourNumbers })
             ] }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx8(
               "div",
               {
                 onClick: handleRemoveCard,
@@ -696,9 +910,9 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
                   "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
                   // 'cursor-pointer': !isSelected || !isRemoveDisabled,
                 }),
-                children: /* @__PURE__ */ jsxs7("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
-                  /* @__PURE__ */ jsx10("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx10("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
-                  /* @__PURE__ */ jsx10("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ jsx10(
+                children: /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
+                  /* @__PURE__ */ jsx8("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx8("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
+                  /* @__PURE__ */ jsx8("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ jsx8(
                     "path",
                     {
                       fill: "#000",
@@ -718,23 +932,23 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
 var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
-    return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
-      /* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
+    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" })
     ] });
   }
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ jsx10("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ jsx10(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
+  return /* @__PURE__ */ jsx8("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ jsx8(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { useId as useId2, useState as useState2 } from "react";
+import { useId, useState as useState3 } from "react";
 import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
 
 // src/ui/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
   {
@@ -769,15 +983,15 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx11(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+  return /* @__PURE__ */ jsx9(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
 }
 
 // src/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx10(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -786,20 +1000,37 @@ function Checkbox({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx10(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ jsx12(CheckIcon, { className: "size-3.5 text-white" })
+          children: /* @__PURE__ */ jsx10(CheckIcon, { className: "size-3.5 text-white" })
         }
       )
     }
   );
 }
 
+// src/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var style = {
   base: {
     fontSize: "16px",
@@ -819,10 +1050,10 @@ var stripeElementClasses = {
   focus: "border-ring ring-ring/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
-  const [cardError, setCardError] = useState2(void 0);
+  const [cardError, setCardError] = useState3(void 0);
   const elements = useElements();
   const stripe = useStripe();
-  const id = useId2();
+  const id = useId();
   const handleSaveCard = async () => {
     if (!elements || !stripe) return;
     setCardError(void 0);
@@ -857,9 +1088,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setCardError("An error occurred while processing your card. Please try again.");
     }
   };
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsx12(
         CardNumberElement,
         {
           options: {
@@ -869,8 +1100,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         }
       ),
-      /* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-1", children: [
-        /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsxs7("div", { className: "flex w-full gap-1", children: [
+        /* @__PURE__ */ jsx12(
           CardExpiryElement,
           {
             options: {
@@ -880,7 +1111,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx12(
           CardCvcElement,
           {
             options: {
@@ -891,32 +1122,32 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         )
       ] }),
-      cardError && /* @__PURE__ */ jsx13("p", { className: "text-destructive mt-1 text-sm", children: cardError })
+      cardError && /* @__PURE__ */ jsx12("p", { className: "text-destructive mt-1 text-sm", children: cardError })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx13(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
-      /* @__PURE__ */ jsx13(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx12(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
+      /* @__PURE__ */ jsx12(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ jsx13(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx13(Button, { onClick: handleSaveCard, children: "Add Card" })
+    /* @__PURE__ */ jsxs7("div", { className: "flex w-full justify-end gap-2", children: [
+      /* @__PURE__ */ jsx12(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx12(Button, { onClick: handleSaveCard, children: "Add Card" })
     ] })
   ] });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-var SripeWrapper = (props) => {
-  const stripePromise = useMemo(() => loadStripe(props.publicKey), [props.publicKey]);
-  return /* @__PURE__ */ jsx14(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx14(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var StripeWrapper = (props) => {
+  const stripePromise = useMemo2(() => loadStripe(props.publicKey), [props.publicKey]);
+  return /* @__PURE__ */ jsx13(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx13(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
 };
 var CreditCard = () => {
-  const [showForm, setShowForm] = useState3(false);
+  const [showForm, setShowForm] = useState4(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
-  const { config: config2 } = useConfig();
+  const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
-    setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
+    setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
   };
   const saveNewCard = (newCard) => {
     mutateCards((data) => ({ ...data, data: [...data?.data ?? [], newCard] }), { revalidate: false });
@@ -926,69 +1157,1221 @@ var CreditCard = () => {
   const handleCancel = () => {
     setShowForm(false);
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ jsx14("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
-    !showForm && /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ jsx13("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
+    !showForm && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx13(
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
           setCard
         }
       ),
-      config2?.stripePublicKey && /* @__PURE__ */ jsx14("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
+      spreePayConfig?.stripePublicKey && /* @__PURE__ */ jsx13("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
     ] }),
-    config2?.stripePublicKey && showForm && /* @__PURE__ */ jsx14(SripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: config2.stripePublicKey })
+    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx13(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
   ] });
 };
 
-// src/components/CreditCardTab/CreditCardTab.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
-var PointsSelector = ({ isSelected, onSelect, children }) => {
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxs10(
-      "div",
-      {
-        onClick: onSelect,
-        className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
-          "border-primary": isSelected
-        }),
-        children: [
-          /* @__PURE__ */ jsxs10("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
-            /* @__PURE__ */ jsx15(
-              "div",
-              {
-                className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
-                  "bg-primary": isSelected
-                }),
-                children: /* @__PURE__ */ jsx15("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx15("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
-              }
-            ),
-            /* @__PURE__ */ jsx15("div", { className: "flex h-full w-full items-center justify-between gap-4 px-3", children })
-          ] }),
-          isSelected && /* @__PURE__ */ jsx15("div", { className: "px-4 pt-6 pb-2", children: /* @__PURE__ */ jsx15("p", { children: "Card" }) })
-        ]
-      }
-    )
-  );
+// src/components/CreditCardTab/Points/Points.tsx
+import { useState as useState10 } from "react";
+
+// src/components/common/PointsSwitch.tsx
+import { useId as useId2 } from "react";
+
+// src/hooks/useSlapiBalance.ts
+import useSWR3 from "swr";
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = useSWR3(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
 };
-var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
-  const [usePoints, setUsePoints] = useState4(false);
-  const [selectedPointsType, setSelectedPointsType] = useState4(null);
+
+// src/ui/switch.tsx
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx14(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx14(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        }
+      )
+    }
+  );
+}
+
+// src/components/common/PointsSwitch.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var PointsSwitch = (props) => {
+  const { disabled = false, value, onChange } = props;
+  const { staticConfig } = useStaticConfig();
+  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { balance } = useSlapiBalance();
+  const id = useId2();
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx15(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+      /* @__PURE__ */ jsxs9(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
+        "Use Points ",
+        /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: "Optional" })
+      ] })
+    ] }),
+    balance?.availablePoints ? /* @__PURE__ */ jsxs9("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+      formatPoints(balance.availablePoints, pointsTitle),
+      " ",
+      /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+    ] }) : null
+  ] });
+};
+
+// src/components/CreditCardTab/Points/SplitBlock.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
+
+// src/components/CreditCardTab/Points/PointsSelector.tsx
+import { useState as useState8 } from "react";
+
+// src/ui/input.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx16(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/slider.tsx
+import * as React12 from "react";
+
+// ../../node_modules/@radix-ui/react-slider/dist/index.mjs
+import * as React11 from "react";
+
+// ../../node_modules/@radix-ui/number/dist/index.mjs
+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
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+// ../../node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+import * as React2 from "react";
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React2.useCallback(composeRefs(...refs), refs);
+}
+
+// ../../node_modules/@radix-ui/react-context/dist/index.mjs
+import * as React3 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext32(rootComponentName, defaultContext) {
+    const BaseContext = React3.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      const { scope, children, ...context } = props;
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const value = React3.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx17(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext22(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const context = React3.useContext(Context);
+      if (context) return context;
+      if (defaultContext !== void 0) return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext22];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React3.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React3.useMemo(
+        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+        [scope, contexts]
+      );
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1) return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React3.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+
+// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+import * as React5 from "react";
+
+// ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+import * as React4 from "react";
+var useLayoutEffect2 = globalThis?.document ? React4.useLayoutEffect : () => {
+};
+
+// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+import * as React22 from "react";
+var useInsertionEffect = React5[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {
+  },
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== void 0;
+  const value = isControlled ? prop : uncontrolledProp;
+  if (true) {
+    const isControlledRef = React5.useRef(prop !== void 0);
+    React5.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(
+          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+        );
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React5.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+        if (value2 !== prop) {
+          onChangeRef.current?.(value2);
+        }
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, onChangeRef]
+  );
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React5.useState(defaultProp);
+  const prevValueRef = React5.useRef(value);
+  const onChangeRef = React5.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React5.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+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";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var DirectionContext = React6.createContext(void 0);
+function useDirection(localDir) {
+  const globalDir = React6.useContext(DirectionContext);
+  return localDir || globalDir || "ltr";
+}
+
+// ../../node_modules/@radix-ui/react-use-previous/dist/index.mjs
+import * as React7 from "react";
+function usePrevious(value) {
+  const ref = React7.useRef({ value, previous: value });
+  return React7.useMemo(() => {
+    if (ref.current.value !== value) {
+      ref.current.previous = ref.current.value;
+      ref.current.value = value;
+    }
+    return ref.current.previous;
+  }, [value]);
+}
+
+// ../../node_modules/@radix-ui/react-use-size/dist/index.mjs
+import * as React8 from "react";
+function useSize(element) {
+  const [size, setSize] = React8.useState(void 0);
+  useLayoutEffect2(() => {
+    if (element) {
+      setSize({ width: element.offsetWidth, height: element.offsetHeight });
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries)) {
+          return;
+        }
+        if (!entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        let width;
+        let height;
+        if ("borderBoxSize" in entry) {
+          const borderSizeEntry = entry["borderBoxSize"];
+          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+          width = borderSize["inlineSize"];
+          height = borderSize["blockSize"];
+        } else {
+          width = element.offsetWidth;
+          height = element.offsetHeight;
+        }
+        setSize({ width, height });
+      });
+      resizeObserver.observe(element, { box: "border-box" });
+      return () => resizeObserver.unobserve(element);
+    } else {
+      setSize(void 0);
+    }
+  }, [element]);
+  return size;
+}
+
+// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
+import * as React9 from "react";
+import * as ReactDOM from "react-dom";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot2 = createSlot(`Primitive.${node}`);
+  const Node2 = React9.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx19(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+
+// ../../node_modules/@radix-ui/react-collection/dist/index.mjs
+import React10 from "react";
+import { createSlot as createSlot2 } from "@radix-ui/react-slot";
+import { jsx as jsx20 } from "react/jsx-runtime";
+import React23 from "react";
+import { createSlot as createSlot22 } from "@radix-ui/react-slot";
+import { jsx as jsx22 } from "react/jsx-runtime";
+function createCollection(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
+    PROVIDER_NAME,
+    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
+  );
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = React10.useRef(null);
+    const itemMap = React10.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ jsx20(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlotImpl = createSlot2(COLLECTION_SLOT_NAME);
+  const CollectionSlot = React10.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children } = props;
+      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+      return /* @__PURE__ */ jsx20(CollectionSlotImpl, { ref: composedRefs, children });
+    }
+  );
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-radix-collection-item";
+  const CollectionItemSlotImpl = createSlot2(ITEM_SLOT_NAME);
+  const CollectionItemSlot = React10.forwardRef(
+    (props, forwardedRef) => {
+      const { scope, children, ...itemData } = props;
+      const ref = React10.useRef(null);
+      const composedRefs = useComposedRefs(forwardedRef, ref);
+      const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+      React10.useEffect(() => {
+        context.itemMap.set(ref, { ref, ...itemData });
+        return () => void context.itemMap.delete(ref);
+      });
+      return /* @__PURE__ */ jsx20(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    }
+  );
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection2(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React10.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode) return [];
+      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort(
+        (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
+      );
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection2,
+    createCollectionScope2
+  ];
+}
+
+// ../../node_modules/@radix-ui/react-slider/dist/index.mjs
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var PAGE_KEYS = ["PageUp", "PageDown"];
+var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+var BACK_KEYS = {
+  "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
+  "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
+  "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
+  "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
+};
+var SLIDER_NAME = "Slider";
+var [Collection, useCollection, createCollectionScope] = createCollection(SLIDER_NAME);
+var [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [
+  createCollectionScope
+]);
+var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
+var Slider = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      name,
+      min = 0,
+      max = 100,
+      step = 1,
+      orientation = "horizontal",
+      disabled = false,
+      minStepsBetweenThumbs = 0,
+      defaultValue = [min],
+      value,
+      onValueChange = () => {
+      },
+      onValueCommit = () => {
+      },
+      inverted = false,
+      form,
+      ...sliderProps
+    } = props;
+    const thumbRefs = React11.useRef(/* @__PURE__ */ new Set());
+    const valueIndexToChangeRef = React11.useRef(0);
+    const isHorizontal = orientation === "horizontal";
+    const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
+    const [values = [], setValues] = useControllableState({
+      prop: value,
+      defaultProp: defaultValue,
+      onChange: (value2) => {
+        const thumbs = [...thumbRefs.current];
+        thumbs[valueIndexToChangeRef.current]?.focus();
+        onValueChange(value2);
+      }
+    });
+    const valuesBeforeSlideStartRef = React11.useRef(values);
+    function handleSlideStart(value2) {
+      const closestIndex = getClosestValueIndex(values, value2);
+      updateValues(value2, closestIndex);
+    }
+    function handleSlideMove(value2) {
+      updateValues(value2, valueIndexToChangeRef.current);
+    }
+    function handleSlideEnd() {
+      const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
+      const nextValue = values[valueIndexToChangeRef.current];
+      const hasChanged = nextValue !== prevValue;
+      if (hasChanged) onValueCommit(values);
+    }
+    function updateValues(value2, atIndex, { commit } = { commit: false }) {
+      const decimalCount = getDecimalCount(step);
+      const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
+      const nextValue = clamp(snapToStep, [min, max]);
+      setValues((prevValues = []) => {
+        const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
+        if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
+          valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+          const hasChanged = String(nextValues) !== String(prevValues);
+          if (hasChanged && commit) onValueCommit(nextValues);
+          return hasChanged ? nextValues : prevValues;
+        } else {
+          return prevValues;
+        }
+      });
+    }
+    return /* @__PURE__ */ jsx21(
+      SliderProvider,
+      {
+        scope: props.__scopeSlider,
+        name,
+        disabled,
+        min,
+        max,
+        valueIndexToChangeRef,
+        thumbs: thumbRefs.current,
+        values,
+        orientation,
+        form,
+        children: /* @__PURE__ */ jsx21(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx21(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx21(
+          SliderOrientation,
+          {
+            "aria-disabled": disabled,
+            "data-disabled": disabled ? "" : void 0,
+            ...sliderProps,
+            ref: forwardedRef,
+            onPointerDown: composeEventHandlers(sliderProps.onPointerDown, () => {
+              if (!disabled) valuesBeforeSlideStartRef.current = values;
+            }),
+            min,
+            max,
+            inverted,
+            onSlideStart: disabled ? void 0 : handleSlideStart,
+            onSlideMove: disabled ? void 0 : handleSlideMove,
+            onSlideEnd: disabled ? void 0 : handleSlideEnd,
+            onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
+            onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
+            onStepKeyDown: ({ event, direction: stepDirection }) => {
+              if (!disabled) {
+                const isPageKey = PAGE_KEYS.includes(event.key);
+                const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
+                const multiplier = isSkipKey ? 10 : 1;
+                const atIndex = valueIndexToChangeRef.current;
+                const value2 = values[atIndex];
+                const stepInDirection = step * multiplier * stepDirection;
+                updateValues(value2 + stepInDirection, atIndex, { commit: true });
+              }
+            }
+          }
+        ) }) })
+      }
+    );
+  }
+);
+Slider.displayName = SLIDER_NAME;
+var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
+  startEdge: "left",
+  endEdge: "right",
+  size: "width",
+  direction: 1
+});
+var SliderHorizontal = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      min,
+      max,
+      dir,
+      inverted,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onStepKeyDown,
+      ...sliderProps
+    } = props;
+    const [slider, setSlider] = React11.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));
+    const rectRef = React11.useRef(void 0);
+    const direction = useDirection(dir);
+    const isDirectionLTR = direction === "ltr";
+    const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
+    function getValueFromPointer(pointerPosition) {
+      const rect = rectRef.current || slider.getBoundingClientRect();
+      const input = [0, rect.width];
+      const output = isSlidingFromLeft ? [min, max] : [max, min];
+      const value = linearScale(input, output);
+      rectRef.current = rect;
+      return value(pointerPosition - rect.left);
+    }
+    return /* @__PURE__ */ jsx21(
+      SliderOrientationProvider,
+      {
+        scope: props.__scopeSlider,
+        startEdge: isSlidingFromLeft ? "left" : "right",
+        endEdge: isSlidingFromLeft ? "right" : "left",
+        direction: isSlidingFromLeft ? 1 : -1,
+        size: "width",
+        children: /* @__PURE__ */ jsx21(
+          SliderImpl,
+          {
+            dir: direction,
+            "data-orientation": "horizontal",
+            ...sliderProps,
+            ref: composedRefs,
+            style: {
+              ...sliderProps.style,
+              ["--radix-slider-thumb-transform"]: "translateX(-50%)"
+            },
+            onSlideStart: (event) => {
+              const value = getValueFromPointer(event.clientX);
+              onSlideStart?.(value);
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.clientX);
+              onSlideMove?.(value);
+            },
+            onSlideEnd: () => {
+              rectRef.current = void 0;
+              onSlideEnd?.();
+            },
+            onStepKeyDown: (event) => {
+              const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
+              const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
+              onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+);
+var SliderVertical = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      min,
+      max,
+      inverted,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onStepKeyDown,
+      ...sliderProps
+    } = props;
+    const sliderRef = React11.useRef(null);
+    const ref = useComposedRefs(forwardedRef, sliderRef);
+    const rectRef = React11.useRef(void 0);
+    const isSlidingFromBottom = !inverted;
+    function getValueFromPointer(pointerPosition) {
+      const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
+      const input = [0, rect.height];
+      const output = isSlidingFromBottom ? [max, min] : [min, max];
+      const value = linearScale(input, output);
+      rectRef.current = rect;
+      return value(pointerPosition - rect.top);
+    }
+    return /* @__PURE__ */ jsx21(
+      SliderOrientationProvider,
+      {
+        scope: props.__scopeSlider,
+        startEdge: isSlidingFromBottom ? "bottom" : "top",
+        endEdge: isSlidingFromBottom ? "top" : "bottom",
+        size: "height",
+        direction: isSlidingFromBottom ? 1 : -1,
+        children: /* @__PURE__ */ jsx21(
+          SliderImpl,
+          {
+            "data-orientation": "vertical",
+            ...sliderProps,
+            ref,
+            style: {
+              ...sliderProps.style,
+              ["--radix-slider-thumb-transform"]: "translateY(50%)"
+            },
+            onSlideStart: (event) => {
+              const value = getValueFromPointer(event.clientY);
+              onSlideStart?.(value);
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.clientY);
+              onSlideMove?.(value);
+            },
+            onSlideEnd: () => {
+              rectRef.current = void 0;
+              onSlideEnd?.();
+            },
+            onStepKeyDown: (event) => {
+              const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
+              const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
+              onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+);
+var SliderImpl = React11.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSlider,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onHomeKeyDown,
+      onEndKeyDown,
+      onStepKeyDown,
+      ...sliderProps
+    } = props;
+    const context = useSliderContext(SLIDER_NAME, __scopeSlider);
+    return /* @__PURE__ */ jsx21(
+      Primitive.span,
+      {
+        ...sliderProps,
+        ref: forwardedRef,
+        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+          if (event.key === "Home") {
+            onHomeKeyDown(event);
+            event.preventDefault();
+          } else if (event.key === "End") {
+            onEndKeyDown(event);
+            event.preventDefault();
+          } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
+            onStepKeyDown(event);
+            event.preventDefault();
+          }
+        }),
+        onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+          const target = event.target;
+          target.setPointerCapture(event.pointerId);
+          event.preventDefault();
+          if (context.thumbs.has(target)) {
+            target.focus();
+          } else {
+            onSlideStart(event);
+          }
+        }),
+        onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
+          const target = event.target;
+          if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
+        }),
+        onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+          const target = event.target;
+          if (target.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+            onSlideEnd(event);
+          }
+        })
+      }
+    );
+  }
+);
+var TRACK_NAME = "SliderTrack";
+var SliderTrack = React11.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...trackProps } = props;
+    const context = useSliderContext(TRACK_NAME, __scopeSlider);
+    return /* @__PURE__ */ jsx21(
+      Primitive.span,
+      {
+        "data-disabled": context.disabled ? "" : void 0,
+        "data-orientation": context.orientation,
+        ...trackProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+SliderTrack.displayName = TRACK_NAME;
+var RANGE_NAME = "SliderRange";
+var SliderRange = React11.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...rangeProps } = props;
+    const context = useSliderContext(RANGE_NAME, __scopeSlider);
+    const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
+    const ref = React11.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const valuesCount = context.values.length;
+    const percentages = context.values.map(
+      (value) => convertValueToPercentage(value, context.min, context.max)
+    );
+    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+    const offsetEnd = 100 - Math.max(...percentages);
+    return /* @__PURE__ */ jsx21(
+      Primitive.span,
+      {
+        "data-orientation": context.orientation,
+        "data-disabled": context.disabled ? "" : void 0,
+        ...rangeProps,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          [orientation.startEdge]: offsetStart + "%",
+          [orientation.endEdge]: offsetEnd + "%"
+        }
+      }
+    );
+  }
+);
+SliderRange.displayName = RANGE_NAME;
+var THUMB_NAME = "SliderThumb";
+var SliderThumb = React11.forwardRef(
+  (props, forwardedRef) => {
+    const getItems = useCollection(props.__scopeSlider);
+    const [thumb, setThumb] = React11.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
+    const index = React11.useMemo(
+      () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
+      [getItems, thumb]
+    );
+    return /* @__PURE__ */ jsx21(SliderThumbImpl, { ...props, ref: composedRefs, index });
+  }
+);
+var SliderThumbImpl = React11.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, index, name, ...thumbProps } = props;
+    const context = useSliderContext(THUMB_NAME, __scopeSlider);
+    const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
+    const [thumb, setThumb] = React11.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
+    const isFormControl = thumb ? context.form || !!thumb.closest("form") : true;
+    const size = useSize(thumb);
+    const value = context.values[index];
+    const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
+    const label = getLabel(index, context.values.length);
+    const orientationSize = size?.[orientation.size];
+    const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
+    React11.useEffect(() => {
+      if (thumb) {
+        context.thumbs.add(thumb);
+        return () => {
+          context.thumbs.delete(thumb);
+        };
+      }
+    }, [thumb, context.thumbs]);
+    return /* @__PURE__ */ jsxs10(
+      "span",
+      {
+        style: {
+          transform: "var(--radix-slider-thumb-transform)",
+          position: "absolute",
+          [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
+        },
+        children: [
+          /* @__PURE__ */ jsx21(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx21(
+            Primitive.span,
+            {
+              role: "slider",
+              "aria-label": props["aria-label"] || label,
+              "aria-valuemin": context.min,
+              "aria-valuenow": value,
+              "aria-valuemax": context.max,
+              "aria-orientation": context.orientation,
+              "data-orientation": context.orientation,
+              "data-disabled": context.disabled ? "" : void 0,
+              tabIndex: context.disabled ? void 0 : 0,
+              ...thumbProps,
+              ref: composedRefs,
+              style: value === void 0 ? { display: "none" } : props.style,
+              onFocus: composeEventHandlers(props.onFocus, () => {
+                context.valueIndexToChangeRef.current = index;
+              })
+            }
+          ) }),
+          isFormControl && /* @__PURE__ */ jsx21(
+            SliderBubbleInput,
+            {
+              name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
+              form: context.form,
+              value
+            },
+            index
+          )
+        ]
+      }
+    );
+  }
+);
+SliderThumb.displayName = THUMB_NAME;
+var BUBBLE_INPUT_NAME = "RadioBubbleInput";
+var SliderBubbleInput = React11.forwardRef(
+  ({ __scopeSlider, value, ...props }, forwardedRef) => {
+    const ref = React11.useRef(null);
+    const composedRefs = useComposedRefs(ref, forwardedRef);
+    const prevValue = usePrevious(value);
+    React11.useEffect(() => {
+      const input = ref.current;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
+      const setValue = descriptor.set;
+      if (prevValue !== value && setValue) {
+        const event = new Event("input", { bubbles: true });
+        setValue.call(input, value);
+        input.dispatchEvent(event);
+      }
+    }, [prevValue, value]);
+    return /* @__PURE__ */ jsx21(
+      Primitive.input,
+      {
+        style: { display: "none" },
+        ...props,
+        ref: composedRefs,
+        defaultValue: value
+      }
+    );
+  }
+);
+SliderBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+  const nextValues = [...prevValues];
+  nextValues[atIndex] = nextValue;
+  return nextValues.sort((a, b) => a - b);
+}
+function convertValueToPercentage(value, min, max) {
+  const maxSteps = max - min;
+  const percentPerStep = 100 / maxSteps;
+  const percentage = percentPerStep * (value - min);
+  return clamp(percentage, [0, 100]);
+}
+function getLabel(index, totalValues) {
+  if (totalValues > 2) {
+    return `Value ${index + 1} of ${totalValues}`;
+  } else if (totalValues === 2) {
+    return ["Minimum", "Maximum"][index];
+  } else {
+    return void 0;
+  }
+}
+function getClosestValueIndex(values, nextValue) {
+  if (values.length === 1) return 0;
+  const distances = values.map((value) => Math.abs(value - nextValue));
+  const closestDistance = Math.min(...distances);
+  return distances.indexOf(closestDistance);
+}
+function getThumbInBoundsOffset(width, left, direction) {
+  const halfWidth = width / 2;
+  const halfPercent = 50;
+  const offset = linearScale([0, halfPercent], [0, halfWidth]);
+  return (halfWidth - offset(left) * direction) * direction;
+}
+function getStepsBetweenValues(values) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values);
+    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+    return actualMinStepsBetweenValues >= minStepsBetweenValues;
+  }
+  return true;
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function getDecimalCount(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+function roundValue(value, decimalCount) {
+  const rounder = Math.pow(10, decimalCount);
+  return Math.round(value * rounder) / rounder;
+}
+var Root5 = Slider;
+var Track = SliderTrack;
+var Range = SliderRange;
+var Thumb2 = SliderThumb;
+
+// ../ui/src/lib/utils.ts
+import { clsx as clsx2 } from "clsx";
+import { twMerge as twMerge2 } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge2(clsx2(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
+}) {
+  const _values = React12.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxs11(
+    Root5,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn2(
+        "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,
+      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"
+            ),
+            children: /* @__PURE__ */ jsx23(
+              Range,
+              {
+                "data-slot": "slider-range",
+                className: cn2("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx23(
+          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"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/CreditCardTab/Points/PointsSelector.tsx
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var PointsSelector = (props) => {
+  const { isSelected, onSelect, children } = props;
+  const { balance } = useSlapiBalance();
+  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { appProps, staticConfig } = useStaticConfig();
+  const min = 0;
+  const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, balance?.availablePoints ?? 0);
+  const step = 10;
+  const [splitTokens, setSplitTokens] = useState8(0);
+  const splitAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, staticConfig.pointsConversionRatio);
+  const handleCommit = (value) => {
+    setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
+  };
+  return /* @__PURE__ */ jsxs12(
+    "button",
+    {
+      onClick: onSelect,
+      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
+        "border-primary": isSelected
+      }),
+      children: [
+        /* @__PURE__ */ jsxs12("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
+          /* @__PURE__ */ jsx24(
+            "div",
+            {
+              className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
+                "bg-primary": isSelected
+              }),
+              children: /* @__PURE__ */ jsx24("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx24("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx24("div", { className: "flex h-full w-full items-center justify-between gap-3 px-3", children })
+        ] }),
+        isSelected && /* @__PURE__ */ jsx24("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
+            /* @__PURE__ */ jsx24(Input, { readOnly: true, value: splitTokens, className: "bg-white text-center font-medium" }),
+            /* @__PURE__ */ jsx24("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
+          ] }),
+          /* @__PURE__ */ jsx24("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ jsx24(
+            Slider2,
+            {
+              value: [splitTokens],
+              onValueCommit: ([v]) => handleCommit(v),
+              onValueChange: ([v]) => setSplitTokens(v),
+              min,
+              max,
+              step
+            }
+          ) }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
+            /* @__PURE__ */ jsx24(
+              Input,
+              {
+                readOnly: true,
+                value: formatUSD(splitAmount + getTransactionFee(splitAmount, appProps.transactionFeePercentage)),
+                className: "bg-white text-center font-medium"
+              }
+            ),
+            /* @__PURE__ */ jsx24("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+};
+
+// src/components/CreditCardTab/Points/SplitBlock.tsx
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+var SplitBlock = (props) => {
+  const { isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
-  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { spreePayConfig } = useSpreePayConfig();
+  const [address, setAddress] = useState9(null);
+  const { staticConfig } = useStaticConfig();
+  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const initWallet = useCallback4(async (pointsChain) => {
+    if (!pointsChain) {
+      return;
+    }
+    try {
+      const res = await getAirWallet({
+        mocaChain: pointsChain.mocaChain,
+        partnerId: pointsChain.partnerId
+      });
+      setAddress(res.address ?? null);
+    } catch (e) {
+      console.error("Air Wallet init failed:", e);
+    }
+  }, []);
+  useEffect6(() => {
+    initWallet(spreePayConfig?.pointsChain);
+  }, [spreePayConfig, initWallet]);
+  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { onSelect: () => onSelect("air"), isSelected, children: [
+    /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-sm font-medium text-black", children: [
+      /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: "Available" }),
+      " ",
+      formatPoints(balance.availablePoints, pointsTitle),
+      " ",
+      /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+    ] }) : null }),
+    isBalanceLoading ? /* @__PURE__ */ jsx25("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-black", children: "No points available" }),
+    address && /* @__PURE__ */ jsx25("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
+  ] }) });
+};
+
+// src/components/CreditCardTab/Points/Points.tsx
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var Points = () => {
+  const [usePoints, setUsePoints] = useState10(false);
+  const [selectedPointsType, setSelectedPointsType] = useState10(null);
+  const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
+  const handleTogglePoints = (enabled) => {
+    setUsePoints(enabled);
+    if (!enabled) {
+      setSelectedPointsType(null);
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
+    }
+  };
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsx26(PointsSwitch, { value: usePoints, onChange: handleTogglePoints }),
+    usePoints && /* @__PURE__ */ jsx26(SplitBlock, { isSelected: selectedPointsType === "air", onSelect: setSelectedPointsType })
+  ] });
+};
+
+// src/components/CreditCardTab/CreditCardTab.tsx
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+var CreditCardTab = () => {
+  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { register } = useSpreePayRegister();
-  const { env } = useSpreePayEnv();
-  const handlePay = useCallback2(
+  const { mutateCards } = useCards();
+  const { cardPayment } = useCardPayment();
+  const { splitPayment } = useSplitCardPayments();
+  const handlePay = useCallback5(
     async (data) => {
       try {
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
-          const res = await cardPayment({
-            ...data,
-            card: selectedPaymentMethod.method,
-            redirect3dsURI: env.redirect3dsURI
-          });
+          let res = null;
+          if (selectedPaymentMethod.splitAmount && selectedPaymentMethod.splitAmount > 0) {
+            res = await splitPayment({ ...data, points: selectedPaymentMethod.splitAmount });
+          } else {
+            res = await cardPayment(data);
+          }
           if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
             return Promise.resolve(res);
           }
@@ -997,55 +2380,25 @@ var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
         return Promise.reject(new PaymentError("Unsupported payment method", "FAILED" /* FAILED */));
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+      } finally {
+        setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        mutateCards();
       }
     },
-    [env.redirect3dsURI, selectedPaymentMethod]
+    [mutateCards, selectedPaymentMethod, setSelectedPaymentMethod, cardPayment, splitPayment]
   );
-  useEffect2(() => {
+  useEffect7(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ jsxs10("div", { children: [
-    /* @__PURE__ */ jsx15("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx15(CreditCard, {}) }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: [
-      /* @__PURE__ */ jsx15(
-        PointsSwitch,
-        {
-          disabled: true,
-          value: usePoints,
-          onChange: setUsePoints,
-          pointsTitle,
-          pointsConversionRatio
-        }
-      ),
-      usePoints && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs10(PointsSelector, { onSelect: () => setSelectedPointsType("slapi"), isSelected: selectedPointsType === "slapi", children: [
-          /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "from [Brand] Balance" }) }),
-          isBalanceLoading ? /* @__PURE__ */ jsx15("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "No points available" }),
-          balance?.availablePoints ? /* @__PURE__ */ jsxs10("p", { className: "text-sm font-medium text-black", children: [
-            formatPoints(balance.availablePoints, pointsTitle),
-            " ",
-            /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ jsxs10(
-          PointsSelector,
-          {
-            onSelect: () => setSelectedPointsType("wallet"),
-            isSelected: selectedPointsType === "wallet",
-            children: [
-              /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium text-black", children: "from Crypto Wallet" }) }),
-              /* @__PURE__ */ jsx15("button", { className: "hover:bg-primary -mr-2 h-[34px] rounded-sm border-1 border-black px-3 text-sm font-medium hover:text-white", children: "Connect a Wallet" })
-            ]
-          }
-        )
-      ] })
-    ] })
+  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: "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 { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import NiceModal5 from "@ebay/nice-modal-react";
+import NiceModal6 from "@ebay/nice-modal-react";
 import { RainbowKitProvider, connectorsForWallets } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { injectedWallet, walletConnectWallet } from "@rainbow-me/rainbowkit/wallets";
@@ -1053,7 +2406,7 @@ import { WagmiProvider, createConfig, http as http2 } from "wagmi";
 import { base } from "wagmi/chains";
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-import { useCallback as useCallback3, useEffect as useEffect4 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9 } from "react";
 import { useAccount as useAccount3 } from "wagmi";
 
 // ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
@@ -1105,11 +2458,11 @@ async function waitForTransactionReceipt(config2, parameters) {
 }
 
 // ../../node_modules/@wagmi/core/dist/esm/exports/index.js
-import { custom, http, webSocket } from "viem";
+import { custom as custom2, http, webSocket } from "viem";
 
 // src/hooks/useCryptoPayment.ts
-import { erc20Abi } from "viem";
-import { useConfig as useConfig2, useWalletClient } from "wagmi";
+import { erc20Abi as erc20Abi2 } from "viem";
+import { useConfig, useWalletClient } from "wagmi";
 
 // src/config/baseTokens.ts
 var BASE_CHAIN_ID = 8453;
@@ -1153,7 +2506,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
 var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
 var useCryptoPayment = () => {
   const { data: walletClient } = useWalletClient();
-  const config2 = useConfig2();
+  const config2 = useConfig();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
@@ -1171,14 +2524,14 @@ var useCryptoPayment = () => {
       }
       const allowance = await readContract(config2, {
         address: tokenAddress,
-        abi: erc20Abi,
+        abi: erc20Abi2,
         functionName: "allowance",
         args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
       });
       if (allowance <= 0n) {
         const result = await walletClient.writeContract({
           address: tokenAddress,
-          abi: erc20Abi,
+          abi: erc20Abi2,
           functionName: "approve",
           args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
         });
@@ -1222,13 +2575,13 @@ var useCryptoPayment = () => {
 
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
 import { ConnectButton as RainbowButton } from "@rainbow-me/rainbowkit";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var ConnectButton = () => {
-  return /* @__PURE__ */ jsx16(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
+  return /* @__PURE__ */ jsx28(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
     if (!mounted) return null;
-    return /* @__PURE__ */ jsx16(Fragment3, { children: (() => {
+    return /* @__PURE__ */ jsx28(Fragment4, { children: (() => {
       if (!mounted || !account || !chain) {
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx28(
           "button",
           {
             className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
@@ -1238,7 +2591,7 @@ var ConnectButton = () => {
         );
       }
       if (chain.unsupported) {
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx28(
           "button",
           {
             className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
@@ -1247,13 +2600,13 @@ var ConnectButton = () => {
           }
         );
       }
-      return /* @__PURE__ */ jsxs11(
+      return /* @__PURE__ */ jsxs16(
         "button",
         {
           className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium text-black",
           onClick: openAccountModal,
           children: [
-            chain.hasIcon && /* @__PURE__ */ jsx16("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ jsx16("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
+            chain.hasIcon && /* @__PURE__ */ jsx28("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ jsx28("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
             account.displayName
           ]
         }
@@ -1263,29 +2616,29 @@ var ConnectButton = () => {
 };
 
 // src/config/symbolLogos.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-var MOCA_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ jsx17("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
-  /* @__PURE__ */ jsx17(
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+var MOCA_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsx29("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
+  /* @__PURE__ */ jsx29(
     "path",
     {
       fill: "#fff",
       d: "M16.06 6.65c.3 0 .59.16.74.43l6.06 10.5a.85.85 0 1 1-1.47.84L16.06 9.2l-1.51 2.62-.02.03-3.8 6.57a.85.85 0 0 1-1.47-.84l3.57-6.18-1.27-2.2-5.32 9.22a.85.85 0 0 1-1.48-.84l6.07-10.5.06-.1a.85.85 0 0 1 1.4.1l1.52 2.62 1.52-2.62.06-.1c.16-.2.4-.33.67-.33Z"
     }
   ),
-  /* @__PURE__ */ jsx17("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
+  /* @__PURE__ */ jsx29("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
 ] });
-var USDC_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ jsxs12("g", { clipPath: "url(#clip0_528_9163)", children: [
-    /* @__PURE__ */ jsx17("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
-    /* @__PURE__ */ jsx17(
+var USDC_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsxs17("g", { clipPath: "url(#clip0_528_9163)", children: [
+    /* @__PURE__ */ jsx29("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
+    /* @__PURE__ */ jsx29(
       "path",
       {
         fill: "#fff",
         d: "M17.85 16.22c0-2.04-1.23-2.74-3.68-3.04-1.75-.23-2.1-.7-2.1-1.51 0-.82.59-1.34 1.75-1.34 1.05 0 1.64.35 1.93 1.22.06.18.23.3.4.3h.94a.4.4 0 0 0 .41-.42v-.05a2.91 2.91 0 0 0-2.63-2.4v-1.4c0-.23-.17-.4-.46-.46h-.88c-.23 0-.4.17-.46.46v1.35c-1.75.23-2.86 1.4-2.86 2.85 0 1.93 1.16 2.69 3.61 2.98 1.64.29 2.16.64 2.16 1.57 0 .94-.81 1.58-1.92 1.58-1.52 0-2.04-.64-2.22-1.52-.06-.23-.23-.35-.4-.35h-1a.4.4 0 0 0-.4.41v.06c.23 1.46 1.16 2.5 3.08 2.8v1.4c0 .23.18.4.47.47h.88c.23 0 .4-.18.46-.47v-1.4c1.75-.3 2.92-1.52 2.92-3.1Z"
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx29(
       "path",
       {
         fill: "#fff",
@@ -1293,11 +2646,11 @@ var USDC_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/sv
       }
     )
   ] }),
-  /* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ jsx17("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
+  /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ jsx29("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
 ] });
-var USDT_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ jsx17("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
-  /* @__PURE__ */ jsx17(
+var USDT_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsx29("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
+  /* @__PURE__ */ jsx29(
     "path",
     {
       fill: "#fff",
@@ -1305,23 +2658,23 @@ var USDT_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/sv
     }
   )
 ] });
-var WETH_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
-  /* @__PURE__ */ jsxs12("g", { clipPath: "url(#clip0_528_9173)", children: [
-    /* @__PURE__ */ jsx17(
+var WETH_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
+  /* @__PURE__ */ jsxs17("g", { clipPath: "url(#clip0_528_9173)", children: [
+    /* @__PURE__ */ jsx29(
       "path",
       {
         fill: "#000",
         d: "M17.14 20.57c0 .95-1.31 2.01-3.39 2.4h-2.59c-4.65 0-8.42-1.07-8.42-2.4 0-1.32 3.77-2.4 8.42-2.4s5.98 1.08 5.98 2.4Z"
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx29(
       "path",
       {
         fill: "#F61F7D",
         d: "M23.31 11c0 5.86-5.18 11.63-11.07 11.63-5.9 0-11.9-6.17-11.9-12.03C.34 4.75 5.12 0 11.01 0s12.3 5.15 12.3 11Z"
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx29(
       "path",
       {
         fill: "#000",
@@ -1330,8 +2683,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/sv
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ jsx17("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx29("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
+    /* @__PURE__ */ jsx29(
       "path",
       {
         fill: "#000",
@@ -1340,8 +2693,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/sv
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ jsx17("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx29("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx29(
       "path",
       {
         fill: "#000",
@@ -1349,7 +2702,7 @@ var WETH_SVG = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/sv
       }
     )
   ] }),
-  /* @__PURE__ */ jsx17("defs", { children: /* @__PURE__ */ jsx17("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx17("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+  /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx29("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
 ] });
 var symbolLogos = {
   MOCA: MOCA_SVG,
@@ -1362,34 +2715,34 @@ function getSymbolLogo(symbol) {
 }
 
 // src/components/CryptoTab/Crypto/Logos.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var Logos = () => {
-  return /* @__PURE__ */ jsxs13("div", { className: "flex", children: [
-    /* @__PURE__ */ jsx18("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
-    /* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
-    /* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
-    /* @__PURE__ */ jsx18("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
+  return /* @__PURE__ */ jsxs18("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx30("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
+    /* @__PURE__ */ jsx30("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
+    /* @__PURE__ */ jsx30("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
+    /* @__PURE__ */ jsx30("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-import NiceModal4 from "@ebay/nice-modal-react";
+import NiceModal5 from "@ebay/nice-modal-react";
 
 // src/modals/CryptoSelectModal.tsx
-import NiceModal3, { useModal as useModal2 } from "@ebay/nice-modal-react";
+import NiceModal4, { useModal as useModal2 } from "@ebay/nice-modal-react";
 
 // src/hooks/useBaseERC20Token.ts
-import * as React2 from "react";
-import { erc20Abi as erc20Abi2, formatUnits, getAddress } from "viem";
+import * as React13 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] = React2.useState([]);
-  const [isLoading, setLoading] = React2.useState(false);
-  const [error, setError] = React2.useState(null);
-  React2.useEffect(() => {
+  const [rows, setRows] = React13.useState([]);
+  const [isLoading, setLoading] = React13.useState(false);
+  const [error, setError] = React13.useState(null);
+  React13.useEffect(() => {
     let cancelled = false;
     async function run() {
       const client = baseClient ?? defaultClient;
@@ -1411,7 +2764,7 @@ function useBaseERC20Token() {
           allowFailure: true,
           contracts: normalizedTokens.map((t) => ({
             address: t.address,
-            abi: erc20Abi2,
+            abi: erc20Abi3,
             functionName: "balanceOf",
             args: [address]
           }))
@@ -1463,8 +2816,8 @@ function useBaseNativeToken() {
 }
 
 // src/modals/CryptoSelectModal.tsx
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
-var CryptoSelectModal = NiceModal3.create(() => {
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+var CryptoSelectModal = NiceModal4.create(() => {
   const modal = useModal2();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
   const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
@@ -1473,13 +2826,13 @@ var CryptoSelectModal = NiceModal3.create(() => {
     modal.remove();
     setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
   };
-  return /* @__PURE__ */ jsxs14(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
-    /* @__PURE__ */ jsx19(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-    /* @__PURE__ */ jsxs14(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
-      /* @__PURE__ */ jsx19("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ jsx19("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx19("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
-        /* @__PURE__ */ jsx19(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
-        /* @__PURE__ */ jsx19("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs19(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
+    /* @__PURE__ */ jsx31(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
+    /* @__PURE__ */ jsxs19(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
+      /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsx31("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx31("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
+        /* @__PURE__ */ jsx31(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
+        /* @__PURE__ */ jsx31("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx31(
           "path",
           {
             fill: "#000",
@@ -1487,19 +2840,19 @@ var CryptoSelectModal = NiceModal3.create(() => {
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
-        /* @__PURE__ */ jsx19("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
-        (error || nativeError) && /* @__PURE__ */ jsx19("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex w-full flex-col gap-1", children: [
-          isLoadingNative && /* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-          nativeBalance && /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
+        /* @__PURE__ */ jsx31("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
+        (error || nativeError) && /* @__PURE__ */ jsx31("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__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+          nativeBalance && /* @__PURE__ */ jsxs19(
             "button",
             {
               className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
               onClick: () => handleSelect(nativeBalance),
               children: [
-                /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+                  nativeBalance.logoURI && /* @__PURE__ */ jsx31(
                     "img",
                     {
                       className: "h-8 w-8 shrink-0",
@@ -1507,31 +2860,31 @@ var CryptoSelectModal = NiceModal3.create(() => {
                       alt: `${nativeBalance.symbol} logo`
                     }
                   ),
-                  /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                 ] }),
-                /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
               ]
             },
             nativeBalance.symbol
           ),
-          isLoading && /* @__PURE__ */ jsxs14(Fragment4, { children: [
-            /* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx19("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+          isLoading && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+            /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
           erc20Balances.map((coin) => {
             const Icon = getSymbolLogo(coin.symbol);
-            return /* @__PURE__ */ jsxs14(
+            return /* @__PURE__ */ jsxs19(
               "button",
               {
                 className: "flex 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",
                 onClick: () => handleSelect(coin),
                 children: [
-                  /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
                     Boolean(Icon) && Icon,
-                    /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: coin.symbol })
+                    /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: coin.symbol })
                   ] }),
-                  /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium", children: coin.formatted })
+                  /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: coin.formatted })
                 ]
               },
               coin.symbol
@@ -1545,51 +2898,51 @@ var CryptoSelectModal = NiceModal3.create(() => {
 CryptoSelectModal.displayName = "CryptoSelectModal";
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 var SelectCoinButton = () => {
   const openModal = () => {
-    NiceModal4.show(CryptoSelectModal);
+    NiceModal5.show(CryptoSelectModal);
   };
-  return /* @__PURE__ */ jsxs15("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ jsx20("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx20("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
-    /* @__PURE__ */ jsxs15("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
-      /* @__PURE__ */ jsx20("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx20("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
-      /* @__PURE__ */ jsx20("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx20("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
+  return /* @__PURE__ */ jsxs20("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ jsx32("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx32("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__ */ jsx32("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx32("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
+      /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx32("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var SelectedCoin = (props) => {
   const { coin, balance, logoURI } = props;
   const Icon = getSymbolLogo(coin);
-  return /* @__PURE__ */ jsxs16("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ jsx21("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx21("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx21("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
-    /* @__PURE__ */ jsxs16("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__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ jsx33("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx33("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx33("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__ */ jsx21("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-        /* @__PURE__ */ jsx21("p", { className: "font-semibold text-black", children: coin }),
-        /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
+        !Icon && logoURI && /* @__PURE__ */ jsx33("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        /* @__PURE__ */ jsx33("p", { className: "font-semibold text-black", children: coin }),
+        /* @__PURE__ */ jsx33("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
       ] }),
-      /* @__PURE__ */ jsxs16("p", { className: "text-xs font-medium text-black/50", children: [
+      /* @__PURE__ */ jsxs21("p", { className: "text-xs font-medium text-black/50", children: [
         "Wallet balance ",
-        /* @__PURE__ */ jsx21("span", { className: "text-black", children: balance })
+        /* @__PURE__ */ jsx33("span", { className: "text-black", children: balance })
       ] })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var Crypto = () => {
   const { address } = useAccount3();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { cryptoPayment } = useCryptoPayment();
   const isWalletConnected = Boolean(address);
   const { register } = useSpreePayRegister();
-  const handlePay = useCallback3(
+  const handlePay = useCallback6(
     async (data) => {
       try {
         const res = await cryptoPayment(data);
@@ -1603,17 +2956,17 @@ var Crypto = () => {
     },
     [cryptoPayment]
   );
-  useEffect4(() => {
+  useEffect9(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx22("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
-      /* @__PURE__ */ jsx22(ConnectButton, {})
+  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__ */ jsx34("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
+      /* @__PURE__ */ jsx34(ConnectButton, {})
     ] }),
-    !isWalletConnected && /* @__PURE__ */ jsx22(Logos, {}),
-    isWalletConnected && /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-1", children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx22(
+    !isWalletConnected && /* @__PURE__ */ jsx34(Logos, {}),
+    isWalletConnected && /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-1", children: [
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx34(
         SelectedCoin,
         {
           coin: selectedPaymentMethod.method.symbol,
@@ -1621,13 +2974,13 @@ var Crypto = () => {
           logoURI: selectedPaymentMethod.method.logoURI
         }
       ),
-      /* @__PURE__ */ jsx22(SelectCoinButton, {})
+      /* @__PURE__ */ jsx34(SelectCoinButton, {})
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
 var connectors = connectorsForWallets(
   [
@@ -1645,29 +2998,30 @@ var config = createConfig({
   ssr: true
 });
 var CryptoWrapper = () => {
-  return /* @__PURE__ */ jsx23(WagmiProvider, { config, children: /* @__PURE__ */ jsx23(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx23(RainbowKitProvider, { children: /* @__PURE__ */ jsx23(NiceModal5.Provider, { children: /* @__PURE__ */ jsx23(Crypto, {}) }) }) }) });
+  return /* @__PURE__ */ jsx35(WagmiProvider, { config, children: /* @__PURE__ */ jsx35(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx35(RainbowKitProvider, { children: /* @__PURE__ */ jsx35(NiceModal6.Provider, { children: /* @__PURE__ */ jsx35(Crypto, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var CryptoTab = (props) => {
-  const { pointsTitle, pointsConversionRatio } = props;
-  return /* @__PURE__ */ jsxs18("div", { children: [
-    /* @__PURE__ */ jsx24("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx24(CryptoWrapper, {}) }),
-    /* @__PURE__ */ jsx24("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx24(PointsSwitch, { disabled: true, pointsTitle, pointsConversionRatio }) })
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+var CryptoTab = () => {
+  return /* @__PURE__ */ jsxs23("div", { children: [
+    /* @__PURE__ */ jsx36("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx36(CryptoWrapper, {}) }),
+    /* @__PURE__ */ jsx36("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx36(PointsSwitch, { disabled: true }) })
   ] });
 };
 
 // src/components/TabButtons.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
-var TabButton = ({ isActive, children, onClick }) => {
-  return /* @__PURE__ */ jsx25(
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
+  return /* @__PURE__ */ jsx37(
     "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",
-        { "opacity-50": !isActive },
+        { "opacity-50": !isActive || isDisabled },
+        { "cursor-not-allowed": isDisabled },
         { "bg-primary/7 border-primary text-primary": isActive }
       ),
       children
@@ -1676,84 +3030,99 @@ var TabButton = ({ isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
+  const { spreePayConfig } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
-  return /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsxs19(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
-      /* @__PURE__ */ jsx25("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx25(
-        "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__ */ jsx25("p", { className: "text-sm font-medium", children: "Card" })
-    ] }),
-    /* @__PURE__ */ jsxs19(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
-      /* @__PURE__ */ jsxs19("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
-        /* @__PURE__ */ jsx25(
-          "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__ */ jsx25(
-          "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__ */ jsx25("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
-      ] }),
-      /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium", children: "Crypto" })
-    ] })
+  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__ */ jsx37("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx37(
+            "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__ */ jsx37("p", { className: "text-sm font-medium", children: "Card" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs24(
+      TabButton,
+      {
+        isDisabled: !spreePayConfig?.creditCard.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__ */ jsx37(
+              "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__ */ jsx37(
+              "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__ */ jsx37("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+          ] }),
+          /* @__PURE__ */ jsx37("p", { className: "text-sm font-medium", children: "Crypto" })
+        ]
+      }
+    )
   ] });
 };
 
 // src/components/Tabs.tsx
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
-var Tabs = ({ config: config2 }) => {
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+var Tabs = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { pointsConversionRatio, pointsTitle } = config2;
-  return /* @__PURE__ */ jsxs20("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
-    /* @__PURE__ */ jsxs20("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__ */ jsx26("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
-      /* @__PURE__ */ jsx26(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+  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__ */ jsx38("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
+      /* @__PURE__ */ jsx38(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx26(CreditCardTab, { pointsTitle, pointsConversionRatio }),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx26(CryptoTab, { pointsTitle, pointsConversionRatio })
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx38(CreditCardTab, {}),
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx38(CryptoTab, {})
   ] });
 };
 
 // src/SpreePayContent.tsx
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
-var SpreePayContent = (props) => {
-  const { isLoggedIn, config: config2, amount, onProcess, isProcessing } = props;
-  return /* @__PURE__ */ jsxs21("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx27(Tabs, { config: config2 }),
-    /* @__PURE__ */ jsx27(CheckoutButton, { isLoggedIn, isProcessing, onCheckout: onProcess, amount }),
-    /* @__PURE__ */ jsx27(SpreeLegal, {})
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+var SpreePayContent = ({ isLoggedIn }) => {
+  return /* @__PURE__ */ jsxs26("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx39(Tabs, {}),
+    /* @__PURE__ */ jsx39(CheckoutButton, { isLoggedIn }),
+    /* @__PURE__ */ jsx39(SpreeLegal, {})
   ] });
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef2, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 function useKeycloakSSO(config2) {
   const { url, realm, clientId, ssoPageURI, enabled } = config2;
-  const initRef = useRef2(false);
-  const kcRef = useRef2(null);
-  const refreshTimerRef = useRef2(null);
-  const [error, setError] = useState6(null);
-  const [isChecking, setIsChecking] = useState6(enabled);
-  const [accessToken, setAccessToken] = useState6(null);
-  const scheduleRefresh = useCallback4(() => {
+  const initRef = useRef6(false);
+  const kcRef = useRef6(null);
+  const refreshTimerRef = useRef6(null);
+  const [error, setError] = useState12(null);
+  const [isChecking, setIsChecking] = useState12(enabled);
+  const [accessToken, setAccessToken] = useState12(null);
+  const scheduleRefresh = useCallback7(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -1774,7 +3143,7 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  useEffect5(() => {
+  useEffect10(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     setIsChecking(true);
@@ -1809,94 +3178,43 @@ function useKeycloakSSO(config2) {
 }
 
 // src/SpreePay.tsx
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
-var CONFIG = {
-  dev: {
-    bookit: {
-      slapiUrl: "https://slapi.dev.superlogic.com",
-      keyklockUrl: "https://auth.dev.join.bookit.com",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    },
-    moca: {
-      slapiUrl: "https://slapi.dev.air.shop",
-      keyklockUrl: "https://login.dev.air.shop",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    }
-  },
-  stg: {
-    bookit: {
-      slapiUrl: "https://slapi.stg.superlogic.com",
-      keyklockUrl: "https://auth.stg.join.bookit.com",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    },
-    moca: {
-      slapiUrl: "https://slapi.stg.air.shop",
-      keyklockUrl: "https://login.stg.air.shop",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    }
-  },
-  prod: {
-    bookit: {
-      slapiUrl: "https://slapi.superlogic.com",
-      keyklockUrl: "https://auth.join.bookit.com",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    },
-    moca: {
-      slapiUrl: "https://slapi.air.shop",
-      keyklockUrl: "https://login.air.shop",
-      keyklockClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
-    }
-  }
-};
-var SpreePay = ({ className, ...rest }) => {
-  const rootRef = useRef3(null);
-  const [portalEl, setPortalEl] = useState7(null);
-  useLayoutEffect(() => {
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+var SpreePayInner = () => {
+  const rootRef = useRef7(null);
+  const [portalEl, setPortalEl] = useState13(null);
+  useLayoutEffect3(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
   const { env } = useSpreePayEnv();
-  const environment = env?.environment || "dev";
+  const { staticConfig, appProps } = useStaticConfig();
   const tenantId = env?.tenantId || "bookit";
-  const config2 = CONFIG[environment]?.[tenantId];
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
-    url: config2.keyklockUrl,
-    clientId: config2.keyklockClientId,
+    url: staticConfig.keyklockUrl,
+    clientId: staticConfig.keyklockClientId,
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
-  const slapiFetcher = useMemo2(() => {
+  const slapiFetcher = useMemo8(() => {
     if (accessToken || env.accessToken) {
       return registerApi({
         accessToken: env.accessToken || accessToken,
         tenantId,
-        baseUrl: config2.slapiUrl
+        baseUrl: staticConfig.slapiUrl
       });
     }
-  }, [env.accessToken, config2, tenantId, accessToken]);
+  }, [env.accessToken, staticConfig, tenantId, accessToken]);
   const getContent = () => {
     if (isChecking) {
-      return /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ jsx28("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx28("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx28(SpreeLegal, {})
+      return /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ jsx40("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ jsx40("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ jsx40(SpreeLegal, {})
       ] });
     }
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx40(
       SWRConfig,
       {
         value: {
@@ -1905,20 +3223,23 @@ var SpreePay = ({ className, ...rest }) => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken), config: config2, ...rest }) }) })
+        children: /* @__PURE__ */ jsx40(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx40(NiceModal7.Provider, { children: /* @__PURE__ */ jsx40(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
       }
     );
   };
-  return /* @__PURE__ */ jsxs22("div", { ref: rootRef, className: cn("sl-spreepay", className), children: [
-    /* @__PURE__ */ jsx28("div", { className: "sl-spreepay__portal" }),
+  return /* @__PURE__ */ jsxs27("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
+    /* @__PURE__ */ jsx40("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
+var SpreePay = (props) => {
+  return /* @__PURE__ */ jsx40(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx40(SpreePayInner, {}) });
+};
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect11 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect6(() => {
+  useEffect11(() => {
     if (window?.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }