@superlogic/spree-pay 0.1.22 → 0.1.24

package/build/index.cjs

@@ -141,48 +141,36 @@ var CONFIG = {
     bookit: {
       slapiUrl: "https://slapi.dev.superlogic.com",
       keycloakUrl: "https://auth.dev.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
     bookit: {
       slapiUrl: "https://slapi.stg.superlogic.com",
       keycloakUrl: "https://auth.stg.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
     bookit: {
       slapiUrl: "https://slapi.superlogic.com",
       keycloakUrl: "https://auth.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -210,7 +198,20 @@ var useStaticConfig = () => {
 var import_swr = __toESM(require("swr"), 1);
 var useSpreePayConfig = () => {
   const { data, isLoading } = (0, import_swr.default)("/v1/tenants/configs/spree-pay");
-  return { spreePayConfig: data, configIsLoading: isLoading };
+  return {
+    spreePayConfig: data ? {
+      ...data,
+      rainbowProjectId: data.rainbowProjectId ?? "3fdcd5ff50cb84917cd05e40146975d8",
+      rainbowAppName: data.rainbowAppName ?? "AIR Shop",
+      pointsTitle: data.pointsTitle ?? "AIR SP",
+      pointsConversionRatio: data.pointsConversionRatio ?? 0.01,
+      crypto: {
+        ...data.crypto,
+        oneInchAggregationRouter: data.crypto?.oneInchAggregationRouter || "0x111111125421ca6dc452d289314280a0f8842a65"
+      }
+    } : null,
+    configIsLoading: isLoading
+  };
 };
 
 // src/lib/utils.ts
@@ -277,7 +278,7 @@ var formatUSD = (amount, currency = "USD") => {
   }).format(amount);
   return formattedAmount;
 };
-var formatPoints = (amount, pointsTitle = "Pts") => {
+var formatPoints = (amount, pointsTitle = "") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
     notation: "compact",
     style: "decimal",
@@ -297,11 +298,11 @@ var formatCoin = (amount, currency = "USDC") => {
 
 // src/utils/split.ts
 var getSplitAmount = (amount, splitTokens, pointsConversionRatio) => {
-  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !Number.isFinite(pointsConversionRatio)) {
+  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !pointsConversionRatio || !Number.isFinite(pointsConversionRatio)) {
     return amount;
   }
   if (pointsConversionRatio <= 0) return amount;
-  const usdCoveredByPoints = splitTokens / pointsConversionRatio;
+  const usdCoveredByPoints = splitTokens * pointsConversionRatio;
   const remaining = amount - usdCoveredByPoints;
   return Math.max(0, parseFloat(remaining.toFixed(2)));
 };
@@ -319,13 +320,12 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
 // src/components/CheckoutButton.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CheckoutButton = ({ isLoggedIn }) => {
-  const { staticConfig, appProps } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
-  const { pointsTitle, pointsConversionRatio } = staticConfig;
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const { splitAmount, type, method } = selectedPaymentMethod;
-  const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, pointsConversionRatio);
+  const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
   const isDisabled = !amount || !method && usdAmount !== 0 || !!isProcessing || isInternalProcessing || !isLoggedIn;
   const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
   const isCrypto = type === "CRYPTO" /* CRYPTO */;
@@ -335,13 +335,13 @@ var CheckoutButton = ({ isLoggedIn }) => {
     }
     if (isCC && amount) {
       if (splitAmount && usdAmount) {
-        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       if (usdAmount) {
         return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
       }
       if (splitAmount) {
-        return `Pay ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       return "Checkout";
     }
@@ -879,7 +879,7 @@ var usePointsPayment = () => {
 var useSplitCardPayments = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const splitPayment = async (params) => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
@@ -894,7 +894,7 @@ var useSplitCardPayments = () => {
     } else {
       cardId = card.id;
     }
-    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, staticConfig.pointsConversionRatio);
+    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, spreePayConfig?.pointsConversionRatio);
     const transactionFee = getTransactionFee(usdAmount, appProps.transactionFeePercentage);
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
@@ -1303,24 +1303,35 @@ function Switch({ className, ...props }) {
 // src/components/common/PointsSwitch.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var PointsSwitch = (props) => {
-  const { disabled = false, value, onChange } = props;
-  const { staticConfig } = useStaticConfig();
-  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { disabled = false, value, onChange, message } = props;
+  const { spreePayConfig } = useSpreePayConfig();
   const { balance } = useSlapiBalance();
   const id = (0, import_react7.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-        "Use Points ",
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
-      ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
+          "Use Points ",
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
+        ] })
+      ] }),
+      balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+        formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+        " ",
+        !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio) })
+      ] }) : null
     ] }),
-    balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-      formatPoints(balance.availablePoints, pointsTitle),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
-    ] }) : null
+    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "path",
+        {
+          fill: "#000",
+          d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs font-medium text-black", children: message })
+    ] })
   ] });
 };
 
@@ -2324,12 +2335,15 @@ var PointsSelector = (props) => {
   const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
+  const { pointsConversionRatio } = spreePayConfig || {};
   const min = 0;
-  const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, balance?.availablePoints ?? 0);
+  const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (appProps.amount ?? 0) / pointsConversionRatio : 0;
+  const max = Math.min(maxByAmount, balance?.availablePoints ?? 0);
   const step = 10;
   const [splitTokens, setSplitTokens] = (0, import_react10.useState)(0);
-  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, staticConfig.pointsConversionRatio);
+  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, pointsConversionRatio);
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
@@ -2357,7 +2371,15 @@ var PointsSelector = (props) => {
         ] }),
         isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Input, { readOnly: true, value: Math.round(splitTokens), className: "bg-white text-center font-medium" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Input,
+              {
+                readOnly: true,
+                value: Math.round(splitTokens),
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -2366,6 +2388,7 @@ var PointsSelector = (props) => {
               value: [splitTokens],
               onValueCommit: ([v]) => handleCommit(v),
               onValueChange: ([v]) => setSplitTokens(v),
+              onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
               step
@@ -2377,7 +2400,8 @@ var PointsSelector = (props) => {
               {
                 readOnly: true,
                 value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium"
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
@@ -2396,8 +2420,7 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const [address, setAddress] = (0, import_react11.useState)(null);
   const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
-  const { staticConfig } = useStaticConfig();
-  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const initWallet = (0, import_react11.useCallback)(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2428,7 +2451,7 @@ var SplitBlock = (props) => {
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
     ] }) : null }),
     isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
     address && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
@@ -2450,7 +2473,15 @@ var Points = () => {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      PointsSwitch,
+      {
+        value: usePoints,
+        onChange: handleTogglePoints,
+        message: spreePayConfig?.creditCard.pointsInfoMessage,
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+      }
+    ),
     usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SplitBlock,
       {
@@ -2466,7 +2497,8 @@ var Points = () => {
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { staticConfig, appProps } = useStaticConfig();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { cardPayment } = useCardPayment();
@@ -2477,7 +2509,7 @@ var CreditCardTab = () => {
       try {
         let res = null;
         const pointsAmount = selectedPaymentMethod.splitAmount ?? 0;
-        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, staticConfig.pointsConversionRatio);
+        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
         if (usdAmount && pointsAmount) {
           res = await splitPayment({ ...data, points: pointsAmount });
         } else if (!usdAmount && pointsAmount) {
@@ -2504,7 +2536,7 @@ var CreditCardTab = () => {
       setSelectedPaymentMethod,
       cardPayment,
       splitPayment,
-      staticConfig.pointsConversionRatio
+      spreePayConfig
     ]
   );
   (0, import_react13.useEffect)(() => {
@@ -2623,15 +2655,18 @@ var BASE_TOKENS = [
 
 // src/hooks/payments/useCryptoPayment.ts
 var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
-var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
 var useCryptoPayment = () => {
   const { data: walletClient } = (0, import_wagmi.useWalletClient)();
+  const { spreePayConfig } = useSpreePayConfig();
   const config = (0, import_wagmi.useConfig)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
       throw new Error("Wallet not connected");
     }
+    if (!spreePayConfig) {
+      throw new Error("Spree Pay config not loaded");
+    }
     if (selectedPaymentMethod.type !== "CRYPTO" /* CRYPTO */ || !selectedPaymentMethod.method?.symbol) {
       throw new Error("Unsupported payment method");
     }
@@ -2646,14 +2681,14 @@ var useCryptoPayment = () => {
         address: tokenAddress,
         abi: import_viem4.erc20Abi,
         functionName: "allowance",
-        args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
+        args: [walletClient.account.address, spreePayConfig.crypto.oneInchAggregationRouter]
       });
       if (allowance <= 0n) {
         const result = await walletClient.writeContract({
           address: tokenAddress,
           abi: import_viem4.erc20Abi,
           functionName: "approve",
-          args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
+          args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
         });
         await waitForTransactionReceipt(config, {
           hash: result,
@@ -3218,8 +3253,8 @@ var CryptoWrapper = () => {
   const config = (0, import_react16.useMemo)(() => {
     if (!spreePayConfig) return null;
     return (0, import_rainbowkit2.getDefaultConfig)({
-      appName: spreePayConfig.rainbowAppName || "AIR Shop",
-      projectId: spreePayConfig.rainbowProjectId || "3fdcd5ff50cb84917cd05e40146975d8",
+      appName: spreePayConfig.rainbowAppName,
+      projectId: spreePayConfig.rainbowProjectId,
       chains: [import_chains.base],
       ssr: true
     });
@@ -3231,9 +3266,10 @@ var CryptoWrapper = () => {
 // src/components/CryptoTab/CryptoTab.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var CryptoTab = () => {
+  const { spreePayConfig } = useSpreePayConfig();
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 
@@ -3285,7 +3321,7 @@ var TabButtons = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       TabButton,
       {
-        isDisabled: !spreePayConfig?.creditCard.enabled,
+        isDisabled: !spreePayConfig?.crypto.enabled,
         onClick: handleChange("CRYPTO" /* CRYPTO */),
         isActive: value === "CRYPTO" /* CRYPTO */,
         children: [

package/build/index.css

@@ -344,6 +344,10 @@
   width: calc(var(--spacing) * 4);
   height: calc(var(--spacing) * 4);
 }
+.sl-spreepay .size-5 {
+  width: calc(var(--spacing) * 5);
+  height: calc(var(--spacing) * 5);
+}
 .sl-spreepay .size-6 {
   width: calc(var(--spacing) * 6);
   height: calc(var(--spacing) * 6);
@@ -507,6 +511,9 @@
 .sl-spreepay .items-center {
   align-items: center;
 }
+.sl-spreepay .items-start {
+  align-items: flex-start;
+}
 .sl-spreepay .justify-between {
   justify-content: space-between;
 }
@@ -591,6 +598,9 @@
   border-left-style: var(--tw-border-style) !important;
   border-left-width: 0px !important;
 }
+.sl-spreepay .border-\[\#006FD533\] {
+  border-color: #006FD533;
+}
 .sl-spreepay .border-\[\#F5F7FA\] {
   border-color: #F5F7FA;
 }
@@ -630,6 +640,9 @@
 .sl-spreepay .border-transparent {
   border-color: transparent;
 }
+.sl-spreepay .bg-\[\#006FD50D\] {
+  background-color: #006FD50D;
+}
 .sl-spreepay .bg-\[\#F5F7FA\] {
   background-color: #F5F7FA;
 }
@@ -699,6 +712,9 @@
 .sl-spreepay .p-1 {
   padding: calc(var(--spacing) * 1);
 }
+.sl-spreepay .p-1\.5 {
+  padding: calc(var(--spacing) * 1.5);
+}
 .sl-spreepay .p-6 {
   padding: calc(var(--spacing) * 6);
 }
@@ -1467,11 +1483,6 @@
     padding-inline: calc(var(--spacing) * 7);
   }
 }
-.sl-spreepay .md\:py-5 {
-  @media (width >= 48rem) {
-    padding-block: calc(var(--spacing) * 5);
-  }
-}
 .sl-spreepay .md\:py-6 {
   @media (width >= 48rem) {
     padding-block: calc(var(--spacing) * 6);

package/build/index.js

@@ -101,48 +101,36 @@ var CONFIG = {
     bookit: {
       slapiUrl: "https://slapi.dev.superlogic.com",
       keycloakUrl: "https://auth.dev.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
     bookit: {
       slapiUrl: "https://slapi.stg.superlogic.com",
       keycloakUrl: "https://auth.stg.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
     bookit: {
       slapiUrl: "https://slapi.superlogic.com",
       keycloakUrl: "https://auth.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -170,7 +158,20 @@ var useStaticConfig = () => {
 import useSWR from "swr";
 var useSpreePayConfig = () => {
   const { data, isLoading } = useSWR("/v1/tenants/configs/spree-pay");
-  return { spreePayConfig: data, configIsLoading: isLoading };
+  return {
+    spreePayConfig: data ? {
+      ...data,
+      rainbowProjectId: data.rainbowProjectId ?? "3fdcd5ff50cb84917cd05e40146975d8",
+      rainbowAppName: data.rainbowAppName ?? "AIR Shop",
+      pointsTitle: data.pointsTitle ?? "AIR SP",
+      pointsConversionRatio: data.pointsConversionRatio ?? 0.01,
+      crypto: {
+        ...data.crypto,
+        oneInchAggregationRouter: data.crypto?.oneInchAggregationRouter || "0x111111125421ca6dc452d289314280a0f8842a65"
+      }
+    } : null,
+    configIsLoading: isLoading
+  };
 };
 
 // src/lib/utils.ts
@@ -237,7 +238,7 @@ var formatUSD = (amount, currency = "USD") => {
   }).format(amount);
   return formattedAmount;
 };
-var formatPoints = (amount, pointsTitle = "Pts") => {
+var formatPoints = (amount, pointsTitle = "") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
     notation: "compact",
     style: "decimal",
@@ -257,11 +258,11 @@ var formatCoin = (amount, currency = "USDC") => {
 
 // src/utils/split.ts
 var getSplitAmount = (amount, splitTokens, pointsConversionRatio) => {
-  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !Number.isFinite(pointsConversionRatio)) {
+  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !pointsConversionRatio || !Number.isFinite(pointsConversionRatio)) {
     return amount;
   }
   if (pointsConversionRatio <= 0) return amount;
-  const usdCoveredByPoints = splitTokens / pointsConversionRatio;
+  const usdCoveredByPoints = splitTokens * pointsConversionRatio;
   const remaining = amount - usdCoveredByPoints;
   return Math.max(0, parseFloat(remaining.toFixed(2)));
 };
@@ -279,13 +280,12 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
 // src/components/CheckoutButton.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var CheckoutButton = ({ isLoggedIn }) => {
-  const { staticConfig, appProps } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
-  const { pointsTitle, pointsConversionRatio } = staticConfig;
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const { splitAmount, type, method } = selectedPaymentMethod;
-  const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, pointsConversionRatio);
+  const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
   const isDisabled = !amount || !method && usdAmount !== 0 || !!isProcessing || isInternalProcessing || !isLoggedIn;
   const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
   const isCrypto = type === "CRYPTO" /* CRYPTO */;
@@ -295,13 +295,13 @@ var CheckoutButton = ({ isLoggedIn }) => {
     }
     if (isCC && amount) {
       if (splitAmount && usdAmount) {
-        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       if (usdAmount) {
         return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
       }
       if (splitAmount) {
-        return `Pay ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       return "Checkout";
     }
@@ -839,7 +839,7 @@ var usePointsPayment = () => {
 var useSplitCardPayments = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const splitPayment = async (params) => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
@@ -854,7 +854,7 @@ var useSplitCardPayments = () => {
     } else {
       cardId = card.id;
     }
-    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, staticConfig.pointsConversionRatio);
+    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, spreePayConfig?.pointsConversionRatio);
     const transactionFee = getTransactionFee(usdAmount, appProps.transactionFeePercentage);
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
@@ -1263,24 +1263,35 @@ function Switch({ className, ...props }) {
 // 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 { disabled = false, value, onChange, message } = props;
+  const { spreePayConfig } = useSpreePayConfig();
   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" })
-      ] })
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-6", children: [
+    /* @__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, spreePayConfig?.pointsTitle),
+        " ",
+        !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio) })
+      ] }) : null
     ] }),
-    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
+    message && /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+      /* @__PURE__ */ jsx15("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx15(
+        "path",
+        {
+          fill: "#000",
+          d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
+        }
+      ) }),
+      /* @__PURE__ */ jsx15("p", { className: "text-xs font-medium text-black", children: message })
+    ] })
   ] });
 };
 
