@superlogic/spree-pay 0.4.1 → 0.4.6

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;
 }
@@ -698,6 +695,9 @@
     background-color: color-mix(in oklab, var(--s-warning) 10%, transparent);
   }
 }
+.sl-spreepay .bg-\(--s-warning-subtle\) {
+  background-color: var(--s-warning-subtle);
+}
 .sl-spreepay .bg-\(--secondary\) {
   background-color: var(--secondary);
 }
@@ -903,15 +903,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%;
 }
@@ -1411,14 +1411,9 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
-.sl-spreepay .data-\[state\=checked\]\:border-\(--primary\) {
-  &[data-state=checked] {
-    border-color: var(--primary);
-  }
-}
-.sl-spreepay .data-\[state\=checked\]\:bg-\(--primary\) {
+.sl-spreepay .data-\[state\=checked\]\:border-\(--s-brand\) {
   &[data-state=checked] {
-    background-color: var(--primary);
+    border-color: var(--s-brand);
   }
 }
 .sl-spreepay .data-\[state\=checked\]\:bg-\(--s-brand\) {
@@ -1595,13 +1590,6 @@
     }
   }
 }
-.sl-spreepay .dark\:data-\[state\=checked\]\:bg-\(--primary\) {
-  &:is(.dark *) {
-    &[data-state=checked] {
-      background-color: var(--primary);
-    }
-  }
-}
 .sl-spreepay .\[\&_a\]\:underline {
   & a {
     text-decoration-line: underline;
@@ -1796,4 +1784,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-FKAVWVFL.js";
 import {
   Iframe3ds
-} from "./chunk-IDYBXJWP.js";
+} from "./chunk-7I6EBCSI.js";
 import {
   InfoBanner,
   LogLevel,
@@ -23,6 +23,7 @@ import {
   StaticConfigProvider,
   cn,
   configureLogger,
+  isNewCard,
   logger,
   registerApi,
   useSpreePay,
@@ -31,10 +32,10 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-5GHGAP6Z.js";
+} from "./chunk-AGTOSFMT.js";
 
 // src/SpreePay.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState11 } from "react";
 import NiceModal4 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
@@ -42,7 +43,7 @@ import { SWRConfig } from "swr";
 import { Suspense, lazy } from "react";
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback5, useEffect as useEffect6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6 } from "react";
 
 // src/hooks/payments/useCardPayment.ts
 import NiceModal from "@ebay/nice-modal-react";
@@ -73,7 +74,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 {
@@ -536,44 +541,50 @@ var useSplitCardPayments = (mode = "web2") => {
 };
 
 // src/hooks/useCards.ts
+import { useMemo } from "react";
 import useSWR from "swr";
 var URL = "/v1/payments/cards";
 var useCards = () => {
   const { origin } = useSpreePayEnv();
   const { data, isLoading, mutate } = useSWR(origin ? `${URL}?origin=${origin}` : URL);
+  const cards = useMemo(() => data?.data.filter((c) => c.active) ?? [], [data]);
   return {
-    cards: data?.data.filter((c) => c.active) || [],
+    cards,
     cardsIsLoading: isLoading,
     mutateCards: mutate
   };
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { useMemo, useState as useState2 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo3, 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 { useMemo as useMemo2, 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 +610,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" }) })
                   }
                 )
@@ -617,17 +627,35 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     }
   );
 };
-var CardsList = ({ selectedCard, setCard }) => {
-  const { cards, cardsIsLoading } = useCards();
+var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
+  const { cards, cardsIsLoading, mutateCards } = useCards();
+  const allCards = useMemo2(() => [...cards, ...newCards], [cards, newCards]);
+  const handleRemove = async (card) => {
+    if (isNewCard(card)) {
+      onRemoveNewCard(card);
+    } else {
+      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)) });
+  if (allCards.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: allCards.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, useRef, useState as useState2 } from "react";
 import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
 
 // src/ui/button.tsx
@@ -681,7 +709,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-sm border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--primary) data-[state=checked]:bg-(--primary) data-[state=checked]:text-(--inverse) dark:data-[state=checked]:bg-(--primary)",
+        "peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-sm border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--s-brand) data-[state=checked]:bg-(--s-brand) data-[state=checked]:text-(--inverse)",
         className
       ),
       ...props,
