@superlogic/spree-pay 0.5.3 → 0.5.5

package/build/index.cjs

@@ -30,6 +30,448 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/@ebay/nice-modal-react/lib/esm/index.js
+function getModal(modalId) {
+  var _a;
+  return (_a = MODAL_REGISTRY[modalId]) === null || _a === void 0 ? void 0 : _a.comp;
+}
+function showModal(modalId, args) {
+  return {
+    type: "nice-modal/show",
+    payload: {
+      modalId,
+      args
+    }
+  };
+}
+function setModalFlags(modalId, flags) {
+  return {
+    type: "nice-modal/set-flags",
+    payload: {
+      modalId,
+      flags
+    }
+  };
+}
+function hideModal(modalId) {
+  return {
+    type: "nice-modal/hide",
+    payload: {
+      modalId
+    }
+  };
+}
+function removeModal(modalId) {
+  return {
+    type: "nice-modal/remove",
+    payload: {
+      modalId
+    }
+  };
+}
+function show(modal, args) {
+  var modalId = getModalId(modal);
+  if (typeof modal !== "string" && !MODAL_REGISTRY[modalId]) {
+    register(modalId, modal);
+  }
+  dispatch(showModal(modalId, args));
+  if (!modalCallbacks[modalId]) {
+    var theResolve_1;
+    var theReject_1;
+    var promise = new Promise(function(resolve, reject) {
+      theResolve_1 = resolve;
+      theReject_1 = reject;
+    });
+    modalCallbacks[modalId] = {
+      resolve: theResolve_1,
+      reject: theReject_1,
+      promise
+    };
+  }
+  return modalCallbacks[modalId].promise;
+}
+function hide(modal) {
+  var modalId = getModalId(modal);
+  dispatch(hideModal(modalId));
+  delete modalCallbacks[modalId];
+  if (!hideModalCallbacks[modalId]) {
+    var theResolve_2;
+    var theReject_2;
+    var promise = new Promise(function(resolve, reject) {
+      theResolve_2 = resolve;
+      theReject_2 = reject;
+    });
+    hideModalCallbacks[modalId] = {
+      resolve: theResolve_2,
+      reject: theReject_2,
+      promise
+    };
+  }
+  return hideModalCallbacks[modalId].promise;
+}
+function useModal(modal, args) {
+  var modals = (0, import_react.useContext)(NiceModalContext);
+  var contextModalId = (0, import_react.useContext)(NiceModalIdContext);
+  var modalId = null;
+  var isUseComponent = modal && typeof modal !== "string";
+  if (!modal) {
+    modalId = contextModalId;
+  } else {
+    modalId = getModalId(modal);
+  }
+  if (!modalId)
+    throw new Error("No modal id found in NiceModal.useModal.");
+  var mid = modalId;
+  (0, import_react.useEffect)(function() {
+    if (isUseComponent && !MODAL_REGISTRY[mid]) {
+      register(mid, modal, args);
+    }
+  }, [isUseComponent, mid, modal, args]);
+  var modalInfo = modals[mid];
+  var showCallback = (0, import_react.useCallback)(function(args2) {
+    return show(mid, args2);
+  }, [mid]);
+  var hideCallback = (0, import_react.useCallback)(function() {
+    return hide(mid);
+  }, [mid]);
+  var removeCallback = (0, import_react.useCallback)(function() {
+    return remove(mid);
+  }, [mid]);
+  var resolveCallback = (0, import_react.useCallback)(function(args2) {
+    var _a;
+    (_a = modalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.resolve(args2);
+    delete modalCallbacks[mid];
+  }, [mid]);
+  var rejectCallback = (0, import_react.useCallback)(function(args2) {
+    var _a;
+    (_a = modalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.reject(args2);
+    delete modalCallbacks[mid];
+  }, [mid]);
+  var resolveHide = (0, import_react.useCallback)(function(args2) {
+    var _a;
+    (_a = hideModalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.resolve(args2);
+    delete hideModalCallbacks[mid];
+  }, [mid]);
+  return (0, import_react.useMemo)(function() {
+    return {
+      id: mid,
+      args: modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args,
+      visible: !!(modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.visible),
+      keepMounted: !!(modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.keepMounted),
+      show: showCallback,
+      hide: hideCallback,
+      remove: removeCallback,
+      resolve: resolveCallback,
+      reject: rejectCallback,
+      resolveHide
+    };
+  }, [
+    mid,
+    modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args,
+    modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.visible,
+    modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.keepMounted,
+    showCallback,
+    hideCallback,
+    removeCallback,
+    resolveCallback,
+    rejectCallback,
+    resolveHide
+  ]);
+}
+var import_react, __assign, __rest, symModalId, initialState, NiceModalContext, NiceModalIdContext, MODAL_REGISTRY, ALREADY_MOUNTED, uidSeed, dispatch, getUid, reducer, modalCallbacks, hideModalCallbacks, getModalId, remove, setFlags, create, register, unregister, NiceModalPlaceholder, InnerContextProvider, Provider, ModalDef, ModalHolder, antdModal, antdDrawer, muiDialog, bootstrapDialog, NiceModal, esm_default;
+var init_esm = __esm({
+  "../../node_modules/@ebay/nice-modal-react/lib/esm/index.js"() {
+    "use strict";
+    import_react = __toESM(require("react"));
+    __assign = function() {
+      __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+        }
+        return t;
+      };
+      return __assign.apply(this, arguments);
+    };
+    __rest = function(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+            t[p[i]] = s[p[i]];
+        }
+      return t;
+    };
+    symModalId = /* @__PURE__ */ Symbol("NiceModalId");
+    initialState = {};
+    NiceModalContext = import_react.default.createContext(initialState);
+    NiceModalIdContext = import_react.default.createContext(null);
+    MODAL_REGISTRY = {};
+    ALREADY_MOUNTED = {};
+    uidSeed = 0;
+    dispatch = function() {
+      throw new Error("No dispatch method detected, did you embed your app with NiceModal.Provider?");
+    };
+    getUid = function() {
+      return "_nice_modal_" + uidSeed++;
+    };
+    reducer = function(state, action) {
+      var _a, _b, _c;
+      if (state === void 0) {
+        state = initialState;
+      }
+      switch (action.type) {
+        case "nice-modal/show": {
+          var _d = action.payload, modalId = _d.modalId, args = _d.args;
+          return __assign(__assign({}, state), (_a = {}, _a[modalId] = __assign(__assign({}, state[modalId]), {
+            id: modalId,
+            args,
+            // If modal is not mounted, mount it first then make it visible.
+            // There is logic inside HOC wrapper to make it visible after its first mount.
+            // This mechanism ensures the entering transition.
+            visible: !!ALREADY_MOUNTED[modalId],
+            delayVisible: !ALREADY_MOUNTED[modalId]
+          }), _a));
+        }
+        case "nice-modal/hide": {
+          var modalId = action.payload.modalId;
+          if (!state[modalId])
+            return state;
+          return __assign(__assign({}, state), (_b = {}, _b[modalId] = __assign(__assign({}, state[modalId]), { visible: false }), _b));
+        }
+        case "nice-modal/remove": {
+          var modalId = action.payload.modalId;
+          var newState = __assign({}, state);
+          delete newState[modalId];
+          return newState;
+        }
+        case "nice-modal/set-flags": {
+          var _e = action.payload, modalId = _e.modalId, flags = _e.flags;
+          return __assign(__assign({}, state), (_c = {}, _c[modalId] = __assign(__assign({}, state[modalId]), flags), _c));
+        }
+        default:
+          return state;
+      }
+    };
+    modalCallbacks = {};
+    hideModalCallbacks = {};
+    getModalId = function(modal) {
+      if (typeof modal === "string")
+        return modal;
+      if (!modal[symModalId]) {
+        modal[symModalId] = getUid();
+      }
+      return modal[symModalId];
+    };
+    remove = function(modal) {
+      var modalId = getModalId(modal);
+      dispatch(removeModal(modalId));
+      delete modalCallbacks[modalId];
+      delete hideModalCallbacks[modalId];
+    };
+    setFlags = function(modalId, flags) {
+      dispatch(setModalFlags(modalId, flags));
+    };
+    create = function(Comp) {
+      return function(_a) {
+        var _b;
+        var defaultVisible = _a.defaultVisible, keepMounted = _a.keepMounted, id = _a.id, props = __rest(_a, ["defaultVisible", "keepMounted", "id"]);
+        var _c = useModal(id), args = _c.args, show2 = _c.show;
+        var modals = (0, import_react.useContext)(NiceModalContext);
+        var shouldMount = !!modals[id];
+        (0, import_react.useEffect)(function() {
+          if (defaultVisible) {
+            show2();
+          }
+          ALREADY_MOUNTED[id] = true;
+          return function() {
+            delete ALREADY_MOUNTED[id];
+          };
+        }, [id, show2, defaultVisible]);
+        (0, import_react.useEffect)(function() {
+          if (keepMounted)
+            setFlags(id, { keepMounted: true });
+        }, [id, keepMounted]);
+        var delayVisible = (_b = modals[id]) === null || _b === void 0 ? void 0 : _b.delayVisible;
+        (0, import_react.useEffect)(function() {
+          if (delayVisible) {
+            show2(args);
+          }
+        }, [delayVisible, args, show2]);
+        if (!shouldMount)
+          return null;
+        return import_react.default.createElement(
+          NiceModalIdContext.Provider,
+          { value: id },
+          import_react.default.createElement(Comp, __assign({}, props, args))
+        );
+      };
+    };
+    register = function(id, comp, props) {
+      if (!MODAL_REGISTRY[id]) {
+        MODAL_REGISTRY[id] = { comp, props };
+      } else {
+        MODAL_REGISTRY[id].props = props;
+      }
+    };
+    unregister = function(id) {
+      delete MODAL_REGISTRY[id];
+    };
+    NiceModalPlaceholder = function() {
+      var modals = (0, import_react.useContext)(NiceModalContext);
+      var visibleModalIds = Object.keys(modals).filter(function(id) {
+        return !!modals[id];
+      });
+      visibleModalIds.forEach(function(id) {
+        if (!MODAL_REGISTRY[id] && !ALREADY_MOUNTED[id]) {
+          console.warn("No modal found for id: " + id + ". Please check the id or if it is registered or declared via JSX.");
+          return;
+        }
+      });
+      var toRender = visibleModalIds.filter(function(id) {
+        return MODAL_REGISTRY[id];
+      }).map(function(id) {
+        return __assign({ id }, MODAL_REGISTRY[id]);
+      });
+      return import_react.default.createElement(import_react.default.Fragment, null, toRender.map(function(t) {
+        return import_react.default.createElement(t.comp, __assign({ key: t.id, id: t.id }, t.props));
+      }));
+    };
+    InnerContextProvider = function(_a) {
+      var children = _a.children;
+      var arr = (0, import_react.useReducer)(reducer, initialState);
+      var modals = arr[0];
+      dispatch = arr[1];
+      return import_react.default.createElement(
+        NiceModalContext.Provider,
+        { value: modals },
+        children,
+        import_react.default.createElement(NiceModalPlaceholder, null)
+      );
+    };
+    Provider = function(_a) {
+      var children = _a.children, givenDispatch = _a.dispatch, givenModals = _a.modals;
+      if (!givenDispatch || !givenModals) {
+        return import_react.default.createElement(InnerContextProvider, null, children);
+      }
+      dispatch = givenDispatch;
+      return import_react.default.createElement(
+        NiceModalContext.Provider,
+        { value: givenModals },
+        children,
+        import_react.default.createElement(NiceModalPlaceholder, null)
+      );
+    };
+    ModalDef = function(_a) {
+      var id = _a.id, component = _a.component;
+      (0, import_react.useEffect)(function() {
+        register(id, component);
+        return function() {
+          unregister(id);
+        };
+      }, [id, component]);
+      return null;
+    };
+    ModalHolder = function(_a) {
+      var _b;
+      var modal = _a.modal, _c = _a.handler, handler = _c === void 0 ? {} : _c, restProps = __rest(_a, ["modal", "handler"]);
+      var mid = (0, import_react.useMemo)(function() {
+        return getUid();
+      }, []);
+      var ModalComp = typeof modal === "string" ? (_b = MODAL_REGISTRY[modal]) === null || _b === void 0 ? void 0 : _b.comp : modal;
+      if (!handler) {
+        throw new Error("No handler found in NiceModal.ModalHolder.");
+      }
+      if (!ModalComp) {
+        throw new Error("No modal found for id: " + modal + " in NiceModal.ModalHolder.");
+      }
+      handler.show = (0, import_react.useCallback)(function(args) {
+        return show(mid, args);
+      }, [mid]);
+      handler.hide = (0, import_react.useCallback)(function() {
+        return hide(mid);
+      }, [mid]);
+      return import_react.default.createElement(ModalComp, __assign({ id: mid }, restProps));
+    };
+    antdModal = function(modal) {
+      return {
+        visible: modal.visible,
+        onOk: function() {
+          return modal.hide();
+        },
+        onCancel: function() {
+          return modal.hide();
+        },
+        afterClose: function() {
+          modal.resolveHide();
+          if (!modal.keepMounted)
+            modal.remove();
+        }
+      };
+    };
+    antdDrawer = function(modal) {
+      return {
+        visible: modal.visible,
+        onClose: function() {
+          return modal.hide();
+        },
+        afterVisibleChange: function(v) {
+          if (!v) {
+            modal.resolveHide();
+          }
+          !v && !modal.keepMounted && modal.remove();
+        }
+      };
+    };
+    muiDialog = function(modal) {
+      return {
+        open: modal.visible,
+        onClose: function() {
+          return modal.hide();
+        },
+        onExited: function() {
+          modal.resolveHide();
+          !modal.keepMounted && modal.remove();
+        }
+      };
+    };
+    bootstrapDialog = function(modal) {
+      return {
+        show: modal.visible,
+        onHide: function() {
+          return modal.hide();
+        },
+        onExited: function() {
+          modal.resolveHide();
+          !modal.keepMounted && modal.remove();
+        }
+      };
+    };
+    NiceModal = {
+      Provider,
+      ModalDef,
+      ModalHolder,
+      NiceModalContext,
+      create,
+      register,
+      getModal,
+      show,
+      hide,
+      remove,
+      useModal,
+      reducer,
+      antdModal,
+      antdDrawer,
+      muiDialog,
+      bootstrapDialog
+    };
+    esm_default = NiceModal;
+  }
+});
+
 // src/types/payments.ts
 var isNewCard, PaymentType, PaymentStatus;
 var init_payments = __esm({
@@ -133,7 +575,7 @@ var init_errors = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.5.3";
+    version = "0.5.5";
   }
 });
 
