@superlogic/spree-pay 0.4.1 → 0.4.2

package/build/{CryptoComTab-PW3NRWJL.js → CryptoComTab-GNJ4XACU.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-IDYBXJWP.js";
+} from "./chunk-4ELDS4N4.js";
 import {
   InfoBanner,
   Legal,
@@ -12,7 +12,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-5GHGAP6Z.js";
+} from "./chunk-I35SE3K2.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";

package/build/{CryptoTab-ZABUPHVT.js → CryptoTab-RY2NTNZJ.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-W43ZCY4N.js";
+} from "./chunk-LXX5P2LL.js";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-5GHGAP6Z.js";
+} from "./chunk-I35SE3K2.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";

package/build/{chunk-IDYBXJWP.js → chunk-4ELDS4N4.js}

@@ -2,7 +2,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle
-} from "./chunk-5GHGAP6Z.js";
+} from "./chunk-I35SE3K2.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/{chunk-5GHGAP6Z.js → chunk-I35SE3K2.js}

@@ -9,7 +9,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.4.1";
+var version = "0.4.2";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -595,10 +595,20 @@ var SlapiPaymentService = {
       throw error;
     }
   },
-  addCard: async ({ source, hash }) => {
+  removeCard: async ({ cardId }) => {
+    slapiLogger.debug("Removing card", { cardId });
+    try {
+      await slapiApi.delete(`/v1/payments/cards/${cardId}`);
+      slapiLogger.info("Card removed successfully", { cardId });
+    } catch (error) {
+      slapiLogger.error("Failed to remove card", error, { cardId });
+      throw error;
+    }
+  },
+  addCard: async ({ source, hash, saveCard }) => {
     slapiLogger.debug("Adding card", { hash, sourcePrefix: source.substring(0, 10) });
     try {
-      const data = await slapiApi.post("/v1/payments/cards", { hash, source });
+      const data = await slapiApi.post("/v1/payments/cards", { hash, source, saveCard });
       slapiLogger.info("Card added successfully", { cardId: data.id, hash });
       return { data };
     } catch (error) {

package/build/{chunk-W43ZCY4N.js → chunk-LXX5P2LL.js}

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

package/build/index.cjs

@@ -68,7 +68,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.4.1";
+    version = "0.4.2";
   }
 });
 
@@ -756,10 +756,20 @@ var init_slapi = __esm({
           throw error;
         }
       },
