@superlogic/spree-pay 0.5.4 → 0.5.5

package/build/{CryptoComTab-WXKBRJF3.js → CryptoComTab-3MCYJORT.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-QJCZPYQC.js";
+} from "./chunk-OTFCW74L.js";
 import {
   InfoBanner,
   Legal,
@@ -15,7 +15,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-WYLYH7AK.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";

package/build/{CryptoTab-G55XLBX2.js → CryptoTab-ROWYOLOL.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-H7S3CTS3.js";
+} from "./chunk-UVD3GGPC.js";
 import {
   Dialog,
   DialogContent,
@@ -20,7 +20,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-WYLYH7AK.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";

package/build/{chunk-QJCZPYQC.js → chunk-OTFCW74L.js}

@@ -5,7 +5,7 @@ import {
   DialogTitle,
   esm_default,
   useModal
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-WYLYH7AK.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/{chunk-H7S3CTS3.js → chunk-UVD3GGPC.js}

@@ -7,7 +7,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-WYLYH7AK.js";
 
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";

package/build/{chunk-RZ43EXC2.js → chunk-WYLYH7AK.js}

@@ -86,7 +86,7 @@ var settlePaymentResult = (res, fallbackMessage, failureCode = "PAYMENT_ERROR" /
 };
 
 // package.json
-var version = "0.5.4";
+var version = "0.5.5";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -986,11 +986,11 @@ var useSpreePayConfig = () => {
   const { origin, tenantId } = useSpreePayEnv();
   const { staticConfig } = useStaticConfig();
   const key = origin ? `${URL}?origin=${origin}` : URL;
-  const { data, isLoading } = useSWR(
+  const { data, isLoading, error } = useSWR(
     key,
     (path) => publicGet(staticConfig.slapiUrl, tenantId, path)
   );
-  return { spreePayConfig: data ?? null, configIsLoading: isLoading };
+  return { spreePayConfig: data ?? null, configIsLoading: isLoading, configError: error };
 };
 
 // src/context/LoginStatusContext.tsx

package/build/index.cjs

@@ -575,7 +575,7 @@ var init_errors = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.5.4";
+    version = "0.5.5";
   }
 });
 
@@ -1412,11 +1412,11 @@ var init_useSpreePayConfig = __esm({
       const { origin, tenantId } = useSpreePayEnv();
       const { staticConfig } = useStaticConfig();
       const key = origin ? `${URL}?origin=${origin}` : URL;
-      const { data, isLoading } = (0, import_swr.default)(
+      const { data, isLoading, error } = (0, import_swr.default)(
         key,
         (path) => publicGet(staticConfig.slapiUrl, tenantId, path)
       );
-      return { spreePayConfig: data ?? null, configIsLoading: isLoading };
+      return { spreePayConfig: data ?? null, configIsLoading: isLoading, configError: error };
     };
   }
 });
@@ -3882,7 +3882,7 @@ var stripeElementClasses = {
   invalid: "focus-visible:ring-(--negative)",
   focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
-var CreditCardForm = ({ cancel, saveCard }) => {
+var CreditCardForm = ({ cancel, saveCard, showCancel }) => {
   const [cardError, setCardError] = (0, import_react10.useState)(void 0);
   const [stripeStyles, setStripeStyles] = (0, import_react10.useState)({});
   const [shouldSaveCard, setShouldSaveCard] = (0, import_react10.useState)(true);
@@ -3989,7 +3989,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      showCancel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button,
         {
           variant: "outline",
@@ -4014,15 +4014,32 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
+var StripeWrapper = ({ onCancel, saveNewCard, publicKey, showCancel }) => {
   const stripePromise = (0, import_react11.useMemo)(() => (0, import_stripe_js.loadStripe)(publicKey), [publicKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard, showCancel }) });
 };
 var CreditCard = ({ newCards, setNewCards }) => {
   const [showForm, setShowForm] = (0, import_react11.useState)(false);
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { cards, cardsIsLoading } = useCards();
+  const canUseForm = isLoggedIn && Boolean(spreePayConfig?.stripePublicKey);
+  const hasCards = cards.length + newCards.length > 0;
+  const formVisible = canUseForm && (showForm || !hasCards && !cardsIsLoading);
+  const didAutoSelect = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
+    if (!isLoggedIn) {
+      didAutoSelect.current = false;
+      return;
+    }
+    if (didAutoSelect.current || cardsIsLoading) return;
+    didAutoSelect.current = true;
+    const alreadySelected = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && Boolean(selectedPaymentMethod.method);
+    if (!alreadySelected && cards.length > 0) {
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: cards[0] });
+    }
+  }, [isLoggedIn, cardsIsLoading, cards, selectedPaymentMethod, setSelectedPaymentMethod]);
   const setCard = (card) => {
     const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
     setSelectedPaymentMethod({
@@ -4055,7 +4072,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-[22px] leading-9 font-medium text-(--brand-primary)", children: "Your Cards" }),
-    !showForm && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    !formVisible && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         CardsList,
         {
@@ -4070,13 +4087,21 @@ var CreditCard = ({ newCards, setNewCards }) => {
         "button",
         {
           onClick: handleAddNewCard,
-          disabled: !isLoggedIn || !spreePayConfig?.stripePublicKey,
+          disabled: !canUseForm,
           className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
     ] }),
-    isLoggedIn && spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    formVisible && spreePayConfig?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      StripeWrapper,
+      {
+        onCancel: handleCancel,
+        saveNewCard,
+        publicKey: spreePayConfig.stripePublicKey,
+        showCancel: hasCards
+      }
+    )
   ] });
 };
 
