udp-react-enterprise-component-library 26.5.0-beta.9 → 26.5.0

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

@@ -1,308 +1,231 @@
-import { Field } from "../Field.mjs";
-import { Typography } from "../../../UI/dataDisplay/typography/Typography.mjs";
-import { FluentTextField } from "../../../UI/inputs/textField/FluentTextField.mjs";
-import { FormControlLabel } from "../../../UI/utilityDisplay/FormControlLabel.mjs";
-import { FormControl } from "../../../UI/utilityDisplay/FormControl.mjs";
-import { Box } from "../../../UI/Box.mjs";
-import { FluentCheckbox } from "../../../UI/inputs/checkbox/FluentCheckbox.mjs";
-import { PaymentCard } from "./PaymentCard.mjs";
+import { c } from "../../../reactCompilerRuntime.mjs";
+import { Field as Field$1 } from "../Field.mjs";
+import { UdpCheckbox } from "../../../UI/fluent-web-components/UdpCheckbox.mjs";
+import { UdpContainerQueryGrid } from "../../../UI/fluent-web-components/UdpContainerQueryGrid.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpTextInput } from "../../../UI/fluent-web-components/UdpTextInput.mjs";
 import { formatCVC, formatCreditCardNumber, formatExpirationDate } from "./CreditCardUtils.mjs";
 import { CreditCardAdornment } from "./CreditCardAdornment.mjs";
-import { c } from "react-compiler-runtime";
-import React from "react";
+import React, { useState } from "react";
+import { Field } from "react-final-form";
 import { useTranslation } from "react-i18next";
 //#region src/utilities/form/paymentForm/NewCreditCardForm.tsx
