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

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

@@ -1 +1 @@
-{"version":3,"file":"CashForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CashForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAcxD,UAAU,aAAa;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD;AAED,eAAO,MAAM,QAAQ,uGA+DpB,CAAA"}
+{"version":3,"file":"CashForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CashForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,aAAa;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD;AAED,eAAO,MAAM,QAAQ,wEA6CpB,CAAC"}

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

@@ -1,56 +1,24 @@
 import React from 'react';
-import { FormControl, makeStyles, InputAdornment } from '@material-ui/core';
-import { Field } from '../Field';
-import { FluentTextField } from '../../../UI/inputs/textField/FluentTextField';
 import { useTranslation } from 'react-i18next';
-import { PaymentCard } from './PaymentCard';
-const useStyles = makeStyles(theme => ({
-    formControl: {
-        width: '100%',
-        marginBottom: '10px',
-    },
-    formControlCheck: {
-        width: '100%',
-        marginTop: '5px',
-        marginLeft: '3px',
-    },
-}));
-export const CashForm = ({ isFormDisabled = false, paymentDetails, amountValue = null, onStatusChange }) => {
+import { Field as FinalField } from 'react-final-form';
+import { Field } from '../Field';
+import { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';
+import { UdpTextInput } from '../../../UI/fluent-web-components/UdpTextInput';
+import { UdpTextarea } from '../../../UI/fluent-web-components/UdpTextarea';
+export const CashForm = ({ isFormDisabled = false, amountValue = null, }) => {
     const { t } = useTranslation();
-    const classes = useStyles();
-    return (React.createElement(PaymentCard, null, React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            // @ts-ignore
-            label: t("Amount"),
-            variant: "outlined",
-            margin: "none",
-            size: "small",
-            disabled: isFormDisabled || amountValue || false,
-            fullWidth: true,
-            InputProps: {
-                startAdornment: (React.createElement(InputAdornment, { position: "start" }, "$")),
-            },
-        }, name: "cashAmount", initialValue: amountValue, required: !isFormDisabled })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            label: t("Description"),
-            variant: 'outlined',
-            margin: 'normal',
-            size: 'small',
-            disabled: false,
-            fullWidth: true,
-            autoComplete: 'off',
-            multiline: true,
-            rows: 4,
-            inputProps: {
-                maxLength: 256,
-                autocomplete: 'off',
-            },
-        }, name: "cashDescription", initialValue: "", required: !isFormDisabled }))));
+    const amountLocked = isFormDisabled || amountValue != null;
+    return (React.createElement(UdpFlexbox, { direction: "column", gap: "sm", wrap: "nowrap" }, React.createElement(FinalField, { name: "cashAmount", initialValue: String(amountValue !== null && amountValue !== void 0 ? amountValue : ''), 
+        // Raw FinalField, so the Field wrapper's required validation is
+        // replicated here (skipped when the amount is preset/locked).
+        validate: (value) => (!amountLocked && !value ? 'Required' : undefined) }, ({ input, meta }) => {
+        var _a;
+        return (React.createElement(UdpTextInput, { label: t('Amount'), value: String((_a = input.value) !== null && _a !== void 0 ? _a : ''), error: meta.touched && meta.error ? meta.error : undefined, onChange: input.onChange, disabled: amountLocked, required: !isFormDisabled }, React.createElement("span", { slot: "start" }, "$")));
+    }), React.createElement(Field, { component: UdpTextarea, ComponentProps: {
+            label: t('Description'),
+            maxLength: 256,
+            autoResize: true,
+            disabled: isFormDisabled,
+        }, name: "cashDescription", initialValue: "", required: !isFormDisabled, onChange: () => { } })));
 };
 //# sourceMappingURL=CashForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CashForm.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CashForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,WAAW,EAAE;QACX,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,MAAM;KACrB;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,KAAK;QAChB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAC,CAAC;AASJ,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,WAAW,GAAG,IAAI,EAClB,cAAc,EACA,EAAE,EAAE,CAAC;IACnB,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,CACL,oBAAC,WAAW,QACV,oBAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,IACzC,oBAAC,KAAK;IACJ,aAAa;;QAAb,aAAa;QACb,SAAS,EAAE,eAAe,EAC1B,cAAc,EAAE;YACd,aAAa;YACb,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC;YAClB,OAAO,EAAE,UAAU;YACnB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,cAAc,IAAI,WAAW,IAAI,KAAK;YAChD,SAAS,EAAE,IAAI;YACf,UAAU,EAAE;gBACV,cAAc,EAAE,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO,QAAmB,CACpD;aACF;SACF,EACD,IAAI,EAAC,YAAY,EACjB,YAAY,EAAE,WAAW,EACzB,QAAQ,EAAE,CAAC,cAAc,GACzB,CACU,EAEd,oBAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,IACzC,oBAAC,KAAK;IACJ,aAAa;;QAAb,aAAa;QACb,SAAS,EAAE,eAAe,EAC1B,cAAc,EACZ;YACE,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;YACvB,OAAO,EAAE,UAAU;YACnB,MAAM,EAAE,QAAQ;YAChB,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,IAAI;YACf,IAAI,EAAE,CAAC;YACP,UAAU,EAAE;gBACV,SAAS,EAAE,GAAG;gBACd,YAAY,EAAE,KAAK;aACpB;SACK,EAEV,IAAI,EAAC,iBAAiB,EACtB,YAAY,EAAC,EAAE,EACf,QAAQ,EAAE,CAAC,cAAc,GACzB,CACU,CACF,CACf,CAAC;AAAA,CACH,CAAA"}
