@superlogic/spree-pay 0.1.34 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/build/index.cjs +236 -180
  3. package/build/index.css +26 -2
  4. package/build/index.d.cts +5 -2
  5. package/build/index.d.ts +5 -2
  6. package/build/index.js +222 -166
  7. package/package.json +19 -19
package/build/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  // src/SpreePay.tsx
2
- import { useEffect as useEffect12, useLayoutEffect as useLayoutEffect3, useMemo as useMemo9, useRef as useRef7, useState as useState15 } from "react";
2
+ import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo10, useState as useState14 } from "react";
3
3
  import NiceModal7 from "@ebay/nice-modal-react";
4
4
  import { SWRConfig } from "swr";
5
5
 
6
6
  // package.json
7
- var version = "0.1.34";
7
+ var version = "0.1.35";
8
8
 
9
9
  // src/context/SpreePayActionsContext.tsx
10
10
  import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -116,6 +116,11 @@ var CONFIG = {
116
116
  slapiUrl: "https://slapi.dev.superlogic.com",
117
117
  keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org",
118
118
  keycloakClientId: "oneof-next"
119
+ },
120
+ umhp: {
121
+ slapiUrl: "https://slapi.dev.umusicpassport.com",
122
+ keycloakUrl: "https://auth.dev.umusicpassport.com",
123
+ keycloakClientId: "oneof-next"
119
124
  }
120
125
  },
121
126
  stg: {
@@ -133,6 +138,11 @@ var CONFIG = {
133
138
  slapiUrl: "https://slapi.stg.tickets.qiibeefoundation.org",
134
139
  keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org",
135
140
  keycloakClientId: "oneof-next"
141
+ },
142
+ umhp: {
143
+ slapiUrl: "https://slapi.stg.umusicpassport.com",
144
+ keycloakUrl: "https://auth.stg.umusicpassport.com",
145
+ keycloakClientId: "oneof-next"
136
146
  }
137
147
  },
138
148
  prod: {
@@ -150,6 +160,11 @@ var CONFIG = {
150
160
  slapiUrl: "https://slapi.tickets.qiibeefoundation.org",
151
161
  keycloakUrl: "https://sso.tickets.qiibeefoundation.org",
152
162
  keycloakClientId: "oneof-next"
163
+ },
164
+ umhp: {
165
+ slapiUrl: "https://slapi.umusicpassport.com",
166
+ keycloakUrl: "https://auth.umusicpassport.com",
167
+ keycloakClientId: "oneof-next"
153
168
  }
154
169
  }
155
170
  };
