udp-react-enterprise-component-library 26.5.0-beta.11 → 26.5.0-beta.13

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

@@ -1,11 +1,11 @@
+import React from 'react';
 import { PaymentDetails, PaymentMethodData } from './AccountPayment.model';
 import { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';
 interface BankAccountFormProps {
-    accountTypes?: any[];
-    isFormDisabled?: boolean;
-}
-interface BankAccountFormProps {
-    bankAccountTypes?: any[];
+    bankAccountTypes?: {
+        name: string;
+        value: string;
+    }[];
     isFormDisabled?: boolean;
     paymentDetails: PaymentDetails;
     providerType?: PaymentVendorFactoryEnum | null;
@@ -16,34 +16,17 @@ interface BankAccountFormProps {
     onStatusChange?: (paymentFormResult: any) => void;
     enabled?: boolean | null;
     actionLabel?: string;
+    /** When false, the manual eCheck form hides its "save" checkbox. */
+    allowSaveMethod?: boolean;
     data?: PaymentMethodData;
     externalId?: string;
+    setSelectedPaymentAccount?: (paymentAccount: any) => void;
 }
 /**
- * `BankAccountForm` is a React functional component that renders a form for managing bank accounts.
- * It supports both hosted payment pages and direct input forms for bank account details.
- *
- * @param {Object} props - The properties passed to the component.
- * @param {Array} props.bankAccountTypes - An array of available bank account types.
- * @param {Object} props.data - Data related to the bank account form.
- * @param {string} props.externalId - External identifier for the bank account.
- * @param {boolean} [props.isFormDisabled=false] - Flag to disable the form.
- * @param {string|null} [props.providerType=null] - Type of the payment provider.
- * @param {Object|null} [props.providerProps=null] - Properties for the payment provider.
- * @param {Object} props.paymentDetails - Details of the payment.
- * @param {boolean} props.isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
- * @param {boolean} props.hasReadPropertiesError - Flag to indicate if there was an error reading properties.
- * @param {string} props.readPropertiesMessageError - Error message for reading properties.
- * @param {Function} props.onStatusChange - Callback function to handle status changes.
- * @param {boolean} props.enabled - Flag to indicate if the form is enabled.
- * @param {Function} props.setSelectedPaymentAccount - Callback function to set the selected payment account.
- * @param {string} props.actionLabel - The label for the action button.
- * @param {Object} restProps - Additional properties passed to the component.
- *
- * @returns {JSX.Element} The rendered component.
+ * eCheck / bank-account branch of the payment form. Mirrors the credit-card
+ * branch: radio list of saved accounts when any exist + "Other / new account"
+ * option per D3, otherwise renders the appropriate entry form directly.
  */
-export declare const BankAccountForm: ({ bankAccountTypes, data, externalId, isFormDisabled, providerType, providerProps, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, enabled, actionLabel, setSelectedPaymentAccount, ...restProps }: BankAccountFormProps & {
-    [key: string]: any;
-}) => any;
+export declare const BankAccountForm: ({ bankAccountTypes, data, externalId, isFormDisabled, providerType, providerProps, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, actionLabel, allowSaveMethod, setSelectedPaymentAccount, }: BankAccountFormProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=BankAccountForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/BankAccountForm.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AAanF,UAAU,oBAAoB;IAC5B,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAcD,UAAU,oBAAoB;IAC5B,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,sBAAsB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxC,0BAA0B,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,GAAG,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,eAAe;;SAqG3B,CAAC"}
+{"version":3,"file":"BankAccountForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/BankAccountForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AAQnF,UAAU,oBAAoB;IAC5B,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACrC,sBAAsB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxC,0BAA0B,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,GAAG,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB,CAAC,EAAE,CAAC,cAAc,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,qSAgI3B,CAAC"}

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

@@ -1,94 +1,80 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect, useState } from 'react';
-import { makeStyles } from '@material-ui/core';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';
+import { UdpRadioGroup } from '../../../UI/fluent-web-components/UdpRadioGroup';
+import { UdpSpinner } from '../../../UI/fluent-web-components/UdpSpinner';
 import { usePaymentProviderForm } from './usePaymentProviderForm';
 import { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';
-import { useUser } from '../../auth/useUser';
-import { useAxiosGet } from '../../useAxiosGet';
-import { Box } from '../../../UI/Box';
-import { LinearProgress } from '../../../UI/loading/LinearProgress';
-import PaymentDropdown from './PaymentDropdown';
-import { FluentButton } from '../../../UI/inputs/buttons/FluentButton';
-import { UnityFluentIcon } from '../../iconLibrary/UnityFluentIcon';
-import { getIconFromName } from '../../tree/TreeUtilities';
+import { useApiQuery } from '../../useApiQuery';
 import { HostedPaymentError } from './HostedPaymentError';
 import { NewECheckForm } from './NewECheckForm';
 import { ConfigService } from '../../../configService';
-const useStyles = makeStyles((theme) => ({
-    formControl: {
-        width: '100%',
-        marginTop: '5px'
-    },
-    formControlCheck: {
-        width: '100%',
-        marginTop: '5px',
-        marginLeft: '3px'
-    }
-}));
+const OTHER_RADIO_VALUE = '__other__';
 /**
- * `BankAccountForm` is a React functional component that renders a form for managing bank accounts.
- * It supports both hosted payment pages and direct input forms for bank account details.
- *
- * @param {Object} props - The properties passed to the component.
- * @param {Array} props.bankAccountTypes - An array of available bank account types.
- * @param {Object} props.data - Data related to the bank account form.
- * @param {string} props.externalId - External identifier for the bank account.
- * @param {boolean} [props.isFormDisabled=false] - Flag to disable the form.
- * @param {string|null} [props.providerType=null] - Type of the payment provider.
- * @param {Object|null} [props.providerProps=null] - Properties for the payment provider.
- * @param {Object} props.paymentDetails - Details of the payment.
- * @param {boolean} props.isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
- * @param {boolean} props.hasReadPropertiesError - Flag to indicate if there was an error reading properties.
- * @param {string} props.readPropertiesMessageError - Error message for reading properties.
- * @param {Function} props.onStatusChange - Callback function to handle status changes.
- * @param {boolean} props.enabled - Flag to indicate if the form is enabled.
- * @param {Function} props.setSelectedPaymentAccount - Callback function to set the selected payment account.
- * @param {string} props.actionLabel - The label for the action button.
- * @param {Object} restProps - Additional properties passed to the component.
- *
- * @returns {JSX.Element} The rendered component.
+ * eCheck / bank-account branch of the payment form. Mirrors the credit-card
+ * branch: radio list of saved accounts when any exist + "Other / new account"
+ * option per D3, otherwise renders the appropriate entry form directly.
  */
-export const BankAccountForm = (_a) => {
-    var { bankAccountTypes = [], data, externalId, isFormDisabled = false, providerType = null, providerProps = null, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, enabled, actionLabel, setSelectedPaymentAccount } = _a, restProps = __rest(_a, ["bankAccountTypes", "data", "externalId", "isFormDisabled", "providerType", "providerProps", "paymentDetails", "isHostedPaymentPage", "hasReadPropertiesError", "readPropertiesMessageError", "onStatusChange", "enabled", "actionLabel", "setSelectedPaymentAccount"]);
-    const classes = useStyles();
+export const BankAccountForm = ({ bankAccountTypes = [], data, externalId, isFormDisabled = false, providerType = null, providerProps = null, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, actionLabel, allowSaveMethod = true, setSelectedPaymentAccount, }) => {
     const { t } = useTranslation();
-    const user = useUser();
-    const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.ECheck, providerType, providerProps, onStatusChange, paymentDetails, data);
-    const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
-    // @ts-ignore
-    const [{ data: paymentAccounts, loading: loadingPaymentAccounts }] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenECheck/${externalId}`, {}, false);
-    const handleShowHostedPaymentPage = () => {
-        setShowHostedPaymentPage(true);
-        onStatusChange && onStatusChange({ isValid: false });
-    };
+    const { data: paymentAccounts, isLoading: loadingPaymentAccounts } = useApiQuery(ConfigService.pgV1ApiUrl, `PaymentTokenECheck/${externalId}`, {}, { enabled: Boolean(externalId) });
+    const savedMethods = paymentAccounts !== null && paymentAccounts !== void 0 ? paymentAccounts : [];
+    const hasSavedMethods = savedMethods.length > 0;
+    const [selected, setSelected] = useState(OTHER_RADIO_VALUE);
     useEffect(() => {
-        const showHostedPaymentPageByDefault = (isHostedPaymentPage && (paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts.length) > 0);
-        const enableSubmitForm = (isHostedPaymentPage === false || (paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts.length) > 0);
-        setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
-        onStatusChange && onStatusChange({ isValid: enableSubmitForm });
-    }, [isHostedPaymentPage, paymentAccounts]);
+        var _a;
+        setSelected(((_a = savedMethods[0]) === null || _a === void 0 ? void 0 : _a.paymentTokenID) || OTHER_RADIO_VALUE);
+    }, [savedMethods]);
+    useEffect(() => {
+        if (selected && selected !== OTHER_RADIO_VALUE) {
+            const sel = savedMethods.find((s) => (s === null || s === void 0 ? void 0 : s.paymentTokenID) === selected);
+            setSelectedPaymentAccount === null || setSelectedPaymentAccount === void 0 ? void 0 : setSelectedPaymentAccount(sel || null);
+        }
+        else {
+            setSelectedPaymentAccount === null || setSelectedPaymentAccount === void 0 ? void 0 : setSelectedPaymentAccount(null);
+        }
+    }, [selected, savedMethods, setSelectedPaymentAccount]);
+    const showOtherForm = selected === OTHER_RADIO_VALUE;
+    useEffect(() => {
+        if (!showOtherForm) {
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange({ isValid: true });
+            return;
+        }
+        if (isHostedPaymentPage === false) {
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange({ isValid: true });
+        }
+        else {
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange({ isValid: false });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showOtherForm, isHostedPaymentPage]);
+    const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.ECheck, providerType, providerProps, onStatusChange, paymentDetails, data);
+    const items = useMemo(() => {
+        const savedItems = savedMethods.map((m) => {
+            var _a;
+            var _b, _c;
+            const nickname = (_b = (_a = m === null || m === void 0 ? void 0 : m.paymentToken) === null || _a === void 0 ? void 0 : _a.nickname) !== null && _b !== void 0 ? _b : t('Saved account');
+            const routing = (m === null || m === void 0 ? void 0 : m.routingNumber) ? ` (${m.routingNumber})` : '';
+            return {
+                label: `${nickname}${routing}`,
+                value: String((_c = m === null || m === void 0 ? void 0 : m.paymentTokenID) !== null && _c !== void 0 ? _c : ''),
+            };
+        });
+        return [
+            ...savedItems,
+            {
+                label: actionLabel || t('Use a different account'),
+                value: OTHER_RADIO_VALUE,
+            },
+        ];
+    }, [savedMethods, actionLabel, t]);
     if (loadingPaymentAccounts) {
-        return (React.createElement(Box, { sx: { width: '100%' } }, React.createElement(LinearProgress, null)));
-    }
-    if (!showHostedPaymentPage && (paymentAccounts === null || paymentAccounts === void 0 ? void 0 : paymentAccounts.length) > 0) {
-        return (React.createElement(React.Fragment, null, React.createElement(PaymentDropdown, { paymentAccounts: paymentAccounts, setSelectedPaymentAccount: setSelectedPaymentAccount, paymentType: PaymentTenderTypeEnum.ECheck }), React.createElement(Box, { textAlign: "center", mt: 3 }, React.createElement(FluentButton, { variant: "outlined", color: "primary", onClick: handleShowHostedPaymentPage, size: "small", startIcon: React.createElement(UnityFluentIcon, { icon: getIconFromName('BankIcon') }), style: { padding: "18px 20px" } }, actionLabel || t('Enter Bank Account Details')))));
+        return (React.createElement(UdpFlexbox, { direction: "row", justify: "center", align: "center" }, React.createElement(UdpSpinner, { size: "medium" })));
     }
     if (hasReadPropertiesError) {
-        return (React.createElement(HostedPaymentError, { error: "Error", message: readPropertiesMessageError || t('Unknown error') }));
+        return (React.createElement(HostedPaymentError, { error: t('Configuration error'), message: readPropertiesMessageError || t('Unknown error') }));
     }
-    return showHostedPaymentPage &&
-        isHostedPaymentPage ?
-        paymentProviderForm : (React.createElement(NewECheckForm, { isFormDisabled: isFormDisabled, classes: classes, bankAccountTypes: bankAccountTypes }));
+    return (React.createElement(UdpFlexbox, { direction: "column", gap: "sm", wrap: "nowrap" }, hasSavedMethods && (React.createElement(UdpRadioGroup, { label: t('Saved accounts'), name: "savedBankAccount", orientation: "vertical", disabled: isFormDisabled, value: selected, items: items, onChange: (e) => setSelected(String(e.target.value)) })), showOtherForm &&
+        (isHostedPaymentPage ? (paymentProviderForm) : (React.createElement(NewECheckForm, { isFormDisabled: isFormDisabled, bankAccountTypes: bankAccountTypes, allowSaveMethod: allowSaveMethod })))));
 };
 //# sourceMappingURL=BankAccountForm.js.map

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

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

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

@@ -1,210 +1,91 @@
-import { c } from "../../../reactCompilerRuntime.mjs";
-import { FluentButton } from "../../../UI/inputs/buttons/FluentButton.mjs";
 import { ConfigService } from "../../../configService/index.mjs";
-import { useUser } from "../../auth/useUser.mjs";
-import { UnityFluentIcon } from "../../iconLibrary/UnityFluentIcon.mjs";
-import { getIconFromName } from "../../tree/TreeUtilities.mjs";
-import { useAxiosGet } from "../../useAxiosGet.mjs";
 import { PaymentTenderTypeEnum } from "../../../enums/paymentTenderTypeEnum.mjs";
-import { LinearProgress as LinearProgress$1 } from "../../../UI/loading/LinearProgress.mjs";
-import { Box as Box$1 } from "../../../UI/Box.mjs";
+import { useApiQuery } from "../../useApiQuery.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpRadioGroup } from "../../../UI/fluent-web-components/UdpRadioGroup.mjs";
+import { UdpSpinner } from "../../../UI/fluent-web-components/UdpSpinner.mjs";
 import { usePaymentProviderForm } from "./usePaymentProviderForm.mjs";
-import PaymentDropdown from "./PaymentDropdown.mjs";
 import { HostedPaymentError } from "./HostedPaymentError.mjs";
 import { NewECheckForm } from "./NewECheckForm.mjs";
-import React, { useEffect, useState } from "react";
-import { makeStyles } from "@material-ui/core";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 //#region src/utilities/form/paymentForm/BankAccountForm.tsx
-const useStyles = makeStyles((theme) => ({
-	formControl: {
-		width: "100%",
-		marginTop: "5px"
-	},
-	formControlCheck: {
-		width: "100%",
-		marginTop: "5px",
-		marginLeft: "3px"
-	}
-}));
+const OTHER_RADIO_VALUE = "__other__";
 /**
-* `BankAccountForm` is a React functional component that renders a form for managing bank accounts.
-* It supports both hosted payment pages and direct input forms for bank account details.
-*
-* @param {Object} props - The properties passed to the component.
-* @param {Array} props.bankAccountTypes - An array of available bank account types.
-* @param {Object} props.data - Data related to the bank account form.
-* @param {string} props.externalId - External identifier for the bank account.
-* @param {boolean} [props.isFormDisabled=false] - Flag to disable the form.
-* @param {string|null} [props.providerType=null] - Type of the payment provider.
-* @param {Object|null} [props.providerProps=null] - Properties for the payment provider.
-* @param {Object} props.paymentDetails - Details of the payment.
-* @param {boolean} props.isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
-* @param {boolean} props.hasReadPropertiesError - Flag to indicate if there was an error reading properties.
-* @param {string} props.readPropertiesMessageError - Error message for reading properties.
-* @param {Function} props.onStatusChange - Callback function to handle status changes.
-* @param {boolean} props.enabled - Flag to indicate if the form is enabled.
-* @param {Function} props.setSelectedPaymentAccount - Callback function to set the selected payment account.
-* @param {string} props.actionLabel - The label for the action button.
-* @param {Object} restProps - Additional properties passed to the component.
-*
-* @returns {JSX.Element} The rendered component.
+* eCheck / bank-account branch of the payment form. Mirrors the credit-card
+* branch: radio list of saved accounts when any exist + "Other / new account"
+* option per D3, otherwise renders the appropriate entry form directly.
 */
-const BankAccountForm = (t0) => {
-	const $ = c(39);
-	const { bankAccountTypes: t1, data, externalId, isFormDisabled: t2, providerType: t3, providerProps: t4, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, actionLabel, setSelectedPaymentAccount } = t0;
-	let t5;
-	if ($[0] !== t1) {
-		t5 = t1 === void 0 ? [] : t1;
-		$[0] = t1;
-		$[1] = t5;
-	} else t5 = $[1];
-	const bankAccountTypes = t5;
-	const isFormDisabled = t2 === void 0 ? false : t2;
-	const providerType = t3 === void 0 ? null : t3;
-	const providerProps = t4 === void 0 ? null : t4;
-	const classes = useStyles();
+const BankAccountForm = ({ bankAccountTypes = [], data, externalId, isFormDisabled = false, providerType = null, providerProps = null, paymentDetails, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, onStatusChange, actionLabel, allowSaveMethod = true, setSelectedPaymentAccount }) => {
 	const { t } = useTranslation();
-	useUser();
-	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.ECheck, providerType, providerProps, onStatusChange, paymentDetails, data);
-	const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
-	let t6;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {};
-		$[2] = t6;
-	} else t6 = $[2];
-	const [t7] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenECheck/${externalId}`, t6, false);
-	const { data: paymentAccounts, loading: loadingPaymentAccounts } = t7;
-	let t8;
-	if ($[3] !== onStatusChange) {
-		t8 = () => {
-			setShowHostedPaymentPage(true);
-			onStatusChange && onStatusChange({ isValid: false });
-		};
-		$[3] = onStatusChange;
-		$[4] = t8;
-	} else t8 = $[4];
-	const handleShowHostedPaymentPage = t8;
-	let t9;
-	if ($[5] !== isHostedPaymentPage || $[6] !== onStatusChange || $[7] !== paymentAccounts?.length) {
-		t9 = () => {
-			const showHostedPaymentPageByDefault = isHostedPaymentPage && paymentAccounts?.length > 0;
-			const enableSubmitForm = isHostedPaymentPage === false || paymentAccounts?.length > 0;
-			setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
-			onStatusChange && onStatusChange({ isValid: enableSubmitForm });
-		};
-		$[5] = isHostedPaymentPage;
-		$[6] = onStatusChange;
-		$[7] = paymentAccounts?.length;
-		$[8] = t9;
-	} else t9 = $[8];
-	let t10;
-	if ($[9] !== isHostedPaymentPage || $[10] !== paymentAccounts) {
-		t10 = [isHostedPaymentPage, paymentAccounts];
-		$[9] = isHostedPaymentPage;
-		$[10] = paymentAccounts;
-		$[11] = t10;
-	} else t10 = $[11];
-	useEffect(t9, t10);
-	if (loadingPaymentAccounts) {
-		let t11;
-		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-			t11 = /* @__PURE__ */ React.createElement(Box$1, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null));
-			$[12] = t11;
-		} else t11 = $[12];
-		return t11;
-	}
-	if (!showHostedPaymentPage && paymentAccounts?.length > 0) {
-		let t11;
-		if ($[13] !== paymentAccounts || $[14] !== setSelectedPaymentAccount) {
-			t11 = /* @__PURE__ */ React.createElement(PaymentDropdown, {
-				paymentAccounts,
-				setSelectedPaymentAccount,
-				paymentType: PaymentTenderTypeEnum.ECheck
-			});
-			$[13] = paymentAccounts;
-			$[14] = setSelectedPaymentAccount;
-			$[15] = t11;
-		} else t11 = $[15];
-		let t12;
-		let t13;
-		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-			t12 = /* @__PURE__ */ React.createElement(UnityFluentIcon, { icon: getIconFromName("BankIcon") });
-			t13 = { padding: "18px 20px" };
-			$[16] = t12;
-			$[17] = t13;
-		} else {
-			t12 = $[16];
-			t13 = $[17];
+	const { data: paymentAccounts, isLoading: loadingPaymentAccounts } = useApiQuery(ConfigService.pgV1ApiUrl, `PaymentTokenECheck/${externalId}`, {}, { enabled: Boolean(externalId) });
+	const savedMethods = paymentAccounts ?? [];
+	const hasSavedMethods = savedMethods.length > 0;
+	const [selected, setSelected] = useState(OTHER_RADIO_VALUE);
+	useEffect(() => {
+		setSelected(savedMethods[0]?.paymentTokenID || OTHER_RADIO_VALUE);
+	}, [savedMethods]);
+	useEffect(() => {
+		if (selected && selected !== OTHER_RADIO_VALUE) {
+			const sel = savedMethods.find((s) => s?.paymentTokenID === selected);
+			setSelectedPaymentAccount?.(sel || null);
+		} else setSelectedPaymentAccount?.(null);
+	}, [
+		selected,
+		savedMethods,
+		setSelectedPaymentAccount
+	]);
+	const showOtherForm = selected === OTHER_RADIO_VALUE;
+	useEffect(() => {
+		if (!showOtherForm) {
+			onStatusChange?.({ isValid: true });
+			return;
 		}
-		let t14;
-		if ($[18] !== actionLabel || $[19] !== t) {
-			t14 = actionLabel || t("Enter Bank Account Details");
-			$[18] = actionLabel;
-			$[19] = t;
-			$[20] = t14;
-		} else t14 = $[20];
-		let t15;
-		if ($[21] !== handleShowHostedPaymentPage || $[22] !== t14) {
-			t15 = /* @__PURE__ */ React.createElement(Box$1, {
-				textAlign: "center",
-				mt: 3
-			}, /* @__PURE__ */ React.createElement(FluentButton, {
-				variant: "outlined",
-				color: "primary",
-				onClick: handleShowHostedPaymentPage,
-				size: "small",
-				startIcon: t12,
-				style: t13
-			}, t14));
-			$[21] = handleShowHostedPaymentPage;
-			$[22] = t14;
-			$[23] = t15;
-		} else t15 = $[23];
-		let t16;
-		if ($[24] !== t11 || $[25] !== t15) {
-			t16 = /* @__PURE__ */ React.createElement(React.Fragment, null, t11, t15);
-			$[24] = t11;
-			$[25] = t15;
-			$[26] = t16;
-		} else t16 = $[26];
-		return t16;
-	}
-	if (hasReadPropertiesError) {
-		let t11;
-		if ($[27] !== readPropertiesMessageError || $[28] !== t) {
-			t11 = readPropertiesMessageError || t("Unknown error");
-			$[27] = readPropertiesMessageError;
-			$[28] = t;
-			$[29] = t11;
-		} else t11 = $[29];
-		let t12;
-		if ($[30] !== t11) {
-			t12 = /* @__PURE__ */ React.createElement(HostedPaymentError, {
-				error: "Error",
-				message: t11
-			});
-			$[30] = t11;
-			$[31] = t12;
-		} else t12 = $[31];
-		return t12;
-	}
-	let t11;
-	if ($[32] !== bankAccountTypes || $[33] !== classes || $[34] !== isFormDisabled || $[35] !== isHostedPaymentPage || $[36] !== paymentProviderForm || $[37] !== showHostedPaymentPage) {
-		t11 = showHostedPaymentPage && isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewECheckForm, {
-			isFormDisabled,
-			classes,
-			bankAccountTypes
-		});
-		$[32] = bankAccountTypes;
-		$[33] = classes;
-		$[34] = isFormDisabled;
-		$[35] = isHostedPaymentPage;
-		$[36] = paymentProviderForm;
-		$[37] = showHostedPaymentPage;
-		$[38] = t11;
-	} else t11 = $[38];
-	return t11;
+		if (isHostedPaymentPage === false) onStatusChange?.({ isValid: true });
+		else onStatusChange?.({ isValid: false });
+	}, [showOtherForm, isHostedPaymentPage]);
+	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.ECheck, providerType, providerProps, onStatusChange, paymentDetails, data);
+	const items = useMemo(() => {
+		return [...savedMethods.map((m) => {
+			return {
+				label: `${m?.paymentToken?.nickname ?? t("Saved account")}${m?.routingNumber ? ` (${m.routingNumber})` : ""}`,
+				value: String(m?.paymentTokenID ?? "")
+			};
+		}), {
+			label: actionLabel || t("Use a different account"),
+			value: OTHER_RADIO_VALUE
+		}];
+	}, [
+		savedMethods,
+		actionLabel,
+		t
+	]);
+	if (loadingPaymentAccounts) return /* @__PURE__ */ React.createElement(UdpFlexbox, {
+		direction: "row",
+		justify: "center",
+		align: "center"
+	}, /* @__PURE__ */ React.createElement(UdpSpinner, { size: "medium" }));
+	if (hasReadPropertiesError) return /* @__PURE__ */ React.createElement(HostedPaymentError, {
+		error: t("Configuration error"),
+		message: readPropertiesMessageError || t("Unknown error")
+	});
+	return /* @__PURE__ */ React.createElement(UdpFlexbox, {
+		direction: "column",
+		gap: "sm",
+		wrap: "nowrap"
+	}, hasSavedMethods && /* @__PURE__ */ React.createElement(UdpRadioGroup, {
+		label: t("Saved accounts"),
+		name: "savedBankAccount",
+		orientation: "vertical",
+		disabled: isFormDisabled,
+		value: selected,
+		items,
+		onChange: (e) => setSelected(String(e.target.value))
+	}), showOtherForm && (isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewECheckForm, {
+		isFormDisabled,
+		bankAccountTypes,
+		allowSaveMethod
+	})));
 };
 //#endregion
 export { BankAccountForm };

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountForm.mjs","names":["React","useEffect","useState","makeStyles","useTranslation","usePaymentProviderForm","PaymentDetails","PaymentMethodData","PaymentTenderTypeEnum","PaymentVendorFactoryEnum","useUser","useAxiosGet","Box","LinearProgress","PaymentDropdown","FluentButton","UnityFluentIcon","getIconFromName","HostedPaymentError","NewECheckForm","ConfigService","BankAccountFormProps","accountTypes","isFormDisabled","useStyles","theme","formControl","width","marginTop","formControlCheck","marginLeft","bankAccountTypes","paymentDetails","providerType","providerProps","isHostedPaymentPage","hasReadPropertiesError","readPropertiesMessageError","onStatusChange","paymentFormResult","enabled","actionLabel","data","externalId","BankAccountForm","t0","$","_c","t1","t2","t3","t4","setSelectedPaymentAccount","t5","undefined","classes","t","paymentProviderForm","ECheck","showHostedPaymentPage","setShowHostedPaymentPage","t6","Symbol","for","t7","pgV1ApiUrl","paymentAccounts","loading","loadingPaymentAccounts","t8","isValid","handleShowHostedPaymentPage","t9","length","showHostedPaymentPageByDefault","enableSubmitForm","t10","t11","t12","t13","padding","t14","t15","t16"],"sources":["../../../../src/utilities/form/paymentForm/BankAccountForm.tsx"],"sourcesContent":["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"],"mappings":"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"}
+{"version":3,"file":"BankAccountForm.mjs","names":["React","useEffect","useMemo","useState","useTranslation","UdpFlexbox","UdpRadioGroup","UdpSpinner","usePaymentProviderForm","PaymentDetails","PaymentMethodData","PaymentTenderTypeEnum","PaymentVendorFactoryEnum","useApiQuery","HostedPaymentError","NewECheckForm","ConfigService","OTHER_RADIO_VALUE","BankAccountFormProps","bankAccountTypes","name","value","isFormDisabled","paymentDetails","providerType","providerProps","isHostedPaymentPage","hasReadPropertiesError","readPropertiesMessageError","onStatusChange","paymentFormResult","enabled","actionLabel","allowSaveMethod","data","externalId","setSelectedPaymentAccount","paymentAccount","BankAccountForm","t","paymentAccounts","isLoading","loadingPaymentAccounts","pgV1ApiUrl","Boolean","savedMethods","hasSavedMethods","length","selected","setSelected","paymentTokenID","sel","find","s","showOtherForm","isValid","paymentProviderForm","ECheck","items","savedItems","map","m","nickname","paymentToken","routing","routingNumber","label","String","e","target"],"sources":["../../../../src/utilities/form/paymentForm/BankAccountForm.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';\nimport { UdpRadioGroup } from '../../../UI/fluent-web-components/UdpRadioGroup';\nimport { UdpSpinner } from '../../../UI/fluent-web-components/UdpSpinner';\nimport { usePaymentProviderForm } from './usePaymentProviderForm';\nimport { PaymentDetails, PaymentMethodData } from './AccountPayment.model';\nimport { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';\nimport { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';\nimport { useApiQuery } from '../../useApiQuery';\nimport { HostedPaymentError } from './HostedPaymentError';\nimport { NewECheckForm } from './NewECheckForm';\nimport { ConfigService } from '../../../configService';\n\nconst OTHER_RADIO_VALUE = '__other__';\n\ninterface BankAccountFormProps {\n  bankAccountTypes?: { name: string; value: string }[];\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  /** When false, the manual eCheck form hides its \"save\" checkbox. */\n  allowSaveMethod?: boolean;\n  data?: PaymentMethodData;\n  externalId?: string;\n  setSelectedPaymentAccount?: (paymentAccount: any) => void;\n}\n\n/**\n * eCheck / bank-account branch of the payment form. Mirrors the credit-card\n * branch: radio list of saved accounts when any exist + \"Other / new account\"\n * option per D3, otherwise renders the appropriate entry form directly.\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  actionLabel,\n  allowSaveMethod = true,\n  setSelectedPaymentAccount,\n}: BankAccountFormProps) => {\n  const { t } = useTranslation();\n\n  const { data: paymentAccounts, isLoading: loadingPaymentAccounts } = useApiQuery<any[]>(\n    ConfigService.pgV1ApiUrl,\n    `PaymentTokenECheck/${externalId}`,\n    {},\n    { enabled: Boolean(externalId) },\n  );\n\n  const savedMethods = paymentAccounts ?? [];\n  const hasSavedMethods = savedMethods.length > 0;\n\n  const [selected, setSelected] = useState<string>(OTHER_RADIO_VALUE);\n\n  useEffect(() => {\n    setSelected(savedMethods[0]?.paymentTokenID || OTHER_RADIO_VALUE);\n  }, [savedMethods]);\n\n  useEffect(() => {\n    if (selected && selected !== OTHER_RADIO_VALUE) {\n      const sel = savedMethods.find((s: any) => s?.paymentTokenID === selected);\n      setSelectedPaymentAccount?.(sel || null);\n    } else {\n      setSelectedPaymentAccount?.(null);\n    }\n  }, [selected, savedMethods, setSelectedPaymentAccount]);\n\n  const showOtherForm = selected === OTHER_RADIO_VALUE;\n\n  useEffect(() => {\n    if (!showOtherForm) {\n      onStatusChange?.({ isValid: true });\n      return;\n    }\n    if (isHostedPaymentPage === false) {\n      onStatusChange?.({ isValid: true });\n    } else {\n      onStatusChange?.({ isValid: false });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showOtherForm, isHostedPaymentPage]);\n\n  const paymentProviderForm = usePaymentProviderForm(\n    PaymentTenderTypeEnum.ECheck,\n    providerType,\n    providerProps,\n    onStatusChange,\n    paymentDetails,\n    data,\n  );\n\n  const items = useMemo(() => {\n    const savedItems = savedMethods.map((m: any) => {\n      const nickname = m?.paymentToken?.nickname ?? t('Saved account');\n      const routing = m?.routingNumber ? ` (${m.routingNumber})` : '';\n      return {\n        label: `${nickname}${routing}`,\n        value: String(m?.paymentTokenID ?? ''),\n      };\n    });\n    return [\n      ...savedItems,\n      {\n        label: actionLabel || t('Use a different account'),\n        value: OTHER_RADIO_VALUE,\n      },\n    ];\n  }, [savedMethods, actionLabel, t]);\n\n  if (loadingPaymentAccounts) {\n    return (\n      <UdpFlexbox direction=\"row\" justify=\"center\" align=\"center\">\n        <UdpSpinner size=\"medium\" />\n      </UdpFlexbox>\n    );\n  }\n\n  if (hasReadPropertiesError) {\n    return (\n      <HostedPaymentError\n        error={t('Configuration error')}\n        message={readPropertiesMessageError || t('Unknown error')}\n      />\n    );\n  }\n\n  return (\n    <UdpFlexbox direction=\"column\" gap=\"sm\" wrap=\"nowrap\">\n      {hasSavedMethods && (\n        <UdpRadioGroup\n          label={t('Saved accounts')}\n          name=\"savedBankAccount\"\n          orientation=\"vertical\"\n          disabled={isFormDisabled}\n          value={selected}\n          items={items}\n          onChange={(e) => setSelected(String(e.target.value))}\n        />\n      )}\n\n      {showOtherForm &&\n        (isHostedPaymentPage ? (\n          paymentProviderForm\n        ) : (\n          <NewECheckForm\n            isFormDisabled={isFormDisabled}\n            bankAccountTypes={bankAccountTypes}\n            allowSaveMethod={allowSaveMethod}\n          />\n        ))}\n    </UdpFlexbox>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAMiB,oBAAoB;;;;;;AA0B1B,MAAaqB,mBAAmB,EAC9BnB,mBAAmB,EAAE,EACrBe,MACAC,YACAb,iBAAiB,OACjBE,eAAe,MACfC,gBAAgB,MAChBF,gBACAG,qBACAC,wBACAC,4BACAC,gBACAG,aACAC,kBAAkB,MAClBG,gCAC0B;CAC1B,MAAM,EAAEG,MAAMnC,gBAAgB;CAE9B,MAAM,EAAE8B,MAAMM,iBAAiBC,WAAWC,2BAA2B7B,YACnEG,cAAc2B,YACd,sBAAsBR,cACtB,EAAE,EACF,EAAEJ,SAASa,QAAQT,WAAU,EAC/B,CAAC;CAED,MAAMU,eAAeL,mBAAmB,EAAE;CAC1C,MAAMM,kBAAkBD,aAAaE,SAAS;CAE9C,MAAM,CAACC,UAAUC,eAAe9C,SAAiBc,kBAAkB;AAEnEhB,iBAAgB;AACdgD,cAAYJ,aAAa,IAAIK,kBAAkBjC,kBAAkB;IAChE,CAAC4B,aAAa,CAAC;AAElB5C,iBAAgB;AACd,MAAI+C,YAAYA,aAAa/B,mBAAmB;GAC9C,MAAMkC,MAAMN,aAAaO,MAAMC,MAAWA,GAAGH,mBAAmBF,SAAS;AACzEZ,+BAA4Be,OAAO,KAAK;QAExCf,6BAA4B,KAAK;IAElC;EAACY;EAAUH;EAAcT;EAA0B,CAAC;CAEvD,MAAMkB,gBAAgBN,aAAa/B;AAEnChB,iBAAgB;AACd,MAAI,CAACqD,eAAe;AAClBzB,oBAAiB,EAAE0B,SAAS,MAAM,CAAC;AACnC;;AAEF,MAAI7B,wBAAwB,MAC1BG,kBAAiB,EAAE0B,SAAS,MAAM,CAAC;MAEnC1B,kBAAiB,EAAE0B,SAAS,OAAO,CAAC;IAGrC,CAACD,eAAe5B,oBAAoB,CAAC;CAExC,MAAM8B,sBAAsBhD,uBAC1BG,sBAAsB8C,QACtBjC,cACAC,eACAI,gBACAN,gBACAW,KACD;CAED,MAAMwB,QAAQxD,cAAc;AAS1B,SAAO,CACL,GATiB2C,aAAae,KAAKC,MAAW;AAG9C,UAAO;IACLK,OAAO,GAHQL,GAAGE,cAAcD,YAAYvB,EAAE,gBAAgB,GAChDsB,GAAGI,gBAAgB,KAAKJ,EAAEI,cAAa,KAAM;IAG3D5C,OAAO8C,OAAON,GAAGX,kBAAkB,GAAE;IACtC;IACD,EAGA;GACEgB,OAAOlC,eAAeO,EAAE,0BAA0B;GAClDlB,OAAOJ;GACR,CACF;IACA;EAAC4B;EAAcb;EAAaO;EAAE,CAAC;AAElC,KAAIG,uBACF,QACE,sBAAA,cAAC,YAAD;EAAY,WAAU;EAAM,SAAQ;EAAS,OAAM;EAEtC,EADX,sBAAA,cAAC,YAAD,EAAY,MAAK,UAAQ,CAAA,CACd;AAIjB,KAAIf,uBACF,QACE,sBAAA,cAAC,oBAAD;EACE,OAAOY,EAAE,sBAAsB;EAC/B,SAASX,8BAA8BW,EAAE,gBAAgB;EACzD,CAAA;AAIN,QACE,sBAAA,cAAC,YAAD;EAAY,WAAU;EAAS,KAAI;EAAK,MAAK;EAuBhC,EAtBVO,mBACC,sBAAA,cAAC,eAAD;EACE,OAAOP,EAAE,iBAAiB;EAC1B,MAAK;EACL,aAAY;EACZ,UAAUjB;EACV,OAAO0B;EACAU;EACP,WAAWU,MAAMnB,YAAYkB,OAAOC,EAAEC,OAAOhD,MAAM,CAAC;EAEvD,CAAA,EAEAiC,kBACE5B,sBACC8B,sBAEA,sBAAA,cAAC,eAAD;EACkBlC;EACEH;EACDc;EAEpB,CAAA,EACQ"}

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

@@ -6,6 +6,6 @@ interface CashFormProps {
     amountValue?: string | number | null | undefined;
     onStatusChange?: (paymentFormResult: boolean) => void;
 }
-export declare const CashForm: ({ isFormDisabled, paymentDetails, amountValue, onStatusChange }: CashFormProps) => React.JSX.Element;
+export declare const CashForm: ({ isFormDisabled, amountValue, }: CashFormProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=CashForm.d.ts.map