@superlogic/spree-pay 0.1.11 → 0.1.13

package/build/index.cjs

@@ -187,14 +187,13 @@ var formatUSD = (amount, currency = "USD") => {
   }).format(amount);
   return formattedAmount;
 };
-var pointsConverionRate = 100;
-var formatPoints = (amount) => {
+var formatPoints = (amount, pointsTitle = "Pts") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
     style: "decimal",
     maximumFractionDigits: 5,
     minimumFractionDigits: 0
   }).format(amount);
-  return `${formattedAmount} Pts`;
+  return `${formattedAmount} ${pointsTitle}`;
 };
 var formatCoin = (amount, currency = "USDC") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
@@ -562,13 +561,8 @@ var SlapiPaymentService = {
 };
 
 // src/services/cardPayment.ts
-var cardPayment = async ({
-  card,
-  hash,
-  redirect3dsURI,
-  metadata,
-  capture
-}) => {
+var cardPayment = async (params) => {
+  const { card, redirect3dsURI, hash, capture, metadata } = params;
   let cardId = card.id;
   if ("token" in card) {
     const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
@@ -586,6 +580,7 @@ var cardPayment = async ({
     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,
@@ -594,6 +589,7 @@ var cardPayment = async ({
     }
   }
   return {
+    paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
     status: paymentResData.status,
     paymentId: paymentResData.id,
     txId: paymentResData.txId,
@@ -648,7 +644,7 @@ function Switch({ className, ...props }) {
 // src/components/common/PointsSwitch.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var PointsSwitch = (props) => {
-  const { disabled = false, value, onChange } = props;
+  const { pointsConversionRatio, disabled = false, value, onChange, pointsTitle } = props;
   const { balance } = useSlapiBalance();
   const id = (0, import_react4.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
@@ -660,9 +656,9 @@ var PointsSwitch = (props) => {
       ] })
     ] }),
     balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-sm font-medium text-black", children: [
-      formatPoints(balance.availablePoints),
+      formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
     ] }) : null
   ] });
 };
@@ -998,7 +994,7 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
     )
   );
 };
-var CreditCardTab = () => {
+var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
   const [usePoints, setUsePoints] = (0, import_react7.useState)(false);
   const [selectedPointsType, setSelectedPointsType] = (0, import_react7.useState)(null);
   const { balance, isBalanceLoading } = useSlapiBalance();
@@ -1032,15 +1028,24 @@ var CreditCardTab = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CreditCard, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6 px-7 py-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PointsSwitch, { disabled: true, value: usePoints, onChange: setUsePoints }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        PointsSwitch,
+        {
+          disabled: true,
+          value: usePoints,
+          onChange: setUsePoints,
+          pointsTitle,
+          pointsConversionRatio
+        }
+      ),
       usePoints && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PointsSelector, { onSelect: () => setSelectedPointsType("slapi"), isSelected: selectedPointsType === "slapi", children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "from [Brand] Balance" }) }),
           isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
           balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm font-medium text-black", children: [
-            formatPoints(balance.availablePoints),
+            formatPoints(balance.availablePoints, pointsTitle),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
           ] }) : null
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -1226,7 +1231,8 @@ var useCryptoPayment = () => {
       txHash,
       paymentId: paymentRes.data.id,
       txId: paymentRes.data.txId,
-      status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */
+      status: res.verified ? "CAPTURED" /* CAPTURED */ : "FAILED" /* FAILED */,
+      paymentType: "CRYPTO" /* CRYPTO */
     };
   };
   return { cryptoPayment };
@@ -1662,10 +1668,11 @@ var CryptoWrapper = () => {
 
 // src/components/CryptoTab/CryptoTab.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var CryptoTab = () => {
+var CryptoTab = (props) => {
+  const { pointsTitle, pointsConversionRatio } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CryptoWrapper, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PointsSwitch, { disabled: true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PointsSwitch, { disabled: true, pointsTitle, pointsConversionRatio }) })
   ] });
 };
 