@@ -997,9 +1012,12 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
997
1012
  /* @__PURE__ */ jsxs6(
998
1013
  "div",
999
1014
  {
1000
- className: cn("flex h-full w-full items-center justify-between border-1 !border-l-0 border-transparent px-3", {
1001
- "border-primary": isSelected
1002
- }),
1015
+ className: cn(
1016
+ "flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
1017
+ {
1018
+ "border-primary": isSelected
1019
+ }
1020
+ ),
1003
1021
  children: [
1004
1022
  /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
1005
1023
  /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
@@ -1363,7 +1381,7 @@ var PointsSwitch = (props) => {
1363
1381
  };
1364
1382
 
1365
1383
  // src/components/CreditCardTab/Points/SplitBlock.tsx
1366
- import { useCallback as useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
1384
+ import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
1367
1385
  import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
1368
1386
 
1369
1387
  // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -1399,7 +1417,7 @@ function clamp(value, [min, max]) {
1399
1417
  return Math.min(max, Math.max(min, value));
1400
1418
  }
1401
1419
 
1402
- // ../../node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive/dist/index.mjs
1420
+ // ../../node_modules/@radix-ui/primitive/dist/index.mjs
1403
1421
  var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
1404
1422
  function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
1405
1423
  return function handleEvent(event) {
@@ -1582,7 +1600,6 @@ function useUncontrolledState({
1582
1600
  function isFunction(value) {
1583
1601
  return typeof value === "function";
1584
1602
  }
1585
- var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
1586
1603
 
1587
1604
  // ../../node_modules/@radix-ui/react-direction/dist/index.mjs
1588
1605
  import * as React6 from "react";
@@ -1673,7 +1690,7 @@ var Primitive = NODES.reduce((primitive, node) => {
1673
1690
  const { asChild, ...primitiveProps } = props;
1674
1691
  const Comp = asChild ? Slot2 : node;
1675
1692
  if (typeof window !== "undefined") {
1676
- window[Symbol.for("radix-ui")] = true;
1693
+ window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
1677
1694
  }
1678
1695
  return /* @__PURE__ */ jsx19(Comp, { ...primitiveProps, ref: forwardedRef });
1679
1696
  });
@@ -2450,6 +2467,7 @@ var SplitBlock = (props) => {
2450
2467
  const [walletReady, setWalletReady] = useState9(false);
2451
2468
  const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
2452
2469
  const { env } = useSpreePayEnv();
2470
+ const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
2453
2471
  const initWallet = useCallback4(
2454
2472
  async (pointsChain) => {
2455
2473
  if (!pointsChain) return;
@@ -2471,11 +2489,17 @@ var SplitBlock = (props) => {
2471
2489
  [onToggle, env.environment]
2472
2490
  );
2473
2491
  useEffect6(() => {
2474
- if (env.useWeb3Points) {
2475
- setAddress(null);
2476
- setWalletReady(false);
2477
- initWallet(spreePayConfig?.pointsChain);
2478
- }
2492
+ if (!env.useWeb3Points) return;
2493
+ const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
2494
+ prevPointsChainRef.current = spreePayConfig?.pointsChain;
2495
+ const doInit = async () => {
2496
+ if (pointsChainChanged) {
2497
+ setAddress(null);
2498
+ setWalletReady(false);
2499
+ }
2500
+ await initWallet(spreePayConfig?.pointsChain);
2501
+ };
2502
+ doInit();
2479
2503
  }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
2480
2504
  const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
2481
2505
  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
@@ -2584,13 +2608,13 @@ var CreditCardTab = () => {
2584
2608
  register(handlePay);
2585
2609
  }, [register, handlePay]);
2586
2610
  return /* @__PURE__ */ jsxs15("div", { children: [
2587
- /* @__PURE__ */ jsx27("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx27(CreditCard, {}) }),
2611
+ /* @__PURE__ */ jsx27("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx27(CreditCard, {}) }),
2588
2612
  /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-6 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ jsx27(Points, {}) })
2589
2613
  ] });
2590
2614
  };
2591
2615
 
2592
2616
  // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
2593
- import { useEffect as useEffect10, useState as useState13 } from "react";
2617
+ import { useMemo as useMemo9 } from "react";
2594
2618
  import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2595
2619
  import NiceModal6 from "@ebay/nice-modal-react";
2596
2620
  import { RainbowKitProvider, getDefaultConfig, lightTheme } from "@rainbow-me/rainbowkit";
@@ -2632,10 +2656,13 @@ async function waitForTransactionReceipt(config, parameters) {
2632
2656
  const receipt = await action({ ...rest, timeout });
2633
2657
  if (receipt.status === "reverted") {
2634
2658
  const action_getTransaction = getAction(client, getTransaction, "getTransaction");
2635
- const txn = await action_getTransaction({ hash: receipt.transactionHash });
2659
+ const { from: account, ...txn } = await action_getTransaction({
2660
+ hash: receipt.transactionHash
2661
+ });
2636
2662
  const action_call = getAction(client, call, "call");
2637
2663
  const code = await action_call({
2638
2664
  ...txn,
2665
+ account,
2639
2666
  data: txn.input,
2640
2667
  gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
2641
2668
  maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
@@ -2948,18 +2975,58 @@ function Input2({ className, type, ...props }) {
2948
2975
  }
2949
2976
 
2950
2977
  // ../../node_modules/@radix-ui/react-separator/dist/index.mjs
2978
+ import * as React14 from "react";
2979
+
2980
+ // ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
2951
2981
  import * as React13 from "react";
2982
+ import * as ReactDOM2 from "react-dom";
2983
+ import { createSlot as createSlot3 } from "@radix-ui/react-slot";
2952
2984
  import { jsx as jsx32 } from "react/jsx-runtime";
2985
+ var NODES2 = [
2986
+ "a",
2987
+ "button",
2988
+ "div",
2989
+ "form",
2990
+ "h2",
2991
+ "h3",
2992
+ "img",
2993
+ "input",
2994
+ "label",
2995
+ "li",
2996
+ "nav",
2997
+ "ol",
2998
+ "p",
2999
+ "select",
3000
+ "span",
3001
+ "svg",
3002
+ "ul"
3003
+ ];
3004
+ var Primitive2 = NODES2.reduce((primitive, node) => {
3005
+ const Slot2 = createSlot3(`Primitive.${node}`);
3006
+ const Node2 = React13.forwardRef((props, forwardedRef) => {
3007
+ const { asChild, ...primitiveProps } = props;
3008
+ const Comp = asChild ? Slot2 : node;
3009
+ if (typeof window !== "undefined") {
3010
+ window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
3011
+ }
3012
+ return /* @__PURE__ */ jsx32(Comp, { ...primitiveProps, ref: forwardedRef });
3013
+ });
3014
+ Node2.displayName = `Primitive.${node}`;
3015
+ return { ...primitive, [node]: Node2 };
3016
+ }, {});
3017
+
3018
+ // ../../node_modules/@radix-ui/react-separator/dist/index.mjs
3019
+ import { jsx as jsx33 } from "react/jsx-runtime";
2953
3020
  var NAME = "Separator";
2954
3021
  var DEFAULT_ORIENTATION = "horizontal";
2955
3022
  var ORIENTATIONS = ["horizontal", "vertical"];
2956
- var Separator = React13.forwardRef((props, forwardedRef) => {
3023
+ var Separator = React14.forwardRef((props, forwardedRef) => {
2957
3024
  const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
2958
3025
  const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
2959
3026
  const ariaOrientation = orientation === "vertical" ? orientation : void 0;
2960
3027
  const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
2961
- return /* @__PURE__ */ jsx32(
2962
- Primitive.div,
3028
+ return /* @__PURE__ */ jsx33(
3029
+ Primitive2.div,
2963
3030
  {
2964
3031
  "data-orientation": orientation,
2965
3032
  ...semanticProps,
@@ -2975,14 +3042,14 @@ function isValidOrientation(orientation) {
2975
3042
  var Root6 = Separator;
2976
3043
 
2977
3044
  // ../ui/src/components/separator.tsx
2978
- import { jsx as jsx33 } from "react/jsx-runtime";
3045
+ import { jsx as jsx34 } from "react/jsx-runtime";
2979
3046
  function Separator2({
2980
3047
  className,
2981
3048
  orientation = "horizontal",
2982
3049
  decorative = true,
2983
3050
  ...props
2984
3051
  }) {
2985
- return /* @__PURE__ */ jsx33(
3052
+ return /* @__PURE__ */ jsx34(
2986
3053
  Root6,
2987
3054
  {
2988
3055
  "data-slot": "separator",
@@ -2998,17 +3065,17 @@ function Separator2({
2998
3065
  }
2999
3066
 
3000
3067
  // src/hooks/useBaseERC20Token.ts
3001
- import * as React14 from "react";
3068
+ import * as React15 from "react";
3002
3069
  import { erc20Abi as erc20Abi3, formatUnits, getAddress } from "viem";
3003
3070
  import { useAccount, usePublicClient } from "wagmi";
3004
3071
  function useBaseERC20Token() {
3005
3072
  const { address } = useAccount();
3006
3073
  const baseClient = usePublicClient({ chainId: BASE_CHAIN_ID });
3007
3074
  const defaultClient = usePublicClient();
3008
- const [rows, setRows] = React14.useState([]);
3009
- const [isLoading, setLoading] = React14.useState(false);
3010
- const [error, setError] = React14.useState(null);
3011
- React14.useEffect(() => {
3075
+ const [rows, setRows] = React15.useState([]);
3076
+ const [isLoading, setLoading] = React15.useState(false);
3077
+ const [error, setError] = React15.useState(null);
3078
+ React15.useEffect(() => {
3012
3079
  let cancelled = false;
3013
3080
  async function run() {
3014
3081
  const client = baseClient ?? defaultClient;
@@ -3089,7 +3156,7 @@ var useBaseTokens = () => {
3089
3156
  };
3090
3157
 
3091
3158
  // src/modals/CryptoSelectModal.tsx
3092
- import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
3159
+ import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
3093
3160
  var CryptoSelectModal = NiceModal4.create(() => {
3094
3161
  const modal = useModal2();
3095
3162
  const { isLoading, error, erc20Balances } = useBaseERC20Token();
@@ -3109,13 +3176,13 @@ var CryptoSelectModal = NiceModal4.create(() => {
3109
3176
  const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
3110
3177
  const userCoinSymbols = userCoins.map((c) => c.symbol);
3111
3178
  return /* @__PURE__ */ jsxs19(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
3112
- /* @__PURE__ */ jsx34(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
3179
+ /* @__PURE__ */ jsx35(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
3113
3180
  /* @__PURE__ */ jsxs19(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
3114
3181
  /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
3115
3182
  /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
3116
- /* @__PURE__ */ jsx34("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx34("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
3117
- /* @__PURE__ */ jsx34(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
3118
- /* @__PURE__ */ jsx34("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx34(
3183
+ /* @__PURE__ */ jsx35("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx35("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
3184
+ /* @__PURE__ */ jsx35(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
3185
+ /* @__PURE__ */ jsx35("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx35(
3119
3186
  "path",
3120
3187
  {
3121
3188
  fill: "#000",
@@ -3123,14 +3190,14 @@ var CryptoSelectModal = NiceModal4.create(() => {
3123
3190
  }
3124
3191
  ) }) })
3125
3192
  ] }),
3126
- /* @__PURE__ */ jsx34(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
3193
+ /* @__PURE__ */ jsx35(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
3127
3194
  ] }),
3128
- /* @__PURE__ */ jsx34(Separator2, { className: "hidden md:block" }),
3195
+ /* @__PURE__ */ jsx35(Separator2, { className: "hidden md:block" }),
3129
3196
  /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
3130
- /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
3131
- (error || nativeError) && /* @__PURE__ */ jsx34("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
3197
+ /* @__PURE__ */ jsx35("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
3198
+ (error || nativeError) && /* @__PURE__ */ jsx35("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
3132
3199
  /* @__PURE__ */ jsxs19("div", { className: "flex w-full flex-col gap-1", children: [
3133
- isLoadingNative && /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3200
+ isLoadingNative && /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3134
3201
  nativeBalance && /* @__PURE__ */ jsxs19(
3135
3202
  "button",
3136
3203
  {
@@ -3138,7 +3205,7 @@ var CryptoSelectModal = NiceModal4.create(() => {
3138
3205
  onClick: () => handleSelect(nativeBalance),
3139
3206
  children: [
3140
3207
  /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
3141
- nativeBalance.logoURI && /* @__PURE__ */ jsx34(
3208
+ nativeBalance.logoURI && /* @__PURE__ */ jsx35(
3142
3209
  "img",
3143
3210
  {
3144
3211
  className: "h-8 w-8 shrink-0",
@@ -3146,17 +3213,17 @@ var CryptoSelectModal = NiceModal4.create(() => {
3146
3213
  alt: `${nativeBalance.symbol} logo`
3147
3214
  }
3148
3215
  ),
3149
- /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
3216
+ /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
3150
3217
  ] }),
3151
- /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
3218
+ /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
3152
3219
  ]
3153
3220
  },
3154
3221
  nativeBalance.symbol
3155
3222
  ),
3156
3223
  isLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
3157
- /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3158
- /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3159
- /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
3224
+ /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3225
+ /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3226
+ /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
3160
3227
  ] }),
3161
3228
  erc20Balances.map((coin) => {
3162
3229
  const Icon = getSymbolLogo(coin.symbol);
@@ -3168,31 +3235,31 @@ var CryptoSelectModal = NiceModal4.create(() => {
3168
3235
  children: [
3169
3236
  /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
3170
3237
  Boolean(Icon) && Icon,
3171
- /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.symbol })
3238
+ /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: coin.symbol })
3172
3239
  ] }),
3173
- /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.formatted })
3240
+ /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: coin.formatted })
3174
3241
  ]
3175
3242
  },
3176
3243
  coin.symbol
3177
3244
  );
3178
3245
  })
3179
3246
  ] }),
3180
- /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
3247
+ /* @__PURE__ */ jsx35("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
3181
3248
  /* @__PURE__ */ jsxs19("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
3182
3249
  tokensIsLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
3183
- /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3184
- /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3185
- /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
3250
+ /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3251
+ /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3252
+ /* @__PURE__ */ jsx35("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
3186
3253
  ] }),
3187
- filteredCoins.map((token) => /* @__PURE__ */ jsx34(
3254
+ filteredCoins.map((token) => /* @__PURE__ */ jsx35(
3188
3255
  "button",
3189
3256
  {
3190
3257
  disabled: !userCoinSymbols.includes(token.symbol),
3191
3258
  onClick: () => handleSelect(userCoins.find((c) => c.symbol === token.symbol)),
3192
3259
  className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
3193
3260
  children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
3194
- token.logoURI ? /* @__PURE__ */ jsx34("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx34("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
3195
- /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: token.symbol })
3261
+ token.logoURI ? /* @__PURE__ */ jsx35("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx35("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
3262
+ /* @__PURE__ */ jsx35("p", { className: "text-sm font-medium", children: token.symbol })
3196
3263
  ] })
3197
3264
  },
3198
3265
  token.symbol
@@ -3205,44 +3272,44 @@ var CryptoSelectModal = NiceModal4.create(() => {
3205
3272
  CryptoSelectModal.displayName = "CryptoSelectModal";
3206
3273
 
3207
3274
  // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
3208
- import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
3275
+ import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
3209
3276
  var SelectCoinButton = () => {
3210
3277
  const openModal = () => {
3211
3278
  NiceModal5.show(CryptoSelectModal);
3212
3279
  };
3213
3280
  return /* @__PURE__ */ jsxs20("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
3214
- /* @__PURE__ */ jsx35("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx35("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
3281
+ /* @__PURE__ */ jsx36("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
3215
3282
  /* @__PURE__ */ jsxs20("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
3216
- /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx35("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
3217
- /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx35("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
3283
+ /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx36("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
3284
+ /* @__PURE__ */ jsx36("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx36("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
3218
3285
  ] })
3219
3286
  ] });
3220
3287
  };
3221
3288
 
3222
3289
  // src/components/CryptoTab/Crypto/SelectedCoin.tsx
3223
- import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
3290
+ import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
3224
3291
  var SelectedCoin = (props) => {
3225
3292
  const { coin, balance, logoURI } = props;
3226
3293
  const Icon = getSymbolLogo(coin);
3227
3294
  return /* @__PURE__ */ jsxs21("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
3228
- /* @__PURE__ */ jsx36("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx36("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
3295
+ /* @__PURE__ */ jsx37("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx37("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx37("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
3229
3296
  /* @__PURE__ */ jsxs21("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
3230
3297
  /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
3231
3298
  Icon,
3232
- !Icon && logoURI && /* @__PURE__ */ jsx36("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
3233
- /* @__PURE__ */ jsx36("p", { className: "font-semibold text-black", children: coin }),
3234
- /* @__PURE__ */ jsx36("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx36("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
3299
+ !Icon && logoURI && /* @__PURE__ */ jsx37("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
3300
+ /* @__PURE__ */ jsx37("p", { className: "font-semibold text-black", children: coin }),
3301
+ /* @__PURE__ */ jsx37("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx37("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
3235
3302
  ] }),
3236
3303
  /* @__PURE__ */ jsxs21("p", { className: "text-xs font-medium text-black/50", children: [
3237
3304
  "Wallet balance ",
3238
- /* @__PURE__ */ jsx36("span", { className: "text-black", children: balance })
3305
+ /* @__PURE__ */ jsx37("span", { className: "text-black", children: balance })
3239
3306
  ] })
3240
3307
  ] })
3241
3308
  ] });
3242
3309
  };
3243
3310
 
3244
3311
  // src/components/CryptoTab/Crypto/Crypto.tsx
3245
- import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
3312
+ import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
3246
3313
  var Crypto = () => {
3247
3314
  const { address } = useAccount3();
3248
3315
  const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -3268,12 +3335,12 @@ var Crypto = () => {
3268
3335
  }, [register, handlePay]);
3269
3336
  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-baseline gap-4", children: [
3270
3337
  /* @__PURE__ */ jsxs22("div", { className: "flex w-full items-center justify-between gap-4", children: [
3271
- /* @__PURE__ */ jsx37("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
3272
- /* @__PURE__ */ jsx37(ConnectButton, {})
3338
+ /* @__PURE__ */ jsx38("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
3339
+ /* @__PURE__ */ jsx38(ConnectButton, {})
3273
3340
  ] }),
3274
- !isWalletConnected && /* @__PURE__ */ jsx37(Logos, {}),
3341
+ !isWalletConnected && /* @__PURE__ */ jsx38(Logos, {}),
3275
3342
  isWalletConnected && /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-1", children: [
3276
- selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx37(
3343
+ selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx38(
3277
3344
  SelectedCoin,
3278
3345
  {
3279
3346
  coin: selectedPaymentMethod.method.symbol,
@@ -3281,13 +3348,13 @@ var Crypto = () => {
3281
3348
  logoURI: selectedPaymentMethod.method.logoURI
3282
3349
  }
3283
3350
  ),
3284
- /* @__PURE__ */ jsx37(SelectCoinButton, {})
3351
+ /* @__PURE__ */ jsx38(SelectCoinButton, {})
3285
3352
  ] })
3286
3353
  ] });
3287
3354
  };
3288
3355
 
3289
3356
  // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
3290
- import { jsx as jsx38 } from "react/jsx-runtime";
3357
+ import { jsx as jsx39 } from "react/jsx-runtime";
3291
3358
  var queryClient = new QueryClient();
3292
3359
  var CHAINS = [base];
3293
3360
  var wagmiConfigCache = /* @__PURE__ */ new Map();
@@ -3302,36 +3369,34 @@ function getCachedWagmiConfig(projectId, appName) {
3302
3369
  }
3303
3370
  var CryptoWrapper = () => {
3304
3371
  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
3305
- const [wagmiConfig, setWagmiConfig] = useState13(null);
3306
- useEffect10(() => {
3307
- if (!spreePayConfig) return;
3308
- const cfg2 = getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
3309
- setWagmiConfig((prev) => prev ? prev : cfg2);
3372
+ const wagmiConfig = useMemo9(() => {
3373
+ if (!spreePayConfig) return null;
3374
+ return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
3310
3375
  }, [spreePayConfig]);
3311
3376
  if (configIsLoading || !wagmiConfig) return null;
3312
- return /* @__PURE__ */ jsx38(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx38(NiceModal6.Provider, { children: /* @__PURE__ */ jsx38(Crypto, {}) }) }) }) });
3377
+ return /* @__PURE__ */ jsx39(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx39(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx39(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx39(NiceModal6.Provider, { children: /* @__PURE__ */ jsx39(Crypto, {}) }) }) }) });
3313
3378
  };
3314
3379
 
3315
3380
  // src/components/CryptoTab/CryptoTab.tsx
3316
- import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
3381
+ import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
3317
3382
  var CryptoTab = () => {
3318
3383
  const { spreePayConfig } = useSpreePayConfig();
3319
3384
  return /* @__PURE__ */ jsxs23("div", { children: [
3320
- /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
3321
- /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
3385
+ /* @__PURE__ */ jsx40("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx40(CryptoWrapper, {}) }),
3386
+ /* @__PURE__ */ jsx40("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx40(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
3322
3387
  ] });
3323
3388
  };
3324
3389
 
3325
3390
  // src/components/TabButtons.tsx
3326
- import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
3327
- var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
3328
- return /* @__PURE__ */ jsx40(
3391
+ import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
3392
+ var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
3393
+ return /* @__PURE__ */ jsx41(
3329
3394
  "button",
3330
3395
  {
3331
3396
  disabled: isDisabled,
3332
3397
  onClick,
3333
3398
  className: cn(
3334
- "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black/50 px-2.5 py-1.5 text-sm text-black",
3399
+ "flex w-[132px] flex-col items-baseline rounded-sm border border-black/50 px-2.5 py-1.5 text-sm text-black",
3335
3400
  { "opacity-50": !isActive || isDisabled },
3336
3401
  { "cursor-not-allowed": isDisabled },
3337
3402
  { "bg-primary/7 border-primary text-primary": isActive }
@@ -3342,98 +3407,88 @@ var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
3342
3407
  };
3343
3408
  var TabButtons = (props) => {
3344
3409
  const { value, onChange } = props;
3345
- const { spreePayConfig } = useSpreePayConfig();
3410
+ const { spreePayConfig, configIsLoading } = useSpreePayConfig();
3346
3411
  const handleChange = (type) => () => {
3347
3412
  if (value !== type) {
3348
3413
  onChange({ type, method: null });
3349
3414
  }
3350
3415
  };
3351
3416
  return /* @__PURE__ */ jsxs24("div", { className: "flex gap-2", children: [
3352
- /* @__PURE__ */ jsxs24(
3353
- TabButton,
3354
- {
3355
- isDisabled: !spreePayConfig?.creditCard.enabled,
3356
- onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
3357
- isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
3358
- children: [
3359
- /* @__PURE__ */ jsx40("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx40(
3360
- "path",
3361
- {
3362
- fill: "currentColor",
3363
- d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
3364
- }
3365
- ) }),
3366
- /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Card" })
3367
- ]
3368
- }
3369
- ),
3370
- /* @__PURE__ */ jsxs24(
3371
- TabButton,
3372
- {
3373
- isDisabled: !spreePayConfig?.crypto.enabled,
3374
- onClick: handleChange("CRYPTO" /* CRYPTO */),
3375
- isActive: value === "CRYPTO" /* CRYPTO */,
3376
- children: [
3377
- /* @__PURE__ */ jsxs24("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
3378
- /* @__PURE__ */ jsx40(
3379
- "path",
3380
- {
3381
- fill: "currentColor",
3382
- d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
3383
- }
3384
- ),
3385
- /* @__PURE__ */ jsx40(
3386
- "path",
3387
- {
3388
- fill: "currentColor",
3389
- d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
3390
- }
3391
- ),
3392
- /* @__PURE__ */ jsx40("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
3393
- ] }),
3394
- /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Crypto" })
3395
- ]
3396
- }
3397
- )
3417
+ configIsLoading && /* @__PURE__ */ jsxs24(Fragment7, { children: [
3418
+ /* @__PURE__ */ jsx41("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
3419
+ /* @__PURE__ */ jsx41("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
3420
+ ] }),
3421
+ spreePayConfig?.creditCard.enabled && /* @__PURE__ */ jsxs24(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
3422
+ /* @__PURE__ */ jsx41("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx41(
3423
+ "path",
3424
+ {
3425
+ fill: "currentColor",
3426
+ d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
3427
+ }
3428
+ ) }),
3429
+ /* @__PURE__ */ jsx41("p", { className: "text-sm font-medium", children: "Card" })
3430
+ ] }),
3431
+ spreePayConfig?.crypto.enabled && /* @__PURE__ */ jsxs24(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
3432
+ /* @__PURE__ */ jsxs24("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
3433
+ /* @__PURE__ */ jsx41(
3434
+ "path",
3435
+ {
3436
+ fill: "currentColor",
3437
+ d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
3438
+ }
3439
+ ),
3440
+ /* @__PURE__ */ jsx41(
3441
+ "path",
3442
+ {
3443
+ fill: "currentColor",
3444
+ d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
3445
+ }
3446
+ ),
3447
+ /* @__PURE__ */ jsx41("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
3448
+ ] }),
3449
+ /* @__PURE__ */ jsx41("p", { className: "text-sm font-medium", children: "Crypto" })
3450
+ ] })
3398
3451
  ] });
3399
3452
  };
3400
3453
 
3401
3454
  // src/components/Tabs.tsx
3402
- import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
3455
+ import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
3403
3456
  var Tabs = () => {
3404
3457
  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
3405
3458
  return /* @__PURE__ */ jsxs25("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
3406
3459
  /* @__PURE__ */ jsxs25("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
3407
- /* @__PURE__ */ jsx41("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
3408
- /* @__PURE__ */ jsx41(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
3460
+ /* @__PURE__ */ jsx42("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
3461
+ /* @__PURE__ */ jsx42(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
3409
3462
  ] }),
3410
- selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx41(CreditCardTab, {}),
3411
- selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx41(CryptoTab, {})
3463
+ selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx42(CreditCardTab, {}),
3464
+ selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx42(CryptoTab, {})
3412
3465
  ] });
3413
3466
  };
3414
3467
 
3415
3468
  // src/SpreePayContent.tsx
3416
- import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
3469
+ import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
3417
3470
  var SpreePayContent = ({ isLoggedIn }) => {
3418
3471
  return /* @__PURE__ */ jsxs26("div", { className: "w-full", children: [
3419
- /* @__PURE__ */ jsx42(Tabs, {}),
3420
- /* @__PURE__ */ jsx42(CheckoutButton, { isLoggedIn }),
3421
- /* @__PURE__ */ jsx42(SpreeLegal, {})
3472
+ /* @__PURE__ */ jsx43(Tabs, {}),
3473
+ /* @__PURE__ */ jsx43(CheckoutButton, { isLoggedIn }),
3474
+ /* @__PURE__ */ jsx43(SpreeLegal, {})
3422
3475
  ] });
3423
3476
  };
3424
3477
 
3425
3478
  // src/hooks/useKeycloakSSO.ts
3426
- import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef6, useState as useState14 } from "react";
3479
+ import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef7, useState as useState13 } from "react";
3427
3480
  import Keycloak from "keycloak-js";
3428
3481
  var refreshAheadSeconds = 60;
3429
3482
  function useKeycloakSSO(config) {
3430
3483
  const { url, realm, clientId, ssoPageURI, enabled } = config;
3431
- const initRef = useRef6(false);
3432
- const kcRef = useRef6(null);
3433
- const refreshTimerRef = useRef6(null);
3434
- const [error, setError] = useState14(null);
3435
- const [isChecking, setIsChecking] = useState14(enabled);
3436
- const [accessToken, setAccessToken] = useState14(null);
3484
+ const initRef = useRef7(false);
3485
+ const kcRef = useRef7(null);
3486
+ const refreshTimerRef = useRef7(null);
3487
+ const scheduleRefreshRef = useRef7(() => {
3488
+ });
3489
+ const [error, setError] = useState13(null);
3490
+ const [isChecking, setIsChecking] = useState13(enabled);
3491
+ const [accessToken, setAccessToken] = useState13(null);
3437
3492
  const scheduleRefresh = useCallback7(() => {
3438
3493
  const kc = kcRef.current;
3439
3494
  if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
@@ -3448,17 +3503,19 @@ function useKeycloakSSO(config) {
3448
3503
  kc.updateToken(refreshAheadSeconds).then((refreshed) => {
3449
3504
  if (refreshed) {
3450
3505
  setAccessToken(kc.token ?? null);
3451
- scheduleRefresh();
3506
+ scheduleRefreshRef.current();
3452
3507
  }
3453
3508
  }).catch((_) => {
3454
3509
  kc.login().catch(console.error);
3455
3510
  });
3456
3511
  }, delayMs);
3457
3512
  }, []);
3458
- useEffect11(() => {
3513
+ useEffect10(() => {
3514
+ scheduleRefreshRef.current = scheduleRefresh;
3515
+ }, [scheduleRefresh]);
3516
+ useEffect10(() => {
3459
3517
  if (initRef.current || !enabled) return;
3460
3518
  initRef.current = true;
3461
- setIsChecking(true);
3462
3519
  const kc = new Keycloak({ url, realm, clientId });
3463
3520
  kcRef.current = kc;
3464
3521
  kc.onTokenExpired = () => {
@@ -3490,21 +3547,20 @@ function useKeycloakSSO(config) {
3490
3547
  }
3491
3548
 
3492
3549
  // src/SpreePay.tsx
3493
- import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
3550
+ import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
3494
3551
  var SpreePayInner = () => {
3495
- const rootRef = useRef7(null);
3496
- const [portalEl, setPortalEl] = useState15(null);
3497
- useLayoutEffect3(() => {
3498
- if (!rootRef.current) return;
3499
- const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
3552
+ const [portalEl, setPortalEl] = useState14(null);
3553
+ const rootRef = useCallback8((node) => {
3554
+ if (!node) return;
3555
+ const el = node.querySelector(":scope > .sl-spreepay__portal");
3500
3556
  setPortalEl(el ?? null);
3501
3557
  }, []);
3502
- useEffect12(() => {
3558
+ useEffect11(() => {
3503
3559
  console.log(`[spree-pay] v${version}`);
3504
3560
  }, []);
3505
3561
  const { env } = useSpreePayEnv();
3506
3562
  const { staticConfig, appProps } = useStaticConfig();
3507
- const tenantId = env?.tenantId || "bookit";
3563
+ const tenantId = env?.tenantId;
3508
3564
  const { isChecking, accessToken } = useKeycloakSSO({
3509
3565
  realm: tenantId,
3510
3566
  url: staticConfig.keycloakUrl,
@@ -3513,7 +3569,7 @@ var SpreePayInner = () => {
3513
3569
  enabled: !env?.accessToken
3514
3570
  });
3515
3571
  const _accessToken = env.accessToken ?? accessToken;
3516
- const slapiFetcher = useMemo9(() => {
3572
+ const slapiFetcher = useMemo10(() => {
3517
3573
  if (_accessToken) {
3518
3574
  return registerApi({
3519
3575
  accessToken: _accessToken,
@@ -3525,12 +3581,12 @@ var SpreePayInner = () => {
3525
3581
  const getContent = () => {
3526
3582
  if (isChecking) {
3527
3583
  return /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col", children: [
3528
- /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
3529
- /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
3530
- /* @__PURE__ */ jsx43(SpreeLegal, {})
3584
+ /* @__PURE__ */ jsx44("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
3585
+ /* @__PURE__ */ jsx44("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
3586
+ /* @__PURE__ */ jsx44(SpreeLegal, {})
3531
3587
  ] });
3532
3588
  }
3533
- return /* @__PURE__ */ jsx43(
3589
+ return /* @__PURE__ */ jsx44(
3534
3590
  SWRConfig,
3535
3591
  {
3536
3592
  value: {
@@ -3539,23 +3595,23 @@ var SpreePayInner = () => {
3539
3595
  revalidateOnFocus: false,
3540
3596
  revalidateIfStale: false
3541
3597
  },
3542
- children: /* @__PURE__ */ jsx43(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx43(NiceModal7.Provider, { children: /* @__PURE__ */ jsx43(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
3598
+ children: /* @__PURE__ */ jsx44(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx44(NiceModal7.Provider, { children: /* @__PURE__ */ jsx44(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
3543
3599
  }
3544
3600
  );
3545
3601
  };
3546
3602
  return /* @__PURE__ */ jsxs27("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
3547
- /* @__PURE__ */ jsx43("div", { className: "sl-spreepay__portal" }),
3603
+ /* @__PURE__ */ jsx44("div", { className: "sl-spreepay__portal" }),
3548
3604
  getContent()
3549
3605
  ] });
3550
3606
  };
3551
3607
  var SpreePay = (props) => {
3552
- return /* @__PURE__ */ jsx43(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx43(SpreePayInner, {}) });
3608
+ return /* @__PURE__ */ jsx44(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx44(SpreePayInner, {}) });
3553
3609
  };
3554
3610
 
3555
3611
  // src/hooks/useCapture3DS.ts
3556
- import { useEffect as useEffect13 } from "react";
3612
+ import { useEffect as useEffect12 } from "react";
3557
3613
  var useCapture3DS = (searchParams) => {
3558
- useEffect13(() => {
3614
+ useEffect12(() => {
3559
3615
  if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
3560
3616
  window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
3561
3617
  }