@@ -4085,6 +4110,7 @@ var import_react16 = require("react");
 init_LoginStatusContext();
 init_SpreePayActionsContext();
 init_StaticConfigContext();
+init_useSlapiBalance();
 init_useSpreePayConfig();
 init_common();
 
@@ -5163,8 +5189,10 @@ var PointsSelector = (props) => {
             Slider2,
             {
               value: [splitTokens],
-              onValueCommit: ([v]) => handleCommit(v),
-              onValueChange: ([v]) => setSplitTokens(v),
+              onValueChange: ([v]) => {
+                setSplitTokens(v);
+                handleCommit(v);
+              },
               onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
@@ -5264,8 +5292,21 @@ var Points = () => {
   const [usePoints, setUsePoints] = (0, import_react16.useState)(false);
   const [selectedPointsType, setSelectedPointsType] = (0, import_react16.useState)(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
-  const { spreePayConfig } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
+  const { balance } = useSlapiBalance();
+  const { useWeb3Points } = useSpreePayEnv();
+  const pointsDisabled = !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints;
+  const [didInit, setDidInit] = (0, import_react16.useState)(false);
+  if (!isLoggedIn) {
+    if (didInit) setDidInit(false);
+  } else if (!didInit && balance !== void 0 && !configIsLoading) {
+    setDidInit(true);
+    if (!useWeb3Points && !pointsDisabled && balance.availablePoints > 0) {
+      setUsePoints(true);
+      setSelectedPointsType("air");
+    }
+  }
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -5280,7 +5321,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
+        disabled: pointsDisabled
       }
     ),
     usePoints && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -5390,12 +5431,13 @@ var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
-  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading, configError } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
+  if (configError) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full gap-4 overflow-x-auto px-5 py-2 md:px-7", children: [
     configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
     spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
@@ -5443,6 +5485,8 @@ var TabButtons = (props) => {
 // src/SpreePayContent.tsx
 init_LoginStatusContext();
 init_SpreePayActionsContext();
+init_useSpreePayConfig();
+init_utils();
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var CryptoTab2 = (0, import_react22.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
 var CryptoComTab2 = (0, import_react22.lazy)(
@@ -5455,22 +5499,36 @@ var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("di
 var SpreePayContent = () => {
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { configError } = useSpreePayConfig();
   (0, import_react22.useEffect)(() => {
     if (!isLoggedIn) {
       setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
     }
   }, [isLoggedIn, setSelectedPaymentMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
-    ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CreditCardTab, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react22.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TabLoadingFallback, {}), children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CryptoTab2, {}),
-      selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CryptoComTab2, {})
-    ] })
-  ] });
+  return (
+    // Config failed: inert disables the whole widget and drops it from tab order + a11y.
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      "div",
+      {
+        inert: !!configError,
+        className: cn(
+          "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]",
+          configError && "opacity-75"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+          ] }),
+          selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CreditCardTab, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react22.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TabLoadingFallback, {}), children: [
+            selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CryptoTab2, {}),
+            selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CryptoComTab2, {})
+          ] })
+        ]
+      }
+    )
+  );
 };
 
 // src/components/ErrorBoundary.tsx

package/build/index.css

@@ -926,6 +926,9 @@
 .sl-spreepay .opacity-70 {
   opacity: 70%;
 }
