udp-react-enterprise-component-library 25.16.0 → 25.16.2-beta.1

package/dist/ImportDataFromFileMapping-CjANFPa8.js

@@ -0,0 +1,737 @@
+import { Form, FormButtons, SubmitButton } from "./FormButtons-BL9d-T3e.js";
+import { Field } from "./Field-Idoc1A5M.js";
+import { FluentButton } from "./FluentButton-h_8VjXGT.js";
+import { useHandleAxiosSnackbar } from "./apiHelpers-Bju2gkBq.js";
+import { useUser } from "./useUser-Cn88hlN_.js";
+import { apiMutate as apiMutate$1 } from "./useAxiosMutate-BiRO7ZCN.js";
+import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
+import { getSanitizedName } from "./entityUtilities-D7_FeTEd.js";
+import { SideSheet } from "./SideSheet-BhKZOd2G.js";
+import { useAxiosGet } from "./useAxiosGet-CAH3ZOZ8.js";
+import { executeQueryAdHoc } from "./methodUtils-Bgi0VCWP.js";
+import { AmbientCard } from "./AmbientCard-Cp-eNzrW.js";
+import { usePromotedMethodEntity } from "./usePromotedMethodEntity-YlKDqDnn.js";
+import { AmbientTextField } from "./AmbientTextField-BHfLW2L3.js";
+import { DragDropFileUpload } from "./DragDropFileUpload-D2moCBGI.js";
+import { AmbientAutoComplete } from "./AmbientAutoComplete-BmBgMVpv.js";
+import { Divider as Divider$1 } from "./Divider-BU1-Ll14.js";
+import { CompactDataListItem } from "./CompactDataListItem-DMGFdFDP.js";
+import * as React$1 from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Divider, Typography, withStyles } from "@material-ui/core";
+import { ConfigService } from "udp-react-stencil-component-library";
+import clsx from "clsx";
+import { ChromeBackMirroredIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { makeStyles as makeStyles$1, withStyles as withStyles$1 } from "@material-ui/core/styles";
+import Stepper$1 from "@material-ui/core/Stepper";
+import Step$1 from "@material-ui/core/Step";
+import Check from "@material-ui/icons/esm/Check";
+import StepConnector$1 from "@material-ui/core/StepConnector";
+import * as XLSX from "xlsx";
+
+//#region src/UI/inputs/menus/AmbientStepper/StepLabel.jsx
+const styles = (theme) => ({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		"&$alternativeLabel": { flexDirection: "column" },
+		"&$disabled": { cursor: "default" }
+	},
+	horizontal: {},
+	vertical: {},
+	label: {
+		color: theme.palette.text.secondary,
+		"&$active": {
+			color: theme.palette.text.primary,
+			fontWeight: 500
+		},
+		"&$completed": {
+			color: theme.palette.text.primary,
+			fontWeight: 500
+		},
+		"&$alternativeLabel": { textAlign: "center" },
+		"&$error": { color: theme.palette.error.main }
+	},
+	active: {},
+	completed: {},
+	error: {},
+	disabled: {},
+	iconContainer: {
+		flexShrink: 0,
+		display: "flex",
+		paddingRight: 8,
+		"&$alternativeLabel": { paddingRight: 0 }
+	},
+	alternativeLabel: {},
+	labelContainer: { width: "100%" }
+});
+const StepLabel$1 = React$1.forwardRef(function StepLabel$2(props, ref) {
+	const { active = false, alternativeLabel = false, children, classes, className, completed = false, disabled = false, error = false, expanded, icon, last, optional, orientation = "horizontal", StepIconComponent: StepIconComponentProp, StepIconProps,...other } = props;
+	let StepIconComponent = StepIconComponentProp;
+	return /* @__PURE__ */ React$1.createElement("span", {
+		className: clsx(classes.root, classes[orientation], {
+			[classes.disabled]: disabled,
+			[classes.alternativeLabel]: alternativeLabel,
+			[classes.error]: error
+		}, className),
+		ref,
+		...other
+	}, icon || StepIconComponent ? /* @__PURE__ */ React$1.createElement("span", { className: clsx(classes.iconContainer, { [classes.alternativeLabel]: alternativeLabel }) }, /* @__PURE__ */ React$1.createElement(StepIconComponent, {
+		completed,
+		active,
+		error,
+		icon,
+		...StepIconProps
+	})) : null, /* @__PURE__ */ React$1.createElement("span", { className: classes.labelContainer }, children ? /* @__PURE__ */ React$1.createElement(Typography, {
+		variant: "body2",
+		component: "span",
+		display: "block",
+		className: clsx(classes.label, {
+			[classes.alternativeLabel]: alternativeLabel,
+			[classes.completed]: completed,
+			[classes.active]: active,
+			[classes.error]: error
+		})
+	}, children) : null, optional));
+});
+StepLabel$1.propTypes = {
+	children: PropTypes.node,
+	classes: PropTypes.object,
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	error: PropTypes.bool,
+	icon: PropTypes.node,
+	optional: PropTypes.node,
+	StepIconComponent: PropTypes.elementType,
+	StepIconProps: PropTypes.object
+};
+StepLabel$1.muiName = "StepLabel";
+/**
+* Explicit any export to avoid non-portable inferred React types in declaration output.
+* @type {any}
+*/
+const StepLabelExport = withStyles(styles, { name: "MuiStepLabel" })(StepLabel$1);
+var StepLabel_default = StepLabelExport;
+
+//#endregion
+//#region src/UI/inputs/menus/AmbientStepper/AmbientStepper.jsx
+const QontoConnector = withStyles$1({
+	alternativeLabel: {
+		top: 10,
+		left: "calc(-50% + 16px)",
+		right: "calc(50% + 16px)"
+	},
+	active: { "& $line": { borderColor: "#09A58C" } },
+	completed: { "& $line": { borderColor: "#09A58C" } },
+	line: {
+		borderColor: "#eaeaf0",
+		borderTopWidth: 3,
+		borderRadius: 1
+	}
+})(StepConnector$1);
+const useQontoStepIconStyles = makeStyles$1({
+	root: {
+		color: "#09A58C",
+		display: "flex",
+		height: 22,
+		alignItems: "center"
+	},
+	active: { color: "#09A58C" },
+	circle: {
+		width: 16,
+		height: 16,
+		borderRadius: "50%",
+		border: "2px solid currentColor"
+	},
+	completed: {
+		color: "#09A58C",
+		zIndex: 1,
+		fontSize: 18
+	},
+	stepLabel: { display: "none" },
+	rootStepper: { background: "blue" }
+});
+const QontoStepIcon = (props) => {
+	const classes = useQontoStepIconStyles();
+	const { active, completed } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, { [classes.active]: active }) }, completed ? /* @__PURE__ */ React.createElement(Check, { className: classes.completed }) : /* @__PURE__ */ React.createElement("div", { className: classes.circle }));
+};
+QontoStepIcon.propTypes = {
+	active: PropTypes.bool,
+	completed: PropTypes.bool
+};
+const useStyles = makeStyles$1((theme) => ({
+	root: { width: "100%" },
+	button: { marginRight: theme.spacing(1) },
+	instructions: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	},
+	rootStep: { marginTop: 0 }
+}));
+const AmbientStepper = ({ activeStep, steps, orientation }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Stepper$1, {
+		style: {
+			background: "transparent",
+			padding: 0
+		},
+		classes: { root: classes.rootStepper },
+		alternativeLabel: true,
+		activeStep,
+		connector: /* @__PURE__ */ React.createElement(QontoConnector, null),
+		orietation: orientation
+	}, steps.map((label) => /* @__PURE__ */ React.createElement(Step$1, {
+		classes: { root: classes.rootStep },
+		key: label
+	}, /* @__PURE__ */ React.createElement(StepLabel_default, {
+		className: classes.stepLabel,
+		StepIconComponent: QontoStepIcon
+	}, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 14 } }, label))))));
+};
+
+//#endregion
+//#region src/udp/fileImportMapping/fileUtils.js
+const handleExcelFileUpload = (fileObject, fileProperties) => {
+	return new Promise((resolve, reject) => {
+		if (fileObject) {
+			const reader = new FileReader();
+			reader.onload = function(e) {
+				const data = new Uint8Array(e.target.result);
+				const workbook = XLSX.read(data, { type: "array" });
+				const sheetName = workbook.SheetNames[fileProperties?.worksheetNumber?.value - 1];
+				const worksheet = workbook.Sheets[sheetName];
+				const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+				if (json.length > 1) {
+					const headers = json[0];
+					const firstDataLine = json[1];
+					resolve({
+						headers,
+						sampleData: firstDataLine
+					});
+				} else reject("Could not get file headers");
+			};
+			reader.onerror = function() {
+				reject("Error reading the file.");
+			};
+			reader.readAsArrayBuffer(fileObject);
+		} else reject("No file provided");
+	});
+};
+const handleTextFileUpload = (fileObject, fileProperties) => {
+	return new Promise((resolve, reject) => {
+		if (fileObject) {
+			const chunkSize = 1024;
+			let offset = 0;
+			let accumulatedData = "";
+			const reader = new FileReader();
+			reader.onload = function(e) {
+				accumulatedData += e.target.result;
+				const lines = accumulatedData.split("\n");
+				if (lines.length > 2) resolve({
+					headers: lines[0].replace(/\r/g, "").split(fileProperties?.delimiter?.value),
+					sampleData: lines[1].replace(/\r/g, "").split(fileProperties?.delimiter?.value)
+				});
+				else if (offset < fileObject.size) readNextChunk();
+			};
+			reader.onerror = function() {
+				reject("Error reading the file.");
+			};
+			function readNextChunk() {
+				const blob = fileObject.slice(offset, offset + chunkSize);
+				reader.readAsText(blob);
+				offset += chunkSize;
+			}
+			readNextChunk();
+		} else reject("No file provided");
+	});
+};
+const handleJsonFileUpload = (fileObject, fileProperties) => {
+	return new Promise((resolve, reject) => {
+		if (fileObject) {
+			const reader = new FileReader();
+			reader.onload = function(e) {
+				try {
+					const jsonData = JSON.parse(e.target.result);
+					const dataAtPath = fileProperties?.jsonPath ? getValueByPath(jsonData, fileProperties?.jsonPath) : jsonData;
+					if (Array.isArray(dataAtPath) && dataAtPath.length > 0) resolve({
+						headers: Object.keys(dataAtPath[0]),
+						sampleData: dataAtPath[0]
+					});
+					else reject("The JSON file does not contain an array or is empty.");
+				} catch (err) {
+					reject("Error parsing JSON file:", err);
+				}
+			};
+			reader.onerror = function() {
+				reject("Error reading the file.");
+			};
+			reader.readAsText(fileObject);
+		} else reject("No file provided");
+	});
+};
+const getValueByPath = (obj, path) => {
+	return path.split(".").reduce((acc, key) => acc && acc[key], obj);
+};
+
+//#endregion
+//#region src/udp/fileImportMapping/FileImportConfigCard.jsx
+const FileImportConfigCard = (props) => {
+	const { fileMappingRecord, domain } = props;
+	const [showIndexNumbers, setShowIndexNumbers] = useState(false);
+	const parsedProperties = useMemo(() => {
+		if (fileMappingRecord) {
+			let parsedObject = fileMappingRecord?.properties;
+			if (typeof fileMappingRecord?.properties === "string") parsedObject = JSON.parse(fileMappingRecord?.properties);
+			if ("includesHeader" in parsedObject && parsedObject?.includesHeader === false) setShowIndexNumbers(true);
+			else setShowIndexNumbers(false);
+			return Object.entries(parsedObject).map(([key, value]) => ({
+				key,
+				value
+			}));
+		}
+	}, [fileMappingRecord]);
+	const parsedFieldMappings = useMemo(() => {
+		let parsedObject = fileMappingRecord?.mapping;
+		if (typeof fileMappingRecord?.mapping === "string") parsedObject = JSON.parse(fileMappingRecord?.mapping);
+		if (fileMappingRecord) return Object.entries(parsedObject);
+	}, [fileMappingRecord]);
+	return parsedFieldMappings && /* @__PURE__ */ React.createElement(AmbientCard, {
+		fullWidth: true,
+		title: "Mapping Configuration",
+		subtitle: domain
+	}, parsedProperties?.map((property) => /* @__PURE__ */ React.createElement(CompactDataListItem, {
+		label: property?.key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, function(char) {
+			return char.toUpperCase();
+		}),
+		value: property?.value === false ? "False" : property?.value === true ? "True" : property?.value
+	})), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		paddingTop: 20
+	} }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, showIndexNumbers ? "Column index's" : "File Headers"), /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Fields")), /* @__PURE__ */ React.createElement(Divider, { style: {
+		marginTop: 5,
+		marginBottom: -14
+	} }), parsedFieldMappings?.map((field) => /* @__PURE__ */ React.createElement("div", { style: { height: 42 } }, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		gap: 10
+	} }, /* @__PURE__ */ React.createElement(Typography, { style: {
+		marginTop: 25,
+		width: "50%"
+	} }, showIndexNumbers ? "index " + field[1]?.headerIndex : field[1]?.importFileField), /* @__PURE__ */ React.createElement(FluentIcon, {
+		style: {
+			marginTop: 28,
+			width: "10%"
+		},
+		component: ChromeBackMirroredIcon
+	}), /* @__PURE__ */ React.createElement(Typography, { style: {
+		marginTop: 25,
+		width: "50%",
+		textAlign: "right"
+	} }, field[1]?.udpField.replace(/([A-Z])/g, " $1").trim())), /* @__PURE__ */ React.createElement(Divider, { style: { margin: "5px 0px" } })))));
+};
+
+//#endregion
+//#region src/udp/fileImportMapping/FileImportMappingWizard.jsx
+const FileImportMappingWizard = (props) => {
+	const { refetchMappings, setNewFileMappingSidesheetOpen, verifyRequiredFields } = props;
+	const user = useUser();
+	const [importHeaderData, setImportHeaderData] = useState();
+	const [udpObjectList, setUdpObjectList] = useState();
+	const [selectedDomain, setSelectedDomain] = useState();
+	const [selectedFileType, setSelectedFileType] = useState();
+	const [fileObject, setFileObject] = useState();
+	const [fileImportMappingObject, setFileImportMappingObject] = useState({});
+	const [activeStep, setActiveStep] = useState(0);
+	const [showIndexNumbers, setShowIndexNumbers] = useState(false);
+	const [errorText, setErrorText] = useState("");
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const executeCreateFileMapping = useCallback(async (data) => apiMutate$1(ConfigService.productV1ApiUrl, `UdpFileImportMapping`, { method: "post" }, { data }), []);
+	const { data: udpObjectEntity } = usePromotedMethodEntity("UdpObjectInfo", true);
+	const [{ data: allowedFileTypesData }, refetchAllowedFileTypes] = useAxiosGet(ConfigService.productV1ApiUrl, `UdpFileImportType`, {}, false);
+	const searchUdpObjectData = useCallback(async () => {
+		if (udpObjectEntity?.unityBaseSearchMethod?.apiMethodId && user?.id) {
+			const sapUserRes = await executeQueryAdHoc({ data: {
+				eagerLoad: true,
+				pageSize: 200,
+				filterElements: []
+			} }, udpObjectEntity?.unityBaseSearchMethod?.apiMethodId);
+			if (sapUserRes?.data?.pageList.length > 0) setUdpObjectList(sapUserRes?.data?.pageList);
+		}
+	}, [udpObjectEntity, user]);
+	const filterCatalogObjectList = useMemo(() => {
+		return udpObjectList;
+	}, [udpObjectList]);
+	const getNameFormattedOptionLabel = (option) => {
+		return option?.name.replace(/([A-Z])/g, " $1").trim();
+	};
+	const getNameOptionLabel = (option) => {
+		return option?.name;
+	};
+	const handleFileUpload = async (properties) => {
+		let result;
+		if (selectedFileType.extension === ".csv" || selectedFileType.extension === ".txt") result = await handleTextFileUpload(fileObject, properties);
+		else if (selectedFileType.extension === ".xlsx") result = await handleExcelFileUpload(fileObject, properties);
+		else if (selectedFileType.extension === ".json") result = await handleJsonFileUpload(fileObject, properties);
+		setImportHeaderData(result?.headers);
+	};
+	useEffect(() => {
+		searchUdpObjectData();
+	}, [searchUdpObjectData]);
+	const handleCreateNewFieldMapping = useCallback(async (values) => {
+		if ((await executeCreateFileMapping({
+			name: values.name,
+			objectInfoSanitizedName: getSanitizedName(selectedDomain.name),
+			fileImportType: selectedFileType.id,
+			mapping: JSON.stringify(fileImportMappingObject?.mapping),
+			properties: JSON.stringify(fileImportMappingObject?.properties)
+		}).catch((res) => {
+			handleErrorSnackbar(res);
+		}))?.status === 201) {
+			handleSuccessSnackbar("Created Mapping");
+			refetchMappings();
+			setNewFileMappingSidesheetOpen(false);
+		}
+	}, [
+		executeCreateFileMapping,
+		selectedDomain?.name,
+		selectedFileType?.id,
+		fileImportMappingObject?.mapping,
+		fileImportMappingObject?.properties,
+		handleErrorSnackbar,
+		handleSuccessSnackbar,
+		refetchMappings,
+		setNewFileMappingSidesheetOpen
+	]);
+	const handleUpdateFieldMapping = (values) => {
+		let valid = true;
+		selectedDomain?.objectFieldInfo?.forEach((option) => {
+			if (!option.dataType.endsWith("?") && !option.isPrimaryKey && !option.udpType) {
+				if (!Object.entries(values).some((obj) => obj[1].businessObjectKey === option.businessObjectKey)) {
+					if (verifyRequiredFields) valid = false;
+				}
+			}
+		});
+		if (!valid) {
+			setErrorText("All required Udp fields must have a mapping");
+			return;
+		}
+		const filteredMappings = Object.entries(values).filter(([key, value]) => value !== null).reduce((acc, [key, value]) => {
+			acc[key] = value;
+			return acc;
+		}, {});
+		const mappedFieldIndexes = Object.keys(filteredMappings).map((key) => parseInt(key.split("udpFieldMapping")[1], 10));
+		const fieldMappings = Object.values(filteredMappings).map((selectedUdpField, index) => {
+			return {
+				udpField: selectedUdpField.name,
+				importFileField: !showIndexNumbers ? importHeaderData[mappedFieldIndexes[index]] : null,
+				headerIndex: !showIndexNumbers ? -1 : mappedFieldIndexes[index]
+			};
+		});
+		setFileImportMappingObject((prev) => {
+			return {
+				...prev,
+				mapping: fieldMappings
+			};
+		});
+		setActiveStep((prev) => prev + 1);
+	};
+	const handleUpdateFileProperties = (values) => {
+		setFileImportMappingObject((prev) => {
+			let properties = {};
+			Object.keys(values).forEach((propKey) => properties[propKey] = "value" in values[propKey] ? values[propKey]?.value : values[propKey]);
+			return {
+				...prev,
+				properties
+			};
+		});
+		if ("includesHeader" in values && values?.includesHeader.value === false) setShowIndexNumbers(true);
+		handleFileUpload(values);
+		setActiveStep((prev) => prev + 1);
+	};
+	const getUdpFieldOptionLabel = (option) => {
+		if (!option.dataType.endsWith("?") && !option.isPrimaryKey && !option.udpType) return `${option.name.replace(/([A-Z])/g, " $1").trim()}*`;
+		return `${option.name} - ${option.dataType}`;
+	};
+	const handleAddFileToUpload = (fileObj) => {
+		setFileObject(fileObj[0]);
+	};
+	const formattedFileTypeProperties = useMemo(() => {
+		if (selectedFileType) return JSON.parse(selectedFileType?.properties);
+	}, [selectedFileType]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 20 } }, /* @__PURE__ */ React.createElement(AmbientStepper, {
+		activeStep,
+		steps: [
+			"File",
+			"Domain",
+			"Field Mappings",
+			"Review"
+		],
+		orientation: "vertical"
+	})), activeStep === 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AmbientAutoComplete, {
+		isMultiple: false,
+		id: "fileImportType",
+		name: "fileImportType",
+		label: "File Type",
+		onChange: (val) => setSelectedFileType(val),
+		options: allowedFileTypesData,
+		size: "small",
+		getOptionLabelFunction: getNameOptionLabel,
+		value: selectedFileType,
+		required: true
+	}), selectedFileType && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 5 } }, /* @__PURE__ */ React.createElement(DragDropFileUpload, {
+		handleUploadFile: handleAddFileToUpload,
+		accept: {
+			"text/csv": [".csv"],
+			"text/plain": [".txt"],
+			"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+			"application/json": [".json"]
+		}
+	})), /* @__PURE__ */ React.createElement(Form, { onSubmit: handleUpdateFileProperties }, formattedFileTypeProperties?.map((property) => property?.options ? /* @__PURE__ */ React.createElement(Field, {
+		component: AmbientAutoComplete,
+		isMultiple: false,
+		id: property.propertyName,
+		name: property.propertyName,
+		label: property.label,
+		options: property.options,
+		size: "small",
+		getOptionLabelFunction: getNameOptionLabel,
+		required: property?.required
+	}) : /* @__PURE__ */ React.createElement(Field, {
+		component: AmbientTextField,
+		isMultiple: false,
+		id: property.propertyName,
+		name: property.propertyName,
+		label: property.label,
+		size: "small",
+		getOptionLabelFunction: getNameOptionLabel,
+		required: property?.required
+	})), /* @__PURE__ */ React.createElement(FormButtons, { style: {
+		display: "flex",
+		float: "right",
+		marginRight: -16
+	} }, /* @__PURE__ */ React.createElement(SubmitButton, {
+		variant: "contained",
+		color: "secondary",
+		disablePristine: false,
+		disabled: !fileObject
+	}, "Next")))), activeStep === 1 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AmbientAutoComplete, {
+		isMultiple: false,
+		id: "domain",
+		name: "domain",
+		label: "Domain",
+		onChange: (val) => setSelectedDomain(val),
+		options: filterCatalogObjectList,
+		size: "small",
+		getOptionLabelFunction: getNameFormattedOptionLabel,
+		value: selectedDomain,
+		required: true
+	}), /* @__PURE__ */ React.createElement("div", { style: {
+		float: "right",
+		display: "flex",
+		gap: 8,
+		marginTop: 8
+	} }, /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "contained",
+		onClick: () => setActiveStep((prev) => prev - 1),
+		disabled: activeStep === 0
+	}, "Prev"), /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "contained",
+		onClick: () => setActiveStep((prev) => prev + 1),
+		color: "secondary",
+		disabled: !selectedDomain
+	}, "Next"))), activeStep === 2 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		paddingTop: 20
+	} }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, showIndexNumbers ? "Column index's" : "File Headers"), /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "UDP Fields")), /* @__PURE__ */ React.createElement(Divider$1, { style: { margin: "5px 0px" } }), /* @__PURE__ */ React.createElement(Form, {
+		onSubmit: handleUpdateFieldMapping,
+		style: { marginTop: -20 }
+	}, importHeaderData?.map((field, index) => /* @__PURE__ */ React.createElement("div", { style: { height: 42 } }, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		gap: 10
+	} }, /* @__PURE__ */ React.createElement(Typography, { style: {
+		marginTop: 25,
+		width: "50%"
+	} }, showIndexNumbers ? "index " + index : field), /* @__PURE__ */ React.createElement(FluentIcon, {
+		style: {
+			marginTop: 28,
+			width: "10%"
+		},
+		component: ChromeBackMirroredIcon
+	}), /* @__PURE__ */ React.createElement(Field, {
+		style: { height: 30 },
+		component: AmbientAutoComplete,
+		isMultiple: false,
+		id: `udpFieldMapping${index}`,
+		name: `udpFieldMapping${index}`,
+		options: selectedDomain?.objectFieldInfo,
+		size: "small",
+		getOptionLabelFunction: getUdpFieldOptionLabel
+	})), /* @__PURE__ */ React.createElement(Divider$1, { style: { margin: "5px 0px" } }))), /* @__PURE__ */ React.createElement("div", { style: {
+		paddingTop: 20,
+		textAlign: "right",
+		color: "red"
+	} }, errorText), /* @__PURE__ */ React.createElement(FormButtons, { style: {
+		display: "flex",
+		float: "right",
+		paddingTop: 16,
+		marginRight: -16
+	} }, /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "contained",
+		onClick: () => setActiveStep((prev) => prev - 1),
+		disabled: activeStep === 0
+	}, "Prev"), /* @__PURE__ */ React.createElement(SubmitButton, {
+		variant: "contained",
+		color: "secondary",
+		disablePristine: false
+	}, "Next")))), activeStep === 3 && /* @__PURE__ */ React.createElement(Form, { onSubmit: handleCreateNewFieldMapping }, /* @__PURE__ */ React.createElement(Field, {
+		component: AmbientTextField,
+		id: `name`,
+		name: `name`,
+		label: "Mapping Name",
+		size: "small"
+	}), /* @__PURE__ */ React.createElement(FormButtons, { style: {
+		display: "flex",
+		float: "right",
+		marginRight: -16
+	} }, /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "contained",
+		onClick: () => setActiveStep((prev) => prev - 1),
+		disabled: activeStep === 0
+	}, "Prev"), /* @__PURE__ */ React.createElement(SubmitButton, {
+		variant: "contained",
+		color: "secondary",
+		disablePristine: false
+	}, "Create Mapping")))), fileImportMappingObject?.mapping && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 10 } }, /* @__PURE__ */ React.createElement(FileImportConfigCard, {
+		fileMappingRecord: {
+			mapping: fileImportMappingObject?.mapping,
+			properties: fileImportMappingObject?.properties
+		},
+		domain: selectedDomain?.name.replace(/([A-Z])/g, " $1").trim()
+	})));
+};
+var FileImportMappingWizard_default = FileImportMappingWizard;
+
+//#endregion
+//#region src/udp/fileImportMapping/ImportDataFromFileMapping.jsx
+const ImportDataFromFileMapping = (props) => {
+	const { onImportSuccess, onImportFail, verifyRequiredFields = true } = props;
+	const user = useUser();
+	const [selectedFileMapping, setSelectedFileMapping] = useState();
+	const [udpImportMappingData, setUdpImportMappingData] = useState();
+	const [newFileMappingSidesheetOpen, setNewFileMappingSidesheetOpen] = useState(false);
+	const [fileObject, setFileObject] = useState();
+	const [isLoading, setIsLoading] = useState(false);
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const { data: udpFileImportMappingEntity } = usePromotedMethodEntity("UdpFileImportMapping", true);
+	const executeImportDataFromFile = useCallback(async (data) => apiMutate$1(ConfigService.productV1ApiUrl, `${selectedFileMapping?.objectInfoSanitizedName}/fileImportMapping`, { method: "post" }, { data }), [selectedFileMapping]);
+	const searchFileImportMappingData = useCallback(async () => {
+		if (udpFileImportMappingEntity?.unityBaseSearchMethod?.apiMethodId) {
+			const res = await executeQueryAdHoc({ data: {
+				eagerLoad: true,
+				pageSize: 200,
+				filterElements: []
+			} }, udpFileImportMappingEntity?.unityBaseSearchMethod?.apiMethodId);
+			if (res?.data?.pageList.length > 0) setUdpImportMappingData(res?.data?.pageList);
+		}
+	}, [udpFileImportMappingEntity?.unityBaseSearchMethod?.apiMethodId]);
+	useEffect(() => {
+		searchFileImportMappingData();
+	}, [searchFileImportMappingData]);
+	const handleImportDataFromFile = useCallback(async () => {
+		setIsLoading(true);
+		const file = fileObject;
+		const blob = new Blob([file], { type: file.type });
+		const formData = new FormData();
+		formData.append("file", blob, file.name);
+		formData.append("tenantId", user?.currentTenantId);
+		formData.append("name", selectedFileMapping.name);
+		formData.append("objectInfoSanitizedName", selectedFileMapping.objectInfoSanitizedName);
+		formData.append("fileImportType", selectedFileMapping.fileImportType);
+		formData.append("mapping", selectedFileMapping.mapping);
+		formData.append("properties", selectedFileMapping.properties);
+		formData.append("id", selectedFileMapping.id);
+		if ((await executeImportDataFromFile(formData).catch((res) => {
+			setIsLoading(false);
+			handleErrorSnackbar(res);
+			onImportFail();
+		}))?.status === 201) {
+			handleSuccessSnackbar("Imported Data");
+			setIsLoading(false);
+			onImportSuccess && onImportSuccess();
+		}
+	}, [
+		fileObject,
+		selectedFileMapping,
+		executeImportDataFromFile,
+		handleErrorSnackbar,
+		handleSuccessSnackbar,
+		user,
+		onImportSuccess,
+		onImportFail
+	]);
+	const getFileMappingOptionlabel = (option) => {
+		return `${option.name} (${option?.udpFileImportMappingUdpFileImportType?.extension})`;
+	};
+	const handleAddFileToUpload = (fileObj) => {
+		setFileObject(fileObj[0]);
+	};
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(AmbientAutoComplete, {
+		isMultiple: false,
+		id: "fileMapping",
+		name: "fileMapping",
+		label: "File Mapping",
+		onChange: (val) => setSelectedFileMapping(val),
+		options: udpImportMappingData,
+		size: "small",
+		getOptionLabelFunction: getFileMappingOptionlabel,
+		value: selectedFileMapping,
+		required: true,
+		groupBy: (option) => option?.udpFileImportMappingUdpObjectInfo?.sanitizedName
+	})), selectedFileMapping && /* @__PURE__ */ React.createElement(DragDropFileUpload, {
+		handleUploadFile: handleAddFileToUpload,
+		accept: {
+			"text/csv": [".csv"],
+			"text/plain": [".txt"],
+			"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+			"application/json": [".json"]
+		}
+	}), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		gap: 5,
+		float: "right",
+		marginTop: 10
+	} }, /* @__PURE__ */ React.createElement(FluentButton, {
+		onClick: () => setNewFileMappingSidesheetOpen(true),
+		variant: "outlined"
+	}, "Create New Mapping"), /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "contained",
+		color: "secondary",
+		onClick: handleImportDataFromFile,
+		progress: isLoading,
+		disabled: !fileObject
+	}, "Import Data")), /* @__PURE__ */ React.createElement(SideSheet, {
+		title: "Create New File Mapping",
+		open: newFileMappingSidesheetOpen,
+		onClose: () => setNewFileMappingSidesheetOpen(false),
+		width: "60%"
+	}, /* @__PURE__ */ React.createElement(FileImportMappingWizard_default, {
+		refetchMappings: searchFileImportMappingData,
+		setNewFileMappingSidesheetOpen,
+		verifyRequiredFields
+	}))), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 10 } }, /* @__PURE__ */ React.createElement(FileImportConfigCard, {
+		fileMappingRecord: selectedFileMapping,
+		domain: selectedFileMapping?.udpFileImportMappingUdpObjectInfo?.sanitizedName.replace(/([A-Z])/g, " $1").trim()
+	})));
+};
+
+//#endregion
+export { AmbientStepper, FileImportConfigCard, ImportDataFromFileMapping, handleExcelFileUpload, handleJsonFileUpload, handleTextFileUpload };
+//# sourceMappingURL=ImportDataFromFileMapping-CjANFPa8.js.map