+{"version":3,"file":"CashForm.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CashForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAU5E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,cAAc,GAAG,KAAK,EACtB,WAAW,GAAG,IAAI,GACJ,EAAE,EAAE,CAAC;IACnB,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,cAAc,IAAI,WAAW,IAAI,IAAI,CAAC;IAE3D,OAAO,CACL,oBAAC,UAAU,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,IACnD,oBAAC,UAAU,IACT,IAAI,EAAC,YAAY,EACjB,YAAY,EAAE,MAAM,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE,CAAC;QACvC,gEAAgE;QAChE,8DAA8D;QAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAEtE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;;eAAC,CACpB,oBAAC,YAAY,IACX,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,EAClB,KAAK,EAAE,MAAM,OAAC,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC1D,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,CAAC,cAAc,IAEzB,8BAAM,IAAI,EAAC,OAAO,QAAS,CACd,CAChB;KAAA,CACU,EAEb,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAuC,EAClD,cAAc,EAAE;YACd,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC;YACvB,SAAS,EAAE,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,cAAc;SACzB,EACD,IAAI,EAAC,iBAAiB,EACtB,YAAY,EAAC,EAAE,EACf,QAAQ,EAAE,CAAC,cAAc,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAC,CAAC,GAClB,CACS,CACd,CAAC;AAAA,CACH,CAAC"}

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

@@ -1,142 +1,103 @@
 import { c } from "../../../reactCompilerRuntime.mjs";
-import { Field } from "../Field.mjs";
-import { FluentTextField } from "../../../UI/inputs/textField/FluentTextField.mjs";
-import { PaymentCard } from "./PaymentCard.mjs";
+import { Field as Field$1 } from "../Field.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpTextInput } from "../../../UI/fluent-web-components/UdpTextInput.mjs";
+import { UdpTextarea } from "../../../UI/fluent-web-components/UdpTextarea.mjs";
 import React from "react";
-import { FormControl, InputAdornment, makeStyles } from "@material-ui/core";
+import { Field } from "react-final-form";
 import { useTranslation } from "react-i18next";
 //#region src/utilities/form/paymentForm/CashForm.tsx