@@ -706,12 +734,13 @@ 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();
-  const id = useId();
+  const [id] = useState2(() => crypto.randomUUID());
   const computeStripeStyles = useCallback(() => {
     const formRefCurrent = formRef.current;
     if (typeof window === "undefined" || !formRefCurrent) return {};
@@ -761,7 +790,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 +837,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,23 +864,31 @@ 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 = useMemo3(() => 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 [newCards, setNewCards] = useState3([]);
   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 });
+    setNewCards((prev) => [...prev, newCard]);
     setCard(newCard);
     setShowForm(false);
   };
+  const removeNewCard = useCallback2((card) => {
+    setNewCards((prev) => prev.filter((c) => c.id !== card.id));
+  }, []);
   const handleCancel = () => {
     setShowForm(false);
   };
@@ -861,7 +899,9 @@ var CreditCard = () => {
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
-          setCard
+          setCard,
+          newCards,
+          onRemoveNewCard: removeNewCard
         }
       ),
       spreePayConfig?.creditCard.infoMessage && /* @__PURE__ */ jsx5(InfoBanner, { message: spreePayConfig.creditCard.infoMessage }),
@@ -880,14 +920,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 useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
-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 +1920,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,14 +2018,14 @@ 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);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
   const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
-  const initWallet = useCallback4(
+  const initWallet = useCallback5(
     async (pointsChain) => {
       if (!pointsChain) return;
       try {
@@ -2038,8 +2078,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();
@@ -2085,7 +2125,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
-  const handlePay = useCallback5(
+  const handlePay = useCallback6(
     async (data) => {
       try {
         let res = null;
@@ -2206,9 +2246,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-7EG23TQW.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-PW3NRWJL.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-5662XFNI.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)" }),
@@ -2250,8 +2290,8 @@ var ErrorBoundary = class extends Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsxs12("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--b-inverse) bg-(--s-primary) p-8", children: [
-        /* @__PURE__ */ jsx19("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-secondary)", children: /* @__PURE__ */ jsxs12(
+      return /* @__PURE__ */ jsx19("div", { className: cn("sl-spreepay", this.props.className), children: /* @__PURE__ */ jsxs12("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-8 shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
+        /* @__PURE__ */ jsx19("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-warning-subtle)", children: /* @__PURE__ */ jsxs12(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -2269,16 +2309,16 @@ var ErrorBoundary = class extends Component {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx19("h3", { className: "mb-2 text-lg font-semibold text-(--primary)", children: "Payment Widget Error" }),
-        /* @__PURE__ */ jsx19("p", { className: "text-center text-sm text-(--secondary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
-      ] });
+        /* @__PURE__ */ jsx19("h3", { className: "mb-2 text-lg font-semibold text-(--brand-primary)", children: "Payment Widget Error" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-center text-sm text-(--text-tertiary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
+      ] }) });
     }
     return this.props.children;
   }
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback7, 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,10 +2329,10 @@ 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 scheduleRefresh = useCallback6(() => {
+  const [error, setError] = useState10(null);
+  const [isChecking, setIsChecking] = useState10(enabled);
+  const [accessToken, setAccessToken] = useState10(null);
+  const scheduleRefresh = useCallback7(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -2352,11 +2392,22 @@ function useKeycloakSSO(config) {
   return { isChecking, accessToken, error };
 }
 
+// src/utils/token.ts
+import { jwtDecode } from "jwt-decode";
+var isTokenExpired = (token) => {
+  try {
+    const { exp } = jwtDecode(token);
+    return typeof exp === "number" && exp < Math.floor(Date.now() / 1e3);
+  } catch {
+    return true;
+  }
+};
+
 // src/SpreePay.tsx
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var SpreePayInner = () => {
-  const [portalEl, setPortalEl] = useState10(null);
-  const rootRef = useCallback7((node) => {
+  const [portalEl, setPortalEl] = useState11(null);
+  const rootRef = useCallback8((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
@@ -2367,16 +2418,17 @@ var SpreePayInner = () => {
     logger.logVersion();
   }, [environment]);
   const { staticConfig, appProps } = useStaticConfig();
+  const envTokenValid = Boolean(envAccessToken && !isTokenExpired(envAccessToken));
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: staticConfig.keycloakUrl,
     clientId: keycloakClientId ?? "oneof-next",
     ssoPageURI,
-    enabled: !envAccessToken
+    enabled: !envTokenValid
   });
-  const _accessToken = envAccessToken ?? accessToken;
-  const unauthenticatedFetcher = useCallback7(() => Promise.resolve(null), []);
-  const slapiFetcher = useMemo7(() => {
+  const _accessToken = envTokenValid ? envAccessToken : accessToken;
+  const unauthenticatedFetcher = useCallback8(() => Promise.resolve(null), []);
+  const slapiFetcher = useMemo9(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -2412,7 +2464,7 @@ var SpreePayInner = () => {
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ jsx20(ErrorBoundary, { children: /* @__PURE__ */ jsx20(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx20(SpreePayInner, {}) }) });
+  return /* @__PURE__ */ jsx20(ErrorBoundary, { className: props.className, children: /* @__PURE__ */ jsx20(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx20(SpreePayInner, {}) }) });
 };
 
 // src/hooks/useCapture3DS.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.4.1",
+  "version": "0.4.6",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -18,7 +18,8 @@
       "require": "./build/index.cjs",
       "default": "./build/index.js"
     },
-    "./styles.css": "./build/index.css"
+    "./styles.css": "./build/index.css",
+    "./bridge.css": "./src/styles/bridge.css"
   },
   "files": [
     "build",
@@ -49,27 +50,28 @@
     "@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",
+    "jwt-decode": "^4.0.0",
+    "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": [

package/src/styles/bridge.css

@@ -0,0 +1,53 @@
+/**
+ * Spree-pay CSS variable bridge — live-tickets context only.
+ *
+ * Exposes legacy short-name CSS variables that spree-pay TSX components
+ * still reference, mapped to the current Figma token names. This file is
+ * imported by apps/live-tickets/src/theme/globals.css so the host app's
+ * tenant *.figma.css tokens are available under the old names.
+ *
+ * NOT used in standalone mode — the standalone build gets default values
+ * from packages/spree-pay/src/styles/globals.css instead.
+ */
+:root {
+  /* text / icons */
+  --primary: var(--color-text-icons-primary-default);
+  --secondary: var(--color-text-icons-secondary-default);
+  --tertiary: var(--color-text-icons-tertiary-default);
+  --text-tertiary: var(--color-text-icons-tertiary-default); /* pre-existing alias bug */
+  --brand-primary: var(--color-text-icons-brand-default);
+  --accent: var(--color-text-icons-accent-default);
+  --inverse: var(--color-text-icons-inverse-default);
+  --disabled: var(--color-text-icons-primary-disabled);
+  --positive: var(--color-feedback-success);
+  --warning: var(--color-feedback-attention);
+  --negative: var(--color-feedback-error);
+
+  /* surface */
+  --s-default: var(--color-surface-layer-page);
+  --s-primary: var(--color-surface-container-subtle);
+  --s-primary-hover: var(--color-component-list-row-subtle-hover);
+  --s-secondary: var(--color-component-table-header);
+  --s-tertiary: var(--color-control-tertiary-bg-default);
+  --s-brand: var(--color-surface-container-brand);
+  --s-brand-hover: var(--color-control-primary-bg-hover);
+  --s-disabled: var(--color-component-bg-disabled);
+  --s-warning: var(--color-feedback-attention);
+
+  /* border */
+  --b-primary: var(--color-border-subtle);
+  --b-secondary: var(--color-border-default);
+  --b-tertiary: var(--color-component-divider-default);
+  --b-brand: var(--color-control-primary-border-default);
+  --b-inverse: var(--color-border-inverse);
+
+  /* overlay / component-specific */
+  --overlay: var(--color-surface-layer-backdrop);
+  --border-component-specific-card: var(--color-component-divider-subtle);
+  --surface-component-specific-card-default-card: var(--color-surface-layer-card);
+  --shadow-component-specific-card: var(--color-effect-shadow-card);
+
+  /* Crypto.com brand colors — same across all tenants */
+  --crypto-pay-bg: #00307d;
+  --crypto-pay-bg-hover: #002655;
+}