@superlogic/spree-pay 0.5.3 → 0.5.5

package/build/index.css

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

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-HZDR76ZV.js";
+} from "./chunk-UVD3GGPC.js";
 import {
   Iframe3ds
-} from "./chunk-PMTKUR3L.js";
+} from "./chunk-OTFCW74L.js";
 import {
   InfoBanner,
   LogLevel,
@@ -27,6 +27,7 @@ import {
   StaticConfigProvider,
   cn,
   configureLogger,
+  esm_default,
   isDeclineStatus,
   isNewCard,
   isPaymentError,
@@ -42,21 +43,19 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-NOTIAH6W.js";
+} from "./chunk-WYLYH7AK.js";
 
 // src/SpreePay.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState12 } from "react";
-import NiceModal4 from "@ebay/nice-modal-react";
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo9, useState as useState12 } from "react";
 import { SWRConfig } from "swr";
 
 // src/SpreePayContent.tsx
-import { Suspense, lazy, useEffect as useEffect6 } from "react";
+import { Suspense, lazy, useEffect as useEffect7 } from "react";
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback6, useEffect as useEffect5, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState10 } from "react";
 
 // src/hooks/payments/useCardPayment.ts
-import NiceModal from "@ebay/nice-modal-react";
 var cardPaymentLogger = logger.child("card-payment");
 var useCardPayment = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -120,7 +119,7 @@ var useCardPayment = () => {
       cardPaymentLogger.debug("Starting 3DS flow", {
         paymentId: paymentResData.id
       });
-      const paymentIntent = await NiceModal.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      const paymentIntent = await esm_default.show(Iframe3ds, { url: paymentResData.redirectUrl });
       if (paymentIntent) {
         cardPaymentLogger.debug("3DS completed, validating", {
           paymentId: paymentResData.id,
@@ -258,7 +257,6 @@ async function handleSendErc20(params) {
 }
 
 // src/hooks/payments/utils.ts
-import NiceModal2 from "@ebay/nice-modal-react";
 var REFRESH_INTERVAL = 3 * 1e3;
 var MAX_RETRIES = 10;
 async function longPollPoints(paymentId) {
@@ -303,7 +301,7 @@ async function longPollCardStatus(paymentId) {
       return detail.status;
     }
     if (!shown3ds && detail.card?.redirectUrl) {
-      const paymentIntent = await NiceModal2.show(Iframe3ds, { url: detail.card?.redirectUrl });
+      const paymentIntent = await esm_default.show(Iframe3ds, { url: detail.card?.redirectUrl });
       shown3ds = true;
       if (paymentIntent) {
         await SlapiPaymentService.validate3DS({ paymentId });
@@ -424,7 +422,6 @@ var usePointsPayment = (mode = "web2") => {
 };
 
 // src/hooks/payments/useSplitCardPayments.ts
-import NiceModal3 from "@ebay/nice-modal-react";
 var splitPaymentLogger = logger.child("split-card-payment");
 var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -480,7 +477,7 @@ var useSplitCardPayments = (mode = "web2") => {
     });
     if (paymentResData.redirectUrl) {
       splitPaymentLogger.debug("Starting 3DS flow for card portion", { paymentId: paymentResData.id });
-      const paymentIntent = await NiceModal3.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      const paymentIntent = await esm_default.show(Iframe3ds, { url: paymentResData.redirectUrl });
       if (paymentIntent) {
         splitPaymentLogger.debug("3DS completed, validating", { paymentId: paymentResData.id });
         await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
@@ -570,7 +567,7 @@ var useCards = () => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { useCallback as useCallback2, useMemo as useMemo3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect, useMemo as useMemo3, useRef, useState as useState3 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
@@ -747,7 +744,7 @@ var stripeElementClasses = {
   invalid: "focus-visible:ring-(--negative)",
   focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
-var CreditCardForm = ({ cancel, saveCard }) => {
+var CreditCardForm = ({ cancel, saveCard, showCancel }) => {
   const [cardError, setCardError] = useState2(void 0);
   const [stripeStyles, setStripeStyles] = useState2({});
   const [shouldSaveCard, setShouldSaveCard] = useState2(true);
@@ -854,7 +851,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       /* @__PURE__ */ jsx4(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      showCancel && /* @__PURE__ */ jsx4(
         Button,
         {
           variant: "outline",
@@ -879,15 +876,32 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
+var StripeWrapper = ({ onCancel, saveNewCard, publicKey, showCancel }) => {
   const stripePromise = useMemo3(() => loadStripe(publicKey), [publicKey]);
-  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
+  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard, showCancel }) });
 };
 var CreditCard = ({ newCards, setNewCards }) => {
   const [showForm, setShowForm] = useState3(false);
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { cards, cardsIsLoading } = useCards();
+  const canUseForm = isLoggedIn && Boolean(spreePayConfig?.stripePublicKey);
+  const hasCards = cards.length + newCards.length > 0;
+  const formVisible = canUseForm && (showForm || !hasCards && !cardsIsLoading);
+  const didAutoSelect = useRef(false);
+  useEffect(() => {
+    if (!isLoggedIn) {
+      didAutoSelect.current = false;
+      return;
+    }
+    if (didAutoSelect.current || cardsIsLoading) return;
+    didAutoSelect.current = true;
+    const alreadySelected = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && Boolean(selectedPaymentMethod.method);
+    if (!alreadySelected && cards.length > 0) {
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: cards[0] });
+    }
+  }, [isLoggedIn, cardsIsLoading, cards, selectedPaymentMethod, setSelectedPaymentMethod]);
   const setCard = (card) => {
     const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
     setSelectedPaymentMethod({
@@ -920,7 +934,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
   };
   return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-baseline gap-4", children: [
     /* @__PURE__ */ jsx5("h3", { className: "text-[22px] leading-9 font-medium text-(--brand-primary)", children: "Your Cards" }),
-    !showForm && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    !formVisible && /* @__PURE__ */ jsxs3(Fragment2, { children: [
       /* @__PURE__ */ jsx5(
         CardsList,
         {
@@ -935,13 +949,21 @@ var CreditCard = ({ newCards, setNewCards }) => {
         "button",
         {
           onClick: handleAddNewCard,
-          disabled: !isLoggedIn || !spreePayConfig?.stripePublicKey,
+          disabled: !canUseForm,
           className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
     ] }),
-    isLoggedIn && spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx5(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    formVisible && spreePayConfig?.stripePublicKey && /* @__PURE__ */ jsx5(
+      StripeWrapper,
+      {
+        onCancel: handleCancel,
+        saveNewCard,
+        publicKey: spreePayConfig.stripePublicKey,
+        showCancel: hasCards
+      }
+    )
   ] });
 };
 
@@ -949,7 +971,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
 import { useState as useState9 } from "react";
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -2007,8 +2029,10 @@ var PointsSelector = (props) => {
             Slider2,
             {
               value: [splitTokens],
-              onValueCommit: ([v]) => handleCommit(v),
-              onValueChange: ([v]) => setSplitTokens(v),
+              onValueChange: ([v]) => {
+                setSplitTokens(v);
+                handleCommit(v);
+              },
               onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
@@ -2050,7 +2074,7 @@ var SplitBlock = (props) => {
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-  const prevPointsChainRef = useRef5(spreePayConfig?.pointsChain);
+  const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
   const initWallet = useCallback5(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2074,7 +2098,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -2108,8 +2132,21 @@ var Points = () => {
   const [usePoints, setUsePoints] = useState9(false);
   const [selectedPointsType, setSelectedPointsType] = useState9(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
-  const { spreePayConfig } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
+  const { balance } = useSlapiBalance();
+  const { useWeb3Points } = useSpreePayEnv();
+  const pointsDisabled = !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints;
+  const [didInit, setDidInit] = useState9(false);
+  if (!isLoggedIn) {
+    if (didInit) setDidInit(false);
+  } else if (!didInit && balance !== void 0 && !configIsLoading) {
+    setDidInit(true);
+    if (!useWeb3Points && !pointsDisabled && balance.availablePoints > 0) {
+      setUsePoints(true);
+      setSelectedPointsType("air");
+    }
+  }
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2124,7 +2161,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
+        disabled: pointsDisabled
       }
     ),
     usePoints && /* @__PURE__ */ jsx15(
@@ -2202,7 +2239,7 @@ var CreditCardTab = () => {
       mutateBalance
     ]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs9("div", { children: [
@@ -2232,12 +2269,13 @@ var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
-  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading, configError } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
+  if (configError) return null;
   return /* @__PURE__ */ jsxs10("div", { className: "flex w-full gap-4 overflow-x-auto px-5 py-2 md:px-7", children: [
     configIsLoading && /* @__PURE__ */ jsx17("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
     spreePayConfig?.creditCard.enabled && /* @__PURE__ */ jsxs10(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
@@ -2284,9 +2322,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-ODXWUOMD.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-ROWYOLOL.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-GL5DOJ2P.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-3MCYJORT.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
@@ -2295,22 +2333,36 @@ var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex i
 var SpreePayContent = () => {
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  useEffect6(() => {
+  const { configError } = useSpreePayConfig();
+  useEffect7(() => {
     if (!isLoggedIn) {
       setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
     }
   }, [isLoggedIn, setSelectedPaymentMethod]);
-  return /* @__PURE__ */ jsxs11("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
-      /* @__PURE__ */ jsx18("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
-      /* @__PURE__ */ jsx18(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
-    ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, {}),
-    /* @__PURE__ */ jsxs11(Suspense, { fallback: /* @__PURE__ */ jsx18(TabLoadingFallback, {}), children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, {}),
-      selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ jsx18(CryptoComTab, {})
-    ] })
-  ] });
+  return (
+    // Config failed: inert disables the whole widget and drops it from tab order + a11y.
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        inert: !!configError,
+        className: cn(
+          "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]",
+          configError && "opacity-75"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
+            /* @__PURE__ */ jsx18("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
+            /* @__PURE__ */ jsx18(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+          ] }),
+          selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, {}),
+          /* @__PURE__ */ jsxs11(Suspense, { fallback: /* @__PURE__ */ jsx18(TabLoadingFallback, {}), children: [
+            selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, {}),
+            selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ jsx18(CryptoComTab, {})
+          ] })
+        ]
+      }
+    )
+  );
 };
 
 // src/components/ErrorBoundary.tsx
@@ -2362,16 +2414,16 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef7, useState as useState11 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config) {
   const { url, realm, clientId, ssoPageURI, enabled } = config;
-  const initRef = useRef6(false);
-  const kcRef = useRef6(null);
-  const refreshTimerRef = useRef6(null);
-  const scheduleRefreshRef = useRef6(() => {
+  const initRef = useRef7(false);
+  const kcRef = useRef7(null);
+  const refreshTimerRef = useRef7(null);
+  const scheduleRefreshRef = useRef7(() => {
   });
   const [error, setError] = useState11(null);
   const [isChecking, setIsChecking] = useState11(enabled);
@@ -2400,10 +2452,10 @@ function useKeycloakSSO(config) {
       });
     }, delayMs);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new Keycloak({ url, realm, clientId });
@@ -2458,7 +2510,7 @@ var SpreePayInner = () => {
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  useEffect8(() => {
+  useEffect9(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -2498,7 +2550,7 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx20(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx20(NiceModal4.Provider, { children: /* @__PURE__ */ jsx20(LoginStatusProvider, { isLoggedIn: Boolean(_accessToken), children: /* @__PURE__ */ jsx20(SpreePayContent, {}) }) }) })
+        children: /* @__PURE__ */ jsx20(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx20(esm_default.Provider, { children: /* @__PURE__ */ jsx20(LoginStatusProvider, { isLoggedIn: Boolean(_accessToken), children: /* @__PURE__ */ jsx20(SpreePayContent, {}) }) }) })
       }
     );
   };
@@ -2512,9 +2564,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 var useCapture3DS = ({ paymentIntent }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     if (typeof window !== "undefined" && window.parent && paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -42,7 +42,6 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@ebay/nice-modal-react": "^1.2.13",
     "@mocanetwork/airkit": "1.7.0",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -65,6 +64,7 @@
     "xss": "^1.0.15"
   },
   "devDependencies": {
+    "@ebay/nice-modal-react": "^1.2.13",
     "@repo/eslint-config": "^1.0.0",
     "@tailwindcss/postcss": "^4.3.0",
     "@types/react": "^19",
@@ -96,6 +96,8 @@
       "react-dom",
       "swr"
     ],
-    "noExternal": []
+    "noExternal": [
+      "@ebay/nice-modal-react"
+    ]
   }
 }