import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import {
  Box,
  Typography,
  Stack,
  Button,
  FormControlLabel,
  Alert,
  CircularProgress,
  InputAdornment,
  MenuItem,
  Avatar,
  Select,
  TextField
} from "@mui/material";
import { AccountBalanceWalletOutlined, AddOutlined, CreditCard, SwapHoriz } from "@mui/icons-material";
import { useForm, FormProvider, Controller } from "react-hook-form";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import Toast from "@arcblock/ux/lib/Toast";
import Dialog from "@arcblock/ux/lib/Dialog";
import { useRequest, useSetState } from "ahooks";
import { useNavigate } from "react-router-dom";
import { joinURL } from "ufo";
import pWaitFor from "p-wait-for";
import DidAddress from "@arcblock/ux/lib/DID";
import Switch from "../switch-button.js";
import api from "../../libs/api.js";
import { formatError, flattenPaymentMethods, getPrefix, formatBNStr, formatCreditAmount } from "../../libs/util.js";
import { usePaymentContext } from "../../contexts/payment.js";
import { createLink, handleNavigation } from "../../libs/navigation.js";
import Collapse from "../collapse.js";
import FormInput from "../input.js";
import StripeCheckout from "../../payment/form/stripe/index.js";
import AutoTopupProductCard from "./product-card.js";
import FormLabel from "../label.js";
const fetchConfig = async (customerId, currencyId) => {
  const { data } = await api.get(`/api/auto-recharge-configs/customer/${customerId}`, {
    params: { currency_id: currencyId }
  });
  return data;
};
const fetchCurrencyBalance = async (currencyId, payerAddress) => {
  const { data } = await api.get("/api/customers/payer-token", {
    params: { currencyId, payerAddress }
  });
  return data;
};
const DEFAULT_VALUES = {
  enabled: false,
  threshold: "100",
  quantity: 1,
  payment_method_id: "",
  recharge_currency_id: "",
  price_id: "",
  daily_max_amount: 0,
  daily_max_attempts: 0,
  slippage_config: null
};
const fetchExchangeRate = async (currencyId) => {
  const { data } = await api.post("/api/exchange-rates/validate", { currency: currencyId });
  return data;
};
export const waitForAutoRechargeComplete = async (configId) => {
  let result;
  await pWaitFor(
    async () => {
      const { data } = await api.get(`/api/auto-recharge-configs/retrieve/${configId}`);
      result = data;
      return !!result.payment_settings?.payment_method_options?.[result.paymentMethod.type]?.payer;
    },
    { interval: 2e3, timeout: 3 * 60 * 1e3 }
  );
  return result;
};
function PaymentMethodDisplay({
  config,
  onChangePaymentMethod,
  paymentMethod,
  currency
}) {
  const { t } = useLocaleContext();
  const [changePaymentMethod, setChangePaymentMethod] = useState(false);
  const navigate = useNavigate();
  const paymentInfo = config?.payment_settings?.payment_method_options?.[paymentMethod.type || ""];
  const { data: balanceInfo, loading: balanceLoading } = useRequest(
    async () => {
      if (paymentMethod.type === "stripe") {
        return null;
      }
      const result = await fetchCurrencyBalance(currency.id, paymentInfo?.payer);
      return result;
    },
    {
      refreshDeps: [currency.id, paymentInfo?.payer],
      ready: !!currency.id && !!paymentInfo?.payer
    }
  );
  const handleChangeToggle = () => {
    const newChange = !changePaymentMethod;
    setChangePaymentMethod(newChange);
    onChangePaymentMethod(newChange);
  };
  if (!paymentInfo) {
    return null;
  }
  const handleRecharge = (e) => {
    const url = joinURL(getPrefix(), `/customer/recharge/${currency.id}?rechargeAddress=${paymentInfo?.payer}`);
    const link = createLink(url, true);
    handleNavigation(e, link, navigate);
  };
  const renderPaymentMethodInfo = () => {
    if (paymentMethod.type === "stripe") {
      return /* @__PURE__ */ jsxs(
        Stack,
        {
          direction: "row",
          spacing: 1,
          sx: {
            alignItems: "center"
          },
          children: [
            /* @__PURE__ */ jsx(CreditCard, { fontSize: "small", color: "primary" }),
            /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
              "**** **** **** ",
              paymentInfo?.card_last4 || "****"
            ] }),
            /* @__PURE__ */ jsx(
              Typography,
              {
                variant: "body2",
                sx: {
                  color: "text.secondary",
                  textTransform: "uppercase"
                },
                children: paymentInfo?.card_brand || "CARD"
              }
            ),
            paymentInfo?.exp_time && /* @__PURE__ */ jsx(
              Typography,
              {
                variant: "body2",
                sx: {
                  color: "text.secondary",
                  borderLeft: "1px solid",
                  borderColor: "divider",
                  pl: 1
                },
                children: paymentInfo?.exp_time
              }
            )
          ]
        }
      );
    }
    return /* @__PURE__ */ jsxs(
      Stack,
      {
        spacing: 1,
        sx: {
          borderRadius: 1,
          backgroundColor: (theme) => theme.palette.mode === "dark" ? "grey.100" : "grey.50",
          p: 2
        },
        children: [
          /* @__PURE__ */ jsx(DidAddress, { did: paymentInfo?.payer, responsive: false, compact: true, copyable: false }),
          (balanceInfo || balanceLoading) && /* @__PURE__ */ jsxs(
            Stack,
            {
              direction: "row",
              spacing: 1,
              sx: {
                alignItems: "center"
              },
              children: [
                balanceLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 14, sx: { mr: 0.5 } }) : /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                  /* @__PURE__ */ jsx(AccountBalanceWalletOutlined, { fontSize: "small", sx: { color: "text.lighter" } }),
                  /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.primary" }, children: [
                    /* @__PURE__ */ jsxs("strong", { children: [
                      formatBNStr(balanceInfo?.token || "0", currency?.decimal),
                      " "
                    ] }),
                    currency?.symbol || ""
                  ] })
                ] }),
                /* @__PURE__ */ jsxs(
                  Button,
                  {
                    size: "small",
                    variant: "text",
                    onClick: handleRecharge,
                    sx: { fontSize: "smaller", color: "primary.main" },
                    children: [
                      /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }),
                      t("payment.autoTopup.addFunds")
                    ]
                  }
                )
              ]
            }
          )
        ]
      }
    );
  };
  return /* @__PURE__ */ jsx(
    Box,
    {
      sx: {
        p: 2,
        border: "1px solid",
        borderColor: changePaymentMethod ? "primary.main" : "divider",
        borderRadius: 1,
        bgcolor: changePaymentMethod ? "primary.50" : "background.paper"
      },
      children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
        /* @__PURE__ */ jsxs(
          Stack,
          {
            sx: {
              flexDirection: { xs: "column", sm: "row" },
              alignItems: { xs: "flex-start", sm: "center" },
              justifyContent: { xs: "flex-start", sm: "space-between" }
            },
            children: [
              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", sx: { display: "flex", alignItems: "center", gap: 1, whiteSpace: "nowrap" }, children: t("payment.autoTopup.currentPaymentMethod") }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  size: "small",
                  startIcon: /* @__PURE__ */ jsx(SwapHoriz, {}),
                  onClick: handleChangeToggle,
                  variant: "text",
                  sx: {
                    color: "primary.main",
                    whiteSpace: "nowrap",
                    alignSelf: { xs: "flex-end", sm: "center" }
                  },
                  children: changePaymentMethod ? t("payment.autoTopup.keepCurrent") : t("payment.autoTopup.changePaymentMethod")
                }
              )
            ]
          }
        ),
        changePaymentMethod ? /* @__PURE__ */ jsx(
          Typography,
          {
            variant: "body2",
            sx: {
              color: "text.secondary"
            },
            children: t("payment.autoTopup.changePaymentMethodTip")
          }
        ) : renderPaymentMethodInfo()
      ] })
    }
  );
}
export default function AutoTopup({
  open,
  onClose,
  currencyId,
  onSuccess = () => {
  },
  onError = () => {
  },
  defaultEnabled = void 0
}) {
  const { t, locale } = useLocaleContext();
  const { session, connect, settings } = usePaymentContext();
  const [changePaymentMethod, setChangePaymentMethod] = useState(false);
  const [slippagePercent, setSlippagePercent] = useState(0.5);
  const [slippageConfig, setSlippageConfig] = useState(null);
  const [state, setState] = useSetState({
    loading: false,
    submitting: false,
    authorizationRequired: false,
    stripeContext: {
      client_secret: "",
      intent_type: "",
      status: "",
      public_key: "",
      customer: {}
    }
  });
  const currencies = flattenPaymentMethods(settings.paymentMethods);
  const methods = useForm({
    defaultValues: {
      enabled: defaultEnabled || DEFAULT_VALUES.enabled,
      threshold: DEFAULT_VALUES.threshold,
      quantity: DEFAULT_VALUES.quantity,
      payment_method_id: DEFAULT_VALUES.payment_method_id,
      recharge_currency_id: DEFAULT_VALUES.recharge_currency_id,
      price_id: DEFAULT_VALUES.price_id,
      daily_limits: {
        max_attempts: DEFAULT_VALUES.daily_max_attempts,
        max_amount: DEFAULT_VALUES.daily_max_amount
      }
    }
  });
  const { handleSubmit, setValue, watch } = methods;
  const enabled = watch("enabled");
  const quantity = watch("quantity");
  const rechargeCurrencyId = watch("recharge_currency_id");
  const selectedMethod = settings.paymentMethods.find((method) => {
    return method.payment_currencies.find((c) => c.id === rechargeCurrencyId);
  });
  const isStripePayment = selectedMethod?.type === "stripe";
  const handleClose = () => {
    setState({
      loading: false,
      submitting: false,
      authorizationRequired: false
    });
    onClose();
  };
  const { data: config } = useRequest(() => fetchConfig(session?.user?.did, currencyId), {
    refreshDeps: [session?.user?.did, currencyId],
    ready: !!session?.user?.did && !!currencyId,
    onError: (error) => {
      Toast.error(formatError(error));
    },
    onSuccess: (data) => {
      setValue("enabled", defaultEnabled || data.enabled);
      setValue("threshold", data.threshold);
      setValue("quantity", data.quantity);
      setValue("payment_method_id", data.payment_method_id);
      setValue("recharge_currency_id", data.recharge_currency_id || data.price?.currency_id);
      setValue("price_id", data.price_id);
      setValue("daily_limits", {
        max_amount: data.daily_limits?.max_amount || 0,
        max_attempts: data.daily_limits?.max_attempts || 0
      });
      if (data.slippage_config) {
        setSlippageConfig(data.slippage_config);
        setSlippagePercent(data.slippage_config.percent ?? 0.5);
      }
    }
  });
  const isDynamicPricing = config?.price?.pricing_type === "dynamic";
  const { data: exchangeRateData } = useRequest(() => fetchExchangeRate(rechargeCurrencyId), {
    refreshDeps: [rechargeCurrencyId],
    ready: !!rechargeCurrencyId && isDynamicPricing && enabled && !isStripePayment,
    pollingInterval: 3e4,
    // Refresh every 30 seconds
    pollingWhenHidden: false,
    // Stop polling when tab is hidden
    onError: (error) => {
      console.warn("Failed to fetch exchange rate:", error.message);
    }
  });
  const filterCurrencies = useMemo(() => {
    return currencies.filter((c) => config?.price?.currency_options?.find((o) => o.currency_id === c.id));
  }, [currencies, config]);
  const handleConnected = async () => {
    try {
      const result = await waitForAutoRechargeComplete(config?.id);
      if (result) {
        setState({ submitting: false, authorizationRequired: false });
        onSuccess?.(config);
        handleClose();
        Toast.success(t("payment.autoTopup.saveSuccess"));
      }
    } catch (err) {
      Toast.error(formatError(err));
    } finally {
      setState({ submitting: false, authorizationRequired: false });
    }
  };
  const handleDisable = async () => {
    try {
      const submitData = {
        ...config,
        enabled: false
      };
      if (!config?.enabled) {
        return;
      }
      const { data } = await api.post("/api/auto-recharge-configs/submit", submitData);
      onSuccess?.(data);
      Toast.success(t("payment.autoTopup.disableSuccess"));
    } catch (error) {
      Toast.error(formatError(error));
      onError?.(error);
    }
  };
  const handleEnableChange = async (checked) => {
    setValue("enabled", checked);
    if (!checked) {
      await handleDisable();
    }
  };
  const handleAuthorizationRequired = (authData) => {
    setState({ authorizationRequired: true });
    if (authData.stripeContext) {
      setState({
        stripeContext: {
          client_secret: authData.stripeContext.client_secret,
          intent_type: authData.stripeContext.intent_type,
          status: authData.stripeContext.status,
          public_key: authData.paymentMethod.settings.stripe.publishable_key,
          customer: authData.customer
        }
      });
    } else if (authData.delegation) {
      handleDidConnect();
    }
  };
  const handleDidConnect = () => {
    try {
      setState({ submitting: true });
      connect.open({
        containerEl: void 0,
        saveConnect: false,
        locale,
        action: "auto-recharge-auth",
        prefix: joinURL(getPrefix(), "/api/did"),
        extraParams: {
          autoRechargeConfigId: config?.id
        },
        messages: {
          scan: t("payment.autoTopup.authTip"),
          title: t("payment.autoTopup.authTitle"),
          confirm: t("common.connect.confirm")
        },
        onSuccess: async () => {
          connect.close();
          await handleConnected();
        },
        onClose: () => {
          connect.close();
          setState({ submitting: false, authorizationRequired: false });
        },
        onError: (err) => {
          setState({ submitting: false, authorizationRequired: false });
          Toast.error(formatError(err));
        }
      });
    } catch (error) {
      setState({ submitting: false, authorizationRequired: false });
      Toast.error(formatError(error));
    }
  };
  const handleFormSubmit = async (formData) => {
    setState({ submitting: true });
    try {
      const submitData = {
        customer_id: session?.user?.did,
        enabled: formData.enabled,
        threshold: formData.threshold,
        currency_id: currencyId,
        recharge_currency_id: formData.recharge_currency_id,
        price_id: formData.price_id,
        quantity: formData.quantity,
        daily_limits: {
          max_attempts: formData.daily_limits.max_attempts || 0,
          max_amount: formData.daily_limits.max_amount || "0"
        },
        change_payment_method: changePaymentMethod
      };
      if (isDynamicPricing && slippageConfig) {
        submitData.slippage_config = {
          ...slippageConfig,
          updated_at_ms: Date.now()
        };
      }
      const { data } = await api.post("/api/auto-recharge-configs/submit", submitData);
      if (data.balanceResult && !data.balanceResult.sufficient) {
        await handleAuthorizationRequired({
          ...data.balanceResult,
          paymentMethod: data.paymentMethod,
          customer: data.customer
        });
        return;
      }
      setState({
        submitting: false,
        authorizationRequired: false
      });
      onSuccess?.(data);
      handleClose();
      Toast.success(t("payment.autoTopup.saveSuccess"));
    } catch (error) {
      setState({ submitting: false, authorizationRequired: false });
      Toast.error(formatError(error));
      onError?.(error);
    }
  };
  const onSubmit = (formData) => {
    handleFormSubmit(formData);
  };
  const rechargeCurrency = filterCurrencies.find((c) => c.id === rechargeCurrencyId);
  const showStripeForm = state.authorizationRequired && isStripePayment;
  const onStripeConfirm = async () => {
    await handleConnected();
  };
  const onStripeCancel = () => {
    setState({ submitting: false, authorizationRequired: false });
  };
  return /* @__PURE__ */ jsx(
    Dialog,
    {
      open,
      onClose: handleClose,
      maxWidth: "sm",
      fullWidth: true,
      className: "base-dialog",
      title: t("payment.autoTopup.title"),
      actions: enabled ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, children: [
        /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleClose, disabled: state.submitting, children: t("common.cancel") }),
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: "contained",
            onClick: () => handleSubmit(onSubmit)(),
            disabled: state.loading || state.authorizationRequired || state.submitting,
            children: [
              state.submitting && /* @__PURE__ */ jsx(CircularProgress, { size: 20, sx: { mr: 1 } }),
              t("payment.autoTopup.saveConfiguration")
            ]
          }
        )
      ] }) : null,
      children: /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(Box, { component: "form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs(
        Stack,
        {
          sx: {
            gap: 2
          },
          children: [
            /* @__PURE__ */ jsx(Alert, { severity: "info", children: t("payment.autoTopup.tip") }),
            /* @__PURE__ */ jsxs(
              Stack,
              {
                spacing: 2,
                direction: "row",
                sx: {
                  alignItems: "center"
                },
                children: [
                  /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: t("payment.autoTopup.enableLabel") }),
                  /* @__PURE__ */ jsx(
                    FormControlLabel,
                    {
                      control: /* @__PURE__ */ jsx(Switch, { checked: enabled, onChange: (e) => handleEnableChange(e.target.checked) }),
                      label: ""
                    }
                  )
                ]
              }
            ),
            enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(Box, { sx: { pt: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2.5, children: [
                /* @__PURE__ */ jsxs(
                  Stack,
                  {
                    sx: {
                      gap: 2,
                      flexDirection: { xs: "column", sm: "row" },
                      alignItems: { xs: "flex-start", sm: "center" },
                      justifyContent: { xs: "flex-start", sm: "space-between" },
                      ".MuiTextField-root": {
                        width: {
                          xs: "100%",
                          sm: "auto"
                        }
                      }
                    },
                    children: [
                      /* @__PURE__ */ jsx(FormLabel, { boxSx: { width: "fit-content", whiteSpace: "nowrap", marginBottom: 0 }, children: t("payment.autoTopup.triggerThreshold") }),
                      /* @__PURE__ */ jsx(
                        Controller,
                        {
                          name: "threshold",
                          control: methods.control,
                          rules: {
                            required: t("payment.checkout.required"),
                            min: { value: 0, message: t("payment.autoTopup.thresholdMinError") }
                          },
                          render: ({ field }) => /* @__PURE__ */ jsx(
                            TextField,
                            {
                              ...field,
                              type: "number",
                              placeholder: t("payment.autoTopup.thresholdPlaceholder"),
                              sx: {
                                input: {
                                  minWidth: 80
                                }
                              },
                              slotProps: {
                                input: {
                                  endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: formatCreditAmount("", config?.currency?.symbol) })
                                },
                                htmlInput: {
                                  min: 0,
                                  step: 0.01
                                }
                              }
                            }
                          )
                        }
                      )
                    ]
                  }
                ),
                /* @__PURE__ */ jsxs(
                  Stack,
                  {
                    sx: {
                      gap: 2,
                      flexDirection: { xs: "column", sm: "row" },
                      alignItems: { xs: "flex-start", sm: "center" },
                      justifyContent: { xs: "flex-start", sm: "space-between" }
                    },
                    children: [
                      /* @__PURE__ */ jsx(FormLabel, { boxSx: { width: "fit-content", whiteSpace: "nowrap", marginBottom: 0 }, children: t("payment.autoTopup.purchaseBelow") }),
                      /* @__PURE__ */ jsx(
                        Controller,
                        {
                          name: "recharge_currency_id",
                          control: methods.control,
                          render: ({ field }) => /* @__PURE__ */ jsx(
                            Select,
                            {
                              ...field,
                              value: field.value,
                              onChange: (e) => field.onChange(e.target.value),
                              size: "small",
                              children: filterCurrencies.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x?.id, children: /* @__PURE__ */ jsxs(
                                Stack,
                                {
                                  direction: "row",
                                  sx: {
                                    alignItems: "center",
                                    gap: 1
                                  },
                                  children: [
                                    /* @__PURE__ */ jsx(Avatar, { src: x?.logo, sx: { width: 20, height: 20 }, alt: x?.symbol }),
                                    /* @__PURE__ */ jsxs(
                                      Typography,
                                      {
                                        sx: {
                                          color: "text.secondary"
                                        },
                                        children: [
                                          x?.symbol,
                                          " (",
                                          x?.method?.name,
                                          ")"
                                        ]
                                      }
                                    )
                                  ]
                                }
                              ) }, x?.id))
                            }
                          )
                        }
                      )
                    ]
                  }
                ),
                config?.price?.product && /* @__PURE__ */ jsx(
                  AutoTopupProductCard,
                  {
                    product: config.price.product,
                    price: config.price,
                    creditCurrency: config.currency,
                    currency: filterCurrencies.find((c) => c.id === rechargeCurrencyId) || filterCurrencies[0],
                    quantity,
                    onQuantityChange: (newQuantity) => setValue("quantity", newQuantity),
                    maxQuantity: 9999,
                    minQuantity: 1,
                    exchangeRate: exchangeRateData?.rate,
                    isDynamicPricing: isDynamicPricing && !isStripePayment,
                    exchangeRateData,
                    slippageConfig,
                    slippagePercent,
                    onSlippageChange: (newSlippageConfig) => {
                      setSlippageConfig(newSlippageConfig);
                      if (newSlippageConfig.percent !== void 0) {
                        setSlippagePercent(newSlippageConfig.percent);
                      }
                    },
                    disabled: state.submitting
                  }
                ),
                config && rechargeCurrency && /* @__PURE__ */ jsx(
                  PaymentMethodDisplay,
                  {
                    config,
                    onChangePaymentMethod: setChangePaymentMethod,
                    currency: rechargeCurrency,
                    paymentMethod: selectedMethod
                  }
                ),
                /* @__PURE__ */ jsx(Collapse, { trigger: t("payment.autoTopup.advanced"), children: /* @__PURE__ */ jsxs(
                  Stack,
                  {
                    sx: {
                      gap: 2,
                      pl: 2,
                      pr: 1
                    },
                    children: [
                      /* @__PURE__ */ jsx(
                        FormInput,
                        {
                          name: "daily_limits.max_amount",
                          label: t("payment.autoTopup.dailyLimits.maxAmount"),
                          type: "number",
                          placeholder: t("payment.autoTopup.dailyLimits.maxAmountPlaceholder"),
                          tooltip: t("payment.autoTopup.dailyLimits.maxAmountDescription"),
                          inputProps: {
                            min: 0,
                            step: 0.01
                          },
                          slotProps: {
                            input: {
                              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: filterCurrencies.find((c) => c.id === rechargeCurrencyId)?.symbol || "" })
                            }
                          },
                          sx: {
                            maxWidth: {
                              xs: "100%",
                              sm: "220px"
                            }
                          },
                          layout: "horizontal"
                        }
                      ),
                      /* @__PURE__ */ jsx(
                        FormInput,
                        {
                          name: "daily_limits.max_attempts",
                          label: t("payment.autoTopup.dailyLimits.maxAttempts"),
                          type: "number",
                          placeholder: t("payment.autoTopup.dailyLimits.maxAttemptsPlaceholder"),
                          tooltip: t("payment.autoTopup.dailyLimits.maxAttemptsDescription"),
                          inputProps: {
                            min: 0,
                            step: 1
                          },
                          sx: {
                            maxWidth: {
                              xs: "100%",
                              sm: "220px"
                            }
                          },
                          layout: "horizontal"
                        }
                      )
                    ]
                  }
                ) })
              ] }) }),
              /* @__PURE__ */ jsx(Stack, { spacing: 2, children: showStripeForm && /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: state.stripeContext && /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(
                StripeCheckout,
                {
                  clientSecret: state.stripeContext.client_secret,
                  intentType: state.stripeContext.intent_type,
                  publicKey: state.stripeContext.public_key,
                  customer: state.stripeContext.customer,
                  mode: "setup",
                  onConfirm: onStripeConfirm,
                  onCancel: onStripeCancel
                }
              ) }) }) })
            ] })
          ]
        }
      ) }) })
    }
  );
}
