udp-react-enterprise-component-library 25.16.2 → 25.18.1-beta.1

package/dist/PaymentForm-C9djfH5t.js

@@ -0,0 +1,2250 @@
+import { t as Form } from "./Form-DZ1kwXKb.js";
+import { t as Field } from "./Field-Cpjv208h.js";
+import { t as FluentButton } from "./FluentButton-3xMbN_Vs.js";
+import { t as ConfigService } from "./configService-C4uoG3wj.js";
+import { t as useUser } from "./useUser-wpHGo6jU.js";
+import { t as apiMutate } from "./useAxiosMutate-q_ZpG98Z.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DkZ-zXku.js";
+import { t as Typography$1 } from "./Typography-BMsa1JYd.js";
+import { S as getIconFromName } from "./TreeUtilities-BnHT4nq0.js";
+import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
+import { t as useAxiosGet } from "./useAxiosGet-BMoXHfLN.js";
+import { n as PaymentTenderTypeEnum, r as PaymentMethodTypeEnum, t as PaymentVendorFactoryEnum } from "./paymentVendorFactoryEnum-CwnzkF9A.js";
+import { t as LinearProgress$1 } from "./LinearProgress-CpIjJmyf.js";
+import { t as CircularProgress$1 } from "./CircularProgress-CeJ9Prk4.js";
+import { t as FluentTextField } from "./FluentTextField-vCX3f3zJ.js";
+import { t as FluentCheckbox } from "./FluentCheckbox-0r5fG2yi.js";
+import { t as Box$1 } from "./Box-Ba-rt7ri.js";
+import { t as Grid$1 } from "./Grid-BJKUiNX5.js";
+import { t as FormControl$1 } from "./FormControl-M0-zf9tl.js";
+import { t as FluentSelectMenu } from "./FluentSelectMenu-wNKQ41Yn.js";
+import { t as FormControlLabel$1 } from "./FormControlLabel-DocOJPVi.js";
+import { t as InputAdornment$1 } from "./InputAdornment-D5LdQrPE.js";
+import { t as stringToProps } from "./stringUtils-B2JFmevx.js";
+import * as React$1 from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Badge, Box, Card, CardContent, Chip, FormControl, FormControlLabel, Grow, InputAdornment, InputLabel, LinearProgress, MenuItem, Select, Tab, Tabs, Tooltip, Typography, lighten, makeStyles, styled, useTheme } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import { v4 } from "uuid";
+import visaLogo from "./assets/paymentIcons/visa-logo.svg";
+import masterCardLogo from "./assets/paymentIcons/mastercard-logo.svg";
+import discoverLogo from "./assets/paymentIcons/discover-logo.svg";
+import americaExpressLogo from "./assets/paymentIcons/american-logo.svg";
+import eCheckLogo from "./assets/paymentIcons/echeck-logo.svg";
+import Payment from "payment";
+import visa from "./assets/paymentIcons/visa.svg";
+import mastercard from "./assets/paymentIcons/mastercard.svg";
+import amex from "./assets/paymentIcons/amex.svg";
+import discover from "./assets/paymentIcons/discover.svg";
+import diners from "./assets/paymentIcons/diners.svg";
+import unionpay from "./assets/paymentIcons/unionpay.svg";
+import jcb from "./assets/paymentIcons/jcb.svg";
+import grey from "@material-ui/core/colors/grey";
+
+//#region src/utilities/form/paymentForm/vendorsForms/ICheckForm.tsx
+const defaultCssStyles$1 = (theme) => `
+  body {
+    background: ${theme.palette.background.default};
+  }
+  payment {
+    padding: 1rem;
+    max-width: none;
+    background: ${theme.palette.background.paper};
+    border: none;
+    box-shadow: none;
+    color: ${theme.palette.text.primary};
+  }
+  paymentNumber {
+    border: 1px solid ${theme.palette.divider};
+  }
+  input[type='button'],
+  input[type='reset'],
+  input[type='submit'] {
+    background-color: ${theme.palette.primary.main};
+    font-size: 14px;
+    height: 40px;
+    border-radius: 0px;
+    border: none;
+  }
+`.trim();
+/**
+* `ICheckForm` Component
+*
+* Renders an iframe for payment processing via the iCheckGateway. Depending on the payment method, it dynamically generates the iframe URL with the appropriate query parameters. The component also listens for messages from the iframe, handling payment data or errors.
+*
+* @param {Object} props The properties passed to the component.
+* @param {PaymentTenderTypeEnum} [paymentMethod=PaymentTenderTypeEnum.CreditCard] Specifies the type of payment method, influencing the iframe endpoint.
+* @param {Object} [onStatusChange=null] Callback function to handle the status change event.
+* @param {Object} [paymentDetails=null] An object containing customer details such as firstName, lastName, email, etc.
+* @param {string} [baseUrl="https://iframe.icheckgateway.com"] The base URL for the payment gateway iframe.
+* @param {string} [customCss=defaultCssStyles] Custom CSS styles to be applied within the iframe.
+* @param {Object} [attributes=null] An object containing additional payment attributes such as appId, appSecret, custId, etc. These are dynamically appended to the iframe URL as query parameters.
+* @param {string} [attributes.appId] Application ID for the payment gateway.
+* @param {string} [attributes.appSecret] Application secret for the payment gateway.
+* @param {string} [attributes.custId] Customer ID.
+* @param {string} [attributes.saveTokenDisabled] Flag to disable token saving.
+* @param {string} [attributes.firstName] Customer's first name.
+* @param {string} [attributes.lastName] Customer's last name.
+* @param {string} [attributes.email] Customer's email address.
+* @param {string} [attributes.company] Customer's company name.
+* @param {string} [attributes.street1] Customer's street address line 1.
+* @param {string} [attributes.street2] Customer's street address line 2.
+* @param {string} [attributes.city] Customer's city.
+* @param {string} [attributes.custom1] A custom field for additional data.
+* @param {string} [attributes.amount] Payment amount.
+* @param {string} [attributes.salesTax] Applicable sales tax.
+* @param {string} [attributes.entryClassCode] Entry class code for the transaction.
+* @param {string} [attributes.css] Custom CSS for the iframe content.
+* @param {string} [attributes.hostedURL="https://iframe.icheckgateway.com"] Hosted URL; defaults to the base URL but can be overridden.
+*
+* @return {React.Component} The `ICheckForm` component renders an iframe for payment processing and displays the payment response.
+*/
+const ICheckForm = ({ paymentMethod = PaymentTenderTypeEnum.CreditCard, onStatusChange = null, paymentDetails = null, baseUrl = "https://iframe.icheckgateway.com", customCss = "", attributes = null, paymentData = null }) => {
+	const iframePaymentMethod = paymentMethod === PaymentTenderTypeEnum.CreditCard ? "iFrameCC" : "iFrameBA";
+	const [src, setSrc] = useState(`${baseUrl}/${iframePaymentMethod}.aspx?`);
+	const [response, setResponse] = useState({});
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState("");
+	const { t } = useTranslation();
+	const defaultCss = defaultCssStyles$1(useTheme());
+	/**
+	* handleFiservResponse
+	*
+	* @param {*} response
+	*/
+	const handleICheckResponse = useCallback((response$1) => {
+		const isError = response$1?.error;
+		const payload = JSON.stringify(response$1, null, 2);
+		const paymentFormResponse = {
+			isValid: !isError,
+			payload,
+			message: response$1?.token,
+			errorCode: response$1?.error,
+			errorMessage: response$1?.error,
+			selectedHostedPayment: PaymentVendorFactoryEnum.ICheck
+		};
+		onStatusChange?.(paymentFormResponse);
+	}, [onStatusChange, paymentMethod]);
+	const handleLoad = () => {
+		setLoading(false);
+	};
+	const handleError = () => {
+		setLoading(false);
+	};
+	useEffect(() => {
+		try {
+			let urlAttributes = src;
+			let queryParams = "";
+			if (paymentDetails) {
+				const mergedDetails = {
+					...attributes,
+					...paymentDetails
+				};
+				const baseUrl$1 = attributes?.baseUrl + `/${iframePaymentMethod}.aspx`;
+				delete mergedDetails.baseUrl;
+				queryParams = `${baseUrl$1}?${Object.keys(mergedDetails).filter((key) => mergedDetails[key] !== "" && mergedDetails[key] != null).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(mergedDetails[key])}`).join("&")}`;
+			}
+			queryParams += `&css=${encodeURIComponent(customCss || defaultCss)}`;
+			if (paymentDetails) urlAttributes = queryParams;
+			else urlAttributes += queryParams;
+			setSrc(urlAttributes);
+		} catch (e) {
+			console.error("Error generating iframe source URL:", e);
+			setError(t("Error generating iframe source") + e?.message);
+		}
+	}, [
+		attributes,
+		paymentDetails,
+		baseUrl,
+		iframePaymentMethod,
+		customCss
+	]);
+	useEffect(() => {
+		const handleMessage = (e) => {
+			const jsonData = e.data;
+			if (typeof jsonData === "object" && jsonData.constructor.name === "Object") {
+				if (jsonData.source === "iCheck") {
+					if (jsonData.error) console.log("Error: " + jsonData.error);
+					handleICheckResponse(jsonData);
+					setResponse(jsonData);
+				}
+			}
+		};
+		window.addEventListener("message", handleMessage);
+		return () => {
+			window.removeEventListener("message", handleMessage);
+		};
+	}, []);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle1",
+		color: "error"
+	}, t("There was an error rendering the hosted payment form. Please check your settings and try again"), ":"), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		color: "error"
+	}, t("Error"), ":", error)) : /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(Box, {
+		sx: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			zIndex: 9999,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		style: { backgroundColor: "rgba(255, 255, 255, 0.8)" }
+	}, /* @__PURE__ */ React.createElement(CircularProgress$1, {
+		size: "3rem",
+		color: "primary"
+	})), /* @__PURE__ */ React.createElement("iframe", {
+		id: "iFrameBA",
+		name: "iFrameBA",
+		src,
+		scrolling: "yes",
+		width: "100%",
+		height: "500",
+		frameBorder: "0",
+		onLoad: handleLoad,
+		onError: handleError,
+		style: { display: loading ? "none" : "block" }
+	})));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/vendorsForms/FiservForm.tsx
+const defaultCssStyles = (theme) => {
+	return `
+input, button, select {
+  font-family: 'Segoe UI', Roboto, Noto, 'Helvetica Neue', Helvetica, Ubuntu, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-size: 14px;
+  line-height: 1.1876em;
+  height: 16.6146px;
+  border: 1px solid ${theme.palette.grey[400]};
+  border-radius: 2px;
+  color: currentColor;
+  width: 80%;
+  height: 1.1876em;
+  margin: 8px 0px 0px 0px;
+  display: block;
+  padding: 6px 0px 6px 5px;
+  min-width: 0;
+  background: none;
+  box-sizing: content-box;
+  animation-name: mui-auto-fill-cancel;
+  letter-spacing: inherit;
+  animation-duration: 10ms;
+}
+input:focus, button:focus, select:focus {
+  outline: none;
+  border-color: ${theme.palette.primary.main};
+  box-shadow: 0px 0px 3px ${theme.palette.primary.main};
+}
+#ccexpirymonth, #ccexpiryyear {
+  display: inline-block;
+  vertical-align: middle;
+}
+#ccexpirymonth, #ccexpiryyear {
+  width: 30%;
+}
+br {
+  display: none;
+}
+button {
+  background-color: ${theme.palette.primary.main};
+  color: ${theme.palette.background.paper};
+  text-transform: uppercase;
+}
+label {
+  display: block;
+  font-family: "Segoe UI", Roboto, Noto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
+  font-size: 14px;
+  color: ${theme.palette.text.secondary};
+  margin-top: 10px;
+}
+.error {
+  color: ${theme.palette.error.main};
+  border-color: ${theme.palette.error.main};
+}
+::placeholder {
+  color: ${theme.palette.grey[500]};
+}`.trim();
+};
+const DEFAULT_CREDIT_CARD_PLACEHOLDERS = "`placeholder=Enter Card Details&placeholdercvv=123&placeholdermonth=MM&placeholderyear=YYYY`;";
+const DEFAULT_CREDIT_CARD_FEATURES = `&useexpiry=true&usecvv=true&invalidcreditcardevent=true&formatinput=true&unique=true&enhancedresponse=true&cardnumbernumericonly=true`;
+const DEFAULT_ECHECK_PLACEHOLDERS = `placeholder=Routing Number / Account Number`;
+const DEFAULT_ECHECK_FEATURES = `&fullmobilekeyboard=true`;
+/**
+* `FiservForm` Component
+*
+* This component is responsible for rendering an iframe for payment processing tailored for the Fiserv payment gateway. It manages the dynamic creation of the iframe URL based on the provided attributes and configures the iframe behavior accordingly.
+*
+* @param {Object} {
+*   paymentMethod = PaymentTenderTypeEnum.CreditCard,
+*   baseUrl = "https://fts-uat.cardconnect.com/itoke/ajax-tokenizer.html",
+*   customCss = defaultCssStyles,
+*   attributes = null
+* } The properties passed to the component.
+* @param {PaymentTenderTypeEnum} [paymentMethod=PaymentTenderTypeEnum.CreditCard] The payment method type, affecting the endpoint.
+* @param {Object} [onStatusChange=null] Callback function to handle the status change event.
+* @param {string} [baseUrl="https://fts-uat.cardconnect.com/itoke/ajax-tokenizer.html"] The base URL for the Fiserv payment gateway iframe.
+* @param {string} [customCss=defaultCssStyles] Custom CSS to apply within the iframe.
+* @param {Object} [attributes=null] Additional payment attributes to append as query parameters.
+* @param {string} [attributes.placeholder] Placeholder text for the card fields.
+* @param {string} [attributes.placeholdercvv] Placeholder text for the CVV field.
+* @param {string} [attributes.placeholdermonth] Placeholder for the expiration month field.
+* @param {string} [attributes.placeholderyear] Placeholder for the expiration year field.
+* @param {boolean} [attributes.useexpiry=true] Flag to enable the use of the expiration date.
+* @param {boolean} [attributes.usecvv=true] Flag to enable the use of the CVV code.
+* @param {boolean} [attributes.invalidcreditcardevent=true] Event triggered on invalid card input.
+* @param {boolean} [attributes.formatinput=true] Formats the card input fields.
+* @param {boolean} [attributes.unique=true] Ensures unique card number inputs.
+* @param {boolean} [attributes.enhancedresponse=true] Provides enhanced responses.
+* @param {boolean} [attributes.cardnumbernumericonly=true] Allows only numeric input for the card number.
+* @param {boolean} [attributes.fullmobilekeyboard=false] Enables full mobile keyboard access.
+*
+* @return {React.Component} The `FiservForm` component that handles the rendering of the payment iframe and processes payment data or errors.
+*/
+const FiservForm = ({ paymentMethod = PaymentTenderTypeEnum.CreditCard, onStatusChange = (paymentFormResult) => {}, baseUrl = "https://fts-uat.cardconnect.com/itoke/ajax-tokenizer.html", customCss = "", attributes = null, paymentData = null }) => {
+	const [loading, setLoading] = useState(true);
+	const [token, setToken] = useState("");
+	const [error, setError] = useState(null);
+	const { t } = useTranslation();
+	const defaultCss = defaultCssStyles(useTheme());
+	/**
+	* handleFiservResponse
+	*
+	* @param {*} response
+	*/
+	const handleFiservResponse = useCallback((response) => {
+		let isError;
+		if (paymentMethod === PaymentTenderTypeEnum.CreditCard) isError = response?.errorCode !== "0" || response?.errorMessage || !response?.token;
+		else if (paymentMethod === PaymentTenderTypeEnum.ECheck) isError = !response?.message;
+		onStatusChange({
+			isValid: !isError,
+			payload: response,
+			message: response?.message,
+			errorCode: response?.errorCode,
+			errorMessage: response?.errorMessage
+		});
+	}, [onStatusChange, paymentMethod]);
+	const handleLoad = () => {
+		setLoading(false);
+	};
+	const handleError = () => {
+		setLoading(false);
+	};
+	useEffect(() => {
+		const handleMessage = (event) => {
+			try {
+				const data = JSON.parse(event.data);
+				setToken(data.message);
+				handleFiservResponse(data);
+			} catch (error$1) {
+				console.error("Error parsing the event data", error$1);
+			}
+		};
+		window.addEventListener("message", handleMessage, false);
+		return () => {
+			window.removeEventListener("message", handleMessage, false);
+		};
+	}, [paymentMethod]);
+	/**
+	* iFrameURL
+	*
+	* @return {*}
+	*/
+	const iFrameURL = useMemo(() => {
+		let url = "";
+		try {
+			const encodedCss = encodeURIComponent(customCss || defaultCss);
+			switch (paymentMethod) {
+				case PaymentTenderTypeEnum.CreditCard:
+					const creditCardCssStyles = `css=${encodedCss}`;
+					const queryParams = attributes ? Object.entries(attributes)?.map(([key, value]) => `${key.toLowerCase()}=${value?.toString()}`).join("&") : "";
+					url = attributes ? `${queryParams}&${creditCardCssStyles}` : `${DEFAULT_CREDIT_CARD_PLACEHOLDERS}&${creditCardCssStyles}${DEFAULT_CREDIT_CARD_FEATURES}`;
+					break;
+				case PaymentTenderTypeEnum.ECheck:
+					const eCheckCssStyles = `css=${encodedCss}`;
+					const queryParamsECheck = attributes ? Object.entries(attributes)?.map(([key, value]) => `${key.toLowerCase()}=${value?.toString()}`).join("&") : "";
+					url = attributes ? `${queryParamsECheck}&${eCheckCssStyles}` : `${DEFAULT_ECHECK_PLACEHOLDERS}&${eCheckCssStyles}${DEFAULT_ECHECK_FEATURES}`;
+					break;
+				default: url = "";
+			}
+		} catch (error$1) {
+			setError(error$1?.message);
+		}
+		return `
+        ${url}
+        `.trim();
+	}, [paymentMethod]);
+	return /* @__PURE__ */ React.createElement("div", null, error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle1",
+		color: "error"
+	}, t("There was an error rendering the hosted payment form. Please check your settings and try again"), ":"), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		color: "error"
+	}, t("Error"), ":", error)) : /* @__PURE__ */ React.createElement("form", {
+		name: "tokenform",
+		id: "tokenform"
+	}, paymentMethod === PaymentTenderTypeEnum.ECheck && /* @__PURE__ */ React.createElement(InputLabel, { style: {
+		fontSize: 15,
+		marginLeft: 10
+	} }, t("eCheck Information")), loading && /* @__PURE__ */ React.createElement(Box, { sx: {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		backgroundColor: "rgba(255, 255, 255, 0.8)",
+		zIndex: 9999,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(CircularProgress$1, {
+		size: "3rem",
+		color: "primary"
+	})), /* @__PURE__ */ React.createElement("iframe", {
+		id: "tokenframe",
+		name: "tokenframe",
+		src: `${baseUrl}?${iFrameURL}`,
+		scrolling: "yes",
+		width: "100%",
+		height: "220",
+		frameBorder: "0",
+		onLoad: handleLoad,
+		onError: handleError,
+		style: { display: loading ? "none" : "block" }
+	})));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/vendorsForms/PaymentusForm.tsx
+const PaymentusForm = ({ paymentMethod = PaymentTenderTypeEnum.CreditCard, onStatusChange = null, paymentDetails = null, baseUrl = "https://secure4.paymentus.com/xotp/pm/sgc2", attributes = null, paymentData = null }) => {
+	const methodURL = paymentMethod === PaymentTenderTypeEnum.CreditCard ? "creditcard" : "echeck";
+	const [src, setSrc] = useState(`${baseUrl}`);
+	const [response, setResponse] = useState({});
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState("");
+	const user = useUser();
+	const [paymentTokenCreditCardIDGuid] = useState(v4());
+	const [paymentTokenIDGuid] = useState(v4());
+	const { t } = useTranslation();
+	/**
+	* API call to get the Paymentus Token
+	*/
+	const getPaymentusToken = useCallback(async (payload) => {
+		if (!payload) return null;
+		return apiMutate(ConfigService.pgV1ApiUrl, `ProcessHostedPaymentPagePayment/authToken/${methodURL}`, {
+			method: "POST",
+			data: payload
+		}, {});
+	}, []);
+	useCallback(async (payload) => {
+		if (!payload) return null;
+		const PostURL = paymentMethod === PaymentTenderTypeEnum.CreditCard ? "PaymentTokenCreditCard/ByPass" : "PaymentTokenECheck/CreateByPass";
+		return apiMutate(ConfigService.pgV1ApiUrl, `${PostURL}`, {
+			method: "POST",
+			data: payload
+		}, {});
+	}, []);
+	/**
+	* handleFiservResponse
+	*
+	* @param {*} response
+	*/
+	const handlePaymentusResponse = useCallback((response$1) => {
+		const paymentFormResponse = {
+			isValid: !response$1?.error,
+			payload: response$1,
+			message: response$1?.Token,
+			errorCode: response$1?.error,
+			errorMessage: response$1?.error,
+			selectedHostedPayment: PaymentVendorFactoryEnum.Paymentus
+		};
+		onStatusChange?.(paymentFormResponse);
+	}, [onStatusChange, paymentMethod]);
+	const handleLoad = () => {
+		setLoading(false);
+	};
+	const handleError = () => {
+		setLoading(false);
+	};
+	useEffect(() => {
+		const handleMessage = async (e) => {
+			const jsonData = e.data;
+			if (typeof jsonData === "object" && jsonData.constructor.name === "Object") {
+				if (jsonData && jsonData.height) {
+					const iframe = document.querySelector("iframe");
+					if (iframe) iframe.style.height = `${jsonData.height}px`;
+				}
+				let responseData;
+				try {
+					responseData = JSON.parse(jsonData?.postBackData);
+				} catch (e$1) {
+					return;
+				}
+				if (responseData?.Token) {
+					if (jsonData.error) console.log("Error: " + jsonData.error);
+					handlePaymentusResponse(responseData);
+					setResponse(responseData);
+				}
+			}
+		};
+		window.addEventListener("message", handleMessage);
+		return () => {
+			window.removeEventListener("message", handleMessage);
+		};
+	}, []);
+	useEffect(() => {
+		const preLoadForm = async () => {
+			try {
+				if (!paymentData?.appPaymentVendorID === null || !paymentDetails) {
+					setError(t("Missing required data to render the hosted payment form"));
+					return;
+				}
+				const response$1 = await getPaymentusToken({
+					TenantID: user?.currentTenantId,
+					AppPaymentVendorID: paymentData?.appPaymentVendorID,
+					PaymentAmount: paymentDetails?.amount,
+					CurrencyCode: "USD",
+					Customer: {
+						FirstName: paymentDetails?.firstName,
+						LastName: paymentDetails?.lastName,
+						Email: null,
+						Phone: paymentDetails?.phone
+					},
+					OriginUrl: window.location.origin,
+					Reference1: paymentDetails?.reference1,
+					Reference2: paymentDetails?.reference2,
+					Reference3: paymentDetails?.reference3
+				});
+				if (response$1?.data) setSrc(`${baseUrl}?authToken=${response$1.data}`);
+			} catch (e) {
+				console.error("Error generating iframe source URL:", e);
+				setError(t("Error generating iframe source") + e?.message);
+			}
+		};
+		preLoadForm();
+	}, [
+		attributes,
+		paymentData,
+		paymentDetails,
+		baseUrl,
+		user
+	]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle1",
+		color: "error"
+	}, t("There was an error rendering the hosted payment form. Please check your settings and try again"), ":"), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		color: "error"
+	}, t("Error"), ":", error)) : /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(Box, { sx: {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		backgroundColor: "rgba(255, 255, 255, 0.8)",
+		zIndex: 9999,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(CircularProgress$1, {
+		size: "3rem",
+		color: "primary"
+	})), /* @__PURE__ */ React.createElement("iframe", {
+		id: "iFramePS",
+		name: "iFramePS",
+		src,
+		scrolling: "yes",
+		width: "100%",
+		height: "785",
+		frameBorder: "0",
+		onLoad: handleLoad,
+		onError: handleError,
+		style: { display: loading ? "none" : "block" }
+	})));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/usePaymentProviderForm.tsx
+/**
+* useProviderForm
+*
+* @param {(PaymentTenderTypeEnum | undefined)} paymentMethod
+* @param {*} providerType
+* @param {*} providerProps
+* @param {(paymentFormResult: any) => void} onStatusChange
+* @return {*}  {*}
+*/
+const usePaymentProviderForm = (paymentMethod, providerType, providerProps, onStatusChange, paymentDetails, data) => {
+	switch (providerType) {
+		case PaymentVendorFactoryEnum.ICheck: return /* @__PURE__ */ React.createElement(ICheckForm, {
+			paymentMethod,
+			onStatusChange,
+			paymentDetails,
+			paymentData: data,
+			...providerProps
+		});
+		case PaymentVendorFactoryEnum.Fiserv: return /* @__PURE__ */ React.createElement(FiservForm, {
+			paymentMethod,
+			onStatusChange,
+			paymentData: data,
+			...providerProps
+		});
+		case PaymentVendorFactoryEnum.Paymentus: return /* @__PURE__ */ React.createElement(PaymentusForm, {
+			paymentMethod,
+			onStatusChange,
+			paymentDetails,
+			paymentData: data,
+			...providerProps
+		});
+		case PaymentVendorFactoryEnum.Stripe: return /* @__PURE__ */ React.createElement(React.Fragment, null);
+		case PaymentVendorFactoryEnum.AuthorizeNet: return /* @__PURE__ */ React.createElement(React.Fragment, null);
+		default: return null;
+	}
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/PaymentCardDetail.tsx
+const logos$1 = {
+	visa: visaLogo,
+	mastercard: masterCardLogo,
+	discover: discoverLogo,
+	amex: americaExpressLogo,
+	default: visaLogo
+};
+/**
+* PaymentCardDetail component displays the details of a payment card.
+* 
+* @param {Object} props - The component props.
+* @param {CardData} props.cardData - The data of the payment card.
+* @param {string} props.cardData.paymentToken - The token of the payment card.
+* @param {string} props.cardData.expirationDate - The expiration date of the payment card.
+* @param {boolean} props.cardData.active - The active status of the payment card.
+* 
+* @returns {JSX.Element} The rendered PaymentCardDetail component.
+* 
+* The component displays the card logo, nickname, and expiration date.
+* If the card is expired, it shows an "Expired" chip.
+* The card logo is determined based on the nickname of the card.
+*/
+const PaymentCardDetail = ({ cardData }) => {
+	const { paymentToken, expirationDate, active } = cardData || {};
+	const isExpired = new Date(expirationDate) < /* @__PURE__ */ new Date() && !active;
+	const getCardLogo = (nickname) => {
+		const lowerNickname = nickname?.toLowerCase();
+		if (lowerNickname.includes("visa")) return logos$1.visa;
+		if (lowerNickname.includes("mc")) return logos$1.mastercard;
+		if (lowerNickname.includes("disc")) return logos$1.discover;
+		if (lowerNickname.includes("amex") || lowerNickname.includes("american express")) return logos$1.amex;
+		return logos$1.default;
+	};
+	const styles = {
+		card: {
+			border: 0,
+			padding: "5px 15px",
+			width: "100%"
+		},
+		logoContainer: {
+			border: "2px solid #e0e0e0",
+			borderRadius: "8px",
+			padding: "8px",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			height: "42px",
+			width: "70px"
+		},
+		logoImage: {
+			width: 55,
+			height: "auto",
+			objectFit: "contain"
+		},
+		nickname: { fontWeight: 600 },
+		expiration: { fontWeight: 400 },
+		expiredChip: { fontWeight: "bold" }
+	};
+	return /* @__PURE__ */ React.createElement(Card, {
+		variant: "outlined",
+		style: styles.card
+	}, /* @__PURE__ */ React.createElement(CardContent, { style: { padding: "5px 0" } }, /* @__PURE__ */ React.createElement(Grid$1, {
+		container: true,
+		alignItems: "center",
+		spacing: 2
+	}, /* @__PURE__ */ React.createElement(Grid$1, { item: true }, /* @__PURE__ */ React.createElement("div", { style: styles.logoContainer }, /* @__PURE__ */ React.createElement("img", {
+		src: getCardLogo(paymentToken?.nickname || ""),
+		alt: "Card Logo",
+		style: styles.logoImage
+	}))), /* @__PURE__ */ React.createElement(Grid$1, {
+		item: true,
+		xs: true
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		style: styles.nickname
+	}, paymentToken?.nickname || "Unknown Card"), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		color: "textSecondary",
+		style: styles.expiration
+	}, "Exp. date: ", " ", expirationDate ? new Date(expirationDate).toLocaleDateString("en-US", {
+		month: "2-digit",
+		year: "2-digit"
+	}) : "N/A")), /* @__PURE__ */ React.createElement(Grid$1, {
+		item: true,
+		style: { marginRight: "15px" }
+	}, isExpired && /* @__PURE__ */ React.createElement(Chip, {
+		label: "Expired",
+		color: "secondary",
+		size: "small",
+		style: styles.expiredChip
+	})))));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/PaymentBankDetails.tsx
+const logos = { default: eCheckLogo };
+/**
+* PaymentBankDetails component displays the bank details of a payment method.
+* It shows the card logo, nickname, routing number, and an inactive chip if the card is not active.
+*
+* @param {Object} props - The component props.
+* @param {CardData} props.bankData - The bank data containing payment token and routing number.
+* @returns {JSX.Element} The rendered PaymentBankDetails component.
+*/
+const PaymentBankDetails = ({ bankData }) => {
+	const { paymentToken, routingNumber } = bankData || {};
+	const getCardLogo = (nickname) => {
+		if ((nickname?.toLowerCase()).includes("visa")) return logos.default;
+		return logos.default;
+	};
+	const styles = {
+		card: {
+			border: 0,
+			padding: "5px 15px",
+			width: "100%"
+		},
+		logoContainer: {
+			border: "2px solid #e0e0e0",
+			borderRadius: "8px",
+			padding: "8px",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			height: "42px",
+			width: "70px"
+		},
+		logoImage: {
+			width: 52,
+			height: "auto",
+			objectFit: "contain"
+		},
+		nickname: { fontWeight: 600 },
+		expiration: { fontWeight: 400 },
+		expiredChip: { fontWeight: "bold" }
+	};
+	return /* @__PURE__ */ React.createElement(Card, {
+		variant: "outlined",
+		style: styles.card
+	}, /* @__PURE__ */ React.createElement(CardContent, { style: { padding: "5px 0" } }, /* @__PURE__ */ React.createElement(Grid$1, {
+		container: true,
+		alignItems: "center",
+		spacing: 2
+	}, /* @__PURE__ */ React.createElement(Grid$1, { item: true }, /* @__PURE__ */ React.createElement("div", { style: styles.logoContainer }, /* @__PURE__ */ React.createElement("img", {
+		src: getCardLogo(paymentToken?.nickname || ""),
+		alt: "Card Logo",
+		style: styles.logoImage
+	}))), /* @__PURE__ */ React.createElement(Grid$1, {
+		item: true,
+		xs: true
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		style: styles.nickname
+	}, paymentToken?.nickname || "Unknown Card"), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		color: "textSecondary",
+		style: styles.expiration
+	}, "Routing Number: ", " ", routingNumber ? routingNumber : "N/A")), /* @__PURE__ */ React.createElement(Grid$1, {
+		item: true,
+		style: { marginRight: "15px" }
+	}, !paymentToken?.active && /* @__PURE__ */ React.createElement(Chip, {
+		label: "Inactive",
+		color: "secondary",
+		size: "small",
+		style: styles.expiredChip
+	})))));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/PaymentDropdown.tsx
+const useStyles$5 = makeStyles(() => ({ select: {
+	background: "#F5F6F9",
+	paddingTop: 2,
+	paddingBottom: 0,
+	paddingLeft: 0
+} }));
+/**
+* PaymentDropdown component renders a dropdown menu for selecting a payment account.
+* It supports both credit card and bank account payment types.
+*
+* @component
+* @param {PaymentDropdownProps} props - The properties for the PaymentDropdown component.
+* @param {Array} props.paymentAccounts - An array of payment accounts to display in the dropdown.
+* @param {Function} props.setSelectedPaymentAccount - A function to set the selected payment account.
+* @param {PaymentTenderTypeEnum} props.paymentType - The type of payment (CreditCard or BankAccount).
+*
+* @returns {JSX.Element} The rendered PaymentDropdown component.
+*/
+const PaymentDropdown = ({ paymentAccounts, setSelectedPaymentAccount, paymentType }) => {
+	const [selectedPaymentCard, setSelectedPaymentCard] = useState(paymentAccounts?.[0]?.paymentTokenID || "");
+	const classes = useStyles$5();
+	const { t } = useTranslation();
+	/**
+	* Renders the content for a MenuItem based on the payment type.
+	*
+	* @param {CardData} card - The card data.
+	* @returns {JSX.Element} The rendered component for the MenuItem.
+	*/
+	const renderMenuItemContent = useCallback((card) => {
+		switch (paymentType) {
+			case PaymentTenderTypeEnum.CreditCard: return /* @__PURE__ */ React.createElement(PaymentCardDetail, { cardData: card });
+			case PaymentTenderTypeEnum.ECheck: return /* @__PURE__ */ React.createElement(PaymentBankDetails, { bankData: card });
+			default: return null;
+		}
+	}, [paymentType]);
+	/**
+	* Handles the change event for the dropdown menu.
+	*
+	* @param {React.ChangeEvent<{ value: unknown }>} event
+	*/
+	const handleChange = (event) => {
+		const selectedPaymentAccount = paymentAccounts.find((account) => account.paymentTokenID === event.target.value);
+		setSelectedPaymentCard(event.target.value);
+		setSelectedPaymentAccount?.(selectedPaymentAccount);
+	};
+	/**
+	* Generates a memoized list of menu items for payment accounts.
+	*
+	* This function uses the `useMemo` hook to optimize performance by memoizing the list of menu items.
+	* It maps over the `paymentAccounts` array and creates a `MenuItem` for each account.
+	*
+	* @returns {JSX.Element[]} A memoized array of `MenuItem` components.
+	*/
+	const menuItems = useMemo(() => paymentAccounts?.map((card) => /* @__PURE__ */ React.createElement(MenuItem, {
+		key: card.paymentTokenID,
+		value: card.paymentTokenID,
+		style: { padding: 0 }
+	}, renderMenuItemContent(card))), [paymentAccounts, renderMenuItemContent]);
+	/**
+	* useEffect()
+	* Set the default selected payment account when the component mounts or paymentAccounts change
+	*/
+	useEffect(() => {
+		const defaultPaymentAccount = paymentAccounts.find((account) => account.paymentTokenID === paymentAccounts?.[0]?.paymentTokenID);
+		setSelectedPaymentAccount?.(defaultPaymentAccount);
+	}, [paymentAccounts, setSelectedPaymentAccount]);
+	return /* @__PURE__ */ React.createElement(FormControl, {
+		fullWidth: true,
+		variant: "outlined"
+	}, /* @__PURE__ */ React.createElement(InputLabel, { id: "payment-select-label" }, t("Select Payment Account")), /* @__PURE__ */ React.createElement(Select, {
+		labelId: "payment-select-label",
+		label: t(`Select Payment Account`),
+		onChange: handleChange,
+		value: selectedPaymentCard,
+		classes: { root: classes.select }
+	}, menuItems));
+};
+var PaymentDropdown_default = PaymentDropdown;
+
+//#endregion
+//#region src/utilities/form/paymentForm/HostedPaymentError.tsx
+/**
+* @file HostedPaymentError.tsx
+* @description This component displays an error message when there is an issue rendering the hosted payment form.
+*/
+/**
+* HostedPaymentError component
+* 
+* This component is used to display an error message when there is an issue rendering the hosted payment form.
+* It utilizes the `useTranslation` hook to support internationalization.
+* 
+* @param {Object} props - The properties object.
+* @param {string} props.error - The error string.
+* @param {string} props.message - The error message to be displayed.
+* 
+* @returns {JSX.Element} The rendered error message component.
+*/
+const HostedPaymentError = ({ error, message }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography$1, {
+		variant: "subtitle1",
+		color: "error"
+	}, t("There was an error rendering the hosted payment form. Please check your settings and try again"), ":"), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography$1, {
+		variant: "body1",
+		color: "error"
+	}, t("Error"), ": ", message));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/PaymentCard.tsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {},
+	paper: {
+		width: "100%",
+		height: "100%",
+		position: "relative"
+	},
+	styleWidth: { width: "75%" },
+	media: { height: 120 },
+	cardContent: { paddingTop: 0 },
+	titleWrapper: {
+		display: "flex",
+		backgroundColor: (props) => props?.headerColor || "#FFFFFF",
+		alignItems: "center"
+	},
+	loading: {
+		position: "absolute",
+		top: 0,
+		left: 0
+	},
+	expandMessage: { display: "flex" },
+	cardRoot: { "&:last-child": { paddingBottom: theme.spacing(10) } },
+	title: { flex: 1 },
+	visualization: {
+		display: "flex",
+		alignItems: "flex-end",
+		width: "100%",
+		height: 300
+	}
+}));
+const PaymentCard = (props) => {
+	const { title, className, style, loading, headerElement, children } = props;
+	const classes = useStyles$4(props);
+	return /* @__PURE__ */ React.createElement(Card, {
+		className,
+		style: {
+			border: "none",
+			boxShadow: "none",
+			borderRadius: 0,
+			...style
+		}
+	}, title && /* @__PURE__ */ React.createElement(CardContent, {
+		className: classes.titleWrapper,
+		classes: { root: classes.cardRoot }
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.title,
+		component: "h2",
+		variant: "h6"
+	}, title), headerElement && headerElement), loading && /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress, null)), /* @__PURE__ */ React.createElement(Box, { className }, children));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/CreditCardUtils.ts
+/**
+* clearNumber
+*
+* @param {string} [value='']
+* @return {*}
+*/
+function clearNumber(value = "") {
+	return value.replace(/\D+/g, "");
+}
+/**
+* formatCreditCardNumber - Format credit card number
+*
+* @export
+* @param {*} value
+* @return {*}
+*/
+function formatCreditCardNumber(value) {
+	if (!value) return value;
+	const issuer = Payment.fns.cardType(value);
+	const clearValue = clearNumber(value);
+	let nextValue;
+	switch (issuer) {
+		case "amex":
+			nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 10)} ${clearValue.slice(10, 15)}`;
+			break;
+		case "dinersclub":
+			nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 10)} ${clearValue.slice(10, 14)}`;
+			break;
+		default:
+			nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 8)} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 19)}`;
+			break;
+	}
+	return nextValue.trim();
+}
+/**
+* formatCVC - formats the CVC value
+*
+* @export
+* @param {*} value
+* @param {*} prevValue
+* @param {*} [allValues={}]
+* @return {*}
+*/
+function formatCVC(value, prevValue, allValues = {}) {
+	const clearValue = clearNumber(value);
+	let maxLength = 4;
+	if (allValues?.number) maxLength = Payment.fns.cardType(allValues?.number) === "amex" ? 4 : 3;
+	return clearValue.slice(0, maxLength);
+}
+/**
+* formatExpirationDate - format expiration date
+* @export
+* @param {*} value
+* @return {*}
+*/
+function formatExpirationDate(value) {
+	const clearValue = clearNumber(value);
+	if (clearValue.length >= 3) return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`;
+	return clearValue;
+}
+/**
+* formatBankAccountNumber - Format bank account number
+* @export
+* @param {*} value
+* @return {*}
+*/
+function formatBankAccountNumber(value) {
+	const clearValue = clearNumber(value);
+	return `${clearValue.slice(0, 4)} ${clearValue.slice(4, 8)} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 16)} ${clearValue.slice(16, 20)}`;
+}
+/**
+* formatRoutingNumber - format routing number
+* @export
+* @param {*} value
+* @return {*}
+*/
+function formatRoutingNumber(value) {
+	const clearValue = clearNumber(value);
+	return `${clearValue.slice(0, 3)} ${clearValue.slice(3, 9)}`;
+}
+const CreditCardBrandIconUrls = {
+	visa,
+	mastercard,
+	amex,
+	discover,
+	jcb,
+	dinersclub: diners,
+	unionpay
+};
+const getCreditCardMethodIconUrl = (creditCardNumber) => {
+	return CreditCardBrandIconUrls[Payment.fns.cardType(creditCardNumber)] ?? null;
+};
+const getCreditCardMethodIcon = getCreditCardMethodIconUrl;
+
+//#endregion
+//#region src/utilities/form/paymentForm/CreditCardAdornment.tsx
+/**
+* CreditCardAdornment component displays an icon at the start of an input field.
+* It shows a default payment card icon if no credit card number is provided.
+* If a valid credit card number is provided, it displays the corresponding credit card method icon.
+*
+* @param {Object} props - The props object.
+* @param {string} props.creditCardNumberInput - The credit card number input string.
+* @returns {JSX.Element} The InputAdornment component with the appropriate icon.
+*/
+const CreditCardAdornment = ({ creditCardNumberInput }) => {
+	const defaultAdornment = /* @__PURE__ */ React.createElement(InputAdornment$1, { position: "start" }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: 12,
+		icon: getIconFromName("PaymentCardIcon")
+	}));
+	if (!creditCardNumberInput) return defaultAdornment;
+	const iconPath = getCreditCardMethodIcon(creditCardNumberInput);
+	if (!iconPath || iconPath === "unknown") return defaultAdornment;
+	return /* @__PURE__ */ React.createElement(InputAdornment$1, { position: "start" }, /* @__PURE__ */ React.createElement("img", {
+		src: iconPath,
+		alt: "credit-card",
+		width: 21
+	}));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/NewCreditCardForm.tsx
+/**
+* NewCardForm component renders a form for entering new credit card details.
+*
+* @param {Object} props - The properties object.
+* @param {boolean} props.isFormDisabled - Flag to disable the form fields.
+* @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
+* @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
+*
+* @returns {JSX.Element} The rendered NewCardForm component.
+*/
+const NewCreditCardForm = ({ isFormDisabled, classes, creditCardNumberInput, paymentDetails, setCreditCardNumberInput }) => {
+	const { accountNumber } = paymentDetails || {};
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement(PaymentCard, null, /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Cardholder"),
+			variant: "outlined",
+			size: "small",
+			disabled: isFormDisabled,
+			fullWidth: true
+		},
+		name: "nameOnCard",
+		initialValue: "",
+		required: !isFormDisabled,
+		onChange: () => {}
+	})), /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.cardNumber }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Card Number"),
+			variant: "outlined",
+			size: "small",
+			disabled: isFormDisabled,
+			fullWidth: true,
+			InputProps: { startAdornment: /* @__PURE__ */ React.createElement(CreditCardAdornment, { creditCardNumberInput }) }
+		},
+		name: "cardNumber",
+		initialValue: "",
+		required: !isFormDisabled,
+		pattern: "\\d{16,22}",
+		format: formatCreditCardNumber,
+		onChange: (e) => setCreditCardNumberInput(e.target.value)
+	})), /* @__PURE__ */ React.createElement(Box$1, {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "flex-start",
+		padding: "0px",
+		width: "100%",
+		style: { gap: "10px" }
+	}, /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Expiry Date"),
+			variant: "outlined",
+			margin: "normal",
+			size: "small",
+			width: "100%",
+			disabled: isFormDisabled,
+			fullWidth: true
+		},
+		name: "expiryDate",
+		helperText: "MM/YY",
+		initialValue: "",
+		required: !isFormDisabled,
+		pattern: "\\d\\d/\\d\\d",
+		format: formatExpirationDate,
+		onChange: () => {}
+	})), /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: "CVV",
+			variant: "outlined",
+			margin: "normal",
+			size: "small",
+			width: "100%",
+			disabled: isFormDisabled,
+			fullWidth: true
+		},
+		name: "cvv",
+		helperText: t("3-digit code on back"),
+		initialValue: "",
+		required: !isFormDisabled,
+		pattern: "\\d{3,4}",
+		format: formatCVC,
+		onChange: () => {}
+	}))), /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControlCheck }, /* @__PURE__ */ React.createElement(FormControlLabel$1, {
+		control: /* @__PURE__ */ React.createElement(Field, {
+			component: FluentCheckbox,
+			name: "isSaveAsNewMethod",
+			type: "checkbox",
+			defaultValue: false,
+			disabled: isFormDisabled,
+			required: false,
+			onChange: () => {}
+		}),
+		label: /* @__PURE__ */ React.createElement(Typography$1, null, accountNumber ? /* @__PURE__ */ React.createElement("span", null, t("Save this card to"), " ", /* @__PURE__ */ React.createElement("strong", null, " ", t("Account"), " ", accountNumber), " ", t("file")) : t("Save"))
+	})));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/CreditCardForm.tsx
+const useStyles$3 = makeStyles((theme) => ({
+	cardNumber: {
+		width: "100%",
+		marginBottom: "10px"
+	},
+	formControl: {
+		width: "100%",
+		"&.cardNumber": { marginBottom: "10px" },
+		"&.submitControl": { marginTop: "35px" }
+	},
+	formControlCheck: {
+		width: "100%",
+		marginTop: "5px",
+		marginLeft: "3px"
+	}
+}));
+/**
+* CreditCardForm component handles the rendering of a credit card payment form.
+* It supports both hosted payment pages and direct credit card input forms.
+*
+* @param {boolean} isFormDisabled - Flag to disable the form.
+* @param {object} data - Data related to the payment form.
+* @param {string} externalId - External identifier for the payment form.
+* @param {object} paymentDetails - Details of the payment.
+* @param {string|null} providerType - Type of the payment provider.
+* @param {object|null} providerProps - Properties for the payment provider.
+* @param {boolean} isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
+* @param {boolean} hasReadPropertiesError - Flag to indicate if there was an error reading properties.
+* @param {string} readPropertiesMessageError - Error message for reading properties.
+* @param {boolean} enabled - Flag to indicate if the form is enabled.
+* @param {function} onStatusChange - Callback function to handle status changes.
+* @param {function} setSelectedPaymentAccount - Callback function to set the selected payment account.
+* @param {string} actionLabel - Label for the action button.
+* @param {object} restProps - Additional properties.
+*
+* @returns {JSX.Element} The rendered CreditCardForm component.
+*/
+const CreditCardForm = ({ isFormDisabled = false, data, externalId, paymentDetails, providerType = null, providerProps = null, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, enabled, actionLabel, onStatusChange, setSelectedPaymentAccount,...restProps }) => {
+	const { t } = useTranslation();
+	const classes = useStyles$3();
+	useUser();
+	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.CreditCard, providerType, providerProps, onStatusChange, paymentDetails, data);
+	const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
+	const [creditCardNumberInput, setCreditCardNumberInput] = useState("");
+	const [{ data: paymentAccounts, loading: loadingPaymentAccounts }] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenCreditCard/${externalId}`, {}, false);
+	const handleShowHostedPaymentPage = () => {
+		setShowHostedPaymentPage(true);
+		onStatusChange && onStatusChange({ isValid: false });
+	};
+	useEffect(() => {
+		const showHostedPaymentPageByDefault = isHostedPaymentPage && paymentAccounts?.length > 0;
+		const enableSubmitForm = isHostedPaymentPage === false || paymentAccounts?.length > 0;
+		setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
+		onStatusChange && onStatusChange({ isValid: enableSubmitForm });
+	}, [isHostedPaymentPage, paymentAccounts]);
+	if (loadingPaymentAccounts) return /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null));
+	if (!showHostedPaymentPage && paymentAccounts?.length > 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PaymentDropdown_default, {
+		paymentAccounts,
+		setSelectedPaymentAccount,
+		paymentType: PaymentTenderTypeEnum.CreditCard
+	}), /* @__PURE__ */ React.createElement(Box, {
+		textAlign: "center",
+		mt: 3
+	}, /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "outlined",
+		color: "primary",
+		onClick: handleShowHostedPaymentPage,
+		size: "small",
+		startIcon: /* @__PURE__ */ React.createElement(UnityFluentIcon, { icon: getIconFromName("PaymentCardIcon") }),
+		style: { padding: "18px 20px" }
+	}, actionLabel || t("Enter Card Details"))));
+	if (hasReadPropertiesError) return /* @__PURE__ */ React.createElement(HostedPaymentError, {
+		error: "Error",
+		message: readPropertiesMessageError || t("Unknown error")
+	});
+	return showHostedPaymentPage && isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewCreditCardForm, {
+		isFormDisabled,
+		classes,
+		paymentDetails,
+		creditCardNumberInput,
+		setCreditCardNumberInput
+	});
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/NewECheckForm.tsx
+/**
+* NewCardForm component renders a form for entering new credit card details.
+*
+* @param {Object} props - The properties object.
+* @param {boolean} props.isFormDisabled - Flag to disable the form fields.
+* @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
+* @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
+*
+* @returns {JSX.Element} The rendered NewCardForm component.
+*/
+const NewECheckForm = ({ isFormDisabled, classes, bankAccountTypes }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement(PaymentCard, null, /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Name on Bank Account"),
+			variant: "outlined",
+			size: "small",
+			disabled: isFormDisabled,
+			fullWidth: true,
+			inputProps: { maxLength: 256 }
+		},
+		name: "accountNickName",
+		initialValue: "",
+		required: !isFormDisabled
+	})), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Account Number"),
+			variant: "outlined",
+			size: "small",
+			disabled: isFormDisabled,
+			fullWidth: true
+		},
+		name: "accountNumber",
+		initialValue: "",
+		required: !isFormDisabled,
+		pattern: "\\d{16,22}",
+		format: formatBankAccountNumber
+	})), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentSelectMenu,
+		ComponentProps: {
+			label: t("Account Type"),
+			id: "bankAccountType",
+			variant: "outlined",
+			margin: "normal",
+			size: "small",
+			width: "100%",
+			fullWidth: true,
+			disabled: false,
+			data: bankAccountTypes || [],
+			displayProperty: "name",
+			autoCompleteProps: { disableClearable: true }
+		},
+		valueForChange: (e) => {
+			return e.value;
+		},
+		name: "bankAccountType",
+		required: !isFormDisabled,
+		onChange: () => {}
+	})), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Routing Number"),
+			variant: "outlined",
+			size: "small",
+			disabled: isFormDisabled,
+			fullWidth: true
+		},
+		name: "routingNumber",
+		initialValue: "",
+		required: !isFormDisabled,
+		pattern: "\\d{9}",
+		format: formatRoutingNumber
+	})), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControlCheck }, /* @__PURE__ */ React.createElement(FormControlLabel, {
+		control: /* @__PURE__ */ React.createElement(Field, {
+			component: FluentCheckbox,
+			name: "isSaveAsNewMethod",
+			type: "checkbox",
+			defaultValue: false,
+			disabled: isFormDisabled
+		}),
+		label: /* @__PURE__ */ React.createElement(Typography$1, null, t("Save"))
+	})));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/BankAccountForm.tsx
+const useStyles$2 = makeStyles((theme) => ({
+	formControl: {
+		width: "100%",
+		marginTop: "5px"
+	},
+	formControlCheck: {
+		width: "100%",
+		marginTop: "5px",
+		marginLeft: "3px"
+	}
+}));
+/**
+* `BankAccountForm` is a React functional component that renders a form for managing bank accounts.
+* It supports both hosted payment pages and direct input forms for bank account details.
+*
+* @param {Object} props - The properties passed to the component.
+* @param {Array} props.bankAccountTypes - An array of available bank account types.
+* @param {Object} props.data - Data related to the bank account form.
+* @param {string} props.externalId - External identifier for the bank account.
+* @param {boolean} [props.isFormDisabled=false] - Flag to disable the form.
+* @param {string|null} [props.providerType=null] - Type of the payment provider.
+* @param {Object|null} [props.providerProps=null] - Properties for the payment provider.
+* @param {Object} props.paymentDetails - Details of the payment.
+* @param {boolean} props.isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
+* @param {boolean} props.hasReadPropertiesError - Flag to indicate if there was an error reading properties.
+* @param {string} props.readPropertiesMessageError - Error message for reading properties.
+* @param {Function} props.onStatusChange - Callback function to handle status changes.
+* @param {boolean} props.enabled - Flag to indicate if the form is enabled.
+* @param {Function} props.setSelectedPaymentAccount - Callback function to set the selected payment account.
+* @param {string} props.actionLabel - The label for the action button.
+* @param {Object} restProps - Additional properties passed to the component.
+*
+* @returns {JSX.Element} The rendered component.
+*/
+const BankAccountForm = ({ bankAccountTypes = [], data, externalId, isFormDisabled = false, providerType = null, providerProps = null, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, enabled, actionLabel, setSelectedPaymentAccount,...restProps }) => {
+	const classes = useStyles$2();
+	const { t } = useTranslation();
+	useUser();
+	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.ECheck, providerType, providerProps, onStatusChange, paymentDetails, data);
+	const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
+	const [{ data: paymentAccounts, loading: loadingPaymentAccounts }] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenECheck/${externalId}`, {}, false);
+	const handleShowHostedPaymentPage = () => {
+		setShowHostedPaymentPage(true);
+		onStatusChange && onStatusChange({ isValid: false });
+	};
+	useEffect(() => {
+		const showHostedPaymentPageByDefault = isHostedPaymentPage && paymentAccounts?.length > 0;
+		const enableSubmitForm = isHostedPaymentPage === false || paymentAccounts?.length > 0;
+		setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
+		onStatusChange && onStatusChange({ isValid: enableSubmitForm });
+	}, [isHostedPaymentPage, paymentAccounts]);
+	if (loadingPaymentAccounts) return /* @__PURE__ */ React.createElement(Box$1, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null));
+	if (!showHostedPaymentPage && paymentAccounts?.length > 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PaymentDropdown_default, {
+		paymentAccounts,
+		setSelectedPaymentAccount,
+		paymentType: PaymentTenderTypeEnum.ECheck
+	}), /* @__PURE__ */ React.createElement(Box$1, {
+		textAlign: "center",
+		mt: 3
+	}, /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "outlined",
+		color: "primary",
+		onClick: handleShowHostedPaymentPage,
+		size: "small",
+		startIcon: /* @__PURE__ */ React.createElement(UnityFluentIcon, { icon: getIconFromName("BankIcon") }),
+		style: { padding: "18px 20px" }
+	}, actionLabel || t("Enter Bank Account Details"))));
+	if (hasReadPropertiesError) return /* @__PURE__ */ React.createElement(HostedPaymentError, {
+		error: "Error",
+		message: readPropertiesMessageError || t("Unknown error")
+	});
+	return showHostedPaymentPage && isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewECheckForm, {
+		isFormDisabled,
+		classes,
+		bankAccountTypes
+	});
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/CreditCardIcon.tsx
+/**
+* CreditCardIcon
+*
+* @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+* @return {*}
+*/
+const CreditCardIcon = (props) => {
+	const { color = "#2196F3" } = props;
+	return /* @__PURE__ */ React$1.createElement("svg", {
+		width: "112",
+		height: "25",
+		viewBox: "0 0 112 25",
+		fill: color,
+		xmlns: "http://www.w3.org/2000/svg",
+		...props
+	}, /* @__PURE__ */ React$1.createElement("path", {
+		d: "M65.6406 4H45.8594C44.6963 4 43.75 4.94627 43.75 6.10938V18.7656C43.75 19.9287 44.6963 20.875 45.8594 20.875H65.6406C66.8037 20.875 67.75 19.9287 67.75 18.7656V6.10938C67.75 4.94627 66.8037 4 65.6406 4ZM45.1562 8.21875H66.3438V9.625H45.1562V8.21875ZM45.8594 5.40625H65.6406C66.0283 5.40625 66.3438 5.72167 66.3438 6.10938V6.8125H45.1562V6.10938C45.1562 5.72167 45.4717 5.40625 45.8594 5.40625ZM65.6406 19.4688H45.8594C45.4717 19.4688 45.1562 19.1533 45.1562 18.7656V11.0312H66.3438V18.7656C66.3438 19.1533 66.0283 19.4688 65.6406 19.4688Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M48.7188 16.6562H47.3125C46.9242 16.6562 46.6094 16.9711 46.6094 17.3594C46.6094 17.7477 46.9242 18.0625 47.3125 18.0625H48.7188C49.1071 18.0625 49.4219 17.7477 49.4219 17.3594C49.4219 16.9711 49.1071 16.6562 48.7188 16.6562Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M52.9375 16.6562H51.5312C51.1429 16.6562 50.8281 16.9711 50.8281 17.3594C50.8281 17.7477 51.1429 18.0625 51.5312 18.0625H52.9375C53.3258 18.0625 53.6406 17.7477 53.6406 17.3594C53.6406 16.9711 53.3258 16.6562 52.9375 16.6562Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M57.1562 16.6562H55.75C55.3617 16.6562 55.0469 16.9711 55.0469 17.3594C55.0469 17.7477 55.3617 18.0625 55.75 18.0625H57.1562C57.5446 18.0625 57.8594 17.7477 57.8594 17.3594C57.8594 16.9711 57.5446 16.6562 57.1562 16.6562Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M61.375 16.6562H59.9688C59.5804 16.6562 59.2656 16.9711 59.2656 17.3594C59.2656 17.7477 59.5804 18.0625 59.9688 18.0625H61.375C61.7633 18.0625 62.0781 17.7477 62.0781 17.3594C62.0781 16.9711 61.7633 16.6562 61.375 16.6562Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M52.9375 13.8438H47.3125C46.9242 13.8438 46.6094 14.1586 46.6094 14.5469C46.6094 14.9352 46.9242 15.25 47.3125 15.25H52.9375C53.3258 15.25 53.6406 14.9352 53.6406 14.5469C53.6406 14.1586 53.3258 13.8438 52.9375 13.8438Z",
+		fill: color
+	}));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/BankIcon.tsx
+/**
+* BankIcon
+*
+* @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+* @return {*}
+*/
+const BankIcon = (props) => {
+	const { color = "#2196F3" } = props;
+	return /* @__PURE__ */ React$1.createElement("svg", {
+		width: "25",
+		height: "24",
+		viewBox: "0 0 25 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, /* @__PURE__ */ React$1.createElement("g", { "clip-path": "url(#clip0_3352_7830)" }, /* @__PURE__ */ React$1.createElement("path", {
+		d: "M5.82697 13.5073H8.13464C8.51697 13.5073 8.82697 13.1973 8.82697 12.815C8.82697 12.4327 8.51697 12.1227 8.13464 12.1227H6.98071V11.1996C6.98071 10.8171 6.67072 10.5073 6.28839 10.5073C5.90607 10.5073 5.59607 10.8171 5.59607 11.1996V12.1359C4.55914 12.251 3.75 13.1323 3.75 14.1996V14.8918C3.75 15.2743 4.06 15.5841 4.44232 15.5841H7.44232C7.44232 15.9659 7.13178 16.2764 6.75 16.2764H4.44232C4.06 16.2764 3.75 16.5864 3.75 16.9688C3.75 17.3511 4.06 17.6611 4.44232 17.6611H5.59607V18.5841C5.59607 18.9664 5.90607 19.2764 6.28839 19.2764C6.67072 19.2764 6.98071 18.9664 6.98071 18.5841V17.6479C8.01782 17.5327 8.82697 16.6514 8.82697 15.5841V14.8918C8.82697 14.5095 8.51697 14.1996 8.13464 14.1996H5.13464C5.13464 13.8179 5.44519 13.5073 5.82697 13.5073Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M24.0577 7.73804H20.6993L22.923 5.51422C23.7328 4.70453 23.7328 3.3869 22.923 2.57703C22.5308 2.18481 22.0093 1.96875 21.4545 1.96875C20.8997 1.96875 20.3782 2.18481 19.986 2.57703L14.825 7.73804H1.44232C1.06 7.73804 0.75 8.04803 0.75 8.43036V21.3534C0.75 21.7357 1.06 22.0457 1.44232 22.0457H24.0577C24.44 22.0457 24.75 21.7357 24.75 21.3534V8.43036C24.75 8.04803 24.44 7.73804 24.0577 7.73804ZM14.3903 12.089L12.9216 12.5786L13.411 11.1099L19.3332 5.18793L20.3123 6.16699L14.3903 12.089ZM21.4545 3.35339C21.6394 3.35339 21.8132 3.42554 21.9439 3.55627C22.2109 3.82306 22.2109 4.26837 21.9439 4.53534L21.2913 5.18811L20.3123 4.20905L20.965 3.55627C21.0958 3.42554 21.2695 3.35339 21.4545 3.35339ZM23.3654 20.6611H2.13464V9.12268H13.4403L12.3164 10.2466C12.2404 10.3226 12.1831 10.4152 12.1492 10.5172L11.1702 13.4544C11.0945 13.6811 11.127 13.9565 11.2703 14.1498C11.4001 14.3249 11.6089 14.4304 11.827 14.4304H21.0577C21.44 14.4304 21.75 14.1204 21.75 13.738C21.75 13.3557 21.44 13.0457 21.0577 13.0457H15.3917L19.3147 9.12268H23.3654V20.6611Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M21.0579 16.0459H15.5195C15.1371 16.0459 14.8271 16.3559 14.8271 16.7382C14.8271 17.1205 15.1371 17.4305 15.5195 17.4305H21.0579C21.4402 17.4305 21.7502 17.1205 21.7502 16.7382C21.7502 16.3559 21.4402 16.0459 21.0579 16.0459Z",
+		fill: color
+	})), /* @__PURE__ */ React$1.createElement("defs", null, /* @__PURE__ */ React$1.createElement("clipPath", { id: "clip0_3352_7830" }, /* @__PURE__ */ React$1.createElement("rect", {
+		width: "24",
+		height: "24",
+		fill: "white",
+		transform: "translate(0.75)"
+	}))));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/CashForm.tsx
+const useStyles$1 = makeStyles((theme) => ({
+	formControl: {
+		width: "100%",
+		marginBottom: "10px"
+	},
+	formControlCheck: {
+		width: "100%",
+		marginTop: "5px",
+		marginLeft: "3px"
+	}
+}));
+const CashForm = ({ isFormDisabled = false, paymentDetails, amountValue = null, onStatusChange }) => {
+	const { t } = useTranslation();
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement(PaymentCard, null, /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Amount"),
+			variant: "outlined",
+			margin: "none",
+			size: "small",
+			disabled: isFormDisabled || amountValue || false,
+			fullWidth: true,
+			InputProps: { startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, "$") }
+		},
+		name: "cashAmount",
+		initialValue: amountValue,
+		required: !isFormDisabled
+	})), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+		component: FluentTextField,
+		ComponentProps: {
+			label: t("Description"),
+			variant: "outlined",
+			margin: "normal",
+			size: "small",
+			disabled: false,
+			fullWidth: true,
+			autoComplete: "off",
+			multiline: true,
+			rows: 4,
+			inputProps: {
+				maxLength: 256,
+				autocomplete: "off"
+			}
+		},
+		name: "cashDescription",
+		initialValue: "",
+		required: !isFormDisabled
+	})));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/CashIcon.tsx
+/**
+* CashIcon
+*
+* @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+* @return {*}
+*/
+const CashIcon = (props) => {
+	const { color = "#2196F3" } = props;
+	return /* @__PURE__ */ React$1.createElement("svg", {
+		width: "25",
+		height: "24",
+		viewBox: "0 0 25 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props
+	}, /* @__PURE__ */ React$1.createElement("g", { "clip-path": "url(#clip0_3352_7835)" }, /* @__PURE__ */ React$1.createElement("path", {
+		d: "M23.5469 4.24902H0.953125C0.564812 4.24902 0.25 4.55927 0.25 4.94196V18.7099C0.25 19.0926 0.564812 19.4029 0.953125 19.4029H23.5469C23.9352 19.4029 24.25 19.0926 24.25 18.7099V4.94196C24.25 4.55927 23.9352 4.24902 23.5469 4.24902ZM1.65625 10.094C4.00342 9.78446 5.86684 7.94805 6.18091 5.63489H18.319C18.6331 7.94805 20.4965 9.78446 22.8438 10.094V13.5579C20.4965 13.8674 18.6331 15.7038 18.319 18.017H6.18091C5.86684 15.7038 4.00342 13.8674 1.65625 13.5579V10.094ZM22.8438 8.69014C21.2735 8.40469 20.0332 7.18236 19.7435 5.63489H22.8438V8.69014ZM4.75642 5.63489C4.46678 7.18236 3.22647 8.40469 1.65625 8.69014V5.63489H4.75642ZM1.65625 14.9618C3.22647 15.2472 4.46678 16.4695 4.75642 18.017H1.65625V14.9618ZM19.7435 18.017C20.0332 16.4695 21.2735 15.2472 22.8438 14.9618V18.017H19.7435Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M13.0683 11.1408C12.5517 10.9609 11.9814 10.7443 11.6691 10.5029C11.6035 10.4522 11.5758 10.3114 11.6032 10.1681C11.6182 10.0897 11.6877 9.82792 11.9521 9.74938C12.4412 9.60414 12.7728 9.79401 12.8927 9.88233C13.2037 10.1114 13.6443 10.0487 13.8769 9.74222C14.1094 9.43571 14.0457 9.00148 13.7347 8.7723C13.6151 8.68416 13.3282 8.49827 12.9177 8.39137V8.25251C12.9177 7.86982 12.6029 7.55957 12.2146 7.55957C11.8263 7.55957 11.5115 7.86982 11.5115 8.25251V8.43419C10.8489 8.64521 10.3559 9.20741 10.2213 9.9113C10.0945 10.5743 10.3167 11.2188 10.8013 11.5933C11.2723 11.9574 11.944 12.219 12.5996 12.4474C13.0826 12.6156 13.097 12.9788 13.0626 13.1803C13.0043 13.522 12.7126 13.8912 12.2099 13.8946C11.6612 13.8982 11.5178 13.8759 11.1086 13.6121C10.7837 13.4026 10.3479 13.4924 10.1353 13.8126C9.92272 14.1329 10.0138 14.5623 10.3388 14.7718C10.7847 15.0593 11.1222 15.1893 11.5115 15.2443V15.3996C11.5115 15.7823 11.8263 16.0926 12.2146 16.0926C12.6029 16.0926 12.9177 15.7823 12.9177 15.3996V15.1709C13.7751 14.8969 14.3234 14.1487 14.4494 13.4101C14.6216 12.4006 14.0666 11.4886 13.0683 11.1408Z",
+		fill: color
+	})), /* @__PURE__ */ React$1.createElement("defs", null, /* @__PURE__ */ React$1.createElement("clipPath", { id: "clip0_3352_7835" }, /* @__PURE__ */ React$1.createElement("rect", {
+		width: "24",
+		height: "23.6522",
+		fill: "white",
+		transform: "translate(0.25)"
+	}))));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/DisableOverlay.tsx
+/**
+* DisabledOverlay
+*
+* @param {*} { message }
+* @return {*}
+*/
+const DisabledOverlay = ({ message }) => {
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		backgroundColor: "rgba(255, 255, 255, 0.5)",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		color: "#7f7f7f",
+		fontSize: "1.2rem",
+		textAlign: "center",
+		padding: "20px",
+		zIndex: 1e3
+	} }, message);
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/CheckIcon.tsx
+/**
+* CheckIcon
+*
+* @param {(JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>)} props
+* @return {*}
+*/
+const CheckIcon = (props) => {
+	const { color = "#2196F3" } = props;
+	return /* @__PURE__ */ React$1.createElement("svg", {
+		width: "25",
+		height: "24",
+		viewBox: "0 0 25 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, /* @__PURE__ */ React$1.createElement("g", { "clip-path": "url(#clip0_3352_7813)" }, /* @__PURE__ */ React$1.createElement("path", {
+		d: "M23.5357 4.51562H0.964281C0.569828 4.51562 0.25 4.83541 0.25 5.22991V18.7705C0.25 19.165 0.569828 19.4847 0.964281 19.4847H23.5357C23.9302 19.4847 24.25 19.1649 24.25 18.7705V5.22991C24.25 4.83541 23.9302 4.51562 23.5357 4.51562ZM22.8214 18.0561H1.67856V5.94419H22.8214V18.0561Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M6.69818 11.2856H5.04012C4.70445 11.2856 4.4314 11.0126 4.4314 10.6769C4.4314 10.3412 4.70445 10.0682 5.04012 10.0682H8.02123C8.41568 10.0682 8.73551 9.74833 8.73551 9.35388C8.73551 8.95943 8.41568 8.6396 8.02123 8.6396H6.58352V7.86321C6.58352 7.46875 6.2637 7.14893 5.86924 7.14893C5.47479 7.14893 5.15496 7.46875 5.15496 7.86321V8.6396H5.04021C3.91685 8.6396 3.00293 9.55352 3.00293 10.6769C3.00293 11.8003 3.9168 12.7142 5.04016 12.7142H6.69823C7.0339 12.7142 7.30694 12.9872 7.30694 13.3229C7.30694 13.6586 7.0339 13.9316 6.69823 13.9316H3.74018C3.34573 13.9316 3.0259 14.2514 3.0259 14.6459C3.0259 15.0403 3.34573 15.3602 3.74018 15.3602H5.15491V16.1366C5.15491 16.531 5.47474 16.8508 5.86919 16.8508C6.26365 16.8508 6.58348 16.531 6.58348 16.1366V15.3602H6.69818C7.82159 15.3602 8.73546 14.4462 8.73546 13.3229C8.73546 12.1995 7.82159 11.2856 6.69818 11.2856Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M21.2281 7.21729H14.2983C13.9038 7.21729 13.584 7.53711 13.584 7.93157C13.584 8.32607 13.9038 8.64585 14.2983 8.64585H21.2282C21.6227 8.64585 21.9425 8.32602 21.9425 7.93157C21.9425 7.53711 21.6226 7.21729 21.2281 7.21729Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M21.2281 9.7041H14.2983C13.9038 9.7041 13.584 10.0239 13.584 10.4184C13.584 10.8128 13.9038 11.1327 14.2983 11.1327H21.2282C21.6227 11.1327 21.9425 10.8128 21.9425 10.4184C21.9425 10.0239 21.6226 9.7041 21.2281 9.7041Z",
+		fill: color
+	}), /* @__PURE__ */ React$1.createElement("path", {
+		d: "M21.2274 14.4291H19.3673L18.6357 13.4674C18.3715 13.1202 17.8598 13.0889 17.5553 13.4018L16.6815 14.2997L16.0694 13.1591C15.7951 12.6481 15.0555 12.6606 14.7992 13.1814L13.5335 15.7527C13.3594 16.1066 13.505 16.5347 13.859 16.709C14.2106 16.8821 14.6399 16.7397 14.8153 16.3836L15.4675 15.0585L15.884 15.8345C16.1115 16.2585 16.6876 16.3419 17.0253 15.9949L18.0008 14.9924L18.4447 15.5759C18.5798 15.7534 18.7901 15.8576 19.0132 15.8576H21.2274C21.6218 15.8576 21.9417 15.5378 21.9417 15.1434C21.9417 14.7489 21.6218 14.4291 21.2274 14.4291Z",
+		fill: color
+	})), /* @__PURE__ */ React$1.createElement("defs", null, /* @__PURE__ */ React$1.createElement("clipPath", { id: "clip0_3352_7813" }, /* @__PURE__ */ React$1.createElement("rect", {
+		width: "24",
+		height: "24",
+		fill: "white",
+		transform: "translate(0.25)"
+	}))));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/TabPanel.tsx
+const StyledTab = styled(Tab)(({ theme, style }) => ({
+	textTransform: "none",
+	"&.Mui-selected": {
+		backgroundColor: lighten(theme.palette.secondary.light, .9),
+		color: theme.palette.primary.main
+	},
+	backgroundColor: theme.palette.background.paper,
+	...style
+}));
+/**
+* TabPanel
+*
+* @param {TabPanelProps} props
+* @return {*}
+*/
+const TabPanel = (props) => {
+	const { children, value, index, sx,...other } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		role: "tabpanel",
+		hidden: value !== index,
+		id: `simple-tabpanel-${index}`,
+		"aria-labelledby": `simple-tab-${index}`,
+		...other
+	}, value === index && /* @__PURE__ */ React.createElement(Box, { sx: sx ? { ...sx } : { p: 3 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, children)));
+};
+
+//#endregion
+//#region src/utilities/form/paymentForm/PaymentForm.tsx
+const useStyles = makeStyles((theme) => ({
+	tab: {
+		color: grey[800],
+		"&.Mui-selected": { color: theme.palette.secondary.main },
+		textTransform: "none",
+		minWidth: 115,
+		width: 115
+	},
+	cardFullWidth: {
+		width: "100%",
+		minWidth: "100%",
+		padding: 0
+	},
+	paddingZero: { padding: 0 },
+	submitControl: { marginLeft: "50px" },
+	buttonProgress: {
+		color: theme.palette.secondary.main,
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12
+	},
+	dropDownPaymentsCard: { padding: "20px 12px 0px 12px" },
+	assetTypeLabel: { top: theme.spacing(-.7) },
+	formControl: {
+		width: "100%",
+		marginTop: "-15px"
+	}
+}));
+/** paymentMethodIcons @type {*} */
+const paymentMethodIcons = {
+	"Credit Card": CreditCardIcon,
+	"Cash": CashIcon,
+	"eCheck": BankIcon,
+	"Debit Card": CheckIcon
+};
+const DEFAULT_ACCOUNT_TYPES = [{
+	name: "Checking",
+	value: "checking"
+}, {
+	name: "Savings",
+	value: "savings"
+}];
+const PAYMENT_METHODS = {
+	CREDIT_CARD: "credit card",
+	CASH: "cash",
+	E_CHECK: "echeck",
+	DEBIT_CARD: "debit card"
+};
+/**
+* getPaymentMethodIcon
+*
+* @param {string} paymentMethodName
+* @param {boolean} isSelected
+* @param {boolean} isEnabled
+* @param {*} theme
+* @return {*}
+*/
+const getPaymentMethodIcon = (paymentMethodName, isSelected, isEnabled, theme) => {
+	const color = isEnabled ? isSelected ? theme.palette.secondary.main : grey[800] : grey[400];
+	const IconComponent = paymentMethodIcons[paymentMethodName];
+	if (!IconComponent) return null;
+	return /* @__PURE__ */ React.createElement(Badge, {
+		color: "secondary",
+		badgeContent: !isEnabled ? "!" : null
+	}, /* @__PURE__ */ React.createElement(IconComponent, { color }));
+};
+/**
+* PaymentForm Component
+*
+* This component provides a user interface for selecting and handling different payment methods.
+* It allows users to switch between available payment methods using tabs and handles the form submission process.
+* Each payment method has its own form component that is displayed based on the selected tab.
+*
+* Props:
+*   @param {PaymentMethodProps} props - Object containing the following properties:
+*     @param {string} id - Unique identifier for the payment form.
+*     @param {number} [activeTab=0] - The index of the currently active tab. Defaults to 0.  [OPTIONAL]
+*     @param {any[]} [paymentAccounts] - Array of payment accounts associated with the user. [OPTIONAL]
+*     @param {PaymentDetails} paymentDetails - Object containing details about the customer's payment information.
+*     @param {any[]} [bankAccountTypes=DEFAULT_ACCOUNT_TYPES] - Array of available bank account types, with a default value.
+*     @param {boolean} loading - Boolean flag indicating if asynchronous operations like data fetching are in progress.
+*     @param {Function} onTabChange - Function to be called when the active tab changes.
+*     @param {Function} [onFormStatusChange] - Optional function to handle status changes during form interactions.
+*     @param {Function} [onSubmitCompleted] - Optional function to be called upon successful form submission.
+*     @param {Function} presetDataRequest - Function to prepare the data request for payment processing.
+*     @param {Function} [submit] - Optional function to be called on form submission.
+*     @param {any} [children] - Optional elements to be rendered inside the form.
+*     @param {"before" | "after" | "outside"} [childrenPosition="before"] - Position of the children elements relative to the form.
+*     @param {string} [actionLabel] - Optional label for the form action button.
+*     @param {any} [render] - Optional render function for custom rendering inside the component.
+*
+* Usage:
+* The component renders tabs to switch between different payment methods and handles form interactions
+* for submitting payments. It integrates with Material-UI components to render the form and uses React hooks
+* for managing state, such as the currently active tab and form interaction data.
+*
+* The component uses the `useMemo` hook to optimize rendering performance and to handle the memoization of
+* computed payment fields. It ensures that the form submission process is smooth, even for hosted payments.
+*
+* Each payment method form (e.g., CreditCardForm, eCheckForm, etc.) is conditionally rendered based on the
+* currently selected payment method, ensuring a consistent user experience.
+*
+* Example:
+* <PaymentForm
+*   id="paymentForm"
+*   activeTab={0}
+*   paymentAccounts={accounts}
+*   paymentDetails={paymentDetails}
+*   bankAccountTypes={accountTypes}
+*   loading={isLoading}
+*   onTabChange={handleTabChange}
+*   onFormStatusChange={handleStatusChange}
+*   presetDataRequest={createDataRequest}
+*   onSubmitCompleted={handleSubmitCompleted}
+*   actionLabel="Enter Card Details"
+*   submit={handleSubmit}
+* />
+*
+* Note:
+* This component should be used within a React environment that supports hooks and functional components.
+* It relies on Material-UI for UI components and theming.
+*/
+const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDetails, bankAccountTypes = DEFAULT_ACCOUNT_TYPES, loading, presetDataRequest, onTabChange, onFormStatusChange, onSubmitCompleted, submit, children, childrenPosition = "before", actionLabel, render }) => {
+	const classes = useStyles();
+	const theme = useTheme();
+	const user = useUser();
+	const { t } = useTranslation();
+	const [value, setValue] = useState(activeTab);
+	const formRef = useRef(null);
+	const [paymentFormStatus, setPaymentFormStatus] = useState(null);
+	const [paymentMethodsArray, setPaymentMethodsArray] = useState();
+	const [selectedHostedPayment, setSelectedHostedPayment] = useState(null);
+	const [selectedPaymentType, setSelectedPaymentType] = useState(PaymentMethodTypeEnum.CreditCard);
+	const [loadingProcessPayment, setLoadingProcessPayment] = useState(false);
+	const [selectedPaymentAccount, setSelectedPaymentAccount] = useState(null);
+	/**
+	* API call to get the payment accounts (Credit cards, Bank accounts) associated with the account
+	*/
+	const [{ data: paymentMethods, loading: loadingPaymentMethods }] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentMethod`, {}, false);
+	/**
+	*  API call to get the payment method information and determine if the payment method is enabled or not
+	*
+	* @param {*} paymentMethodID : Credit card: 4001, Bank account: 4002, eCheck: 4004
+	* @return {*}
+	*/
+	const getPaymentMethodInfo = useCallback(async (paymentMethodID) => {
+		if (!paymentMethodID || !user?.currentTenantId) return;
+		try {
+			return await apiMutate(ConfigService.pgV1ApiUrl, `AppPaymentVendor/PaymentMethod/${paymentMethodID}`, { method: "GET" }, {});
+		} catch (error) {
+			throw new Error(`Error getting payment method info: ${error?.message}`);
+		}
+	}, [user]);
+	/**
+	* API call to fetchPaymentMethod
+	*
+	* @param {string} currentTenantID
+	* @param {string} paymentMethodId
+	* @return {*}
+	*/
+	const fetchPaymentMethod = useCallback(async (currentTenantID, paymentMethodId) => {
+		if (!currentTenantID || !paymentMethodId) return null;
+		return apiMutate(ConfigService.pgV1ApiUrl, `AppPaymentVendor/PaymentMethod/${paymentMethodId}`, { method: "GET" }, {});
+	}, []);
+	/**
+	* fetchPaymentMethodDetails
+	*
+	* @param {*} tenantID
+	* @param {*} methodId
+	* @return {*}
+	*/
+	const fetchPaymentMethodDetails = useCallback(async (tenantID, methodId) => {
+		const paymentMethod = (await fetchPaymentMethod(tenantID, methodId))?.data;
+		if (!paymentMethod) throw new Error(`${t("Payment method configuration not found")}: ${methodId}`);
+		return paymentMethod;
+	}, [fetchPaymentMethod]);
+	/**
+	* executePaymentPG
+	*
+	* @param {string} paymentType
+	* @param {any} requestBody
+	* @return {*}
+	*/
+	const executePaymentPG = useCallback(async (paymentType, requestBody) => {
+		if (!paymentType || !requestBody) return null;
+		return apiMutate(ConfigService.pgV1ApiUrl, `ProcessPayment/${paymentType}`, {
+			method: "POST",
+			data: requestBody
+		}, {});
+	}, []);
+	/**
+	* executeHostedPaymentPG
+	*
+	* @param {string} paymentType
+	* @param {any} requestBody
+	* @return {*}
+	*/
+	const executeHostedPaymentPG = useCallback(async (paymentType, requestBody) => {
+		if (!paymentType || !requestBody) return null;
+		const path = requestBody?.paymentTokenId ? `ProcessPayment/${paymentType}Profile` : `ProcessHostedPaymentPagePayment/${paymentType}`;
+		return apiMutate(ConfigService.pgV1ApiUrl, path, {
+			method: "POST",
+			data: requestBody
+		}, {});
+	}, []);
+	const paymentMethodLabels = useMemo(() => ({
+		"creditcard": t("Credit Card"),
+		"debitcard": t("Debit Card"),
+		"echeck": t("eCheck"),
+		"check": t("Check"),
+		"cash": t("Cash")
+	}), [t]);
+	/**
+	* handleChange
+	*
+	* @param {React.ChangeEvent<{}>} event
+	* @param {number} newValue
+	*/
+	const handleChange = (event, newValue) => {
+		event.preventDefault();
+		setValue(newValue);
+		const selectedPaymentMethod = paymentMethodsArray?.[newValue];
+		setSelectedHostedPayment(selectedPaymentMethod?.paymentVendorConnection?.paymentVendorFactoryID);
+		setSelectedPaymentType(selectedPaymentMethod?.paymentMethodID);
+		onTabChange(event, selectedPaymentMethod);
+	};
+	const handleStatusChange = (paymentFormStatus$1) => {
+		setPaymentFormStatus(paymentFormStatus$1);
+		onFormStatusChange?.(paymentFormStatus$1);
+	};
+	/**
+	* useCallback()
+	* renderPaymentMethodForm
+	*
+	* @param {any} method
+	* @return {*}
+	*/
+	const renderPaymentMethodForm = useCallback((method) => {
+		const isDisabled = !method.enabled;
+		const overlayMessage = t("This Payment method is currently unavailable");
+		return /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, isDisabled && /* @__PURE__ */ React.createElement(DisabledOverlay, { message: overlayMessage }), /* @__PURE__ */ React.createElement("div", { style: { opacity: isDisabled ? .5 : 1 } }, method?.name?.toLowerCase() === PAYMENT_METHODS.CREDIT_CARD && /* @__PURE__ */ React.createElement(CreditCardForm, {
+			onStatusChange: handleStatusChange,
+			paymentDetails,
+			externalId,
+			setSelectedPaymentAccount,
+			actionLabel,
+			...method
+		}), method?.name?.toLowerCase() === PAYMENT_METHODS.CASH && /* @__PURE__ */ React.createElement(CashForm, {
+			onStatusChange: handleStatusChange,
+			paymentDetails,
+			...method
+		}), method?.name?.toLowerCase() === PAYMENT_METHODS.E_CHECK && /* @__PURE__ */ React.createElement(BankAccountForm, {
+			bankAccountTypes,
+			onStatusChange: handleStatusChange,
+			paymentDetails,
+			externalId,
+			setSelectedPaymentAccount,
+			actionLabel,
+			...method
+		}), method?.name?.toLowerCase() === PAYMENT_METHODS.DEBIT_CARD && /* @__PURE__ */ React.createElement(CreditCardForm, {
+			onStatusChange: handleStatusChange,
+			paymentDetails,
+			...method
+		}), " "));
+	}, [paymentDetails, bankAccountTypes]);
+	/**
+	* isLiveMode
+	*
+	* @return {*}
+	*/
+	const isSandBoxMode = useMemo(() => {
+		const isLiveMode = paymentMethodsArray?.[value]?.paymentVendorConnection?.isLiveMode;
+		if (isLiveMode === void 0) return false;
+		return !isLiveMode;
+	}, [paymentMethodsArray, value]);
+	/**
+	* getPaymentMethodLabel
+	*
+	* @param {*} method
+	* @return {*}
+	*/
+	const getPaymentMethodLabel = (method) => {
+		const normalizedMethodName = method?.name?.toLowerCase().replace(/\s+/g, "") || "";
+		return paymentMethodLabels?.[normalizedMethodName] || method.name;
+	};
+	/**
+	* setPaymentMethodsEnabled
+	* take every paymentMethod (eCheck, credit card, etc) and verify if the payment methods are enabled or not
+	* @return {*}
+	*/
+	const setPaymentMethodsEnabled = useCallback(async () => {
+		const validPaymentMethods = paymentMethods?.filter(Boolean);
+		const filteredResults = (await Promise.allSettled(validPaymentMethods?.map(async (paymentMethod) => {
+			try {
+				const paymentMethodEnable = await getPaymentMethodInfo(paymentMethod.paymentMethodID);
+				const paymentVendorConnection = paymentMethodEnable?.data?.paymentVendorConnection || null;
+				const providerType = paymentVendorConnection?.paymentVendorFactoryID;
+				const hostedPaymentPageSetup = paymentVendorConnection?.hostedPaymentPageSetup.find((x) => x.useHostedPaymentPage) || null;
+				const isHostedPaymentPage = hostedPaymentPageSetup?.useHostedPaymentPage || false;
+				let providerProps = {};
+				let hasReadPropertiesError = false;
+				let readPropertiesMessageError = null;
+				if (isHostedPaymentPage) {
+					const { error, attributes } = stringToProps(hostedPaymentPageSetup?.hostedPaymentPageConfig);
+					providerProps = {
+						customCss: hostedPaymentPageSetup?.customCSS,
+						attributes,
+						...attributes?.baseUrl ? { baseUrl: attributes?.baseUrl } : null
+					};
+					hasReadPropertiesError = error ? true : false;
+					readPropertiesMessageError = error;
+				}
+				return {
+					paymentMethodID: paymentMethod.paymentMethodID,
+					name: paymentMethod.name,
+					enabled: paymentMethodEnable?.status === 200,
+					data: paymentMethodEnable?.status === 200 ? paymentMethodEnable.data : null,
+					paymentVendorConnection,
+					isHostedPaymentPage,
+					providerType,
+					providerProps,
+					hasReadPropertiesError,
+					readPropertiesMessageError
+				};
+			} catch (error) {
+				console.error(`Error fetching payment method info for ${paymentMethod?.paymentMethodID}:`, error);
+				return null;
+			}
+		}))).filter((result) => result.status === "fulfilled" && result.value !== null).map((result) => result.value) || null;
+		setPaymentMethodsArray(filteredResults);
+		setSelectedHostedPayment(filteredResults?.find((x) => x.enabled)?.providerType || null);
+	}, [paymentMethods]);
+	/**
+	* createHostedPaymentRequest
+	*
+	* @param {*} baseRequest
+	* @param {*} paymentMethod
+	* @return {*}
+	*/
+	const createHostedPaymentRequest = useCallback((baseRequest, paymentMethod, paymentMethodId, selectedPaymentAccount$1) => {
+		const vendorFactoryID = paymentMethod.paymentVendorConnection?.paymentVendorFactoryID;
+		let vendorRequest = {};
+		switch (vendorFactoryID) {
+			case PaymentVendorFactoryEnum.Fiserv:
+				vendorRequest = {
+					HostedPageToken: paymentFormStatus?.payload?.token || paymentFormStatus?.payload?.message,
+					...paymentFormStatus?.payload?.expiry && { Expiry: paymentFormStatus?.payload?.expiry }
+				};
+				break;
+			case PaymentVendorFactoryEnum.ICheck:
+				if (!paymentFormStatus?.isValid) throw new Error(`${t("Payment error. Please check the form and try again")} ${paymentFormStatus?.errorMessage}`);
+				vendorRequest = { ResponseData: JSON.parse(paymentFormStatus?.payload)?.transactionResponse };
+				break;
+			case PaymentVendorFactoryEnum.Paymentus:
+				const paymentTokenId = selectedPaymentAccount$1 ? selectedPaymentAccount$1?.paymentTokenID : null;
+				vendorRequest = {
+					NameOnAccount: paymentFormStatus?.payload?.CardHolderName,
+					HostedPageToken: paymentFormStatus?.payload?.Token,
+					...paymentFormStatus?.payload?.ExpiryDate && { Expiry: paymentFormStatus?.payload?.ExpiryDate },
+					...paymentTokenId && { PaymentTokenId: paymentTokenId }
+				};
+				break;
+			default: break;
+		}
+		return {
+			...baseRequest,
+			PaymentVendorFactoryID: vendorFactoryID,
+			...vendorRequest
+		};
+	}, [paymentFormStatus]);
+	/**
+	* createNonHostedPaymentRequest
+	*
+	* @param {*} baseRequest
+	* @param {*} formData
+	* @return {*}
+	*/
+	const createNonHostedPaymentRequest = useCallback((baseRequest, formData) => {
+		let dataRequest = { ...baseRequest };
+		if (selectedPaymentType === PaymentMethodTypeEnum.CreditCard) Object.assign(dataRequest, setCreditCardAttr(formData));
+		else if (selectedPaymentType === PaymentMethodTypeEnum.eCheck) Object.assign(dataRequest, setECheckAttr(formData));
+		return dataRequest;
+	}, [selectedPaymentType]);
+	/**
+	* createDataRequest
+	*
+	* @param {*} formData
+	* @param {*} paymentMethod
+	* @param {*} isHostedPayment
+	* @return {*}
+	*/
+	const createDataRequest = useCallback((formData, paymentMethod, isHostedPayment, paymentMethodId, selectedPaymentAccount$1) => {
+		const baseRequest = presetDataRequest(formData, paymentMethod, isHostedPayment);
+		return isHostedPayment ? createHostedPaymentRequest(baseRequest, paymentMethod, paymentMethodId, selectedPaymentAccount$1) : createNonHostedPaymentRequest(baseRequest, formData);
+	}, [
+		paymentFormStatus,
+		user,
+		presetDataRequest,
+		paymentDetails,
+		selectedPaymentType
+	]);
+	/**
+	* executePayment
+	* Executes the payment process based on the payment method and request data.
+	*
+	* @param {*} paymentMethodId The ID of the payment method.
+	* @param {*} dataRequest The request data for the payment.
+	* @param {boolean} isHostedPayment Indicates if the payment is a hosted payment.
+	* @return {*} The result of the payment execution.
+	*/
+	const executePayment = useCallback(async (paymentMethodId, dataRequest, isHostedPayment) => {
+		if (!paymentMethodId || !dataRequest) throw new Error(t("Invalid payment data"));
+		if (typeof isHostedPayment !== "boolean") throw new Error(t("Invalid hosted payment flag"));
+		const paymentMethodName = PaymentMethodTypeEnum?.[paymentMethodId];
+		if (!paymentMethodName) throw new Error(t("Unknown payment method") + `: ${paymentMethodId}`);
+		return (isHostedPayment ? await executeHostedPaymentPG(paymentMethodName, dataRequest) : await executePaymentPG(paymentMethodName, dataRequest))?.data || null;
+	}, [executePaymentPG, executeHostedPaymentPG]);
+	/**
+	* setCreditCardAttr
+	*
+	* @param {*} formData
+	* @param {string} currentTenantID
+	* @param {IPaymentMethod} paymentMethod
+	* @return {*}
+	*/
+	const setCreditCardAttr = (formData) => {
+		const expireMonth = formData.expiryDate.split("/")?.[0];
+		const expirationDate = `20${formData.expiryDate.split("/")?.[1]}-${expireMonth}-01`;
+		return {
+			CardNumber: formData.cardNumber.replace(/\s/g, ""),
+			ExpirationDate: expirationDate,
+			SecurityCode: formData.cvv
+		};
+	};
+	/**
+	* setECheckAttr
+	* @param {*} formData
+	*/
+	const setECheckAttr = (formData) => ({
+		routingNumber: formData.routingNumber.replace(/\s/g, ""),
+		accountNumber: formData.accountNumber.replace(/\s/g, "")
+	});
+	/**
+	* submitPaymentForm
+	* Processes the payment form submission.
+	* @param {*} formData The form data.
+	*/
+	const submitPaymentForm = useCallback(async (formData) => {
+		if (!formData) return;
+		setLoadingProcessPayment(true);
+		const currentTenantID = user?.currentTenantId;
+		const paymentMethodId = selectedPaymentType;
+		if (!currentTenantID || !paymentMethodId) onSubmitCompleted?.(null, { error: true });
+		try {
+			const paymentMethod = await fetchPaymentMethodDetails(currentTenantID, paymentMethodId);
+			const isHostedPayment = paymentMethod.paymentVendorConnection?.hostedPaymentPageSetup?.[0]?.useHostedPaymentPage || false;
+			const paymentResult = await executePayment(paymentMethodId, createDataRequest(formData, paymentMethod, isHostedPayment, paymentMethodId, selectedPaymentAccount), isHostedPayment);
+			onSubmitCompleted?.(formData, paymentResult);
+		} catch (error) {
+			throw new Error("Error processing payment: " + error?.message);
+		} finally {
+			setLoadingProcessPayment(false);
+		}
+	}, [
+		paymentFormStatus,
+		createDataRequest,
+		selectedPaymentType,
+		user,
+		selectedPaymentAccount
+	]);
+	/**
+	* Handles the form submission for iCheck payments.
+	*
+	* This function checks if the selected payment method is `ECheck` (electronic check)
+	* from the `PaymentVendorFactoryEnum`. If it is, and the form reference (`formRef`) exists
+	* and is currently mounted in the component, it programmatically triggers the form submission.
+	*
+	*/
+	const handleICheckPaymentFormStatus = useCallback(() => {
+		if (paymentFormStatus?.selectedHostedPayment === PaymentVendorFactoryEnum.ICheck || paymentFormStatus?.selectedHostedPayment === PaymentVendorFactoryEnum.Paymentus && formRef?.current) formRef.current?.submit();
+	}, [paymentFormStatus]);
+	useEffect(() => {
+		setPaymentMethodsEnabled();
+	}, [paymentMethods]);
+	useEffect(() => {
+		onFormStatusChange?.(paymentFormStatus);
+		handleICheckPaymentFormStatus();
+	}, [paymentFormStatus]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, loadingProcessPayment && /* @__PURE__ */ React.createElement(Box$1, { sx: {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		backgroundColor: "rgba(255, 255, 255, 0.8)",
+		zIndex: 9999,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(CircularProgress$1, {
+		size: "3rem",
+		color: "primary"
+	})), /* @__PURE__ */ React.createElement(Form, {
+		id,
+		onSubmit: submitPaymentForm,
+		autocomplete: "off",
+		render: (params) => {
+			formRef.current = params?.form;
+			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box$1, {
+				display: "flex",
+				flexDirection: "column",
+				style: {
+					gap: "10px",
+					flex: 1
+				}
+			}, childrenPosition === "before" && children, /* @__PURE__ */ React.createElement(Box$1, {
+				display: "flex",
+				flexDirection: "column",
+				padding: "0"
+			}, /* @__PURE__ */ React.createElement(Tabs, {
+				value,
+				onChange: handleChange,
+				"aria-label": t("(payment method tabs")
+			}, paymentMethodsArray?.map((method, index) => /* @__PURE__ */ React.createElement(Tooltip, {
+				key: method.paymentMethodID,
+				title: !method.enabled ? t("This Payment method is currently unavailable") : ""
+			}, /* @__PURE__ */ React.createElement(Tab, {
+				key: method.paymentMethodID,
+				icon: getPaymentMethodIcon(method.name, value === index, method.enabled, theme),
+				label: getPaymentMethodLabel(method),
+				"aria-label": getPaymentMethodLabel(method),
+				className: classes.tab
+			})))), /* @__PURE__ */ React.createElement(Card, { className: classes.cardFullWidth }, /* @__PURE__ */ React.createElement(CardContent, { className: classes.paddingZero }, (loading || loadingPaymentMethods) && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement(Grow, {
+				in: isSandBoxMode,
+				style: {
+					transformOrigin: "0 0 0",
+					display: isSandBoxMode ? "flex" : "none"
+				},
+				timeout: 800
+			}, /* @__PURE__ */ React.createElement(Box$1, {
+				display: "flex",
+				flexDirection: "row",
+				justifyContent: "space-between",
+				alignItems: "center",
+				style: {
+					gap: "8px",
+					boxSizing: "border-box",
+					background: "#FFF2CD",
+					borderWidth: "1px 0px",
+					borderStyle: "solid",
+					borderColor: "rgba(0, 0, 0, 0.12)",
+					padding: "10px"
+				}
+			}, /* @__PURE__ */ React.createElement(Typography$1, {
+				variant: "subtitle2",
+				style: {
+					width: "100%",
+					textAlign: "center"
+				}
+			}, t("You are currently in test mode using a Sandbox account")))), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), paymentMethodsArray?.map((method, index) => /* @__PURE__ */ React.createElement(TabPanel, {
+				value,
+				index,
+				key: method.paymentMethodID
+			}, renderPaymentMethodForm(method))), submit && /* @__PURE__ */ React.createElement(FluentButton, {
+				variant: "contained",
+				color: "secondary",
+				disabled: false,
+				type: "submit",
+				className: classes.submitControl
+			}, loading && /* @__PURE__ */ React.createElement(CircularProgress$1, {
+				size: 24,
+				className: classes.buttonProgress
+			}), /* @__PURE__ */ React.createElement(Typography$1, null, t("Save")))))), childrenPosition === "after" && children, typeof render === "function" ? render(params) : render), childrenPosition === "outside" && children);
+		}
+	}));
+};
+
+//#endregion
+export { PaymentForm as t };
+//# sourceMappingURL=PaymentForm-C9djfH5t.js.map