@@ -1728,24 +1735,25 @@ var TabButtons = (props) => {
 
 // src/components/Tabs.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Tabs = () => {
+var Tabs = ({ config: config2 }) => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { pointsConversionRatio, pointsTitle } = config2;
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCardTab, {}),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CryptoTab, {})
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreditCardTab, { pointsTitle, pointsConversionRatio }),
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CryptoTab, { pointsTitle, pointsConversionRatio })
   ] });
 };
 
 // src/SpreePayContent.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var SpreePayContent = (props) => {
-  const { amount, onProcess, isProcessing } = props;
+  const { config: config2, amount, onProcess, isProcessing } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tabs, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tabs, { config: config2 }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckoutButton, { isProcessing, onCheckout: onProcess, amount }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SpreeLegal, {})
   ] });
@@ -1820,41 +1828,53 @@ function useKeycloakSSO(config2) {
 
 // src/SpreePay.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var envConfig = {
+var CONFIG = {
   dev: {
     bookit: {
       slapiUrl: "https://slapi.dev.superlogic.com",
       keyklockUrl: "https://auth.dev.join.bookit.com",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     },
     moca: {
       slapiUrl: "https://slapi.dev.air.shop",
       keyklockUrl: "https://login.dev.air.shop",
-      keyklockClientId: "oneof-next"
+      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"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     },
     moca: {
-      slapiUrl: "https://slapi.stg.superlogic.com",
+      slapiUrl: "https://slapi.stg.air.shop",
       keyklockUrl: "https://login.stg.air.shop",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     }
   },
   prod: {
     bookit: {
       slapiUrl: "https://slapi.superlogic.com",
       keyklockUrl: "https://auth.join.bookit.com",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     },
     moca: {
-      slapiUrl: "https://slapi.superlogic.com",
+      slapiUrl: "https://slapi.air.shop",
       keyklockUrl: "https://login.air.shop",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     }
   }
 };
@@ -1869,10 +1889,11 @@ var SpreePay = ({ className, ...rest }) => {
   const { env } = useSpreePayEnv();
   const environment = env?.environment || "dev";
   const tenantId = env?.tenantId || "bookit";
+  const config2 = CONFIG[environment]?.[tenantId];
   const { isChecking, accessToken, error } = useKeycloakSSO({
     realm: tenantId,
-    url: envConfig[environment][tenantId].keyklockUrl,
-    clientId: envConfig[environment][tenantId].keyklockClientId,
+    url: config2.keyklockUrl,
+    clientId: config2.keyklockClientId,
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
@@ -1881,10 +1902,10 @@ var SpreePay = ({ className, ...rest }) => {
       return registerApi({
         accessToken: env.accessToken || accessToken,
         tenantId,
-        baseUrl: envConfig[environment][tenantId].slapiUrl
+        baseUrl: config2.slapiUrl
       });
     }
-  }, [env.accessToken, environment, tenantId, accessToken]);
+  }, [env.accessToken, config2, tenantId, accessToken]);
   const getContent = () => {
     if (isChecking) {
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." });
@@ -1904,7 +1925,7 @@ var SpreePay = ({ className, ...rest }) => {
           revalidateIfStale: false,
           revalidateOnReconnect: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreePayContent, { ...rest }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreePayContent, { config: config2, ...rest }) }) })
       }
     );
   };

package/build/index.d.cts

@@ -96,6 +96,7 @@ type PaymentMethodResult = {
     paymentId: string;
     txHash: string | null;
     txId: string | null;
+    paymentType: PaymentType;
 };
 type ProcessFnParams = {
     hash: string;

package/build/index.d.ts

@@ -96,6 +96,7 @@ type PaymentMethodResult = {
     paymentId: string;
     txHash: string | null;
     txId: string | null;
+    paymentType: PaymentType;
 };
 type ProcessFnParams = {
     hash: string;

package/build/index.js

@@ -148,14 +148,13 @@ var formatUSD = (amount, currency = "USD") => {
   }).format(amount);
   return formattedAmount;
 };
