@superlogic/spree-pay 0.1.12 → 0.1.14

package/build/index.cjs

@@ -206,24 +206,24 @@ var formatCoin = (amount, currency = "USDC") => {
 
 // src/components/CheckoutButton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var CheckoutButton = ({ isProcessing, amount, onCheckout }) => {
+var CheckoutButton = ({ isLoggedIn, isProcessing, amount, onCheckout }) => {
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
-  const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing;
+  const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing || !isLoggedIn;
   const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-col overflow-hidden rounded-3xl border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-7 py-5", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-black/50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-black/50", children: [
       "By clicking on the button below I acknowledge that I have read and accepted the",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Property Policies" }),
-      ",",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
-      ",",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Property Fees" }),
-      ", and",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "a",
+        {
+          className: "underline",
+          href: "https://uat.travel.air.shop/terms?locale=en-US&currency=USD",
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Terms and Conditions"
+        }
+      ),
       "."
     ] }) }),
     onCheckout && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -253,7 +253,7 @@ var SpreeLegal = () => {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: "/", children: "Learn more" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
       " ",
       "about Spree."
     ] })
@@ -650,12 +650,12 @@ var PointsSwitch = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Label, { className: "items-baseline text-xl leading-[1.3] font-semibold text-black", htmlFor: id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
       ] })
     ] }),
-    balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-sm font-medium text-black", children: [
+    balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
@@ -688,15 +688,20 @@ var useConfig = () => {
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var isRemoveDisabled = true;
 var CardListItem = ({ card, isSelected, onSelect }) => {
   const handleSelect = () => {
     onSelect(card);
   };
+  const handleRemoveCard = (e) => {
+    e.stopPropagation();
+    if (isSelected || isRemoveDisabled) return;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
-        className: cn("flex w-11 items-center justify-center bg-black/10", {
+        className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
           "bg-primary": isSelected
         }),
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
@@ -706,7 +711,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
       "div",
       {
         className: cn(
-          "flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
+          "flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
           {
             "border-primary": isSelected
           }
@@ -718,17 +723,27 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
               "Ending in ",
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-black", children: card.lastFourNumbers })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cursor-not-allowed", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                "path",
-                {
-                  fill: "#000",
-                  fillOpacity: ".5",
-                  d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
-                }
-              ) })
-            ] }) })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                onClick: handleRemoveCard,
+                className: cn("rounded-md p-1 transition-all hover:bg-gray-300", {
+                  "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
+                  // 'cursor-pointer': !isSelected || !isRemoveDisabled,
+                }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "path",
+                    {
+                      fill: "#000",
+                      fillOpacity: ".5",
+                      d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
+                    }
+                  ) })
+                ] })
+              }
+            )
           ] })
         ]
       }
@@ -739,7 +754,6 @@ var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
     ] });
@@ -980,13 +994,13 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "div",
               {
-                className: cn("flex w-11 items-center justify-center bg-black/10", {
+                className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
                   "bg-primary": isSelected
                 }),
                 children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("flex w-full items-center justify-between gap-4 px-3"), children })
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-4 px-3", children })
           ] }),
           isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-4 pt-6 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "Card" }) })
         ]
@@ -1026,8 +1040,8 @@ var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
     register(handlePay);
   }, [register, handlePay]);
   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)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CreditCard, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         PointsSwitch,
         {
@@ -1231,7 +1245,7 @@ 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 */
     };
   };
@@ -1494,7 +1508,7 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col gap-6 px-7 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1505,7 +1519,7 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
         (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
@@ -1569,8 +1583,8 @@ var SelectCoinButton = () => {
     import_nice_modal_react4.default.show(CryptoSelectModal);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full items-center justify-between px-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
     ] })
@@ -1583,8 +1597,8 @@ var SelectedCoin = (props) => {
   const { coin, balance, logoURI } = props;
   const Icon = getSymbolLogo(coin);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary flex w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "border-primary flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
         Icon,
         !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
@@ -1671,8 +1685,8 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 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, pointsTitle, pointsConversionRatio }) })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CryptoWrapper, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PointsSwitch, { disabled: true, pointsTitle, pointsConversionRatio }) })
   ] });
 };
 
@@ -1684,7 +1698,7 @@ var TabButton = ({ isActive, children, onClick }) => {
     {
       onClick,
       className: cn(
-        "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black px-2.5 py-1.5 text-sm text-black",
+        "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 },
         { "bg-primary/7 border-primary text-primary": isActive }
       ),
@@ -1739,7 +1753,7 @@ 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.jsxs)("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__ */ (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 })
     ] }),
