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

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

@@ -1,81 +1,41 @@
 import React from 'react';
-import { FormControl, FormControlLabel, } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { Field } from '../Field';
-import { FluentTextField } from '../../../UI/inputs/textField/FluentTextField';
-import { FluentCheckbox } from '../../../UI/inputs/checkbox/FluentCheckbox';
-import { FluentSelectMenu } from '../../../UI/inputs/menus/FluentSelectMenu';
-import { Typography } from '../../../UI/dataDisplay/typography/Typography';
+import { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';
+import { UdpContainerQueryGrid } from '../../../UI/fluent-web-components/UdpContainerQueryGrid';
+import { UdpTextInput } from '../../../UI/fluent-web-components/UdpTextInput';
+import { UdpCheckbox } from '../../../UI/fluent-web-components/UdpCheckbox';
+import { UdpDropdown } from '../../../UI/fluent-web-components/UdpDropdown';
 import { formatBankAccountNumber, formatRoutingNumber, } from './CreditCardUtils';
-import { PaymentCard } from './PaymentCard';
-/**
- * NewCardForm component renders a form for entering new credit card details.
- *
- * @param {Object} props - The properties object.
- * @param {boolean} props.isFormDisabled - Flag to disable the form fields.
- * @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
- * @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
- *
- * @returns {JSX.Element} The rendered NewCardForm component.
- */
-export const NewECheckForm = ({ isFormDisabled, classes, bankAccountTypes, }) => {
+// The UdpContainerQueryGrid wrapper types gaps as numeric-only, but the
+// underlying component also accepts spacing names ("sm"). Cast at the use
+// sites rather than changing the shared wrapper (out of scope for V2).
+const GRID_GAPS = { 0: 'sm' };
+export const NewECheckForm = ({ isFormDisabled, bankAccountTypes, allowSaveMethod = true, }) => {
     const { t } = useTranslation();
-    return (React.createElement(PaymentCard, null, React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            // @ts-ignore
+    const dropdownOptions = (bankAccountTypes !== null && bankAccountTypes !== void 0 ? bankAccountTypes : []).map((opt) => ({
+        label: opt.name,
+        value: opt.value,
+    }));
+    return (React.createElement(UdpFlexbox, { direction: "column", gap: "sm", wrap: "nowrap" }, React.createElement(Field, { component: UdpTextInput, ComponentProps: {
             label: t('Name on Bank Account'),
-            variant: 'outlined',
-            size: 'small',
+            maxLength: 256,
             disabled: isFormDisabled,
-            fullWidth: true,
-            inputProps: { maxLength: 256 }
-        }, name: "accountNickName", initialValue: "", required: !isFormDisabled })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            // @ts-ignore
+        }, name: "accountNickName", initialValue: "", required: !isFormDisabled, onChange: () => { } }), React.createElement(UdpContainerQueryGrid, { columns: { 0: 1, 420: 2 }, gaps: GRID_GAPS }, React.createElement(Field, { component: UdpTextInput, ComponentProps: {
             label: t('Account Number'),
-            variant: 'outlined',
-            size: 'small',
+            autocomplete: 'off',
             disabled: isFormDisabled,
-            fullWidth: true
-        }, name: "accountNumber", initialValue: "", required: !isFormDisabled, pattern: "\\d{16,22}", format: formatBankAccountNumber })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    //@ts-ignore
-    , { 
-        //@ts-ignore
-        component: FluentSelectMenu, ComponentProps: {
-            label: t('Account Type'),
-            id: 'bankAccountType',
-            variant: 'outlined',
-            margin: 'normal',
-            size: 'small',
-            width: '100%',
-            fullWidth: true,
-            disabled: false,
-            data: bankAccountTypes || [],
-            displayProperty: 'name',
-            autoCompleteProps: {
-                disableClearable: true
-            }
-        }, valueForChange: (e) => {
-            return e.value;
-        }, name: "bankAccountType", required: !isFormDisabled, onChange: () => { } })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            // @ts-ignore
+        }, name: "accountNumber", initialValue: "", format: formatBankAccountNumber, required: !isFormDisabled, onChange: () => { } }), React.createElement(Field, { component: UdpTextInput, ComponentProps: {
             label: t('Routing Number'),
-            variant: 'outlined',
-            size: 'small',
+            autocomplete: 'off',
+            disabled: isFormDisabled,
+        }, name: "routingNumber", initialValue: "", format: formatRoutingNumber, required: !isFormDisabled, onChange: () => { } })), React.createElement(UdpContainerQueryGrid, { columns: { 0: 1, 420: 2 }, gaps: GRID_GAPS }, React.createElement(Field, { component: UdpDropdown, ComponentProps: {
+            label: t('Account Type'),
+            options: dropdownOptions,
+            disabled: isFormDisabled,
+        }, name: "bankAccountType", required: !isFormDisabled, onChange: () => { } })), allowSaveMethod && (React.createElement(Field, { component: UdpCheckbox, type: "checkbox", name: "isSaveAsNewMethod", ComponentProps: {
+            label: t('Save'),
             disabled: isFormDisabled,
-            fullWidth: true
-        }, name: "routingNumber", initialValue: "", required: !isFormDisabled, pattern: "\\d{9}", format: formatRoutingNumber })), React.createElement(FormControl, { className: classes.formControlCheck }, React.createElement(FormControlLabel, { control: React.createElement(Field, { component: FluentCheckbox, name: "isSaveAsNewMethod", type: "checkbox", defaultValue: false, 
-            // @ts-ignore
-            disabled: isFormDisabled }), label: React.createElement(Typography, null, t('Save')) }))));
+        }, defaultValue: false, required: false, onChange: () => { } }))));
 };
 //# sourceMappingURL=NewECheckForm.js.map

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

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

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

