@noaignite/react-centra-checkout/dist/PaymentEmbed.cjs

React components and helpers for Centra checkout api

Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
const require_Context = require("./Context.cjs");
const require_internal_HtmlEmbed = require("./internal/HtmlEmbed.cjs");
let _noaignite_utils = require("@noaignite/utils");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let react_fast_compare = require("react-fast-compare");
react_fast_compare = require_runtime.__toESM(react_fast_compare, 1);
//#region src/PaymentEmbed.tsx
/** This component handles rendering of payment widgets such as Klarna Checkout and Adyen drop-in, if you submit payments yourself directly,
you should simply call the submitPayment method of the context instead */
const PaymentEmbed = (0, react.memo)(function PaymentEmbed(props) {
	const { values, onPaymentError, onPaymentSuccess } = props;
	const [paymentResult, setPaymentResult] = (0, react.useState)(null);
	const [paymentCallbackError, setPaymentCallbackError] = (0, react.useState)(null);
	const previousPaymentMethod = (0, react.useRef)(null);
	const { selection, paymentMethods } = require_Context.useCentraSelection();
	const { submitPayment } = require_Context.useCentraHandlers();
	const paymentMethodId = selection?.paymentMethod;
	const paymentMethod = (0, react.useMemo)(() => paymentMethods?.find((p) => p.paymentMethod === paymentMethodId), [paymentMethods, paymentMethodId]);
	const handlePaymentCallback = (0, react.useCallback)((event) => {
		const { addressIncluded, billingAddress: detailsAddress, shippingAddress: detailsShippingAddress, paymentMethod: detailsPaymentMethod, paymentMethodSpecificFields } = event.detail;
		const payload = {
			address: values.address,
			shippingAddress: values.shippingAddress,
			paymentMethod: detailsPaymentMethod,
			paymentMethodSpecificFields,
			termsAndConditions: values.termsAndConditions
		};
		if (addressIncluded) {
			payload.address = detailsAddress;
			payload.shippingAddress = detailsShippingAddress;
		}
		submitPayment?.(payload).then((result) => {
			if ("errors" in result && Boolean(result.errors)) {
				onPaymentError?.(result.errors);
				setPaymentResult(null);
				setPaymentCallbackError(result.errors);
			} else {
				onPaymentSuccess?.(result);
				setPaymentCallbackError(null);
			}
		}).catch((err) => {
			console.error("@noaignite/react-centra-checkout: Could not submit payment");
			if ((0, _noaignite_utils.isPlainObject)(err)) setPaymentCallbackError(err);
			console.error(err);
		});
	}, [
		submitPayment,
		onPaymentSuccess,
		onPaymentError,
		values
	]);
	(0, react.useEffect)(() => {
		if (selection?.paymentMethod !== previousPaymentMethod.current) setPaymentResult(null);
	}, [selection?.paymentMethod]);
	(0, react.useEffect)(() => {
		const shouldRequestPayment = paymentMethod?.supportsInitiateOnly || paymentMethod?.providesCustomerAddressAfterPayment;
		if ((selection?.paymentMethod === previousPaymentMethod.current || !shouldRequestPayment) && !paymentCallbackError || !selection?.paymentMethod) return;
		previousPaymentMethod.current = selection.paymentMethod;
		submitPayment?.({
			...values,
			termsAndConditions: void 0
		}).then((result) => {
			if ("errors" in result) {
				console.error(result.errors);
				onPaymentError?.(result.errors);
				throw new Error("@noaignite/react-centra-checkout: Error while fetching widget");
			}
			if (result.action === "form" && !result.formHtml) throw new Error("@noaignite/react-centra-checkout: No form to render");
			setPaymentResult(result);
			setPaymentCallbackError(null);
		}).catch((err) => {
			console.error(err);
			setPaymentResult(null);
		});
	}, [
		onPaymentError,
		paymentCallbackError,
		paymentMethod,
		selection?.paymentMethod,
		selection?.totals?.grandTotalPriceAsNumber,
		submitPayment,
		values
	]);
	(0, react.useEffect)(() => {
		document.addEventListener("centra_checkout_payment_callback", handlePaymentCallback);
		return () => {
			document.removeEventListener("centra_checkout_payment_callback", handlePaymentCallback);
		};
	}, [handlePaymentCallback]);
	const formHtml = paymentResult && "formHtml" in paymentResult && paymentResult.formHtml;
	return formHtml ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_internal_HtmlEmbed.HtmlEmbed, {
		html: formHtml,
		id: "centra-payment-form"
	}) : null;
}, react_fast_compare.default);
//#endregion
exports.PaymentEmbed = PaymentEmbed;

//# sourceMappingURL=PaymentEmbed.cjs.map