udp-react-enterprise-component-library 26.5.0-beta.9 → 26.5.0

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

@@ -1,76 +1,21 @@
 import React, { useRef, useEffect, useMemo, useState, useCallback } from 'react';
-import { makeStyles, useTheme, Tabs, Tab, CardContent, Card, LinearProgress, Badge, Tooltip, Grow } from '@material-ui/core';
-import { Box } from '../../../UI/Box';
-import { Typography } from '../../../UI/dataDisplay/typography/Typography';
-import { CircularProgress } from '../../../UI/loading/CircularProgress';
 import { Form } from '../Form';
 import { useTranslation } from 'react-i18next';
-import { FluentButton } from '../../../UI/inputs/buttons/FluentButton';
+import { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';
+import { UdpButton } from '../../../UI/fluent-web-components/UdpButton';
+import { UdpProgressBar } from '../../../UI/fluent-web-components/UdpProgressBar';
+import { UdpMessageBar } from '../../../UI/fluent-web-components/UdpMessageBar';
+import { UdpRadioGroup } from '../../../UI/fluent-web-components/UdpRadioGroup';
+import { UdpTablist } from '../../../UI/fluent-web-components/UdpTablist';
 import { CreditCardForm } from './CreditCardForm';
 import { BankAccountForm } from './BankAccountForm';
-import { CreditCardIcon } from './CreditCardIcon';
-import { BankIcon } from './BankIcon';
 import { CashForm } from './CashForm';
-import { CashIcon } from './CashIcon';
-import { DisabledOverlay } from './DisableOverlay';
-import { CheckIcon } from './CheckIcon';
-import { LayoutUnit } from '../../../layout/LayoutUnit';
-import { TabPanel } from './TabPanel';
-import { useAxiosGet } from '../../useAxiosGet';
 import { ConfigService } from '../../../configService';
-import { stringToProps } from '../../stringUtils';
 import { apiMutate } from '../../useAxiosMutate';
 import { useUser } from '../../auth/useUser';
 import { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';
 import { PaymentMethodTypeEnum } from '../../../enums/paymentMethodTypeEnum';
-import grey from '@material-ui/core/colors/grey';
-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(-0.7),
-    },
-    formControl: {
-        width: '100%',
-        marginTop: '-15px',
-    },
-}));
-/** paymentMethodIcons @type {*} */
-const paymentMethodIcons = {
-    'Credit Card': CreditCardIcon,
-    'Cash': CashIcon,
-    'eCheck': BankIcon,
-    'Debit Card': CheckIcon,
-};
+import { usePaymentContext } from './usePaymentContext';
 const DEFAULT_ACCOUNT_TYPES = [
     { name: 'Checking', value: 'checking' },
     { name: 'Savings', value: 'savings' },
@@ -81,25 +26,6 @@ const PAYMENT_METHODS = {
     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) => {
-    // Determine the icon color based on the selection and enablement status
-    const color = isEnabled ? (isSelected ? theme.palette.secondary.main : grey[800]) : grey[400];
-    // Find the corresponding icon component from the mapping
-    const IconComponent = paymentMethodIcons[paymentMethodName];
-    // Return null if no matching icon is found (unknown payment method)
-    if (!IconComponent)
-        return null;
-    return (React.createElement(Badge, { color: "secondary", badgeContent: !isEnabled ? "!" : null }, React.createElement(IconComponent, { color: color })));
-};
 /**
  * PaymentForm Component
  *
@@ -156,44 +82,60 @@ 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.
  */
-export 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();
+export const PaymentForm = ({ id, activeTab = 0, externalId, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+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, }) => {
+    var _a;
     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);
+        }
+    }, []);
+    // Submit-path calls read the token through this ref so refreshS2sToken can
+    // swap in a fresh one mid-submit without waiting for a re-render.
+    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);
     // #region [API Calls]
     /**
-     * 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 === null || user === void 0 ? void 0 : user.currentTenantId)) {
-            return;
-        }
-        try {
-            const result = await apiMutate(ConfigService.pgV1ApiUrl, `AppPaymentVendor/PaymentMethod/${paymentMethodID}`, {
-                method: 'GET',
-            }, {});
-            return result;
-        }
-        catch (error) {
-            throw new Error(`Error getting payment method info: ${error === null || error === void 0 ? void 0 : error.message}`);
-        }
-    }, [user]);
+    const { methods: paymentMethodsArray, isLoading: loadingPaymentMethods } = usePaymentContext(s2sToken, s2sTenantId);
     /**
      * API call to fetchPaymentMethod
      *
@@ -205,10 +147,15 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
         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
      *
@@ -235,11 +182,16 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
         if (!paymentType || !requestBody) {
             return null;
         }
-        return apiMutate(ConfigService.pgV1ApiUrl, `ProcessPayment/${paymentType}`, {
-            method: 'POST',
-            data: requestBody,
-        }, {});
-    }, []);
+        const token = s2sTokenRef.current;
+        const path = token
+            ? `ProcessPayment/${paymentType}/S2S`
+            : `ProcessPayment/${paymentType}`;
+        const body = requestBody;
+        const config = token
+            ? { method: 'POST', data: body, headers: { Authorization: `Bearer ${token}`, currentTenantId: s2sTenantId } }
+            : { method: 'POST', data: body };
+        return apiMutate(ConfigService.pgV1ApiUrl, path, config, {});
+    }, [s2sTenantId]);
     /**
      * executeHostedPaymentPG
      *
@@ -248,17 +200,22 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
      * @return {*}
      */
     const executeHostedPaymentPG = useCallback(async (paymentType, requestBody) => {
+        console.log('executeHostedPaymentPG started');
         if (!paymentType || !requestBody) {
             return null;
         }
-        const path = (requestBody === null || requestBody === void 0 ? void 0 : requestBody.paymentTokenId) ?
-            `ProcessPayment/${paymentType}Profile` :
-            `ProcessHostedPaymentPagePayment/${paymentType}`;
-        return apiMutate(ConfigService.pgV1ApiUrl, path, {
-            method: 'POST',
-            data: requestBody,
-        }, {});
-    }, []);
+        const body = requestBody;
+        const token = s2sTokenRef.current;
+        const basePath = (requestBody === null || requestBody === void 0 ? void 0 : 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: body }, {});
+    }, [s2sTenantId]);
     // #endregion
     // #region [Methods]
     const paymentMethodLabels = useMemo(() => ({
@@ -274,46 +231,90 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
      * @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) => {
         var _a;
-        event.preventDefault();
+        freezeMethodBoxHeight();
         setValue(newValue);
-        const selectedPaymentMethod = paymentMethodsArray === null || paymentMethodsArray === void 0 ? void 0 : paymentMethodsArray[newValue];
-        // Set selected payment method and hosted payment type
+        const selectedPaymentMethod = enabledMethods === null || enabledMethods === void 0 ? void 0 : enabledMethods[newValue];
         setSelectedHostedPayment((_a = selectedPaymentMethod === null || selectedPaymentMethod === void 0 ? void 0 : selectedPaymentMethod.paymentVendorConnection) === null || _a === void 0 ? void 0 : _a.paymentVendorFactoryID);
         setSelectedPaymentType(selectedPaymentMethod === null || selectedPaymentMethod === void 0 ? void 0 : selectedPaymentMethod.paymentMethodID);
         onTabChange(event, selectedPaymentMethod);
     };
+    // onFormStatusChange is fired by the useEffect on `paymentFormStatus` below;
+    // do NOT also call it here or consumers receive the same status twice per change.
     const handleStatusChange = (paymentFormStatus) => {
         setPaymentFormStatus(paymentFormStatus);
-        onFormStatusChange === null || onFormStatusChange === void 0 ? void 0 : onFormStatusChange(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) => {
-        var _a, _b, _c, _d;
-        const isDisabled = !method.enabled;
-        const overlayMessage = t("This Payment method is currently unavailable");
-        return (React.createElement("div", { style: { position: 'relative' } }, isDisabled && React.createElement(DisabledOverlay, { message: overlayMessage }), React.createElement("div", { style: { opacity: isDisabled ? 0.5 : 1 } }, ((_a = method === null || method === void 0 ? void 0 : method.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === PAYMENT_METHODS.CREDIT_CARD && React.createElement(CreditCardForm, Object.assign({ onStatusChange: handleStatusChange, paymentDetails: paymentDetails, externalId: externalId, setSelectedPaymentAccount: setSelectedPaymentAccount, actionLabel: actionLabel }, method)), ((_b = method === null || method === void 0 ? void 0 : method.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === PAYMENT_METHODS.CASH && React.createElement(CashForm, Object.assign({ onStatusChange: handleStatusChange, paymentDetails: paymentDetails }, method)), ((_c = method === null || method === void 0 ? void 0 : method.name) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === PAYMENT_METHODS.E_CHECK && React.createElement(BankAccountForm, Object.assign({ bankAccountTypes: bankAccountTypes, onStatusChange: handleStatusChange, paymentDetails: paymentDetails, externalId: externalId, setSelectedPaymentAccount: setSelectedPaymentAccount, actionLabel: actionLabel }, method)), ((_d = method === null || method === void 0 ? void 0 : method.name) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === PAYMENT_METHODS.DEBIT_CARD && React.createElement(CreditCardForm, Object.assign({ onStatusChange: handleStatusChange, paymentDetails: paymentDetails }, method)), " ")));
-    }, [paymentDetails, bankAccountTypes]);
+    const renderPaymentMethodForm = useCallback((method, isFormDisabled) => {
+        var _a;
+        const name = (_a = method === null || method === void 0 ? void 0 : method.name) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (name === PAYMENT_METHODS.CREDIT_CARD) {
+            return (React.createElement(CreditCardForm, Object.assign({ onStatusChange: handleStatusChange, paymentDetails: paymentDetails, externalId: externalId !== undefined ? String(externalId) : undefined, setSelectedPaymentAccount: setSelectedPaymentAccount, actionLabel: actionLabel, isFormDisabled: isFormDisabled, allowSaveMethod: allowSavePaymentMethod, s2sToken: s2sToken, s2sTenantId: s2sTenantId }, method)));
+        }
+        if (name === PAYMENT_METHODS.CASH) {
+            return (React.createElement(CashForm, Object.assign({ onStatusChange: handleStatusChange, paymentDetails: paymentDetails, isFormDisabled: isFormDisabled }, method)));
+        }
+        if (name === PAYMENT_METHODS.E_CHECK) {
+            return (React.createElement(BankAccountForm, Object.assign({ bankAccountTypes: bankAccountTypes, onStatusChange: handleStatusChange, paymentDetails: paymentDetails, externalId: externalId !== undefined ? String(externalId) : undefined, setSelectedPaymentAccount: setSelectedPaymentAccount, actionLabel: actionLabel, isFormDisabled: isFormDisabled, allowSaveMethod: allowSavePaymentMethod, s2sToken: s2sToken, s2sTenantId: s2sTenantId }, method)));
+        }
+        if (name === PAYMENT_METHODS.DEBIT_CARD) {
+            // TODO: Implement Debit Card form. Falls back to CreditCardForm until then.
+            return (React.createElement(CreditCardForm, Object.assign({ onStatusChange: handleStatusChange, paymentDetails: paymentDetails, isFormDisabled: isFormDisabled, allowSaveMethod: allowSavePaymentMethod, s2sToken: s2sToken, s2sTenantId: s2sTenantId }, method)));
+        }
+        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(() => {
+        var _a;
+        return (_a = paymentMethodsArray === null || paymentMethodsArray === void 0 ? void 0 : paymentMethodsArray.filter((m) => m.enabled)) !== null && _a !== void 0 ? _a : [];
+    }, [paymentMethodsArray]);
+    const activeMethod = (_a = enabledMethods[value]) !== null && _a !== void 0 ? _a : enabledMethods[0];
+    /**
+     * Sandbox mode for the currently-selected method's vendor connection.
      */
     const isSandBoxMode = useMemo(() => {
-        var _a, _b;
-        const isLiveMode = ((_b = (_a = paymentMethodsArray === null || paymentMethodsArray === void 0 ? void 0 : paymentMethodsArray[value]) === null || _a === void 0 ? void 0 : _a.paymentVendorConnection) === null || _b === void 0 ? void 0 : _b.isLiveMode);
-        if (isLiveMode === undefined) {
-            return false;
+        var _a;
+        const isLiveMode = (_a = activeMethod === null || activeMethod === void 0 ? void 0 : activeMethod.paymentVendorConnection) === null || _a === void 0 ? void 0 : _a.isLiveMode;
+        return 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 === null || activeMethod === void 0 ? void 0 : activeMethod.isHostedPaymentPage) === true &&
+        ((activeMethod === null || activeMethod === void 0 ? void 0 : activeMethod.providerType) === PaymentVendorFactoryEnum.ICheck ||
+            (activeMethod === null || activeMethod === void 0 ? void 0 : activeMethod.providerType) === PaymentVendorFactoryEnum.Paymentus);
+    // Clamp `value` if the enabled-methods list shrinks (e.g. discovery
+    // returned fewer methods than expected).
+    useEffect(() => {
+        if (enabledMethods.length === 0)
+            return;
+        if (value >= enabledMethods.length) {
+            setValue(0);
         }
-        return !isLiveMode;
-    }, [paymentMethodsArray, value]);
+    }, [enabledMethods.length, value]);
     /**
      * getPaymentMethodLabel
      *
@@ -326,64 +327,6 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
         const methodLabel = (paymentMethodLabels === null || paymentMethodLabels === void 0 ? void 0 : paymentMethodLabels[normalizedMethodName]) || method.name;
         return methodLabel;
     };
-    /**
-     * setPaymentMethodsEnabled
-     * take every paymentMethod (eCheck, credit card, etc) and verify if the payment methods are enabled or not
-     * @return {*}
-     */
-    const setPaymentMethodsEnabled = useCallback(async () => {
-        var _a;
-        // Filter out any falsy paymentMethod values first
-        const validPaymentMethods = paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.filter(Boolean);
-        // Use Promise.allSettled to handle both fulfilled and rejected promises
-        const results = await Promise.allSettled(validPaymentMethods === null || validPaymentMethods === void 0 ? void 0 : validPaymentMethods.map(async (paymentMethod) => {
-            var _a;
-            try {
-                const paymentMethodEnable = await getPaymentMethodInfo(paymentMethod.paymentMethodID);
-                const paymentVendorConnection = ((_a = paymentMethodEnable === null || paymentMethodEnable === void 0 ? void 0 : paymentMethodEnable.data) === null || _a === void 0 ? void 0 : _a.paymentVendorConnection) || null;
-                const providerType = paymentVendorConnection === null || paymentVendorConnection === void 0 ? void 0 : paymentVendorConnection.paymentVendorFactoryID;
-                const hostedPaymentPageSetup = (paymentVendorConnection === null || paymentVendorConnection === void 0 ? void 0 : paymentVendorConnection.hostedPaymentPageSetup.find((x) => x.useHostedPaymentPage)) || null;
-                const isHostedPaymentPage = (hostedPaymentPageSetup === null || hostedPaymentPageSetup === void 0 ? void 0 : hostedPaymentPageSetup.useHostedPaymentPage) || false;
-                let providerProps = {};
-                let hasReadPropertiesError = false;
-                let readPropertiesMessageError = null;
-                if (isHostedPaymentPage) {
-                    const { error, attributes } = stringToProps(hostedPaymentPageSetup === null || hostedPaymentPageSetup === void 0 ? void 0 : hostedPaymentPageSetup.hostedPaymentPageConfig);
-                    providerProps = Object.assign({ customCss: hostedPaymentPageSetup === null || hostedPaymentPageSetup === void 0 ? void 0 : hostedPaymentPageSetup.customCSS, attributes }, ((attributes === null || attributes === void 0 ? void 0 : attributes.baseUrl)
-                        ? { baseUrl: attributes === null || attributes === void 0 ? void 0 : attributes.baseUrl }
-                        : null));
-                    hasReadPropertiesError = error ? true : false;
-                    readPropertiesMessageError = error;
-                }
-                // Initialize returnObject with common properties
-                let returnObject = {
-                    paymentMethodID: paymentMethod.paymentMethodID,
-                    name: paymentMethod.name,
-                    enabled: (paymentMethodEnable === null || paymentMethodEnable === void 0 ? void 0 : paymentMethodEnable.status) === 200,
-                    data: (paymentMethodEnable === null || paymentMethodEnable === void 0 ? void 0 : paymentMethodEnable.status) === 200
-                        ? paymentMethodEnable.data
-                        : null,
-                    paymentVendorConnection,
-                    isHostedPaymentPage,
-                    providerType,
-                    providerProps,
-                    hasReadPropertiesError,
-                    readPropertiesMessageError,
-                };
-                return returnObject;
-            }
-            catch (error) {
-                console.error(`Error fetching payment method info for ${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.paymentMethodID}:`, error);
-                return null;
-            }
-        }));
-        // Filter out null results in case of errors
-        const filteredResults = results
-            .filter(result => result.status === 'fulfilled' && result.value !== null)
-            .map((result) => result.value) || null;
-        setPaymentMethodsArray(filteredResults);
-        setSelectedHostedPayment(((_a = filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.find((x) => x.enabled)) === null || _a === void 0 ? void 0 : _a.providerType) || null);
-    }, [paymentMethods]);
     /**
      * createHostedPaymentRequest
      *
@@ -471,6 +414,8 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
         if (typeof isHostedPayment !== 'boolean') {
             throw new Error(t('Invalid hosted payment flag'));
         }
+        console.log(`execute payment start`);
+        // console.log(body);
         const paymentMethodName = PaymentMethodTypeEnum === null || PaymentMethodTypeEnum === void 0 ? void 0 : PaymentMethodTypeEnum[paymentMethodId];
         if (!paymentMethodName) {
             throw new Error(t('Unknown payment method') +
@@ -517,28 +462,86 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
      */
     const submitPaymentForm = useCallback(async (formData) => {
         var _a, _b, _c;
+        var _d;
         if (!formData)
             return;
+        // Discovery still in flight or returned no payable methods — no method
+        // fields are mounted yet, so nothing validated and formData is empty.
+        // The internal button is disabled in this window, but external
+        // form-registry submit buttons can still land here.
+        if (loadingPaymentMethods || enabledMethods.length === 0)
+            return;
         setLoadingProcessPayment(true);
-        const currentTenantID = user === null || user === void 0 ? void 0 : user.currentTenantId;
+        // Payment-link tokens can expire between page load and submit; re-mint
+        // when the host provides a way to. Failure keeps the existing token.
+        if (refreshS2sToken) {
+            try {
+                const freshToken = await refreshS2sToken();
+                if (freshToken) {
+                    s2sTokenRef.current = freshToken;
+                }
+            }
+            catch (error) {
+                console.warn('refreshS2sToken failed; submitting with the existing token', error);
+            }
+        }
+        // Reactive backstop to the proactive refresh above: when a call is
+        // rejected with a 403 (how the Payment Portal reports an expired S2S
+        // token), re-mint the token and re-issue that call once. Never retries
+        // other statuses — a 500 from ProcessPayment is a real error and may
+        // mean the charge already went through.
+        const retryOnAuthError = async (call) => {
+            var _a;
+            try {
+                return await call();
+            }
+            catch (error) {
+                if (!refreshS2sToken || ((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status) !== 403)
+                    throw error;
+                let freshToken;
+                try {
+                    freshToken = await refreshS2sToken();
+                }
+                catch (_b) {
+                    throw error;
+                }
+                if (!freshToken)
+                    throw error;
+                s2sTokenRef.current = freshToken;
+                return call();
+            }
+        };
+        const currentTenantID = s2sTokenRef.current ? s2sTenantId : user === null || user === void 0 ? void 0 : user.currentTenantId;
         const paymentMethodId = selectedPaymentType;
         if (!currentTenantID || !paymentMethodId) {
-            onSubmitCompleted === null || onSubmitCompleted === void 0 ? void 0 : onSubmitCompleted(null, { error: true });
+            onSubmitCompleted === null || onSubmitCompleted === void 0 ? void 0 : onSubmitCompleted(null, {
+                error: true,
+                message: 'Missing tenant ID or payment method ID',
+            });
+            setLoadingProcessPayment(false);
+            return;
         }
+        console.log('started exectute payment');
         try {
-            const paymentMethod = await fetchPaymentMethodDetails(currentTenantID, paymentMethodId);
+            const paymentMethod = await retryOnAuthError(() => fetchPaymentMethodDetails(currentTenantID, paymentMethodId));
             const isHostedPayment = ((_c = (_b = (_a = paymentMethod.paymentVendorConnection) === null || _a === void 0 ? void 0 : _a.hostedPaymentPageSetup) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.useHostedPaymentPage) || false;
             const dataRequest = createDataRequest(formData, paymentMethod, isHostedPayment, paymentMethodId, selectedPaymentAccount);
-            const paymentResult = await executePayment(paymentMethodId, dataRequest, isHostedPayment);
+            const paymentResult = await retryOnAuthError(() => executePayment(paymentMethodId, dataRequest, isHostedPayment));
             onSubmitCompleted === null || onSubmitCompleted === void 0 ? void 0 : onSubmitCompleted(formData, paymentResult);
         }
         catch (error) {
-            throw new Error("Error processing payment: " + (error === null || error === void 0 ? void 0 : error.message));
+            // Route failures through onSubmitCompleted so consumers can react
+            // (previous behaviour threw from an async event handler -> unhandled rejection).
+            console.error('Error processing payment:', error);
+            onSubmitCompleted === null || onSubmitCompleted === void 0 ? void 0 : onSubmitCompleted(formData, {
+                error: true,
+                message: (_d = error === null || error === void 0 ? void 0 : error.message) !== null && _d !== void 0 ? _d : 'Error processing payment',
+            });
         }
         finally {
             setLoadingProcessPayment(false);
         }
-    }, [paymentFormStatus, createDataRequest, selectedPaymentType, user, selectedPaymentAccount]);
+    }, [createDataRequest, selectedPaymentType, user, selectedPaymentAccount, s2sTenantId, refreshS2sToken, executePayment, fetchPaymentMethodDetails, onSubmitCompleted, loadingPaymentMethods, enabledMethods]);
     /**
      * Handles the form submission for iCheck payments.
      *
@@ -548,51 +551,83 @@ export const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, pa
      *
      */
     const handleICheckPaymentFormStatus = useCallback(() => {
-        var _a;
-        if ((paymentFormStatus === null || paymentFormStatus === void 0 ? void 0 : paymentFormStatus.selectedHostedPayment) === PaymentVendorFactoryEnum.ICheck ||
-            (paymentFormStatus === null || paymentFormStatus === void 0 ? void 0 : paymentFormStatus.selectedHostedPayment) === PaymentVendorFactoryEnum.Paymentus && (formRef === null || formRef === void 0 ? void 0 : formRef.current)) {
-            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit();
+        const vendor = paymentFormStatus === null || paymentFormStatus === void 0 ? void 0 : paymentFormStatus.selectedHostedPayment;
+        const isAutoSubmitVendor = vendor === PaymentVendorFactoryEnum.ICheck ||
+            vendor === PaymentVendorFactoryEnum.Paymentus;
+        if (isAutoSubmitVendor && (formRef === null || formRef === void 0 ? void 0 : formRef.current)) {
+            formRef.current.submit();
         }
     }, [paymentFormStatus]);
     // #endregion
     // #region [Effects]
+    // Default the selected vendor to the first enabled method once discovery
+    // completes. Matches the previous behaviour from setPaymentMethodsEnabled.
     useEffect(() => {
-        setPaymentMethodsEnabled();
-    }, [paymentMethods]);
+        var _a;
+        if (!paymentMethodsArray)
+            return;
+        const firstEnabled = paymentMethodsArray.find((m) => m.enabled);
+        setSelectedHostedPayment((_a = firstEnabled === null || firstEnabled === void 0 ? void 0 : firstEnabled.providerType) !== null && _a !== void 0 ? _a : null);
+    }, [paymentMethodsArray]);
     useEffect(() => {
         onFormStatusChange === null || onFormStatusChange === void 0 ? void 0 : onFormStatusChange(paymentFormStatus);
         handleICheckPaymentFormStatus();
     }, [paymentFormStatus]);
+    // onSubmittingChange is intentionally omitted from deps; consumers may pass
+    // unstable references and we only want to fire when the window changes.
+    useEffect(() => {
+        onSubmittingChange === null || onSubmittingChange === void 0 ? void 0 : onSubmittingChange(loadingProcessPayment);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loadingProcessPayment]);
+    // Mirrors the internal submit button's disabled conditions so hosts with
+    // external submit buttons can gate them identically. Callback omitted from
+    // deps for the same unstable-reference reason as above.
+    const isReadyToSubmit = !loadingPaymentMethods &&
+        enabledMethods.length > 0 &&
+        (paymentFormStatus === null || paymentFormStatus === void 0 ? void 0 : paymentFormStatus.isValid) !== false;
+    useEffect(() => {
+        onReadyChange === null || onReadyChange === void 0 ? void 0 : onReadyChange(isReadyToSubmit);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isReadyToSubmit]);
     // #endregion
-    return (React.createElement(React.Fragment, null, loadingProcessPayment && (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',
-        } }, React.createElement(CircularProgress, { size: "3rem", color: "primary" }))), React.createElement(Form, { id: id, onSubmit: submitPaymentForm, autocomplete: "off", render: (params) => {
+    return (React.createElement(React.Fragment, null, React.createElement(Form, { id: id, onSubmit: submitPaymentForm, render: (params) => {
+            var _a, _b;
             formRef.current = params === null || params === void 0 ? void 0 : params.form;
-            return (React.createElement(React.Fragment, null, React.createElement(Box, { display: "flex", flexDirection: "column", style: { gap: '10px', flex: 1 } }, childrenPosition === "before" && children, React.createElement(Box, { display: "flex", flexDirection: "column", padding: "0" }, React.createElement(Tabs, { value: value, onChange: handleChange, "aria-label": t("(payment method tabs") }, paymentMethodsArray === null || paymentMethodsArray === void 0 ? void 0 : paymentMethodsArray.map((method, index) => (
-            // @ts-ignore
-            React.createElement(Tooltip, { key: method.paymentMethodID, title: !method.enabled ? t("This Payment method is currently unavailable") : "" }, React.createElement(Tab, { key: method.paymentMethodID, 
-                //@ts-ignore
-                icon: getPaymentMethodIcon(method.name, value === index, method.enabled, theme), label: getPaymentMethodLabel(method), "aria-label": getPaymentMethodLabel(method), className: classes.tab }))))), React.createElement(Card, { className: classes.cardFullWidth }, React.createElement(CardContent, { className: classes.paddingZero }, (loading || loadingPaymentMethods) && React.createElement(LinearProgress, null), React.createElement(Grow, Object.assign({ in: isSandBoxMode, style: { transformOrigin: '0 0 0', display: isSandBoxMode ? 'flex' : 'none' } }, (true ? { timeout: 800 } : {})), React.createElement(Box, { 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',
-                } }, React.createElement(Typography, { variant: "subtitle2", style: { width: '100%', textAlign: 'center' } }, t('You are currently in test mode using a Sandbox account')))), React.createElement(LayoutUnit, { unit: "xxs" }), paymentMethodsArray === null || paymentMethodsArray === void 0 ? void 0 : paymentMethodsArray.map((method, index) => (
-            // @ts-ignore
-            React.createElement(TabPanel, { value: value, index: index, key: method.paymentMethodID }, renderPaymentMethodForm(method)))), submit &&
-                React.createElement(FluentButton, { variant: "contained", color: "secondary", disabled: false, type: "submit", className: classes.submitControl }, loading && React.createElement(CircularProgress, { size: 24, className: classes.buttonProgress }), React.createElement(Typography, null, t('Save')))))), childrenPosition === "after" && children, typeof render === 'function' ? render(params) : render), childrenPosition === "outside" && children));
+            const hasMultipleMethods = enabledMethods.length > 1;
+            // Discovery has completed and there are no enabled methods.
+            const hasNoMethods = paymentMethodsArray !== undefined &&
+                enabledMethods.length === 0 &&
+                !loadingPaymentMethods;
+            // RFF `submitting` flips while the Promise returned from
+            // submitPaymentForm is in flight. loadingProcessPayment is our own
+            // signal for the same window. Either way, lock the UI so the user
+            // can't change values or switch methods mid-submit.
+            const isSubmitting = Boolean(params === null || params === void 0 ? void 0 : params.submitting) || loadingProcessPayment;
+            return (React.createElement(React.Fragment, null, React.createElement(UdpFlexbox, { direction: "column", gap: "md", wrap: "nowrap" }, childrenPosition === "before" && children, (loading || loadingPaymentMethods) && React.createElement(UdpProgressBar, null), hasNoMethods && (React.createElement(UdpMessageBar, { intent: "error" }, t("No payment methods are available for this account"))), showSandboxBanner && isSandBoxMode && (React.createElement(UdpMessageBar, { intent: "warning" }, t("You are currently in test mode using a Sandbox account"))), hasMultipleMethods && methodPicker === 'tabs' && (React.createElement(UdpTablist, { size: "small", disabled: isSubmitting, activeId: String((_a = activeMethod === null || activeMethod === void 0 ? void 0 : activeMethod.paymentMethodID) !== null && _a !== void 0 ? _a : ''), 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);
+                    }
+                } })), hasMultipleMethods && methodPicker === 'radio' && (React.createElement(UdpRadioGroup, { label: t("Payment method"), name: "paymentMethod", disabled: isSubmitting, includeErrorPadding: false, value: String((_b = activeMethod === null || activeMethod === void 0 ? void 0 : activeMethod.paymentMethodID) !== null && _b !== void 0 ? _b : ''), 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);
+                    }
+                } })), React.createElement("div", { ref: methodBoxRef }, activeMethod && renderPaymentMethodForm(activeMethod, isSubmitting)), submit && (React.createElement(UdpFlexbox, { direction: "row", gap: "sm", align: "center", wrap: "nowrap" }, actionsStart, !isAutoSubmitHostedMethod && (React.createElement(UdpButton, { type: "submit", form: id, appearance: "primary", loading: loading || loadingProcessPayment, 
+                // Not actionable until discovery resolves a payable method
+                // (no fields mounted yet — a click would submit an empty
+                // form), nor in hosted-iframe mode until the vendor iframe
+                // reports a token (isValid). Tokenization is driven inside
+                // the iframe, so this cannot deadlock the flow.
+                disabled: loadingPaymentMethods || hasNoMethods || (paymentFormStatus === null || paymentFormStatus === void 0 ? void 0 : paymentFormStatus.isValid) === false }, actionLabel || t('Save'))))), childrenPosition === "after" && children, typeof render === 'function' ? render(params) : render), childrenPosition === "outside" && children));
         } })));
 };
 //# sourceMappingURL=PaymentForm.js.map