-var pointsConverionRate = 100;
-var formatPoints = (amount) => {
+var formatPoints = (amount, pointsTitle = "Pts") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
     style: "decimal",
     maximumFractionDigits: 5,
     minimumFractionDigits: 0
   }).format(amount);
-  return `${formattedAmount} Pts`;
+  return `${formattedAmount} ${pointsTitle}`;
 };
 var formatCoin = (amount, currency = "USDC") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
@@ -523,13 +522,8 @@ var SlapiPaymentService = {
 };
 
 // src/services/cardPayment.ts
-var cardPayment = async ({
-  card,
-  hash,
-  redirect3dsURI,
-  metadata,
-  capture
-}) => {
+var cardPayment = async (params) => {
+  const { card, redirect3dsURI, hash, capture, metadata } = params;
   let cardId = card.id;
   if ("token" in card) {
     const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
@@ -547,6 +541,7 @@ var cardPayment = async ({
     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,
@@ -555,6 +550,7 @@ var cardPayment = async ({
     }
   }
   return {
+    paymentType: "CREDIT_CARD" /* CREDIT_CARD */,
     status: paymentResData.status,
     paymentId: paymentResData.id,
     txId: paymentResData.txId,
@@ -609,7 +605,7 @@ function Switch({ className, ...props }) {
 // src/components/common/PointsSwitch.tsx
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var PointsSwitch = (props) => {
-  const { disabled = false, value, onChange } = 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: [
@@ -621,9 +617,9 @@ var PointsSwitch = (props) => {
       ] })
     ] }),
     balance?.availablePoints ? /* @__PURE__ */ jsxs6("p", { className: "text-sm font-medium text-black", children: [
-      formatPoints(balance.availablePoints),
+      formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      /* @__PURE__ */ jsx9("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
+      /* @__PURE__ */ jsx9("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
     ] }) : null
   ] });
 };
@@ -959,7 +955,7 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
     )
   );
 };