@@ -1,280 +1,237 @@
 import { c } from "../../../reactCompilerRuntime.mjs";
 import { Field } from "../Field.mjs";
-import { Typography as Typography$1 } from "../../../UI/dataDisplay/typography/Typography.mjs";
-import { FluentTextField } from "../../../UI/inputs/textField/FluentTextField.mjs";
-import { FluentCheckbox } from "../../../UI/inputs/checkbox/FluentCheckbox.mjs";
-import { FluentSelectMenu } from "../../../UI/inputs/menus/FluentSelectMenu.mjs";
-import { PaymentCard } from "./PaymentCard.mjs";
+import { UdpCheckbox } from "../../../UI/fluent-web-components/UdpCheckbox.mjs";
+import { UdpContainerQueryGrid } from "../../../UI/fluent-web-components/UdpContainerQueryGrid.mjs";
+import { UdpDropdown } from "../../../UI/fluent-web-components/UdpDropdown.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpTextInput } from "../../../UI/fluent-web-components/UdpTextInput.mjs";
 import { formatBankAccountNumber, formatRoutingNumber } from "./CreditCardUtils.mjs";
 import React from "react";
-import { FormControl, FormControlLabel } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 //#region src/utilities/form/paymentForm/NewECheckForm.tsx
-/**
-* NewCardForm component renders a form for entering new credit card details.
-*
-* @param {Object} props - The properties object.
-* @param {boolean} props.isFormDisabled - Flag to disable the form fields.
-* @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
-* @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
-*
-* @returns {JSX.Element} The rendered NewCardForm component.
-*/
+const GRID_GAPS = { 0: "sm" };
 const NewECheckForm = (t0) => {
-	const $ = c(66);
-	const { isFormDisabled, classes, bankAccountTypes } = t0;
+	const $ = c(51);
+	const { isFormDisabled, bankAccountTypes, allowSaveMethod: t1 } = t0;
+	const allowSaveMethod = t1 === void 0 ? true : t1;
 	const { t } = useTranslation();
-	const t1 = classes.formControl;
 	let t2;
-	if ($[0] !== t) {
-		t2 = t("Name on Bank Account");
-		$[0] = t;
+	if ($[0] !== bankAccountTypes) {
+		t2 = bankAccountTypes ?? [];
+		$[0] = bankAccountTypes;
 		$[1] = t2;
 	} else t2 = $[1];
 	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = { maxLength: 256 };
-		$[2] = t3;
-	} else t3 = $[2];
+	if ($[2] !== t2) {
+		t3 = t2.map(_temp);
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const dropdownOptions = t3;
 	let t4;
-	if ($[3] !== isFormDisabled || $[4] !== t2) {
-		t4 = {
-			label: t2,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true,
-			inputProps: t3
-		};
-		$[3] = isFormDisabled;
-		$[4] = t2;
+	if ($[4] !== t) {
+		t4 = t("Name on Bank Account");
+		$[4] = t;
 		$[5] = t4;
 	} else t4 = $[5];
-	const t5 = !isFormDisabled;
-	let t6;
-	if ($[6] !== t4 || $[7] !== t5) {
-		t6 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t4,
+	let t5;
+	if ($[6] !== isFormDisabled || $[7] !== t4) {
+		t5 = {
+			label: t4,
+			maxLength: 256,
+			disabled: isFormDisabled
+		};
+		$[6] = isFormDisabled;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	const t6 = !isFormDisabled;
+	let t7;
+	if ($[9] !== t5 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ React.createElement(Field, {
+			component: UdpTextInput,
+			ComponentProps: t5,
 			name: "accountNickName",
 			initialValue: "",
-			required: t5
+			required: t6,
+			onChange: _temp2
 		});
-		$[6] = t4;
-		$[7] = t5;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== classes.formControl || $[10] !== t6) {
-		t7 = /* @__PURE__ */ React.createElement(FormControl, { className: t1 }, t6);
-		$[9] = classes.formControl;
+		$[9] = t5;
 		$[10] = t6;
 		$[11] = t7;
 	} else t7 = $[11];
-	const t8 = classes.formControl;
+	let t8;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			0: 1,
+			420: 2
+		};
+		$[12] = t8;
+	} else t8 = $[12];
 	let t9;
-	if ($[12] !== t) {
+	if ($[13] !== t) {
 		t9 = t("Account Number");
-		$[12] = t;
-		$[13] = t9;
-	} else t9 = $[13];
+		$[13] = t;
+		$[14] = t9;
+	} else t9 = $[14];
 	let t10;
-	if ($[14] !== isFormDisabled || $[15] !== t9) {
+	if ($[15] !== isFormDisabled || $[16] !== t9) {
 		t10 = {
 			label: t9,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true
+			autocomplete: "off",
+			disabled: isFormDisabled
 		};
-		$[14] = isFormDisabled;
-		$[15] = t9;
-		$[16] = t10;
-	} else t10 = $[16];
+		$[15] = isFormDisabled;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
 	const t11 = !isFormDisabled;
 	let t12;
-	if ($[17] !== t10 || $[18] !== t11) {
+	if ($[18] !== t10 || $[19] !== t11) {
 		t12 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
+			component: UdpTextInput,
 			ComponentProps: t10,
 			name: "accountNumber",
 			initialValue: "",
+			format: formatBankAccountNumber,
 			required: t11,
-			pattern: "\\d{16,22}",
-			format: formatBankAccountNumber
+			onChange: _temp3
 		});
-		$[17] = t10;
-		$[18] = t11;
-		$[19] = t12;
-	} else t12 = $[19];
+		$[18] = t10;
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
 	let t13;
-	if ($[20] !== classes.formControl || $[21] !== t12) {
-		t13 = /* @__PURE__ */ React.createElement(FormControl, { className: t8 }, t12);
-		$[20] = classes.formControl;
-		$[21] = t12;
+	if ($[21] !== t) {
+		t13 = t("Routing Number");
+		$[21] = t;
 		$[22] = t13;
 	} else t13 = $[22];
-	const t14 = classes.formControl;
-	let t15;
-	if ($[23] !== t) {
-		t15 = t("Account Type");
-		$[23] = t;
-		$[24] = t15;
-	} else t15 = $[24];
+	let t14;
+	if ($[23] !== isFormDisabled || $[24] !== t13) {
+		t14 = {
+			label: t13,
+			autocomplete: "off",
+			disabled: isFormDisabled
+		};
+		$[23] = isFormDisabled;
+		$[24] = t13;
+		$[25] = t14;
+	} else t14 = $[25];
+	const t15 = !isFormDisabled;
 	let t16;
-	if ($[25] !== bankAccountTypes) {
-		t16 = bankAccountTypes || [];
-		$[25] = bankAccountTypes;
-		$[26] = t16;
-	} else t16 = $[26];
+	if ($[26] !== t14 || $[27] !== t15) {
+		t16 = /* @__PURE__ */ React.createElement(Field, {
+			component: UdpTextInput,
+			ComponentProps: t14,
+			name: "routingNumber",
+			initialValue: "",
+			format: formatRoutingNumber,
+			required: t15,
+			onChange: _temp4
+		});
+		$[26] = t14;
+		$[27] = t15;
+		$[28] = t16;
+	} else t16 = $[28];
 	let t17;
-	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = { disableClearable: true };
-		$[27] = t17;
-	} else t17 = $[27];
+	if ($[29] !== t12 || $[30] !== t16) {
+		t17 = /* @__PURE__ */ React.createElement(UdpContainerQueryGrid, {
+			columns: t8,
+			gaps: GRID_GAPS
+		}, t12, t16);
+		$[29] = t12;
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
 	let t18;
-	if ($[28] !== t15 || $[29] !== t16) {
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
 		t18 = {
-			label: t15,
-			id: "bankAccountType",
-			variant: "outlined",
-			margin: "normal",
-			size: "small",
-			width: "100%",
-			fullWidth: true,
-			disabled: false,
-			data: t16,
-			displayProperty: "name",
-			autoCompleteProps: t17
+			0: 1,
+			420: 2
 		};
-		$[28] = t15;
-		$[29] = t16;
-		$[30] = t18;
-	} else t18 = $[30];
-	const t19 = t18;
-	const t20 = !isFormDisabled;
-	let t21;
-	if ($[31] !== t19 || $[32] !== t20) {
-		t21 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentSelectMenu,
-			ComponentProps: t19,
-			valueForChange: _temp,
-			name: "bankAccountType",
-			required: t20,
-			onChange: _temp2
-		});
-		$[31] = t19;
-		$[32] = t20;
-		$[33] = t21;
-	} else t21 = $[33];
-	let t22;
-	if ($[34] !== classes.formControl || $[35] !== t21) {
-		t22 = /* @__PURE__ */ React.createElement(FormControl, { className: t14 }, t21);
-		$[34] = classes.formControl;
-		$[35] = t21;
-		$[36] = t22;
-	} else t22 = $[36];
-	const t23 = classes.formControl;
-	let t24;
-	if ($[37] !== t) {
-		t24 = t("Routing Number");
-		$[37] = t;
-		$[38] = t24;
-	} else t24 = $[38];
-	let t25;
-	if ($[39] !== isFormDisabled || $[40] !== t24) {
-		t25 = {
-			label: t24,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true
+		$[32] = t18;
+	} else t18 = $[32];
+	let t19;
+	if ($[33] !== t) {
+		t19 = t("Account Type");
+		$[33] = t;
+		$[34] = t19;
+	} else t19 = $[34];
+	let t20;
+	if ($[35] !== dropdownOptions || $[36] !== isFormDisabled || $[37] !== t19) {
+		t20 = {
+			label: t19,
+			options: dropdownOptions,
+			disabled: isFormDisabled
 		};
-		$[39] = isFormDisabled;
-		$[40] = t24;
-		$[41] = t25;
-	} else t25 = $[41];
-	const t26 = !isFormDisabled;
-	let t27;
-	if ($[42] !== t25 || $[43] !== t26) {
-		t27 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t25,
-			name: "routingNumber",
-			initialValue: "",
-			required: t26,
-			pattern: "\\d{9}",
-			format: formatRoutingNumber
-		});
-		$[42] = t25;
-		$[43] = t26;
-		$[44] = t27;
-	} else t27 = $[44];
-	let t28;
-	if ($[45] !== classes.formControl || $[46] !== t27) {
-		t28 = /* @__PURE__ */ React.createElement(FormControl, { className: t23 }, t27);
-		$[45] = classes.formControl;
-		$[46] = t27;
-		$[47] = t28;
-	} else t28 = $[47];
-	const t29 = classes.formControlCheck;
-	let t30;
-	if ($[48] !== isFormDisabled) {
-		t30 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentCheckbox,
-			name: "isSaveAsNewMethod",
+		$[35] = dropdownOptions;
+		$[36] = isFormDisabled;
+		$[37] = t19;
+		$[38] = t20;
+	} else t20 = $[38];
+	const t21 = !isFormDisabled;
+	let t22;
+	if ($[39] !== t20 || $[40] !== t21) {
+		t22 = /* @__PURE__ */ React.createElement(UdpContainerQueryGrid, {
+			columns: t18,
+			gaps: GRID_GAPS
+		}, /* @__PURE__ */ React.createElement(Field, {
+			component: UdpDropdown,
+			ComponentProps: t20,
+			name: "bankAccountType",
+			required: t21,
+			onChange: _temp5
+		}));
+		$[39] = t20;
+		$[40] = t21;
+		$[41] = t22;
+	} else t22 = $[41];
+	let t23;
+	if ($[42] !== allowSaveMethod || $[43] !== isFormDisabled || $[44] !== t) {
+		t23 = allowSaveMethod && /* @__PURE__ */ React.createElement(Field, {
+			component: UdpCheckbox,
 			type: "checkbox",
+			name: "isSaveAsNewMethod",
+			ComponentProps: {
+				label: t("Save"),
+				disabled: isFormDisabled
+			},
 			defaultValue: false,
-			disabled: isFormDisabled
-		});
-		$[48] = isFormDisabled;
-		$[49] = t30;
-	} else t30 = $[49];
-	let t31;
-	if ($[50] !== t) {
-		t31 = t("Save");
-		$[50] = t;
-		$[51] = t31;
-	} else t31 = $[51];
-	let t32;
-	if ($[52] !== t31) {
-		t32 = /* @__PURE__ */ React.createElement(Typography$1, null, t31);
-		$[52] = t31;
-		$[53] = t32;
-	} else t32 = $[53];
-	let t33;
-	if ($[54] !== t30 || $[55] !== t32) {
-		t33 = /* @__PURE__ */ React.createElement(FormControlLabel, {
-			control: t30,
-			label: t32
+			required: false,
+			onChange: _temp6
 		});
-		$[54] = t30;
-		$[55] = t32;
-		$[56] = t33;
-	} else t33 = $[56];
-	let t34;
-	if ($[57] !== classes.formControlCheck || $[58] !== t33) {
-		t34 = /* @__PURE__ */ React.createElement(FormControl, { className: t29 }, t33);
-		$[57] = classes.formControlCheck;
-		$[58] = t33;
-		$[59] = t34;
-	} else t34 = $[59];
-	let t35;
-	if ($[60] !== t13 || $[61] !== t22 || $[62] !== t28 || $[63] !== t34 || $[64] !== t7) {
-		t35 = /* @__PURE__ */ React.createElement(PaymentCard, null, t7, t13, t22, t28, t34);
-		$[60] = t13;
-		$[61] = t22;
-		$[62] = t28;
-		$[63] = t34;
-		$[64] = t7;
-		$[65] = t35;
-	} else t35 = $[65];
-	return t35;
+		$[42] = allowSaveMethod;
+		$[43] = isFormDisabled;
+		$[44] = t;
+		$[45] = t23;
+	} else t23 = $[45];
+	let t24;
+	if ($[46] !== t17 || $[47] !== t22 || $[48] !== t23 || $[49] !== t7) {
+		t24 = /* @__PURE__ */ React.createElement(UdpFlexbox, {
+			direction: "column",
+			gap: "sm",
+			wrap: "nowrap"
+		}, t7, t17, t22, t23);
+		$[46] = t17;
+		$[47] = t22;
+		$[48] = t23;
+		$[49] = t7;
+		$[50] = t24;
+	} else t24 = $[50];
+	return t24;
 };
