udp-react-enterprise-component-library 25.18.1-beta.77 → 25.18.1-beta.79

package/dist/{UdpTransactionsPage-Dr3XbvFa.js → UdpTransactionsPage-DXhT7CVV.js}

@@ -39,7 +39,7 @@ import { i as getLocalizedDateTimeString, t as formatDate } from "./dateUtils-CO
 import { t as UdpActionCard } from "./UdpActionCard-VtAacuCM.js";
 import { t as Attachments } from "./uploader-BdeUKdYW.js";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { CircularProgress, FormControlLabel, LinearProgress, Switch, makeStyles } from "@material-ui/core";
+import { Badge, CircularProgress, FormControlLabel, LinearProgress, Switch, makeStyles } from "@material-ui/core";
 import { useSnackbar } from "notistack";
 import { useLocation } from "react-router-dom";
 import { AddIcon, ContactIcon, DocumentIcon, FileImageIcon, PDFIcon, ViewIcon, WordDocumentIcon } from "@fluentui/react-icons";
@@ -629,7 +629,7 @@ var AttachmentTransaction_default = AttachmentTransaction;
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/components/UdpTransactionCustomPage.jsx
 const UdpTransactionCustomPage = (props) => {
-	const { pageId, transactionTypeId, transactionUiActionType, formRef, transaction, transactionTypeTransactionActionId, setHasUnsavedChanges } = props;
+	const { pageId, transactionTypeId, transactionUiActionType, formRef, refetchTransaction, transaction, transactionTypeTransactionActionId, setHasUnsavedChanges, onSubmitSuccess } = props;
 	const { getUiActionRenderPageId, getHiddenFields, getRequiredFields } = useTransactionEngine(transactionTypeId);
 	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
 	const { t } = useTranslation();
@@ -660,8 +660,10 @@ const UdpTransactionCustomPage = (props) => {
 				message = "Action has been submitted successfully";
 				errorMessagePart = "submitting action for";
 			}
-			if (response?.status === 200) handleSuccessSnackbar(t(`${message} `));
-			else handleErrorSnackbar(new Error(t(`Error ${errorMessagePart} Transaction. Please try again later.`)));
+			if (response?.status === 200) {
+				handleSuccessSnackbar(t(`${message} `));
+				onSubmitSuccess?.(response);
+			} else if (response) handleErrorSnackbar(new Error(t(`Error ${errorMessagePart} Transaction. Please try again later.`)));
 		} catch (error) {
 			handleErrorSnackbar(error);
 		} finally {
@@ -669,6 +671,7 @@ const UdpTransactionCustomPage = (props) => {
 				formRef.current?.form?.restart(values);
 				setHasUnsavedChanges(false);
 			}
+			if (refetchTransaction) refetchTransaction();
 		}
 	}, [
 		executeCreateTransactionAction,
@@ -681,7 +684,9 @@ const UdpTransactionCustomPage = (props) => {
 		t,
 		transactionTypeTransactionActionId,
 		setHasUnsavedChanges,
-		formRef
+		formRef,
+		onSubmitSuccess,
+		refetchTransaction
 	]);
 	const isFieldRequired = useCallback((fieldName) => {
 		return getRequiredFields(transaction)?.includes(fieldName);
@@ -898,7 +903,7 @@ const TransactionTimelineItem = (props) => {
 
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/components/transactionHistory/TransactionTimeline.jsx
-const TransactionTimeline = (props) => {
+const TransactionTimeline = forwardRef((props, ref) => {
 	const { transactionId } = props;
 	const { t } = useTranslation();
 	const searchObj = useMemo(() => {
@@ -922,6 +927,9 @@ const TransactionTimeline = (props) => {
 		method: "post",
 		data: searchObj
 	});
+	useImperativeHandle(ref, () => ({ refresh: () => {
+		fetchTransactionHistory();
+	} }));
 	useEffect(() => {
 		fetchTransactionHistory();
 	}, [fetchTransactionHistory]);
@@ -932,7 +940,8 @@ const TransactionTimeline = (props) => {
 		date: item?.createdOn ? formatDate(item?.createdOn, "dd/mm/yyyy") : null,
 		status: item?.udpTransactionHistoryUdpTransactionTypeStatus?.name
 	})))) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(EmptyStateDisplay, { primaryText: t("No History") })));
-};
+});
+TransactionTimeline.displayName = "TransactionTimeline";
 
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/components/transactionAttachment/TransactionAttachment.jsx
@@ -1456,26 +1465,25 @@ var EditTransactionDetailsForm_default = EditTransactionDetailsForm;
 //#endregion
 //#region src/udp/pages/UdpTransactionsPage/sidesheets/EditTransaction.jsx
 const EditTransaction = (props) => {
-	const { transaction: initialTransaction, transactionTypeId, transactionIsClosed, openInnerSidesheetState, setOpenInnerSidesheetState, refreshGridData, closeSideSheet, setSidesheetLoading, setHasUnsavedChanges } = props;
+	const { transaction: initialTransaction, transactionTypeId, transactionIsClosed, openInnerSidesheetState, setOpenInnerSidesheetState, refreshGridData, closeSideSheet, setSidesheetLoading, setHasUnsavedChanges, attachmentType, setAttachmentType, currentAttachments, setCurrentAttachments, attachmentProgress, setAttachmentProgress, transactionAttachmentTypes, transactionAttachments, setTransactionAttachments, filePreview, setFilePreview } = props;
 	const { t } = useTranslation();
 	const [selectedTab, setSelectedTab] = useState(0);
 	const [transaction, setTransaction] = useState(initialTransaction);
-	const [transactionAttachments, setTransactionAttachments] = useState([]);
-	const [filePreview, setFilePreview] = useState(false);
-	const [currentAttachments, setCurrentAttachments] = useState([]);
-	const [attachmentType, setAttachmentType] = useState(null);
-	const [attachmentProgress, setAttachmentProgress] = useState(false);
 	const [refreshNotes, setRefreshNotes] = useState(false);
 	const [{ data: noteTypes, loading: fetchNoteTypesLoading }] = useAxiosGet(ConfigService$1.productV1ApiUrl, `UdpNoteType`, {});
 	const { getUiActionRenderPageId, transactionTypeStatusColorsMap } = useTransactionEngine(transactionTypeId);
 	const refetchTransaction = useCallback(async () => {
 		setSidesheetLoading(true);
 		const response = await apiMutate(ConfigService$1.productV1ApiUrl, `udpTransaction/${initialTransaction.transactionId}/full`, { method: "get" });
-		if (response?.status === 200) setTransaction(response.data);
+		if (response?.status === 200) {
+			setTransaction(response.data);
+			transactionTimelineRef.current?.refresh();
+		}
 		setSidesheetLoading(false);
 	}, [initialTransaction.transactionId, setSidesheetLoading]);
 	const formRef = useRef(null);
 	const transactionNoteFormRef = useRef(null);
+	const transactionTimelineRef = useRef();
 	const handleNoteFormSubmit = useCallback(() => {
 		transactionNoteFormRef.current?.handleSubmit?.();
 	}, []);
@@ -1507,17 +1515,6 @@ const EditTransaction = (props) => {
 			}]
 		}
 	});
