udp-react-enterprise-component-library 26.5.0-beta.2 → 26.5.0-beta.21

package/dist/utilities/form/paymentForm/PaymentForm.mjs

@@ -1,67 +1,22 @@
 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 { UdpButton } from "../../../UI/fluent-web-components/UdpButton.mjs";
+import { UdpTablist } from "../../../UI/fluent-web-components/UdpTablist.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpMessageBar } from "../../../UI/fluent-web-components/UdpMessageBar.mjs";
+import { UdpProgressBar } from "../../../UI/fluent-web-components/UdpProgressBar.mjs";
+import { UdpRadioGroup } from "../../../UI/fluent-web-components/UdpRadioGroup.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 { usePaymentContext } from "./usePaymentContext.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"
@@ -76,24 +31,6 @@ const PAYMENT_METHODS = {
 	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.
@@ -149,37 +86,49 @@ const getPaymentMethodIcon = (paymentMethodName, isSelected, isEnabled, theme) =
 * 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 PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDetails, bankAccountTypes = DEFAULT_ACCOUNT_TYPES, loading, presetDataRequest, onTabChange, onFormStatusChange, onSubmitCompleted, submit, children, childrenPosition = "before", actionLabel, render, showSandboxBanner = true, s2sToken, s2sTenantId, refreshS2sToken, allowSavePaymentMethod = true, methodPicker = "radio", actionsStart, onSubmittingChange, onReadyChange }) => {
 	const user = useUser();
 	const { t } = useTranslation();
 	const [value, setValue] = useState(activeTab);
 	const formRef = useRef(null);
+	const methodBoxRef = useRef(null);
+	const methodBoxReleaseTimer = useRef(null);
+	/**
+	* Freeze the method-form area's current height while switching methods.
+	* The outgoing form unmounts synchronously but the incoming form's web
+	* components hydrate asynchronously, so the area collapses to ~zero height
+	* for a few frames. Inside a scroll container that collapse clamps the
+	* scroll position (the page appears to jump to the top). Holding the
+	* previous height through the swap keeps the scroll position stable.
+	*/
+	const freezeMethodBoxHeight = () => {
+		const box = methodBoxRef.current;
+		if (!box) return;
+		box.style.minHeight = `${box.offsetHeight}px`;
+		if (methodBoxReleaseTimer.current) window.clearTimeout(methodBoxReleaseTimer.current);
+		methodBoxReleaseTimer.current = window.setTimeout(() => {
+			box.style.minHeight = "";
+			methodBoxReleaseTimer.current = null;
+		}, 400);
+	};
+	useEffect(() => () => {
+		if (methodBoxReleaseTimer.current) window.clearTimeout(methodBoxReleaseTimer.current);
+	}, []);
+	const s2sTokenRef = useRef(s2sToken);
+	useEffect(() => {
+		s2sTokenRef.current = s2sToken;
+	}, [s2sToken]);
 	const [paymentFormStatus, setPaymentFormStatus] = useState(null);
-	const [paymentMethodsArray, setPaymentMethodsArray] = useState();
-	const [selectedHostedPayment, setSelectedHostedPayment] = useState(null);
+	const [, 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
+	* Discovery: resolved list of payment methods + vendor/hosted-page info.
+	* When the backend ships a single payment-context endpoint, replace the
+	* usePaymentContext implementation — no other change in this file is needed.
 	*/
-	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]);
+	const { methods: paymentMethodsArray, isLoading: loadingPaymentMethods } = usePaymentContext(s2sToken, s2sTenantId);
 	/**
 	* API call to fetchPaymentMethod
 	*
@@ -189,8 +138,17 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	*/
 	const fetchPaymentMethod = useCallback(async (currentTenantID, paymentMethodId) => {
 		if (!currentTenantID || !paymentMethodId) return null;
-		return apiMutate(ConfigService.pgV1ApiUrl, `AppPaymentVendor/PaymentMethod/${paymentMethodId}`, { method: "GET" }, {});
-	}, []);
+		const token = s2sTokenRef.current;
+		const path = token ? `AppPaymentVendor/PaymentMethod/${paymentMethodId}/S2S` : `AppPaymentVendor/PaymentMethod/${paymentMethodId}`;
+		const config = token ? {
+			method: "GET",
+			headers: {
+				Authorization: `Bearer ${token}`,
+				currentTenantId: s2sTenantId
+			}
+		} : { method: "GET" };
+		return apiMutate(ConfigService.pgV1ApiUrl, path, config, {});
+	}, [s2sTenantId]);
 	/**
 	* fetchPaymentMethodDetails
 	*
@@ -212,11 +170,22 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	*/
 	const executePaymentPG = useCallback(async (paymentType, requestBody) => {
 		if (!paymentType || !requestBody) return null;
-		return apiMutate(ConfigService.pgV1ApiUrl, `ProcessPayment/${paymentType}`, {
+		const token = s2sTokenRef.current;
+		const path = token ? `ProcessPayment/${paymentType}/S2S` : `ProcessPayment/${paymentType}`;
+		const body = requestBody;
+		const config = token ? {
 			method: "POST",
-			data: requestBody
-		}, {});
-	}, []);
+			data: body,
+			headers: {
+				Authorization: `Bearer ${token}`,
+				currentTenantId: s2sTenantId
+			}
+		} : {
+			method: "POST",
+			data: body
+		};
+		return apiMutate(ConfigService.pgV1ApiUrl, path, config, {});
+	}, [s2sTenantId]);
 	/**
 	* executeHostedPaymentPG
 	*
@@ -224,14 +193,27 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	* @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, {
+	const executeHostedPaymentPG = useCallback(async (paymentType, requestBody) => {
+		console.log("executeHostedPaymentPG started");
+		if (!paymentType || !requestBody) return null;
+		const body = requestBody;
+		const token = s2sTokenRef.current;
+		const basePath = requestBody?.paymentTokenId ? `ProcessPayment/${paymentType}Profile` : `ProcessHostedPaymentPagePayment/${paymentType}`;
+		const path = token ? `${basePath}/S2S` : basePath;
+		console.log(`this is the path: ${path}`);
+		console.log(body);
+		return apiMutate(ConfigService.pgV1ApiUrl, path, token ? {
+			method: "POST",
+			data: body,
+			headers: {
+				Authorization: `Bearer ${token}`,
+				currentTenantId: s2sTenantId
+			}
+		} : {
 			method: "POST",
-			data: requestBody_0
+			data: body
 		}, {});
-	}, []);
+	}, [s2sTenantId]);
 	const paymentMethodLabels = useMemo(() => ({
 		"creditcard": t("Credit Card"),
 		"debitcard": t("Debit Card"),
@@ -245,129 +227,128 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	* @param {React.ChangeEvent<{}>} event
 	* @param {number} newValue
 	*/