-function _temp(e) {
-	return e.value;
+function _temp(opt) {
+	return {
+		label: opt.name,
+		value: opt.value
+	};
 }
 function _temp2() {}
+function _temp3() {}
+function _temp4() {}
+function _temp5() {}
+function _temp6() {}
 //#endregion
 export { NewECheckForm };
 

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

@@ -1 +1 @@
-{"version":3,"file":"NewECheckForm.mjs","names":["React","FormControl","FormControlLabel","useTranslation","Field","FluentTextField","FluentCheckbox","FluentSelectMenu","Typography","formatBankAccountNumber","formatRoutingNumber","PaymentCard","NewECheckForm","t0","$","_c","isFormDisabled","classes","bankAccountTypes","t","t1","formControl","t2","t3","Symbol","for","maxLength","t4","label","variant","size","disabled","fullWidth","inputProps","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","disableClearable","t18","id","margin","width","data","displayProperty","autoCompleteProps","t19","t20","t21","_temp","_temp2","t22","t23","t24","t25","t26","t27","t28","t29","formControlCheck","t30","t31","t32","t33","t34","t35","e","value"],"sources":["../../../../src/utilities/form/paymentForm/NewECheckForm.tsx"],"sourcesContent":["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};"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAaY,iBAAgBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,gBAAAC,SAAAC,qBAAAL;CAS5B,MAAA,EAAAM,MAAchB,gBAAgB;CAIF,MAAAiB,KAAAH,QAAOI;CAAY,IAAAC;AAAA,KAAAR,EAAA,OAAAK,GAAA;AAM9BG,OAAAH,EAAE,uBAAuB;AAAAL,IAAA,KAAAK;AAAAL,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAS;AAAA,KAAAT,EAAA,OAAAU,OAAAC,IAAA,4BAAA,EAAA;AAKpBF,OAAA,EAAAG,WAAa,KAAK;AAAAZ,IAAA,KAAAS;OAAAA,MAAAT,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,OAAAE,kBAAAF,EAAA,OAAAQ,IAAA;AAPhBK,OAAA;GAAAC,OAEPN;GAAyBO,SACvB;GAAUC,MACb;GAAOC,UACHf;GAAcgB,WACb;GAAIC,YACHV;GACb;AAAAT,IAAA,KAAAE;AAAAF,IAAA,KAAAQ;AAAAR,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAGS,MAAAoB,KAAA,CAAClB;CAAc,IAAAmB;AAAA,KAAArB,EAAA,OAAAa,MAAAb,EAAA,OAAAoB,IAAA;AAd3BC,OAAA,sBAAA,cAAC,OAAD;GAEa9B,WAAAA;GACK,gBAAAsB;GASX,MAAA;GACQ,cAAA;GACH,UAAAO;GACV,CAAA;AAAApB,IAAA,KAAAa;AAAAb,IAAA,KAAAoB;AAAApB,IAAA,KAAAqB;OAAAA,MAAArB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,OAAAG,QAAAI,eAAAP,EAAA,QAAAqB,IAAA;AAhBJC,OAAA,sBAAA,cAAC,aAAD,EAAwB,WAAAhB,IAiBV,EAhBZe,GAgBY;AAAArB,IAAA,KAAAG,QAAAI;AAAAP,IAAA,MAAAqB;AAAArB,IAAA,MAAAsB;OAAAA,MAAAtB,EAAA;CAGU,MAAAuB,KAAApB,QAAOI;CAAY,IAAAiB;AAAA,KAAAxB,EAAA,QAAAK,GAAA;AAM9BmB,OAAAnB,EAAE,iBAAiB;AAAAL,IAAA,MAAAK;AAAAL,IAAA,MAAAwB;OAAAA,MAAAxB,EAAA;CAAA,IAAAyB;AAAA,KAAAzB,EAAA,QAAAE,kBAAAF,EAAA,QAAAwB,IAAA;AAFZC,QAAA;GAAAX,OAEPU;GAAmBT,SACjB;GAAUC,MACb;GAAOC,UACHf;GAAcgB,WACb;GACZ;AAAAlB,IAAA,MAAAE;AAAAF,IAAA,MAAAwB;AAAAxB,IAAA,MAAAyB;OAAAA,OAAAzB,EAAA;CAGS,MAAA0B,MAAA,CAACxB;CAAc,IAAAyB;AAAA,KAAA3B,EAAA,QAAAyB,OAAAzB,EAAA,QAAA0B,KAAA;AAb3BC,QAAA,sBAAA,cAAC,OAAD;GAEapC,WAAAA;GACK,gBAAAkC;GAQX,MAAA;GACQ,cAAA;GACH,UAAAC;GACF,SAAA;GACA/B,QAAAA;GACR,CAAA;AAAAK,IAAA,MAAAyB;AAAAzB,IAAA,MAAA0B;AAAA1B,IAAA,MAAA2B;OAAAA,OAAA3B,EAAA;CAAA,IAAA4B;AAAA,KAAA5B,EAAA,QAAAG,QAAAI,eAAAP,EAAA,QAAA2B,KAAA;AAjBJC,QAAA,sBAAA,cAAC,aAAD,EAAwB,WAAAL,IAkBV,EAjBZI,IAiBY;AAAA3B,IAAA,MAAAG,QAAAI;AAAAP,IAAA,MAAA2B;AAAA3B,IAAA,MAAA4B;OAAAA,OAAA5B,EAAA;CAGU,MAAA6B,MAAA1B,QAAOI;CAAY,IAAAuB;AAAA,KAAA9B,EAAA,QAAAK,GAAA;AAM5ByB,QAAAzB,EAAE,eAAe;AAAAL,IAAA,MAAAK;AAAAL,IAAA,MAAA8B;OAAAA,OAAA9B,EAAA;CAAA,IAAA+B;AAAA,KAAA/B,EAAA,QAAAI,kBAAA;AAQlB2B,QAAA3B,oBAAA,EAAsB;AAAAJ,IAAA,MAAAI;AAAAJ,IAAA,MAAA+B;OAAAA,OAAA/B,EAAA;CAAA,IAAAgC;AAAA,KAAAhC,EAAA,QAAAU,OAAAC,IAAA,4BAAA,EAAA;AAETqB,QAAA,EAAAC,kBACC,MACnB;AAAAjC,IAAA,MAAAgC;OAAAA,OAAAhC,EAAA;CAAA,IAAAkC;AAAA,KAAAlC,EAAA,QAAA8B,OAAA9B,EAAA,QAAA+B,KAAA;AAbHG,QAAA;GAAApB,OACSgB;GAAiBK,IACpB;GAAiBpB,SACZ;GAAUqB,QACX;GAAQpB,MACV;GAAOqB,OACN;GAAMnB,WACF;GAAID,UACL;GAAKqB,MACTP;GAAsBQ,iBACX;GAAMC,mBACJR;GAGpB;AAAAhC,IAAA,MAAA8B;AAAA9B,IAAA,MAAA+B;AAAA/B,IAAA,MAAAkC;OAAAA,OAAAlC,EAAA;CAdD,MAAAyC,MAAAP;CAoBQ,MAAAQ,MAAA,CAACxC;CAAc,IAAAyC;AAAA,KAAA3C,EAAA,QAAAyC,OAAAzC,EAAA,QAAA0C,KAAA;AAxB3BC,QAAA,sBAAA,cAAC,OAAD;GAEalD,WAAAA;GAET,gBAAAgD;GAgBc,gBAAAG;GAGX,MAAA;GACK,UAAAF;GACA,UAAAG;GACV,CAAA;AAAA7C,IAAA,MAAAyC;AAAAzC,IAAA,MAAA0C;AAAA1C,IAAA,MAAA2C;OAAAA,OAAA3C,EAAA;CAAA,IAAA8C;AAAA,KAAA9C,EAAA,QAAAG,QAAAI,eAAAP,EAAA,QAAA2C,KAAA;AA3BJG,QAAA,sBAAA,cAAC,aAAD,EAAwB,WAAAjB,KA4BV,EA3BZc,IA2BY;AAAA3C,IAAA,MAAAG,QAAAI;AAAAP,IAAA,MAAA2C;AAAA3C,IAAA,MAAA8C;OAAAA,OAAA9C,EAAA;CAGU,MAAA+C,MAAA5C,QAAOI;CAAY,IAAAyC;AAAA,KAAAhD,EAAA,QAAAK,GAAA;AAM9B2C,QAAA3C,EAAE,iBAAiB;AAAAL,IAAA,MAAAK;AAAAL,IAAA,MAAAgD;OAAAA,OAAAhD,EAAA;CAAA,IAAAiD;AAAA,KAAAjD,EAAA,QAAAE,kBAAAF,EAAA,QAAAgD,KAAA;AAFZC,QAAA;GAAAnC,OAEPkC;GAAmBjC,SACjB;GAAUC,MACb;GAAOC,UACHf;GAAcgB,WACb;GACZ;AAAAlB,IAAA,MAAAE;AAAAF,IAAA,MAAAgD;AAAAhD,IAAA,MAAAiD;OAAAA,OAAAjD,EAAA;CAGS,MAAAkD,MAAA,CAAChD;CAAc,IAAAiD;AAAA,KAAAnD,EAAA,QAAAiD,OAAAjD,EAAA,QAAAkD,KAAA;AAb3BC,QAAA,sBAAA,cAAC,OAAD;GAEa5D,WAAAA;GACK,gBAAA0D;GAQX,MAAA;GACQ,cAAA;GACH,UAAAC;GACF,SAAA;GACAtD,QAAAA;GACR,CAAA;AAAAI,IAAA,MAAAiD;AAAAjD,IAAA,MAAAkD;AAAAlD,IAAA,MAAAmD;OAAAA,OAAAnD,EAAA;CAAA,IAAAoD;AAAA,KAAApD,EAAA,QAAAG,QAAAI,eAAAP,EAAA,QAAAmD,KAAA;AAjBJC,QAAA,sBAAA,cAAC,aAAD,EAAwB,WAAAL,KAkBV,EAjBZI,IAiBY;AAAAnD,IAAA,MAAAG,QAAAI;AAAAP,IAAA,MAAAmD;AAAAnD,IAAA,MAAAoD;OAAAA,OAAApD,EAAA;CAGU,MAAAqD,MAAAlD,QAAOmD;CAAiB,IAAAC;AAAA,KAAAvD,EAAA,QAAAE,gBAAA;AAG1CqD,QAAA,sBAAA,cAAC,OAAD;GACa/D,WAAAA;GACN,MAAA;GACA,MAAA;GACS,cAAA;GAEJU,UAAAA;GACV,CAAA;AAAAF,IAAA,MAAAE;AAAAF,IAAA,MAAAuD;OAAAA,OAAAvD,EAAA;CAAA,IAAAwD;AAAA,KAAAxD,EAAA,QAAAK,GAAA;AAEgBmD,QAAAnD,EAAE,OAAO;AAAAL,IAAA,MAAAK;AAAAL,IAAA,MAAAwD;OAAAA,OAAAxD,EAAA;CAAA,IAAAyD;AAAA,KAAAzD,EAAA,QAAAwD,KAAA;AAAtBC,QAAA,sBAAA,cAAC,cAAA,MAAYD,IAAuB;AAAAxD,IAAA,MAAAwD;AAAAxD,IAAA,MAAAyD;OAAAA,OAAAzD,EAAA;CAAA,IAAA0D;AAAA,KAAA1D,EAAA,QAAAuD,OAAAvD,EAAA,QAAAyD,KAAA;AAX7CC,QAAA,sBAAA,cAAC,kBAAD;GAEI,SAAAH;GASK,OAAAE;GACP,CAAA;AAAAzD,IAAA,MAAAuD;AAAAvD,IAAA,MAAAyD;AAAAzD,IAAA,MAAA0D;OAAAA,OAAA1D,EAAA;CAAA,IAAA2D;AAAA,KAAA3D,EAAA,QAAAG,QAAAmD,oBAAAtD,EAAA,QAAA0D,KAAA;AAbJC,QAAA,sBAAA,cAAC,aAAD,EAAwB,WAAAN,KAcV,EAbZK,IAaY;AAAA1D,IAAA,MAAAG,QAAAmD;AAAAtD,IAAA,MAAA0D;AAAA1D,IAAA,MAAA2D;OAAAA,OAAA3D,EAAA;CAAA,IAAA4D;AAAA,KAAA5D,EAAA,QAAA4B,OAAA5B,EAAA,QAAA8C,OAAA9C,EAAA,QAAAoD,OAAApD,EAAA,QAAA2D,OAAA3D,EAAA,QAAAsB,IAAA;AA7GhBsC,QAAA,sBAAA,cAAC,aAAA,MAECtC,IAoBAM,KAqBAkB,KA+BAM,KAqBAO,IAeY;AAAA3D,IAAA,MAAA4B;AAAA5B,IAAA,MAAA8C;AAAA9C,IAAA,MAAAoD;AAAApD,IAAA,MAAA2D;AAAA3D,IAAA,MAAAsB;AAAAtB,IAAA,MAAA4D;OAAAA,OAAA5D,EAAA;AAAA,QA9Gd4D;;AAXyB,SAAAhB,MAAAiB,GAAA;AAAA,QA4EVA,EAACC;;AA5ES,SAAAjB,SAAA"}
+{"version":3,"file":"NewECheckForm.mjs","names":["React","useTranslation","Field","UdpFlexbox","UdpContainerQueryGrid","UdpTextInput","UdpCheckbox","UdpDropdown","formatBankAccountNumber","formatRoutingNumber","GRID_GAPS","breakpoint","NewECheckFormProps","isFormDisabled","bankAccountTypes","name","value","allowSaveMethod","NewECheckForm","t0","$","_c","t1","undefined","t","t2","t3","map","_temp","dropdownOptions","t4","t5","label","maxLength","disabled","t6","t7","ComponentType","_temp2","t8","Symbol","for","0","420","t9","t10","autocomplete","t11","t12","_temp3","t13","t14","t15","t16","_temp4","t17","t18","t19","t20","options","t21","t22","_temp5","t23","_temp6","t24","opt"],"sources":["../../../../src/utilities/form/paymentForm/NewECheckForm.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Field } from '../Field';\nimport { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';\nimport { UdpContainerQueryGrid } from '../../../UI/fluent-web-components/UdpContainerQueryGrid';\nimport { UdpTextInput } from '../../../UI/fluent-web-components/UdpTextInput';\nimport { UdpCheckbox } from '../../../UI/fluent-web-components/UdpCheckbox';\nimport { UdpDropdown } from '../../../UI/fluent-web-components/UdpDropdown';\nimport {\n  formatBankAccountNumber,\n  formatRoutingNumber,\n} from './CreditCardUtils';\n\n// The UdpContainerQueryGrid wrapper types gaps as numeric-only, but the\n// underlying component also accepts spacing names (\"sm\"). Cast at the use\n// sites rather than changing the shared wrapper (out of scope for V2).\nconst GRID_GAPS = { 0: 'sm' } as unknown as { [breakpoint: number]: number };\n\nexport interface NewECheckFormProps {\n  isFormDisabled: boolean;\n  bankAccountTypes?: { name: string; value: string }[];\n  /** When false, hides the \"save\" checkbox (guest flows). */\n  allowSaveMethod?: boolean;\n}\n\nexport const NewECheckForm = ({\n  isFormDisabled,\n  bankAccountTypes,\n  allowSaveMethod = true,\n}: NewECheckFormProps) => {\n  const { t } = useTranslation();\n\n  const dropdownOptions = (bankAccountTypes ?? []).map((opt) => ({\n    label: opt.name,\n    value: opt.value,\n  }));\n\n  return (\n    <UdpFlexbox direction=\"column\" gap=\"sm\" wrap=\"nowrap\">\n      <Field\n        component={UdpTextInput as React.ComponentType<any>}\n        ComponentProps={{\n          label: t('Name on Bank Account'),\n          maxLength: 256,\n          disabled: isFormDisabled,\n        }}\n        name=\"accountNickName\"\n        initialValue=\"\"\n        required={!isFormDisabled}\n        onChange={() => {}}\n      />\n\n      <UdpContainerQueryGrid columns={{ 0: 1, 420: 2 }} gaps={GRID_GAPS}>\n        <Field\n          component={UdpTextInput as React.ComponentType<any>}\n          ComponentProps={{\n            label: t('Account Number'),\n            autocomplete: 'off',\n            disabled: isFormDisabled,\n          }}\n          name=\"accountNumber\"\n          initialValue=\"\"\n          format={formatBankAccountNumber}\n          required={!isFormDisabled}\n          onChange={() => {}}\n        />\n\n        <Field\n          component={UdpTextInput as React.ComponentType<any>}\n          ComponentProps={{\n            label: t('Routing Number'),\n            autocomplete: 'off',\n            disabled: isFormDisabled,\n          }}\n          name=\"routingNumber\"\n          initialValue=\"\"\n          format={formatRoutingNumber}\n          required={!isFormDisabled}\n          onChange={() => {}}\n        />\n      </UdpContainerQueryGrid>\n\n      <UdpContainerQueryGrid columns={{ 0: 1, 420: 2 }} gaps={GRID_GAPS}>\n        <Field\n          component={UdpDropdown as React.ComponentType<any>}\n          ComponentProps={{\n            label: t('Account Type'),\n            options: dropdownOptions,\n            disabled: isFormDisabled,\n          }}\n          name=\"bankAccountType\"\n          required={!isFormDisabled}\n          onChange={() => {}}\n        />\n      </UdpContainerQueryGrid>\n\n      {allowSaveMethod && (\n        <Field\n          component={UdpCheckbox as React.ComponentType<any>}\n          type=\"checkbox\"\n          name=\"isSaveAsNewMethod\"\n          ComponentProps={{\n            label: t('Save'),\n            disabled: isFormDisabled,\n          }}\n          defaultValue={false}\n          required={false}\n          onChange={() => {}}\n        />\n      )}\n    </UdpFlexbox>\n  );\n};\n"],"mappings":"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"}