{"version":3,"file":"FiservForm.mjs","names":["React","useEffect","useMemo","useState","useCallback","PaymentTenderTypeEnum","useTranslation","useTheme","UdpFlexbox","UdpText","UdpSpinner","UdpMessageBar","defaultCssStyles","theme","palette","grey","primary","main","background","paper","text","secondary","error","trim","DEFAULT_CREDIT_CARD_PLACEHOLDERS","DEFAULT_CREDIT_CARD_FEATURES","DEFAULT_ECHECK_PLACEHOLDERS","DEFAULT_ECHECK_FEATURES","FiservForm","paymentMethod","CreditCard","onStatusChange","paymentFormResult","baseUrl","customCss","attributes","paymentData","loading","setLoading","setToken","setError","t","defaultCss","handleFiservResponse","response","isError","errorCode","errorMessage","token","ECheck","message","paymentFormResponse","isValid","payload","handleLoad","handleError","expectedOrigin","URL","origin","handleMessage","event","MessageEvent","data","JSON","parse","console","window","addEventListener","removeEventListener","iFrameURL","url","encodedCss","encodeURIComponent","creditCardCssStyles","queryParams","Object","entries","map","key","value","toLowerCase","toString","join","eCheckCssStyles","queryParamsECheck","defaultValue","display","border"],"sources":["../../../../../src/utilities/form/paymentForm/vendorsForms/FiservForm.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState, useCallback } from 'react';\nimport { PaymentTenderTypeEnum } from '../../../../enums/paymentTenderTypeEnum';\nimport { useTranslation } from 'react-i18next';\nimport { useTheme } from '@material-ui/core';\nimport { UdpFlexbox } from '../../../../UI/fluent-web-components/UdpFlexbox';\nimport { UdpText } from '../../../../UI/fluent-web-components/UdpText';\nimport { UdpSpinner } from '../../../../UI/fluent-web-components/UdpSpinner';\nimport { UdpMessageBar } from '../../../../UI/fluent-web-components/UdpMessageBar';\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 [, 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 // Restrict postMessage handling to the vendor iframe origin. Without this,\n // any embedding context can spoof a tokenization payload.\n let expectedOrigin = '';\n try {\n expectedOrigin = new URL(baseUrl).origin;\n } catch {\n expectedOrigin = '';\n }\n\n const handleMessage = (event: MessageEvent) => {\n if (expectedOrigin && event.origin !== expectedOrigin) return;\n\n try {\n const data = JSON.parse(event.data);\n setToken(data.message);\n handleFiservResponse(data);\n } catch (error) {\n console.error('Error parsing the event data', error);\n }\n };\n\n window.addEventListener('message', handleMessage, false);\n\n return () => {\n window.removeEventListener('message', handleMessage, false);\n };\n }, [paymentMethod, baseUrl, handleFiservResponse]);\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 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 );\n};\n"],"mappings":"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"}