+	/**
+	* Update the active method by index into the enabled list.
+	* `event` is forwarded to `onTabChange` for back-compat with consumers that
+	* expected the legacy MUI tab-change signature.
+	*/
 	const handleChange = (event, newValue) => {
-		event.preventDefault();
+		freezeMethodBoxHeight();
 		setValue(newValue);
-		const selectedPaymentMethod = paymentMethodsArray?.[newValue];
+		const selectedPaymentMethod = enabledMethods?.[newValue];
 		setSelectedHostedPayment(selectedPaymentMethod?.paymentVendorConnection?.paymentVendorFactoryID);
 		setSelectedPaymentType(selectedPaymentMethod?.paymentMethodID);
 		onTabChange(event, selectedPaymentMethod);
 	};
-	const handleStatusChange = (paymentFormStatus_0) => {
-		setPaymentFormStatus(paymentFormStatus_0);
-		onFormStatusChange?.(paymentFormStatus_0);
+	const handleStatusChange = (paymentFormStatus) => {
+		setPaymentFormStatus(paymentFormStatus);
 	};
 	/**
-	* useCallback()
-	* renderPaymentMethodForm
+	* Render the form for the currently-selected method. The picker only ever
+	* surfaces enabled methods, so no disabled-overlay branch is needed.
 	*
-	* @param {any} method
-	* @return {*}
+	* @param method  the active payment method
+	* @param isFormDisabled  when true, locks every input in the rendered form.
+	*                        Driven by RFF `submitting` + our own
+	*                        `loadingProcessPayment` so the user can't change
+	*                        values mid-submit.
 	*/
-	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, {
+	const renderPaymentMethodForm = useCallback((method, isFormDisabled) => {
+		const name = method?.name?.toLowerCase();
+		if (name === PAYMENT_METHODS.CREDIT_CARD) return /* @__PURE__ */ React.createElement(CreditCardForm, {
 			onStatusChange: handleStatusChange,
 			paymentDetails,
-			externalId,
+			externalId: externalId !== void 0 ? String(externalId) : void 0,
 			setSelectedPaymentAccount,
 			actionLabel,
+			isFormDisabled,
+			allowSaveMethod: allowSavePaymentMethod,
+			s2sToken,
+			s2sTenantId,
 			...method
-		}), method?.name?.toLowerCase() === PAYMENT_METHODS.CASH && /* @__PURE__ */ React.createElement(CashForm, {
+		});
+		if (name === PAYMENT_METHODS.CASH) return /* @__PURE__ */ React.createElement(CashForm, {
 			onStatusChange: handleStatusChange,
 			paymentDetails,
+			isFormDisabled,
 			...method
-		}), method?.name?.toLowerCase() === PAYMENT_METHODS.E_CHECK && /* @__PURE__ */ React.createElement(BankAccountForm, {
+		});
+		if (name === PAYMENT_METHODS.E_CHECK) return /* @__PURE__ */ React.createElement(BankAccountForm, {
 			bankAccountTypes,
 			onStatusChange: handleStatusChange,
 			paymentDetails,
-			externalId,
+			externalId: externalId !== void 0 ? String(externalId) : void 0,
 			setSelectedPaymentAccount,
 			actionLabel,
+			isFormDisabled,
+			allowSaveMethod: allowSavePaymentMethod,
+			s2sToken,
+			s2sTenantId,
 			...method
-		}), method?.name?.toLowerCase() === PAYMENT_METHODS.DEBIT_CARD && /* @__PURE__ */ React.createElement(CreditCardForm, {
+		});
+		if (name === PAYMENT_METHODS.DEBIT_CARD) return /* @__PURE__ */ React.createElement(CreditCardForm, {
 			onStatusChange: handleStatusChange,
 			paymentDetails,
+			isFormDisabled,
+			allowSaveMethod: allowSavePaymentMethod,
+			s2sToken,
+			s2sTenantId,
 			...method
-		}), " "));
-	}, [paymentDetails, bankAccountTypes]);
+		});
+		return null;
+	}, [
+		paymentDetails,
+		bankAccountTypes,
+		externalId,
+		actionLabel,
+		allowSavePaymentMethod,
+		s2sToken,
+		s2sTenantId
+	]);
 	/**
-	* isLiveMode
-	*
-	* @return {*}
+	* Enabled (configured) methods only. Unconfigured methods are hidden from the
+	* picker entirely — today's behaviour of "show a disabled tab with a !
+	* badge" was confusing and inaccessible.
+	*/
+	const enabledMethods = useMemo(() => paymentMethodsArray?.filter((m) => m.enabled) ?? [], [paymentMethodsArray]);
+	const activeMethod = enabledMethods[value] ?? enabledMethods[0];
+	/**
+	* Sandbox mode for the currently-selected method's vendor connection.
 	*/
 	const isSandBoxMode = useMemo(() => {
-		const isLiveMode = paymentMethodsArray?.[value]?.paymentVendorConnection?.isLiveMode;
-		if (isLiveMode === void 0) return false;
-		return !isLiveMode;
-	}, [paymentMethodsArray, value]);
+		return activeMethod?.paymentVendorConnection?.isLiveMode === false;
+	}, [activeMethod]);
+	/**
+	* ICheck and Paymentus both render their own submit button inside the
+	* hosted iframe and auto-submit this form once the iframe posts back a
+	* token (see handleICheckPaymentFormStatus below) — our own submit button
+	* would just be a confusing second button. Fiserv's hosted iframe has no
+	* button of its own, so it still needs ours.
+	*/
+	const isAutoSubmitHostedMethod = activeMethod?.isHostedPaymentPage === true && (activeMethod?.providerType === PaymentVendorFactoryEnum.ICheck || activeMethod?.providerType === PaymentVendorFactoryEnum.Paymentus);
+	useEffect(() => {
+		if (enabledMethods.length === 0) return;
+		if (value >= enabledMethods.length) setValue(0);
+	}, [enabledMethods.length, value]);
 	/**
 	* getPaymentMethodLabel
 	*
 	* @param {*} method
 	* @return {*}
 	*/