-const useStyles = makeStyles((theme) => ({
-	formControl: {
-		width: "100%",
-		marginBottom: "10px"
-	},
-	formControlCheck: {
-		width: "100%",
-		marginTop: "5px",
-		marginLeft: "3px"
-	}
-}));
 const CashForm = (t0) => {
-	const $ = c(27);
+	const $ = c(21);
 	const { isFormDisabled: t1, amountValue: t2 } = t0;
 	const isFormDisabled = t1 === void 0 ? false : t1;
 	const amountValue = t2 === void 0 ? null : t2;
 	const { t } = useTranslation();
-	const classes = useStyles();
-	const t3 = classes.formControl;
+	const amountLocked = isFormDisabled || amountValue != null;
+	const t3 = String(amountValue ?? "");
 	let t4;
-	if ($[0] !== t) {
-		t4 = t("Amount");
-		$[0] = t;
+	if ($[0] !== amountLocked) {
+		t4 = (value) => !amountLocked && !value ? "Required" : void 0;
+		$[0] = amountLocked;
 		$[1] = t4;
 	} else t4 = $[1];
-	const t5 = isFormDisabled || amountValue || false;
-	let t6;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = { startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, "$") };
-		$[2] = t6;
-	} else t6 = $[2];
-	let t7;
-	if ($[3] !== t4 || $[4] !== t5) {
-		t7 = {
-			label: t4,
-			variant: "outlined",
-			margin: "none",
-			size: "small",
-			disabled: t5,
-			fullWidth: true,
-			InputProps: t6
+	let t5;
+	if ($[2] !== amountLocked || $[3] !== isFormDisabled || $[4] !== t) {
+		t5 = (t6) => {
+			const { input, meta } = t6;
+			return /* @__PURE__ */ React.createElement(UdpTextInput, {
+				label: t("Amount"),
+				value: String(input.value ?? ""),
+				error: meta.touched && meta.error ? meta.error : void 0,
+				onChange: input.onChange,
+				disabled: amountLocked,
+				required: !isFormDisabled
+			}, /* @__PURE__ */ React.createElement("span", { slot: "start" }, "$"));
 		};
-		$[3] = t4;
-		$[4] = t5;
-		$[5] = t7;
-	} else t7 = $[5];
-	const t8 = !isFormDisabled;
-	let t9;
-	if ($[6] !== amountValue || $[7] !== t7 || $[8] !== t8) {
-		t9 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t7,
+		$[2] = amountLocked;
+		$[3] = isFormDisabled;
+		$[4] = t;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== t3 || $[7] !== t4 || $[8] !== t5) {
+		t6 = /* @__PURE__ */ React.createElement(Field, {
 			name: "cashAmount",
-			initialValue: amountValue,
-			required: t8
-		});
-		$[6] = amountValue;
-		$[7] = t7;
-		$[8] = t8;
-		$[9] = t9;
-	} else t9 = $[9];
-	let t10;
-	if ($[10] !== classes.formControl || $[11] !== t9) {
-		t10 = /* @__PURE__ */ React.createElement(FormControl, { className: t3 }, t9);
-		$[10] = classes.formControl;
-		$[11] = t9;
-		$[12] = t10;
-	} else t10 = $[12];
-	const t11 = classes.formControl;
-	let t12;
-	if ($[13] !== t) {
-		t12 = t("Description");
-		$[13] = t;
-		$[14] = t12;
-	} else t12 = $[14];
-	let t13;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = {
+			initialValue: t3,
+			validate: t4
+		}, t5);
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t) {
+		t7 = t("Description");
+		$[10] = t;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== isFormDisabled || $[13] !== t7) {
+		t8 = {
+			label: t7,
 			maxLength: 256,
-			autocomplete: "off"
+			autoResize: true,
+			disabled: isFormDisabled
 		};
-		$[15] = t13;
-	} else t13 = $[15];
-	let t14;
-	if ($[16] !== t12) {
-		t14 = {
-			label: t12,
-			variant: "outlined",
-			margin: "normal",
-			size: "small",
-			disabled: false,
-			fullWidth: true,
-			autoComplete: "off",
-			multiline: true,
-			rows: 4,
-			inputProps: t13
-		};
-		$[16] = t12;
-		$[17] = t14;
-	} else t14 = $[17];
-	const t15 = t14;
-	const t16 = !isFormDisabled;
-	let t17;
-	if ($[18] !== t15 || $[19] !== t16) {
-		t17 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t15,
+		$[12] = isFormDisabled;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	const t9 = !isFormDisabled;
+	let t10;
+	if ($[15] !== t8 || $[16] !== t9) {
+		t10 = /* @__PURE__ */ React.createElement(Field$1, {
+			component: UdpTextarea,
+			ComponentProps: t8,
 			name: "cashDescription",
 			initialValue: "",
-			required: t16
+			required: t9,
+			onChange: _temp
 		});
-		$[18] = t15;
-		$[19] = t16;
-		$[20] = t17;
-	} else t17 = $[20];
-	let t18;
-	if ($[21] !== classes.formControl || $[22] !== t17) {
-		t18 = /* @__PURE__ */ React.createElement(FormControl, { className: t11 }, t17);
-		$[21] = classes.formControl;
-		$[22] = t17;
-		$[23] = t18;
-	} else t18 = $[23];
-	let t19;
-	if ($[24] !== t10 || $[25] !== t18) {
-		t19 = /* @__PURE__ */ React.createElement(PaymentCard, null, t10, t18);
-		$[24] = t10;
-		$[25] = t18;
-		$[26] = t19;
-	} else t19 = $[26];
-	return t19;
+		$[15] = t8;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t10 || $[19] !== t6) {
+		t11 = /* @__PURE__ */ React.createElement(UdpFlexbox, {
+			direction: "column",
+			gap: "sm",
+			wrap: "nowrap"
+		}, t6, t10);
+		$[18] = t10;
+		$[19] = t6;
+		$[20] = t11;
+	} else t11 = $[20];
+	return t11;
 };
