import { Form } from "../Form.mjs";
import { FluentButton } from "../../../UI/inputs/buttons/FluentButton.mjs";
import { ConfigService } from "../../../configService/index.mjs";
import { useUser } from "../../auth/useUser.mjs";
import { apiMutate } from "../../useAxiosMutate.mjs";
import { Typography as Typography$1 } from "../../../UI/dataDisplay/typography/Typography.mjs";
import { LayoutUnit } from "../../../layout/LayoutUnit.mjs";
import { useAxiosGet } from "../../useAxiosGet.mjs";
import { PaymentMethodTypeEnum } from "../../../enums/paymentMethodTypeEnum.mjs";
import { PaymentVendorFactoryEnum } from "../../../enums/paymentVendorFactoryEnum.mjs";
import { stringToProps } from "../../stringUtils.mjs";
import { CircularProgress as CircularProgress$1 } from "../../../UI/loading/CircularProgress.mjs";
import { Box as Box$1 } from "../../../UI/Box.mjs";
import { CreditCardForm } from "./CreditCardForm.mjs";
import { BankAccountForm } from "./BankAccountForm.mjs";
import { CreditCardIcon } from "./CreditCardIcon.mjs";
import { BankIcon } from "./BankIcon.mjs";
import { CashForm } from "./CashForm.mjs";
import { CashIcon } from "./CashIcon.mjs";
import { DisabledOverlay } from "./DisableOverlay.mjs";
import { CheckIcon } from "./CheckIcon.mjs";
import { TabPanel } from "./TabPanel.mjs";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Badge, Card, CardContent, Grow, LinearProgress, Tab, Tabs, Tooltip, makeStyles, useTheme } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import grey from "@material-ui/core/colors/grey";
//#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_0, requestBody_0) => {
		if (!paymentType_0 || !requestBody_0) return null;
		const path = requestBody_0?.paymentTokenId ? `ProcessPayment/${paymentType_0}Profile` : `ProcessHostedPaymentPagePayment/${paymentType_0}`;
		return apiMutate(ConfigService.pgV1ApiUrl, path, {
			method: "POST",
			data: requestBody_0
		}, {});
	}, []);
	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_0) => {
		setPaymentFormStatus(paymentFormStatus_0);
		onFormStatusChange?.(paymentFormStatus_0);
	};
	/**
	* 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_0) => {
		const normalizedMethodName = method_0?.name?.toLowerCase().replace(/\s+/g, "") || "";
		return paymentMethodLabels?.[normalizedMethodName] || method_0.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_0) => {
			try {
				const paymentMethodEnable = await getPaymentMethodInfo(paymentMethod_0.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: error_1, attributes } = stringToProps(hostedPaymentPageSetup?.hostedPaymentPageConfig);
					providerProps = {
						customCss: hostedPaymentPageSetup?.customCSS,
						attributes,
						...attributes?.baseUrl ? { baseUrl: attributes?.baseUrl } : null
					};
					hasReadPropertiesError = error_1 ? true : false;
					readPropertiesMessageError = error_1;
				}
				return {
					paymentMethodID: paymentMethod_0.paymentMethodID,
					name: paymentMethod_0.name,
					enabled: paymentMethodEnable?.status === 200,
					data: paymentMethodEnable?.status === 200 ? paymentMethodEnable.data : null,
					paymentVendorConnection,
					isHostedPaymentPage,
					providerType,
					providerProps,
					hasReadPropertiesError,
					readPropertiesMessageError
				};
			} catch (error_0) {
				console.error(`Error fetching payment method info for ${paymentMethod_0?.paymentMethodID}:`, error_0);
				return null;
			}
		}))).filter((result_1) => result_1.status === "fulfilled" && result_1.value !== null).map((result_2) => result_2.value) || null;
		setPaymentMethodsArray(filteredResults);
		setSelectedHostedPayment(filteredResults?.find((x_0) => x_0.enabled)?.providerType || null);
	}, [paymentMethods]);
	/**
	* createHostedPaymentRequest
	*
	* @param {*} baseRequest
	* @param {*} paymentMethod
	* @return {*}
	*/
	const createHostedPaymentRequest = useCallback((baseRequest, paymentMethod_1, paymentMethodId_0, selectedPaymentAccount_0) => {
		const vendorFactoryID = paymentMethod_1.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_0 ? selectedPaymentAccount_0?.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_0, formData) => {
		let dataRequest = { ...baseRequest_0 };
		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_0, paymentMethod_2, isHostedPayment, paymentMethodId_1, selectedPaymentAccount_1) => {
		const baseRequest_1 = presetDataRequest(formData_0, paymentMethod_2, isHostedPayment);
		return isHostedPayment ? createHostedPaymentRequest(baseRequest_1, paymentMethod_2, paymentMethodId_1, selectedPaymentAccount_1) : createNonHostedPaymentRequest(baseRequest_1, formData_0);
	}, [
		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_2, dataRequest_0, isHostedPayment_0) => {
		if (!paymentMethodId_2 || !dataRequest_0) throw new Error(t("Invalid payment data"));
		if (typeof isHostedPayment_0 !== "boolean") throw new Error(t("Invalid hosted payment flag"));
		const paymentMethodName = PaymentMethodTypeEnum?.[paymentMethodId_2];
		if (!paymentMethodName) throw new Error(t("Unknown payment method") + `: ${paymentMethodId_2}`);
		return (isHostedPayment_0 ? await executeHostedPaymentPG(paymentMethodName, dataRequest_0) : await executePaymentPG(paymentMethodName, dataRequest_0))?.data || null;
	}, [executePaymentPG, executeHostedPaymentPG]);
	/**
	* setCreditCardAttr
	*
	* @param {*} formData
	* @param {string} currentTenantID
	* @param {IPaymentMethod} paymentMethod
	* @return {*}
	*/
	const setCreditCardAttr = (formData_1) => {
		const expireMonth = formData_1.expiryDate.split("/")?.[0];
		const expirationDate = `20${formData_1.expiryDate.split("/")?.[1]}-${expireMonth}-01`;
		return {
			CardNumber: formData_1.cardNumber.replace(/\s/g, ""),
			ExpirationDate: expirationDate,
			SecurityCode: formData_1.cvv
		};
	};
	/**
	* setECheckAttr
	* @param {*} formData
	*/
	const setECheckAttr = (formData_2) => ({
		routingNumber: formData_2.routingNumber.replace(/\s/g, ""),
		accountNumber: formData_2.accountNumber.replace(/\s/g, "")
	});
	/**
	* submitPaymentForm
	* Processes the payment form submission.
	* @param {*} formData The form data.
	*/
	const submitPaymentForm = useCallback(async (formData_3) => {
		if (!formData_3) return;
		setLoadingProcessPayment(true);
		const currentTenantID_0 = user?.currentTenantId;
		const paymentMethodId_3 = selectedPaymentType;
		if (!currentTenantID_0 || !paymentMethodId_3) onSubmitCompleted?.(null, { error: true });
		try {
			const paymentMethod_3 = await fetchPaymentMethodDetails(currentTenantID_0, paymentMethodId_3);
			const isHostedPayment_1 = paymentMethod_3.paymentVendorConnection?.hostedPaymentPageSetup?.[0]?.useHostedPaymentPage || false;
			const paymentResult = await executePayment(paymentMethodId_3, createDataRequest(formData_3, paymentMethod_3, isHostedPayment_1, paymentMethodId_3, selectedPaymentAccount), isHostedPayment_1);
			onSubmitCompleted?.(formData_3, paymentResult);
		} catch (error_2) {
			throw new Error("Error processing payment: " + error_2?.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_1, index) => /* @__PURE__ */ React.createElement(Tooltip, {
				key: method_1.paymentMethodID,
				title: !method_1.enabled ? t("This Payment method is currently unavailable") : ""
			}, /* @__PURE__ */ React.createElement(Tab, {
				key: method_1.paymentMethodID,
				icon: getPaymentMethodIcon(method_1.name, value === index, method_1.enabled, theme),
				label: getPaymentMethodLabel(method_1),
				"aria-label": getPaymentMethodLabel(method_1),
				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_2, index_0) => /* @__PURE__ */ React.createElement(TabPanel, {
				value,
				index: index_0,
				key: method_2.paymentMethodID
			}, renderPaymentMethodForm(method_2))), 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 };

//# sourceMappingURL=PaymentForm.mjs.map