@schematichq/schematic-components 0.7.12 → 0.7.13

package/dist/schematic-components.cjs.js

@@ -16416,7 +16416,7 @@ var en_default = {
     Monthly: "Monthly",
     Next: "Next",
     "No limit": "No limit",
-    "No payment method selected": "No payment method selected",
+    "No payment method added yet": "No payment method added yet",
     "Not ready to cancel?": "Not ready to cancel?",
     "On demand": "On demand",
     "One time ": "One time",
@@ -16439,6 +16439,7 @@ var en_default = {
     "See less": "See less",
     "See more": "See more",
     "Select add-ons": "Select add-ons",
+    "Select existing payment method": "Select existing payment method",
     "Select payment method": "Select payment method",
     "Select plan": "Select plan",
     "Select quantity": "Select quantity",
@@ -17147,7 +17148,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.12";
+      headers["X-Schematic-Components-Version"] = "0.7.13";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -20961,7 +20962,9 @@ var CheckoutDialog = ({ top = 0 }) => {
   const contentRef = (0, import_react26.useRef)(null);
   const checkoutRef = (0, import_react26.useRef)(null);
   const [charges, setCharges] = (0, import_react26.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)(
+    (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
+  );
   const [isLoading, setIsLoading] = (0, import_react26.useState)(false);
   const [error, setError] = (0, import_react26.useState)();
   const [promoCode, setPromoCode] = (0, import_react26.useState)();
@@ -21451,6 +21454,7 @@ var PaymentForm = ({ onConfirm }) => {
   const [message, setMessage] = (0, import_react27.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
   const [isConfirmed, setIsConfirmed] = (0, import_react27.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react27.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21493,12 +21497,20 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_stripe_js.PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react_stripe_js.PaymentElement,
+          {
+            id: "payment-element",
+            onChange: (event) => {
+              setIsComplete(event.complete);
+            }
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isComplete,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -23041,7 +23053,7 @@ var PaymentElement2 = ({
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -23383,7 +23395,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.1.0",
+    version: "7.2.0",
     startTime
   });
 };
@@ -23458,7 +23470,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.2.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -23523,12 +23535,7 @@ var PaymentMethodDetails = ({
   const [stripe, setStripe] = (0, import_react38.useState)(null);
   const [setupIntent, setSetupIntent] = (0, import_react38.useState)();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react38.useState)(false);
-  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(void 0);
-  (0, import_react38.useEffect)(() => {
-    setPaymentMethod(
-      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
-    );
-  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
+  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
   const monthsToExpiration = (0, import_react38.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -23542,33 +23549,25 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  (0, import_react38.useEffect)(() => {
-    if (!stripe && setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
-    }
-  }, [stripe, setupIntent?.publishableKey]);
   const createSetupIntent = (0, import_react38.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
     try {
       setIsLoading(true);
-      const { data: setupIntent2 } = await api.getSetupIntent({
+      const response = await api.getSetupIntent({
         componentId: data.component.id
       });
-      setSetupIntent(setupIntent2);
-      setShowPaymentForm(true);
+      setSetupIntent(response.data);
     } catch {
       setError(
         t2("Error initializing payment method change. Please try again.")
       );
     } finally {
+      setShowPaymentForm(true);
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const dropDownDifferentPaymentMethods = (0, import_react38.useCallback)(() => {
-    setShowDifferentPaymentMethods((state) => !state);
-  }, []);
   const updatePaymentMethod = (0, import_react38.useCallback)(
     async (externalId) => {
       if (!api || !externalId) {
@@ -23645,33 +23644,43 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
+  (0, import_react38.useEffect)(() => {
+    if (!stripe && setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [stripe, setupIntent?.publishableKey]);
+  (0, import_react38.useEffect)(() => {
+    if (!setupIntent && (!paymentMethod || showPaymentForm)) {
+      createSetupIntent();
+    }
+  }, [setupIntent, paymentMethod, showPaymentForm, createSetupIntent]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Flex,
       {
         $position: "absolute",
-        $width: "100%",
-        $height: "100%",
+        $zIndex: isLoading ? 1 : 0,
         $justifyContent: "center",
         $alignItems: "center",
-        $flexGrow: 1,
-        $zIndex: 1,
-        $backgroundColor: "black",
-        $opacity: 0.5,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: theme.primary, $size: "2xl" })
+        $width: "100%",
+        $height: "100%",
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: theme.primary, $size: "2xl", $isLoading: isLoading })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Flex,
       {
+        $position: "relative",
+        $zIndex: isLoading ? 0 : 1,
         $flexDirection: "column",
-        $flexGrow: "1",
+        $flexGrow: 1,
         $gap: "1rem",
+        $overflow: "auto",
         $padding: "2rem 2.5rem 2rem 2.5rem",
+        $visibility: isLoading ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
-        $overflow: "auto",
         children: [
-          showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          setupIntent && showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             import_react_stripe_js2.Elements,
             {
               stripe,
@@ -23700,16 +23709,32 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                PaymentForm,
-                {
-                  onConfirm: async (paymentMethodId) => {
-                    await updatePaymentMethod(paymentMethodId);
-                    setShowPaymentForm(false);
-                    setShowDifferentPaymentMethods(false);
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  PaymentForm,
+                  {
+                    onConfirm: async (paymentMethodId) => {
+                      await updatePaymentMethod(paymentMethodId);
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    }
                   }
-                }
-              )
+                ),
+                paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  Text,
+                  {
+                    onClick: () => {
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    },
+                    $font: theme.typography.link.fontFamily,
+                    $size: theme.typography.link.fontSize,
+                    $weight: theme.typography.link.fontWeight,
+                    $color: theme.typography.link.color,
+                    children: t2("Select existing payment method")
+                  }
+                ) })
+              ]
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -23724,7 +23749,9 @@ var PaymentMethodDetails = ({
             (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               Text,
               {
-                onClick: dropDownDifferentPaymentMethods,
+                onClick: () => {
+                  setShowDifferentPaymentMethods((prev2) => !prev2);
+                },
                 $font: theme.typography.link.fontFamily,
                 $size: theme.typography.link.fontSize,
                 $weight: theme.typography.link.fontWeight,
@@ -23747,18 +23774,20 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
-              (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              PaymentListElement,
-              {
-                paymentMethod: paymentMethod2,
-                setDefault: updatePaymentMethod,
-                handleDelete: deletePaymentMethod
-              },
-              paymentMethod2.id
-            )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $overflowY: "hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+                (pm) => pm.id !== paymentMethod?.id
+              ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                PaymentListElement,
+                {
+                  paymentMethod: paymentMethod2,
+                  setDefault: updatePaymentMethod,
+                  handleDelete: deletePaymentMethod
+                },
+                paymentMethod2.id
+              )) }),
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,

package/dist/schematic-components.esm.js

@@ -16363,7 +16363,7 @@ var en_default = {
     Monthly: "Monthly",
     Next: "Next",
     "No limit": "No limit",
-    "No payment method selected": "No payment method selected",
+    "No payment method added yet": "No payment method added yet",
     "Not ready to cancel?": "Not ready to cancel?",
     "On demand": "On demand",
     "One time ": "One time",
@@ -16386,6 +16386,7 @@ var en_default = {
     "See less": "See less",
     "See more": "See more",
     "Select add-ons": "Select add-ons",
+    "Select existing payment method": "Select existing payment method",
     "Select payment method": "Select payment method",
     "Select plan": "Select plan",
     "Select quantity": "Select quantity",
@@ -17094,7 +17095,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.12";
+      headers["X-Schematic-Components-Version"] = "0.7.13";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -20918,7 +20919,9 @@ var CheckoutDialog = ({ top = 0 }) => {
   const contentRef = useRef5(null);
   const checkoutRef = useRef5(null);
   const [charges, setCharges] = useState8();
-  const [paymentMethodId, setPaymentMethodId] = useState8();
+  const [paymentMethodId, setPaymentMethodId] = useState8(
+    (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
+  );
   const [isLoading, setIsLoading] = useState8(false);
   const [error, setError] = useState8();
   const [promoCode, setPromoCode] = useState8();
@@ -21412,6 +21415,7 @@ var PaymentForm = ({ onConfirm }) => {
   const [message, setMessage] = useState9(null);
   const [isLoading, setIsLoading] = useState9(false);
   const [isConfirmed, setIsConfirmed] = useState9(false);
+  const [isComplete, setIsComplete] = useState9(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21454,12 +21458,20 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ jsx21(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx21(PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ jsx21(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx21(
+          PaymentElement,
+          {
+            id: "payment-element",
+            onChange: (event) => {
+              setIsComplete(event.complete);
+            }
+          }
+        ) }),
         /* @__PURE__ */ jsx21(
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isComplete,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -23002,7 +23014,7 @@ var PaymentElement2 = ({
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx32(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ jsx32(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ jsx32(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ jsx32(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx32(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -23344,7 +23356,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.1.0",
+    version: "7.2.0",
     startTime
   });
 };
@@ -23419,7 +23431,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.1.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("7.2.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -23484,12 +23496,7 @@ var PaymentMethodDetails = ({
   const [stripe, setStripe] = useState15(null);
   const [setupIntent, setSetupIntent] = useState15();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState15(false);
-  const [paymentMethod, setPaymentMethod] = useState15(void 0);
-  useEffect6(() => {
-    setPaymentMethod(
-      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
-    );
-  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
+  const [paymentMethod, setPaymentMethod] = useState15(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
   const monthsToExpiration = useMemo13(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -23503,33 +23510,25 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  useEffect6(() => {
-    if (!stripe && setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
-    }
-  }, [stripe, setupIntent?.publishableKey]);
   const createSetupIntent = useCallback10(async () => {
     if (!api || !data.component?.id) {
       return;
     }
     try {
       setIsLoading(true);
-      const { data: setupIntent2 } = await api.getSetupIntent({
+      const response = await api.getSetupIntent({
         componentId: data.component.id
       });
-      setSetupIntent(setupIntent2);
-      setShowPaymentForm(true);
+      setSetupIntent(response.data);
     } catch {
       setError(
         t2("Error initializing payment method change. Please try again.")
       );
     } finally {
+      setShowPaymentForm(true);
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const dropDownDifferentPaymentMethods = useCallback10(() => {
-    setShowDifferentPaymentMethods((state) => !state);
-  }, []);
   const updatePaymentMethod = useCallback10(
     async (externalId) => {
       if (!api || !externalId) {
@@ -23606,33 +23605,43 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
+  useEffect6(() => {
+    if (!stripe && setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [stripe, setupIntent?.publishableKey]);
+  useEffect6(() => {
+    if (!setupIntent && (!paymentMethod || showPaymentForm)) {
+      createSetupIntent();
+    }
+  }, [setupIntent, paymentMethod, showPaymentForm, createSetupIntent]);
   return /* @__PURE__ */ jsxs26(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx34(
       Flex,
       {
         $position: "absolute",
-        $width: "100%",
-        $height: "100%",
+        $zIndex: isLoading ? 1 : 0,
         $justifyContent: "center",
         $alignItems: "center",
-        $flexGrow: 1,
-        $zIndex: 1,
-        $backgroundColor: "black",
-        $opacity: 0.5,
-        children: /* @__PURE__ */ jsx34(Loader, { $color: theme.primary, $size: "2xl" })
+        $width: "100%",
+        $height: "100%",
+        children: /* @__PURE__ */ jsx34(Loader, { $color: theme.primary, $size: "2xl", $isLoading: isLoading })
       }
     ),
     /* @__PURE__ */ jsxs26(
       Flex,
       {
+        $position: "relative",
+        $zIndex: isLoading ? 0 : 1,
         $flexDirection: "column",
-        $flexGrow: "1",
+        $flexGrow: 1,
         $gap: "1rem",
+        $overflow: "auto",
         $padding: "2rem 2.5rem 2rem 2.5rem",
+        $visibility: isLoading ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
-        $overflow: "auto",
         children: [
-          showPaymentForm ? /* @__PURE__ */ jsx34(
+          setupIntent && showPaymentForm ? /* @__PURE__ */ jsxs26(
             Elements,
             {
               stripe,
@@ -23661,16 +23670,32 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ jsx34(
-                PaymentForm,
-                {
-                  onConfirm: async (paymentMethodId) => {
-                    await updatePaymentMethod(paymentMethodId);
-                    setShowPaymentForm(false);
-                    setShowDifferentPaymentMethods(false);
+              children: [
+                /* @__PURE__ */ jsx34(
+                  PaymentForm,
+                  {
+                    onConfirm: async (paymentMethodId) => {
+                      await updatePaymentMethod(paymentMethodId);
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    }
                   }
-                }
-              )
+                ),
+                paymentMethod && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(
+                  Text,
+                  {
+                    onClick: () => {
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    },
+                    $font: theme.typography.link.fontFamily,
+                    $size: theme.typography.link.fontSize,
+                    $weight: theme.typography.link.fontWeight,
+                    $color: theme.typography.link.color,
+                    children: t2("Select existing payment method")
+                  }
+                ) })
+              ]
             }
           ) : /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "2rem", children: [
             /* @__PURE__ */ jsx34(
@@ -23685,7 +23710,9 @@ var PaymentMethodDetails = ({
             (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsxs26(
               Text,
               {
-                onClick: dropDownDifferentPaymentMethods,
+                onClick: () => {
+                  setShowDifferentPaymentMethods((prev2) => !prev2);
+                },
                 $font: theme.typography.link.fontFamily,
                 $size: theme.typography.link.fontSize,
                 $weight: theme.typography.link.fontWeight,
@@ -23708,18 +23735,20 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
-              (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx34(
-              PaymentListElement,
-              {
-                paymentMethod: paymentMethod2,
-                setDefault: updatePaymentMethod,
-                handleDelete: deletePaymentMethod
-              },
-              paymentMethod2.id
-            )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            showDifferentPaymentMethods && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $overflowY: "hidden", children: [
+              /* @__PURE__ */ jsx34(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+                (pm) => pm.id !== paymentMethod?.id
+              ) || []).map((paymentMethod2) => /* @__PURE__ */ jsx34(
+                PaymentListElement,
+                {
+                  paymentMethod: paymentMethod2,
+                  setDefault: updatePaymentMethod,
+                  handleDelete: deletePaymentMethod
+                },
+                paymentMethod2.id
+              )) }),
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ jsx34(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ jsx34(Box, { children: /* @__PURE__ */ jsx34(
             Text,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -30,9 +30,9 @@
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^7.1.0",
+    "@stripe/stripe-js": "^7.2.0",
     "classnames": "^2.5.1",
-    "i18next": "^25.0.0",
+    "i18next": "^25.0.1",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
     "pluralize": "^8.0.0",
@@ -42,11 +42,11 @@
   },
   "devDependencies": {
     "@craftjs/core": "^0.2.12",
-    "@eslint/css": "^0.6.0",
-    "@eslint/js": "^9.24.0",
-    "@eslint/json": "^0.11.0",
+    "@eslint/css": "^0.7.0",
+    "@eslint/js": "^9.25.1",
+    "@eslint/json": "^0.12.0",
     "@eslint/markdown": "^6.3.0",
-    "@microsoft/api-extractor": "^7.52.4",
+    "@microsoft/api-extractor": "^7.52.5",
     "@openapitools/openapi-generator-cli": "^2.19.1",
     "@stripe/react-stripe-js": "^3.6.0",
     "@types/jest": "^29.5.14",
@@ -57,8 +57,8 @@
     "@types/react-dom": "^19.1.2",
     "esbuild": "^0.25.2",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^9.24.0",
-    "eslint-import-resolver-typescript": "^4.3.2",
+    "eslint": "^9.25.1",
+    "eslint-import-resolver-typescript": "^4.3.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
@@ -73,7 +73,7 @@
     "react-dom": "^19.1.0",
     "ts-jest": "^29.3.2",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.30.1"
+    "typescript-eslint": "^8.31.0"
   },
   "peerDependencies": {
     "@stripe/react-stripe-js": ">=3",