+function _temp() {}
 //#endregion
 export { CashForm };
 

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

@@ -1 +1 @@
-{"version":3,"file":"CashForm.mjs","names":["React","FormControl","makeStyles","InputAdornment","Field","FluentTextField","useTranslation","PaymentCard","PaymentDetails","useStyles","theme","formControl","width","marginBottom","formControlCheck","marginTop","marginLeft","CashFormProps","isFormDisabled","paymentDetails","amountValue","onStatusChange","paymentFormResult","CashForm","t0","$","_c","t1","t2","undefined","t","classes","t3","t4","t5","t6","Symbol","for","startAdornment","t7","label","variant","margin","size","disabled","fullWidth","InputProps","t8","t9","t10","t11","t12","t13","maxLength","autocomplete","t14","autoComplete","multiline","rows","inputProps","t15","t16","t17","t18","t19"],"sources":["../../../../src/utilities/form/paymentForm/CashForm.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  FormControl,\n  makeStyles,\n  InputAdornment\n} from '@material-ui/core';\nimport { Field } from '../Field';\nimport { FluentTextField } from '../../../UI/inputs/textField/FluentTextField'\nimport { useTranslation } from 'react-i18next';\nimport { PaymentCard } from './PaymentCard';\nimport { PaymentDetails } from './AccountPayment.model';\n\nconst useStyles = makeStyles(theme => ({\n  formControl: {\n    width: '100%',\n    marginBottom: '10px',\n  },\n  formControlCheck: {\n    width: '100%',\n    marginTop: '5px',\n    marginLeft: '3px',\n  },\n}));\n\ninterface CashFormProps {\n  isFormDisabled?: boolean;\n  paymentDetails: PaymentDetails;\n  amountValue?: string | number | null | undefined;\n  onStatusChange?: (paymentFormResult: boolean) => void;\n}\n\nexport const CashForm = ({\n  isFormDisabled = false,\n  paymentDetails,\n  amountValue = null,\n  onStatusChange\n}: CashFormProps) => {\n  const { t } = useTranslation();\n  const classes = useStyles();\n\n  return (\n    <PaymentCard>\n      <FormControl className={classes.formControl}>\n        <Field\n          // @ts-ignore\n          component={FluentTextField}\n          ComponentProps={{\n            // @ts-ignore\n            label: t(\"Amount\"),\n            variant: \"outlined\",\n            margin: \"none\",\n            size: \"small\",\n            disabled: isFormDisabled || amountValue || false,\n            fullWidth: true,\n            InputProps: {\n              startAdornment: (\n                <InputAdornment position=\"start\">$</InputAdornment>\n              ),\n            },\n          }}\n          name=\"cashAmount\"\n          initialValue={amountValue}\n          required={!isFormDisabled}\n        />\n      </FormControl>\n\n      <FormControl className={classes.formControl}>\n        <Field\n          // @ts-ignore\n          component={FluentTextField}\n          ComponentProps={\n            {\n              label: t(\"Description\"),\n              variant: 'outlined',\n              margin: 'normal',\n              size: 'small',\n              disabled: false,\n              fullWidth: true,\n              autoComplete: 'off',\n              multiline: true,\n              rows: 4,\n              inputProps: {\n                maxLength: 256,\n                autocomplete: 'off',\n              },\n            } as any\n          }\n          name=\"cashDescription\"\n          initialValue=\"\"\n          required={!isFormDisabled}\n        />\n      </FormControl>\n    </PaymentCard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CashForm.mjs","names":["React","useTranslation","Field","FinalField","UdpFlexbox","UdpTextInput","UdpTextarea","PaymentDetails","CashFormProps","isFormDisabled","paymentDetails","amountValue","onStatusChange","paymentFormResult","CashForm","t0","$","_c","t1","t2","undefined","t","amountLocked","t3","String","t4","value","t5","t6","input","meta","touched","error","onChange","t7","t8","label","maxLength","autoResize","disabled","t9","t10","ComponentType","_temp","t11"],"sources":["../../../../src/utilities/form/paymentForm/CashForm.tsx"],"sourcesContent":["import React 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 { UdpTextInput } from '../../../UI/fluent-web-components/UdpTextInput';\nimport { UdpTextarea } from '../../../UI/fluent-web-components/UdpTextarea';\nimport { PaymentDetails } from './AccountPayment.model';\n\ninterface CashFormProps {\n  isFormDisabled?: boolean;\n  paymentDetails: PaymentDetails;\n  amountValue?: string | number | null | undefined;\n  onStatusChange?: (paymentFormResult: boolean) => void;\n}\n\nexport const CashForm = ({\n  isFormDisabled = false,\n  amountValue = null,\n}: CashFormProps) => {\n  const { t } = useTranslation();\n  const amountLocked = isFormDisabled || amountValue != null;\n\n  return (\n    <UdpFlexbox direction=\"column\" gap=\"sm\" wrap=\"nowrap\">\n      <FinalField\n        name=\"cashAmount\"\n        initialValue={String(amountValue ?? '')}\n        // Raw FinalField, so the Field wrapper's required validation is\n        // replicated here (skipped when the amount is preset/locked).\n        validate={(value) => (!amountLocked && !value ? 'Required' : undefined)}\n      >\n        {({ input, meta }) => (\n          <UdpTextInput\n            label={t('Amount')}\n            value={String(input.value ?? '')}\n            error={meta.touched && meta.error ? meta.error : undefined}\n            onChange={input.onChange}\n            disabled={amountLocked}\n            required={!isFormDisabled}\n          >\n            <span slot=\"start\">$</span>\n          </UdpTextInput>\n        )}\n      </FinalField>\n\n      <Field\n        component={UdpTextarea as React.ComponentType<any>}\n        ComponentProps={{\n          label: t('Description'),\n          maxLength: 256,\n          autoResize: true,\n          disabled: isFormDisabled,\n        }}\n        name=\"cashDescription\"\n        initialValue=\"\"\n        required={!isFormDisabled}\n        onChange={() => {}}\n      />\n    </UdpFlexbox>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,MAAac,YAAWC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAR,gBAAAS,IAAAP,aAAAQ,OAAAJ;CACvB,MAAAN,iBAAAS,OAAAE,KAAAA,IAAA,QAAAF;CACA,MAAAP,cAAAQ,OAAAC,KAAAA,IAAA,OAAAD;CAEA,MAAA,EAAAE,MAAcpB,gBAAgB;CAC9B,MAAAqB,eAAqBb,kBAAkBE,eAAe;CAMlC,MAAAY,KAAAC,OAAOb,eAAA,GAAkB;CAAA,IAAAc;AAAA,KAAAT,EAAA,OAAAM,cAAA;AAG7BG,QAAAC,UAAY,CAACJ,gBAAD,CAAkBI,QAAlB,aAAAN,KAAAA;AAAiDJ,IAAA,KAAAM;AAAAN,IAAA,KAAAS;OAAAA,MAAAT,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAM,gBAAAN,EAAA,OAAAP,kBAAAO,EAAA,OAAAK,GAAA;AAEtEM,QAAAC,OAAA;GAAC,MAAA,EAAAC,OAAAC,SAAAF;AAAe,UACf,sBAAA,cAAC,cAAD;IACS,OAAAP,EAAE,SAAQ;IACV,OAAAG,OAAOK,MAAKH,SAAL,GAAiB;IACxB,OAAAI,KAAIC,WAAYD,KAAIE,QAASF,KAAIE,QAAjCZ,KAAAA;IACG,UAAAS,MAAKI;IACLX,UAAAA;IACA,UAAA,CAACb;IAGE,EADb,sBAAA,cAAA,QAAA,EAAW,MAAA,SACb,EADqB,IACrB,CAAe;;AAChBO,IAAA,KAAAM;AAAAN,IAAA,KAAAP;AAAAO,IAAA,KAAAK;AAAAL,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,OAAAO,MAAAP,EAAA,OAAAS,MAAAT,EAAA,OAAAW,IAAA;AAlBHC,OAAA,sBAAA,cAAC,OAAD;GACO,MAAA;GACS,cAAAL;GAGJ,UAAAE;GAcC,EAZVE,GAYU;AAAAX,IAAA,KAAAO;AAAAP,IAAA,KAAAS;AAAAT,IAAA,KAAAW;AAAAX,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;CAAA,IAAAkB;AAAA,KAAAlB,EAAA,QAAAK,GAAA;AAKFa,OAAAb,EAAE,cAAc;AAAAL,IAAA,MAAAK;AAAAL,IAAA,MAAAkB;OAAAA,MAAAlB,EAAA;CAAA,IAAAmB;AAAA,KAAAnB,EAAA,QAAAP,kBAAAO,EAAA,QAAAkB,IAAA;AADTC,OAAA;GAAAC,OACPF;GAAgBG,WACZ;GAAGC,YACF;GAAIC,UACN9B;GACX;AAAAO,IAAA,MAAAP;AAAAO,IAAA,MAAAkB;AAAAlB,IAAA,MAAAmB;OAAAA,MAAAnB,EAAA;CAGS,MAAAwB,KAAA,CAAC/B;CAAc,IAAAgC;AAAA,KAAAzB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAwB,IAAA;AAV3BC,QAAA,sBAAA,cAAC,SAAD;GACa,WAAAnC;GACK,gBAAA6B;GAMX,MAAA;GACQ,cAAA;GACH,UAAAK;GACA,UAAAG;GACV,CAAA;AAAA3B,IAAA,MAAAmB;AAAAnB,IAAA,MAAAwB;AAAAxB,IAAA,MAAAyB;OAAAA,OAAAzB,EAAA;CAAA,IAAA4B;AAAA,KAAA5B,EAAA,QAAAyB,OAAAzB,EAAA,QAAAY,IAAA;AAlCJgB,QAAA,sBAAA,cAAC,YAAD;GAAsB,WAAA;GAAa,KAAA;GAAU,MAAA;GAmChC,EAlCXhB,IAqBAa,IAaW;AAAAzB,IAAA,MAAAyB;AAAAzB,IAAA,MAAAY;AAAAZ,IAAA,MAAA4B;OAAAA,OAAA5B,EAAA;AAAA,QAnCb4B;;AARoB,SAAAD,QAAA"}

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

@@ -1,10 +1,11 @@
+import React from 'react';
 import { PaymentDetails, PaymentMethodData } from './AccountPayment.model';
 import { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';
 interface CreditCardFormProps {
     isFormDisabled?: boolean;
     paymentDetails: PaymentDetails;
     externalId?: string;
-    tenantId: string;
+    tenantId?: string;
     providerType?: PaymentVendorFactoryEnum | null;
     providerProps?: any;
     isHostedPaymentPage?: boolean | null;
@@ -13,30 +14,18 @@ interface CreditCardFormProps {
     enabled?: boolean | null;
     data?: PaymentMethodData;
     actionLabel?: string;
+    /** When false, the manual card form hides its "save this card" checkbox. */
+    allowSaveMethod?: boolean;
     setSelectedPaymentAccount?: (paymentAccount: any) => void;
     onStatusChange?: (paymentFormResult: any) => void;
 }
 /**
- * CreditCardForm component handles the rendering of a credit card payment form.
- * It supports both hosted payment pages and direct credit card input forms.
- *
- * @param {boolean} isFormDisabled - Flag to disable the form.
- * @param {object} data - Data related to the payment form.
- * @param {string} externalId - External identifier for the payment form.
- * @param {object} paymentDetails - Details of the payment.
- * @param {string|null} providerType - Type of the payment provider.
- * @param {object|null} providerProps - Properties for the payment provider.
- * @param {boolean} isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
- * @param {boolean} hasReadPropertiesError - Flag to indicate if there was an error reading properties.
- * @param {string} readPropertiesMessageError - Error message for reading properties.
- * @param {boolean} enabled - Flag to indicate if the form is enabled.
- * @param {function} onStatusChange - Callback function to handle status changes.
- * @param {function} setSelectedPaymentAccount - Callback function to set the selected payment account.
- * @param {string} actionLabel - Label for the action button.
- * @param {object} restProps - Additional properties.
- *
- * @returns {JSX.Element} The rendered CreditCardForm component.
+ * Credit-card branch of the payment form. Shows:
+ *   - A radio list of saved cards (when any exist) + an "Other / new card"
+ *     option, per D3 of REFACTOR_PLAN.md
+ *   - Either the hosted-payment iframe (when `isHostedPaymentPage`) or the
+ *     manual `NewCreditCardForm` once the user picks "Other".
  */
-export declare const CreditCardForm: ({ isFormDisabled, data, externalId, paymentDetails, providerType, providerProps, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, enabled, actionLabel, onStatusChange, setSelectedPaymentAccount, ...restProps }: CreditCardFormProps) => any;
+export declare const CreditCardForm: ({ isFormDisabled, data, externalId, paymentDetails, providerType, providerProps, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, actionLabel, allowSaveMethod, onStatusChange, setSelectedPaymentAccount, }: CreditCardFormProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=CreditCardForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreditCardForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CreditCardForm.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AA+BnF,UAAU,mBAAmB;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,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,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,CAAC,cAAc,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,GAAG,KAAK,IAAI,CAAC;CACnD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,cAAc,yQA0G1B,CAAC"}
+{"version":3,"file":"CreditCardForm.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CreditCardForm.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,mBAAmB;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,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,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yBAAyB,CAAC,EAAE,CAAC,cAAc,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,GAAG,KAAK,IAAI,CAAC;CACnD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,kRA8I1B,CAAC"}

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

@@ -1,103 +1,97 @@
-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, { useState, useEffect } from 'react';
-import { Box, makeStyles } from '@material-ui/core';
-import { UnityFluentIcon } from '../../iconLibrary/UnityFluentIcon';
-import { getIconFromName } from '../../tree/TreeUtilities';
+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 { LinearProgress } from '../../../UI/loading/LinearProgress';
-import { useUser } from '../../auth/useUser';
-import { useAxiosGet } from '../../useAxiosGet';
-import PaymentDropdown from './PaymentDropdown';
-import { FluentButton } from '../../../UI/inputs/buttons/FluentButton';
+import { useApiQuery } from '../../useApiQuery';
 import { HostedPaymentError } from './HostedPaymentError';
 import { NewCreditCardForm } from './NewCreditCardForm';
 import { ConfigService } from '../../../configService';
-const useStyles = makeStyles(theme => ({
-    cardNumber: {
-        width: '100%',
-        marginBottom: '10px'
-    },
-    formControl: {
-        width: '100%',
-        '&.cardNumber': {
-            marginBottom: '10px',
-        },
-        '&.submitControl': {
-            marginTop: '35px',
-        },
-    },
-    formControlCheck: {
-        width: '100%',
-        marginTop: '5px',
-        marginLeft: '3px',
-    },
-}));
+const OTHER_RADIO_VALUE = '__other__';
 /**
- * CreditCardForm component handles the rendering of a credit card payment form.
- * It supports both hosted payment pages and direct credit card input forms.
- *
- * @param {boolean} isFormDisabled - Flag to disable the form.
- * @param {object} data - Data related to the payment form.
- * @param {string} externalId - External identifier for the payment form.
- * @param {object} paymentDetails - Details of the payment.
- * @param {string|null} providerType - Type of the payment provider.
- * @param {object|null} providerProps - Properties for the payment provider.
- * @param {boolean} isHostedPaymentPage - Flag to indicate if it is a hosted payment page.
- * @param {boolean} hasReadPropertiesError - Flag to indicate if there was an error reading properties.
- * @param {string} readPropertiesMessageError - Error message for reading properties.
- * @param {boolean} enabled - Flag to indicate if the form is enabled.
- * @param {function} onStatusChange - Callback function to handle status changes.
- * @param {function} setSelectedPaymentAccount - Callback function to set the selected payment account.
- * @param {string} actionLabel - Label for the action button.
- * @param {object} restProps - Additional properties.
- *
- * @returns {JSX.Element} The rendered CreditCardForm component.
+ * Credit-card branch of the payment form. Shows:
+ *   - A radio list of saved cards (when any exist) + an "Other / new card"
+ *     option, per D3 of REFACTOR_PLAN.md
+ *   - Either the hosted-payment iframe (when `isHostedPaymentPage`) or the
+ *     manual `NewCreditCardForm` once the user picks "Other".
  */
-export const CreditCardForm = (_a) => {
-    var { isFormDisabled = false, data, externalId, paymentDetails, providerType = null, providerProps = null, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, enabled, actionLabel, onStatusChange, setSelectedPaymentAccount } = _a, restProps = __rest(_a, ["isFormDisabled", "data", "externalId", "paymentDetails", "providerType", "providerProps", "isHostedPaymentPage", "hasReadPropertiesError", "readPropertiesMessageError", "enabled", "actionLabel", "onStatusChange", "setSelectedPaymentAccount"]);
+export const CreditCardForm = ({ isFormDisabled = false, data, externalId, paymentDetails, providerType = null, providerProps = null, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, actionLabel, allowSaveMethod = true, onStatusChange, setSelectedPaymentAccount, }) => {
     const { t } = useTranslation();
-    const classes = useStyles();
-    const user = useUser();
-    const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.CreditCard, providerType, providerProps, onStatusChange, paymentDetails, data);
-    const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
-    const [creditCardNumberInput, setCreditCardNumberInput] = useState('');
-    // @ts-ignore
-    const [{ data: paymentAccounts, loading: loadingPaymentAccounts }] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenCreditCard/${externalId}`, {}, false);
-    const handleShowHostedPaymentPage = () => {
-        setShowHostedPaymentPage(true);
-        onStatusChange && onStatusChange({ isValid: false });
-    };
+    const { data: paymentAccounts, isLoading: loadingPaymentAccounts } = useApiQuery(ConfigService.pgV1ApiUrl, `PaymentTokenCreditCard/${externalId}`, {}, { enabled: Boolean(externalId) });
+    const savedMethods = paymentAccounts !== null && paymentAccounts !== void 0 ? paymentAccounts : [];
+    const hasSavedMethods = savedMethods.length > 0;
+    const [selected, setSelected] = useState(OTHER_RADIO_VALUE);
+    // Default to the first saved method, or "Other" if none on file.
+    useEffect(() => {
+        var _a;
+        setSelected(((_a = savedMethods[0]) === null || _a === void 0 ? void 0 : _a.paymentTokenID) || OTHER_RADIO_VALUE);
+    }, [savedMethods]);
+    // Push the selected saved token up so the submit flow can include it.
+    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;
+    // Report validity to the parent picker so submit can be enabled. The hosted
+    // iframe component reports its own granular status; we only set a coarse
+    // "ready to submit" signal here.
     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]);
+        if (!showOtherForm) {
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange({ isValid: true });
+            return;
+        }
+        if (isHostedPaymentPage === false) {
+            // Manual entry — RFF blocks invalid submits at submit time.
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange({ isValid: true });
+        }
+        else {
+            // Hosted iframe — wait for the iframe to report a token.
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange({ isValid: false });
+        }
+        // onStatusChange is intentionally omitted from deps; consumers may pass
+        // unstable references and we only want to fire when the selection / mode
+        // changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showOtherForm, isHostedPaymentPage]);
+    const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.CreditCard, 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 card');
+            const exp = (m === null || m === void 0 ? void 0 : m.expirationDate)
+                ? new Date(m.expirationDate).toLocaleDateString('en-US', {
+                    month: '2-digit',
+                    year: '2-digit',
+                })
+                : null;
+            return {
+                label: exp ? `${nickname} (${exp})` : nickname,
+                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 card'),
+                value: OTHER_RADIO_VALUE,
+            },
+        ];
+    }, [savedMethods, actionLabel, t]);
     if (loadingPaymentAccounts) {
-        return (
-        // @ts-ignore
-        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.CreditCard }), React.createElement(Box, { textAlign: "center", mt: 3 }, React.createElement(FluentButton, { variant: "outlined", color: "primary", onClick: handleShowHostedPaymentPage, size: "small", startIcon: React.createElement(UnityFluentIcon, { icon: getIconFromName('PaymentCardIcon') }), style: { padding: "18px 20px" } }, actionLabel || t('Enter Card 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(NewCreditCardForm, { isFormDisabled: isFormDisabled, classes: classes, paymentDetails: paymentDetails, creditCardNumberInput: creditCardNumberInput, setCreditCardNumberInput: setCreditCardNumberInput }));
+    return (React.createElement(UdpFlexbox, { direction: "column", gap: "sm", wrap: "nowrap" }, hasSavedMethods && (React.createElement(UdpRadioGroup, { label: t('Saved cards'), name: "savedCreditCard", orientation: "vertical", disabled: isFormDisabled, value: selected, items: items, onChange: (e) => setSelected(String(e.target.value)) })), showOtherForm &&
+        (isHostedPaymentPage ? (paymentProviderForm) : (React.createElement(NewCreditCardForm, { isFormDisabled: isFormDisabled, paymentDetails: paymentDetails, allowSaveMethod: allowSaveMethod })))));
 };
 //# sourceMappingURL=CreditCardForm.js.map