@@ -259,28 +701,28 @@ var init_logger = __esm({
 });
 
 // src/context/SpreePayActionsContext.tsx
-var import_react, import_jsx_runtime, processLogger, SpreePayActionsContext, SpreePayProvider, useSpreePay, useSpreePaymentMethod, useSpreePayEnv, useSpreePayRegister;
+var import_react2, import_jsx_runtime, processLogger, SpreePayActionsContext, SpreePayProvider, useSpreePay, useSpreePaymentMethod, useSpreePayEnv, useSpreePayRegister;
 var init_SpreePayActionsContext = __esm({
   "src/context/SpreePayActionsContext.tsx"() {
     "use strict";
-    import_react = require("react");
+    import_react2 = require("react");
     init_errors();
     init_logger();
     import_jsx_runtime = require("react/jsx-runtime");
     processLogger = logger.child("process");
-    SpreePayActionsContext = (0, import_react.createContext)(void 0);
+    SpreePayActionsContext = (0, import_react2.createContext)(void 0);
     SpreePayProvider = ({ children, env }) => {
-      const processRef = (0, import_react.useRef)(null);
-      const inFlightRef = (0, import_react.useRef)(false);
-      const [selectedPaymentMethod, setSelectedPaymentMethod] = (0, import_react.useState)({
+      const processRef = (0, import_react2.useRef)(null);
+      const inFlightRef = (0, import_react2.useRef)(false);
+      const [selectedPaymentMethod, setSelectedPaymentMethod] = (0, import_react2.useState)({
         type: "CREDIT_CARD" /* CREDIT_CARD */,
         method: null
       });
-      const [isInternalProcessing, setInternalProcessing] = (0, import_react.useState)(false);
-      const register = (0, import_react.useCallback)((fn) => {
+      const [isInternalProcessing, setInternalProcessing] = (0, import_react2.useState)(false);
+      const register2 = (0, import_react2.useCallback)((fn) => {
         processRef.current = fn;
       }, []);
-      const process = (0, import_react.useCallback)(
+      const process = (0, import_react2.useCallback)(
         async (data) => {
           if (!processRef.current) {
             const error = new Error("SpreePay process function not registered");
@@ -330,14 +772,14 @@ var init_SpreePayActionsContext = __esm({
         enabled: Boolean(selectedPaymentMethod.method),
         isInternalProcessing,
         process,
-        register,
+        register: register2,
         selectedPaymentMethod,
         setSelectedPaymentMethod
       };
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpreePayActionsContext.Provider, { value, children });
     };
     useSpreePay = () => {
-      const ctx = (0, import_react.useContext)(SpreePayActionsContext);
+      const ctx = (0, import_react2.useContext)(SpreePayActionsContext);
       if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
       return {
         process: ctx.process,
@@ -347,7 +789,7 @@ var init_SpreePayActionsContext = __esm({
       };
     };
     useSpreePaymentMethod = () => {
-      const ctx = (0, import_react.useContext)(SpreePayActionsContext);
+      const ctx = (0, import_react2.useContext)(SpreePayActionsContext);
       if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
       return {
         setSelectedPaymentMethod: ctx.setSelectedPaymentMethod,
@@ -356,12 +798,12 @@ var init_SpreePayActionsContext = __esm({
       };
     };
     useSpreePayEnv = () => {
-      const ctx = (0, import_react.useContext)(SpreePayActionsContext);
+      const ctx = (0, import_react2.useContext)(SpreePayActionsContext);
       if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
       return ctx.env;
     };
     useSpreePayRegister = () => {
-      const ctx = (0, import_react.useContext)(SpreePayActionsContext);
+      const ctx = (0, import_react2.useContext)(SpreePayActionsContext);
       if (!ctx) throw new Error("useSpreePayRegister must be used within a SpreePayProvider");
       return { register: ctx.register };
     };
@@ -457,20 +899,20 @@ var init_config = __esm({
 });
 
 // src/context/StaticConfigContext.tsx
-var import_react2, import_jsx_runtime2, StaticConfigContext, StaticConfigProvider, useStaticConfig;
+var import_react3, import_jsx_runtime2, StaticConfigContext, StaticConfigProvider, useStaticConfig;
 var init_StaticConfigContext = __esm({
   "src/context/StaticConfigContext.tsx"() {
     "use strict";
     "use client";
-    import_react2 = require("react");
+    import_react3 = require("react");
     init_logger();
     init_SpreePayActionsContext();
     init_config();
     import_jsx_runtime2 = require("react/jsx-runtime");
-    StaticConfigContext = (0, import_react2.createContext)(null);
+    StaticConfigContext = (0, import_react3.createContext)(null);
     StaticConfigProvider = ({ children, props }) => {
       const { environment, tenantId } = useSpreePayEnv();
-      const staticConfig = (0, import_react2.useMemo)(() => {
+      const staticConfig = (0, import_react3.useMemo)(() => {
         const envConfig = config[environment];
         const isKnownTenant = tenantId in envConfig;
         if (!isKnownTenant) {
@@ -482,11 +924,11 @@ var init_StaticConfigContext = __esm({
         const appKey = isKnownTenant ? tenantId : "moca";
         return envConfig[appKey];
       }, [environment, tenantId]);
-      const value = (0, import_react2.useMemo)(() => ({ staticConfig, appProps: props }), [staticConfig, props]);
+      const value = (0, import_react3.useMemo)(() => ({ staticConfig, appProps: props }), [staticConfig, props]);
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value, children });
     };
     useStaticConfig = () => {
-      const ctx = (0, import_react2.useContext)(StaticConfigContext);
+      const ctx = (0, import_react3.useContext)(StaticConfigContext);
       if (!ctx) throw new Error("useStaticConfig must be used within StaticConfigProvider");
       return ctx;
     };
@@ -531,17 +973,17 @@ function PortalContainerProvider({
   container,
   children
 }) {
-  return import_react3.default.createElement(PortalContainerContext.Provider, { value: { container } }, children);
+  return import_react4.default.createElement(PortalContainerContext.Provider, { value: { container } }, children);
 }
 function usePortalContainer() {
-  return import_react3.default.useContext(PortalContainerContext).container;
+  return import_react4.default.useContext(PortalContainerContext).container;
 }
-var import_react3, PortalContainerContext;
+var import_react4, PortalContainerContext;
 var init_portal = __esm({
   "src/ui/portal.ts"() {
     "use strict";
-    import_react3 = __toESM(require("react"), 1);
-    PortalContainerContext = import_react3.default.createContext({ container: null });
+    import_react4 = __toESM(require("react"), 1);
+    PortalContainerContext = import_react4.default.createContext({ container: null });
   }
 });
 
@@ -636,18 +1078,18 @@ var init_dialog = __esm({
 });
 
 // src/modals/Iframe3ds.tsx
-var import_react4, import_nice_modal_react, import_jsx_runtime4, Iframe3ds;
+var import_react5, import_jsx_runtime4, Iframe3ds;
 var init_Iframe3ds = __esm({
   "src/modals/Iframe3ds.tsx"() {
     "use strict";
-    import_react4 = require("react");
-    import_nice_modal_react = __toESM(require("@ebay/nice-modal-react"), 1);
+    import_react5 = require("react");
+    init_esm();
     init_eventBus();
     init_dialog();
     import_jsx_runtime4 = require("react/jsx-runtime");
-    Iframe3ds = import_nice_modal_react.default.create(({ url }) => {
-      const modal = (0, import_nice_modal_react.useModal)();
-      (0, import_react4.useEffect)(() => {
+    Iframe3ds = esm_default.create(({ url }) => {
+      const modal = useModal();
+      (0, import_react5.useEffect)(() => {
         return bus.on("paymentIntent", (data) => {
           modal.resolve(data.paymentIntent);
           modal.remove();
@@ -970,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 };
     };
   }
 });
@@ -1010,16 +1452,16 @@ var init_useSlapiBalance = __esm({
 });
 
 // src/context/LoginStatusContext.tsx
-var import_react6, import_jsx_runtime5, LoginStatusContext, LoginStatusProvider, useIsLoggedIn;
+var import_react7, import_jsx_runtime5, LoginStatusContext, LoginStatusProvider, useIsLoggedIn;
 var init_LoginStatusContext = __esm({
   "src/context/LoginStatusContext.tsx"() {
     "use strict";
     "use client";
-    import_react6 = require("react");
+    import_react7 = require("react");
     import_jsx_runtime5 = require("react/jsx-runtime");
-    LoginStatusContext = (0, import_react6.createContext)(false);
+    LoginStatusContext = (0, import_react7.createContext)(false);
     LoginStatusProvider = ({ isLoggedIn, children }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoginStatusContext.Provider, { value: isLoggedIn, children });
-    useIsLoggedIn = () => (0, import_react6.useContext)(LoginStatusContext);
+    useIsLoggedIn = () => (0, import_react7.useContext)(LoginStatusContext);
   }
 });
 
@@ -1234,11 +1676,11 @@ var init_InfoBanner = __esm({
 });
 
 // src/components/common/PointsSwitch.tsx
-var import_react7, import_jsx_runtime10, PointsSwitch;
+var import_react8, import_jsx_runtime10, PointsSwitch;
 var init_PointsSwitch = __esm({
   "src/components/common/PointsSwitch.tsx"() {
     "use strict";
-    import_react7 = require("react");
+    import_react8 = require("react");
     init_StaticConfigContext();
     init_useSlapiBalance();
     init_useSpreePayConfig();
@@ -1255,7 +1697,7 @@ var init_PointsSwitch = __esm({
       const { balance } = useSlapiBalance();
       const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
       const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-      const id = (0, import_react7.useId)();
+      const id = (0, import_react8.useId)();
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
@@ -1936,11 +2378,11 @@ var init_input = __esm({
 });
 
 // ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
-var React13, ReactDOM2, import_react_slot5, import_jsx_runtime35, NODES2, Primitive2;
+var React14, ReactDOM2, import_react_slot5, import_jsx_runtime35, NODES2, Primitive2;
 var init_dist = __esm({
   "../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs"() {
     "use strict";
-    React13 = __toESM(require("react"), 1);
+    React14 = __toESM(require("react"), 1);
     ReactDOM2 = __toESM(require("react-dom"), 1);
     import_react_slot5 = require("@radix-ui/react-slot");
     import_jsx_runtime35 = require("react/jsx-runtime");
@@ -1965,7 +2407,7 @@ var init_dist = __esm({
     ];
     Primitive2 = NODES2.reduce((primitive, node) => {
       const Slot2 = (0, import_react_slot5.createSlot)(`Primitive.${node}`);
-      const Node2 = React13.forwardRef((props, forwardedRef) => {
+      const Node2 = React14.forwardRef((props, forwardedRef) => {
         const { asChild, ...primitiveProps } = props;
         const Comp = asChild ? Slot2 : node;
         if (typeof window !== "undefined") {
@@ -1983,17 +2425,17 @@ var init_dist = __esm({
 function isValidOrientation(orientation) {
   return ORIENTATIONS.includes(orientation);
 }
-var React14, import_jsx_runtime36, NAME, DEFAULT_ORIENTATION, ORIENTATIONS, Separator, Root6;
+var React15, import_jsx_runtime36, NAME, DEFAULT_ORIENTATION, ORIENTATIONS, Separator, Root6;
 var init_dist2 = __esm({
   "../../node_modules/@radix-ui/react-separator/dist/index.mjs"() {
     "use strict";
-    React14 = __toESM(require("react"), 1);
+    React15 = __toESM(require("react"), 1);
     init_dist();
     import_jsx_runtime36 = require("react/jsx-runtime");
     NAME = "Separator";
     DEFAULT_ORIENTATION = "horizontal";
     ORIENTATIONS = ["horizontal", "vertical"];
-    Separator = React14.forwardRef((props, forwardedRef) => {
+    Separator = React15.forwardRef((props, forwardedRef) => {
       const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
       const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
       const ariaOrientation = orientation === "vertical" ? orientation : void 0;
@@ -2050,10 +2492,10 @@ function useBaseERC20Token() {
   const { address } = (0, import_wagmi2.useAccount)();
   const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
   const defaultClient = (0, import_wagmi2.usePublicClient)();
-  const [rows, setRows] = React15.useState([]);
-  const [isLoading, setLoading] = React15.useState(false);
-  const [error, setError] = React15.useState(null);
-  React15.useEffect(() => {
+  const [rows, setRows] = React16.useState([]);
+  const [isLoading, setLoading] = React16.useState(false);
+  const [error, setError] = React16.useState(null);
+  React16.useEffect(() => {
     let cancelled = false;
     async function run() {
       const client = baseClient ?? defaultClient;
@@ -2108,11 +2550,11 @@ function useBaseERC20Token() {
   }, [address, baseClient, defaultClient]);
   return { isLoading, error: error ?? null, erc20Balances: rows };
 }
-var React15, import_viem5, import_wagmi2;
+var React16, import_viem5, import_wagmi2;
 var init_useBaseERC20Token = __esm({
   "src/hooks/useBaseERC20Token.ts"() {
     "use strict";
-    React15 = __toESM(require("react"), 1);
+    React16 = __toESM(require("react"), 1);
     import_viem5 = require("viem");
     import_wagmi2 = require("wagmi");
     init_baseTokens();
@@ -2157,12 +2599,12 @@ var init_useBaseTokens = __esm({
 });
 
 // src/modals/CryptoSelectModal.tsx
-var import_react17, import_nice_modal_react5, import_jsx_runtime38, CryptoSelectModal;
+var import_react18, import_jsx_runtime38, CryptoSelectModal;
 var init_CryptoSelectModal = __esm({
   "src/modals/CryptoSelectModal.tsx"() {
     "use strict";
-    import_react17 = require("react");
-    import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
+    import_react18 = require("react");
+    init_esm();
     init_input();
     init_separator();
     init_symbolLogos();
@@ -2172,13 +2614,13 @@ var init_CryptoSelectModal = __esm({
     init_useBaseTokens();
     init_dialog();
     import_jsx_runtime38 = require("react/jsx-runtime");
-    CryptoSelectModal = import_nice_modal_react5.default.create(() => {
-      const modal = (0, import_nice_modal_react5.useModal)();
+    CryptoSelectModal = esm_default.create(() => {
+      const modal = useModal();
       const { isLoading, error, erc20Balances } = useBaseERC20Token();
       const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
       const { tokens, tokensIsLoading } = useBaseTokens();
-      const [search, setSearch] = (0, import_react17.useState)("");
-      const filteredCoins = (0, import_react17.useMemo)(() => {
+      const [search, setSearch] = (0, import_react18.useState)("");
+      const filteredCoins = (0, import_react18.useMemo)(() => {
         return tokens.filter(
           (coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
         );
@@ -2282,16 +2724,16 @@ var init_CryptoSelectModal = __esm({
 });
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-var import_nice_modal_react6, import_jsx_runtime39, SelectCoinButton;
+var import_jsx_runtime39, SelectCoinButton;
 var init_SelectCoinButton = __esm({
   "src/components/CryptoTab/Crypto/SelectCoinButton.tsx"() {
     "use strict";
-    import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
+    init_esm();
     init_CryptoSelectModal();
     import_jsx_runtime39 = require("react/jsx-runtime");
     SelectCoinButton = () => {
       const openModal = () => {
-        import_nice_modal_react6.default.show(CryptoSelectModal);
+        esm_default.show(CryptoSelectModal);
       };
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
@@ -2338,11 +2780,11 @@ var init_SelectedCoin = __esm({
 });
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_react18, import_wagmi4, import_jsx_runtime41, Crypto;
+var import_react19, import_wagmi4, import_jsx_runtime41, Crypto;
 var init_Crypto = __esm({
   "src/components/CryptoTab/Crypto/Crypto.tsx"() {
     "use strict";
-    import_react18 = require("react");
+    import_react19 = require("react");
     import_wagmi4 = require("wagmi");
     init_SpreePayActionsContext();
     init_useCryptoPayment();
@@ -2360,8 +2802,8 @@ var init_Crypto = __esm({
       const { cryptoPayment } = useCryptoPayment();
       const { spreePayConfig } = useSpreePayConfig();
       const isWalletConnected = Boolean(address);
-      const { register } = useSpreePayRegister();
-      const handlePay = (0, import_react18.useCallback)(
+      const { register: register2 } = useSpreePayRegister();
+      const handlePay = (0, import_react19.useCallback)(
         async (data) => {
           try {
             const res = await cryptoPayment(data);
@@ -2372,9 +2814,9 @@ var init_Crypto = __esm({
         },
         [cryptoPayment]
       );
-      (0, import_react18.useEffect)(() => {
-        register(handlePay);
-      }, [register, handlePay]);
+      (0, import_react19.useEffect)(() => {
+        register2(handlePay);
+      }, [register2, handlePay]);
       return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-lg leading-7 font-medium text-(--brand-primary) md:text-[22px]", children: "Pay with Crypto" }),
@@ -2408,13 +2850,13 @@ function getCachedWagmiConfig(projectId, appName) {
   }
   return cfg2;
 }
-var import_react19, import_react_query, import_nice_modal_react7, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime42, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
+var import_react20, import_react_query, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime42, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
 var init_CryptoWrapper = __esm({
   "src/components/CryptoTab/Crypto/CryptoWrapper.tsx"() {
     "use strict";
-    import_react19 = require("react");
+    import_react20 = require("react");
     import_react_query = require("@tanstack/react-query");
-    import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
+    init_esm();
     import_rainbowkit2 = require("@rainbow-me/rainbowkit");
     import_styles = require("@rainbow-me/rainbowkit/styles.css");
     import_wagmi5 = require("wagmi");
@@ -2429,12 +2871,12 @@ var init_CryptoWrapper = __esm({
     CryptoWrapper = () => {
       const isLoggedIn = useIsLoggedIn();
       const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-      const wagmiConfig = (0, import_react19.useMemo)(() => {
+      const wagmiConfig = (0, import_react20.useMemo)(() => {
         if (!spreePayConfig) return null;
         return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
       }, [spreePayConfig]);
       if (!isLoggedIn || configIsLoading || !wagmiConfig) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Crypto, {}) }) }) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(esm_default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Crypto, {}) }) }) }) });
     };
   }
 });
@@ -2481,11 +2923,11 @@ var init_CryptoTab2 = __esm({
 });
 
 // src/hooks/payments/useCryptoComPayment.ts
-var import_nice_modal_react8, cryptoComLogger, useCryptoComPayment;
+var cryptoComLogger, useCryptoComPayment;
 var init_useCryptoComPayment = __esm({
   "src/hooks/payments/useCryptoComPayment.ts"() {
     "use strict";
-    import_nice_modal_react8 = __toESM(require("@ebay/nice-modal-react"), 1);
+    init_esm();
     init_SpreePayActionsContext();
     init_Iframe3ds();
     init_slapi();
@@ -2516,7 +2958,7 @@ var init_useCryptoComPayment = __esm({
         let { status } = paymentResData;
         if (paymentResData.redirectUrl) {
           cryptoComLogger.debug("Opening CDC payment redirect", { paymentId: paymentResData.id });
-          const paymentIntent = await import_nice_modal_react8.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
+          const paymentIntent = await esm_default.show(Iframe3ds, { url: paymentResData.redirectUrl });
           cryptoComLogger.info("CDC payment redirect completed", { paymentIntent });
           if (paymentIntent === "success") {
             cryptoComLogger.debug("Validating CDC payment", { paymentId: paymentResData.id });
@@ -2619,11 +3061,11 @@ var init_Checkout = __esm({
 });
 
 // src/components/CryptoComTab/CryptoComTab.tsx
-var import_react20, import_jsx_runtime45, CryptoComTab;
+var import_react21, import_jsx_runtime45, CryptoComTab;
 var init_CryptoComTab = __esm({
   "src/components/CryptoComTab/CryptoComTab.tsx"() {
     "use strict";
-    import_react20 = require("react");
+    import_react21 = require("react");
     init_SpreePayActionsContext();
     init_useCryptoComPayment();
     init_useSpreePayConfig();
@@ -2632,10 +3074,10 @@ var init_CryptoComTab = __esm({
     init_Checkout();
     import_jsx_runtime45 = require("react/jsx-runtime");
     CryptoComTab = () => {
-      const { register } = useSpreePayRegister();
+      const { register: register2 } = useSpreePayRegister();
       const { cryptoComPayment } = useCryptoComPayment();
       const { spreePayConfig } = useSpreePayConfig();
-      const handlePay = (0, import_react20.useCallback)(
+      const handlePay = (0, import_react21.useCallback)(
         async (data) => {
           try {
             const res = await cryptoComPayment(data);
@@ -2646,9 +3088,9 @@ var init_CryptoComTab = __esm({
         },
         [cryptoComPayment]
       );
-      (0, import_react20.useEffect)(() => {
-        register(handlePay);
-      }, [register, handlePay]);
+      (0, import_react21.useEffect)(() => {
+        register2(handlePay);
+      }, [register2, handlePay]);
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: [
         spreePayConfig?.cryptoCom.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InfoBanner, { message: spreePayConfig.cryptoCom.infoMessage }),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Legal, {}),
@@ -2690,20 +3132,20 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
-var import_react24 = require("react");
-var import_nice_modal_react9 = __toESM(require("@ebay/nice-modal-react"), 1);
+var import_react25 = require("react");
+init_esm();
 var import_swr5 = require("swr");
 
 // src/SpreePayContent.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 
 // src/hooks/payments/useCardPayment.ts
-var import_nice_modal_react2 = __toESM(require("@ebay/nice-modal-react"), 1);
+init_esm();
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_Iframe3ds();
@@ -2773,7 +3215,7 @@ var useCardPayment = () => {
       cardPaymentLogger.debug("Starting 3DS flow", {
         paymentId: paymentResData.id
       });
-      const paymentIntent = await import_nice_modal_react2.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      const paymentIntent = await esm_default.show(Iframe3ds, { url: paymentResData.redirectUrl });
       if (paymentIntent) {
         cardPaymentLogger.debug("3DS completed, validating", {
           paymentId: paymentResData.id,
@@ -2920,7 +3362,7 @@ init_logger();
 init_useSpreePayConfig();
 
 // src/hooks/payments/utils.ts
-var import_nice_modal_react3 = __toESM(require("@ebay/nice-modal-react"), 1);
+init_esm();
 init_Iframe3ds();
 init_slapi();
 init_errors();
@@ -2968,7 +3410,7 @@ async function longPollCardStatus(paymentId) {
       return detail.status;
     }
     if (!shown3ds && detail.card?.redirectUrl) {
-      const paymentIntent = await import_nice_modal_react3.default.show(Iframe3ds, { url: detail.card?.redirectUrl });
+      const paymentIntent = await esm_default.show(Iframe3ds, { url: detail.card?.redirectUrl });
       shown3ds = true;
       if (paymentIntent) {
         await SlapiPaymentService.validate3DS({ paymentId });
@@ -3089,7 +3531,7 @@ var usePointsPayment = (mode = "web2") => {
 };
 
 // src/hooks/payments/useSplitCardPayments.ts
-var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
+init_esm();
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_Iframe3ds();
@@ -3153,7 +3595,7 @@ var useSplitCardPayments = (mode = "web2") => {
     });
     if (paymentResData.redirectUrl) {
       splitPaymentLogger.debug("Starting 3DS flow for card portion", { paymentId: paymentResData.id });
-      const paymentIntent = await import_nice_modal_react4.default.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      const paymentIntent = await esm_default.show(Iframe3ds, { url: paymentResData.redirectUrl });
       if (paymentIntent) {
         splitPaymentLogger.debug("3DS completed, validating", { paymentId: paymentResData.id });
         await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
@@ -3228,14 +3670,14 @@ var useSplitCardPayments = (mode = "web2") => {
 };
 
 // src/hooks/useCards.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_swr2 = __toESM(require("swr"), 1);
 init_SpreePayActionsContext();
 var URL2 = "/v1/payments/cards";
 var useCards = () => {
   const { origin } = useSpreePayEnv();
   const { data, isLoading, mutate } = (0, import_swr2.default)(origin ? `${URL2}?origin=${origin}` : URL2);
-  const cards = (0, import_react5.useMemo)(() => data?.data.filter((c) => c.active) ?? [], [data]);
+  const cards = (0, import_react6.useMemo)(() => data?.data.filter((c) => c.active) ?? [], [data]);
   return {
     cards,
     cardsIsLoading: isLoading,
@@ -3252,7 +3694,7 @@ init_split();
 init_CheckoutButton();
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_stripe_js = require("@stripe/stripe-js");
 init_LoginStatusContext();
@@ -3261,13 +3703,13 @@ init_useSpreePayConfig();
 init_InfoBanner();
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 init_utils();
 init_slapi();
 init_payments();
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
-  const [isRemoving, setIsRemoving] = (0, import_react8.useState)(false);
+  const [isRemoving, setIsRemoving] = (0, import_react9.useState)(false);
   const removeDisabled = isSelected || isRemoving;
   const handleRemove = async (e) => {
     e.stopPropagation();
@@ -3332,7 +3774,7 @@ var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
 };
 var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
   const { cards, cardsIsLoading, mutateCards } = useCards();
-  const allCards = (0, import_react8.useMemo)(() => [...cards, ...newCards], [cards, newCards]);
+  const allCards = (0, import_react9.useMemo)(() => [...cards, ...newCards], [cards, newCards]);
   const handleRemove = async (card) => {
     if (isNewCard(card)) {
       onRemoveNewCard(card);
@@ -3358,7 +3800,7 @@ var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 
 // src/ui/button.tsx
@@ -3440,15 +3882,15 @@ var stripeElementClasses = {
   invalid: "focus-visible:ring-(--negative)",
   focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
-var CreditCardForm = ({ cancel, saveCard }) => {
-  const [cardError, setCardError] = (0, import_react9.useState)(void 0);
-  const [stripeStyles, setStripeStyles] = (0, import_react9.useState)({});
-  const [shouldSaveCard, setShouldSaveCard] = (0, import_react9.useState)(true);
-  const [isSubmitting, setIsSubmitting] = (0, import_react9.useState)(false);
+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);
+  const [isSubmitting, setIsSubmitting] = (0, import_react10.useState)(false);
   const elements = (0, import_react_stripe_js.useElements)();
   const stripe = (0, import_react_stripe_js.useStripe)();
-  const [id] = (0, import_react9.useState)(() => crypto.randomUUID());
-  const formRef = (0, import_react9.useCallback)((node) => {
+  const [id] = (0, import_react10.useState)(() => crypto.randomUUID());
+  const formRef = (0, import_react10.useCallback)((node) => {
     if (!node) return;
     const container = node.closest(".sl-spreepay");
     if (!container) return;
@@ -3547,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",
@@ -3572,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 }) => {
-  const stripePromise = (0, import_react10.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 }) });
+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, showCancel }) });
 };
 var CreditCard = ({ newCards, setNewCards }) => {
-  const [showForm, setShowForm] = (0, import_react10.useState)(false);
+  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({
@@ -3594,7 +4053,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
     setCard(newCard);
     setShowForm(false);
   };
-  const removeNewCard = (0, import_react10.useCallback)(
+  const removeNewCard = (0, import_react11.useCallback)(
     (card) => {
       setNewCards((prev) => prev.filter((c) => c.id !== card.id));
     },
@@ -3613,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,
         {
@@ -3628,26 +4087,35 @@ 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
+      }
+    )
   ] });
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 init_LoginStatusContext();
 init_SpreePayActionsContext();
 init_StaticConfigContext();
+init_useSlapiBalance();
 init_useSpreePayConfig();
 init_common();
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_airkit2 = require("@mocanetwork/airkit");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
@@ -3657,7 +4125,7 @@ init_format();
 init_logger();
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_useSlapiBalance();
@@ -3685,10 +4153,10 @@ function Input({ className, type, ...props }) {
 }
 
 // src/ui/slider.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 
 // ../../node_modules/@radix-ui/react-slider/dist/index.mjs
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 
 // ../../node_modules/@radix-ui/number/dist/index.mjs
 function clamp(value, [min, max]) {
@@ -3707,7 +4175,7 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 }
 
 // ../../node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 function setRef(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -3740,41 +4208,41 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React2.useCallback(composeRefs(...refs), refs);
+  return React3.useCallback(composeRefs(...refs), refs);
 }
 
 // ../../node_modules/@radix-ui/react-context/dist/index.mjs
-var React3 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React3.createContext(defaultContext);
+    const BaseContext = React4.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
-    const Provider = (props) => {
+    const Provider2 = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const value = React3.useMemo(() => context, Object.values(context));
+      const value = React4.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Context.Provider, { value, children });
     };
-    Provider.displayName = rootComponentName + "Provider";
+    Provider2.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const context = React3.useContext(Context);
+      const context = React4.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
     }
-    return [Provider, useContext22];
+    return [Provider2, useContext22];
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React3.createContext(defaultContext);
+      return React4.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React3.useMemo(
+      return React4.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -3797,7 +4265,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React3.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React4.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -3805,16 +4273,16 @@ function composeContextScopes(...scopes) {
 }
 
 // ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 
 // ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-var React4 = __toESM(require("react"), 1);
-var useLayoutEffect2 = globalThis?.document ? React4.useLayoutEffect : () => {
+var React5 = __toESM(require("react"), 1);
+var useLayoutEffect2 = globalThis?.document ? React5.useLayoutEffect : () => {
 };
 
 // ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 var React22 = __toESM(require("react"), 1);
-var useInsertionEffect = React5[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+var useInsertionEffect = React6[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
 function useControllableState({
   prop,
   defaultProp,
@@ -3829,8 +4297,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   if (true) {
-    const isControlledRef = React5.useRef(prop !== void 0);
-    React5.useEffect(() => {
+    const isControlledRef = React6.useRef(prop !== void 0);
+    React6.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -3842,7 +4310,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React5.useCallback(
+  const setValue = React6.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -3861,13 +4329,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React5.useState(defaultProp);
-  const prevValueRef = React5.useRef(value);
-  const onChangeRef = React5.useRef(onChange);
+  const [value, setValue] = React6.useState(defaultProp);
+  const prevValueRef = React6.useRef(value);
+  const onChangeRef = React6.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -3880,19 +4348,19 @@ function isFunction(value) {
 }
 
 // ../../node_modules/@radix-ui/react-direction/dist/index.mjs
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var DirectionContext = React6.createContext(void 0);
+var DirectionContext = React7.createContext(void 0);
 function useDirection(localDir) {
-  const globalDir = React6.useContext(DirectionContext);
+  const globalDir = React7.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 
 // ../../node_modules/@radix-ui/react-use-previous/dist/index.mjs
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 function usePrevious(value) {
-  const ref = React7.useRef({ value, previous: value });
-  return React7.useMemo(() => {
+  const ref = React8.useRef({ value, previous: value });
+  return React8.useMemo(() => {
     if (ref.current.value !== value) {
       ref.current.previous = ref.current.value;
       ref.current.value = value;
@@ -3902,9 +4370,9 @@ function usePrevious(value) {
 }
 
 // ../../node_modules/@radix-ui/react-use-size/dist/index.mjs
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 function useSize(element) {
-  const [size, setSize] = React8.useState(void 0);
+  const [size, setSize] = React9.useState(void 0);
   useLayoutEffect2(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -3939,7 +4407,7 @@ function useSize(element) {
 }
 
 // ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var ReactDOM = __toESM(require("react-dom"), 1);
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -3964,7 +4432,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot2 = (0, import_react_slot2.createSlot)(`Primitive.${node}`);
-  const Node2 = React9.forwardRef((props, forwardedRef) => {
+  const Node2 = React10.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -3977,10 +4445,10 @@ var Primitive = NODES.reduce((primitive, node) => {
 }, {});
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function createCollection(name) {
@@ -3992,14 +4460,14 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = import_react11.default.useRef(null);
-    const itemMap = import_react11.default.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = import_react12.default.useRef(null);
+    const itemMap = import_react12.default.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = (0, import_react_slot3.createSlot)(COLLECTION_SLOT_NAME);
-  const CollectionSlot = import_react11.default.forwardRef(
+  const CollectionSlot = import_react12.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -4011,13 +4479,13 @@ function createCollection(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = (0, import_react_slot3.createSlot)(ITEM_SLOT_NAME);
-  const CollectionItemSlot = import_react11.default.forwardRef(
+  const CollectionItemSlot = import_react12.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = import_react11.default.useRef(null);
+      const ref = import_react12.default.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      import_react11.default.useEffect(() => {
+      import_react12.default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -4027,7 +4495,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = import_react11.default.useCallback(() => {
+    const getItems = import_react12.default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -4062,7 +4530,7 @@ var [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [
   createCollectionScope
 ]);
 var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
-var Slider = React11.forwardRef(
+var Slider = React12.forwardRef(
   (props, forwardedRef) => {
     const {
       name,
@@ -4082,8 +4550,8 @@ var Slider = React11.forwardRef(
       form,
       ...sliderProps
     } = props;
-    const thumbRefs = React11.useRef(/* @__PURE__ */ new Set());
-    const valueIndexToChangeRef = React11.useRef(0);
+    const thumbRefs = React12.useRef(/* @__PURE__ */ new Set());
+    const valueIndexToChangeRef = React12.useRef(0);
     const isHorizontal = orientation === "horizontal";
     const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
     const [values = [], setValues] = useControllableState({
@@ -4095,7 +4563,7 @@ var Slider = React11.forwardRef(
         onValueChange(value2);
       }
     });
-    const valuesBeforeSlideStartRef = React11.useRef(values);
+    const valuesBeforeSlideStartRef = React12.useRef(values);
     function handleSlideStart(value2) {
       const closestIndex = getClosestValueIndex(values, value2);
       updateValues(value2, closestIndex);
@@ -4180,7 +4648,7 @@ var [SliderOrientationProvider, useSliderOrientationContext] = createSliderConte
   size: "width",
   direction: 1
 });
-var SliderHorizontal = React11.forwardRef(
+var SliderHorizontal = React12.forwardRef(
   (props, forwardedRef) => {
     const {
       min,
@@ -4193,9 +4661,9 @@ var SliderHorizontal = React11.forwardRef(
       onStepKeyDown,
       ...sliderProps
     } = props;
-    const [slider, setSlider] = React11.useState(null);
+    const [slider, setSlider] = React12.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));
-    const rectRef = React11.useRef(void 0);
+    const rectRef = React12.useRef(void 0);
     const direction = useDirection(dir);
     const isDirectionLTR = direction === "ltr";
     const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
@@ -4249,7 +4717,7 @@ var SliderHorizontal = React11.forwardRef(
     );
   }
 );
-var SliderVertical = React11.forwardRef(
+var SliderVertical = React12.forwardRef(
   (props, forwardedRef) => {
     const {
       min,
@@ -4261,9 +4729,9 @@ var SliderVertical = React11.forwardRef(
       onStepKeyDown,
       ...sliderProps
     } = props;
-    const sliderRef = React11.useRef(null);
+    const sliderRef = React12.useRef(null);
     const ref = useComposedRefs(forwardedRef, sliderRef);
-    const rectRef = React11.useRef(void 0);
+    const rectRef = React12.useRef(void 0);
     const isSlidingFromBottom = !inverted;
     function getValueFromPointer(pointerPosition) {
       const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
@@ -4314,7 +4782,7 @@ var SliderVertical = React11.forwardRef(
     );
   }
 );
-var SliderImpl = React11.forwardRef(
+var SliderImpl = React12.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSlider,
@@ -4370,7 +4838,7 @@ var SliderImpl = React11.forwardRef(
   }
 );
 var TRACK_NAME = "SliderTrack";
-var SliderTrack = React11.forwardRef(
+var SliderTrack = React12.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSlider, ...trackProps } = props;
     const context = useSliderContext(TRACK_NAME, __scopeSlider);
@@ -4387,12 +4855,12 @@ var SliderTrack = React11.forwardRef(
 );
 SliderTrack.displayName = TRACK_NAME;
 var RANGE_NAME = "SliderRange";
-var SliderRange = React11.forwardRef(
+var SliderRange = React12.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSlider, ...rangeProps } = props;
     const context = useSliderContext(RANGE_NAME, __scopeSlider);
     const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
-    const ref = React11.useRef(null);
+    const ref = React12.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const valuesCount = context.values.length;
     const percentages = context.values.map(
@@ -4418,24 +4886,24 @@ var SliderRange = React11.forwardRef(
 );
 SliderRange.displayName = RANGE_NAME;
 var THUMB_NAME = "SliderThumb";
-var SliderThumb = React11.forwardRef(
+var SliderThumb = React12.forwardRef(
   (props, forwardedRef) => {
     const getItems = useCollection(props.__scopeSlider);
-    const [thumb, setThumb] = React11.useState(null);
+    const [thumb, setThumb] = React12.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
-    const index = React11.useMemo(
+    const index = React12.useMemo(
       () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
       [getItems, thumb]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
   }
 );
-var SliderThumbImpl = React11.forwardRef(
+var SliderThumbImpl = React12.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSlider, index, name, ...thumbProps } = props;
     const context = useSliderContext(THUMB_NAME, __scopeSlider);
     const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
-    const [thumb, setThumb] = React11.useState(null);
+    const [thumb, setThumb] = React12.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
     const isFormControl = thumb ? context.form || !!thumb.closest("form") : true;
     const size = useSize(thumb);
@@ -4444,7 +4912,7 @@ var SliderThumbImpl = React11.forwardRef(
     const label = getLabel(index, context.values.length);
     const orientationSize = size?.[orientation.size];
     const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       if (thumb) {
         context.thumbs.add(thumb);
         return () => {
@@ -4497,12 +4965,12 @@ var SliderThumbImpl = React11.forwardRef(
 );
 SliderThumb.displayName = THUMB_NAME;
 var BUBBLE_INPUT_NAME = "RadioBubbleInput";
-var SliderBubbleInput = React11.forwardRef(
+var SliderBubbleInput = React12.forwardRef(
   ({ __scopeSlider, value, ...props }, forwardedRef) => {
-    const ref = React11.useRef(null);
+    const ref = React12.useRef(null);
     const composedRefs = useComposedRefs(ref, forwardedRef);
     const prevValue = usePrevious(value);
-    React11.useEffect(() => {
+    React12.useEffect(() => {
       const input = ref.current;
       if (!input) return;
       const inputProto = window.HTMLInputElement.prototype;
@@ -4593,7 +5061,7 @@ init_utils2();
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function Slider2(props) {
   const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
-  const _values = React12.useMemo(
+  const _values = React13.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -4660,7 +5128,7 @@ var PointsSelector = (props) => {
   const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (amount ?? 0) / pointsConversionRatio : 0;
   const max = Math.min(maxByAmount, balance?.availablePoints ?? 0);
   const step = 10;
-  const [splitTokens, setSplitTokens] = (0, import_react13.useState)(0);
+  const [splitTokens, setSplitTokens] = (0, import_react14.useState)(0);
   const usdAmount = getSplitAmount(amount ?? 0, splitTokens, pointsConversionRatio);
   const pointsValue = String(Math.round(splitTokens));
   const usdWithFee = usdAmount + getTransactionFee(usdAmount, transactionFeePercentage);
@@ -4721,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,
@@ -4758,14 +5228,14 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
   const { currencyCode, exchangeRate, foreignCurrencyAmount } = appProps;
-  const [address, setAddress] = (0, import_react14.useState)(null);
-  const [walletReady, setWalletReady] = (0, import_react14.useState)(false);
+  const [address, setAddress] = (0, import_react15.useState)(null);
+  const [walletReady, setWalletReady] = (0, import_react15.useState)(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-  const prevPointsChainRef = (0, import_react14.useRef)(spreePayConfig?.pointsChain);
-  const initWallet = (0, import_react14.useCallback)(
+  const prevPointsChainRef = (0, import_react15.useRef)(spreePayConfig?.pointsChain);
+  const initWallet = (0, import_react15.useCallback)(
     async (pointsChain) => {
       if (!pointsChain) return;
       try {
@@ -4788,7 +5258,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -4819,11 +5289,24 @@ var SplitBlock = (props) => {
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Points = () => {
   const isLoggedIn = useIsLoggedIn();
-  const [usePoints, setUsePoints] = (0, import_react15.useState)(false);
-  const [selectedPointsType, setSelectedPointsType] = (0, import_react15.useState)(null);
+  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) {
@@ -4838,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)(
@@ -4859,15 +5342,15 @@ var CreditCardTab = () => {
   const { useWeb3Points } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
-  const { register } = useSpreePayRegister();
+  const { register: register2 } = useSpreePayRegister();
   const { cards, mutateCards } = useCards();
   const { mutateBalance } = useSlapiBalance();
-  const [newCards, setNewCards] = (0, import_react16.useState)([]);
+  const [newCards, setNewCards] = (0, import_react17.useState)([]);
   const isWeb3Enabled = Boolean(useWeb3Points);
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
-  const handlePay = (0, import_react16.useCallback)(
+  const handlePay = (0, import_react17.useCallback)(
     async (data) => {
       const pointsAmount = selectedPaymentMethod.pointsAmount ?? 0;
       const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
@@ -4916,9 +5399,9 @@ var CreditCardTab = () => {
       mutateBalance
     ]
   );
-  (0, import_react16.useEffect)(() => {
-    register(handlePay);
-  }, [register, handlePay]);
+  (0, import_react17.useEffect)(() => {
+    register2(handlePay);
+  }, [register2, handlePay]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CreditCard, { newCards, setNewCards }) }),
     !spreePayConfig?.creditCard.hidePoints && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Points, {}) }),
@@ -4948,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: [
@@ -5001,9 +5485,11 @@ 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_react21.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
-var CryptoComTab2 = (0, import_react21.lazy)(
+var CryptoTab2 = (0, import_react22.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
+var CryptoComTab2 = (0, import_react22.lazy)(
   () => Promise.resolve().then(() => (init_CryptoComTab2(), CryptoComTab_exports)).then((module2) => ({ default: module2.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
@@ -5013,30 +5499,44 @@ var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("di
 var SpreePayContent = () => {
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  (0, import_react21.useEffect)(() => {
+  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_react21.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
-var import_react22 = require("react");
+var import_react23 = require("react");
 init_utils();
 init_logger();
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react22.Component {
+var ErrorBoundary = class extends import_react23.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -5088,22 +5588,22 @@ init_StaticConfigContext();
 init_client();
 
 // src/hooks/useKeycloakSSO.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_keycloak_js = __toESM(require("keycloak-js"), 1);
 init_logger();
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config2) {
   const { url, realm, clientId, ssoPageURI, enabled } = config2;
-  const initRef = (0, import_react23.useRef)(false);
-  const kcRef = (0, import_react23.useRef)(null);
-  const refreshTimerRef = (0, import_react23.useRef)(null);
-  const scheduleRefreshRef = (0, import_react23.useRef)(() => {
+  const initRef = (0, import_react24.useRef)(false);
+  const kcRef = (0, import_react24.useRef)(null);
+  const refreshTimerRef = (0, import_react24.useRef)(null);
+  const scheduleRefreshRef = (0, import_react24.useRef)(() => {
   });
-  const [error, setError] = (0, import_react23.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react23.useState)(enabled);
-  const [accessToken, setAccessToken] = (0, import_react23.useState)(null);
-  const scheduleRefresh = (0, import_react23.useCallback)(() => {
+  const [error, setError] = (0, import_react24.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react24.useState)(enabled);
+  const [accessToken, setAccessToken] = (0, import_react24.useState)(null);
+  const scheduleRefresh = (0, import_react24.useCallback)(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -5127,10 +5627,10 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new import_keycloak_js.default({ url, realm, clientId });
@@ -5183,14 +5683,14 @@ var isTokenExpired = (token) => {
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var unauthenticatedFetcher = () => Promise.resolve(null);
 var SpreePayInner = () => {
-  const [portalEl, setPortalEl] = (0, import_react24.useState)(null);
-  const rootRef = (0, import_react24.useCallback)((node) => {
+  const [portalEl, setPortalEl] = (0, import_react25.useState)(null);
+  const rootRef = (0, import_react25.useCallback)((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -5204,7 +5704,7 @@ var SpreePayInner = () => {
     enabled: !envTokenValid
   });
   const _accessToken = envTokenValid ? envAccessToken : accessToken;
-  const slapiFetcher = (0, import_react24.useMemo)(() => {
+  const slapiFetcher = (0, import_react25.useMemo)(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -5230,7 +5730,7 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_nice_modal_react9.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LoginStatusProvider, { isLoggedIn: Boolean(_accessToken), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SpreePayContent, {}) }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(esm_default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LoginStatusProvider, { isLoggedIn: Boolean(_accessToken), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SpreePayContent, {}) }) }) })
       }
     );
   };
@@ -5244,9 +5744,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 var useCapture3DS = ({ paymentIntent }) => {
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (typeof window !== "undefined" && window.parent && paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent });
     }