@@ -1751,10 +1765,10 @@ var Tabs = ({ config: config2 }) => {
 // src/SpreePayContent.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var SpreePayContent = (props) => {
-  const { config: config2, amount, onProcess, isProcessing } = props;
+  const { isLoggedIn, 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, { config: config2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckoutButton, { isProcessing, onCheckout: onProcess, amount }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckoutButton, { isLoggedIn, isProcessing, onCheckout: onProcess, amount }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SpreeLegal, {})
   ] });
 };
@@ -1769,7 +1783,7 @@ function useKeycloakSSO(config2) {
   const kcRef = (0, import_react9.useRef)(null);
   const refreshTimerRef = (0, import_react9.useRef)(null);
   const [error, setError] = (0, import_react9.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react9.useState)(false);
+  const [isChecking, setIsChecking] = (0, import_react9.useState)(enabled);
   const [accessToken, setAccessToken] = (0, import_react9.useState)(null);
   const scheduleRefresh = (0, import_react9.useCallback)(() => {
     const kc = kcRef.current;
@@ -1813,7 +1827,7 @@ function useKeycloakSSO(config2) {
       silentCheckSsoRedirectUri: `${window.location.origin}${ssoPageURI}`,
       silentCheckSsoFallback: true
     }).then((auth) => {
-      console.warn("[Keycloak] init success, authenticated=", auth);
+      console.info("[Keycloak] init success, authenticated=", auth);
       setAccessToken(kc.token ?? null);
       if (auth) scheduleRefresh();
     }).catch((err) => {
@@ -1890,7 +1904,7 @@ var SpreePay = ({ className, ...rest }) => {
   const environment = env?.environment || "dev";
   const tenantId = env?.tenantId || "bookit";
   const config2 = CONFIG[environment]?.[tenantId];
-  const { isChecking, accessToken, error } = useKeycloakSSO({
+  const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: config2.keyklockUrl,
     clientId: config2.keyklockClientId,
@@ -1908,12 +1922,10 @@ var SpreePay = ({ className, ...rest }) => {
   }, [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..." });
-    }
-    if (error) {
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "w-full text-center text-sm", children: [
-        "Error: ",
-        error.message
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SpreeLegal, {})
       ] });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1921,11 +1933,11 @@ var SpreePay = ({ className, ...rest }) => {
       {
         value: {
           fetcher: slapiFetcher,
+          errorRetryCount: 3,
           revalidateOnFocus: false,
-          revalidateIfStale: false,
-          revalidateOnReconnect: false
+          revalidateIfStale: 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, { config: config2, ...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, { isLoggedIn: Boolean(accessToken || env.accessToken), config: config2, ...rest }) }) })
       }
     );
   };

package/build/index.css

@@ -397,9 +397,18 @@
 .sl-spreepay .h-\[60px\] {
   height: 60px;
 }
+.sl-spreepay .h-\[135px\] {
+  height: 135px;
+}
+.sl-spreepay .h-\[315px\] {
+  height: 315px;
+}
 .sl-spreepay .h-\[500px\] {
   height: 500px;
 }
+.sl-spreepay .h-full {
+  height: 100%;
+}
 .sl-spreepay .max-h-\[600px\] {
   max-height: 600px;
 }
@@ -430,6 +439,9 @@
 .sl-spreepay .max-w-\[calc\(100\%-2rem\)\] {
   max-width: calc(100% - 2rem);
 }
+.sl-spreepay .flex-1 {
+  flex: 1;
+}
 .sl-spreepay .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -567,6 +579,12 @@
     border-color: color-mix(in oklab, var(--color-black) 25%, transparent);
   }
 }
+.sl-spreepay .border-black\/50 {
+  border-color: color-mix(in srgb, #000 50%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+  }
+}
 .sl-spreepay .border-destructive {
   border-color: var(--destructive);
 }
@@ -663,9 +681,6 @@
 .sl-spreepay .px-6 {
   padding-inline: calc(var(--spacing) * 6);
 }
-.sl-spreepay .px-7 {
-  padding-inline: calc(var(--spacing) * 7);
-}
 .sl-spreepay .px-8 {
   padding-inline: calc(var(--spacing) * 8);
 }
@@ -681,9 +696,6 @@
 .sl-spreepay .py-5 {
   padding-block: calc(var(--spacing) * 5);
 }
-.sl-spreepay .py-6 {
-  padding-block: calc(var(--spacing) * 6);
-}
 .sl-spreepay .pt-6 {
   padding-top: calc(var(--spacing) * 6);
 }
@@ -693,6 +705,9 @@
 .sl-spreepay .text-center {
   text-align: center;
 }
+.sl-spreepay .text-right {
+  text-align: right;
+}
 .sl-spreepay .text-2xl {
   font-size: var(--text-2xl);
   line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -928,6 +943,13 @@
     }
   }
 }