-var CreditCardTab = () => {
+var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
   const [usePoints, setUsePoints] = useState4(false);
   const [selectedPointsType, setSelectedPointsType] = useState4(null);
   const { balance, isBalanceLoading } = useSlapiBalance();
@@ -993,15 +989,24 @@ var CreditCardTab = () => {
   return /* @__PURE__ */ jsxs10("div", { children: [
     /* @__PURE__ */ jsx15("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ jsx15(CreditCard, {}) }),
     /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-6 px-7 py-6", children: [
-      /* @__PURE__ */ jsx15(PointsSwitch, { disabled: true, value: usePoints, onChange: setUsePoints }),
+      /* @__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),
+            formatPoints(balance.availablePoints, pointsTitle),
             " ",
-            /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConverionRate) })
+            /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxs10(
@@ -1187,7 +1192,8 @@ var useCryptoPayment = () => {
       txHash,
       paymentId: paymentRes.data.id,
       txId: paymentRes.data.txId,
-      status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */
+      status: res.verified ? "CAPTURED" /* CAPTURED */ : "FAILED" /* FAILED */,
+      paymentType: "CRYPTO" /* CRYPTO */
     };
   };
   return { cryptoPayment };
@@ -1623,10 +1629,11 @@ var CryptoWrapper = () => {
 
 // src/components/CryptoTab/CryptoTab.tsx
 import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var CryptoTab = () => {
+var CryptoTab = (props) => {
+  const { pointsTitle, pointsConversionRatio } = props;
   return /* @__PURE__ */ jsxs18("div", { children: [
     /* @__PURE__ */ jsx24("div", { className: "border-b-1 border-black/7 px-7 py-6", children: /* @__PURE__ */ jsx24(CryptoWrapper, {}) }),
-    /* @__PURE__ */ jsx24("div", { className: "px-7 py-6", children: /* @__PURE__ */ jsx24(PointsSwitch, { disabled: true }) })
+    /* @__PURE__ */ jsx24("div", { className: "px-7 py-6", children: /* @__PURE__ */ jsx24(PointsSwitch, { disabled: true, pointsTitle, pointsConversionRatio }) })
   ] });
 };
 
@@ -1689,24 +1696,25 @@ var TabButtons = (props) => {
 
 // src/components/Tabs.tsx
 import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
-var Tabs = () => {
+var Tabs = ({ config: config2 }) => {
   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-7 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 })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx26(CreditCardTab, {}),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx26(CryptoTab, {})
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx26(CreditCardTab, { pointsTitle, pointsConversionRatio }),
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx26(CryptoTab, { pointsTitle, pointsConversionRatio })
   ] });
 };
 
 // src/SpreePayContent.tsx
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var SpreePayContent = (props) => {
-  const { amount, onProcess, isProcessing } = props;
+  const { config: config2, amount, onProcess, isProcessing } = props;
   return /* @__PURE__ */ jsxs21("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx27(Tabs, {}),
+    /* @__PURE__ */ jsx27(Tabs, { config: config2 }),
     /* @__PURE__ */ jsx27(CheckoutButton, { isProcessing, onCheckout: onProcess, amount }),
     /* @__PURE__ */ jsx27(SpreeLegal, {})
   ] });
@@ -1781,41 +1789,53 @@ function useKeycloakSSO(config2) {
 
 // src/SpreePay.tsx
 import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
-var envConfig = {
+var CONFIG = {
   dev: {
     bookit: {
       slapiUrl: "https://slapi.dev.superlogic.com",
       keyklockUrl: "https://auth.dev.join.bookit.com",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     },
     moca: {
       slapiUrl: "https://slapi.dev.air.shop",
       keyklockUrl: "https://login.dev.air.shop",
-      keyklockClientId: "oneof-next"
+      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"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     },
     moca: {
-      slapiUrl: "https://slapi.stg.superlogic.com",
+      slapiUrl: "https://slapi.stg.air.shop",
       keyklockUrl: "https://login.stg.air.shop",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     }
   },
   prod: {
     bookit: {
       slapiUrl: "https://slapi.superlogic.com",
       keyklockUrl: "https://auth.join.bookit.com",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     },
     moca: {
-      slapiUrl: "https://slapi.superlogic.com",
+      slapiUrl: "https://slapi.air.shop",
       keyklockUrl: "https://login.air.shop",
-      keyklockClientId: "oneof-next"
+      keyklockClientId: "oneof-next",
+      pointsConversionRatio: 100,
+      pointsTitle: "AIR SP"
     }
   }
 };
@@ -1830,10 +1850,11 @@ var SpreePay = ({ className, ...rest }) => {
   const { env } = useSpreePayEnv();
   const environment = env?.environment || "dev";
   const tenantId = env?.tenantId || "bookit";
+  const config2 = CONFIG[environment]?.[tenantId];
   const { isChecking, accessToken, error } = useKeycloakSSO({
     realm: tenantId,
-    url: envConfig[environment][tenantId].keyklockUrl,
-    clientId: envConfig[environment][tenantId].keyklockClientId,
+    url: config2.keyklockUrl,
+    clientId: config2.keyklockClientId,
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
@@ -1842,10 +1863,10 @@ var SpreePay = ({ className, ...rest }) => {
       return registerApi({
         accessToken: env.accessToken || accessToken,
         tenantId,
-        baseUrl: envConfig[environment][tenantId].slapiUrl
+        baseUrl: config2.slapiUrl
       });
     }
-  }, [env.accessToken, environment, tenantId, accessToken]);
+  }, [env.accessToken, config2, tenantId, accessToken]);
   const getContent = () => {
     if (isChecking) {
       return /* @__PURE__ */ jsx28("p", { className: "w-full text-center text-sm", children: "Loading..." });
@@ -1865,7 +1886,7 @@ var SpreePay = ({ className, ...rest }) => {
           revalidateIfStale: false,
           revalidateOnReconnect: false
         },
-        children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { ...rest }) }) })
+        children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { config: config2, ...rest }) }) })
       }
     );
   };

package/package.json

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