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

package/dist/PaymentForm-CWDdRUuF.js.map

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