-	const [{ data: transactionAttachmentTypes }, fetchTransactionAttachmentType] = useAxiosMutate(process.env.REACT_APP_PRODUCT_API_BASE, `UdpTransactionAttachmentType/search`, {
-		method: "post",
-		data: {
-			pageSize: 50,
-			filterElements: [{
-				searchField: "TransactionTypeId",
-				searchValue: transaction.transactionTypeId,
-				searchOperator: "="
-			}]
-		}
-	});
 	const { enqueueSnackbar } = useSnackbar();
 	const getAttachments = useCallback(async () => {
 		try {
@@ -1536,7 +1533,8 @@ const EditTransaction = (props) => {
 	}, [
 		fetchTransactionAttachments,
 		enqueueSnackbar,
-		refetchTransaction
+		refetchTransaction,
+		setTransactionAttachments
 	]);
 	const tabNames = [
 		t("Details"),
@@ -1601,7 +1599,9 @@ const EditTransaction = (props) => {
 		enqueueSnackbar,
 		getAttachments,
 		setOpenInnerSidesheetState,
-		transaction.transactionId
+		transaction.transactionId,
+		setCurrentAttachments,
+		setAttachmentProgress
 	]);
 	const innerSidesheetList = useMemo(() => [
 		{
@@ -1680,7 +1680,12 @@ const EditTransaction = (props) => {
 		fetchNoteTypesLoading,
 		setOpenInnerSidesheetState,
 		refetchTransaction,
-		handleUploadFiles
+		handleUploadFiles,
+		setAttachmentType,
+		setCurrentAttachments,
+		setAttachmentProgress,
+		setTransactionAttachments,
+		setFilePreview
 	]);
 	const transactionDetailPageId = useMemo(() => {
 		return getUiActionRenderPageId(TransactionUiActionTypeEnums.Render_Transaction_Details_Page);
@@ -1690,14 +1695,6 @@ const EditTransaction = (props) => {
 			if (!transactionAttachmentsData) getAttachments();
 		})();
 	}, [transactionAttachmentsData, getAttachments]);
-	useEffect(() => {
-		if (!transactionAttachmentTypes) {
-			setAttachmentProgress(true);
-			fetchTransactionAttachmentType().then(() => {
-				setAttachmentProgress(false);
-			});
-		}
-	}, [fetchTransactionAttachmentType, transactionAttachmentTypes]);
 	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet" }, /* @__PURE__ */ React.createElement("div", { className: `edit-transaction-sidesheet-header 'is-sticky'` }, /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-header-title" }), /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-header-content" }, /* @__PURE__ */ React.createElement("div", { className: "edit-transaction-sidesheet-header-items" }, headerItemInfo.map((headerItem) => {
 		return /* @__PURE__ */ React.createElement(EditTransactionHeaderItem_default, {
 			key: headerItem.label,
@@ -1738,6 +1735,7 @@ const EditTransaction = (props) => {
 		transactionUiActionType: TransactionUiActionTypeEnums.Render_Transaction_Details_Page,
 		formRef,
 		transaction,
+		refetchTransaction,
 		setHasUnsavedChanges
 	}) : /* @__PURE__ */ React.createElement(EditTransactionDetailsForm_default, {
 		transaction,
@@ -1745,7 +1743,10 @@ const EditTransaction = (props) => {
 	})), /* @__PURE__ */ React.createElement(UdpTabPanel, {
 		value: selectedTab,
 		index: TRANSACTION_TAB.HISTORY
-	}, /* @__PURE__ */ React.createElement(TransactionTimeline, { transactionId: transaction?.transactionId })), /* @__PURE__ */ React.createElement(UdpTabPanel, {
+	}, /* @__PURE__ */ React.createElement(TransactionTimeline, {
+		ref: transactionTimelineRef,
+		transactionId: transaction?.transactionId
+	})), /* @__PURE__ */ React.createElement(UdpTabPanel, {
 		value: selectedTab,
 		index: TRANSACTION_TAB.ATTACHMENTS
 	}, /* @__PURE__ */ React.createElement(TransactionAttachments, {
@@ -1797,19 +1798,47 @@ const UdpTransactionSidesheet = (props) => {
 	const [dialogOpen, setDialogOpen] = useState(false);
 	const [unsavedChangesDialogOpen, setUnsavedChangesDialogOpen] = useState(false);
 	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+	const [createTransactionOpenInnerSidesheetState, setCreateTransactionOpenInnerSidesheetState] = useState({ attachments: false });
+	const [attachmentType, setAttachmentType] = useState(null);
+	const [currentAttachments, setCurrentAttachments] = useState([]);
+	const [attachmentProgress, setAttachmentProgress] = useState(false);
+	const [transactionAttachments, setTransactionAttachments] = useState([]);
+	const [filePreview, setFilePreview] = useState(false);
 	const { handleSuccessSnackbar, handleErrorSnackbar } = useHandleAxiosSnackbar();
 	const { hasClosedStatus, checkIfTransactionIsClosed, getTransactionTypeLabel, getUiActionRenderPageId } = useTransactionEngine(transactionTypeId);
 	const { t } = useTranslation();
 	const formRef = useRef(null);
+	const createdTransactionIdRef = useRef(null);
 	const attachmentRef = useRef();
 	const sidesheetWidth = openStates?.width ?? 800;
 	const transactionTypeEntry = transaction?.entityBusinessObject;
+	const { enqueueSnackbar } = useSnackbar();
+	const [{ data: transactionAttachmentTypes }, fetchTransactionAttachmentType] = useAxiosMutate(process.env.REACT_APP_PRODUCT_API_BASE, `UdpTransactionAttachmentType/search`, {
+		method: "post",
+		data: {
+			pageSize: 50,
+			filterElements: [{
+				searchField: "TransactionTypeId",
+				searchValue: transactionTypeId,
+				searchOperator: "="
+			}]
+		}
+	});
 	const handleDialogClose = () => {
 		setDialogOpen(false);
 	};
 	const handleUnsavedChangesDialogClose = () => {
 		setUnsavedChangesDialogOpen(false);
 	};
+	const handleResetAttachmentState = useCallback((resetSavedAttachmentsState) => {
+		if (resetSavedAttachmentsState) {
+			setAttachmentType(null);
+			setCurrentAttachments([]);
+		}
+		setAttachmentProgress(false);
+		setTransactionAttachments([]);
+		setFilePreview(false);
+	}, []);
 	const executeCloseTransaction = useCallback(async () => {
 		if ((await apiMutate(ConfigService$1.productV1ApiUrl, `udpTransaction/${transaction?.transactionId}/closeTransaction`, { method: "post" }))?.status === 200) {
 			handleSidesheet("edit", false);
@@ -1836,16 +1865,79 @@ const UdpTransactionSidesheet = (props) => {
 		}
 	}, [executeCloseTransaction, handleErrorSnackbar]);
 	const formattedBusinesskey = transactionTypeEntry?.businessObjectKey?.split("|")?.pop();
+	const handleTransactionCreationSuccess = useCallback((response) => {
+		createdTransactionIdRef.current = response?.data?.transactionId ?? null;
+	}, []);
+	const handleFilesSelectedForUpload = useCallback(() => {
+		setCreateTransactionOpenInnerSidesheetState({ attachments: false });
+		enqueueSnackbar(`${currentAttachments.length} file(s) added for upload`, {
+			variant: "success",
+			anchorOrigin: {
+				vertical: "top",
+				horizontal: "center"
+			}
+		});
+	}, [enqueueSnackbar, currentAttachments.length]);
+	const handleUploadFilesForCreateTransaction = useCallback(async (transactionId) => {
+		if (!currentAttachments.length) throw new Error("No files added for upload");
+		const formData = new FormData();
+		currentAttachments.forEach((file) => formData.append("files", file));
+		formData.append("attachmentTypeId", attachmentType.transactionAttachmentTypeId);
+		try {
+			setAttachmentProgress(true);
+			await apiMutate(ConfigService$1.productV1ApiUrl, `UdpTransactionAttachment/transaction/${transactionId}/upload`, {
+				method: "post",
+				headers: {
+					transactionId,
+					attachmentTypeId: attachmentType.transactionAttachmentTypeId
+				},
+				data: formData
+			});
+			setCurrentAttachments([]);
+			setCreateTransactionOpenInnerSidesheetState({ attachments: false });
+			enqueueSnackbar("Files uploaded successfully", {
+				variant: "success",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+		} catch (error) {
+			enqueueSnackbar(`File upload failed: We encountered a system error. Please try again or contact support if the issue persists.`, {
+				variant: "error",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+			throw error;
+		} finally {
+			setAttachmentProgress(false);
+		}
+	}, [
+		attachmentType,
+		currentAttachments,
+		enqueueSnackbar,
+		setCurrentAttachments,
+		setAttachmentProgress
+	]);
 	const handleTransactionCreation = useCallback(async () => {
 		setSidesheetLoading(true);
+		createdTransactionIdRef.current = null;
 		await formRef.current?.form?.submit();
+		const newTransactionId = createdTransactionIdRef.current;
+		if (newTransactionId && currentAttachments.length > 0) await handleUploadFilesForCreateTransaction(newTransactionId);
 		setSidesheetLoading(false);
 		handleSidesheet("add", false);
+		handleResetAttachmentState(true);
 		refreshGridData();
 	}, [
 		handleSidesheet,
 		refreshGridData,
-		formRef
+		formRef,
+		handleResetAttachmentState,
+		currentAttachments.length,
+		handleUploadFilesForCreateTransaction
 	]);
 	const handleCreateRevision = useCallback(async () => {
 		setSidesheetLoading(true);
@@ -1890,16 +1982,53 @@ const UdpTransactionSidesheet = (props) => {
 		return [
 			{
 				open: openStates.addTransaction,
-				closeSheet: () => handleSidesheet("add", false),
+				closeSheet: () => {
+					handleSidesheet("add", false);
+					handleResetAttachmentState(true);
+				},
 				title: domainName,
 				width: sidesheetWidth,
 				onSubmit: handleTransactionCreation,
-				children: /* @__PURE__ */ React.createElement(UdpTransactionCustomPage_default, {
+				children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UdpTransactionCustomPage_default, {
 					transactionTypeId,
 					transactionUiActionType: TransactionUiActionTypeEnums.Render_Create_Transaction_Page,
-					formRef
-				}),
-				buttonLabel: "Add"
+					formRef,
+					onSubmitSuccess: handleTransactionCreationSuccess
+				}), /* @__PURE__ */ React.createElement(SideSheet, {
+					key: "Create Transaction: Add Attachment",
+					open: createTransactionOpenInnerSidesheetState?.attachments,
+					width: 600,
+					title: t("Add Attachment"),
+					onClose: () => {
+						setCreateTransactionOpenInnerSidesheetState({ attachments: false });
+						handleResetAttachmentState(true);
+					},
+					buttonLabel: t("Save"),
+					buttonOneDisabled: !attachmentType || currentAttachments.length <= 0,
+					onSubmit: handleFilesSelectedForUpload,
+					color: "primary"
+				}, /* @__PURE__ */ React.createElement(Attachments, {
+					attachmentTypes: transactionAttachmentTypes,
+					attachmentType,
+					setAttachmentType,
+					attachmentProgress,
+					setAttachmentProgress,
+					currentAttachments,
+					setCurrentAttachments,
+					transaction,
+					previousAttachments: transactionAttachments,
+					setPreviousAttachments: setTransactionAttachments,
+					MAX_FILE_SIZE_MB,
+					allowedExtensions,
+					filePreview,
+					setFilePreview
+				}))),
+				buttonLabel: "Add",
+				buttonTwoLabel: /* @__PURE__ */ React.createElement(Badge, {
+					badgeContent: currentAttachments?.length,
+					color: "primary"
+				}, "Add Attachment"),
+				buttonTwoAction: () => setCreateTransactionOpenInnerSidesheetState({ attachments: true })
 			},
 			{
 				open: openStates.viewTransaction,
@@ -1941,7 +2070,10 @@ const UdpTransactionSidesheet = (props) => {
 			},
 			{
 				open: openStates.editTransaction,
-				closeSheet: () => handleSidesheet("edit", false),
+				closeSheet: () => {
+					handleSidesheet("edit", false);
+					handleResetAttachmentState(true);
+				},
 				title: `Edit ${domainName} ${transactionLabel}`,
 				width: sidesheetWidth,
 				buttonLabel: "Next Steps",
@@ -1957,9 +2089,23 @@ const UdpTransactionSidesheet = (props) => {
 					openInnerSidesheetState: editTransactionopenInnerSidesheetState,
 					setOpenInnerSidesheetState: setEditTransactionOpenInnerSidesheetState,
 					refreshGridData,
-					closeSideSheet: () => handleSidesheet("edit", false),
+					closeSideSheet: () => {
+						handleSidesheet("edit", false);
+						handleResetAttachmentState(true);
+					},
 					setSidesheetLoading,
-					setHasUnsavedChanges
+					setHasUnsavedChanges,
+					attachmentType,
+					setAttachmentType,
+					currentAttachments,
+					setCurrentAttachments,
+					attachmentProgress,
+					setAttachmentProgress,
+					transactionAttachmentTypes,
+					transactionAttachments,
+					setTransactionAttachments,
+					filePreview,
+					setFilePreview
 				})
 			},
 			{
@@ -1989,13 +2135,42 @@ const UdpTransactionSidesheet = (props) => {
 		refreshGridData,
 		transactionTypeId,
 		handleTransactionCreation,
+		handleTransactionCreationSuccess,
 		hasClosedStatus,
 		handleCreateRevision,
 		transactionIsClosed,
 		viewTransactionPage,
 		pdfViewPageId,
 		sidesheetWidth,
-		handleNextStepsAction
+		handleNextStepsAction,
+		createTransactionOpenInnerSidesheetState,
+		t,
+		attachmentType,
+		setAttachmentType,
+		currentAttachments,
+		setCurrentAttachments,
+		attachmentProgress,
+		setAttachmentProgress,
+		transactionAttachmentTypes,
+		transactionAttachments,
+		setTransactionAttachments,
+		filePreview,
+		setFilePreview,
+		handleResetAttachmentState,
+		handleFilesSelectedForUpload
+	]);
+	useEffect(() => {
+		if ((openStates?.addTransaction || openStates?.editTransaction) && !transactionAttachmentTypes) {
+			setAttachmentProgress(true);
+			fetchTransactionAttachmentType().then(() => {
+				setAttachmentProgress(false);
+			});
+		}
+	}, [
+		fetchTransactionAttachmentType,
+		transactionAttachmentTypes,
+		openStates.addTransaction,
+		openStates.editTransaction
 	]);
 	return /* @__PURE__ */ React.createElement(React.Fragment, null, openStates && sidesheetList.map((item) => {
 		return /* @__PURE__ */ React.createElement(SideSheet, {
@@ -2266,4 +2441,4 @@ var UdpTransactionsPage_exports = /* @__PURE__ */ __exportAll({ default: () => U
 
 //#endregion
 export { UdpTransactionsPage_default as n, UdpTransactionsPage_exports as t };
-//# sourceMappingURL=UdpTransactionsPage-Dr3XbvFa.js.map
+//# sourceMappingURL=UdpTransactionsPage-DXhT7CVV.js.map