@@ -2284,12 +2295,15 @@ var PointsSelector = (props) => {
   const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
+  const { pointsConversionRatio } = spreePayConfig || {};
   const min = 0;
-  const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, balance?.availablePoints ?? 0);
+  const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (appProps.amount ?? 0) / pointsConversionRatio : 0;
+  const max = Math.min(maxByAmount, balance?.availablePoints ?? 0);
   const step = 10;
   const [splitTokens, setSplitTokens] = useState8(0);
-  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, staticConfig.pointsConversionRatio);
+  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, pointsConversionRatio);
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
@@ -2317,7 +2331,15 @@ var PointsSelector = (props) => {
         ] }),
         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: Math.round(splitTokens), className: "bg-white text-center font-medium" }),
+            /* @__PURE__ */ jsx24(
+              Input,
+              {
+                readOnly: true,
+                value: Math.round(splitTokens),
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
             /* @__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(
@@ -2326,6 +2348,7 @@ var PointsSelector = (props) => {
               value: [splitTokens],
               onValueCommit: ([v]) => handleCommit(v),
               onValueChange: ([v]) => setSplitTokens(v),
+              onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
               step
@@ -2337,7 +2360,8 @@ var PointsSelector = (props) => {
               {
                 readOnly: true,
                 value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium"
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
               }
             ),
             /* @__PURE__ */ jsx24("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
@@ -2356,8 +2380,7 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const [address, setAddress] = useState9(null);
   const [walletReady, setWalletReady] = useState9(false);
-  const { staticConfig } = useStaticConfig();
-  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const initWallet = useCallback4(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2388,7 +2411,7 @@ var SplitBlock = (props) => {
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+      pointsConversionRatio && /* @__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 })
@@ -2410,7 +2433,15 @@ var Points = () => {
     }
   };
   return /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    /* @__PURE__ */ jsx26(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
+    /* @__PURE__ */ jsx26(
+      PointsSwitch,
+      {
+        value: usePoints,
+        onChange: handleTogglePoints,
+        message: spreePayConfig?.creditCard.pointsInfoMessage,
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+      }
+    ),
     usePoints && /* @__PURE__ */ jsx26(
       SplitBlock,
       {
@@ -2426,7 +2457,8 @@ var Points = () => {
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { staticConfig, appProps } = useStaticConfig();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { cardPayment } = useCardPayment();
@@ -2437,7 +2469,7 @@ var CreditCardTab = () => {
       try {
         let res = null;
         const pointsAmount = selectedPaymentMethod.splitAmount ?? 0;
-        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, staticConfig.pointsConversionRatio);
+        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
         if (usdAmount && pointsAmount) {
           res = await splitPayment({ ...data, points: pointsAmount });
         } else if (!usdAmount && pointsAmount) {
@@ -2464,7 +2496,7 @@ var CreditCardTab = () => {
       setSelectedPaymentMethod,
       cardPayment,
       splitPayment,
-      staticConfig.pointsConversionRatio
+      spreePayConfig
     ]
   );
   useEffect7(() => {
@@ -2583,15 +2615,18 @@ var BASE_TOKENS = [
 
 // src/hooks/payments/useCryptoPayment.ts
 var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
-var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
 var useCryptoPayment = () => {
   const { data: walletClient } = useWalletClient();
+  const { spreePayConfig } = useSpreePayConfig();
   const config = useConfig();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
       throw new Error("Wallet not connected");
     }
+    if (!spreePayConfig) {
+      throw new Error("Spree Pay config not loaded");
+    }
     if (selectedPaymentMethod.type !== "CRYPTO" /* CRYPTO */ || !selectedPaymentMethod.method?.symbol) {
       throw new Error("Unsupported payment method");
     }
@@ -2606,14 +2641,14 @@ var useCryptoPayment = () => {
         address: tokenAddress,
         abi: erc20Abi2,
         functionName: "allowance",
-        args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
+        args: [walletClient.account.address, spreePayConfig.crypto.oneInchAggregationRouter]
       });
       if (allowance <= 0n) {
         const result = await walletClient.writeContract({
           address: tokenAddress,
           abi: erc20Abi2,
           functionName: "approve",
-          args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
+          args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
         });
         await waitForTransactionReceipt(config, {
           hash: result,
@@ -3178,8 +3213,8 @@ var CryptoWrapper = () => {
   const config = useMemo9(() => {
     if (!spreePayConfig) return null;
     return getDefaultConfig({
-      appName: spreePayConfig.rainbowAppName || "AIR Shop",
-      projectId: spreePayConfig.rainbowProjectId || "3fdcd5ff50cb84917cd05e40146975d8",
+      appName: spreePayConfig.rainbowAppName,
+      projectId: spreePayConfig.rainbowProjectId,
       chains: [base],
       ssr: true
     });
@@ -3191,9 +3226,10 @@ var CryptoWrapper = () => {
 // src/components/CryptoTab/CryptoTab.tsx
 import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var CryptoTab = () => {
+  const { spreePayConfig } = useSpreePayConfig();
   return /* @__PURE__ */ jsxs23("div", { children: [
-    /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
-    /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true }) })
+    /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
+    /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 
@@ -3245,7 +3281,7 @@ var TabButtons = (props) => {
     /* @__PURE__ */ jsxs24(
       TabButton,
       {
-        isDisabled: !spreePayConfig?.creditCard.enabled,
+        isDisabled: !spreePayConfig?.crypto.enabled,
         onClick: handleChange("CRYPTO" /* CRYPTO */),
         isActive: value === "CRYPTO" /* CRYPTO */,
         children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",