+const GRID_GAPS = { 0: "sm" };
 /**
-* NewCardForm component renders a form for entering new credit card details.
+* Manual credit-card entry form. Used when the configured vendor doesn't have
+* a hosted-payment page, or when the user selected "Other / use a different
+* card" while saved methods were available.
 *
-* @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.
+* NOTE: This form collects raw PAN/CVV/expiry in our DOM. Retained for
+* testing until hosted pages are provisioned for every supported vendor.
 */
 const NewCreditCardForm = (t0) => {
-	const $ = c(74);
-	const { isFormDisabled, classes, creditCardNumberInput, paymentDetails, setCreditCardNumberInput } = t0;
-	let t1;
-	if ($[0] !== paymentDetails) {
-		t1 = paymentDetails || {};
-		$[0] = paymentDetails;
-		$[1] = t1;
-	} else t1 = $[1];
-	const { accountNumber } = t1;
+	const $ = c(50);
+	const { isFormDisabled, paymentDetails, allowSaveMethod: t1 } = t0;
+	const allowSaveMethod = t1 === void 0 ? true : t1;
+	const { accountNumber } = paymentDetails || {};
 	const { t } = useTranslation();
-	const t2 = classes.formControl;
+	const [creditCardNumberInput, setCreditCardNumberInput] = useState("");
+	const saveCardLabel = accountNumber ? t("Save this card to account {{accountNumber}}", { accountNumber }) : t("Save");
+	let t2;
+	if ($[0] !== t) {
+		t2 = t("Cardholder");
+		$[0] = t;
+		$[1] = t2;
+	} else t2 = $[1];
 	let t3;
-	if ($[2] !== t) {
-		t3 = t("Cardholder");
-		$[2] = t;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] !== isFormDisabled || $[5] !== t3) {
-		t4 = {
-			label: t3,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true
+	if ($[2] !== isFormDisabled || $[3] !== t2) {
+		t3 = {
+			label: t2,
+			autocomplete: "cc-name",
+			disabled: isFormDisabled
 		};
-		$[4] = isFormDisabled;
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
-	const t5 = !isFormDisabled;
-	let t6;
-	if ($[7] !== t4 || $[8] !== t5) {
-		t6 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t4,
+		$[2] = isFormDisabled;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = !isFormDisabled;
+	let t5;
+	if ($[5] !== t3 || $[6] !== t4) {
+		t5 = /* @__PURE__ */ React.createElement(Field$1, {
+			component: UdpTextInput,
+			ComponentProps: t3,
 			name: "nameOnCard",
 			initialValue: "",
-			required: t5,
+			required: t4,
 			onChange: _temp
 		});
-		$[7] = t4;
-		$[8] = t5;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== isFormDisabled) {
+		t6 = (value) => !isFormDisabled && !value ? "Required" : void 0;
+		$[8] = isFormDisabled;
 		$[9] = t6;
 	} else t6 = $[9];
 	let t7;
-	if ($[10] !== classes.formControl || $[11] !== t6) {
-		t7 = /* @__PURE__ */ React.createElement(FormControl, { className: t2 }, t6);
-		$[10] = classes.formControl;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	const t8 = classes.cardNumber;
-	let t9;
-	if ($[13] !== t) {
-		t9 = t("Card Number");
+	if ($[10] !== creditCardNumberInput || $[11] !== isFormDisabled || $[12] !== setCreditCardNumberInput || $[13] !== t) {
+		t7 = (t8) => {
+			const { input, meta } = t8;
+			return /* @__PURE__ */ React.createElement(UdpTextInput, {
+				label: t("Card Number"),
+				autocomplete: "cc-number",
+				value: String(input.value ?? ""),
+				error: meta.touched && meta.error ? meta.error : void 0,
+				onChange: (e) => {
+					input.onChange(e);
+					setCreditCardNumberInput(String(e.target.value ?? ""));
+				},
+				disabled: isFormDisabled,
+				required: !isFormDisabled
+			}, /* @__PURE__ */ React.createElement("div", { slot: "start" }, /* @__PURE__ */ React.createElement(CreditCardAdornment, { creditCardNumberInput })));
+		};
+		$[10] = creditCardNumberInput;
+		$[11] = isFormDisabled;
+		$[12] = setCreditCardNumberInput;
 		$[13] = t;
-		$[14] = t9;
-	} else t9 = $[14];
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t6 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ React.createElement(Field, {
+			name: "cardNumber",
+			initialValue: "",
+			format: formatCreditCardNumber,
+			validate: t6
+		}, t7);
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = {
+			0: 1,
+			320: 2
+		};
+		$[18] = t9;
+	} else t9 = $[18];
 	let t10;
-	if ($[15] !== creditCardNumberInput) {
-		t10 = { startAdornment: /* @__PURE__ */ React.createElement(CreditCardAdornment, { creditCardNumberInput }) };
-		$[15] = creditCardNumberInput;
-		$[16] = t10;
-	} else t10 = $[16];
+	if ($[19] !== t) {
+		t10 = t("Expiry Date");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
 	let t11;
-	if ($[17] !== isFormDisabled || $[18] !== t10 || $[19] !== t9) {
+	if ($[21] !== isFormDisabled || $[22] !== t10) {
 		t11 = {
-			label: t9,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true,
-			InputProps: t10
+			label: t10,
+			hint: "MM/YY",
+			autocomplete: "cc-exp",
+			disabled: isFormDisabled
 		};
-		$[17] = isFormDisabled;
-		$[18] = t10;
-		$[19] = t9;
-		$[20] = t11;
-	} else t11 = $[20];
+		$[21] = isFormDisabled;
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
 	const t12 = !isFormDisabled;
 	let t13;
-	if ($[21] !== setCreditCardNumberInput) {
-		t13 = (e) => setCreditCardNumberInput(e.target.value);
-		$[21] = setCreditCardNumberInput;
-		$[22] = t13;
-	} else t13 = $[22];
-	let t14;
-	if ($[23] !== t11 || $[24] !== t12 || $[25] !== t13) {
-		t14 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
+	if ($[24] !== t11 || $[25] !== t12) {
+		t13 = /* @__PURE__ */ React.createElement(Field$1, {
+			component: UdpTextInput,
 			ComponentProps: t11,
-			name: "cardNumber",
-			initialValue: "",
-			required: t12,
-			pattern: "\\d{16,22}",
-			format: formatCreditCardNumber,
-			onChange: t13
-		});
-		$[23] = t11;
-		$[24] = t12;
-		$[25] = t13;
-		$[26] = t14;
-	} else t14 = $[26];
-	let t15;
-	if ($[27] !== classes.cardNumber || $[28] !== t14) {
-		t15 = /* @__PURE__ */ React.createElement(FormControl, { className: t8 }, t14);
-		$[27] = classes.cardNumber;
-		$[28] = t14;
-		$[29] = t15;
-	} else t15 = $[29];
-	let t16;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = { gap: "10px" };
-		$[30] = t16;
-	} else t16 = $[30];
-	const t17 = classes.formControl;
-	let t18;
-	if ($[31] !== t) {
-		t18 = t("Expiry Date");
-		$[31] = t;
-		$[32] = t18;
-	} else t18 = $[32];
-	let t19;
-	if ($[33] !== isFormDisabled || $[34] !== t18) {
-		t19 = {
-			label: t18,
-			variant: "outlined",
-			margin: "normal",
-			size: "small",
-			width: "100%",
-			disabled: isFormDisabled,
-			fullWidth: true
-		};
-		$[33] = isFormDisabled;
-		$[34] = t18;
-		$[35] = t19;
-	} else t19 = $[35];
-	const t20 = t19;
-	const t21 = !isFormDisabled;
-	let t22;
-	if ($[36] !== t20 || $[37] !== t21) {
-		t22 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t20,
 			name: "expiryDate",
-			helperText: "MM/YY",
 			initialValue: "",
-			required: t21,
-			pattern: "\\d\\d/\\d\\d",
 			format: formatExpirationDate,
+			required: t12,
 			onChange: _temp2
 		});
-		$[36] = t20;
-		$[37] = t21;
-		$[38] = t22;
-	} else t22 = $[38];
-	let t23;
-	if ($[39] !== classes.formControl || $[40] !== t22) {
-		t23 = /* @__PURE__ */ React.createElement(FormControl, { className: t17 }, t22);
-		$[39] = classes.formControl;
-		$[40] = t22;
-		$[41] = t23;
-	} else t23 = $[41];
-	const t24 = classes.formControl;
-	let t25;
-	if ($[42] !== isFormDisabled) {
-		t25 = {
-			label: "CVV",
-			variant: "outlined",
-			margin: "normal",
-			size: "small",
-			width: "100%",
-			disabled: isFormDisabled,
-			fullWidth: true
+		$[24] = t11;
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t) {
+		t14 = t("CVV");
+		$[27] = t;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t) {
+		t15 = t("3-digit code on back");
+		$[29] = t;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== isFormDisabled || $[32] !== t14 || $[33] !== t15) {
+		t16 = {
+			label: t14,
+			hint: t15,
+			autocomplete: "cc-csc",
+			disabled: isFormDisabled
 		};
-		$[42] = isFormDisabled;
-		$[43] = t25;
-	} else t25 = $[43];
-	const t26 = t25;
-	let t27;
-	if ($[44] !== t) {
-		t27 = t("3-digit code on back");
-		$[44] = t;
-		$[45] = t27;
-	} else t27 = $[45];
-	const t28 = !isFormDisabled;
-	let t29;
-	if ($[46] !== t26 || $[47] !== t27 || $[48] !== t28) {
-		t29 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t26,
+		$[31] = isFormDisabled;
+		$[32] = t14;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	const t17 = !isFormDisabled;
+	let t18;
+	if ($[35] !== t16 || $[36] !== t17) {
+		t18 = /* @__PURE__ */ React.createElement(Field$1, {
+			component: UdpTextInput,
+			ComponentProps: t16,
 			name: "cvv",
-			helperText: t27,
 			initialValue: "",
-			required: t28,
-			pattern: "\\d{3,4}",
 			format: formatCVC,
+			required: t17,
 			onChange: _temp3
 		});
-		$[46] = t26;
-		$[47] = t27;
-		$[48] = t28;
-		$[49] = t29;
-	} else t29 = $[49];
-	let t30;
-	if ($[50] !== classes.formControl || $[51] !== t29) {
-		t30 = /* @__PURE__ */ React.createElement(FormControl, { className: t24 }, t29);
-		$[50] = classes.formControl;
-		$[51] = t29;
-		$[52] = t30;
-	} else t30 = $[52];
-	let t31;
-	if ($[53] !== t23 || $[54] !== t30) {
-		t31 = /* @__PURE__ */ React.createElement(Box, {
-			display: "flex",
-			flexDirection: "row",
-			alignItems: "flex-start",
-			padding: "0px",
-			width: "100%",
-			style: t16
-		}, t23, t30);
-		$[53] = t23;
-		$[54] = t30;
-		$[55] = t31;
-	} else t31 = $[55];
-	let t32;
-	if ($[56] !== isFormDisabled) {
-		t32 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentCheckbox,
-			name: "isSaveAsNewMethod",
+		$[35] = t16;
+		$[36] = t17;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
+	if ($[38] !== t13 || $[39] !== t18) {
+		t19 = /* @__PURE__ */ React.createElement(UdpContainerQueryGrid, {
+			columns: t9,
+			gaps: GRID_GAPS
+		}, t13, t18);
+		$[38] = t13;
+		$[39] = t18;
+		$[40] = t19;
+	} else t19 = $[40];
+	let t20;
+	if ($[41] !== allowSaveMethod || $[42] !== isFormDisabled || $[43] !== saveCardLabel) {
+		t20 = allowSaveMethod && /* @__PURE__ */ React.createElement(Field$1, {
+			component: UdpCheckbox,
 			type: "checkbox",
+			name: "isSaveAsNewMethod",
+			ComponentProps: {
+				label: saveCardLabel,
+				disabled: isFormDisabled
+			},
 			defaultValue: false,
-			disabled: isFormDisabled,
 			required: false,
 			onChange: _temp4
 		});
-		$[56] = isFormDisabled;
-		$[57] = t32;
-	} else t32 = $[57];
-	let t33;
-	if ($[58] !== accountNumber || $[59] !== t) {
-		t33 = accountNumber ? /* @__PURE__ */ React.createElement("span", null, t("Save this card to"), " ", /* @__PURE__ */ React.createElement("strong", null, " ", t("Account"), " ", accountNumber), " ", t("file")) : t("Save");
-		$[58] = accountNumber;
-		$[59] = t;
-		$[60] = t33;
-	} else t33 = $[60];
-	let t34;
-	if ($[61] !== t33) {
-		t34 = /* @__PURE__ */ React.createElement(Typography, null, t33);
-		$[61] = t33;
-		$[62] = t34;
-	} else t34 = $[62];
-	let t35;
-	if ($[63] !== t32 || $[64] !== t34) {
-		t35 = /* @__PURE__ */ React.createElement(FormControlLabel, {
-			control: t32,
-			label: t34
-		});
-		$[63] = t32;
-		$[64] = t34;
-		$[65] = t35;
-	} else t35 = $[65];
-	let t36;
-	if ($[66] !== classes.formControlCheck || $[67] !== t35) {
-		t36 = /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControlCheck }, t35);
-		$[66] = classes.formControlCheck;
-		$[67] = t35;
-		$[68] = t36;
-	} else t36 = $[68];
-	let t37;
-	if ($[69] !== t15 || $[70] !== t31 || $[71] !== t36 || $[72] !== t7) {
-		t37 = /* @__PURE__ */ React.createElement(PaymentCard, null, t7, t15, t31, t36);
-		$[69] = t15;
-		$[70] = t31;
-		$[71] = t36;
-		$[72] = t7;
-		$[73] = t37;
-	} else t37 = $[73];
-	return t37;
+		$[41] = allowSaveMethod;
+		$[42] = isFormDisabled;
+		$[43] = saveCardLabel;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
+	if ($[45] !== t19 || $[46] !== t20 || $[47] !== t5 || $[48] !== t8) {
+		t21 = /* @__PURE__ */ React.createElement(UdpFlexbox, {
+			direction: "column",
+			gap: "sm",
+			wrap: "nowrap"
+		}, t5, t8, t19, t20);
+		$[45] = t19;
+		$[46] = t20;
+		$[47] = t5;
+		$[48] = t8;
+		$[49] = t21;
+	} else t21 = $[49];
+	return t21;
 };
 function _temp() {}
 function _temp2() {}

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

@@ -1 +1 @@
-{"version":3,"file":"NewCreditCardForm.mjs","names":["React","useTranslation","Box","Field","FluentCheckbox","FluentTextField","FormControl","FormControlLabel","Typography","PaymentCard","formatCreditCardNumber","formatCVC","formatExpirationDate","CreditCardAdornment","PaymentDetails","NewCreditCardForm","t0","$","_c","isFormDisabled","classes","creditCardNumberInput","paymentDetails","setCreditCardNumberInput","t1","accountNumber","t","t2","formControl","t3","t4","label","variant","size","disabled","fullWidth","t5","t6","ComponentType","_temp","t7","t8","cardNumber","t9","t10","startAdornment","t11","InputProps","t12","t13","e","target","value","t14","t15","t16","Symbol","for","gap","t17","t18","t19","margin","width","t20","t21","t22","_temp2","t23","t24","t25","t26","t27","t28","t29","_temp3","t30","t31","t32","_temp4","t33","t34","t35","t36","formControlCheck","t37"],"sources":["../../../../src/utilities/form/paymentForm/NewCreditCardForm.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Box } from '../../../UI/Box'; \nimport { Field } from '../Field'; \nimport { FluentCheckbox } from '../../../UI/inputs/checkbox/FluentCheckbox';\nimport { FluentTextField } from '../../../UI/inputs/textField/FluentTextField';\nimport { FormControl } from '../../../UI/utilityDisplay/FormControl';\nimport { FormControlLabel } from '../../../UI/utilityDisplay/FormControlLabel';\nimport { Typography } from '../../../UI/dataDisplay/typography/Typography';\nimport { PaymentCard } from './PaymentCard';\nimport {\n  formatCreditCardNumber,\n  formatCVC,\n  formatExpirationDate\n} from './CreditCardUtils';\nimport { CreditCardAdornment } from './CreditCardAdornment';\nimport { PaymentDetails } from './AccountPayment.model';\n\n/**\n * NewCardForm component renders a form for entering new credit card details.\n *\n * @param {Object} props - The properties object.\n * @param {boolean} props.isFormDisabled - Flag to disable the form fields.\n * @param {Record<string, string>} props.classes - CSS classes for styling the form controls.\n * @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.\n *\n * @returns {JSX.Element} The rendered NewCardForm component.\n */\nexport const NewCreditCardForm = ({\n  isFormDisabled,\n  classes,\n  creditCardNumberInput,\n  paymentDetails,\n  setCreditCardNumberInput,\n}: {\n  isFormDisabled: boolean;\n  classes: Record<string, string>;\n  creditCardNumberInput: string;\n  paymentDetails: PaymentDetails;\n  setCreditCardNumberInput: React.Dispatch<React.SetStateAction<string>>;\n}) => {\n\n  const { accountNumber } = paymentDetails || {};\n  const { t } = useTranslation();\n\n  return (\n    <PaymentCard>\n      <FormControl className={classes.formControl}>\n        <Field\n          component={FluentTextField as React.ComponentType<any>}\n          ComponentProps={{\n            label: t(\"Cardholder\"),\n            variant: \"outlined\",\n            size: \"small\",\n            disabled: isFormDisabled,\n            fullWidth: true,\n          }}\n          name=\"nameOnCard\"\n          initialValue=\"\"\n          required={!isFormDisabled}\n          onChange={() => { }}\n        />\n      </FormControl>\n\n      <FormControl className={classes.cardNumber}>\n        <Field\n          component={FluentTextField as React.ComponentType<any>}\n          ComponentProps={{\n            label: t(\"Card Number\"),\n            variant: \"outlined\",\n            size: \"small\",\n            disabled: isFormDisabled,\n            fullWidth: true,\n            InputProps: {\n              startAdornment: <CreditCardAdornment creditCardNumberInput={creditCardNumberInput} />,\n            },\n          }}\n          name=\"cardNumber\"\n          initialValue=\"\"\n          required={!isFormDisabled}\n          pattern=\"\\d{16,22}\"\n          format={formatCreditCardNumber}\n          onChange={(e: any) => setCreditCardNumberInput(e.target.value)}\n        />\n      </FormControl>\n      <Box\n        display=\"flex\"\n        flexDirection=\"row\"\n        alignItems=\"flex-start\"\n        padding=\"0px\"\n        width=\"100%\"\n        style={{ gap: '10px' }}\n      >\n        <FormControl className={classes.formControl}>\n          <Field\n            // @ts-ignore\n            component={FluentTextField}\n            ComponentProps={\n              {\n                label: t(\"Expiry Date\"),\n                variant: \"outlined\",\n                margin: \"normal\",\n                size: \"small\",\n                width: \"100%\",\n                disabled: isFormDisabled,\n                fullWidth: true\n              } as any\n            }\n            name=\"expiryDate\"\n            helperText=\"MM/YY\"\n            initialValue={\"\"}\n            required={!isFormDisabled}\n            pattern=\"\\d\\d/\\d\\d\"\n            format={formatExpirationDate}\n            onChange={() => { }}\n          />\n        </FormControl>\n\n        <FormControl className={classes.formControl}>\n          <Field\n            // @ts-ignore\n            component={FluentTextField}\n            ComponentProps={\n              {\n                label: \"CVV\",\n                variant: \"outlined\",\n                margin: \"normal\",\n                size: \"small\",\n                width: \"100%\",\n                disabled: isFormDisabled,\n                fullWidth: true\n              } as any\n            }\n            name=\"cvv\"\n            helperText={t(\"3-digit code on back\")}\n            initialValue={\"\"}\n            required={!isFormDisabled}\n            pattern=\"\\d{3,4}\"\n            format={formatCVC}\n            onChange={() => { }}\n          />\n        </FormControl>\n      </Box>\n\n      {/* Save as new method Checkbox */}\n      <FormControl className={classes.formControlCheck}>\n        <FormControlLabel\n          control={\n            <Field\n              component={FluentCheckbox}\n              name=\"isSaveAsNewMethod\"\n              type=\"checkbox\"\n              defaultValue={false}\n              // @ts-ignore\n              disabled={isFormDisabled}\n              required={false}\n              onChange={() => { }}\n            />\n          }\n          label={\n            <Typography>\n              {\n                accountNumber ?\n                  <span>{t('Save this card to')} <strong> {t('Account')} {accountNumber}</strong> {t('file')}</span>\n                  :\n                  t('Save')\n              }\n            </Typography>\n          } />\n      </FormControl>\n    </PaymentCard>\n  );\n};"],"mappings":"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"}
+{"version":3,"file":"NewCreditCardForm.mjs","names":["React","useState","useTranslation","Field","FinalField","UdpFlexbox","UdpContainerQueryGrid","UdpTextInput","UdpCheckbox","formatCreditCardNumber","formatCVC","formatExpirationDate","CreditCardAdornment","PaymentDetails","GRID_GAPS","breakpoint","NewCreditCardFormProps","isFormDisabled","paymentDetails","allowSaveMethod","NewCreditCardForm","t0","$","_c","t1","undefined","accountNumber","t","creditCardNumberInput","setCreditCardNumberInput","saveCardLabel","t2","t3","label","autocomplete","disabled","t4","t5","ComponentType","_temp","t6","value","t7","t8","input","meta","String","touched","error","e","onChange","target","t9","Symbol","for","0","320","t10","t11","hint","t12","t13","_temp2","t14","t15","t16","t17","t18","_temp3","t19","t20","_temp4","t21"],"sources":["../../../../src/utilities/form/paymentForm/NewCreditCardForm.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Field as FinalField } from 'react-final-form';\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 {\n  formatCreditCardNumber,\n  formatCVC,\n  formatExpirationDate,\n} from './CreditCardUtils';\nimport { CreditCardAdornment } from './CreditCardAdornment';\nimport { PaymentDetails } from './AccountPayment.model';\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// site 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 NewCreditCardFormProps {\n  isFormDisabled: boolean;\n  paymentDetails: PaymentDetails;\n  /** When false, hides the \"save this card\" checkbox (guest flows). */\n  allowSaveMethod?: boolean;\n}\n\n/**\n * Manual credit-card entry form. Used when the configured vendor doesn't have\n * a hosted-payment page, or when the user selected \"Other / use a different\n * card\" while saved methods were available.\n *\n * NOTE: This form collects raw PAN/CVV/expiry in our DOM. Retained for\n * testing until hosted pages are provisioned for every supported vendor.\n */\nexport const NewCreditCardForm = ({\n  isFormDisabled,\n  paymentDetails,\n  allowSaveMethod = true,\n}: NewCreditCardFormProps) => {\n  const { accountNumber } = paymentDetails || {};\n  const { t } = useTranslation();\n  const [creditCardNumberInput, setCreditCardNumberInput] = useState('');\n\n  const saveCardLabel = accountNumber\n    ? t('Save this card to account {{accountNumber}}', { accountNumber })\n    : t('Save');\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('Cardholder'),\n          autocomplete: 'cc-name',\n          disabled: isFormDisabled,\n        }}\n        name=\"nameOnCard\"\n        initialValue=\"\"\n        required={!isFormDisabled}\n        onChange={() => {}}\n      />\n\n      <FinalField\n        name=\"cardNumber\"\n        initialValue=\"\"\n        format={formatCreditCardNumber}\n        // Raw FinalField (the brand adornment needs the render prop), so the\n        // required validation the Field wrapper would add is replicated here.\n        validate={(value) => (!isFormDisabled && !value ? 'Required' : undefined)}\n      >\n        {({ input, meta }) => (\n          <UdpTextInput\n            label={t('Card Number')}\n            autocomplete=\"cc-number\"\n            value={String(input.value ?? '')}\n            error={meta.touched && meta.error ? meta.error : undefined}\n            onChange={(e) => {\n              input.onChange(e);\n              setCreditCardNumberInput(String(e.target.value ?? ''));\n            }}\n            disabled={isFormDisabled}\n            required={!isFormDisabled}\n          >\n            <div slot=\"start\">\n              <CreditCardAdornment creditCardNumberInput={creditCardNumberInput} />\n            </div>\n          </UdpTextInput>\n        )}\n      </FinalField>\n\n      <UdpContainerQueryGrid columns={{ 0: 1, 320: 2 }} gaps={GRID_GAPS}>\n        <Field\n          component={UdpTextInput as React.ComponentType<any>}\n          ComponentProps={{\n            label: t('Expiry Date'),\n            hint: 'MM/YY',\n            autocomplete: 'cc-exp',\n            disabled: isFormDisabled,\n          }}\n          name=\"expiryDate\"\n          initialValue=\"\"\n          format={formatExpirationDate}\n          required={!isFormDisabled}\n          onChange={() => {}}\n        />\n\n        <Field\n          component={UdpTextInput as React.ComponentType<any>}\n          ComponentProps={{\n            label: t('CVV'),\n            hint: t('3-digit code on back'),\n            autocomplete: 'cc-csc',\n            disabled: isFormDisabled,\n          }}\n          name=\"cvv\"\n          initialValue=\"\"\n          format={formatCVC}\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: saveCardLabel,\n            disabled: isFormDisabled,\n          }}\n          defaultValue={false}\n          required={false}\n          onChange={() => {}}\n        />\n      )}\n    </UdpFlexbox>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,17 +1,12 @@
 import React from 'react';
-/**
- * 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 declare const NewECheckForm: ({ isFormDisabled, classes, bankAccountTypes, }: {
+export interface NewECheckFormProps {
     isFormDisabled: boolean;
-    classes: Record<string, string>;
-    bankAccountTypes?: any[];
-}) => React.JSX.Element;
+    bankAccountTypes?: {
+        name: string;
+        value: string;
+    }[];
+    /** When false, hides the "save" checkbox (guest flows). */
+    allowSaveMethod?: boolean;
+}
+export declare const NewECheckForm: ({ isFormDisabled, bankAccountTypes, allowSaveMethod, }: NewECheckFormProps) => React.JSX.Element;
 //# sourceMappingURL=NewECheckForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NewECheckForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/NewECheckForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa;;;;uBA2HzB,CAAC"}
+{"version":3,"file":"NewECheckForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/NewECheckForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,mGAuFzB,CAAC"}