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

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

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

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

@@ -1,209 +1,98 @@
-import { c } from "../../../reactCompilerRuntime.mjs";
-import { FluentButton } from "../../../UI/inputs/buttons/FluentButton.mjs";
 import { ConfigService } from "../../../configService/index.mjs";
-import { useUser } from "../../auth/useUser.mjs";
-import { UnityFluentIcon } from "../../iconLibrary/UnityFluentIcon.mjs";
-import { getIconFromName } from "../../tree/TreeUtilities.mjs";
-import { useAxiosGet } from "../../useAxiosGet.mjs";
 import { PaymentTenderTypeEnum } from "../../../enums/paymentTenderTypeEnum.mjs";
-import { LinearProgress as LinearProgress$1 } from "../../../UI/loading/LinearProgress.mjs";
+import { useApiQuery } from "../../useApiQuery.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpRadioGroup } from "../../../UI/fluent-web-components/UdpRadioGroup.mjs";
+import { UdpSpinner } from "../../../UI/fluent-web-components/UdpSpinner.mjs";
 import { usePaymentProviderForm } from "./usePaymentProviderForm.mjs";
-import PaymentDropdown from "./PaymentDropdown.mjs";
 import { HostedPaymentError } from "./HostedPaymentError.mjs";
 import { NewCreditCardForm } from "./NewCreditCardForm.mjs";
-import React, { useEffect, useState } from "react";
-import { Box, makeStyles } from "@material-ui/core";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 //#region src/utilities/form/paymentForm/CreditCardForm.tsx
-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".
 */
-const CreditCardForm = (t0) => {
-	const $ = c(38);
-	const { isFormDisabled: t1, data, externalId, paymentDetails, providerType: t2, providerProps: t3, isHostedPaymentPage, hasReadPropertiesError, readPropertiesMessageError, actionLabel, onStatusChange, setSelectedPaymentAccount } = t0;
-	const isFormDisabled = t1 === void 0 ? false : t1;
-	const providerType = t2 === void 0 ? null : t2;
-	const providerProps = t3 === void 0 ? null : t3;
+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();
-	useUser();
-	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.CreditCard, providerType, providerProps, onStatusChange, paymentDetails, data);
-	const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);
-	const [creditCardNumberInput, setCreditCardNumberInput] = useState("");
-	let t4;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = {};
-		$[0] = t4;
-	} else t4 = $[0];
-	const [t5] = useAxiosGet(ConfigService.pgV1ApiUrl, `PaymentTokenCreditCard/${externalId}`, t4, false);
-	const { data: paymentAccounts, loading: loadingPaymentAccounts } = t5;
-	let t6;
-	if ($[1] !== onStatusChange) {
-		t6 = () => {
-			setShowHostedPaymentPage(true);
-			onStatusChange && onStatusChange({ isValid: false });
-		};
-		$[1] = onStatusChange;
-		$[2] = t6;
-	} else t6 = $[2];
-	const handleShowHostedPaymentPage = t6;
-	let t7;
-	if ($[3] !== isHostedPaymentPage || $[4] !== onStatusChange || $[5] !== paymentAccounts?.length) {
-		t7 = () => {
-			const showHostedPaymentPageByDefault = isHostedPaymentPage && paymentAccounts?.length > 0;
-			const enableSubmitForm = isHostedPaymentPage === false || paymentAccounts?.length > 0;
-			setShowHostedPaymentPage(!showHostedPaymentPageByDefault);
-			onStatusChange && onStatusChange({ isValid: enableSubmitForm });
-		};
-		$[3] = isHostedPaymentPage;
-		$[4] = onStatusChange;
-		$[5] = paymentAccounts?.length;
-		$[6] = t7;
-	} else t7 = $[6];
-	let t8;
-	if ($[7] !== isHostedPaymentPage || $[8] !== paymentAccounts) {
-		t8 = [isHostedPaymentPage, paymentAccounts];
-		$[7] = isHostedPaymentPage;
-		$[8] = paymentAccounts;
-		$[9] = t8;
-	} else t8 = $[9];
-	useEffect(t7, t8);
-	if (loadingPaymentAccounts) {
-		let t9;
-		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-			t9 = /* @__PURE__ */ React.createElement(Box, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null));
-			$[10] = t9;
-		} else t9 = $[10];
-		return t9;
-	}
-	if (!showHostedPaymentPage && paymentAccounts?.length > 0) {
-		let t9;
-		if ($[11] !== paymentAccounts || $[12] !== setSelectedPaymentAccount) {
-			t9 = /* @__PURE__ */ React.createElement(PaymentDropdown, {
-				paymentAccounts,
-				setSelectedPaymentAccount,
-				paymentType: PaymentTenderTypeEnum.CreditCard
-			});
-			$[11] = paymentAccounts;
-			$[12] = setSelectedPaymentAccount;
-			$[13] = t9;
-		} else t9 = $[13];
-		let t10;
-		let t11;
-		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-			t10 = /* @__PURE__ */ React.createElement(UnityFluentIcon, { icon: getIconFromName("PaymentCardIcon") });
-			t11 = { padding: "18px 20px" };
-			$[14] = t10;
-			$[15] = t11;
-		} else {
-			t10 = $[14];
-			t11 = $[15];
+	const { data: paymentAccounts, isLoading: loadingPaymentAccounts } = useApiQuery(ConfigService.pgV1ApiUrl, `PaymentTokenCreditCard/${externalId}`, {}, { enabled: Boolean(externalId) });
+	const savedMethods = paymentAccounts ?? [];
+	const hasSavedMethods = savedMethods.length > 0;
+	const [selected, setSelected] = useState(OTHER_RADIO_VALUE);
+	useEffect(() => {
+		setSelected(savedMethods[0]?.paymentTokenID || OTHER_RADIO_VALUE);
+	}, [savedMethods]);
+	useEffect(() => {
+		if (selected && selected !== OTHER_RADIO_VALUE) {
+			const sel = savedMethods.find((s) => s?.paymentTokenID === selected);
+			setSelectedPaymentAccount?.(sel || null);
+		} else setSelectedPaymentAccount?.(null);
+	}, [
+		selected,
+		savedMethods,
+		setSelectedPaymentAccount
+	]);
+	const showOtherForm = selected === OTHER_RADIO_VALUE;
+	useEffect(() => {
+		if (!showOtherForm) {
+			onStatusChange?.({ isValid: true });
+			return;
 		}
-		let t12;
-		if ($[16] !== actionLabel || $[17] !== t) {
-			t12 = actionLabel || t("Enter Card Details");
-			$[16] = actionLabel;
-			$[17] = t;
-			$[18] = t12;
-		} else t12 = $[18];
-		let t13;
-		if ($[19] !== handleShowHostedPaymentPage || $[20] !== t12) {
-			t13 = /* @__PURE__ */ React.createElement(Box, {
-				textAlign: "center",
-				mt: 3
-			}, /* @__PURE__ */ React.createElement(FluentButton, {
-				variant: "outlined",
-				color: "primary",
-				onClick: handleShowHostedPaymentPage,
-				size: "small",
-				startIcon: t10,
-				style: t11
-			}, t12));
-			$[19] = handleShowHostedPaymentPage;
-			$[20] = t12;
-			$[21] = t13;
-		} else t13 = $[21];
-		let t14;
-		if ($[22] !== t13 || $[23] !== t9) {
-			t14 = /* @__PURE__ */ React.createElement(React.Fragment, null, t9, t13);
-			$[22] = t13;
-			$[23] = t9;
-			$[24] = t14;
-		} else t14 = $[24];
-		return t14;
-	}
-	if (hasReadPropertiesError) {
-		let t9;
-		if ($[25] !== readPropertiesMessageError || $[26] !== t) {
-			t9 = readPropertiesMessageError || t("Unknown error");
-			$[25] = readPropertiesMessageError;
-			$[26] = t;
-			$[27] = t9;
-		} else t9 = $[27];
-		let t10;
-		if ($[28] !== t9) {
-			t10 = /* @__PURE__ */ React.createElement(HostedPaymentError, {
-				error: "Error",
-				message: t9
-			});
-			$[28] = t9;
-			$[29] = t10;
-		} else t10 = $[29];
-		return t10;
-	}
-	let t9;
-	if ($[30] !== classes || $[31] !== creditCardNumberInput || $[32] !== isFormDisabled || $[33] !== isHostedPaymentPage || $[34] !== paymentDetails || $[35] !== paymentProviderForm || $[36] !== showHostedPaymentPage) {
-		t9 = showHostedPaymentPage && isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewCreditCardForm, {
-			isFormDisabled,
-			classes,
-			paymentDetails,
-			creditCardNumberInput,
-			setCreditCardNumberInput
-		});
-		$[30] = classes;
-		$[31] = creditCardNumberInput;
-		$[32] = isFormDisabled;
-		$[33] = isHostedPaymentPage;
-		$[34] = paymentDetails;
-		$[35] = paymentProviderForm;
-		$[36] = showHostedPaymentPage;
-		$[37] = t9;
-	} else t9 = $[37];
-	return t9;
+		if (isHostedPaymentPage === false) onStatusChange?.({ isValid: true });
+		else onStatusChange?.({ isValid: false });
+	}, [showOtherForm, isHostedPaymentPage]);
+	const paymentProviderForm = usePaymentProviderForm(PaymentTenderTypeEnum.CreditCard, providerType, providerProps, onStatusChange, paymentDetails, data);
+	const items = useMemo(() => {
+		return [...savedMethods.map((m) => {
+			const nickname = m?.paymentToken?.nickname ?? t("Saved card");
+			const exp = m?.expirationDate ? new Date(m.expirationDate).toLocaleDateString("en-US", {
+				month: "2-digit",
+				year: "2-digit"
+			}) : null;
+			return {
+				label: exp ? `${nickname} (${exp})` : nickname,
+				value: String(m?.paymentTokenID ?? "")
+			};
+		}), {
+			label: actionLabel || t("Use a different card"),
+			value: OTHER_RADIO_VALUE
+		}];
+	}, [
+		savedMethods,
+		actionLabel,
+		t
+	]);
+	if (loadingPaymentAccounts) return /* @__PURE__ */ React.createElement(UdpFlexbox, {
+		direction: "row",
+		justify: "center",
+		align: "center"
+	}, /* @__PURE__ */ React.createElement(UdpSpinner, { size: "medium" }));
+	if (hasReadPropertiesError) return /* @__PURE__ */ React.createElement(HostedPaymentError, {
+		error: t("Configuration error"),
+		message: readPropertiesMessageError || t("Unknown error")
+	});
+	return /* @__PURE__ */ React.createElement(UdpFlexbox, {
+		direction: "column",
+		gap: "sm",
+		wrap: "nowrap"
+	}, hasSavedMethods && /* @__PURE__ */ React.createElement(UdpRadioGroup, {
+		label: t("Saved cards"),
+		name: "savedCreditCard",
+		orientation: "vertical",
+		disabled: isFormDisabled,
+		value: selected,
+		items,
+		onChange: (e) => setSelected(String(e.target.value))
+	}), showOtherForm && (isHostedPaymentPage ? paymentProviderForm : /* @__PURE__ */ React.createElement(NewCreditCardForm, {
+		isFormDisabled,
+		paymentDetails,
+		allowSaveMethod
+	})));
 };
 //#endregion
 export { CreditCardForm };

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

