@blocklet/payment-react/lib/components/stripe-payment-action.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = StripePaymentAction;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
var _ux = require("@arcblock/ux");
var _material = require("@mui/material");
var _ahooks = require("ahooks");
var _react = require("react");
var _stripe = _interopRequireDefault(require("../payment/form/stripe"));
var _api = _interopRequireDefault(require("../libs/api"));
var _util = require("../libs/util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function StripePaymentAction(props) {
  const {
    invoice,
    invoiceIds,
    subscriptionId,
    customerId,
    currencyId,
    paymentMethod,
    autoTrigger = false,
    onExternalPayment,
    onSuccess,
    onError,
    onClose,
    children
  } = props;
  const {
    t
  } = (0, _context.useLocaleContext)();
  const [state, setState] = (0, _ahooks.useSetState)({
    paying: false,
    confirmDialog: false,
    stripeDialog: false,
    clientSecret: null,
    publishableKey: null,
    customer: null
  });
  const autoTriggerRef = (0, _react.useRef)(false);
  (0, _react.useEffect)(() => {
    if (autoTrigger && !autoTriggerRef.current) {
      autoTriggerRef.current = true;
      handlePay();
    }
  }, [autoTrigger]);
  const handlePay = async () => {
    if (state.paying) {
      return;
    }
    const hasSubscription = !!(subscriptionId || invoice?.subscription_id);
    const method = paymentMethod || invoice?.paymentMethod;
    const shouldShowConfirm = hasSubscription && method?.type === "stripe";
    if (shouldShowConfirm) {
      setState({
        confirmDialog: true
      });
      return;
    }
    await proceedWithPayment();
  };
  const proceedWithPayment = async () => {
    setState({
      paying: true,
      confirmDialog: false
    });
    const derivedCurrencyId = currencyId || invoice?.currency_id || invoice?.paymentCurrency?.id;
    const derivedPaymentMethod = paymentMethod || invoice?.paymentMethod;
    const isStripePayment = derivedPaymentMethod?.type === "stripe";
    if (isStripePayment && derivedCurrencyId) {
      const stripePayload = {};
      if (invoiceIds && invoiceIds.length > 0) {
        stripePayload.invoice_ids = invoiceIds;
      } else if (invoice) {
        stripePayload.invoice_ids = [invoice.id];
      } else if (subscriptionId) {
        stripePayload.subscription_id = subscriptionId;
      } else if (customerId) {
        stripePayload.customer_id = customerId;
      }
      if (derivedCurrencyId) {
        stripePayload.currency_id = derivedCurrencyId;
      }
      try {
        const {
          data: paymentData
        } = await _api.default.post("/api/invoices/pay-stripe", stripePayload);
        setState({
          paying: false,
          stripeDialog: true,
          clientSecret: paymentData.client_secret,
          publishableKey: paymentData.publishable_key,
          customer: paymentData.customer || null
        });
        return;
      } catch (err) {
        const error = (0, _util.formatError)(err);
        _Toast.default.error(error);
        setState({
          paying: false
        });
        onError?.(error);
        return;
      }
    }
    setState({
      paying: false
    });
    if (onExternalPayment) {
      onExternalPayment(invoice?.id);
      return;
    }
    _Toast.default.error(t("payment.customer.invoice.payError"));
    onError?.(new Error("EXTERNAL_PAYMENT_HANDLER_NOT_PROVIDED"));
  };
  const handleConfirmCancel = () => {
    setState({
      confirmDialog: false,
      paying: false
    });
    onClose?.();
  };
  const handleStripeConfirm = () => {
    _Toast.default.success(t("payment.customer.invoice.payProcessing"));
    setState({
      paying: false,
      stripeDialog: false,
      clientSecret: null,
      publishableKey: null,
      customer: null
    });
    setTimeout(() => {
      onSuccess?.();
    }, 2e3);
  };
  const handleStripeCancel = () => {
    setState({
      paying: false,
      stripeDialog: false,
      clientSecret: null,
      publishableKey: null,
      customer: null
    });
    onClose?.();
  };
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [children?.(handlePay, state.paying), state.confirmDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
      open: state.confirmDialog,
      title: t("payment.customer.invoice.paymentConfirmTitle"),
      onClose: handleConfirmCancel,
      maxWidth: "sm",
      PaperProps: {
        style: {
          minHeight: 0
        }
      },
      actions: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
        variant: "outlined",
        onClick: handleConfirmCancel,
        children: t("common.cancel")
      }, "cancel"), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
        variant: "contained",
        onClick: proceedWithPayment,
        children: t("payment.customer.invoice.continue")
      }, "continue")],
      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        variant: "body1",
        sx: {
          color: "text.secondary",
          mt: -2
        },
        children: t("payment.customer.invoice.paymentConfirmDescription")
      })
    }), state.stripeDialog && state.clientSecret && state.publishableKey && state.customer && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
      clientSecret: state.clientSecret,
      intentType: "setup_intent",
      publicKey: state.publishableKey,
      customer: state.customer,
      mode: "setup",
      title: t("payment.customer.invoice.pay"),
      submitButtonText: t("common.submit"),
      onConfirm: handleStripeConfirm,
      onCancel: handleStripeCancel,
      returnUrl: window.location.href
    })]
  });
}