+.sl-spreepay .hover\:bg-gray-300 {
+  .sl-spreepay &:hover {
+    @media (hover: hover) {
+      background-color: var(--color-gray-300);
+    }
+  }
+}
 .sl-spreepay .hover\:bg-primary {
   .sl-spreepay &:hover {
     @media (hover: hover) {
@@ -1229,6 +1251,27 @@
     display: block;
   }
 }
+.sl-spreepay .md\:px-7 {
+  @media (width >= 48rem) {
+    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);
+  }
+}
+.sl-spreepay .md\:text-xl {
+  @media (width >= 48rem) {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+}
 .sl-spreepay .dark\:border-input {
   .sl-spreepay &:is(.dark *) {
     border-color: var(--input);
@@ -1408,7 +1451,7 @@
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
+  --border: rgba(0, 0, 0, 0.25);
   --input: oklch(0.269 0 0);
   --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.488 0.243 264.376);

package/build/index.js

@@ -167,24 +167,24 @@ var formatCoin = (amount, currency = "USDC") => {
 
 // src/components/CheckoutButton.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var CheckoutButton = ({ isProcessing, amount, onCheckout }) => {
+var CheckoutButton = ({ isLoggedIn, isProcessing, amount, onCheckout }) => {
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
-  const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing;
+  const isDisabled = !amount || !selectedPaymentMethod.method || !!isProcessing || isInternalProcessing || !isLoggedIn;
   const isUSD = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */;
   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-7 py-5", children: /* @__PURE__ */ jsxs2("p", { className: "text-black/50", children: [
+    /* @__PURE__ */ jsx3("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: "/", children: "Property Policies" }),
-      ",",
-      " ",
-      /* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
-      ",",
-      " ",
-      /* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Property Fees" }),
-      ", and",
-      " ",
-      /* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
+      /* @__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"
+        }
+      ),
       "."
     ] }) }),
     onCheckout && /* @__PURE__ */ jsx3(
@@ -214,7 +214,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: "/", children: "Learn more" }),
+      /* @__PURE__ */ jsx4("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
       " ",
       "about Spree."
     ] })
@@ -611,12 +611,12 @@ var PointsSwitch = (props) => {
   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: "items-baseline text-xl leading-[1.3] font-semibold text-black", htmlFor: id, children: [
+      /* @__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: "text-sm font-medium text-black", children: [
+    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) })
@@ -649,15 +649,20 @@ var useConfig = () => {
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var isRemoveDisabled = true;
 var CardListItem = ({ card, isSelected, onSelect }) => {
   const handleSelect = () => {
     onSelect(card);
   };
+  const handleRemoveCard = (e) => {
+    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(
       "div",
       {
-        className: cn("flex w-11 items-center justify-center bg-black/10", {
+        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" }) })
@@ -667,7 +672,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
       "div",
       {
         className: cn(
-          "flex w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
+          "flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
           {
             "border-primary": isSelected
           }
@@ -679,17 +684,27 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
               "Ending in ",
               /* @__PURE__ */ jsx10("span", { className: "text-black", children: card.lastFourNumbers })
             ] }),
-            /* @__PURE__ */ jsx10("div", { className: "cursor-not-allowed", 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(
-                "path",
-                {
-                  fill: "#000",
-                  fillOpacity: ".5",
-                  d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
-                }
-              ) })
-            ] }) })
+            /* @__PURE__ */ jsx10(
+              "div",
+              {
+                onClick: handleRemoveCard,
+                className: cn("rounded-md p-1 transition-all hover:bg-gray-300", {
+                  "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(
+                    "path",
+                    {
+                      fill: "#000",
+                      fillOpacity: ".5",
+                      d: "M6.35 16.17c-.38 0-.7-.13-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32c0 .39-.13.7-.39.96a1.3 1.3 0 0 1-.96.39h-7.3ZM14.17 4.5H5.83v10.32c0 .15.05.28.15.37.1.1.22.15.37.15h7.3c.13 0 .25-.06.36-.16.1-.11.16-.23.16-.36V4.5Zm-6 9.17h.84v-7.5h-.84v7.5Zm2.82 0h.84v-7.5h-.84v7.5Z"
+                    }
+                  ) })
+                ] })
+              }
+            )
           ] })
         ]
       }
@@ -700,7 +715,6 @@ 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" }),
       /* @__PURE__ */ jsx10("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
     ] });
