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

React components and helpers for Centra checkout api

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/PaymentEmbed.tsx
var PaymentEmbed_exports = {};
__export(PaymentEmbed_exports, {
  PaymentEmbed: () => PaymentEmbed
});
module.exports = __toCommonJS(PaymentEmbed_exports);
var import_utils = require("@noaignite/utils");
var import_react = require("react");
var import_react_fast_compare = __toESM(require("react-fast-compare"), 1);
var import_Context = require("./Context.cjs");
var import_HtmlEmbed = require("./internal/HtmlEmbed.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var PaymentEmbed = (0, import_react.memo)(function PaymentEmbed2(props) {
  const { values, onPaymentError, onPaymentSuccess } = props;
  const [paymentResult, setPaymentResult] = (0, import_react.useState)(null);
  const [paymentCallbackError, setPaymentCallbackError] = (0, import_react.useState)(null);
  const previousPaymentMethod = (0, import_react.useRef)(null);
  const { selection, paymentMethods } = (0, import_Context.useCentraSelection)();
  const { submitPayment } = (0, import_Context.useCentraHandlers)();
  const paymentMethodId = selection?.paymentMethod;
  const paymentMethod = (0, import_react.useMemo)(
    () => paymentMethods?.find((p) => p.paymentMethod === paymentMethodId),
    [paymentMethods, paymentMethodId]
  );
  const handlePaymentCallback = (0, import_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, import_utils.isPlainObject)(err)) {
          setPaymentCallbackError(err);
        }
        console.error(err);
      });
    },
    [submitPayment, onPaymentSuccess, onPaymentError, values]
  );
  (0, import_react.useEffect)(() => {
    if (selection?.paymentMethod !== previousPaymentMethod.current) {
      setPaymentResult(null);
    }
  }, [selection?.paymentMethod]);
  (0, import_react.useEffect)(() => {
    const shouldRequestPayment = (
      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we actually want || here because we are checking for undefined, null and false
      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, import_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, import_jsx_runtime.jsx)(import_HtmlEmbed.HtmlEmbed, { html: formHtml, id: "centra-payment-form" }) : null;
}, import_react_fast_compare.default);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  PaymentEmbed
});
//# sourceMappingURL=PaymentEmbed.cjs.map