@blocklet/payment-react/es/checkout-v2/components/dialogs/checkout-dialogs.js

Reusable react components for payment kit v2

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Divider, Stack, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import {
  useSessionContext,
  usePaymentMethodContext,
  useSubmitFeature,
  useCustomerFormFeature
} from "@blocklet/payment-react-headless";
import StripeForm from "../../../payment/form/stripe/index.js";
import ConfirmDialog from "../../../components/confirm.js";
import PriceChangeConfirm from "../../../components/price-change-confirm.js";
import ServiceSuspendedDialog from "../../../components/service-suspended-dialog.js";
import { formatTokenAmount } from "../../utils/format.js";
function getRedirectUrl(session) {
  try {
    const params = new URLSearchParams(window.location.search);
    const redirect = params.get("redirect");
    if (redirect) return decodeURIComponent(redirect);
  } catch {
  }
  if (session?.success_url) return session.success_url;
  if (session?.payment_link?.after_completion?.redirect?.url) {
    return session.payment_link.after_completion.redirect.url;
  }
  return void 0;
}
export default function CheckoutDialogs() {
  const { t } = useLocaleContext();
  const { session } = useSessionContext();
  const { currency, stripe } = usePaymentMethodContext();
  const submit = useSubmitFeature();
  const form = useCustomerFormFeature();
  const mode = session?.mode || "payment";
  const stripeContext = submit.context?.type === "stripe" ? submit.context : null;
  const showStripeDialog = submit.status === "waiting_stripe" && stripeContext?.clientSecret;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    showStripeDialog && /* @__PURE__ */ jsx(
      StripeForm,
      {
        clientSecret: stripeContext.clientSecret,
        intentType: stripeContext.intentType || "payment_intent",
        publicKey: stripe?.publishableKey || "",
        mode,
        customer: {
          name: form.values.customer_name,
          email: form.values.customer_email,
          phone: form.values.customer_phone,
          address: form.values.billing_address
        },
        returnUrl: getRedirectUrl(session),
        onConfirm: submit.stripeConfirm,
        onCancel: submit.stripeCancel,
        onSkip: stripeContext.noPaymentRequired && `${session?.metadata?.allow_skip_payment_method}` === "true" ? submit.stripeSkip : void 0
      }
    ),
    submit.status === "confirming_price" && submit.context?.type === "price_change" && /* @__PURE__ */ jsx(
      PriceChangeConfirm,
      {
        open: true,
        changePercent: submit.context.changePercent,
        onConfirm: submit.confirm,
        onCancel: submit.cancel,
        loading: false
      }
    ),
    submit.status === "confirming_fast_pay" && submit.context?.type === "fast_pay" && /* @__PURE__ */ jsx(
      ConfirmDialog,
      {
        onConfirm: submit.confirm,
        onCancel: submit.cancel,
        title: submit.context.payType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
        message: submit.context.payType === "credit" ? /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
          available: `${formatTokenAmount(submit.context.amount || "0", currency)} ${currency?.symbol || ""}`
        }) }) : /* @__PURE__ */ jsxs(Stack, { children: [
          /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
          /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
          /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
            /* @__PURE__ */ jsxs(Stack, { sx: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", whiteSpace: "nowrap" }, children: t("payment.checkout.fastPay.payer") }),
              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: submit.context.payer ? `${submit.context.payer.slice(0, 10)}...${submit.context.payer.slice(-6)}` : "" })
            ] }),
            /* @__PURE__ */ jsxs(Stack, { sx: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary" }, children: t("payment.checkout.fastPay.amount") }),
              /* @__PURE__ */ jsxs(Typography, { children: [
                formatTokenAmount(submit.context.amount || "0", currency),
                " ",
                currency?.symbol || ""
              ] })
            ] })
          ] })
        ] }),
        loading: false,
        color: "primary"
      }
    ),
    submit.context?.type === "service_suspended" && /* @__PURE__ */ jsx(ServiceSuspendedDialog, { open: true, onClose: submit.cancel }),
    submit.status === "credit_insufficient" && submit.context?.type === "credit_insufficient" && /* @__PURE__ */ jsx(
      ConfirmDialog,
      {
        onConfirm: submit.cancel,
        onCancel: submit.cancel,
        title: t("payment.checkout.fastPay.credit.insufficientTitle"),
        message: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.insufficientMessage") }),
        confirm: t("common.confirm")
      }
    )
  ] });
}