-	const getPaymentMethodLabel = (method_0) => {
-		const normalizedMethodName = method_0?.name?.toLowerCase().replace(/\s+/g, "") || "";
-		return paymentMethodLabels?.[normalizedMethodName] || method_0.name;
+	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_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;
+	const createHostedPaymentRequest = useCallback((baseRequest, paymentMethod, paymentMethodId, selectedPaymentAccount) => {
+		const vendorFactoryID = paymentMethod.paymentVendorConnection?.paymentVendorFactoryID;
 		let vendorRequest = {};
 		switch (vendorFactoryID) {
 			case PaymentVendorFactoryEnum.Fiserv:
@@ -381,7 +362,7 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 				vendorRequest = { ResponseData: JSON.parse(paymentFormStatus?.payload)?.transactionResponse };
 				break;
 			case PaymentVendorFactoryEnum.Paymentus:
-				const paymentTokenId = selectedPaymentAccount_0 ? selectedPaymentAccount_0?.paymentTokenID : null;
+				const paymentTokenId = selectedPaymentAccount ? selectedPaymentAccount?.paymentTokenID : null;
 				vendorRequest = {
 					NameOnAccount: paymentFormStatus?.payload?.CardHolderName,
 					HostedPageToken: paymentFormStatus?.payload?.Token,
@@ -404,8 +385,8 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	* @param {*} formData
 	* @return {*}
 	*/
-	const createNonHostedPaymentRequest = useCallback((baseRequest_0, formData) => {
-		let dataRequest = { ...baseRequest_0 };
+	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;
@@ -418,9 +399,9 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	* @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);
+	const createDataRequest = useCallback((formData, paymentMethod, isHostedPayment, paymentMethodId, selectedPaymentAccount) => {
+		const baseRequest = presetDataRequest(formData, paymentMethod, isHostedPayment);
+		return isHostedPayment ? createHostedPaymentRequest(baseRequest, paymentMethod, paymentMethodId, selectedPaymentAccount) : createNonHostedPaymentRequest(baseRequest, formData);
 	}, [
 		paymentFormStatus,
 		user,
@@ -437,12 +418,13 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	* @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;
+	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"));
+		console.log(`execute payment start`);
+		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
@@ -452,50 +434,92 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	* @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`;
+	const setCreditCardAttr = (formData) => {
+		const expireMonth = formData.expiryDate.split("/")?.[0];
+		const expirationDate = `20${formData.expiryDate.split("/")?.[1]}-${expireMonth}-01`;
 		return {
-			CardNumber: formData_1.cardNumber.replace(/\s/g, ""),
+			CardNumber: formData.cardNumber.replace(/\s/g, ""),
 			ExpirationDate: expirationDate,
-			SecurityCode: formData_1.cvv
+			SecurityCode: formData.cvv
 		};
 	};
 	/**
 	* setECheckAttr
 	* @param {*} formData
 	*/
-	const setECheckAttr = (formData_2) => ({
-		routingNumber: formData_2.routingNumber.replace(/\s/g, ""),
-		accountNumber: formData_2.accountNumber.replace(/\s/g, "")
+	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_3) => {
-		if (!formData_3) return;
+	const submitPaymentForm = useCallback(async (formData) => {
+		if (!formData) return;
+		if (loadingPaymentMethods || enabledMethods.length === 0) return;
 		setLoadingProcessPayment(true);
-		const currentTenantID_0 = user?.currentTenantId;
-		const paymentMethodId_3 = selectedPaymentType;
-		if (!currentTenantID_0 || !paymentMethodId_3) onSubmitCompleted?.(null, { error: true });
+		if (refreshS2sToken) try {
+			const freshToken = await refreshS2sToken();
+			if (freshToken) s2sTokenRef.current = freshToken;
+		} catch (error) {
+			console.warn("refreshS2sToken failed; submitting with the existing token", error);
+		}
+		const retryOnAuthError = async (call) => {
+			try {
+				return await call();
+			} catch (error) {
+				if (!refreshS2sToken || error?.response?.status !== 403) throw error;
+				let freshToken;
+				try {
+					freshToken = await refreshS2sToken();
+				} catch {
+					throw error;
+				}
+				if (!freshToken) throw error;
+				s2sTokenRef.current = freshToken;
+				return call();
+			}
+		};
+		const currentTenantID = s2sTokenRef.current ? s2sTenantId : user?.currentTenantId;
+		const paymentMethodId = selectedPaymentType;
+		if (!currentTenantID || !paymentMethodId) {
+			onSubmitCompleted?.(null, {
+				error: true,
+				message: "Missing tenant ID or payment method ID"
+			});
+			setLoadingProcessPayment(false);
+			return;
+		}
+		console.log("started exectute payment");
 		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);
+			const paymentMethod = await retryOnAuthError(() => fetchPaymentMethodDetails(currentTenantID, paymentMethodId));
+			const isHostedPayment = paymentMethod.paymentVendorConnection?.hostedPaymentPageSetup?.[0]?.useHostedPaymentPage || false;
+			const dataRequest = createDataRequest(formData, paymentMethod, isHostedPayment, paymentMethodId, selectedPaymentAccount);
+			const paymentResult = await retryOnAuthError(() => executePayment(paymentMethodId, dataRequest, isHostedPayment));
+			onSubmitCompleted?.(formData, paymentResult);
+		} catch (error) {
+			console.error("Error processing payment:", error);
+			onSubmitCompleted?.(formData, {
+				error: true,
+				message: error?.message ?? "Error processing payment"
+			});
 		} finally {
 			setLoadingProcessPayment(false);
 		}
 	}, [
-		paymentFormStatus,
 		createDataRequest,
 		selectedPaymentType,
 		user,
-		selectedPaymentAccount
+		selectedPaymentAccount,
+		s2sTenantId,
+		refreshS2sToken,
+		executePayment,
+		fetchPaymentMethodDetails,
+		onSubmitCompleted,
+		loadingPaymentMethods,
+		enabledMethods
 	]);
 	/**
 	* Handles the form submission for iCheck payments.
@@ -506,100 +530,76 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 	*
 	*/
 	const handleICheckPaymentFormStatus = useCallback(() => {
-		if (paymentFormStatus?.selectedHostedPayment === PaymentVendorFactoryEnum.ICheck || paymentFormStatus?.selectedHostedPayment === PaymentVendorFactoryEnum.Paymentus && formRef?.current) formRef.current?.submit();
+		const vendor = paymentFormStatus?.selectedHostedPayment;
+		if ((vendor === PaymentVendorFactoryEnum.ICheck || vendor === PaymentVendorFactoryEnum.Paymentus) && formRef?.current) formRef.current.submit();
 	}, [paymentFormStatus]);
 	useEffect(() => {
-		setPaymentMethodsEnabled();
-	}, [paymentMethods]);
+		if (!paymentMethodsArray) return;
+		setSelectedHostedPayment(paymentMethodsArray.find((m) => m.enabled)?.providerType ?? null);
+	}, [paymentMethodsArray]);
 	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, {
+	useEffect(() => {
+		onSubmittingChange?.(loadingProcessPayment);
+	}, [loadingProcessPayment]);
+	const isReadyToSubmit = !loadingPaymentMethods && enabledMethods.length > 0 && paymentFormStatus?.isValid !== false;
+	useEffect(() => {
+		onReadyChange?.(isReadyToSubmit);
+	}, [isReadyToSubmit]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__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"
+			const hasMultipleMethods = enabledMethods.length > 1;
+			const hasNoMethods = paymentMethodsArray !== void 0 && enabledMethods.length === 0 && !loadingPaymentMethods;
+			const isSubmitting = Boolean(params?.submitting) || loadingProcessPayment;
+			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UdpFlexbox, {
+				direction: "column",
+				gap: "md",
+				wrap: "nowrap"
+			}, childrenPosition === "before" && children, (loading || loadingPaymentMethods) && /* @__PURE__ */ React.createElement(UdpProgressBar, null), hasNoMethods && /* @__PURE__ */ React.createElement(UdpMessageBar, { intent: "error" }, t("No payment methods are available for this account")), showSandboxBanner && isSandBoxMode && /* @__PURE__ */ React.createElement(UdpMessageBar, { intent: "warning" }, t("You are currently in test mode using a Sandbox account")), hasMultipleMethods && methodPicker === "tabs" && /* @__PURE__ */ React.createElement(UdpTablist, {
+				size: "small",
+				disabled: isSubmitting,
+				activeId: String(activeMethod?.paymentMethodID ?? ""),
+				tabList: enabledMethods.map((m) => ({
+					id: String(m.paymentMethodID),
+					label: getPaymentMethodLabel(m)
+				})),
+				onTabChange: (e) => {
+					const id = String(e.detail);
+					const nextIdx = enabledMethods.findIndex((m) => String(m.paymentMethodID) === id);
+					if (nextIdx >= 0) handleChange(e, nextIdx);
 				}
-			}, /* @__PURE__ */ React.createElement(Typography$1, {
-				variant: "subtitle2",
-				style: {
-					width: "100%",
-					textAlign: "center"
+			}), hasMultipleMethods && methodPicker === "radio" && /* @__PURE__ */ React.createElement(UdpRadioGroup, {
+				label: t("Payment method"),
+				name: "paymentMethod",
+				disabled: isSubmitting,
+				includeErrorPadding: false,
+				value: String(activeMethod?.paymentMethodID ?? ""),
+				items: enabledMethods.map((m) => ({
+					label: getPaymentMethodLabel(m),
+					value: String(m.paymentMethodID)
+				})),
+				onChange: (e) => {
+					const id = e.target.value;
+					const nextIdx = enabledMethods.findIndex((m) => String(m.paymentMethodID) === id);
+					if (nextIdx >= 0) handleChange(e, nextIdx);
 				}
-			}, 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,
+			}), /* @__PURE__ */ React.createElement("div", { ref: methodBoxRef }, activeMethod && renderPaymentMethodForm(activeMethod, isSubmitting)), submit && /* @__PURE__ */ React.createElement(UdpFlexbox, {
+				direction: "row",
+				gap: "sm",
+				align: "center",
+				wrap: "nowrap"
+			}, actionsStart, !isAutoSubmitHostedMethod && /* @__PURE__ */ React.createElement(UdpButton, {
 				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);
+				form: id,
+				appearance: "primary",
+				loading: loading || loadingProcessPayment,
+				disabled: loadingPaymentMethods || hasNoMethods || paymentFormStatus?.isValid === false
+			}, actionLabel || t("Save"))), childrenPosition === "after" && children, typeof render === "function" ? render(params) : render), childrenPosition === "outside" && children);
 		}
 	}));
 };