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

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CheckoutDialogs;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _paymentReactHeadless = require("@blocklet/payment-react-headless");
var _stripe = _interopRequireDefault(require("../../../payment/form/stripe"));
var _confirm = _interopRequireDefault(require("../../../components/confirm"));
var _priceChangeConfirm = _interopRequireDefault(require("../../../components/price-change-confirm"));
var _serviceSuspendedDialog = _interopRequireDefault(require("../../../components/service-suspended-dialog"));
var _format = require("../../utils/format");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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;
}
function CheckoutDialogs() {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const {
    session
  } = (0, _paymentReactHeadless.useSessionContext)();
  const {
    currency,
    stripe
  } = (0, _paymentReactHeadless.usePaymentMethodContext)();
  const submit = (0, _paymentReactHeadless.useSubmitFeature)();
  const form = (0, _paymentReactHeadless.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__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [showStripeDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
      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__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
      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__ */(0, _jsxRuntime.jsx)(_confirm.default, {
      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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
          available: `${(0, _format.formatTokenAmount)(submit.context.amount || "0", currency)} ${currency?.symbol || ""}`
        })
      }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          children: t("payment.checkout.fastPay.autoPaymentReason")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
          sx: {
            mt: 1.5,
            mb: 1.5
          }
        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          spacing: 1,
          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
            sx: {
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between"
            },
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                color: "text.primary",
                whiteSpace: "nowrap"
              },
              children: t("payment.checkout.fastPay.payer")
            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                color: "text.secondary",
                fontSize: 14
              },
              children: submit.context.payer ? `${submit.context.payer.slice(0, 10)}...${submit.context.payer.slice(-6)}` : ""
            })]
          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
            sx: {
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between"
            },
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                color: "text.primary"
              },
              children: t("payment.checkout.fastPay.amount")
            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
              children: [(0, _format.formatTokenAmount)(submit.context.amount || "0", currency), " ", currency?.symbol || ""]
            })]
          })]
        })]
      }),
      loading: false,
      color: "primary"
    }), submit.context?.type === "service_suspended" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_serviceSuspendedDialog.default, {
      open: true,
      onClose: submit.cancel
    }), submit.status === "credit_insufficient" && submit.context?.type === "credit_insufficient" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
      onConfirm: submit.cancel,
      onCancel: submit.cancel,
      title: t("payment.checkout.fastPay.credit.insufficientTitle"),
      message: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        children: t("payment.checkout.fastPay.credit.insufficientMessage")
      }),
      confirm: t("common.confirm")
    })]
  });
}