+.sl-spreepay .opacity-75 {
+  opacity: 75%;
+}
 .sl-spreepay .shadow-\(--primary\)\/20 {
   --tw-shadow-alpha: 20%;
   --tw-shadow: var(--primary);

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-H7S3CTS3.js";
+} from "./chunk-UVD3GGPC.js";
 import {
   Iframe3ds
-} from "./chunk-QJCZPYQC.js";
+} from "./chunk-OTFCW74L.js";
 import {
   InfoBanner,
   LogLevel,
@@ -43,17 +43,17 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-WYLYH7AK.js";
 
 // src/SpreePay.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState12 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo9, useState as useState12 } from "react";
 import { SWRConfig } from "swr";
 
 // src/SpreePayContent.tsx
-import { Suspense, lazy, useEffect as useEffect6 } from "react";
+import { Suspense, lazy, useEffect as useEffect7 } from "react";
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback6, useEffect as useEffect5, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState10 } from "react";
 
 // src/hooks/payments/useCardPayment.ts
 var cardPaymentLogger = logger.child("card-payment");
@@ -567,7 +567,7 @@ var useCards = () => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { useCallback as useCallback2, useMemo as useMemo3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect, useMemo as useMemo3, useRef, useState as useState3 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
@@ -744,7 +744,7 @@ var stripeElementClasses = {
   invalid: "focus-visible:ring-(--negative)",
   focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
-var CreditCardForm = ({ cancel, saveCard }) => {
+var CreditCardForm = ({ cancel, saveCard, showCancel }) => {
   const [cardError, setCardError] = useState2(void 0);
   const [stripeStyles, setStripeStyles] = useState2({});
   const [shouldSaveCard, setShouldSaveCard] = useState2(true);
@@ -851,7 +851,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       /* @__PURE__ */ jsx4(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      showCancel && /* @__PURE__ */ jsx4(
         Button,
         {
           variant: "outline",
@@ -876,15 +876,32 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
+var StripeWrapper = ({ onCancel, saveNewCard, publicKey, showCancel }) => {
   const stripePromise = useMemo3(() => loadStripe(publicKey), [publicKey]);
-  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
+  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard, showCancel }) });
 };
 var CreditCard = ({ newCards, setNewCards }) => {
   const [showForm, setShowForm] = useState3(false);
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { cards, cardsIsLoading } = useCards();
+  const canUseForm = isLoggedIn && Boolean(spreePayConfig?.stripePublicKey);
+  const hasCards = cards.length + newCards.length > 0;
+  const formVisible = canUseForm && (showForm || !hasCards && !cardsIsLoading);
+  const didAutoSelect = useRef(false);
+  useEffect(() => {
+    if (!isLoggedIn) {
+      didAutoSelect.current = false;
+      return;
+    }
+    if (didAutoSelect.current || cardsIsLoading) return;
+    didAutoSelect.current = true;
+    const alreadySelected = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && Boolean(selectedPaymentMethod.method);
+    if (!alreadySelected && cards.length > 0) {
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: cards[0] });
+    }
+  }, [isLoggedIn, cardsIsLoading, cards, selectedPaymentMethod, setSelectedPaymentMethod]);
   const setCard = (card) => {
     const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
     setSelectedPaymentMethod({
@@ -917,7 +934,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
   };
   return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-baseline gap-4", children: [
     /* @__PURE__ */ jsx5("h3", { className: "text-[22px] leading-9 font-medium text-(--brand-primary)", children: "Your Cards" }),
-    !showForm && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    !formVisible && /* @__PURE__ */ jsxs3(Fragment2, { children: [
       /* @__PURE__ */ jsx5(
         CardsList,
         {
@@ -932,13 +949,21 @@ var CreditCard = ({ newCards, setNewCards }) => {
         "button",
         {
           onClick: handleAddNewCard,
-          disabled: !isLoggedIn || !spreePayConfig?.stripePublicKey,
+          disabled: !canUseForm,
           className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
     ] }),
-    isLoggedIn && spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx5(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    formVisible && spreePayConfig?.stripePublicKey && /* @__PURE__ */ jsx5(
+      StripeWrapper,
+      {
+        onCancel: handleCancel,
+        saveNewCard,
+        publicKey: spreePayConfig.stripePublicKey,
+        showCancel: hasCards
+      }
+    )
   ] });
 };
 
@@ -946,7 +971,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
 import { useState as useState9 } from "react";
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -2004,8 +2029,10 @@ var PointsSelector = (props) => {
             Slider2,
             {
               value: [splitTokens],
-              onValueCommit: ([v]) => handleCommit(v),
-              onValueChange: ([v]) => setSplitTokens(v),
+              onValueChange: ([v]) => {
+                setSplitTokens(v);
+                handleCommit(v);
+              },
               onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
@@ -2047,7 +2074,7 @@ var SplitBlock = (props) => {
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-  const prevPointsChainRef = useRef5(spreePayConfig?.pointsChain);
+  const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
   const initWallet = useCallback5(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2071,7 +2098,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -2105,8 +2132,21 @@ var Points = () => {
   const [usePoints, setUsePoints] = useState9(false);
   const [selectedPointsType, setSelectedPointsType] = useState9(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
-  const { spreePayConfig } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
+  const { balance } = useSlapiBalance();
+  const { useWeb3Points } = useSpreePayEnv();
+  const pointsDisabled = !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints;
+  const [didInit, setDidInit] = useState9(false);
+  if (!isLoggedIn) {
+    if (didInit) setDidInit(false);
+  } else if (!didInit && balance !== void 0 && !configIsLoading) {
+    setDidInit(true);
+    if (!useWeb3Points && !pointsDisabled && balance.availablePoints > 0) {
+      setUsePoints(true);
+      setSelectedPointsType("air");
+    }
+  }
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2121,7 +2161,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
+        disabled: pointsDisabled
       }
     ),
     usePoints && /* @__PURE__ */ jsx15(
@@ -2199,7 +2239,7 @@ var CreditCardTab = () => {
       mutateBalance
     ]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs9("div", { children: [
@@ -2229,12 +2269,13 @@ var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
-  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading, configError } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
+  if (configError) return null;
   return /* @__PURE__ */ jsxs10("div", { className: "flex w-full gap-4 overflow-x-auto px-5 py-2 md:px-7", children: [
     configIsLoading && /* @__PURE__ */ jsx17("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
     spreePayConfig?.creditCard.enabled && /* @__PURE__ */ jsxs10(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
@@ -2281,9 +2322,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-G55XLBX2.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-ROWYOLOL.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-WXKBRJF3.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-3MCYJORT.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
@@ -2292,22 +2333,36 @@ var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex i
 var SpreePayContent = () => {
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  useEffect6(() => {
+  const { configError } = useSpreePayConfig();
+  useEffect7(() => {
     if (!isLoggedIn) {
       setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
     }
   }, [isLoggedIn, setSelectedPaymentMethod]);
-  return /* @__PURE__ */ jsxs11("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
-      /* @__PURE__ */ jsx18("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
-      /* @__PURE__ */ jsx18(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
-    ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, {}),
-    /* @__PURE__ */ jsxs11(Suspense, { fallback: /* @__PURE__ */ jsx18(TabLoadingFallback, {}), children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, {}),
-      selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ jsx18(CryptoComTab, {})
-    ] })
-  ] });
+  return (
+    // Config failed: inert disables the whole widget and drops it from tab order + a11y.
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        inert: !!configError,
+        className: cn(
+          "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]",
+          configError && "opacity-75"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
+            /* @__PURE__ */ jsx18("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
+            /* @__PURE__ */ jsx18(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+          ] }),
+          selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, {}),
+          /* @__PURE__ */ jsxs11(Suspense, { fallback: /* @__PURE__ */ jsx18(TabLoadingFallback, {}), children: [
+            selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, {}),
+            selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ jsx18(CryptoComTab, {})
+          ] })
+        ]
+      }
+    )
+  );
 };
 
 // src/components/ErrorBoundary.tsx
@@ -2359,16 +2414,16 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef7, useState as useState11 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config) {
   const { url, realm, clientId, ssoPageURI, enabled } = config;
-  const initRef = useRef6(false);
-  const kcRef = useRef6(null);
-  const refreshTimerRef = useRef6(null);
-  const scheduleRefreshRef = useRef6(() => {
+  const initRef = useRef7(false);
+  const kcRef = useRef7(null);
+  const refreshTimerRef = useRef7(null);
+  const scheduleRefreshRef = useRef7(() => {
   });
   const [error, setError] = useState11(null);
   const [isChecking, setIsChecking] = useState11(enabled);
@@ -2397,10 +2452,10 @@ function useKeycloakSSO(config) {
       });
     }, delayMs);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new Keycloak({ url, realm, clientId });
@@ -2455,7 +2510,7 @@ var SpreePayInner = () => {
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  useEffect8(() => {
+  useEffect9(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -2509,9 +2564,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 var useCapture3DS = ({ paymentIntent }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     if (typeof window !== "undefined" && window.parent && paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent });
     }

package/package.json

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