-      addCard: async ({ source, hash }) => {
+      removeCard: async ({ cardId }) => {
+        slapiLogger.debug("Removing card", { cardId });
+        try {
+          await slapiApi.delete(`/v1/payments/cards/${cardId}`);
+          slapiLogger.info("Card removed successfully", { cardId });
+        } catch (error) {
+          slapiLogger.error("Failed to remove card", error, { cardId });
+          throw error;
+        }
+      },
+      addCard: async ({ source, hash, saveCard }) => {
         slapiLogger.debug("Adding card", { hash, sourcePrefix: source.substring(0, 10) });
         try {
-          const data = await slapiApi.post("/v1/payments/cards", { hash, source });
+          const data = await slapiApi.post("/v1/payments/cards", { hash, source, saveCard });
           slapiLogger.info("Card added successfully", { cardId: data.id, hash });
           return { data };
         } catch (error) {
@@ -1994,11 +2004,11 @@ var init_useBaseTokens = __esm({
 });
 
 // src/modals/CryptoSelectModal.tsx
-var import_react14, import_nice_modal_react5, import_jsx_runtime37, CryptoSelectModal;
+var import_react15, import_nice_modal_react5, import_jsx_runtime37, CryptoSelectModal;
 var init_CryptoSelectModal = __esm({
   "src/modals/CryptoSelectModal.tsx"() {
     "use strict";
-    import_react14 = require("react");
+    import_react15 = require("react");
     import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
     init_input();
     init_separator();
@@ -2014,8 +2024,8 @@ var init_CryptoSelectModal = __esm({
       const { isLoading, error, erc20Balances } = useBaseERC20Token();
       const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
       const { tokens, tokensIsLoading } = useBaseTokens();
-      const [search, setSearch] = (0, import_react14.useState)("");
-      const filteredCoins = (0, import_react14.useMemo)(() => {
+      const [search, setSearch] = (0, import_react15.useState)("");
+      const filteredCoins = (0, import_react15.useMemo)(() => {
         return tokens.filter(
           (coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
         );
@@ -2177,11 +2187,11 @@ var init_SelectedCoin = __esm({
 });
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_react15, import_wagmi4, import_jsx_runtime40, Crypto;
+var import_react16, import_wagmi4, import_jsx_runtime40, Crypto;
 var init_Crypto = __esm({
   "src/components/CryptoTab/Crypto/Crypto.tsx"() {
     "use strict";
-    import_react15 = require("react");
+    import_react16 = require("react");
     import_wagmi4 = require("wagmi");
     init_SpreePayActionsContext();
     init_useCryptoPayment();
@@ -2200,7 +2210,7 @@ var init_Crypto = __esm({
       const { spreePayConfig } = useSpreePayConfig();
       const isWalletConnected = Boolean(address);
       const { register } = useSpreePayRegister();
-      const handlePay = (0, import_react15.useCallback)(
+      const handlePay = (0, import_react16.useCallback)(
         async (data) => {
           try {
             const res = await cryptoPayment(data);
@@ -2214,7 +2224,7 @@ var init_Crypto = __esm({
         },
         [cryptoPayment]
       );
-      (0, import_react15.useEffect)(() => {
+      (0, import_react16.useEffect)(() => {
         register(handlePay);
       }, [register, handlePay]);
       return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
@@ -2250,11 +2260,11 @@ function getCachedWagmiConfig(projectId, appName) {
   }
   return cfg2;
 }
-var import_react16, import_react_query, import_nice_modal_react7, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime41, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
+var import_react17, import_react_query, import_nice_modal_react7, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime41, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
 var init_CryptoWrapper = __esm({
   "src/components/CryptoTab/Crypto/CryptoWrapper.tsx"() {
     "use strict";
-    import_react16 = require("react");
+    import_react17 = require("react");
     import_react_query = require("@tanstack/react-query");
     import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
     import_rainbowkit2 = require("@rainbow-me/rainbowkit");
@@ -2269,7 +2279,7 @@ var init_CryptoWrapper = __esm({
     wagmiConfigCache = /* @__PURE__ */ new Map();
     CryptoWrapper = () => {
       const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-      const wagmiConfig = (0, import_react16.useMemo)(() => {
+      const wagmiConfig = (0, import_react17.useMemo)(() => {
         if (!spreePayConfig) return null;
         return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
       }, [spreePayConfig]);
@@ -2456,11 +2466,11 @@ var init_Checkout = __esm({
 });
 
 // src/components/CryptoComTab/CryptoComTab.tsx
-var import_react17, import_jsx_runtime44, CryptoComTab;
+var import_react18, import_jsx_runtime44, CryptoComTab;
 var init_CryptoComTab = __esm({
   "src/components/CryptoComTab/CryptoComTab.tsx"() {
     "use strict";
-    import_react17 = require("react");
+    import_react18 = require("react");
     init_SpreePayActionsContext();
     init_useCryptoComPayment();
     init_useSpreePayConfig();
@@ -2472,7 +2482,7 @@ var init_CryptoComTab = __esm({
       const { register } = useSpreePayRegister();
       const { cryptoComPayment } = useCryptoComPayment();
       const { spreePayConfig } = useSpreePayConfig();
-      const handlePay = (0, import_react17.useCallback)(
+      const handlePay = (0, import_react18.useCallback)(
         async (data) => {
           try {
             const res = await cryptoComPayment(data);
@@ -2486,7 +2496,7 @@ var init_CryptoComTab = __esm({
         },
         [cryptoComPayment]
       );
-      (0, import_react17.useEffect)(() => {
+      (0, import_react18.useEffect)(() => {
         register(handlePay);
       }, [register, handlePay]);
       return /* @__PURE__ */ (0, import_jsx_runtime44.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: [
@@ -2525,15 +2535,15 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_nice_modal_react9 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // src/SpreePayContent.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 
@@ -2572,7 +2582,11 @@ var useCardPayment = () => {
         lastFour: card.lastFourNumbers,
         schema: card.schema
       });
-      const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
+      const { data: cardResData } = await SlapiPaymentService.addCard({
+        hash,
+        source: card.token,
+        saveCard: card.saveCard
+      });
       cardId = cardResData.id;
       cardPaymentLogger.info("New card added successfully", { cardId });
     } else {
@@ -3075,7 +3089,7 @@ init_split();
 init_CheckoutButton();
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_stripe_js = require("@stripe/stripe-js");
 init_SpreePayActionsContext();
@@ -3083,27 +3097,32 @@ init_useSpreePayConfig();
 init_InfoBanner();
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
+var import_react6 = require("react");
 init_utils();
+init_slapi();
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var isRemoveDisabled = true;
-var CardListItem = ({ card, isSelected, onSelect }) => {
-  const handleSelect = () => {
-    onSelect(card);
-  };
-  const handleRemoveCard = (e) => {
+var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
+  const [isRemoving, setIsRemoving] = (0, import_react6.useState)(false);
+  const removeDisabled = isSelected || isRemoving;
+  const handleRemove = async (e) => {
     e.stopPropagation();
-    if (isSelected || isRemoveDisabled) return;
+    setIsRemoving(true);
+    try {
+      await onRemove(card);
+    } finally {
+      setIsRemoving(false);
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick: handleSelect,
+      role: "button",
+      tabIndex: 0,
+      onClick: () => onSelect(card),
+      onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onSelect(card),
       className: cn(
-        "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-inverse) bg-(--s-primary) hover:bg-(--s-primary-hover)",
-        {
-          "border-(--b-brand)": isSelected
-        }
+        "flex h-12 w-full cursor-pointer overflow-hidden rounded-md border-2 border-(--b-inverse) bg-(--s-primary) hover:bg-(--s-primary-hover)",
+        { "border-(--b-brand)": isSelected }
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -3129,13 +3148,12 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-(--brand-primary)", children: card.lastFourNumbers })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "div",
+                  "button",
                   {
-                    onClick: handleRemoveCard,
-                    className: cn("rounded-md p-1 text-(--tertiary) transition-all hover:bg-(--s-secondary)", {
-                      "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
-                      // 'cursor-pointer': !isSelected || !isRemoveDisabled,
-                    }),
+                    type: "button",
+                    onClick: handleRemove,
+                    disabled: removeDisabled,
+                    className: "text-tertiary rounded-md p-1 transition-all hover:bg-(--s-secondary) disabled:cursor-not-allowed disabled:opacity-50",
                     children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", className: "size-5", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M6.35 16.17q-.57 0-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32q0 .58-.39.96a1.3 1.3 0 0 1-.96.39zM14.17 4.5H5.83v10.32q0 .23.15.37.15.15.37.15h7.3q.2 0 .36-.16.15-.17.16-.36zm-6 9.17h.84v-7.5h-.84zm2.82 0h.84v-7.5h-.84z" }) })
                   }
                 )
@@ -3148,16 +3166,31 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
   );
 };
 var CardsList = ({ selectedCard, setCard }) => {
-  const { cards, cardsIsLoading } = useCards();
+  const { cards, cardsIsLoading, mutateCards } = useCards();
+  const handleRemove = async (card) => {
+    if ("cardId" in card) {
+      await SlapiPaymentService.removeCard({ cardId: card.id });
+    }
+    mutateCards((data) => ({ ...data, data: (data?.data ?? []).filter((c) => c.id !== card.id) }));
+  };
   if (cardsIsLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
   }
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    CardListItem,
+    {
+      isSelected: selectedCard?.id === card.id,
+      onSelect: setCard,
+      onRemove: handleRemove,
+      card
+    },
+    card.id
+  )) });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 
 // src/ui/button.tsx
@@ -3240,13 +3273,14 @@ var stripeElementClasses = {
   focus: "border-ring ring-ring/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
-  const [cardError, setCardError] = (0, import_react6.useState)(void 0);
-  const [stripeStyles, setStripeStyles] = (0, import_react6.useState)({});
-  const formRef = (0, import_react6.useRef)(null);
+  const [cardError, setCardError] = (0, import_react7.useState)(void 0);
+  const [stripeStyles, setStripeStyles] = (0, import_react7.useState)({});
+  const [shouldSaveCard, setShouldSaveCard] = (0, import_react7.useState)(true);
+  const formRef = (0, import_react7.useRef)(null);
   const elements = (0, import_react_stripe_js.useElements)();
   const stripe = (0, import_react_stripe_js.useStripe)();
-  const id = (0, import_react6.useId)();
-  const computeStripeStyles = (0, import_react6.useCallback)(() => {
+  const id = (0, import_react7.useId)();
+  const computeStripeStyles = (0, import_react7.useCallback)(() => {
     const formRefCurrent = formRef.current;
     if (typeof window === "undefined" || !formRefCurrent) return {};
     const container = formRefCurrent.closest(".sl-spreepay");
@@ -3267,7 +3301,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       }
     };
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setStripeStyles(computeStripeStyles());
   }, [computeStripeStyles]);
   const handleSaveCard = async () => {
@@ -3295,7 +3329,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
             schema: token.card?.brand,
             lastFourNumbers: token.card?.last4 ?? "",
             expireMonth: `${token.card?.exp_month}`,
-            expireYear: `${token.card?.exp_year}`
+            expireYear: `${token.card?.exp_year}`,
+            saveCard: shouldSaveCard
           });
         }
       }
@@ -3341,7 +3376,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       cardError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Checkbox, { checked: shouldSaveCard, onCheckedChange: (v) => setShouldSaveCard(v === true), id: "saveCard" }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
@@ -3368,17 +3403,22 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var StripeWrapper = (props) => {
-  const stripePromise = (0, import_react7.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
+var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
+  const stripePromise = (0, import_react8.useMemo)(() => (0, import_stripe_js.loadStripe)(publicKey), [publicKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
 };
 var CreditCard = () => {
-  const [showForm, setShowForm] = (0, import_react7.useState)(false);
+  const [showForm, setShowForm] = (0, import_react8.useState)(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
   const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
-    setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
+    const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
+    setSelectedPaymentMethod({
+      ...selectedPaymentMethod,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      method: isAlreadySelected ? null : card
+    });
   };
   const saveNewCard = (newCard) => {
     mutateCards((data) => ({ ...data, data: [...data?.data ?? [], newCard] }), { revalidate: false });
@@ -3414,14 +3454,14 @@ var CreditCard = () => {
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_useSpreePayConfig();
 init_common();
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_airkit2 = require("@mocanetwork/airkit");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
@@ -3431,7 +3471,7 @@ init_format();
 init_logger();
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_useSlapiBalance();
@@ -3751,10 +3791,10 @@ var Primitive = NODES.reduce((primitive, node) => {
 }, {});
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function createCollection(name) {
@@ -3766,14 +3806,14 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = import_react8.default.useRef(null);
-    const itemMap = import_react8.default.useRef(/* @__PURE__ */ new Map()).current;
+    const ref = import_react9.default.useRef(null);
+    const itemMap = import_react9.default.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ (0, import_jsx_runtime21.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_react8.default.forwardRef(
+  const CollectionSlot = import_react9.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
@@ -3785,13 +3825,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_react8.default.forwardRef(
+  const CollectionItemSlot = import_react9.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = import_react8.default.useRef(null);
+      const ref = import_react9.default.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      import_react8.default.useEffect(() => {
+      import_react9.default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
@@ -3801,7 +3841,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = import_react8.default.useCallback(() => {
+    const getItems = import_react9.default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -4434,7 +4474,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_react10.useState)(0);
+  const [splitTokens, setSplitTokens] = (0, import_react11.useState)(0);
   const usdAmount = getSplitAmount(amount ?? 0, splitTokens, pointsConversionRatio);
   const pointsValue = String(Math.round(splitTokens));
   const usdWithFee = usdAmount + getTransactionFee(usdAmount, transactionFeePercentage);
@@ -4532,14 +4572,14 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
   const { currencyCode, exchangeRate, foreignCurrencyAmount } = appProps;
-  const [address, setAddress] = (0, import_react11.useState)(null);
-  const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
+  const [address, setAddress] = (0, import_react12.useState)(null);
+  const [walletReady, setWalletReady] = (0, import_react12.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_react11.useRef)(spreePayConfig?.pointsChain);
-  const initWallet = (0, import_react11.useCallback)(
+  const prevPointsChainRef = (0, import_react12.useRef)(spreePayConfig?.pointsChain);
+  const initWallet = (0, import_react12.useCallback)(
     async (pointsChain) => {
       if (!pointsChain) return;
       try {
@@ -4562,7 +4602,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -4592,8 +4632,8 @@ var SplitBlock = (props) => {
 // src/components/CreditCardTab/Points/Points.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Points = () => {
-  const [usePoints, setUsePoints] = (0, import_react12.useState)(false);
-  const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
+  const [usePoints, setUsePoints] = (0, import_react13.useState)(false);
+  const [selectedPointsType, setSelectedPointsType] = (0, import_react13.useState)(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
@@ -4639,7 +4679,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
-  const handlePay = (0, import_react13.useCallback)(
+  const handlePay = (0, import_react14.useCallback)(
     async (data) => {
       try {
         let res = null;
@@ -4678,7 +4718,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
       mutateBalance
     ]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
@@ -4763,8 +4803,8 @@ var TabButtons = (props) => {
 // src/SpreePayContent.tsx
 init_SpreePayActionsContext();
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var CryptoTab2 = (0, import_react18.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
-var CryptoComTab2 = (0, import_react18.lazy)(
+var CryptoTab2 = (0, import_react19.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
+var CryptoComTab2 = (0, import_react19.lazy)(
   () => Promise.resolve().then(() => (init_CryptoComTab2(), CryptoComTab_exports)).then((module2) => ({ default: module2.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
@@ -4779,7 +4819,7 @@ var SpreePayContent = ({ isLoggedIn }) => {
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
     selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CreditCardTab, { isLoggedIn }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react18.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabLoadingFallback, {}), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react19.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabLoadingFallback, {}), children: [
       selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoTab2, { isLoggedIn }),
       selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoComTab2, {})
     ] })
@@ -4787,10 +4827,10 @@ var SpreePayContent = ({ isLoggedIn }) => {
 };
 
 // src/components/ErrorBoundary.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 init_logger();
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react19.Component {
+var ErrorBoundary = class extends import_react20.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -4841,22 +4881,22 @@ init_StaticConfigContext();
 init_client();
 
 // src/hooks/useKeycloakSSO.ts
-var import_react20 = require("react");
+var import_react21 = 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_react20.useRef)(false);
-  const kcRef = (0, import_react20.useRef)(null);
-  const refreshTimerRef = (0, import_react20.useRef)(null);
-  const scheduleRefreshRef = (0, import_react20.useRef)(() => {
+  const initRef = (0, import_react21.useRef)(false);
+  const kcRef = (0, import_react21.useRef)(null);
+  const refreshTimerRef = (0, import_react21.useRef)(null);
+  const scheduleRefreshRef = (0, import_react21.useRef)(() => {
   });
-  const [error, setError] = (0, import_react20.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react20.useState)(enabled);
-  const [accessToken, setAccessToken] = (0, import_react20.useState)(null);
-  const scheduleRefresh = (0, import_react20.useCallback)(() => {
+  const [error, setError] = (0, import_react21.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react21.useState)(enabled);
+  const [accessToken, setAccessToken] = (0, import_react21.useState)(null);
+  const scheduleRefresh = (0, import_react21.useCallback)(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -4880,10 +4920,10 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new import_keycloak_js.default({ url, realm, clientId });
@@ -4922,14 +4962,14 @@ init_portal();
 init_logger();
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var SpreePayInner = () => {
-  const [portalEl, setPortalEl] = (0, import_react21.useState)(null);
-  const rootRef = (0, import_react21.useCallback)((node) => {
+  const [portalEl, setPortalEl] = (0, import_react22.useState)(null);
+  const rootRef = (0, import_react22.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_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -4942,8 +4982,8 @@ var SpreePayInner = () => {
     enabled: !envAccessToken
   });
   const _accessToken = envAccessToken ?? accessToken;
-  const unauthenticatedFetcher = (0, import_react21.useCallback)(() => Promise.resolve(null), []);
-  const slapiFetcher = (0, import_react21.useMemo)(() => {
+  const unauthenticatedFetcher = (0, import_react22.useCallback)(() => Promise.resolve(null), []);
+  const slapiFetcher = (0, import_react22.useMemo)(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -4983,9 +5023,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var useCapture3DS = (searchParams) => {
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/build/index.css

@@ -501,9 +501,6 @@
 .sl-spreepay .animate-spin {
   animation: var(--animate-spin);
 }
-.sl-spreepay .cursor-not-allowed {
-  cursor: not-allowed;
-}
 .sl-spreepay .cursor-pointer {
   cursor: pointer;
 }
@@ -903,15 +900,15 @@
 .sl-spreepay .text-current {
   color: currentcolor;
 }
+.sl-spreepay .text-tertiary {
+  color: var(--tertiary);
+}
 .sl-spreepay .underline {
   text-decoration-line: underline;
 }
 .sl-spreepay .underline-offset-4 {
   text-underline-offset: 4px;
 }
-.sl-spreepay .opacity-50 {
-  opacity: 50%;
-}
 .sl-spreepay .opacity-70 {
   opacity: 70%;
 }
@@ -1796,4 +1793,4 @@
     }
   }
 }
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */

package/build/index.d.cts

@@ -83,6 +83,7 @@ type Card = {
 type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'schema' | 'active'> & {
     token: string;
     id: string;
+    saveCard?: boolean;
 };
 type CardPaymentMethod = {
     method: NewCard | Card | null;

package/build/index.d.ts

@@ -83,6 +83,7 @@ type Card = {
 type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'schema' | 'active'> & {
     token: string;
     id: string;
+    saveCard?: boolean;
 };
 type CardPaymentMethod = {
     method: NewCard | Card | null;

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-W43ZCY4N.js";
+} from "./chunk-LXX5P2LL.js";
 import {
   Iframe3ds
-} from "./chunk-IDYBXJWP.js";
+} from "./chunk-4ELDS4N4.js";
 import {
   InfoBanner,
   LogLevel,
@@ -31,10 +31,10 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-5GHGAP6Z.js";
+} from "./chunk-I35SE3K2.js";
 
 // src/SpreePay.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useState as useState11 } from "react";
 import NiceModal4 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
@@ -73,7 +73,11 @@ var useCardPayment = () => {
         lastFour: card.lastFourNumbers,
         schema: card.schema
       });
-      const { data: cardResData } = await SlapiPaymentService.addCard({ hash, source: card.token });
+      const { data: cardResData } = await SlapiPaymentService.addCard({
+        hash,
+        source: card.token,
+        saveCard: card.saveCard
+      });
       cardId = cardResData.id;
       cardPaymentLogger.info("New card added successfully", { cardId });
     } else {
@@ -549,31 +553,35 @@ var useCards = () => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { useMemo, useState as useState2 } from "react";
+import { useMemo, useState as useState3 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var isRemoveDisabled = true;
-var CardListItem = ({ card, isSelected, onSelect }) => {
-  const handleSelect = () => {
-    onSelect(card);
-  };
-  const handleRemoveCard = (e) => {
+var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
+  const [isRemoving, setIsRemoving] = useState(false);
+  const removeDisabled = isSelected || isRemoving;
+  const handleRemove = async (e) => {
     e.stopPropagation();
-    if (isSelected || isRemoveDisabled) return;
+    setIsRemoving(true);
+    try {
+      await onRemove(card);
+    } finally {
+      setIsRemoving(false);
+    }
   };
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick: handleSelect,
+      role: "button",
+      tabIndex: 0,
+      onClick: () => onSelect(card),
+      onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onSelect(card),
       className: cn(
-        "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-inverse) bg-(--s-primary) hover:bg-(--s-primary-hover)",
-        {
-          "border-(--b-brand)": isSelected
-        }
+        "flex h-12 w-full cursor-pointer overflow-hidden rounded-md border-2 border-(--b-inverse) bg-(--s-primary) hover:bg-(--s-primary-hover)",
+        { "border-(--b-brand)": isSelected }
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -599,13 +607,12 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
                   /* @__PURE__ */ jsx("span", { className: "text-(--brand-primary)", children: card.lastFourNumbers })
                 ] }),
                 /* @__PURE__ */ jsx(
-                  "div",
+                  "button",
                   {
-                    onClick: handleRemoveCard,
-                    className: cn("rounded-md p-1 text-(--tertiary) transition-all hover:bg-(--s-secondary)", {
-                      "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
-                      // 'cursor-pointer': !isSelected || !isRemoveDisabled,
-                    }),
+                    type: "button",
+                    onClick: handleRemove,
+                    disabled: removeDisabled,
+                    className: "text-tertiary rounded-md p-1 transition-all hover:bg-(--s-secondary) disabled:cursor-not-allowed disabled:opacity-50",
                     children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", className: "size-5", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { d: "M6.35 16.17q-.57 0-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32q0 .58-.39.96a1.3 1.3 0 0 1-.96.39zM14.17 4.5H5.83v10.32q0 .23.15.37.15.15.37.15h7.3q.2 0 .36-.16.15-.17.16-.36zm-6 9.17h.84v-7.5h-.84zm2.82 0h.84v-7.5h-.84z" }) })
                   }
                 )
@@ -618,16 +625,31 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
   );
 };
 var CardsList = ({ selectedCard, setCard }) => {
-  const { cards, cardsIsLoading } = useCards();
+  const { cards, cardsIsLoading, mutateCards } = useCards();
+  const handleRemove = async (card) => {
+    if ("cardId" in card) {
+      await SlapiPaymentService.removeCard({ cardId: card.id });
+    }
+    mutateCards((data) => ({ ...data, data: (data?.data ?? []).filter((c) => c.id !== card.id) }));
+  };
   if (cardsIsLoading) {
     return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
   }
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ jsx(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: cards.map((card) => /* @__PURE__ */ jsx(
+    CardListItem,
+    {
+      isSelected: selectedCard?.id === card.id,
+      onSelect: setCard,
+      onRemove: handleRemove,
+      card
+    },
+    card.id
+  )) });
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState as useState2 } from "react";
 import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
 
 // src/ui/button.tsx
@@ -706,8 +728,9 @@ var stripeElementClasses = {
   focus: "border-ring ring-ring/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
-  const [cardError, setCardError] = useState(void 0);
-  const [stripeStyles, setStripeStyles] = useState({});
+  const [cardError, setCardError] = useState2(void 0);
+  const [stripeStyles, setStripeStyles] = useState2({});
+  const [shouldSaveCard, setShouldSaveCard] = useState2(true);
   const formRef = useRef(null);
   const elements = useElements();
   const stripe = useStripe();
@@ -761,7 +784,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
             schema: token.card?.brand,
             lastFourNumbers: token.card?.last4 ?? "",
             expireMonth: `${token.card?.exp_month}`,
-            expireYear: `${token.card?.exp_year}`
+            expireYear: `${token.card?.exp_year}`,
+            saveCard: shouldSaveCard
           });
         }
       }
@@ -807,7 +831,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       cardError && /* @__PURE__ */ jsx4("p", { className: "text-destructive mt-1 text-sm", children: cardError })
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
+      /* @__PURE__ */ jsx4(Checkbox, { checked: shouldSaveCard, onCheckedChange: (v) => setShouldSaveCard(v === true), id: "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: [
@@ -834,17 +858,22 @@ 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 = (props) => {
-  const stripePromise = useMemo(() => loadStripe(props.publicKey), [props.publicKey]);
-  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
+var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
+  const stripePromise = useMemo(() => loadStripe(publicKey), [publicKey]);
+  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
 };
 var CreditCard = () => {
-  const [showForm, setShowForm] = useState2(false);
+  const [showForm, setShowForm] = useState3(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
   const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
-    setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
+    const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
+    setSelectedPaymentMethod({
+      ...selectedPaymentMethod,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      method: isAlreadySelected ? null : card
+    });
   };
   const saveNewCard = (newCard) => {
     mutateCards((data) => ({ ...data, data: [...data?.data ?? [], newCard] }), { revalidate: false });
@@ -880,14 +909,14 @@ var CreditCard = () => {
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback4, 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
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/ui/input.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -1880,7 +1909,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] = useState6(0);
+  const [splitTokens, setSplitTokens] = useState7(0);
   const usdAmount = getSplitAmount(amount ?? 0, splitTokens, pointsConversionRatio);
   const pointsValue = String(Math.round(splitTokens));
   const usdWithFee = usdAmount + getTransactionFee(usdAmount, transactionFeePercentage);
@@ -1978,8 +2007,8 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
   const { currencyCode, exchangeRate, foreignCurrencyAmount } = appProps;
-  const [address, setAddress] = useState7(null);
-  const [walletReady, setWalletReady] = useState7(false);
+  const [address, setAddress] = useState8(null);
+  const [walletReady, setWalletReady] = useState8(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
@@ -2038,8 +2067,8 @@ var SplitBlock = (props) => {
 // src/components/CreditCardTab/Points/Points.tsx
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var Points = () => {
-  const [usePoints, setUsePoints] = useState8(false);
-  const [selectedPointsType, setSelectedPointsType] = useState8(null);
+  const [usePoints, setUsePoints] = useState9(false);
+  const [selectedPointsType, setSelectedPointsType] = useState9(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
@@ -2206,9 +2235,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-ZABUPHVT.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-RY2NTNZJ.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-PW3NRWJL.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-GNJ4XACU.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)" }),
@@ -2278,7 +2307,7 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState10 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
@@ -2289,9 +2318,9 @@ function useKeycloakSSO(config) {
   const refreshTimerRef = useRef7(null);
   const scheduleRefreshRef = useRef7(() => {
   });
-  const [error, setError] = useState9(null);
-  const [isChecking, setIsChecking] = useState9(enabled);
-  const [accessToken, setAccessToken] = useState9(null);
+  const [error, setError] = useState10(null);
+  const [isChecking, setIsChecking] = useState10(enabled);
+  const [accessToken, setAccessToken] = useState10(null);
   const scheduleRefresh = useCallback6(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
@@ -2355,7 +2384,7 @@ function useKeycloakSSO(config) {
 // src/SpreePay.tsx
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var SpreePayInner = () => {
-  const [portalEl, setPortalEl] = useState10(null);
+  const [portalEl, setPortalEl] = useState11(null);
   const rootRef = useCallback7((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -49,27 +49,27 @@
     "@rainbow-me/rainbowkit": "^2.2.9",
     "@stripe/react-stripe-js": "^3.10.0",
     "@stripe/stripe-js": "^7.9.0",
-    "@tanstack/react-query": "^5.90.12",
+    "@tanstack/react-query": "^5.97.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "keycloak-js": "^26.2.1",
-    "lucide-react": "^0.556.0",
-    "swr": "^2.3.7",
-    "tailwind-merge": "^3.4.0",
-    "viem": "^2.41.2",
+    "keycloak-js": "^26.2.3",
+    "lucide-react": "^1.8.0",
+    "swr": "^2.4.1",
+    "tailwind-merge": "^3.5.0",
+    "viem": "^2.47.11",
     "wagmi": "^2.19.5",
     "xss": "^1.0.15"
   },
   "devDependencies": {
     "@repo/eslint-config": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/postcss": "^4.2.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "postcss-prefix-selector": "^2.1.1",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.2.2",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.2"
   },
   "tsup": {
     "entry": [