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

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentForm.mjs","names":["React","FC","useRef","useEffect","useMemo","useState","useCallback","makeStyles","useTheme","Tabs","Tab","CardContent","Card","LinearProgress","Badge","Tooltip","Grow","Box","Typography","CircularProgress","Form","useTranslation","FluentButton","CreditCardForm","BankAccountForm","CreditCardIcon","BankIcon","CashForm","CashIcon","DisabledOverlay","CheckIcon","LayoutUnit","TabPanel","useAxiosGet","ConfigService","stringToProps","apiMutate","useUser","HostedPaymentPageSetup","IPaymentMethod","IPaymentMethodTab","PaymentDetails","PaymentVendorFactoryEnum","PaymentMethodTypeEnum","grey","PaymentAccount","useStyles","theme","palette","secondary","main","spacing","arg0","tab","color","textTransform","minWidth","width","cardFullWidth","padding","paddingZero","submitControl","marginLeft","buttonProgress","position","top","left","marginTop","dropDownPaymentsCard","assetTypeLabel","formControl","PaymentMethodProps","id","activeTab","externalId","paymentAccounts","paymentDetails","bankAccountTypes","loading","onTabChange","event","ChangeEvent","paymentMethodTab","onFormStatusChange","paymentFormResult","onSubmitCompleted","FormEvent","HTMLFormElement","result","submit","presetDataRequest","formData","paymentMethod","isHostedPayment","children","childrenPosition","actionLabel","render","paymentMethodIcons","key","ElementType","DEFAULT_ACCOUNT_TYPES","name","value","PAYMENT_METHODS","CREDIT_CARD","CASH","E_CHECK","DEBIT_CARD","getPaymentMethodIcon","paymentMethodName","isSelected","isEnabled","IconComponent","PaymentForm","classes","user","t","setValue","formRef","paymentFormStatus","setPaymentFormStatus","paymentMethodsArray","setPaymentMethodsArray","selectedHostedPayment","setSelectedHostedPayment","selectedPaymentType","setSelectedPaymentType","CreditCard","loadingProcessPayment","setLoadingProcessPayment","selectedPaymentAccount","setSelectedPaymentAccount","data","paymentMethods","loadingPaymentMethods","pgV1ApiUrl","getPaymentMethodInfo","paymentMethodID","currentTenantId","method","error","Error","message","fetchPaymentMethod","currentTenantID","paymentMethodId","fetchPaymentMethodDetails","tenantID","methodId","Promise","executePaymentPG","paymentType","requestBody","executeHostedPaymentPG","path","paymentTokenId","paymentMethodLabels","handleChange","newValue","preventDefault","selectedPaymentMethod","paymentVendorConnection","paymentVendorFactoryID","handleStatusChange","renderPaymentMethodForm","isDisabled","enabled","overlayMessage","opacity","toLowerCase","isSandBoxMode","isLiveMode","undefined","getPaymentMethodLabel","normalizedMethodName","replace","methodLabel","setPaymentMethodsEnabled","validPaymentMethods","filter","Boolean","results","allSettled","map","paymentMethodEnable","providerType","hostedPaymentPageSetup","find","x","useHostedPaymentPage","isHostedPaymentPage","providerProps","hasReadPropertiesError","readPropertiesMessageError","attributes","hostedPaymentPageConfig","customCss","customCSS","baseUrl","returnObject","status","console","filteredResults","createHostedPaymentRequest","baseRequest","vendorFactoryID","vendorRequest","Fiserv","HostedPageToken","payload","token","expiry","Expiry","ICheck","isValid","errorMessage","responseObjet","JSON","parse","ResponseData","transactionResponse","Paymentus","paymentTokenID","NameOnAccount","CardHolderName","Token","ExpiryDate","PaymentTokenId","request","PaymentVendorFactoryID","createNonHostedPaymentRequest","dataRequest","Object","assign","setCreditCardAttr","eCheck","setECheckAttr","createDataRequest","executePayment","response","expireMonth","expiryDate","split","expireYear","expirationDate","CardNumber","cardNumber","ExpirationDate","SecurityCode","cvv","routingNumber","accountNumber","submitPaymentForm","paymentResult","handleICheckPaymentFormStatus","current","height","backgroundColor","zIndex","display","alignItems","justifyContent","params","form","gap","flex","index","transformOrigin","timeout","boxSizing","background","borderWidth","borderStyle","borderColor","textAlign"],"sources":["../../../../src/utilities/form/paymentForm/PaymentForm.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, useMemo, useState, useCallback } from 'react';\nimport {\n  makeStyles,\n  useTheme,\n  Tabs,\n  Tab,\n  CardContent,\n  Card,\n  LinearProgress,\n  Badge,\n  Tooltip,\n  Grow\n} from '@material-ui/core';\nimport { Box } from '../../../UI/Box';\nimport { Typography } from '../../../UI/dataDisplay/typography/Typography';\nimport { CircularProgress } from '../../../UI/loading/CircularProgress';\nimport { Form } from '../Form';\nimport { useTranslation } from 'react-i18next';\nimport { FluentButton } from '../../../UI/inputs/buttons/FluentButton'\nimport { CreditCardForm } from './CreditCardForm';\nimport { BankAccountForm } from './BankAccountForm';\nimport { CreditCardIcon } from './CreditCardIcon';\nimport { BankIcon } from './BankIcon';\nimport { CashForm } from './CashForm';\nimport { CashIcon } from './CashIcon';\nimport { DisabledOverlay } from './DisableOverlay';\nimport { CheckIcon } from './CheckIcon';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { TabPanel } from './TabPanel';\nimport { useAxiosGet } from '../../useAxiosGet';\nimport { ConfigService } from '../../../configService';\nimport { stringToProps } from '../../stringUtils';\nimport { apiMutate } from '../../useAxiosMutate';\nimport { useUser } from '../../auth/useUser';\nimport { HostedPaymentPageSetup, IPaymentMethod, IPaymentMethodTab, PaymentDetails } from './AccountPayment.model';\nimport { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';\nimport { PaymentMethodTypeEnum } from '../../../enums/paymentMethodTypeEnum';\nimport grey from '@material-ui/core/colors/grey';\nimport { PaymentAccount } from './PaymentAccount.model';\n\nconst useStyles = makeStyles((theme: { palette: { secondary: { main: any; }; }; spacing: (arg0: number) => any; }) => ({\n  tab: {\n    color: grey[800],\n    '&.Mui-selected': {\n      color: theme.palette.secondary.main,\n    },\n    textTransform: 'none',\n    minWidth: 115,\n    width: 115,\n  },\n  cardFullWidth: {\n    width: \"100%\",\n    minWidth: \"100%\",\n    padding: 0,\n  },\n  paddingZero: {\n    padding: 0,\n  },\n  submitControl: {\n    marginLeft: '50px',\n  },\n  buttonProgress: {\n    color: theme.palette.secondary.main,\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: -12,\n    marginLeft: -12,\n  },\n  dropDownPaymentsCard: {\n    padding: '20px 12px 0px 12px',\n  },\n  assetTypeLabel: {\n    top: theme.spacing(-0.7),\n  },\n  formControl: {\n    width: '100%',\n    marginTop: '-15px',\n  },\n}));\n\nexport interface PaymentMethodProps {\n  id: string;\n  activeTab?: number;\n  externalId?: string | number;\n  paymentAccounts?: any[];\n  paymentDetails: PaymentDetails;\n  bankAccountTypes?: any[];\n  loading: boolean;\n  onTabChange: (event: React.ChangeEvent<{}>, paymentMethodTab: any) => void;\n  onFormStatusChange?: (paymentFormResult: any) => void;\n  onSubmitCompleted?: (event: React.FormEvent<HTMLFormElement>, result: any) => void;\n  submit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  presetDataRequest: (formData: any, paymentMethod: any, isHostedPayment: boolean) => any;\n  children?: any;\n  childrenPosition?: \"before\" | \"after\" | \"outside\";\n  actionLabel?: string;\n  render?: any;\n}\n\n/** paymentMethodIcons @type {*} */\nconst paymentMethodIcons: { [key: string]: React.ElementType } = {\n  'Credit Card': CreditCardIcon,\n  'Cash': CashIcon,\n  'eCheck': BankIcon,\n  'Debit Card': CheckIcon,\n};\n\nconst DEFAULT_ACCOUNT_TYPES = [\n  { name: 'Checking', value: 'checking' },\n  { name: 'Savings', value: 'savings' },\n];\n\nconst PAYMENT_METHODS = {\n  CREDIT_CARD: 'credit card',\n  CASH: 'cash',\n  E_CHECK: 'echeck',\n  DEBIT_CARD: 'debit card'\n};\n\n/**\n * getPaymentMethodIcon\n *\n * @param {string} paymentMethodName\n * @param {boolean} isSelected\n * @param {boolean} isEnabled\n * @param {*} theme\n * @return {*}\n */\nconst getPaymentMethodIcon = (paymentMethodName: string, isSelected: boolean, isEnabled: boolean, theme: any): any => {\n  // Determine the icon color based on the selection and enablement status\n  const color = isEnabled ? (isSelected ? theme.palette.secondary.main : grey[800]) : grey[400];\n\n  // Find the corresponding icon component from the mapping\n  const IconComponent = paymentMethodIcons[paymentMethodName];\n\n  // Return null if no matching icon is found (unknown payment method)\n  if (!IconComponent) return null;\n\n  return (\n    <Badge color=\"secondary\" badgeContent={!isEnabled ? \"!\" : null}>\n      <IconComponent color={color} />\n    </Badge>\n  );\n};\n\n/**\n * PaymentForm Component\n *\n * This component provides a user interface for selecting and handling different payment methods.\n * It allows users to switch between available payment methods using tabs and handles the form submission process.\n * Each payment method has its own form component that is displayed based on the selected tab.\n *\n * Props:\n *   @param {PaymentMethodProps} props - Object containing the following properties:\n *     @param {string} id - Unique identifier for the payment form.\n *     @param {number} [activeTab=0] - The index of the currently active tab. Defaults to 0.  [OPTIONAL]\n *     @param {any[]} [paymentAccounts] - Array of payment accounts associated with the user. [OPTIONAL]\n *     @param {PaymentDetails} paymentDetails - Object containing details about the customer's payment information.\n *     @param {any[]} [bankAccountTypes=DEFAULT_ACCOUNT_TYPES] - Array of available bank account types, with a default value.\n *     @param {boolean} loading - Boolean flag indicating if asynchronous operations like data fetching are in progress.\n *     @param {Function} onTabChange - Function to be called when the active tab changes.\n *     @param {Function} [onFormStatusChange] - Optional function to handle status changes during form interactions.\n *     @param {Function} [onSubmitCompleted] - Optional function to be called upon successful form submission.\n *     @param {Function} presetDataRequest - Function to prepare the data request for payment processing.\n *     @param {Function} [submit] - Optional function to be called on form submission.\n *     @param {any} [children] - Optional elements to be rendered inside the form.\n *     @param {\"before\" | \"after\" | \"outside\"} [childrenPosition=\"before\"] - Position of the children elements relative to the form.\n *     @param {string} [actionLabel] - Optional label for the form action button.\n *     @param {any} [render] - Optional render function for custom rendering inside the component.\n *\n * Usage:\n * The component renders tabs to switch between different payment methods and handles form interactions\n * for submitting payments. It integrates with Material-UI components to render the form and uses React hooks\n * for managing state, such as the currently active tab and form interaction data.\n *\n * The component uses the `useMemo` hook to optimize rendering performance and to handle the memoization of\n * computed payment fields. It ensures that the form submission process is smooth, even for hosted payments.\n *\n * Each payment method form (e.g., CreditCardForm, eCheckForm, etc.) is conditionally rendered based on the\n * currently selected payment method, ensuring a consistent user experience.\n *\n * Example:\n * <PaymentForm\n *   id=\"paymentForm\"\n *   activeTab={0}\n *   paymentAccounts={accounts}\n *   paymentDetails={paymentDetails}\n *   bankAccountTypes={accountTypes}\n *   loading={isLoading}\n *   onTabChange={handleTabChange}\n *   onFormStatusChange={handleStatusChange}\n *   presetDataRequest={createDataRequest}\n *   onSubmitCompleted={handleSubmitCompleted}\n *   actionLabel=\"Enter Card Details\"\n *   submit={handleSubmit}\n * />\n *\n * Note:\n * This component should be used within a React environment that supports hooks and functional components.\n * It relies on Material-UI for UI components and theming.\n */\nexport const PaymentForm: FC<PaymentMethodProps> = ({\n  id,\n  activeTab = 0,\n  externalId,\n  paymentAccounts,\n  paymentDetails,\n  bankAccountTypes = DEFAULT_ACCOUNT_TYPES,\n  loading,\n  presetDataRequest,\n  onTabChange,\n  onFormStatusChange,\n  onSubmitCompleted,\n  submit,\n  children,\n  childrenPosition = \"before\",\n  actionLabel,\n  render\n}: any): any => {\n  const classes = useStyles();\n  const theme = useTheme();\n  const user = useUser();\n  const { t } = useTranslation();\n  const [value, setValue] = useState(activeTab);\n  const formRef = useRef<any>(null);\n\n  const [paymentFormStatus, setPaymentFormStatus] = useState<any>(null);\n  const [paymentMethodsArray, setPaymentMethodsArray] = useState<IPaymentMethodTab[]>();\n  const [selectedHostedPayment, setSelectedHostedPayment] = useState<PaymentVendorFactoryEnum | null>(null);\n  const [selectedPaymentType, setSelectedPaymentType] = useState(PaymentMethodTypeEnum.CreditCard);\n  const [loadingProcessPayment, setLoadingProcessPayment] = useState<boolean>(false);\n  const [selectedPaymentAccount, setSelectedPaymentAccount] = useState<PaymentAccount | null>(null);\n\n  // #region [API Calls]\n\n  /**\n   * API call to get the payment accounts (Credit cards, Bank accounts) associated with the account\n   */\n  const [{ data: paymentMethods, loading: loadingPaymentMethods }]: any =\n    useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentMethod`, {}, false);\n\n  /**\n   *  API call to get the payment method information and determine if the payment method is enabled or not\n   *\n   * @param {*} paymentMethodID : Credit card: 4001, Bank account: 4002, eCheck: 4004\n   * @return {*}\n   */\n  const getPaymentMethodInfo = useCallback(\n    async (paymentMethodID: string | number) => {\n      if (!paymentMethodID || !user?.currentTenantId) {\n        return;\n      }\n\n      try {\n        const result = await apiMutate(\n          ConfigService.pgV1ApiUrl,\n          `AppPaymentVendor/PaymentMethod/${paymentMethodID}`,\n          {\n            method: 'GET',\n          },\n          {}\n        );\n\n        return result;\n      } catch (error: any) {\n        throw new Error(`Error getting payment method info: ${error?.message}`);\n      }\n    },\n    [user]\n  );\n\n  /**\n   * API call to fetchPaymentMethod\n   *\n   * @param {string} currentTenantID\n   * @param {string} paymentMethodId\n   * @return {*}\n   */\n  const fetchPaymentMethod = useCallback(\n    async (currentTenantID: string, paymentMethodId: string | number) => {\n      if (!currentTenantID || !paymentMethodId) {\n        return null;\n      }\n\n      return apiMutate(\n        ConfigService.pgV1ApiUrl,\n        `AppPaymentVendor/PaymentMethod/${paymentMethodId}`,\n        {\n          method: 'GET',\n        },\n        {}\n      );\n    },\n    []\n  );\n\n  /**\n   * fetchPaymentMethodDetails\n   *\n   * @param {*} tenantID\n   * @param {*} methodId\n   * @return {*}\n   */\n  const fetchPaymentMethodDetails = useCallback(\n    async (tenantID: any, methodId: any): Promise<any> => {\n      const result = await fetchPaymentMethod(tenantID, methodId);\n      const paymentMethod = result?.data;\n\n      if (!paymentMethod) {\n        throw new Error(`${t('Payment method configuration not found')}: ${methodId}`);\n      }\n\n      return paymentMethod;\n    },\n    [fetchPaymentMethod]\n  );\n\n  /**\n   * executePaymentPG\n   *\n   * @param {string} paymentType\n   * @param {any} requestBody\n   * @return {*}\n   */\n  const executePaymentPG = useCallback(\n    async (paymentType: string, requestBody: any) => {\n      if (!paymentType || !requestBody) {\n        return null;\n      }\n\n      return apiMutate(\n        ConfigService.pgV1ApiUrl,\n        `ProcessPayment/${paymentType}`,\n        {\n          method: 'POST',\n          data: requestBody,\n        },\n        {}\n      );\n    },\n    []\n  );\n\n  /**\n   * executeHostedPaymentPG\n   *\n   * @param {string} paymentType\n   * @param {any} requestBody\n   * @return {*}\n   */\n  const executeHostedPaymentPG = useCallback(\n    async (paymentType: string, requestBody: any) => {\n      if (!paymentType || !requestBody) {\n        return null;\n      }\n\n      const path = requestBody?.paymentTokenId ?\n        `ProcessPayment/${paymentType}Profile` :\n        `ProcessHostedPaymentPagePayment/${paymentType}`;\n\n      return apiMutate(\n        ConfigService.pgV1ApiUrl,\n        path,\n        {\n          method: 'POST',\n          data: requestBody,\n        },\n        {}\n      );\n    },\n    []\n  );\n\n  // #endregion\n\n  // #region [Methods]\n\n  const paymentMethodLabels: { [key: string]: string } = useMemo(() => ({\n    \"creditcard\": t(\"Credit Card\"),\n    \"debitcard\": t(\"Debit Card\"),\n    \"echeck\": t(\"eCheck\"),\n    \"check\": t(\"Check\"),\n    \"cash\": t(\"Cash\")\n  }), [t]);\n\n  /**\n   * handleChange\n   *\n   * @param {React.ChangeEvent<{}>} event\n   * @param {number} newValue\n   */\n  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {\n    event.preventDefault();\n\n    setValue(newValue);\n\n    const selectedPaymentMethod = paymentMethodsArray?.[newValue];\n\n    // Set selected payment method and hosted payment type\n    setSelectedHostedPayment(selectedPaymentMethod?.paymentVendorConnection?.paymentVendorFactoryID as PaymentVendorFactoryEnum | null);\n    setSelectedPaymentType(selectedPaymentMethod?.paymentMethodID as PaymentMethodTypeEnum);\n\n    onTabChange(event, selectedPaymentMethod);\n  };\n\n  const handleStatusChange = (paymentFormStatus: any): void => {\n    setPaymentFormStatus(paymentFormStatus);\n    onFormStatusChange?.(paymentFormStatus);\n  }\n\n  /**\n   * useCallback()\n   * renderPaymentMethodForm\n   *\n   * @param {any} method\n   * @return {*}\n   */\n  const renderPaymentMethodForm = useCallback((method: any) => {\n    const isDisabled = !method.enabled;\n    const overlayMessage = t(\"This Payment method is currently unavailable\");\n\n    return (\n      <div style={{ position: 'relative' }}>\n        {isDisabled && <DisabledOverlay message={overlayMessage} />}\n        <div style={{ opacity: isDisabled ? 0.5 : 1 }}>\n          {method?.name?.toLowerCase() === PAYMENT_METHODS.CREDIT_CARD && <CreditCardForm onStatusChange={handleStatusChange} paymentDetails={paymentDetails} externalId={externalId} setSelectedPaymentAccount={setSelectedPaymentAccount} actionLabel={actionLabel} {...method} />}\n          {method?.name?.toLowerCase() === PAYMENT_METHODS.CASH && <CashForm onStatusChange={handleStatusChange} paymentDetails={paymentDetails} {...method} />}\n          {method?.name?.toLowerCase() === PAYMENT_METHODS.E_CHECK && <BankAccountForm bankAccountTypes={bankAccountTypes} onStatusChange={handleStatusChange} paymentDetails={paymentDetails} externalId={externalId} setSelectedPaymentAccount={setSelectedPaymentAccount} actionLabel={actionLabel} {...method} />}\n          {method?.name?.toLowerCase() === PAYMENT_METHODS.DEBIT_CARD && <CreditCardForm onStatusChange={handleStatusChange} paymentDetails={paymentDetails} {...method} />} {/*TODO:; Implement Debit Card Form */}\n        </div>\n      </div>\n    );\n  }, [paymentDetails, bankAccountTypes]);\n\n  /**\n   * isLiveMode\n   *\n   * @return {*}\n   */\n  const isSandBoxMode = useMemo(() => {\n    const isLiveMode = (paymentMethodsArray?.[value]?.paymentVendorConnection?.isLiveMode)\n\n    if (isLiveMode === undefined) {\n      return false;\n    }\n\n    return !isLiveMode;\n  }, [paymentMethodsArray, value]);\n\n  /**\n   * getPaymentMethodLabel\n   *\n   * @param {*} method\n   * @return {*}\n   */\n  const getPaymentMethodLabel = (method: { name: string; }) => {\n    const normalizedMethodName = method?.name?.toLowerCase().replace(/\\s+/g, '') || '';\n    const methodLabel = paymentMethodLabels?.[normalizedMethodName as keyof typeof paymentMethodLabels] || method.name;\n\n    return methodLabel;\n  }\n\n  /**\n   * setPaymentMethodsEnabled\n   * take every paymentMethod (eCheck, credit card, etc) and verify if the payment methods are enabled or not\n   * @return {*}\n   */\n  const setPaymentMethodsEnabled = useCallback(async () => {\n    // Filter out any falsy paymentMethod values first\n    const validPaymentMethods = paymentMethods?.filter(Boolean);\n\n    // Use Promise.allSettled to handle both fulfilled and rejected promises\n    const results = await Promise.allSettled(\n      validPaymentMethods?.map(async (paymentMethod: IPaymentMethod) => {\n        try {\n          const paymentMethodEnable = await getPaymentMethodInfo(\n            paymentMethod.paymentMethodID\n          );\n          const paymentVendorConnection =\n            paymentMethodEnable?.data?.paymentVendorConnection || null;\n          const providerType =\n            paymentVendorConnection?.paymentVendorFactoryID as PaymentVendorFactoryEnum | null;\n          const hostedPaymentPageSetup =\n            paymentVendorConnection?.hostedPaymentPageSetup.find(\n              (x: HostedPaymentPageSetup) => x.useHostedPaymentPage\n            ) || null;\n          const isHostedPaymentPage =\n            hostedPaymentPageSetup?.useHostedPaymentPage || false;\n\n          let providerProps = {};\n          let hasReadPropertiesError = false;\n          let readPropertiesMessageError = null;\n\n          if (isHostedPaymentPage) {\n            const { error, attributes } = stringToProps(\n              hostedPaymentPageSetup?.hostedPaymentPageConfig\n            );\n\n            providerProps = {\n              customCss: hostedPaymentPageSetup?.customCSS,\n              attributes,\n              ...(attributes?.baseUrl\n                ? { baseUrl: attributes?.baseUrl }\n                : null),\n            };\n\n            hasReadPropertiesError = error ? true : false;\n            readPropertiesMessageError = error;\n          }\n\n          // Initialize returnObject with common properties\n          let returnObject: any = {\n            paymentMethodID: paymentMethod.paymentMethodID,\n            name: paymentMethod.name,\n            enabled: paymentMethodEnable?.status === 200,\n            data:\n              paymentMethodEnable?.status === 200\n                ? paymentMethodEnable.data\n                : null,\n            paymentVendorConnection,\n            isHostedPaymentPage,\n            providerType,\n            providerProps,\n            hasReadPropertiesError,\n            readPropertiesMessageError,\n          };\n\n          return returnObject;\n        } catch (error) {\n          console.error(\n            `Error fetching payment method info for ${paymentMethod?.paymentMethodID}:`,\n            error\n          );\n          return null;\n        }\n      })\n    );\n\n    // Filter out null results in case of errors\n    const filteredResults = results\n      .filter(result => result.status === 'fulfilled' && result.value !== null)\n      .map((result: any) => result.value) || null;\n\n    setPaymentMethodsArray(filteredResults as IPaymentMethodTab[]);\n    setSelectedHostedPayment(filteredResults?.find((x: IPaymentMethodTab) => x.enabled)?.providerType || null);\n\n  }, [paymentMethods]);\n\n  /**\n   * createHostedPaymentRequest\n   *\n   * @param {*} baseRequest\n   * @param {*} paymentMethod\n   * @return {*}\n   */\n  const createHostedPaymentRequest = useCallback(\n    (baseRequest: any, paymentMethod: any, paymentMethodId: string | number, selectedPaymentAccount: PaymentAccount | null): any => {\n      const vendorFactoryID =\n        paymentMethod.paymentVendorConnection?.paymentVendorFactoryID;\n      let vendorRequest = {};\n\n      switch (vendorFactoryID) {\n        case PaymentVendorFactoryEnum.Fiserv:\n          vendorRequest = {\n            HostedPageToken:\n              paymentFormStatus?.payload?.token ||\n              paymentFormStatus?.payload?.message,\n            ...(paymentFormStatus?.payload?.expiry && {\n              Expiry: paymentFormStatus?.payload?.expiry,\n            }),\n          };\n          break;\n        case PaymentVendorFactoryEnum.ICheck:\n          if (!paymentFormStatus?.isValid) {\n            throw new Error(\n              `${t('Payment error. Please check the form and try again')} ${paymentFormStatus?.errorMessage}`\n            );\n          }\n          const responseObjet = JSON.parse(paymentFormStatus?.payload);\n\n          vendorRequest = {\n            ResponseData: responseObjet?.transactionResponse,\n          };\n          break;\n        case PaymentVendorFactoryEnum.Paymentus:\n          const paymentTokenId = selectedPaymentAccount ? selectedPaymentAccount?.paymentTokenID : null;\n\n          /* Paymentus uses a PaymentTokenId like an a Payment Account */\n          vendorRequest = {\n            NameOnAccount: paymentFormStatus?.payload?.CardHolderName,\n            HostedPageToken: paymentFormStatus?.payload?.Token,\n            ...(paymentFormStatus?.payload?.ExpiryDate && {\n              Expiry: paymentFormStatus?.payload?.ExpiryDate,\n            }),\n            ...(paymentTokenId && { PaymentTokenId: paymentTokenId }),\n          };\n          break;\n        default:\n          break;\n      }\n      const request = {\n        ...baseRequest,\n        PaymentVendorFactoryID: vendorFactoryID,\n        ...vendorRequest,\n      };\n\n      return request;\n    },\n    [paymentFormStatus]\n  );\n\n  /**\n   * createNonHostedPaymentRequest\n   *\n   * @param {*} baseRequest\n   * @param {*} formData\n   * @return {*}\n   */\n  const createNonHostedPaymentRequest = useCallback(\n    (baseRequest: any, formData: any): any => {\n      let dataRequest = { ...baseRequest };\n\n      if (selectedPaymentType === PaymentMethodTypeEnum.CreditCard) {\n        Object.assign(dataRequest, setCreditCardAttr(formData));\n      } else if (selectedPaymentType === PaymentMethodTypeEnum.eCheck) {\n        Object.assign(dataRequest, setECheckAttr(formData));\n      }\n      return dataRequest;\n    },\n    [selectedPaymentType]\n  );\n\n  /**\n   * createDataRequest\n   *\n   * @param {*} formData\n   * @param {*} paymentMethod\n   * @param {*} isHostedPayment\n   * @return {*}\n   */\n  const createDataRequest = useCallback(\n    (formData: any, paymentMethod: any, isHostedPayment: any, paymentMethodId: string | number, selectedPaymentAccount: PaymentAccount | null): any => {\n      const baseRequest = presetDataRequest(formData, paymentMethod, isHostedPayment);\n\n      return isHostedPayment\n        ? createHostedPaymentRequest(baseRequest, paymentMethod, paymentMethodId, selectedPaymentAccount)\n        : createNonHostedPaymentRequest(baseRequest, formData);\n    },\n    [paymentFormStatus, user, presetDataRequest, paymentDetails, selectedPaymentType]\n  );\n\n  /**\n   * executePayment\n   * Executes the payment process based on the payment method and request data.\n   *\n   * @param {*} paymentMethodId The ID of the payment method.\n   * @param {*} dataRequest The request data for the payment.\n   * @param {boolean} isHostedPayment Indicates if the payment is a hosted payment.\n   * @return {*} The result of the payment execution.\n   */\n  const executePayment = useCallback(\n    async (\n      paymentMethodId: any,\n      dataRequest: any,\n      isHostedPayment: boolean\n    ): Promise<any> => {\n      if (!paymentMethodId || !dataRequest) {\n        throw new Error(\n          t('Invalid payment data')\n        );\n      }\n      if (typeof isHostedPayment !== 'boolean') {\n        throw new Error(\n          t('Invalid hosted payment flag')\n        );\n      }\n\n      const paymentMethodName = PaymentMethodTypeEnum?.[paymentMethodId];\n\n      if (!paymentMethodName) {\n        throw new Error(\n          t('Unknown payment method') +\n          `: ${paymentMethodId}`\n        );\n      }\n\n      const response = isHostedPayment\n        ? await executeHostedPaymentPG(paymentMethodName, dataRequest)\n        : await executePaymentPG(paymentMethodName, dataRequest);\n\n      return response?.data || null;\n    },\n    [executePaymentPG, executeHostedPaymentPG]\n  );\n\n  /**\n   * setCreditCardAttr\n   *\n   * @param {*} formData\n   * @param {string} currentTenantID\n   * @param {IPaymentMethod} paymentMethod\n   * @return {*}\n   */\n  const setCreditCardAttr = (formData: any) => {\n    const expireMonth = formData.expiryDate.split('/')?.[0];\n    const expireYear = formData.expiryDate.split('/')?.[1];\n    const expirationDate = `20${expireYear}-${expireMonth}-01`;\n\n    return {\n      CardNumber: formData.cardNumber.replace(/\\s/g, ''),\n      ExpirationDate: expirationDate,\n      SecurityCode: formData.cvv,\n    };\n  };\n\n  /**\n   * setECheckAttr\n   * @param {*} formData\n   */\n  const setECheckAttr = (formData: any) => ({\n    routingNumber: formData.routingNumber.replace(/\\s/g, ''),\n    accountNumber: formData.accountNumber.replace(/\\s/g, ''),\n  });\n\n  // #endregion\n\n  // #region [Submit]\n\n  /**\n   * submitPaymentForm\n   * Processes the payment form submission.\n   * @param {*} formData The form data.\n   */\n  const submitPaymentForm = useCallback(\n    async (formData: any): Promise<void> => {\n      if (!formData) return;\n\n      setLoadingProcessPayment(true);\n\n      const currentTenantID = user?.currentTenantId;\n      const paymentMethodId = selectedPaymentType;\n\n      if (!currentTenantID || !paymentMethodId) {\n        onSubmitCompleted?.(null, { error: true });\n      }\n\n      try {\n        const paymentMethod = await fetchPaymentMethodDetails(\n          currentTenantID,\n          paymentMethodId\n        );\n        const isHostedPayment =\n          paymentMethod.paymentVendorConnection?.hostedPaymentPageSetup?.[0]\n            ?.useHostedPaymentPage || false;\n\n        const dataRequest = createDataRequest(\n          formData,\n          paymentMethod,\n          isHostedPayment,\n          paymentMethodId,\n          selectedPaymentAccount\n        );\n\n        const paymentResult = await executePayment(\n          paymentMethodId,\n          dataRequest,\n          isHostedPayment\n        );\n\n        onSubmitCompleted?.(formData, paymentResult);\n\n      } catch (error: any) {\n        throw new Error(\"Error processing payment: \" + error?.message);\n      } finally {\n        setLoadingProcessPayment(false);\n      }\n    },\n    [paymentFormStatus, createDataRequest, selectedPaymentType, user, selectedPaymentAccount]\n  );\n\n  /**\n   * Handles the form submission for iCheck payments.\n   *\n   * This function checks if the selected payment method is `ECheck` (electronic check)\n   * from the `PaymentVendorFactoryEnum`. If it is, and the form reference (`formRef`) exists\n   * and is currently mounted in the component, it programmatically triggers the form submission.\n   *\n   */\n  const handleICheckPaymentFormStatus = useCallback(() => {\n    if (paymentFormStatus?.selectedHostedPayment === PaymentVendorFactoryEnum.ICheck ||\n      paymentFormStatus?.selectedHostedPayment === PaymentVendorFactoryEnum.Paymentus && formRef?.current) {\n      formRef.current?.submit();\n    }\n  }, [paymentFormStatus]);\n\n  // #endregion\n\n  // #region [Effects]\n\n  useEffect(() => {\n    setPaymentMethodsEnabled();\n  }, [paymentMethods]);\n\n  useEffect(() => {\n    onFormStatusChange?.(paymentFormStatus);\n    handleICheckPaymentFormStatus();\n  }, [paymentFormStatus]);\n\n  // #endregion\n\n  return (\n    <>\n      {loadingProcessPayment && (\n        <Box\n          sx={{\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            backgroundColor: 'rgba(255, 255, 255, 0.8)',\n            zIndex: 9999,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <CircularProgress size=\"3rem\" color=\"primary\" />\n        </Box>\n      )}\n\n      <Form\n        id={id}\n        onSubmit={submitPaymentForm}\n        autocomplete=\"off\"\n        render={(params: any) => {\n          formRef.current = params?.form;\n          return (\n            <>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                style={{ gap: '10px', flex: 1 }}>\n\n                {childrenPosition === \"before\" && children}\n\n                <Box display=\"flex\" flexDirection=\"column\" padding=\"0\">\n                  <Tabs value={value} onChange={handleChange} aria-label={t(\"(payment method tabs\")}>\n                    {paymentMethodsArray?.map((method: any, index: number) => (\n                      // @ts-ignore\n                      <Tooltip key={method.paymentMethodID} title={!method.enabled ? t(\"This Payment method is currently unavailable\") : \"\"}>\n                        <Tab\n                          key={method.paymentMethodID}\n                          //@ts-ignore\n                          icon={getPaymentMethodIcon(method.name, value === index, method.enabled, theme)}\n                          label={getPaymentMethodLabel(method)}\n                          aria-label={getPaymentMethodLabel(method)}\n                          className={classes.tab}\n                        //disabled={!method.enabled}\n                        />\n                      </Tooltip>\n                    ))}\n                  </Tabs>\n\n                  <Card className={classes.cardFullWidth}>\n                    <CardContent className={classes.paddingZero}>\n                      {(loading || loadingPaymentMethods) && <LinearProgress />}\n                      <Grow\n                        in={isSandBoxMode}\n                        style={{ transformOrigin: '0 0 0', display: isSandBoxMode ? 'flex' : 'none' }}\n                        {...(true ? { timeout: 800 } : {})}\n                      >\n                        <Box\n                          display=\"flex\"\n                          flexDirection=\"row\"\n                          justifyContent=\"space-between\"\n                          alignItems=\"center\"\n                          style={{\n                            gap: '8px',\n                            boxSizing: 'border-box',\n                            background: '#FFF2CD',\n                            borderWidth: '1px 0px',\n                            borderStyle: 'solid',\n                            borderColor: 'rgba(0, 0, 0, 0.12)',\n                            padding: '10px',\n                          }}\n                        >\n                          <Typography\n                            variant=\"subtitle2\"\n                            style={{ width: '100%', textAlign: 'center' }}\n                          >\n                            {t('You are currently in test mode using a Sandbox account')}\n                          </Typography>\n                        </Box>\n                      </Grow>\n\n                      <LayoutUnit unit=\"xxs\" />\n\n                      {paymentMethodsArray?.map((method: any, index: number) => (\n                        // @ts-ignore\n                        <TabPanel value={value} index={index} key={method.paymentMethodID}>\n                          {renderPaymentMethodForm(method)}\n                        </TabPanel>\n                      ))}\n                      {\n                        submit &&\n                        <FluentButton variant=\"contained\" color=\"secondary\" disabled={false} type=\"submit\" className={classes.submitControl}>\n                          {loading && <CircularProgress size={24} className={classes.buttonProgress} />}\n                          <Typography>{t('Save')}</Typography>\n                        </FluentButton>\n                      }\n                    </CardContent>\n                  </Card>\n                </Box>\n\n                {childrenPosition === \"after\" && children}\n                {typeof render === 'function' ? render(params) : render}\n              </Box>\n\n              {childrenPosition === \"outside\" && children}\n            </>\n          );\n        }}\n      />\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PaymentForm.mjs","names":["React","FC","useRef","useEffect","useMemo","useState","useCallback","Form","useTranslation","UdpFlexbox","UdpButton","UdpProgressBar","UdpMessageBar","UdpRadioGroup","UdpTablist","CreditCardForm","BankAccountForm","CashForm","ConfigService","apiMutate","useUser","IPaymentMethodTab","PaymentDetails","PaymentVendorFactoryEnum","PaymentMethodTypeEnum","PaymentAccount","usePaymentContext","PaymentMethodProps","id","activeTab","externalId","paymentAccounts","paymentDetails","bankAccountTypes","loading","onTabChange","event","ChangeEvent","paymentMethodTab","onFormStatusChange","paymentFormResult","onSubmitCompleted","FormEvent","HTMLFormElement","result","submit","presetDataRequest","formData","paymentMethod","isHostedPayment","children","ReactNode","childrenPosition","actionLabel","render","params","showSandboxBanner","s2sToken","s2sTenantId","refreshS2sToken","Promise","allowSavePaymentMethod","methodPicker","actionsStart","onSubmittingChange","submitting","onReadyChange","ready","DEFAULT_ACCOUNT_TYPES","name","value","PAYMENT_METHODS","CREDIT_CARD","CASH","E_CHECK","DEBIT_CARD","PaymentForm","user","t","setValue","formRef","methodBoxRef","HTMLDivElement","methodBoxReleaseTimer","freezeMethodBoxHeight","box","current","style","minHeight","offsetHeight","window","clearTimeout","setTimeout","s2sTokenRef","paymentFormStatus","setPaymentFormStatus","setSelectedHostedPayment","selectedPaymentType","setSelectedPaymentType","CreditCard","loadingProcessPayment","setLoadingProcessPayment","selectedPaymentAccount","setSelectedPaymentAccount","methods","paymentMethodsArray","isLoading","loadingPaymentMethods","fetchPaymentMethod","currentTenantID","paymentMethodId","token","path","config","method","headers","Authorization","currentTenantId","pgV1ApiUrl","fetchPaymentMethodDetails","tenantID","methodId","data","Error","executePaymentPG","paymentType","requestBody","body","executeHostedPaymentPG","console","log","basePath","paymentTokenId","paymentMethodLabels","key","handleChange","newValue","selectedPaymentMethod","enabledMethods","paymentVendorConnection","paymentVendorFactoryID","paymentMethodID","handleStatusChange","renderPaymentMethodForm","isFormDisabled","toLowerCase","undefined","String","filter","m","enabled","activeMethod","isSandBoxMode","isLiveMode","isAutoSubmitHostedMethod","isHostedPaymentPage","providerType","ICheck","Paymentus","length","getPaymentMethodLabel","normalizedMethodName","replace","methodLabel","createHostedPaymentRequest","baseRequest","vendorFactoryID","vendorRequest","Fiserv","HostedPageToken","payload","message","expiry","Expiry","isValid","errorMessage","responseObjet","JSON","parse","ResponseData","transactionResponse","paymentTokenID","NameOnAccount","CardHolderName","Token","ExpiryDate","PaymentTokenId","request","PaymentVendorFactoryID","createNonHostedPaymentRequest","dataRequest","Object","assign","setCreditCardAttr","eCheck","setECheckAttr","createDataRequest","executePayment","paymentMethodName","response","expireMonth","expiryDate","split","expireYear","expirationDate","CardNumber","cardNumber","ExpirationDate","SecurityCode","cvv","routingNumber","accountNumber","submitPaymentForm","freshToken","error","warn","retryOnAuthError","call","T","status","hostedPaymentPageSetup","useHostedPaymentPage","paymentResult","handleICheckPaymentFormStatus","vendor","selectedHostedPayment","isAutoSubmitVendor","firstEnabled","find","isReadyToSubmit","form","hasMultipleMethods","hasNoMethods","isSubmitting","Boolean","map","label","e","CustomEvent","detail","nextIdx","findIndex","target"],"sources":["../../../../src/utilities/form/paymentForm/PaymentForm.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, useMemo, useState, useCallback } from 'react';\nimport { Form } from '../Form';\nimport { useTranslation } from 'react-i18next';\nimport { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';\nimport { UdpButton } from '../../../UI/fluent-web-components/UdpButton';\nimport { UdpProgressBar } from '../../../UI/fluent-web-components/UdpProgressBar';\nimport { UdpMessageBar } from '../../../UI/fluent-web-components/UdpMessageBar';\nimport { UdpRadioGroup } from '../../../UI/fluent-web-components/UdpRadioGroup';\nimport { UdpTablist } from '../../../UI/fluent-web-components/UdpTablist';\nimport { CreditCardForm } from './CreditCardForm';\nimport { BankAccountForm } from './BankAccountForm';\nimport { CashForm } from './CashForm';\nimport { ConfigService } from '../../../configService';\nimport { apiMutate } from '../../useAxiosMutate';\nimport { useUser } from '../../auth/useUser';\nimport { IPaymentMethodTab, PaymentDetails } from './AccountPayment.model';\nimport { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';\nimport { PaymentMethodTypeEnum } from '../../../enums/paymentMethodTypeEnum';\nimport { PaymentAccount } from './PaymentAccount.model';\nimport { usePaymentContext } from './usePaymentContext';\n\nexport interface PaymentMethodProps {\n  id: string;\n  activeTab?: number;\n  externalId?: string | number;\n  /**\n   * Currently unused at this level — kept for API compatibility with V1 and\n   * existing back-office consumers that already pass it.\n   *\n   * NOTE: not to be confused with the `paymentAccounts` variable inside\n   * `CreditCardForm` / `BankAccountForm`, which is the locally fetched\n   * saved-tokens list and is unrelated to this prop.\n   */\n  paymentAccounts?: any[];\n  paymentDetails: PaymentDetails;\n  bankAccountTypes?: any[];\n  loading: boolean;\n  onTabChange: (event: React.ChangeEvent<{}>, paymentMethodTab: any) => void;\n  onFormStatusChange?: (paymentFormResult: any) => void;\n  onSubmitCompleted?: (event: React.FormEvent<HTMLFormElement> | null, result: any) => void;\n  submit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  presetDataRequest: (formData: any, paymentMethod: any, isHostedPayment: boolean) => any;\n  children?: React.ReactNode;\n  childrenPosition?: \"before\" | \"after\" | \"outside\";\n  actionLabel?: string;\n  render?: React.ReactNode | ((params: any) => React.ReactNode);\n  /**\n   * Whether to show the \"Sandbox / test mode\" banner when the active payment\n   * vendor connection is in non-live mode. Defaults to `true` to preserve the\n   * behaviour back-office consumers rely on. Payer-facing flows (e.g. the\n   * standalone invoice page) should pass `false`.\n   */\n  showSandboxBanner?: boolean;\n  /**\n   * S2S bearer token obtained by the consuming application via Unity Keeper.\n   * When present the component operates in S2S mode: all Payment Portal API\n   * calls use the `/S2S` endpoint variants and this token as the Authorization\n   * header instead of the Unity user session token.\n   */\n  s2sToken?: string;\n  /** Tenant ID required alongside `s2sToken` for S2S mode API calls. */\n  s2sTenantId?: string;\n  /**\n   * Called at the start of submit to obtain a fresh S2S token. Payment-link\n   * tokens can be very short-lived (observed TTL: 60s), so a token minted at\n   * page load is often already expired by the time the payer submits. When\n   * provided, the returned token is used for the submit-path API calls;\n   * on failure the existing token is kept as a fallback.\n   */\n  refreshS2sToken?: () => Promise<string | undefined>;\n  /**\n   * Whether the manual entry forms (card, eCheck) offer the \"save this\n   * method\" checkbox. Defaults to `true` for account-connected flows.\n   * Guest/standalone flows (e.g. the invoice payment link) should pass\n   * `false` — there is no user account to save the method to.\n   */\n  allowSavePaymentMethod?: boolean;\n  /**\n   * Visual style of the payment-method picker shown when more than one\n   * method is enabled. Defaults to 'radio'.\n   */\n  methodPicker?: 'radio' | 'tabs';\n  /**\n   * Rendered at the start of the action row, before the submit button.\n   * Lets hosts (e.g. a stepper) place secondary actions like \"Back\" in the\n   * same row as the pay button instead of a second, disconnected button row.\n   */\n  actionsStart?: React.ReactNode;\n  /**\n   * Notifies the host when payment processing starts (true) and settles\n   * (false). Lets an external submit button — connected via the form\n   * registry (`<UdpButton type=\"submit\" form={id}>`) when no `submit` prop\n   * is passed — mirror the internal button's loading/disabled behaviour.\n   */\n  onSubmittingChange?: (submitting: boolean) => void;\n  /**\n   * Notifies the host whether a submit can currently succeed — false while\n   * method discovery is in flight, when no payable method exists, or in\n   * hosted-iframe mode until the vendor iframe reports a token. Lets an\n   * external submit button mirror the internal button's disabled state.\n   */\n  onReadyChange?: (ready: boolean) => void;\n}\n\nconst DEFAULT_ACCOUNT_TYPES = [\n  { name: 'Checking', value: 'checking' },\n  { name: 'Savings', value: 'savings' },\n];\n\nconst PAYMENT_METHODS = {\n  CREDIT_CARD: 'credit card',\n  CASH: 'cash',\n  E_CHECK: 'echeck',\n  DEBIT_CARD: 'debit card'\n};\n\n/**\n * PaymentForm Component\n *\n * This component provides a user interface for selecting and handling different payment methods.\n * It allows users to switch between available payment methods using tabs and handles the form submission process.\n * Each payment method has its own form component that is displayed based on the selected tab.\n *\n * Props:\n *   @param {PaymentMethodProps} props - Object containing the following properties:\n *     @param {string} id - Unique identifier for the payment form.\n *     @param {number} [activeTab=0] - The index of the currently active tab. Defaults to 0.  [OPTIONAL]\n *     @param {any[]} [paymentAccounts] - Array of payment accounts associated with the user. [OPTIONAL]\n *     @param {PaymentDetails} paymentDetails - Object containing details about the customer's payment information.\n *     @param {any[]} [bankAccountTypes=DEFAULT_ACCOUNT_TYPES] - Array of available bank account types, with a default value.\n *     @param {boolean} loading - Boolean flag indicating if asynchronous operations like data fetching are in progress.\n *     @param {Function} onTabChange - Function to be called when the active tab changes.\n *     @param {Function} [onFormStatusChange] - Optional function to handle status changes during form interactions.\n *     @param {Function} [onSubmitCompleted] - Optional function to be called upon successful form submission.\n *     @param {Function} presetDataRequest - Function to prepare the data request for payment processing.\n *     @param {Function} [submit] - Optional function to be called on form submission.\n *     @param {any} [children] - Optional elements to be rendered inside the form.\n *     @param {\"before\" | \"after\" | \"outside\"} [childrenPosition=\"before\"] - Position of the children elements relative to the form.\n *     @param {string} [actionLabel] - Optional label for the form action button.\n *     @param {any} [render] - Optional render function for custom rendering inside the component.\n *\n * Usage:\n * The component renders tabs to switch between different payment methods and handles form interactions\n * for submitting payments. It integrates with Material-UI components to render the form and uses React hooks\n * for managing state, such as the currently active tab and form interaction data.\n *\n * The component uses the `useMemo` hook to optimize rendering performance and to handle the memoization of\n * computed payment fields. It ensures that the form submission process is smooth, even for hosted payments.\n *\n * Each payment method form (e.g., CreditCardForm, eCheckForm, etc.) is conditionally rendered based on the\n * currently selected payment method, ensuring a consistent user experience.\n *\n * Example:\n * <PaymentForm\n *   id=\"paymentForm\"\n *   activeTab={0}\n *   paymentAccounts={accounts}\n *   paymentDetails={paymentDetails}\n *   bankAccountTypes={accountTypes}\n *   loading={isLoading}\n *   onTabChange={handleTabChange}\n *   onFormStatusChange={handleStatusChange}\n *   presetDataRequest={createDataRequest}\n *   onSubmitCompleted={handleSubmitCompleted}\n *   actionLabel=\"Enter Card Details\"\n *   submit={handleSubmit}\n * />\n *\n * Note:\n * This component should be used within a React environment that supports hooks and functional components.\n * It relies on Material-UI for UI components and theming.\n */\nexport const PaymentForm: FC<PaymentMethodProps> = ({\n  id,\n  activeTab = 0,\n  externalId,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  paymentAccounts,\n  paymentDetails,\n  bankAccountTypes = DEFAULT_ACCOUNT_TYPES,\n  loading,\n  presetDataRequest,\n  onTabChange,\n  onFormStatusChange,\n  onSubmitCompleted,\n  submit,\n  children,\n  childrenPosition = \"before\",\n  actionLabel,\n  render,\n  showSandboxBanner = true,\n  s2sToken,\n  s2sTenantId,\n  refreshS2sToken,\n  allowSavePaymentMethod = true,\n  methodPicker = 'radio',\n  actionsStart,\n  onSubmittingChange,\n  onReadyChange,\n}) => {\n  const user = useUser();\n  const { t } = useTranslation();\n  const [value, setValue] = useState(activeTab);\n  const formRef = useRef<any>(null);\n  const methodBoxRef = useRef<HTMLDivElement | null>(null);\n  const methodBoxReleaseTimer = useRef<number | null>(null);\n  /**\n   * Freeze the method-form area's current height while switching methods.\n   * The outgoing form unmounts synchronously but the incoming form's web\n   * components hydrate asynchronously, so the area collapses to ~zero height\n   * for a few frames. Inside a scroll container that collapse clamps the\n   * scroll position (the page appears to jump to the top). Holding the\n   * previous height through the swap keeps the scroll position stable.\n   */\n  const freezeMethodBoxHeight = () => {\n    const box = methodBoxRef.current;\n    if (!box) return;\n    box.style.minHeight = `${box.offsetHeight}px`;\n    if (methodBoxReleaseTimer.current) {\n      window.clearTimeout(methodBoxReleaseTimer.current);\n    }\n    methodBoxReleaseTimer.current = window.setTimeout(() => {\n      box.style.minHeight = '';\n      methodBoxReleaseTimer.current = null;\n    }, 400);\n  };\n\n  useEffect(\n    () => () => {\n      if (methodBoxReleaseTimer.current) {\n        window.clearTimeout(methodBoxReleaseTimer.current);\n      }\n    },\n    []\n  );\n\n  // Submit-path calls read the token through this ref so refreshS2sToken can\n  // swap in a fresh one mid-submit without waiting for a re-render.\n  const s2sTokenRef = useRef<string | undefined>(s2sToken);\n  useEffect(() => {\n    s2sTokenRef.current = s2sToken;\n  }, [s2sToken]);\n\n  const [paymentFormStatus, setPaymentFormStatus] = useState<any>(null);\n  const [, setSelectedHostedPayment] = useState<PaymentVendorFactoryEnum | null>(null);\n  const [selectedPaymentType, setSelectedPaymentType] = useState(PaymentMethodTypeEnum.CreditCard);\n  const [loadingProcessPayment, setLoadingProcessPayment] = useState<boolean>(false);\n  const [selectedPaymentAccount, setSelectedPaymentAccount] = useState<PaymentAccount | null>(null);\n\n  // #region [API Calls]\n\n  /**\n   * Discovery: resolved list of payment methods + vendor/hosted-page info.\n   * When the backend ships a single payment-context endpoint, replace the\n   * usePaymentContext implementation — no other change in this file is needed.\n   */\n  const { methods: paymentMethodsArray, isLoading: loadingPaymentMethods } = usePaymentContext(s2sToken, s2sTenantId);\n\n  /**\n   * API call to fetchPaymentMethod\n   *\n   * @param {string} currentTenantID\n   * @param {string} paymentMethodId\n   * @return {*}\n   */\n  const fetchPaymentMethod = useCallback(\n    async (currentTenantID: string, paymentMethodId: string | number) => {\n      if (!currentTenantID || !paymentMethodId) {\n        return null;\n      }\n\n      const token = s2sTokenRef.current;\n      const path = token\n        ? `AppPaymentVendor/PaymentMethod/${paymentMethodId}/S2S`\n        : `AppPaymentVendor/PaymentMethod/${paymentMethodId}`;\n      const config = token\n        ? { method: 'GET', headers: { Authorization: `Bearer ${token}`, currentTenantId: s2sTenantId } }\n        : { method: 'GET' };\n      return apiMutate(ConfigService.pgV1ApiUrl, path, config, {});\n    },\n    [s2sTenantId]\n  );\n\n  /**\n   * fetchPaymentMethodDetails\n   *\n   * @param {*} tenantID\n   * @param {*} methodId\n   * @return {*}\n   */\n  const fetchPaymentMethodDetails = useCallback(\n    async (tenantID: any, methodId: any): Promise<any> => {\n      const result = await fetchPaymentMethod(tenantID, methodId);\n      const paymentMethod = result?.data;\n\n      if (!paymentMethod) {\n        throw new Error(`${t('Payment method configuration not found')}: ${methodId}`);\n      }\n\n      return paymentMethod;\n    },\n    [fetchPaymentMethod]\n  );\n\n  /**\n   * executePaymentPG\n   *\n   * @param {string} paymentType\n   * @param {any} requestBody\n   * @return {*}\n   */\n  const executePaymentPG = useCallback(\n    async (paymentType: string, requestBody: any) => {\n      if (!paymentType || !requestBody) {\n        return null;\n      }\n\n      const token = s2sTokenRef.current;\n      const path = token\n        ? `ProcessPayment/${paymentType}/S2S`\n        : `ProcessPayment/${paymentType}`;\n      const body = requestBody as unknown;\n      const config = token\n        ? { method: 'POST', data: body, headers: { Authorization: `Bearer ${token}`, currentTenantId: s2sTenantId } }\n        : { method: 'POST', data: body };\n\n      return apiMutate(ConfigService.pgV1ApiUrl, path, config, {});\n    },\n    [s2sTenantId]\n  );\n\n  /**\n   * executeHostedPaymentPG\n   *\n   * @param {string} paymentType\n   * @param {any} requestBody\n   * @return {*}\n   */\n  const executeHostedPaymentPG = useCallback(\n    async (paymentType: string, requestBody: any) => {\n\n      console.log('executeHostedPaymentPG started')\n\n      if (!paymentType || !requestBody) {\n        return null;\n      }\n      const body = requestBody as unknown;\n      const token = s2sTokenRef.current;\n      const basePath = (requestBody as { paymentTokenId?: unknown })?.paymentTokenId\n        ? `ProcessPayment/${paymentType}Profile`\n        : `ProcessHostedPaymentPagePayment/${paymentType}`;\n      const path = token ? `${basePath}/S2S` : basePath;\n\n      console.log(`this is the path: ${path}`);\n      console.log(body);\n\n      return apiMutate(\n        ConfigService.pgV1ApiUrl,\n        path,\n        token\n          ? { method: 'POST', data: body, headers: { Authorization: `Bearer ${token}`, currentTenantId: s2sTenantId } }\n          : { method: 'POST', data: body },\n        {}\n      );\n    },\n    [s2sTenantId]\n  );\n\n  // #endregion\n\n  // #region [Methods]\n\n  const paymentMethodLabels: { [key: string]: string } = useMemo(() => ({\n    \"creditcard\": t(\"Credit Card\"),\n    \"debitcard\": t(\"Debit Card\"),\n    \"echeck\": t(\"eCheck\"),\n    \"check\": t(\"Check\"),\n    \"cash\": t(\"Cash\")\n  }), [t]);\n\n  /**\n   * handleChange\n   *\n   * @param {React.ChangeEvent<{}>} event\n   * @param {number} newValue\n   */\n  /**\n   * Update the active method by index into the enabled list.\n   * `event` is forwarded to `onTabChange` for back-compat with consumers that\n   * expected the legacy MUI tab-change signature.\n   */\n  const handleChange = (event: React.ChangeEvent<any>, newValue: number) => {\n    freezeMethodBoxHeight();\n    setValue(newValue);\n\n    const selectedPaymentMethod = enabledMethods?.[newValue];\n\n    setSelectedHostedPayment(\n      selectedPaymentMethod?.paymentVendorConnection?.paymentVendorFactoryID as PaymentVendorFactoryEnum | null\n    );\n    setSelectedPaymentType(selectedPaymentMethod?.paymentMethodID as PaymentMethodTypeEnum);\n\n    onTabChange(event, selectedPaymentMethod);\n  };\n\n  // onFormStatusChange is fired by the useEffect on `paymentFormStatus` below;\n  // do NOT also call it here or consumers receive the same status twice per change.\n  const handleStatusChange = (paymentFormStatus: any): void => {\n    setPaymentFormStatus(paymentFormStatus);\n  };\n\n  /**\n   * Render the form for the currently-selected method. The picker only ever\n   * surfaces enabled methods, so no disabled-overlay branch is needed.\n   *\n   * @param method  the active payment method\n   * @param isFormDisabled  when true, locks every input in the rendered form.\n   *                        Driven by RFF `submitting` + our own\n   *                        `loadingProcessPayment` so the user can't change\n   *                        values mid-submit.\n   */\n  const renderPaymentMethodForm = useCallback((method: any, isFormDisabled: boolean) => {\n    const name = method?.name?.toLowerCase();\n\n    if (name === PAYMENT_METHODS.CREDIT_CARD) {\n      return (\n        <CreditCardForm\n          onStatusChange={handleStatusChange}\n          paymentDetails={paymentDetails}\n          externalId={externalId !== undefined ? String(externalId) : undefined}\n          setSelectedPaymentAccount={setSelectedPaymentAccount}\n          actionLabel={actionLabel}\n          isFormDisabled={isFormDisabled}\n          allowSaveMethod={allowSavePaymentMethod}\n          s2sToken={s2sToken}\n          s2sTenantId={s2sTenantId}\n          {...method}\n        />\n      );\n    }\n    if (name === PAYMENT_METHODS.CASH) {\n      return (\n        <CashForm\n          onStatusChange={handleStatusChange}\n          paymentDetails={paymentDetails}\n          isFormDisabled={isFormDisabled}\n          {...method}\n        />\n      );\n    }\n    if (name === PAYMENT_METHODS.E_CHECK) {\n      return (\n        <BankAccountForm\n          bankAccountTypes={bankAccountTypes}\n          onStatusChange={handleStatusChange}\n          paymentDetails={paymentDetails}\n          externalId={externalId !== undefined ? String(externalId) : undefined}\n          setSelectedPaymentAccount={setSelectedPaymentAccount}\n          actionLabel={actionLabel}\n          isFormDisabled={isFormDisabled}\n          allowSaveMethod={allowSavePaymentMethod}\n          s2sToken={s2sToken}\n          s2sTenantId={s2sTenantId}\n          {...method}\n        />\n      );\n    }\n    if (name === PAYMENT_METHODS.DEBIT_CARD) {\n      // TODO: Implement Debit Card form. Falls back to CreditCardForm until then.\n      return (\n        <CreditCardForm\n          onStatusChange={handleStatusChange}\n          paymentDetails={paymentDetails}\n          isFormDisabled={isFormDisabled}\n          allowSaveMethod={allowSavePaymentMethod}\n          s2sToken={s2sToken}\n          s2sTenantId={s2sTenantId}\n          {...method}\n        />\n      );\n    }\n    return null;\n  }, [paymentDetails, bankAccountTypes, externalId, actionLabel, allowSavePaymentMethod, s2sToken, s2sTenantId]);\n\n  /**\n   * Enabled (configured) methods only. Unconfigured methods are hidden from the\n   * picker entirely — today's behaviour of \"show a disabled tab with a !\n   * badge\" was confusing and inaccessible.\n   */\n  const enabledMethods = useMemo<IPaymentMethodTab[]>(\n    () => paymentMethodsArray?.filter((m) => m.enabled) ?? [],\n    [paymentMethodsArray]\n  );\n\n  const activeMethod = enabledMethods[value] ?? enabledMethods[0];\n\n  /**\n   * Sandbox mode for the currently-selected method's vendor connection.\n   */\n  const isSandBoxMode = useMemo(() => {\n    const isLiveMode = activeMethod?.paymentVendorConnection?.isLiveMode;\n    return isLiveMode === false;\n  }, [activeMethod]);\n\n  /**\n   * ICheck and Paymentus both render their own submit button inside the\n   * hosted iframe and auto-submit this form once the iframe posts back a\n   * token (see handleICheckPaymentFormStatus below) — our own submit button\n   * would just be a confusing second button. Fiserv's hosted iframe has no\n   * button of its own, so it still needs ours.\n   */\n  const isAutoSubmitHostedMethod =\n    activeMethod?.isHostedPaymentPage === true &&\n    (activeMethod?.providerType === PaymentVendorFactoryEnum.ICheck ||\n      activeMethod?.providerType === PaymentVendorFactoryEnum.Paymentus);\n\n  // Clamp `value` if the enabled-methods list shrinks (e.g. discovery\n  // returned fewer methods than expected).\n  useEffect(() => {\n    if (enabledMethods.length === 0) return;\n    if (value >= enabledMethods.length) {\n      setValue(0);\n    }\n  }, [enabledMethods.length, value]);\n\n  /**\n   * getPaymentMethodLabel\n   *\n   * @param {*} method\n   * @return {*}\n   */\n  const getPaymentMethodLabel = (method: { name: string; }) => {\n    const normalizedMethodName = method?.name?.toLowerCase().replace(/\\s+/g, '') || '';\n    const methodLabel = paymentMethodLabels?.[normalizedMethodName as keyof typeof paymentMethodLabels] || method.name;\n\n    return methodLabel;\n  };\n\n  /**\n   * createHostedPaymentRequest\n   *\n   * @param {*} baseRequest\n   * @param {*} paymentMethod\n   * @return {*}\n   */\n  const createHostedPaymentRequest = useCallback(\n    (baseRequest: any, paymentMethod: any, paymentMethodId: string | number, selectedPaymentAccount: PaymentAccount | null): any => {\n      const vendorFactoryID =\n        paymentMethod.paymentVendorConnection?.paymentVendorFactoryID;\n      let vendorRequest = {};\n\n      switch (vendorFactoryID) {\n        case PaymentVendorFactoryEnum.Fiserv:\n          vendorRequest = {\n            HostedPageToken:\n              paymentFormStatus?.payload?.token ||\n              paymentFormStatus?.payload?.message,\n            ...(paymentFormStatus?.payload?.expiry && {\n              Expiry: paymentFormStatus?.payload?.expiry,\n            }),\n          };\n          break;\n        case PaymentVendorFactoryEnum.ICheck:\n          if (!paymentFormStatus?.isValid) {\n            throw new Error(\n              `${t('Payment error. Please check the form and try again')} ${paymentFormStatus?.errorMessage}`\n            );\n          }\n          const responseObjet = JSON.parse(paymentFormStatus?.payload);\n\n          vendorRequest = {\n            ResponseData: responseObjet?.transactionResponse,\n          };\n          break;\n        case PaymentVendorFactoryEnum.Paymentus:\n          const paymentTokenId = selectedPaymentAccount ? selectedPaymentAccount?.paymentTokenID : null;\n\n          /* Paymentus uses a PaymentTokenId like an a Payment Account */\n          vendorRequest = {\n            NameOnAccount: paymentFormStatus?.payload?.CardHolderName,\n            HostedPageToken: paymentFormStatus?.payload?.Token,\n            ...(paymentFormStatus?.payload?.ExpiryDate && {\n              Expiry: paymentFormStatus?.payload?.ExpiryDate,\n            }),\n            ...(paymentTokenId && { PaymentTokenId: paymentTokenId }),\n          };\n          break;\n        default:\n          break;\n      }\n      const request = {\n        ...baseRequest,\n        PaymentVendorFactoryID: vendorFactoryID,\n        ...vendorRequest,\n      };\n\n      return request;\n    },\n    [paymentFormStatus]\n  );\n\n  /**\n   * createNonHostedPaymentRequest\n   *\n   * @param {*} baseRequest\n   * @param {*} formData\n   * @return {*}\n   */\n  const createNonHostedPaymentRequest = useCallback(\n    (baseRequest: any, formData: any): any => {\n      let dataRequest = { ...baseRequest };\n\n      if (selectedPaymentType === PaymentMethodTypeEnum.CreditCard) {\n        Object.assign(dataRequest, setCreditCardAttr(formData));\n      } else if (selectedPaymentType === PaymentMethodTypeEnum.eCheck) {\n        Object.assign(dataRequest, setECheckAttr(formData));\n      }\n      return dataRequest;\n    },\n    [selectedPaymentType]\n  );\n\n  /**\n   * createDataRequest\n   *\n   * @param {*} formData\n   * @param {*} paymentMethod\n   * @param {*} isHostedPayment\n   * @return {*}\n   */\n  const createDataRequest = useCallback(\n    (formData: any, paymentMethod: any, isHostedPayment: any, paymentMethodId: string | number, selectedPaymentAccount: PaymentAccount | null): any => {\n      const baseRequest = presetDataRequest(formData, paymentMethod, isHostedPayment);\n\n      return isHostedPayment\n        ? createHostedPaymentRequest(baseRequest, paymentMethod, paymentMethodId, selectedPaymentAccount)\n        : createNonHostedPaymentRequest(baseRequest, formData);\n    },\n    [paymentFormStatus, user, presetDataRequest, paymentDetails, selectedPaymentType]\n  );\n\n  /**\n   * executePayment\n   * Executes the payment process based on the payment method and request data.\n   *\n   * @param {*} paymentMethodId The ID of the payment method.\n   * @param {*} dataRequest The request data for the payment.\n   * @param {boolean} isHostedPayment Indicates if the payment is a hosted payment.\n   * @return {*} The result of the payment execution.\n   */\n  const executePayment = useCallback(\n    async (\n      paymentMethodId: any,\n      dataRequest: any,\n      isHostedPayment: boolean\n    ): Promise<any> => {\n      if (!paymentMethodId || !dataRequest) {\n        throw new Error(\n          t('Invalid payment data')\n        );\n      }\n      if (typeof isHostedPayment !== 'boolean') {\n        throw new Error(\n          t('Invalid hosted payment flag')\n        );\n      }\n\n      console.log(`execute payment start`);\n      // console.log(body);\n\n      const paymentMethodName = PaymentMethodTypeEnum?.[paymentMethodId];\n\n      if (!paymentMethodName) {\n        throw new Error(\n          t('Unknown payment method') +\n          `: ${paymentMethodId}`\n        );\n      }\n\n      const response = isHostedPayment\n        ? await executeHostedPaymentPG(paymentMethodName, dataRequest)\n        : await executePaymentPG(paymentMethodName, dataRequest);\n\n      return response?.data || null;\n    },\n    [executePaymentPG, executeHostedPaymentPG]\n  );\n\n  /**\n   * setCreditCardAttr\n   *\n   * @param {*} formData\n   * @param {string} currentTenantID\n   * @param {IPaymentMethod} paymentMethod\n   * @return {*}\n   */\n  const setCreditCardAttr = (formData: any) => {\n    const expireMonth = formData.expiryDate.split('/')?.[0];\n    const expireYear = formData.expiryDate.split('/')?.[1];\n    const expirationDate = `20${expireYear}-${expireMonth}-01`;\n\n    return {\n      CardNumber: formData.cardNumber.replace(/\\s/g, ''),\n      ExpirationDate: expirationDate,\n      SecurityCode: formData.cvv,\n    };\n  };\n\n  /**\n   * setECheckAttr\n   * @param {*} formData\n   */\n  const setECheckAttr = (formData: any) => ({\n    routingNumber: formData.routingNumber.replace(/\\s/g, ''),\n    accountNumber: formData.accountNumber.replace(/\\s/g, ''),\n  });\n\n  // #endregion\n\n  // #region [Submit]\n\n  /**\n   * submitPaymentForm\n   * Processes the payment form submission.\n   * @param {*} formData The form data.\n   */\n  const submitPaymentForm = useCallback(\n    async (formData: any): Promise<void> => {\n      if (!formData) return;\n\n      // Discovery still in flight or returned no payable methods — no method\n      // fields are mounted yet, so nothing validated and formData is empty.\n      // The internal button is disabled in this window, but external\n      // form-registry submit buttons can still land here.\n      if (loadingPaymentMethods || enabledMethods.length === 0) return;\n\n      setLoadingProcessPayment(true);\n\n      // Payment-link tokens can expire between page load and submit; re-mint\n      // when the host provides a way to. Failure keeps the existing token.\n      if (refreshS2sToken) {\n        try {\n          const freshToken = await refreshS2sToken();\n          if (freshToken) {\n            s2sTokenRef.current = freshToken;\n          }\n        } catch (error) {\n          console.warn('refreshS2sToken failed; submitting with the existing token', error);\n        }\n      }\n\n      // Reactive backstop to the proactive refresh above: when a call is\n      // rejected with a 403 (how the Payment Portal reports an expired S2S\n      // token), re-mint the token and re-issue that call once. Never retries\n      // other statuses — a 500 from ProcessPayment is a real error and may\n      // mean the charge already went through.\n      const retryOnAuthError = async <T,>(call: () => Promise<T>): Promise<T> => {\n        try {\n          return await call();\n        } catch (error: any) {\n          if (!refreshS2sToken || error?.response?.status !== 403) throw error;\n          let freshToken: string | undefined;\n          try {\n            freshToken = await refreshS2sToken();\n          } catch {\n            throw error;\n          }\n          if (!freshToken) throw error;\n          s2sTokenRef.current = freshToken;\n          return call();\n        }\n      };\n\n      const currentTenantID = s2sTokenRef.current ? s2sTenantId : user?.currentTenantId;\n      const paymentMethodId = selectedPaymentType;\n\n      if (!currentTenantID || !paymentMethodId) {\n        onSubmitCompleted?.(null, {\n          error: true,\n          message: 'Missing tenant ID or payment method ID',\n        });\n        setLoadingProcessPayment(false);\n        return;\n      }\n\n      console.log('started exectute payment');\n\n      try {\n        const paymentMethod = await retryOnAuthError(() =>\n          fetchPaymentMethodDetails(currentTenantID, paymentMethodId)\n        );\n        const isHostedPayment =\n          paymentMethod.paymentVendorConnection?.hostedPaymentPageSetup?.[0]\n            ?.useHostedPaymentPage || false;\n\n        const dataRequest = createDataRequest(\n          formData,\n          paymentMethod,\n          isHostedPayment,\n          paymentMethodId,\n          selectedPaymentAccount\n        );\n\n        const paymentResult = await retryOnAuthError(() =>\n          executePayment(paymentMethodId, dataRequest, isHostedPayment)\n        );\n\n        onSubmitCompleted?.(formData, paymentResult);\n\n      } catch (error: any) {\n        // Route failures through onSubmitCompleted so consumers can react\n        // (previous behaviour threw from an async event handler -> unhandled rejection).\n        console.error('Error processing payment:', error);\n        onSubmitCompleted?.(formData, {\n          error: true,\n          message: error?.message ?? 'Error processing payment',\n        });\n      } finally {\n        setLoadingProcessPayment(false);\n      }\n    },\n    [createDataRequest, selectedPaymentType, user, selectedPaymentAccount, s2sTenantId, refreshS2sToken, executePayment, fetchPaymentMethodDetails, onSubmitCompleted, loadingPaymentMethods, enabledMethods]\n  );\n\n  /**\n   * Handles the form submission for iCheck payments.\n   *\n   * This function checks if the selected payment method is `ECheck` (electronic check)\n   * from the `PaymentVendorFactoryEnum`. If it is, and the form reference (`formRef`) exists\n   * and is currently mounted in the component, it programmatically triggers the form submission.\n   *\n   */\n  const handleICheckPaymentFormStatus = useCallback(() => {\n    const vendor = paymentFormStatus?.selectedHostedPayment;\n    const isAutoSubmitVendor =\n      vendor === PaymentVendorFactoryEnum.ICheck ||\n      vendor === PaymentVendorFactoryEnum.Paymentus;\n\n    if (isAutoSubmitVendor && formRef?.current) {\n      formRef.current.submit();\n    }\n  }, [paymentFormStatus]);\n\n  // #endregion\n\n  // #region [Effects]\n\n  // Default the selected vendor to the first enabled method once discovery\n  // completes. Matches the previous behaviour from setPaymentMethodsEnabled.\n  useEffect(() => {\n    if (!paymentMethodsArray) return;\n    const firstEnabled = paymentMethodsArray.find((m) => m.enabled);\n    setSelectedHostedPayment(firstEnabled?.providerType ?? null);\n  }, [paymentMethodsArray]);\n\n  useEffect(() => {\n    onFormStatusChange?.(paymentFormStatus);\n    handleICheckPaymentFormStatus();\n  }, [paymentFormStatus]);\n\n  // onSubmittingChange is intentionally omitted from deps; consumers may pass\n  // unstable references and we only want to fire when the window changes.\n  useEffect(() => {\n    onSubmittingChange?.(loadingProcessPayment);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [loadingProcessPayment]);\n\n  // Mirrors the internal submit button's disabled conditions so hosts with\n  // external submit buttons can gate them identically. Callback omitted from\n  // deps for the same unstable-reference reason as above.\n  const isReadyToSubmit =\n    !loadingPaymentMethods &&\n    enabledMethods.length > 0 &&\n    paymentFormStatus?.isValid !== false;\n\n  useEffect(() => {\n    onReadyChange?.(isReadyToSubmit);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isReadyToSubmit]);\n\n  // #endregion\n\n  return (\n    <>\n      <Form\n        id={id}\n        onSubmit={submitPaymentForm}\n        render={(params: any) => {\n          formRef.current = params?.form;\n\n          const hasMultipleMethods = enabledMethods.length > 1;\n          // Discovery has completed and there are no enabled methods.\n          const hasNoMethods =\n            paymentMethodsArray !== undefined &&\n            enabledMethods.length === 0 &&\n            !loadingPaymentMethods;\n          // RFF `submitting` flips while the Promise returned from\n          // submitPaymentForm is in flight. loadingProcessPayment is our own\n          // signal for the same window. Either way, lock the UI so the user\n          // can't change values or switch methods mid-submit.\n          const isSubmitting = Boolean(params?.submitting) || loadingProcessPayment;\n\n          return (\n            <>\n              <UdpFlexbox direction=\"column\" gap=\"md\" wrap=\"nowrap\">\n                {childrenPosition === \"before\" && children}\n\n                {(loading || loadingPaymentMethods) && <UdpProgressBar />}\n\n                {hasNoMethods && (\n                  <UdpMessageBar intent=\"error\">\n                    {t(\"No payment methods are available for this account\")}\n                  </UdpMessageBar>\n                )}\n\n                {showSandboxBanner && isSandBoxMode && (\n                  <UdpMessageBar intent=\"warning\">\n                    {t(\"You are currently in test mode using a Sandbox account\")}\n                  </UdpMessageBar>\n                )}\n\n                {hasMultipleMethods && methodPicker === 'tabs' && (\n                  <UdpTablist\n                    size=\"small\"\n                    disabled={isSubmitting}\n                    activeId={String(activeMethod?.paymentMethodID ?? '')}\n                    tabList={enabledMethods.map((m) => ({\n                      id: String(m.paymentMethodID),\n                      label: getPaymentMethodLabel(m),\n                    }))}\n                    onTabChange={(e: CustomEvent<string | number>) => {\n                      const id = String(e.detail);\n                      const nextIdx = enabledMethods.findIndex(\n                        (m) => String(m.paymentMethodID) === id\n                      );\n                      if (nextIdx >= 0) {\n                        handleChange(e as unknown as React.ChangeEvent<any>, nextIdx);\n                      }\n                    }}\n                  />\n                )}\n\n                {hasMultipleMethods && methodPicker === 'radio' && (\n                  <UdpRadioGroup\n                    label={t(\"Payment method\")}\n                    name=\"paymentMethod\"\n                    disabled={isSubmitting}\n                    includeErrorPadding={false}\n                    value={String(activeMethod?.paymentMethodID ?? '')}\n                    items={enabledMethods.map((m) => ({\n                      label: getPaymentMethodLabel(m),\n                      value: String(m.paymentMethodID),\n                    }))}\n                    onChange={(e) => {\n                      const id = e.target.value;\n                      const nextIdx = enabledMethods.findIndex(\n                        (m) => String(m.paymentMethodID) === id\n                      );\n                      if (nextIdx >= 0) {\n                        handleChange(e as unknown as React.ChangeEvent<any>, nextIdx);\n                      }\n                    }}\n                  />\n                )}\n\n                <div ref={methodBoxRef}>\n                  {activeMethod && renderPaymentMethodForm(activeMethod, isSubmitting)}\n                </div>\n\n                {submit && (\n                  <UdpFlexbox direction=\"row\" gap=\"sm\" align=\"center\" wrap=\"nowrap\">\n                    {actionsStart}\n                    {!isAutoSubmitHostedMethod && (\n                    <UdpButton\n                      type=\"submit\"\n                      form={id}\n                      appearance=\"primary\"\n                      loading={loading || loadingProcessPayment}\n                      // Not actionable until discovery resolves a payable method\n                      // (no fields mounted yet — a click would submit an empty\n                      // form), nor in hosted-iframe mode until the vendor iframe\n                      // reports a token (isValid). Tokenization is driven inside\n                      // the iframe, so this cannot deadlock the flow.\n                      disabled={loadingPaymentMethods || hasNoMethods || paymentFormStatus?.isValid === false}\n                    >\n                      {actionLabel || t('Save')}\n                    </UdpButton>\n                    )}\n                  </UdpFlexbox>\n                )}\n\n                {childrenPosition === \"after\" && children}\n                {typeof render === 'function' ? render(params) : render}\n              </UdpFlexbox>\n\n              {childrenPosition === \"outside\" && children}\n            </>\n          );\n        }}\n      />\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/utilities/form/paymentForm/usePaymentContext.d.ts

@@ -0,0 +1,22 @@
+import { IPaymentMethodTab } from './AccountPayment.model';
+export interface PaymentContext {
+    /**
+     * Resolved payment methods with vendor connection info and enabled state.
+     * `undefined` while loading; `[]` when the user has no available methods.
+     */
+    methods: IPaymentMethodTab[] | undefined;
+    isLoading: boolean;
+    isError: boolean;
+}
+/**
+ * Wraps today's N+1 payment-method discovery:
+ *   1. GET /PaymentMethod                                  (list)
+ *   2. GET /AppPaymentVendor/PaymentMethod/{id} for each   (per-method vendor info)
+ *
+ * When the backend ships a single payment-context endpoint, this hook is the
+ * one file that needs to change — replace the implementation with a single
+ * `useApiQuery` call that returns the same shape and the rest of the form is
+ * unaffected.
+ */
+export declare function usePaymentContext(s2sToken?: string, s2sTenantId?: string): PaymentContext;
+//# sourceMappingURL=usePaymentContext.d.ts.map

package/dist/utilities/form/paymentForm/usePaymentContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaymentContext.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/usePaymentContext.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,cAAc,CA4IzF"}

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

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { useApiQuery } from '../../useApiQuery';
+import { apiMutate } from '../../useAxiosMutate';
+import { useUser } from '../../auth/useUser';
+import { ConfigService } from '../../../configService';
+import { stringToProps } from '../../stringUtils';
+/**
+ * Wraps today's N+1 payment-method discovery:
+ *   1. GET /PaymentMethod                                  (list)
+ *   2. GET /AppPaymentVendor/PaymentMethod/{id} for each   (per-method vendor info)
+ *
+ * When the backend ships a single payment-context endpoint, this hook is the
+ * one file that needs to change — replace the implementation with a single
+ * `useApiQuery` call that returns the same shape and the rest of the form is
+ * unaffected.
+ */
+export function usePaymentContext(s2sToken, s2sTenantId) {
+    const user = useUser();
+    const [methods, setMethods] = useState(undefined);
+    const [resolveError, setResolveError] = useState(false);
+    const s2s = (path) => s2sToken ? `${path}/S2S` : path;
+    const s2sConfig = s2sToken
+        ? { headers: { Authorization: `Bearer ${s2sToken}`, currentTenantId: s2sTenantId } }
+        : {};
+    const { data: paymentMethodList, isLoading: listLoading, isError: listError, } = useApiQuery(ConfigService.pgV1ApiUrl, s2s('PaymentMethod'), s2sConfig);
+    useEffect(() => {
+        if (!paymentMethodList)
+            return;
+        const validMethods = paymentMethodList.filter(Boolean);
+        if (validMethods.length === 0) {
+            setMethods([]);
+            return;
+        }
+        let cancelled = false;
+        const resolve = async () => {
+            try {
+                const results = await Promise.allSettled(validMethods.map(async (paymentMethod) => {
+                    var _a, _b;
+                    var _c;
+                    // In S2S mode there is no Unity user, but methods should be enabled.
+                    // In non-S2S mode, short-circuit when there is no tenant context.
+                    if (!s2sToken && !(user === null || user === void 0 ? void 0 : user.currentTenantId)) {
+                        return {
+                            paymentMethodID: paymentMethod.paymentMethodID,
+                            name: paymentMethod.name,
+                            enabled: false,
+                            data: null,
+                            paymentVendorConnection: undefined,
+                            isHostedPaymentPage: false,
+                            providerType: null,
+                            providerProps: null,
+                            hasReadPropertiesError: false,
+                            readPropertiesMessageError: null,
+                        };
+                    }
+                    try {
+                        const result = await apiMutate(ConfigService.pgV1ApiUrl, s2s(`AppPaymentVendor/PaymentMethod/${paymentMethod.paymentMethodID}`), Object.assign({ method: 'GET' }, s2sConfig), {});
+                        const paymentVendorConnection = ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.paymentVendorConnection) || null;
+                        const providerType = (_c = paymentVendorConnection === null || paymentVendorConnection === void 0 ? void 0 : paymentVendorConnection.paymentVendorFactoryID) !== null && _c !== void 0 ? _c : null;
+                        const hostedPaymentPageSetup = ((_b = paymentVendorConnection === null || paymentVendorConnection === void 0 ? void 0 : paymentVendorConnection.hostedPaymentPageSetup) === null || _b === void 0 ? void 0 : _b.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 = Boolean(error);
+                            readPropertiesMessageError = error || null;
+                        }
+                        const resolved = {
+                            paymentMethodID: paymentMethod.paymentMethodID,
+                            name: paymentMethod.name,
+                            enabled: (result === null || result === void 0 ? void 0 : result.status) === 200,
+                            data: (result === null || result === void 0 ? void 0 : result.status) === 200 ? result.data : null,
+                            paymentVendorConnection,
+                            isHostedPaymentPage,
+                            providerType,
+                            providerProps,
+                            hasReadPropertiesError,
+                            readPropertiesMessageError,
+                        };
+                        return resolved;
+                    }
+                    catch (error) {
+                        console.error(`Error fetching payment method info for ${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.paymentMethodID}:`, error);
+                        return null;
+                    }
+                }));
+                if (cancelled)
+                    return;
+                const filtered = results
+                    .filter((r) => r.status === 'fulfilled' && r.value !== null)
+                    .map((r) => r.value);
+                setMethods(filtered);
+                setResolveError(false);
+            }
+            catch (error) {
+                if (cancelled)
+                    return;
+                console.error('Error resolving payment methods:', error);
+                setMethods([]);
+                setResolveError(true);
+            }
+        };
+        resolve();
+        return () => {
+            cancelled = true;
+        };
+    }, [paymentMethodList, user === null || user === void 0 ? void 0 : user.currentTenantId, s2sToken, s2sTenantId]);
+    return {
+        methods,
+        isLoading: listLoading || (paymentMethodList !== undefined && methods === undefined),
+        isError: listError || resolveError,
+    };
+}
+//# sourceMappingURL=usePaymentContext.js.map

package/dist/utilities/form/paymentForm/usePaymentContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaymentContext.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/usePaymentContext.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,119 @@
+import { ConfigService } from "../../../configService/index.mjs";
+import { useUser } from "../../auth/useUser.mjs";
+import { apiMutate } from "../../useAxiosMutate.mjs";
+import { stringToProps } from "../../stringUtils.mjs";
+import { useApiQuery } from "../../useApiQuery.mjs";
+import { useEffect, useState } from "react";
+//#region src/utilities/form/paymentForm/usePaymentContext.ts
+/**
+* Wraps today's N+1 payment-method discovery:
+*   1. GET /PaymentMethod                                  (list)
+*   2. GET /AppPaymentVendor/PaymentMethod/{id} for each   (per-method vendor info)
+*
+* When the backend ships a single payment-context endpoint, this hook is the
+* one file that needs to change — replace the implementation with a single
+* `useApiQuery` call that returns the same shape and the rest of the form is
+* unaffected.
+*/
+function usePaymentContext(s2sToken, s2sTenantId) {
+	const user = useUser();
+	const [methods, setMethods] = useState(void 0);
+	const [resolveError, setResolveError] = useState(false);
+	const s2s = (path) => s2sToken ? `${path}/S2S` : path;
+	const s2sConfig = s2sToken ? { headers: {
+		Authorization: `Bearer ${s2sToken}`,
+		currentTenantId: s2sTenantId
+	} } : {};
+	const { data: paymentMethodList, isLoading: listLoading, isError: listError } = useApiQuery(ConfigService.pgV1ApiUrl, s2s("PaymentMethod"), s2sConfig);
+	useEffect(() => {
+		if (!paymentMethodList) return;
+		const validMethods = paymentMethodList.filter(Boolean);
+		if (validMethods.length === 0) {
+			setMethods([]);
+			return;
+		}
+		let cancelled = false;
+		const resolve = async () => {
+			try {
+				const results = await Promise.allSettled(validMethods.map(async (paymentMethod) => {
+					if (!s2sToken && !user?.currentTenantId) return {
+						paymentMethodID: paymentMethod.paymentMethodID,
+						name: paymentMethod.name,
+						enabled: false,
+						data: null,
+						paymentVendorConnection: void 0,
+						isHostedPaymentPage: false,
+						providerType: null,
+						providerProps: null,
+						hasReadPropertiesError: false,
+						readPropertiesMessageError: null
+					};
+					try {
+						const result = await apiMutate(ConfigService.pgV1ApiUrl, s2s(`AppPaymentVendor/PaymentMethod/${paymentMethod.paymentMethodID}`), {
+							method: "GET",
+							...s2sConfig
+						}, {});
+						const paymentVendorConnection = result?.data?.paymentVendorConnection || null;
+						const providerType = paymentVendorConnection?.paymentVendorFactoryID ?? null;
+						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 = Boolean(error_1);
+							readPropertiesMessageError = error_1 || null;
+						}
+						return {
+							paymentMethodID: paymentMethod.paymentMethodID,
+							name: paymentMethod.name,
+							enabled: result?.status === 200,
+							data: result?.status === 200 ? result.data : null,
+							paymentVendorConnection,
+							isHostedPaymentPage,
+							providerType,
+							providerProps,
+							hasReadPropertiesError,
+							readPropertiesMessageError
+						};
+					} catch (error_0) {
+						console.error(`Error fetching payment method info for ${paymentMethod?.paymentMethodID}:`, error_0);
+						return null;
+					}
+				}));
+				if (cancelled) return;
+				setMethods(results.filter((r) => r.status === "fulfilled" && r.value !== null).map((r_0) => r_0.value));
+				setResolveError(false);
+			} catch (error) {
+				if (cancelled) return;
+				console.error("Error resolving payment methods:", error);
+				setMethods([]);
+				setResolveError(true);
+			}
+		};
+		resolve();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		paymentMethodList,
+		user?.currentTenantId,
+		s2sToken,
+		s2sTenantId
+	]);
+	return {
+		methods,
+		isLoading: listLoading || paymentMethodList !== void 0 && methods === void 0,
+		isError: listError || resolveError
+	};
+}
+//#endregion
+export { usePaymentContext };
+
+//# sourceMappingURL=usePaymentContext.mjs.map

package/dist/utilities/form/paymentForm/usePaymentContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaymentContext.mjs","names":["useEffect","useState","useApiQuery","apiMutate","useUser","ConfigService","stringToProps","PaymentVendorFactoryEnum","HostedPaymentPageSetup","IPaymentMethod","IPaymentMethodTab","PaymentContext","methods","isLoading","isError","usePaymentContext","s2sToken","s2sTenantId","user","setMethods","undefined","resolveError","setResolveError","s2s","path","s2sConfig","headers","Authorization","currentTenantId","data","paymentMethodList","listLoading","listError","pgV1ApiUrl","validMethods","filter","Boolean","length","cancelled","resolve","results","Promise","allSettled","map","paymentMethod","paymentMethodID","name","enabled","paymentVendorConnection","isHostedPaymentPage","providerType","providerProps","hasReadPropertiesError","readPropertiesMessageError","result","method","paymentVendorFactoryID","hostedPaymentPageSetup","find","x","useHostedPaymentPage","error","attributes","hostedPaymentPageConfig","customCss","customCSS","baseUrl","resolved","status","console","filtered","r","PromiseFulfilledResult","value"],"sources":["../../../../src/utilities/form/paymentForm/usePaymentContext.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useApiQuery } from '../../useApiQuery';\nimport { apiMutate } from '../../useAxiosMutate';\nimport { useUser } from '../../auth/useUser';\nimport { ConfigService } from '../../../configService';\nimport { stringToProps } from '../../stringUtils';\nimport { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';\nimport {\n  HostedPaymentPageSetup,\n  IPaymentMethod,\n  IPaymentMethodTab,\n} from './AccountPayment.model';\n\nexport interface PaymentContext {\n  /**\n   * Resolved payment methods with vendor connection info and enabled state.\n   * `undefined` while loading; `[]` when the user has no available methods.\n   */\n  methods: IPaymentMethodTab[] | undefined;\n  isLoading: boolean;\n  isError: boolean;\n}\n\n/**\n * Wraps today's N+1 payment-method discovery:\n *   1. GET /PaymentMethod                                  (list)\n *   2. GET /AppPaymentVendor/PaymentMethod/{id} for each   (per-method vendor info)\n *\n * When the backend ships a single payment-context endpoint, this hook is the\n * one file that needs to change — replace the implementation with a single\n * `useApiQuery` call that returns the same shape and the rest of the form is\n * unaffected.\n */\nexport function usePaymentContext(s2sToken?: string, s2sTenantId?: string): PaymentContext {\n  const user = useUser();\n  const [methods, setMethods] = useState<IPaymentMethodTab[] | undefined>(undefined);\n  const [resolveError, setResolveError] = useState(false);\n\n  const s2s = (path: string) => s2sToken ? `${path}/S2S` : path;\n  const s2sConfig = s2sToken\n    ? { headers: { Authorization: `Bearer ${s2sToken}`, currentTenantId: s2sTenantId } }\n    : {};\n\n  const {\n    data: paymentMethodList,\n    isLoading: listLoading,\n    isError: listError,\n  } = useApiQuery<IPaymentMethod[]>(\n    ConfigService.pgV1ApiUrl,\n    s2s('PaymentMethod'),\n    s2sConfig,\n  );\n\n  useEffect(() => {\n    if (!paymentMethodList) return;\n\n    const validMethods = paymentMethodList.filter(Boolean);\n    if (validMethods.length === 0) {\n      setMethods([]);\n      return;\n    }\n\n    let cancelled = false;\n\n    const resolve = async () => {\n      try {\n        const results = await Promise.allSettled(\n          validMethods.map(async (paymentMethod: IPaymentMethod) => {\n            // In S2S mode there is no Unity user, but methods should be enabled.\n            // In non-S2S mode, short-circuit when there is no tenant context.\n            if (!s2sToken && !user?.currentTenantId) {\n              return {\n                paymentMethodID: paymentMethod.paymentMethodID,\n                name: paymentMethod.name,\n                enabled: false,\n                data: null,\n                paymentVendorConnection: undefined,\n                isHostedPaymentPage: false,\n                providerType: null,\n                providerProps: null,\n                hasReadPropertiesError: false,\n                readPropertiesMessageError: null,\n              } as IPaymentMethodTab;\n            }\n\n            try {\n              const result = await apiMutate(\n                ConfigService.pgV1ApiUrl,\n                s2s(`AppPaymentVendor/PaymentMethod/${paymentMethod.paymentMethodID}`),\n                { method: 'GET', ...s2sConfig },\n                {},\n              );\n\n              const paymentVendorConnection = result?.data?.paymentVendorConnection || null;\n              const providerType =\n                (paymentVendorConnection?.paymentVendorFactoryID as PaymentVendorFactoryEnum | null) ?? null;\n              const hostedPaymentPageSetup =\n                paymentVendorConnection?.hostedPaymentPageSetup?.find(\n                  (x: HostedPaymentPageSetup) => x.useHostedPaymentPage,\n                ) || null;\n              const isHostedPaymentPage = hostedPaymentPageSetup?.useHostedPaymentPage || false;\n\n              let providerProps: any = {};\n              let hasReadPropertiesError = false;\n              let readPropertiesMessageError: string | null = null;\n\n              if (isHostedPaymentPage) {\n                const { error, attributes } = stringToProps(\n                  hostedPaymentPageSetup?.hostedPaymentPageConfig,\n                );\n\n                providerProps = {\n                  customCss: hostedPaymentPageSetup?.customCSS,\n                  attributes,\n                  ...(attributes?.baseUrl ? { baseUrl: attributes?.baseUrl } : null),\n                };\n\n                hasReadPropertiesError = Boolean(error);\n                readPropertiesMessageError = error || null;\n              }\n\n              const resolved: IPaymentMethodTab = {\n                paymentMethodID: paymentMethod.paymentMethodID,\n                name: paymentMethod.name,\n                enabled: result?.status === 200,\n                data: result?.status === 200 ? result.data : null,\n                paymentVendorConnection,\n                isHostedPaymentPage,\n                providerType,\n                providerProps,\n                hasReadPropertiesError,\n                readPropertiesMessageError,\n              };\n              return resolved;\n            } catch (error) {\n              console.error(\n                `Error fetching payment method info for ${paymentMethod?.paymentMethodID}:`,\n                error,\n              );\n              return null;\n            }\n          }),\n        );\n\n        if (cancelled) return;\n\n        const filtered = results\n          .filter((r): r is PromiseFulfilledResult<IPaymentMethodTab | null> =>\n            r.status === 'fulfilled' && r.value !== null,\n          )\n          .map((r) => r.value as IPaymentMethodTab);\n\n        setMethods(filtered);\n        setResolveError(false);\n      } catch (error) {\n        if (cancelled) return;\n        console.error('Error resolving payment methods:', error);\n        setMethods([]);\n        setResolveError(true);\n      }\n    };\n\n    resolve();\n    return () => {\n      cancelled = true;\n    };\n  }, [paymentMethodList, user?.currentTenantId, s2sToken, s2sTenantId]);\n\n  return {\n    methods,\n    isLoading: listLoading || (paymentMethodList !== undefined && methods === undefined),\n    isError: listError || resolveError,\n  };\n}\n"],"mappings":"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"}

package/dist/utilities/form/paymentForm/usePaymentProviderForm.d.ts

@@ -9,5 +9,5 @@ import { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';
  * @param {(paymentFormResult: any) => void} onStatusChange
  * @return {*}  {*}
  */
-export declare const usePaymentProviderForm: (paymentMethod: PaymentTenderTypeEnum, providerType: any, providerProps: any, onStatusChange?: (paymentFormResult: any) => void, paymentDetails?: any, data?: PaymentMethodData) => any;
+export declare const usePaymentProviderForm: (paymentMethod: PaymentTenderTypeEnum, providerType: any, providerProps: any, onStatusChange?: (paymentFormResult: any) => void, paymentDetails?: any, data?: PaymentMethodData, s2sToken?: string, s2sTenantId?: string) => any;
 //# sourceMappingURL=usePaymentProviderForm.d.ts.map

package/dist/utilities/form/paymentForm/usePaymentProviderForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePaymentProviderForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/usePaymentProviderForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAM7E;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,yLA+ClC,CAAC"}
+{"version":3,"file":"usePaymentProviderForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/usePaymentProviderForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAM7E;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,kOAmDlC,CAAC"}

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

@@ -12,14 +12,14 @@ import { PaymentusForm } from './vendorsForms/PaymentusForm';
  * @param {(paymentFormResult: any) => void} onStatusChange
  * @return {*}  {*}
  */
-export const usePaymentProviderForm = (paymentMethod, providerType, providerProps, onStatusChange, paymentDetails, data) => {
+export const usePaymentProviderForm = (paymentMethod, providerType, providerProps, onStatusChange, paymentDetails, data, s2sToken, s2sTenantId) => {
     switch (providerType) {
         case PaymentVendorFactoryEnum.ICheck:
             return (React.createElement(ICheckForm, Object.assign({ paymentMethod: paymentMethod, onStatusChange: onStatusChange, paymentDetails: paymentDetails, paymentData: data }, providerProps)));
         case PaymentVendorFactoryEnum.Fiserv:
             return (React.createElement(FiservForm, Object.assign({ paymentMethod: paymentMethod, onStatusChange: onStatusChange, paymentData: data }, providerProps)));
         case PaymentVendorFactoryEnum.Paymentus:
-            return (React.createElement(PaymentusForm, Object.assign({ paymentMethod: paymentMethod, onStatusChange: onStatusChange, paymentDetails: paymentDetails, paymentData: data }, providerProps)));
+            return (React.createElement(PaymentusForm, Object.assign({ paymentMethod: paymentMethod, onStatusChange: onStatusChange, paymentDetails: paymentDetails, paymentData: data, s2sToken: s2sToken, s2sTenantId: s2sTenantId }, providerProps)));
         case PaymentVendorFactoryEnum.Stripe:
             // TODO: StripeForm component
             return React.createElement(React.Fragment, null);

package/dist/utilities/form/paymentForm/usePaymentProviderForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePaymentProviderForm.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/usePaymentProviderForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,aAAgD,EAChD,YAAiB,EACjB,aAAkB,EAClB,cAAiD,EACjD,cAAoB,EACpB,IAAwB,EACnB,EAAE,CAAC;IACR,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,wBAAwB,CAAC,MAAM;YAClC,OAAO,CACL,oBAAC,UAAU,kBACT,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,IAAI,IACb,aAAa,EACjB,CACH,CAAC;QACJ,KAAK,wBAAwB,CAAC,MAAM;YAClC,OAAO,CACL,oBAAC,UAAU,kBACT,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,IAAI,IACb,aAAa,EACjB,CACH,CAAC;QACJ,KAAK,wBAAwB,CAAC,SAAS;YACrC,OAAO,CACL,oBAAC,aAAa,kBACZ,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,IAAI,IACb,aAAa,EACjB,CACH,CAAC;QACJ,KAAK,wBAAwB,CAAC,MAAM;YAClC,6BAA6B;YAC7B,OAAO,yCAAK,CAAC;QACf,KAAK,wBAAwB,CAAC,YAAY;YACxC,+BAA+B;YAC/B,OAAO,yCAAK,CAAC;QACf;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AAAA,CACF,CAAC"}
+{"version":3,"file":"usePaymentProviderForm.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/usePaymentProviderForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,aAAgD,EAChD,YAAiB,EACjB,aAAkB,EAClB,cAAiD,EACjD,cAAoB,EACpB,IAAwB,EACxB,QAAiB,EACjB,WAAoB,EACf,EAAE,CAAC;IACR,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,wBAAwB,CAAC,MAAM;YAClC,OAAO,CACL,oBAAC,UAAU,kBACT,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,IAAI,IACb,aAAa,EACjB,CACH,CAAC;QACJ,KAAK,wBAAwB,CAAC,MAAM;YAClC,OAAO,CACL,oBAAC,UAAU,kBACT,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,IAAI,IACb,aAAa,EACjB,CACH,CAAC;QACJ,KAAK,wBAAwB,CAAC,SAAS;YACrC,OAAO,CACL,oBAAC,aAAa,kBACZ,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,IAAI,EACjB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,IACpB,aAAa,EACjB,CACH,CAAC;QACJ,KAAK,wBAAwB,CAAC,MAAM;YAClC,6BAA6B;YAC7B,OAAO,yCAAK,CAAC;QACf,KAAK,wBAAwB,CAAC,YAAY;YACxC,+BAA+B;YAC/B,OAAO,yCAAK,CAAC;QACf;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AAAA,CACF,CAAC"}