@@ -941,13 +955,13 @@ var PointsSelector = ({ isSelected, onSelect, children }) => {
             /* @__PURE__ */ jsx15(
               "div",
               {
-                className: cn("flex w-11 items-center justify-center bg-black/10", {
+                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: cn("flex w-full items-center justify-between gap-4 px-3"), children })
+            /* @__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" }) })
         ]
@@ -987,8 +1001,8 @@ var CreditCardTab = ({ pointsTitle, pointsConversionRatio }) => {
     register(handlePay);
   }, [register, handlePay]);
   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("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,
         {
@@ -1192,7 +1206,7 @@ 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 */
     };
   };
@@ -1455,7 +1469,7 @@ var CryptoSelectModal = NiceModal3.create(() => {
   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-7 py-6", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4", 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(
@@ -1466,7 +1480,7 @@ var CryptoSelectModal = NiceModal3.create(() => {
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4 px-7 py-6", children: [
+      /* @__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: [
@@ -1530,8 +1544,8 @@ var SelectCoinButton = () => {
     NiceModal4.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 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 w-full items-center justify-between px-3", 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" }) })
     ] })
@@ -1544,8 +1558,8 @@ 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 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 w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", 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: [
         Icon,
         !Icon && logoURI && /* @__PURE__ */ jsx21("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
@@ -1632,8 +1646,8 @@ 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-7 py-6", children: /* @__PURE__ */ jsx24(CryptoWrapper, {}) }),
-    /* @__PURE__ */ jsx24("div", { className: "px-7 py-6", children: /* @__PURE__ */ jsx24(PointsSwitch, { disabled: true, pointsTitle, pointsConversionRatio }) })
+    /* @__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 }) })
   ] });
 };
 
@@ -1645,7 +1659,7 @@ var TabButton = ({ isActive, children, onClick }) => {
     {
       onClick,
       className: cn(
-        "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black px-2.5 py-1.5 text-sm text-black",
+        "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 },
         { "bg-primary/7 border-primary text-primary": isActive }
       ),
@@ -1700,7 +1714,7 @@ 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__ */ 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 })
     ] }),
@@ -1712,10 +1726,10 @@ var Tabs = ({ config: config2 }) => {
 // src/SpreePayContent.tsx
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var SpreePayContent = (props) => {
-  const { config: config2, amount, onProcess, isProcessing } = 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, { isProcessing, onCheckout: onProcess, amount }),
+    /* @__PURE__ */ jsx27(CheckoutButton, { isLoggedIn, isProcessing, onCheckout: onProcess, amount }),
     /* @__PURE__ */ jsx27(SpreeLegal, {})
   ] });
 };
@@ -1730,7 +1744,7 @@ function useKeycloakSSO(config2) {
   const kcRef = useRef2(null);
   const refreshTimerRef = useRef2(null);
   const [error, setError] = useState6(null);
-  const [isChecking, setIsChecking] = useState6(false);
+  const [isChecking, setIsChecking] = useState6(enabled);
   const [accessToken, setAccessToken] = useState6(null);
   const scheduleRefresh = useCallback4(() => {
     const kc = kcRef.current;
@@ -1774,7 +1788,7 @@ function useKeycloakSSO(config2) {
       silentCheckSsoRedirectUri: `${window.location.origin}${ssoPageURI}`,
       silentCheckSsoFallback: true
     }).then((auth) => {
-      console.warn("[Keycloak] init success, authenticated=", auth);
+      console.info("[Keycloak] init success, authenticated=", auth);
       setAccessToken(kc.token ?? null);
       if (auth) scheduleRefresh();
     }).catch((err) => {
@@ -1851,7 +1865,7 @@ var SpreePay = ({ className, ...rest }) => {
   const environment = env?.environment || "dev";
   const tenantId = env?.tenantId || "bookit";
   const config2 = CONFIG[environment]?.[tenantId];
-  const { isChecking, accessToken, error } = useKeycloakSSO({
+  const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: config2.keyklockUrl,
     clientId: config2.keyklockClientId,
@@ -1869,12 +1883,10 @@ var SpreePay = ({ className, ...rest }) => {
   }, [env.accessToken, config2, tenantId, accessToken]);
   const getContent = () => {
     if (isChecking) {
-      return /* @__PURE__ */ jsx28("p", { className: "w-full text-center text-sm", children: "Loading..." });
-    }
-    if (error) {
-      return /* @__PURE__ */ jsxs22("p", { className: "w-full text-center text-sm", children: [
-        "Error: ",
-        error.message
+      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__ */ jsx28(
@@ -1882,11 +1894,11 @@ var SpreePay = ({ className, ...rest }) => {
       {
         value: {
           fetcher: slapiFetcher,
+          errorRetryCount: 3,
           revalidateOnFocus: false,
-          revalidateIfStale: false,
-          revalidateOnReconnect: false
+          revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { config: config2, ...rest }) }) })
+        children: /* @__PURE__ */ jsx28(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx28(NiceModal6.Provider, { children: /* @__PURE__ */ jsx28(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken), config: config2, ...rest }) }) })
       }
     );
   };

package/package.json

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