{"version":3,"file":"ICheckForm.mjs","names":["React","useEffect","useState","useCallback","useTheme","PaymentDetails","PaymentMethodData","useTranslation","PaymentTenderTypeEnum","PaymentVendorFactoryEnum","UdpFlexbox","UdpSpinner","UdpMessageBar","iCheckFormProps","paymentMethod","onStatusChange","paymentFormResult","paymentDetails","baseUrl","customCss","attributes","paymentData","defaultCssStyles","theme","palette","background","default","paper","text","primary","divider","main","trim","ICheckForm","FC","CreditCard","iframePaymentMethod","src","setSrc","setResponse","loading","setLoading","error","setError","t","defaultCss","handleICheckResponse","response","isError","payload","JSON","stringify","paymentFormResponse","isValid","message","token","errorCode","errorMessage","selectedHostedPayment","ICheck","result","handleLoad","handleError","urlAttributes","queryParams","mergedDetails","queryString","Object","keys","filter","key","map","encodeURIComponent","join","e","console","defaultValue","sourceUrl","expectedOrigin","URL","origin","handleMessage","MessageEvent","jsonData","data","constructor","name","source","window","addEventListener","removeEventListener","display","border"],"sources":["../../../../../src/utilities/form/paymentForm/vendorsForms/ICheckForm.tsx"],"sourcesContent":["import React, { useEffect, useState, useCallback } from 'react';\nimport { 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 { UdpFlexbox } from '../../../../UI/fluent-web-components/UdpFlexbox';\nimport { UdpSpinner } from '../../../../UI/fluent-web-components/UdpSpinner';\nimport { UdpMessageBar } from '../../../../UI/fluent-web-components/UdpMessageBar';\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 = ({\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 [, 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(\n t('payments.form.iframeSourceError', {\n defaultValue: 'Error generating iframe source: {{message}}',\n message: e?.message,\n })\n );\n }\n }, [attributes, paymentDetails, baseUrl, iframePaymentMethod, customCss, t]);\n\n useEffect(() => {\n // Restrict postMessage handling to the iCheck iframe origin. Prefer the\n // attributes.baseUrl override (set per tenant) when present, otherwise the\n // default baseUrl. Without this any embedding context can spoof a token.\n const sourceUrl = (attributes as any)?.baseUrl || baseUrl;\n let expectedOrigin = '';\n try {\n expectedOrigin = new URL(sourceUrl).origin;\n } catch {\n expectedOrigin = '';\n }\n\n const handleMessage = (e: MessageEvent) => {\n if (expectedOrigin && e.origin !== expectedOrigin) return;\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 handleICheckResponse(jsonData);\n setResponse(jsonData);\n }\n }\n };\n\n window.addEventListener('message', handleMessage);\n\n return () => {\n window.removeEventListener('message', handleMessage);\n };\n }, [baseUrl, attributes, handleICheckResponse]);\n\n if (error) {\n return (\n \n {t('payments.form.hostedRenderError', {\n defaultValue:\n 'There was an error rendering the hosted payment form. Please check your settings and try again',\n })}\n {': '}\n {error}\n \n );\n }\n\n return (\n <>\n {loading && (\n \n \n \n )}\n\n \n \n );\n};\n"],"mappings":"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"}