@@ -1 +1 @@
-{"version":3,"file":"CreditCardForm.mjs","names":["React","useState","useEffect","Box","makeStyles","UnityFluentIcon","getIconFromName","useTranslation","usePaymentProviderForm","PaymentDetails","PaymentMethodData","PaymentTenderTypeEnum","PaymentVendorFactoryEnum","LinearProgress","useUser","useAxiosGet","PaymentDropdown","FluentButton","HostedPaymentError","NewCreditCardForm","ConfigService","useStyles","theme","cardNumber","width","marginBottom","formControl","marginTop","formControlCheck","marginLeft","CreditCardFormProps","isFormDisabled","paymentDetails","externalId","tenantId","providerType","providerProps","isHostedPaymentPage","hasReadPropertiesError","readPropertiesMessageError","enabled","data","actionLabel","setSelectedPaymentAccount","paymentAccount","onStatusChange","paymentFormResult","CreditCardForm","t0","$","_c","t1","t2","t3","undefined","t","classes","paymentProviderForm","CreditCard","showHostedPaymentPage","setShowHostedPaymentPage","creditCardNumberInput","setCreditCardNumberInput","t4","Symbol","for","t5","pgV1ApiUrl","paymentAccounts","loading","loadingPaymentAccounts","t6","isValid","handleShowHostedPaymentPage","t7","length","showHostedPaymentPageByDefault","enableSubmitForm","t8","t9","t10","t11","padding","t12","t13","t14"],"sources":["../../../../src/utilities/form/paymentForm/CreditCardForm.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Box,\n  makeStyles} from '@material-ui/core';\nimport { UnityFluentIcon } from '../../iconLibrary/UnityFluentIcon'\nimport { getIconFromName } from '../../tree/TreeUtilities';\nimport { useTranslation } from 'react-i18next';\nimport { usePaymentProviderForm } from './usePaymentProviderForm';\nimport { PaymentDetails, PaymentMethodData } from './AccountPayment.model';\nimport { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';\nimport { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';\nimport { LinearProgress } from '../../../UI/loading/LinearProgress';\nimport { useUser } from '../../auth/useUser';\nimport { useAxiosGet } from '../../useAxiosGet';\nimport PaymentDropdown from './PaymentDropdown';\nimport { FluentButton } from '../../../UI/inputs/buttons/FluentButton';\nimport { HostedPaymentError } from './HostedPaymentError';\nimport { NewCreditCardForm } from './NewCreditCardForm';\nimport { ConfigService } from '../../../configService';\n\nconst useStyles = makeStyles(theme => ({\n  cardNumber: {\n    width: '100%',\n    marginBottom: '10px'\n  },\n  formControl: {\n    width: '100%',\n    '&.cardNumber': {\n      marginBottom: '10px',\n    },\n    '&.submitControl': {\n      marginTop: '35px',\n    },\n  },\n  formControlCheck: {\n    width: '100%',\n    marginTop: '5px',\n    marginLeft: '3px',\n  },\n}));\n\ninterface CreditCardFormProps {\n  isFormDisabled?: boolean;\n  paymentDetails: PaymentDetails;\n  externalId?: string;\n  tenantId: string;\n  providerType?: PaymentVendorFactoryEnum | null;\n  providerProps?: any;\n  isHostedPaymentPage?: boolean | null;\n  hasReadPropertiesError?: boolean | null;\n  readPropertiesMessageError?: string | null;\n  enabled?: boolean | null;\n  data?: PaymentMethodData;\n  actionLabel?: string;\n  setSelectedPaymentAccount?: (paymentAccount: any) => void;\n  onStatusChange?: (paymentFormResult: any) => void;\n}\n\n/**\n * CreditCardForm component handles the rendering of a credit card payment form.\n * It supports both hosted payment pages and direct credit card input forms.\n *\n * @param {boolean} isFormDisabled - Flag to disable the form.\n * @param {object} data - Data related to the payment form.\n * @param {string} externalId - External identifier for the payment form.\n * @param {object} paymentDetails - Details of the payment.\n * @param {string|null} providerType - Type of the payment provider.\n * @param {object|null} providerProps - Properties for the payment provider.\n * @param {boolean} isHostedPaymentPage - Flag to indicate if it is a hosted payment page.\n * @param {boolean} hasReadPropertiesError - Flag to indicate if there was an error reading properties.\n * @param {string} readPropertiesMessageError - Error message for reading properties.\n * @param {boolean} enabled - Flag to indicate if the form is enabled.\n * @param {function} onStatusChange - Callback function to handle status changes.\n * @param {function} setSelectedPaymentAccount - Callback function to set the selected payment account.\n * @param {string} actionLabel - Label for the action button.\n * @param {object} restProps - Additional properties.\n *\n * @returns {JSX.Element} The rendered CreditCardForm component.\n */\nexport const CreditCardForm = ({\n  isFormDisabled = false,\n  data,\n  externalId,\n  paymentDetails,\n  providerType = null,\n  providerProps = null,\n  isHostedPaymentPage,\n  hasReadPropertiesError,\n  readPropertiesMessageError,\n  enabled,\n  actionLabel,\n  onStatusChange,\n  setSelectedPaymentAccount,\n  ...restProps\n}: CreditCardFormProps): any => {\n\n  const { t } = useTranslation();\n  const classes = useStyles();\n  const user = useUser();\n\n  const paymentProviderForm = usePaymentProviderForm(\n    PaymentTenderTypeEnum.CreditCard,\n    providerType,\n    providerProps,\n    onStatusChange,\n    paymentDetails,\n    data\n  );\n\n  const [showHostedPaymentPage, setShowHostedPaymentPage] = useState(false);\n  const [creditCardNumberInput, setCreditCardNumberInput] = useState('');\n // @ts-ignore\n  const [{ data: paymentAccounts, loading: loadingPaymentAccounts }] = useAxiosGet(\n    ConfigService.pgV1ApiUrl,\n    `PaymentTokenCreditCard/${externalId}`,\n    {},\n    false\n  );\n\n  const handleShowHostedPaymentPage = () => {\n    setShowHostedPaymentPage(true);\n    onStatusChange && onStatusChange({ isValid: false });\n  };\n\n  useEffect(() => {\n    const showHostedPaymentPageByDefault = (isHostedPaymentPage && paymentAccounts?.length > 0);\n    const enableSubmitForm = (isHostedPaymentPage === false || paymentAccounts?.length > 0);\n\n    setShowHostedPaymentPage(!showHostedPaymentPageByDefault);\n    onStatusChange && onStatusChange({ isValid: enableSubmitForm });\n  }, [isHostedPaymentPage, paymentAccounts]);\n\n  if (loadingPaymentAccounts) {\n    return (\n      // @ts-ignore\n      <Box sx={{ width: '100%' }}>\n        <LinearProgress />\n      </Box>\n    );\n  }\n\n  if (!showHostedPaymentPage && paymentAccounts?.length > 0) {\n    return (\n      <>\n        <PaymentDropdown\n          paymentAccounts={paymentAccounts}\n          setSelectedPaymentAccount={setSelectedPaymentAccount}\n          paymentType={PaymentTenderTypeEnum.CreditCard}\n        />\n      { /* @ts-ignore */ }\n        <Box textAlign=\"center\" mt={3}>\n          <FluentButton\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={handleShowHostedPaymentPage}\n            size=\"small\"\n            startIcon={\n              <UnityFluentIcon icon={getIconFromName('PaymentCardIcon')} />\n            }\n            style={{ padding: \"18px 20px\" }}\n          >\n            {actionLabel || t('Enter Card Details')}\n          </FluentButton>\n        </Box>\n      </>\n    );\n  }\n\n  if (hasReadPropertiesError) {\n    return (\n      <HostedPaymentError error=\"Error\" message={readPropertiesMessageError || t('Unknown error')} />\n    );\n  }\n\n  return showHostedPaymentPage &&\n    isHostedPaymentPage ?\n    paymentProviderForm : (\n      <NewCreditCardForm\n        isFormDisabled={isFormDisabled}\n        classes={classes}\n        paymentDetails={paymentDetails}\n        creditCardNumberInput={creditCardNumberInput}\n        setCreditCardNumberInput={setCreditCardNumberInput}\n      />\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CreditCardForm.mjs","names":["React","useEffect","useMemo","useState","useTranslation","UdpFlexbox","UdpRadioGroup","UdpSpinner","usePaymentProviderForm","PaymentDetails","PaymentMethodData","PaymentTenderTypeEnum","PaymentVendorFactoryEnum","useApiQuery","HostedPaymentError","NewCreditCardForm","ConfigService","OTHER_RADIO_VALUE","CreditCardFormProps","isFormDisabled","paymentDetails","externalId","tenantId","providerType","providerProps","isHostedPaymentPage","hasReadPropertiesError","readPropertiesMessageError","enabled","data","actionLabel","allowSaveMethod","setSelectedPaymentAccount","paymentAccount","onStatusChange","paymentFormResult","CreditCardForm","t","paymentAccounts","isLoading","loadingPaymentAccounts","pgV1ApiUrl","Boolean","savedMethods","hasSavedMethods","length","selected","setSelected","paymentTokenID","sel","find","s","showOtherForm","isValid","paymentProviderForm","CreditCard","items","savedItems","map","m","nickname","paymentToken","exp","expirationDate","Date","toLocaleDateString","month","year","label","value","String","e","target"],"sources":["../../../../src/utilities/form/paymentForm/CreditCardForm.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';\nimport { UdpRadioGroup } from '../../../UI/fluent-web-components/UdpRadioGroup';\nimport { UdpSpinner } from '../../../UI/fluent-web-components/UdpSpinner';\nimport { usePaymentProviderForm } from './usePaymentProviderForm';\nimport { PaymentDetails, PaymentMethodData } from './AccountPayment.model';\nimport { PaymentTenderTypeEnum } from '../../../enums/paymentTenderTypeEnum';\nimport { PaymentVendorFactoryEnum } from '../../../enums/paymentVendorFactoryEnum';\nimport { useApiQuery } from '../../useApiQuery';\nimport { HostedPaymentError } from './HostedPaymentError';\nimport { NewCreditCardForm } from './NewCreditCardForm';\nimport { ConfigService } from '../../../configService';\n\nconst OTHER_RADIO_VALUE = '__other__';\n\ninterface CreditCardFormProps {\n  isFormDisabled?: boolean;\n  paymentDetails: PaymentDetails;\n  externalId?: string;\n  tenantId?: string;\n  providerType?: PaymentVendorFactoryEnum | null;\n  providerProps?: any;\n  isHostedPaymentPage?: boolean | null;\n  hasReadPropertiesError?: boolean | null;\n  readPropertiesMessageError?: string | null;\n  enabled?: boolean | null;\n  data?: PaymentMethodData;\n  actionLabel?: string;\n  /** When false, the manual card form hides its \"save this card\" checkbox. */\n  allowSaveMethod?: boolean;\n  setSelectedPaymentAccount?: (paymentAccount: any) => void;\n  onStatusChange?: (paymentFormResult: any) => void;\n}\n\n/**\n * Credit-card branch of the payment form. Shows:\n *   - A radio list of saved cards (when any exist) + an \"Other / new card\"\n *     option, per D3 of REFACTOR_PLAN.md\n *   - Either the hosted-payment iframe (when `isHostedPaymentPage`) or the\n *     manual `NewCreditCardForm` once the user picks \"Other\".\n */\nexport const CreditCardForm = ({\n  isFormDisabled = false,\n  data,\n  externalId,\n  paymentDetails,\n  providerType = null,\n  providerProps = null,\n  isHostedPaymentPage,\n  hasReadPropertiesError,\n  readPropertiesMessageError,\n  actionLabel,\n  allowSaveMethod = true,\n  onStatusChange,\n  setSelectedPaymentAccount,\n}: CreditCardFormProps) => {\n  const { t } = useTranslation();\n\n  const { data: paymentAccounts, isLoading: loadingPaymentAccounts } = useApiQuery<any[]>(\n    ConfigService.pgV1ApiUrl,\n    `PaymentTokenCreditCard/${externalId}`,\n    {},\n    { enabled: Boolean(externalId) },\n  );\n\n  const savedMethods = paymentAccounts ?? [];\n  const hasSavedMethods = savedMethods.length > 0;\n\n  const [selected, setSelected] = useState<string>(OTHER_RADIO_VALUE);\n\n  // Default to the first saved method, or \"Other\" if none on file.\n  useEffect(() => {\n    setSelected(savedMethods[0]?.paymentTokenID || OTHER_RADIO_VALUE);\n  }, [savedMethods]);\n\n  // Push the selected saved token up so the submit flow can include it.\n  useEffect(() => {\n    if (selected && selected !== OTHER_RADIO_VALUE) {\n      const sel = savedMethods.find((s: any) => s?.paymentTokenID === selected);\n      setSelectedPaymentAccount?.(sel || null);\n    } else {\n      setSelectedPaymentAccount?.(null);\n    }\n  }, [selected, savedMethods, setSelectedPaymentAccount]);\n\n  const showOtherForm = selected === OTHER_RADIO_VALUE;\n\n  // Report validity to the parent picker so submit can be enabled. The hosted\n  // iframe component reports its own granular status; we only set a coarse\n  // \"ready to submit\" signal here.\n  useEffect(() => {\n    if (!showOtherForm) {\n      onStatusChange?.({ isValid: true });\n      return;\n    }\n    if (isHostedPaymentPage === false) {\n      // Manual entry — RFF blocks invalid submits at submit time.\n      onStatusChange?.({ isValid: true });\n    } else {\n      // Hosted iframe — wait for the iframe to report a token.\n      onStatusChange?.({ isValid: false });\n    }\n    // onStatusChange is intentionally omitted from deps; consumers may pass\n    // unstable references and we only want to fire when the selection / mode\n    // changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showOtherForm, isHostedPaymentPage]);\n\n  const paymentProviderForm = usePaymentProviderForm(\n    PaymentTenderTypeEnum.CreditCard,\n    providerType,\n    providerProps,\n    onStatusChange,\n    paymentDetails,\n    data,\n  );\n\n  const items = useMemo(() => {\n    const savedItems = savedMethods.map((m: any) => {\n      const nickname = m?.paymentToken?.nickname ?? t('Saved card');\n      const exp = m?.expirationDate\n        ? new Date(m.expirationDate).toLocaleDateString('en-US', {\n            month: '2-digit',\n            year: '2-digit',\n          })\n        : null;\n      return {\n        label: exp ? `${nickname} (${exp})` : nickname,\n        value: String(m?.paymentTokenID ?? ''),\n      };\n    });\n    return [\n      ...savedItems,\n      {\n        label: actionLabel || t('Use a different card'),\n        value: OTHER_RADIO_VALUE,\n      },\n    ];\n  }, [savedMethods, actionLabel, t]);\n\n  if (loadingPaymentAccounts) {\n    return (\n      <UdpFlexbox direction=\"row\" justify=\"center\" align=\"center\">\n        <UdpSpinner size=\"medium\" />\n      </UdpFlexbox>\n    );\n  }\n\n  if (hasReadPropertiesError) {\n    return (\n      <HostedPaymentError\n        error={t('Configuration error')}\n        message={readPropertiesMessageError || t('Unknown error')}\n      />\n    );\n  }\n\n  return (\n    <UdpFlexbox direction=\"column\" gap=\"sm\" wrap=\"nowrap\">\n      {hasSavedMethods && (\n        <UdpRadioGroup\n          label={t('Saved cards')}\n          name=\"savedCreditCard\"\n          orientation=\"vertical\"\n          disabled={isFormDisabled}\n          value={selected}\n          items={items}\n          onChange={(e) => setSelected(String(e.target.value))}\n        />\n      )}\n\n      {showOtherForm &&\n        (isHostedPaymentPage ? (\n          paymentProviderForm\n        ) : (\n          <NewCreditCardForm\n            isFormDisabled={isFormDisabled}\n            paymentDetails={paymentDetails}\n            allowSaveMethod={allowSaveMethod}\n          />\n        ))}\n    </UdpFlexbox>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAMiB,oBAAoB;;;;;;;;AA4B1B,MAAamB,kBAAkB,EAC7BjB,iBAAiB,OACjBU,MACAR,YACAD,gBACAG,eAAe,MACfC,gBAAgB,MAChBC,qBACAC,wBACAC,4BACAG,aACAC,kBAAkB,MAClBG,gBACAF,gCACyB;CACzB,MAAM,EAAEK,MAAMjC,gBAAgB;CAE9B,MAAM,EAAEyB,MAAMS,iBAAiBC,WAAWC,2BAA2B3B,YACnEG,cAAcyB,YACd,0BAA0BpB,cAC1B,EAAE,EACF,EAAEO,SAASc,QAAQrB,WAAU,EAC/B,CAAC;CAED,MAAMsB,eAAeL,mBAAmB,EAAE;CAC1C,MAAMM,kBAAkBD,aAAaE,SAAS;CAE9C,MAAM,CAACC,UAAUC,eAAe5C,SAAiBc,kBAAkB;AAGnEhB,iBAAgB;AACd8C,cAAYJ,aAAa,IAAIK,kBAAkB/B,kBAAkB;IAChE,CAAC0B,aAAa,CAAC;AAGlB1C,iBAAgB;AACd,MAAI6C,YAAYA,aAAa7B,mBAAmB;GAC9C,MAAMgC,MAAMN,aAAaO,MAAMC,MAAWA,GAAGH,mBAAmBF,SAAS;AACzEd,+BAA4BiB,OAAO,KAAK;QAExCjB,6BAA4B,KAAK;IAElC;EAACc;EAAUH;EAAcX;EAA0B,CAAC;CAEvD,MAAMoB,gBAAgBN,aAAa7B;AAKnChB,iBAAgB;AACd,MAAI,CAACmD,eAAe;AAClBlB,oBAAiB,EAAEmB,SAAS,MAAM,CAAC;AACnC;;AAEF,MAAI5B,wBAAwB,MAE1BS,kBAAiB,EAAEmB,SAAS,MAAM,CAAC;MAGnCnB,kBAAiB,EAAEmB,SAAS,OAAO,CAAC;IAMrC,CAACD,eAAe3B,oBAAoB,CAAC;CAExC,MAAM6B,sBAAsB9C,uBAC1BG,sBAAsB4C,YACtBhC,cACAC,eACAU,gBACAd,gBACAS,KACD;CAED,MAAM2B,QAAQtD,cAAc;AAc1B,SAAO,CACL,GAdiByC,aAAae,KAAKC,MAAW;GAC9C,MAAMC,WAAWD,GAAGE,cAAcD,YAAYvB,EAAE,aAAa;GAC7D,MAAMyB,MAAMH,GAAGI,iBACX,IAAIC,KAAKL,EAAEI,eAAe,CAACE,mBAAmB,SAAS;IACrDC,OAAO;IACPC,MAAM;IACP,CAAC,GACF;AACJ,UAAO;IACLC,OAAON,MAAM,GAAGF,SAAQ,IAAKE,IAAG,KAAMF;IACtCS,OAAOC,OAAOX,GAAGX,kBAAkB,GAAE;IACtC;IACD,EAGA;GACEoB,OAAOtC,eAAeO,EAAE,uBAAuB;GAC/CgC,OAAOpD;GACR,CACF;IACA;EAAC0B;EAAcb;EAAaO;EAAE,CAAC;AAElC,KAAIG,uBACF,QACE,sBAAA,cAAC,YAAD;EAAY,WAAU;EAAM,SAAQ;EAAS,OAAM;EAEtC,EADX,sBAAA,cAAC,YAAD,EAAY,MAAK,UAAQ,CAAA,CACd;AAIjB,KAAId,uBACF,QACE,sBAAA,cAAC,oBAAD;EACE,OAAOW,EAAE,sBAAsB;EAC/B,SAASV,8BAA8BU,EAAE,gBAAgB;EACzD,CAAA;AAIN,QACE,sBAAA,cAAC,YAAD;EAAY,WAAU;EAAS,KAAI;EAAK,MAAK;EAuBhC,EAtBVO,mBACC,sBAAA,cAAC,eAAD;EACE,OAAOP,EAAE,cAAc;EACvB,MAAK;EACL,aAAY;EACZ,UAAUlB;EACV,OAAO2B;EACAU;EACP,WAAWe,MAAMxB,YAAYuB,OAAOC,EAAEC,OAAOH,MAAM,CAAC;EAEvD,CAAA,EAEAjB,kBACE3B,sBACC6B,sBAEA,sBAAA,cAAC,mBAAD;EACkBnC;EACAC;EACCW;EAEpB,CAAA,EACQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"CreditCardUtils.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CreditCardUtils.ts"],"names":[],"mappings":"AAmBA;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,KAAA,OA+B3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,KAAA,EAAE,SAAS,KAAA,EAAE,SAAS,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,UAU9E;AACD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,KAAA,UAQzC;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,KAAA,UAS5C;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,KAAA,UAGxC;AAED,qFAAqF;AACrF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQ1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,sCAGtC,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,uBAAuB,sCAA6B,CAAC"}
+{"version":3,"file":"CreditCardUtils.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/CreditCardUtils.ts"],"names":[],"mappings":"AAmBA;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,KAAA,OA+B3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,KAAA,EAAE,SAAS,KAAA,EAAE,SAAS,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,UAU9E;AACD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,KAAA,UAczC;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,KAAA,UAS5C;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,KAAA,UAGxC;AAED,qFAAqF;AACrF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQ1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,sCAGtC,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,uBAAuB,sCAA6B,CAAC"}

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

@@ -68,6 +68,11 @@ export function formatCVC(value, prevValue, allValues = {}) {
  */
 export function formatExpirationDate(value) {
     const clearValue = clearNumber(value);
+    // Exactly 6 digits is MM + a 4-digit year ("07/2027" from paste or browser
+    // autofill): keep the year's last two digits, not its first two.
+    if (clearValue.length === 6) {
+        return `${clearValue.slice(0, 2)}/${clearValue.slice(4, 6)}`;
+    }
     if (clearValue.length >= 3) {
         return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`;
     }

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

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

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

@@ -64,6 +64,7 @@ function formatCVC(value, prevValue, allValues = {}) {
 */
 function formatExpirationDate(value) {
 	const clearValue = clearNumber(value);
+	if (clearValue.length === 6) return `${clearValue.slice(0, 2)}/${clearValue.slice(4, 6)}`;
 	if (clearValue.length >= 3) return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`;
 	return clearValue;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CreditCardUtils.mjs","names":["Payment","visa","mastercard","amex","discover","diners","unionpay","jcb","clearNumber","value","replace","formatCreditCardNumber","issuer","fns","cardType","clearValue","nextValue","slice","trim","formatCVC","prevValue","allValues","number","maxLength","formatExpirationDate","length","formatBankAccountNumber","formatRoutingNumber","CreditCardBrandIconUrls","Record","dinersclub","getCreditCardMethodIconUrl","creditCardNumber","getCreditCardMethodIcon"],"sources":["../../../../src/utilities/form/paymentForm/CreditCardUtils.ts"],"sourcesContent":["import Payment from 'payment';\nimport visa from '../../../assets/paymentIcons/visa.svg';\nimport mastercard from '../../../assets/paymentIcons/mastercard.svg';\nimport amex from '../../../assets/paymentIcons/amex.svg';\nimport discover from '../../../assets/paymentIcons/discover.svg';\nimport diners from '../../../assets/paymentIcons/diners.svg';\nimport unionpay from '../../../assets/paymentIcons/unionpay.svg';\nimport jcb from '../../../assets/paymentIcons/jcb.svg';\n\n/**\n * clearNumber\n *\n * @param {string} [value='']\n * @return {*}\n */\nfunction clearNumber(value = '') {\n  return value.replace(/\\D+/g, '');\n}\n\n/**\n * formatCreditCardNumber - Format credit card number\n *\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatCreditCardNumber(value) {\n  if (!value) {\n    return value;\n  }\n\n  const issuer = Payment.fns.cardType(value);\n  const clearValue = clearNumber(value);\n  let nextValue;\n\n  switch (issuer) {\n    case 'amex':\n      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n        4,\n        10\n      )} ${clearValue.slice(10, 15)}`;\n      break;\n    case 'dinersclub':\n      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n        4,\n        10\n      )} ${clearValue.slice(10, 14)}`;\n      break;\n    default:\n      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n        4,\n        8\n      )} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 19)}`;\n      break;\n  }\n\n  return nextValue.trim();\n}\n\n/**\n * formatCVC - formats the CVC value\n *\n * @export\n * @param {*} value\n * @param {*} prevValue\n * @param {*} [allValues={}]\n * @return {*}\n */\nexport function formatCVC(value, prevValue, allValues: { number?: string } = {}) {\n  const clearValue = clearNumber(value);\n  let maxLength = 4;\n\n  if (allValues?.number) {\n    const issuer = Payment.fns.cardType(allValues?.number);\n    maxLength = issuer === 'amex' ? 4 : 3;\n  }\n\n  return clearValue.slice(0, maxLength);\n}\n/**\n * formatExpirationDate - format expiration date\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatExpirationDate(value) {\n  const clearValue = clearNumber(value);\n\n  if (clearValue.length >= 3) {\n    return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`;\n  }\n\n  return clearValue;\n}\n\n/**\n * formatBankAccountNumber - Format bank account number\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatBankAccountNumber(value) {\n  const clearValue = clearNumber(value);\n  return `${clearValue.slice(0, 4)} ${clearValue.slice(\n    4,\n    8\n  )} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 16)} ${clearValue.slice(\n    16,\n    20\n  )}`;\n}\n\n/**\n * formatRoutingNumber - format routing number\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatRoutingNumber(value) {\n  const clearValue = clearNumber(value);\n  return `${clearValue.slice(0, 3)} ${clearValue.slice(3, 9)}`;\n}\n\n// Map of payment brand -> icon URL. Render with <SvgIcon src={...} /> in components.\nexport const CreditCardBrandIconUrls: Record<string, string> = {\n  visa,\n  mastercard,\n  amex,\n  discover,\n  jcb,\n  dinersclub: diners,\n  unionpay,\n};\n\nexport const getCreditCardMethodIconUrl = (creditCardNumber: string): string | null => {\n  const issuer = Payment.fns.cardType(creditCardNumber);\n  return CreditCardBrandIconUrls[issuer] ?? null;\n};\n\n// Back-compat alias (returns URL); prefer getCreditCardMethodIconUrl\nexport const getCreditCardMethodIcon = getCreditCardMethodIconUrl;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAASQ,YAAYC,QAAQ,IAAI;AAC/B,QAAOA,MAAMC,QAAQ,QAAQ,GAAG;;;;;;;;;AAUlC,SAAgBC,uBAAuBF,OAAO;AAC5C,KAAI,CAACA,MACH,QAAOA;CAGT,MAAMG,SAASZ,QAAQa,IAAIC,SAASL,MAAM;CAC1C,MAAMM,aAAaP,YAAYC,MAAM;CACrC,IAAIO;AAEJ,SAAQJ,QAAR;EACE,KAAK;AACHI,eAAY,GAAGD,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAClD,GACA,GACD,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG;AAC7B;EACF,KAAK;AACHD,eAAY,GAAGD,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAClD,GACA,GACD,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG;AAC7B;EACF;AACED,eAAY,GAAGD,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAClD,GACA,EACD,CAAA,GAAIF,WAAWE,MAAM,GAAG,GAAG,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG;AACxD;;AAGJ,QAAOD,UAAUE,MAAM;;;;;;;;;;;AAYzB,SAAgBC,UAAUV,OAAOW,WAAWC,YAAiC,EAAE,EAAE;CAC/E,MAAMN,aAAaP,YAAYC,MAAM;CACrC,IAAIc,YAAY;AAEhB,KAAIF,WAAWC,OAEbC,aADevB,QAAQa,IAAIC,SAASO,WAAWC,OAAO,KAC/B,SAAS,IAAI;AAGtC,QAAOP,WAAWE,MAAM,GAAGM,UAAU;;;;;;;;AAQvC,SAAgBC,qBAAqBf,OAAO;CAC1C,MAAMM,aAAaP,YAAYC,MAAM;AAErC,KAAIM,WAAWU,UAAU,EACvB,QAAO,GAAGV,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAAM,GAAG,EAAE;AAG5D,QAAOF;;;;;;;;AAST,SAAgBW,wBAAwBjB,OAAO;CAC7C,MAAMM,aAAaP,YAAYC,MAAM;AACrC,QAAO,GAAGM,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAC7C,GACA,EACD,CAAA,GAAIF,WAAWE,MAAM,GAAG,GAAG,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG,CAAA,GAAIF,WAAWE,MACrE,IACA,GACD;;;;;;;;AASH,SAAgBU,oBAAoBlB,OAAO;CACzC,MAAMM,aAAaP,YAAYC,MAAM;AACrC,QAAO,GAAGM,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAAM,GAAG,EAAE;;AAI5D,MAAaW,0BAAkD;CAC7D3B;CACAC;CACAC;CACAC;CACAG;CACAuB,YAAYzB;CACZC;CACD;AAED,MAAayB,8BAA8BC,qBAA4C;AAErF,QAAOJ,wBADQ5B,QAAQa,IAAIC,SAASkB,iBAAiB,KACX;;AAI5C,MAAaC,0BAA0BF"}
+{"version":3,"file":"CreditCardUtils.mjs","names":["Payment","visa","mastercard","amex","discover","diners","unionpay","jcb","clearNumber","value","replace","formatCreditCardNumber","issuer","fns","cardType","clearValue","nextValue","slice","trim","formatCVC","prevValue","allValues","number","maxLength","formatExpirationDate","length","formatBankAccountNumber","formatRoutingNumber","CreditCardBrandIconUrls","Record","dinersclub","getCreditCardMethodIconUrl","creditCardNumber","getCreditCardMethodIcon"],"sources":["../../../../src/utilities/form/paymentForm/CreditCardUtils.ts"],"sourcesContent":["import Payment from 'payment';\nimport visa from '../../../assets/paymentIcons/visa.svg';\nimport mastercard from '../../../assets/paymentIcons/mastercard.svg';\nimport amex from '../../../assets/paymentIcons/amex.svg';\nimport discover from '../../../assets/paymentIcons/discover.svg';\nimport diners from '../../../assets/paymentIcons/diners.svg';\nimport unionpay from '../../../assets/paymentIcons/unionpay.svg';\nimport jcb from '../../../assets/paymentIcons/jcb.svg';\n\n/**\n * clearNumber\n *\n * @param {string} [value='']\n * @return {*}\n */\nfunction clearNumber(value = '') {\n  return value.replace(/\\D+/g, '');\n}\n\n/**\n * formatCreditCardNumber - Format credit card number\n *\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatCreditCardNumber(value) {\n  if (!value) {\n    return value;\n  }\n\n  const issuer = Payment.fns.cardType(value);\n  const clearValue = clearNumber(value);\n  let nextValue;\n\n  switch (issuer) {\n    case 'amex':\n      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n        4,\n        10\n      )} ${clearValue.slice(10, 15)}`;\n      break;\n    case 'dinersclub':\n      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n        4,\n        10\n      )} ${clearValue.slice(10, 14)}`;\n      break;\n    default:\n      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n        4,\n        8\n      )} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 19)}`;\n      break;\n  }\n\n  return nextValue.trim();\n}\n\n/**\n * formatCVC - formats the CVC value\n *\n * @export\n * @param {*} value\n * @param {*} prevValue\n * @param {*} [allValues={}]\n * @return {*}\n */\nexport function formatCVC(value, prevValue, allValues: { number?: string } = {}) {\n  const clearValue = clearNumber(value);\n  let maxLength = 4;\n\n  if (allValues?.number) {\n    const issuer = Payment.fns.cardType(allValues?.number);\n    maxLength = issuer === 'amex' ? 4 : 3;\n  }\n\n  return clearValue.slice(0, maxLength);\n}\n/**\n * formatExpirationDate - format expiration date\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatExpirationDate(value) {\n  const clearValue = clearNumber(value);\n\n  // Exactly 6 digits is MM + a 4-digit year (\"07/2027\" from paste or browser\n  // autofill): keep the year's last two digits, not its first two.\n  if (clearValue.length === 6) {\n    return `${clearValue.slice(0, 2)}/${clearValue.slice(4, 6)}`;\n  }\n\n  if (clearValue.length >= 3) {\n    return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`;\n  }\n\n  return clearValue;\n}\n\n/**\n * formatBankAccountNumber - Format bank account number\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatBankAccountNumber(value) {\n  const clearValue = clearNumber(value);\n  return `${clearValue.slice(0, 4)} ${clearValue.slice(\n    4,\n    8\n  )} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 16)} ${clearValue.slice(\n    16,\n    20\n  )}`;\n}\n\n/**\n * formatRoutingNumber - format routing number\n * @export\n * @param {*} value\n * @return {*}\n */\nexport function formatRoutingNumber(value) {\n  const clearValue = clearNumber(value);\n  return `${clearValue.slice(0, 3)} ${clearValue.slice(3, 9)}`;\n}\n\n// Map of payment brand -> icon URL. Render with <SvgIcon src={...} /> in components.\nexport const CreditCardBrandIconUrls: Record<string, string> = {\n  visa,\n  mastercard,\n  amex,\n  discover,\n  jcb,\n  dinersclub: diners,\n  unionpay,\n};\n\nexport const getCreditCardMethodIconUrl = (creditCardNumber: string): string | null => {\n  const issuer = Payment.fns.cardType(creditCardNumber);\n  return CreditCardBrandIconUrls[issuer] ?? null;\n};\n\n// Back-compat alias (returns URL); prefer getCreditCardMethodIconUrl\nexport const getCreditCardMethodIcon = getCreditCardMethodIconUrl;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAASQ,YAAYC,QAAQ,IAAI;AAC/B,QAAOA,MAAMC,QAAQ,QAAQ,GAAG;;;;;;;;;AAUlC,SAAgBC,uBAAuBF,OAAO;AAC5C,KAAI,CAACA,MACH,QAAOA;CAGT,MAAMG,SAASZ,QAAQa,IAAIC,SAASL,MAAM;CAC1C,MAAMM,aAAaP,YAAYC,MAAM;CACrC,IAAIO;AAEJ,SAAQJ,QAAR;EACE,KAAK;AACHI,eAAY,GAAGD,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAClD,GACA,GACD,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG;AAC7B;EACF,KAAK;AACHD,eAAY,GAAGD,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAClD,GACA,GACD,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG;AAC7B;EACF;AACED,eAAY,GAAGD,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAClD,GACA,EACD,CAAA,GAAIF,WAAWE,MAAM,GAAG,GAAG,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG;AACxD;;AAGJ,QAAOD,UAAUE,MAAM;;;;;;;;;;;AAYzB,SAAgBC,UAAUV,OAAOW,WAAWC,YAAiC,EAAE,EAAE;CAC/E,MAAMN,aAAaP,YAAYC,MAAM;CACrC,IAAIc,YAAY;AAEhB,KAAIF,WAAWC,OAEbC,aADevB,QAAQa,IAAIC,SAASO,WAAWC,OAAO,KAC/B,SAAS,IAAI;AAGtC,QAAOP,WAAWE,MAAM,GAAGM,UAAU;;;;;;;;AAQvC,SAAgBC,qBAAqBf,OAAO;CAC1C,MAAMM,aAAaP,YAAYC,MAAM;AAIrC,KAAIM,WAAWU,WAAW,EACxB,QAAO,GAAGV,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAAM,GAAG,EAAE;AAG5D,KAAIF,WAAWU,UAAU,EACvB,QAAO,GAAGV,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAAM,GAAG,EAAE;AAG5D,QAAOF;;;;;;;;AAST,SAAgBW,wBAAwBjB,OAAO;CAC7C,MAAMM,aAAaP,YAAYC,MAAM;AACrC,QAAO,GAAGM,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAC7C,GACA,EACD,CAAA,GAAIF,WAAWE,MAAM,GAAG,GAAG,CAAA,GAAIF,WAAWE,MAAM,IAAI,GAAG,CAAA,GAAIF,WAAWE,MACrE,IACA,GACD;;;;;;;;AASH,SAAgBU,oBAAoBlB,OAAO;CACzC,MAAMM,aAAaP,YAAYC,MAAM;AACrC,QAAO,GAAGM,WAAWE,MAAM,GAAG,EAAE,CAAA,GAAIF,WAAWE,MAAM,GAAG,EAAE;;AAI5D,MAAaW,0BAAkD;CAC7D3B;CACAC;CACAC;CACAC;CACAG;CACAuB,YAAYzB;CACZC;CACD;AAED,MAAayB,8BAA8BC,qBAA4C;AAErF,QAAOJ,wBADQ5B,QAAQa,IAAIC,SAASkB,iBAAiB,KACX;;AAI5C,MAAaC,0BAA0BF"}

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

@@ -1,22 +1,11 @@
 import React from 'react';
 /**
- * @file HostedPaymentError.tsx
- * @description This component displays an error message when there is an issue rendering the hosted payment form.
+ * Inline error surface for failures while preparing the hosted-payment iframe
+ * (bad config string, missing baseUrl, etc.). Rendered above the payment form
+ * so the user can see the problem without losing context.
  */
-/**
- * HostedPaymentError component
- *
- * This component is used to display an error message when there is an issue rendering the hosted payment form.
- * It utilizes the `useTranslation` hook to support internationalization.
- *
- * @param {Object} props - The properties object.
- * @param {string} props.error - The error string.
- * @param {string} props.message - The error message to be displayed.
- *
- * @returns {JSX.Element} The rendered error message component.
- */
-export declare const HostedPaymentError: ({ error, message }: {
-    error: string;
+export declare const HostedPaymentError: ({ error, message, }: {
+    error?: string;
     message: string;
 }) => React.JSX.Element;
 //# sourceMappingURL=HostedPaymentError.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HostedPaymentError.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/HostedPaymentError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;GAGG;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB;;;uBAa9B,CAAC"}
+{"version":3,"file":"HostedPaymentError.d.ts","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/HostedPaymentError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;uBAkB9B,CAAC"}

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

@@ -1,25 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '../../../UI/dataDisplay/typography/Typography';
-import { LayoutUnit } from '../../../layout/LayoutUnit';
+import { UdpMessageBar } from '../../../UI/fluent-web-components/UdpMessageBar';
 /**
- * @file HostedPaymentError.tsx
- * @description This component displays an error message when there is an issue rendering the hosted payment form.
+ * Inline error surface for failures while preparing the hosted-payment iframe
+ * (bad config string, missing baseUrl, etc.). Rendered above the payment form
+ * so the user can see the problem without losing context.
  */
-/**
- * HostedPaymentError component
- *
- * This component is used to display an error message when there is an issue rendering the hosted payment form.
- * It utilizes the `useTranslation` hook to support internationalization.
- *
- * @param {Object} props - The properties object.
- * @param {string} props.error - The error string.
- * @param {string} props.message - The error message to be displayed.
- *
- * @returns {JSX.Element} The rendered error message component.
- */
-export const HostedPaymentError = ({ error, message }) => {
+export const HostedPaymentError = ({ error, message, }) => {
     const { t } = useTranslation();
-    return (React.createElement(React.Fragment, null, React.createElement(Typography, { variant: "subtitle1", color: "error" }, t('There was an error rendering the hosted payment form. Please check your settings and try again')), React.createElement(LayoutUnit, { unit: "xxs" }), React.createElement(Typography, { variant: "body1", color: "error" }, t('Error'), ": ", message)));
+    return (React.createElement(UdpMessageBar, { intent: "error", layout: "multiline" }, t('There was an error rendering the hosted payment form. Please check your settings and try again'), ': ', error ? `${error}: ` : '', message));
 };
 //# sourceMappingURL=HostedPaymentError.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HostedPaymentError.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/HostedPaymentError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD;;;GAGG;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAsC,EAAE,EAAE,CAAC;IAC5F,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,OAAO,CACL,0CACE,oBAAC,UAAU,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,OAAO,IAC1C,CAAC,CAAC,gGAAgG,CAAC,CACzF,EACb,oBAAC,UAAU,IAAC,IAAI,EAAC,KAAK,GAAG,EACzB,oBAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,IACtC,CAAC,CAAC,OAAO,CAAC,QAAI,OAAO,CACX,CACZ,CACJ,CAAC;AAAA,CACH,CAAC"}
+{"version":3,"file":"HostedPaymentError.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/HostedPaymentError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAEhF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,KAAK,EACL,OAAO,GAIR,EAAE,EAAE,CAAC;IACJ,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,OAAO,CACL,oBAAC,aAAa,IAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAC,WAAW,IAC7C,CAAC,CACA,gGAAgG,CACjG,EACA,IAAI,EACJ,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,EACzB,OAAO,CACM,CACjB,CAAC;AAAA,CACH,CAAC"}