udp-react-enterprise-component-library 1.0.5-beta.1 → 1.0.5-beta.2

package/dist/WorkflowContainer-mXeP_hbS.js

@@ -0,0 +1,1708 @@
+import { Field, Form, SideSheet, apiMutate as apiMutate$1 } from "./SideSheet-DKR15EH5.js";
+import { APP_RIBBON_SPACE, FluentIcon, LayoutUnit, NodeActionTriggerEnums, TreeViewModeEnums, UnityFluentIcon, useAxiosGet, useBuildEnvironment, useShellStore, useUser } from "./EnvironmentRibbon-DBJftQWQ.js";
+import { AggregateChip, NodeLoader, UtilitySideBar, findAllParentIds, getIconFromName, getNodeIdForRightBorder, getUnityIconFromName, searchTree } from "./UtilitySideBar-Dz_17lBo.js";
+import { PageContainer, PrimaryActionHeader, useSetLocationState } from "./PageContainer-SljTiaZr.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Button, Card, CircularProgress, Grow, LinearProgress, Popper, Step, StepConnector, StepLabel, Stepper, TextField, Tooltip, Typography, darken, lighten, makeStyles, useTheme, withStyles } from "@material-ui/core";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { useHistory, useLocation } from "react-router-dom";
+import { DateTime } from "luxon";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import clsx from "clsx";
+import { CancelIcon, CaretDownSolid8Icon, CaretUpSolid8Icon, ChevronLeftIcon, ChevronRightIcon, ForwardIcon } from "@fluentui/react-icons";
+import { cloneDeep, orderBy } from "lodash";
+import { useTranslation } from "react-i18next";
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import TreeView from "@material-ui/lab/TreeView";
+import TreeItem from "@material-ui/lab/TreeItem";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import RadioButtonUncheckedIcon from "@material-ui/icons/RadioButtonUnchecked";
+import RadioButtonCheckedIcon from "@material-ui/icons/RadioButtonChecked";
+import PhoneImage from "./assets/images/phone.png";
+import ReactHtmlParser from "react-html-parser";
+
+//#region src/UI/inputs/textField/FluentTextFieldAutoComplete.jsx
+const useStyles$10 = makeStyles((theme) => ({
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 }
+}));
+const AutoCompletePopper = (props) => {
+	return /* @__PURE__ */ jsx(Popper, {
+		...props,
+		placement: "bottom-start"
+	});
+};
+const FluentTextFieldAutoComplete = (props) => {
+	const { label, placeholder, options, textFieldProps, disabled, onChange: onChangeProp, value, optionKey, additionalOnChangeAction, classes: classProps, variant = "outlined", inputProps, inputPropClasses, customPopper, disableClearable = false, defaultValue, additionalOptionKey, isMultiple = false, limitTags, renderTags, optionLabelDisplayFunction = (option) => option, groupBy = null, size = "medium", id, udprecordid,...other } = props;
+	const classes = useStyles$10();
+	const { autocompleteRoot } = classProps || {};
+	const onChange = useCallback((e, value$1) => {
+		if (additionalOnChangeAction) additionalOnChangeAction(value$1);
+		return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value$1);
+	}, [onChangeProp, additionalOnChangeAction]);
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		id: "autocomplete",
+		multiple: isMultiple,
+		limitTags,
+		disabled,
+		options: options || [],
+		getOptionLabel: (option) => option && (optionKey ? `${optionLabelDisplayFunction(option[optionKey])}${additionalOptionKey ? ` - (${option[additionalOptionKey]})` : ""}` : optionLabelDisplayFunction(option) || ""),
+		getOptionSelected: (option, val) => optionKey ? option[optionKey] === val[optionKey] : option === val,
+		groupBy,
+		onChange,
+		value: value || (isMultiple ? [] : null),
+		className: autocompleteRoot,
+		classes: { root: classProps === null || classProps === void 0 ? void 0 : classProps.formControl },
+		PopperComponent: customPopper || AutoCompletePopper,
+		disableClearable,
+		defaultValue,
+		size,
+		renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+			...textFieldProps,
+			...params,
+			...other,
+			inputProps: {
+				...params.inputProps,
+				id,
+				udprecordid
+			},
+			label,
+			margin: "dense",
+			variant,
+			placeholder,
+			size: "small",
+			InputProps: {
+				...params.InputProps,
+				...inputProps,
+				classes: {
+					root: classProps === null || classProps === void 0 ? void 0 : classProps.inputPropRoot,
+					input: clsx(classes.formTextInput, classProps === null || classProps === void 0 ? void 0 : classProps.inputPropInput)
+				}
+			},
+			InputLabelProps: { classes: { root: clsx(classes.labelRoot, classProps === null || classProps === void 0 ? void 0 : classProps.formLabelRoot) } }
+		}),
+		renderTags
+	});
+};
+
+//#endregion
+//#region src/utilities/input/DateUtilities.js
+const formatDateToLocaleString = (isoDate, luxonFormat = "") => {
+	return DateTime.fromISO(isoDate, { zone: "utc" }).toLocal().toLocaleString(luxonFormat);
+};
+const toUtcDate = (date) => {
+	if (!date) return null;
+	if (date.endsWith("Z")) return new Date(date);
+	else return /* @__PURE__ */ new Date(date + "Z");
+};
+
+//#endregion
+//#region src/workflow/menus/WorkflowTreeMenuItem.jsx
+const useStyles$9 = makeStyles((theme) => {
+	var _theme$getThemeData, _theme$getThemeData2;
+	return {
+		root: {
+			"&.Mui-selected > .MuiTreeItem-content": {
+				backgroundColor: (theme === null || theme === void 0 || (_theme$getThemeData = theme.getThemeData()) === null || _theme$getThemeData === void 0 ? void 0 : _theme$getThemeData.mode) === "dark" ? theme.palette.grey[700] : theme.palette.grey[300],
+				borderRight: `4px solid ${theme.palette.primary.main}`
+			},
+			"&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label": {
+				backgroundColor: "transparent",
+				paddingLeft: 0
+			},
+			"&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner": { backgroundColor: (theme === null || theme === void 0 || (_theme$getThemeData2 = theme.getThemeData()) === null || _theme$getThemeData2 === void 0 ? void 0 : _theme$getThemeData2.mode) !== "dark" && theme.palette.grey[50] },
+			"& .MuiTreeItem-content .MuiTreeItem-iconContainer": { display: (props) => props.sidebarExpanded ? "flex" : "none" }
+		},
+		content: { backgroundColor: (props) => {
+			var _theme$getThemeData3;
+			return (theme === null || theme === void 0 || (_theme$getThemeData3 = theme.getThemeData()) === null || _theme$getThemeData3 === void 0 ? void 0 : _theme$getThemeData3.mode) !== "dark" && !props.sidebarExpanded && props.conditionalIconName && props.conditionalIconColor ? lighten(props.conditionalIconColor, .92) : "";
+		} },
+		labelRoot: {
+			display: "flex",
+			alignItems: "center",
+			marginLeft: (props) => props.sidebarExpanded ? 0 : theme.spacing(1.5),
+			width: "100%"
+		},
+		labelContainer: {
+			display: (props) => !props.sidebarExpanded ? "none" : "",
+			width: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `calc(100% - ${theme.spacing(6.25)}px)` : `calc(100% - ${theme.spacing(7.75)}px)`
+		},
+		conditionalIconContainer: { display: "inline-flex" },
+		labelText: {
+			fontSize: "0.75rem",
+			fontWeight: 600,
+			lineHeight: "1rem",
+			letterSpacing: .1
+		},
+		captionText: {
+			marginLeft: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(1) : "",
+			fontSize: "0.65rem",
+			fontWeight: 400,
+			lineHeight: 1,
+			letterSpacing: .4
+		},
+		labelOverflow: {
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			marginTop: `-${theme.spacing(.25)}px`
+		},
+		group: {
+			width: "100%",
+			"& .MuiTreeItem-group": { marginLeft: 0 },
+			"& .MuiTreeItem-content": {
+				paddingLeft: (props) => props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,
+				borderRight: (props) => props.showRightBorderColor ? `4px solid ${theme.palette.primary.main}` : "",
+				borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+			},
+			"& .MuiTreeItem-content .MuiTreeItem-label": {
+				paddingLeft: 0,
+				width: (props) => props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`
+			},
+			"& .MuiTreeItem-content .MuiTreeItem-iconContainer span": { display: (props) => props.hideExpansion ? "none" : "" },
+			"& .MuiCollapse-wrapperInner": { backgroundColor: (props) => {
+				var _theme$getThemeData4;
+				return (theme === null || theme === void 0 || (_theme$getThemeData4 = theme.getThemeData()) === null || _theme$getThemeData4 === void 0 ? void 0 : _theme$getThemeData4.mode) !== "dark" && props.isSelectedNode ? theme.palette.grey[50] : "";
+			} }
+		},
+		iconContainer: {
+			display: "flex",
+			justifyContent: "center",
+			marginTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+			marginBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+			marginRight: theme.spacing(1),
+			width: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+			height: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4)
+		}
+	};
+});
+const WorkflowTreeMenuItem = (props) => {
+	var _node$properties2;
+	const { parentId, nodeId, iconName, iconType, conditionalIconName, conditionalIconType, conditionalIconColor, label, iconColor, onNodeSelect, isSelectedNode, subLabel, sidebarExpanded, isLastNode, loading, node, onDropNode, treeViewMode, menuIndex, aggregateThresholdId,...other } = props;
+	const classes = useStyles$9(props);
+	const theme = useTheme();
+	const [{ isDragging }, dragRef] = useDrag({
+		type: "BaseTreeMenuItem",
+		item: {
+			...node,
+			sourceNodeMenuIndex: menuIndex
+		},
+		collect: (monitor) => ({ isDragging: monitor.isDragging() })
+	});
+	const handleOnDrop = useCallback((sourceNode, monitor) => {
+		if (!monitor.didDrop()) {
+			if (onDropNode) {
+				const { sourceNodeMenuIndex,...other$1 } = sourceNode;
+				onDropNode({ ...other$1 }, node, sourceNodeMenuIndex, menuIndex);
+			}
+		}
+	}, [
+		onDropNode,
+		node,
+		menuIndex
+	]);
+	const [{ canDrop, isOver }, dropRef] = useDrop(() => ({
+		accept: ["BaseTreeMenuItem"],
+		drop: (sourceNode, monitor) => {
+			handleOnDrop(sourceNode, monitor);
+		},
+		canDrop: (sourceNode) => checkCanDrop(sourceNode),
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			canDrop: !!monitor.canDrop()
+		})
+	}), [handleOnDrop]);
+	const checkCanDrop = useCallback((sourceNode) => {
+		if (sourceNode) {
+			var _node$properties, _sourceNode$propertie;
+			const onDropActions = node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 || (_node$properties = _node$properties.nodeActions) === null || _node$properties === void 0 ? void 0 : _node$properties.filter((na) => (na === null || na === void 0 ? void 0 : na.triggerType) === NodeActionTriggerEnums.On_Node_Drop);
+			if (!onDropActions) return false;
+			const nodeDragEntities = onDropActions === null || onDropActions === void 0 ? void 0 : onDropActions.map((action) => action === null || action === void 0 ? void 0 : action.dragEntityName);
+			return nodeDragEntities.includes(sourceNode === null || sourceNode === void 0 || (_sourceNode$propertie = sourceNode.properties) === null || _sourceNode$propertie === void 0 ? void 0 : _sourceNode$propertie.catalogReturnObject);
+		}
+	}, [node]);
+	const handleOnLabelClick = useCallback((e) => {
+		e.preventDefault();
+		onNodeSelect(e, nodeId);
+	}, [onNodeSelect, nodeId]);
+	return /* @__PURE__ */ jsx(TreeItem, {
+		className: classes.group,
+		nodeId,
+		label: /* @__PURE__ */ jsx("div", {
+			ref: dropRef,
+			children: /* @__PURE__ */ jsx(Tooltip, {
+				title: sidebarExpanded ? "" : label,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: (node === null || node === void 0 || (_node$properties2 = node.properties) === null || _node$properties2 === void 0 ? void 0 : _node$properties2.isDraggable) && dragRef || null,
+					style: { opacity: isDragging ? .5 : 1 },
+					children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 12 }) : /* @__PURE__ */ jsxs("div", {
+						id: "udpRecord-BaseTreeMenuItem-" + (label === null || label === void 0 ? void 0 : label.replace(/\s+/g, "")),
+						udprecordid: "udpRecord-BaseTreeMenuItem-" + (label === null || label === void 0 ? void 0 : label.replace(/\s+/g, "")),
+						className: classes.labelRoot,
+						style: { fontWeight: isSelectedNode ? "bold" : "" },
+						children: [
+							iconName && /* @__PURE__ */ jsx("div", {
+								className: classes.iconContainer,
+								children: /* @__PURE__ */ jsx(UnityFluentIcon, {
+									size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "large",
+									color: iconColor,
+									type: iconType,
+									icon: iconType === "unity" ? getUnityIconFromName(iconName) : getIconFromName(iconName),
+									style: { color: iconColor ? darken(iconColor, .1) : theme.palette.secondary.main }
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: classes.labelContainer,
+								children: [/* @__PURE__ */ jsxs(Typography, {
+									variant: "subtitle2",
+									className: clsx(classes.labelText, classes.labelOverflow),
+									children: [label, subLabel && treeViewMode === TreeViewModeEnums.Compact && /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: clsx(classes.captionText, classes.labelOverflow),
+										children: subLabel
+									})]
+								}), subLabel && treeViewMode === TreeViewModeEnums.Classic && /* @__PURE__ */ jsx("div", {
+									className: classes.labelOverflow,
+									children: /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: clsx(classes.captionText),
+										children: subLabel
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsx(AggregateChip, { aggregateThresholdId }),
+							conditionalIconName && sidebarExpanded && /* @__PURE__ */ jsx("div", {
+								className: classes.conditionalIconContainer,
+								children: /* @__PURE__ */ jsx(UnityFluentIcon, {
+									size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "default",
+									color: conditionalIconColor,
+									type: conditionalIconType,
+									icon: conditionalIconType === "unity" ? getUnityIconFromName(conditionalIconName) : getIconFromName(conditionalIconName),
+									style: { color: conditionalIconColor }
+								})
+							})
+						]
+					})
+				})
+			})
+		}),
+		onLabelClick: handleOnLabelClick,
+		classes: {
+			root: classes.root,
+			content: classes.content
+		},
+		...other
+	}, nodeId);
+};
+
+//#endregion
+//#region src/workflow/menus/WorkflowTreeMenu.jsx
+const useStyles$8 = makeStyles((theme) => ({
+	root: {
+		marginBottom: theme.spacing(1.75),
+		borderTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+	},
+	noChildrenContainer: { borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : "" }
+}));
+const WorkflowTreeMenu = (props) => {
+	const { menuItems, onSelectNode, onDropNode, menuIndex, selectedNodeId, selectedNodeParentId, sidebarExpanded, treeViewMode, childrenKey = "children" } = props;
+	const [expanded, setExpanded] = useState(null);
+	const [isCurrentActiveTree, setIsCurrentActiveTree] = useState(false);
+	const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);
+	const [tree, setTree] = useState(menuItems);
+	const theme = useTheme();
+	const classes = useStyles$8(props);
+	const handleSelectedNode = useCallback((e, value) => {
+		const selectedNode = searchTree(tree, value);
+		if (onSelectNode) {
+			onSelectNode(selectedNode, menuIndex);
+			setSelectedNodeIsHidden(false);
+		}
+	}, [
+		tree,
+		menuIndex,
+		onSelectNode
+	]);
+	const renderTree = useCallback((node, depth = 1) => {
+		var _node$properties, _node$properties2, _node$properties3, _node$properties4, _node$properties5, _node$properties6, _node$properties7, _node$properties$cond, _node$properties8, _node$properties9, _node$properties10, _node$properties11, _node$properties12, _node$properties13, _node$childrenKey, _node$properties19, _node$childrenKey2, _node$properties20, _node$childrenKey3, _node$properties21, _node$childrenKey4;
+		let label = ((_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.nodeLabel) || ((_node$properties2 = node.properties) === null || _node$properties2 === void 0 ? void 0 : _node$properties2.name);
+		let subLabel = (_node$properties3 = node.properties) === null || _node$properties3 === void 0 ? void 0 : _node$properties3.nodeSubLabel;
+		let iconName = (_node$properties4 = node.properties) === null || _node$properties4 === void 0 || (_node$properties4 = _node$properties4.defaultIcon) === null || _node$properties4 === void 0 ? void 0 : _node$properties4.name;
+		let iconType = (_node$properties5 = node.properties) === null || _node$properties5 === void 0 || (_node$properties5 = _node$properties5.defaultIcon) === null || _node$properties5 === void 0 ? void 0 : _node$properties5.type;
+		let conditionalIconName = ((_node$properties6 = node.properties) === null || _node$properties6 === void 0 || (_node$properties6 = _node$properties6.conditionalIcon) === null || _node$properties6 === void 0 ? void 0 : _node$properties6.name) || "";
+		let conditionalIconType = ((_node$properties7 = node.properties) === null || _node$properties7 === void 0 || (_node$properties7 = _node$properties7.conditionalIcon) === null || _node$properties7 === void 0 ? void 0 : _node$properties7.name) ? (_node$properties$cond = node.properties.conditionalIcon) === null || _node$properties$cond === void 0 ? void 0 : _node$properties$cond.type : "";
+		let conditionalIconColor = ((_node$properties8 = node.properties) === null || _node$properties8 === void 0 || (_node$properties8 = _node$properties8.conditionalIcon) === null || _node$properties8 === void 0 ? void 0 : _node$properties8.name) ? (_node$properties9 = node.properties) === null || _node$properties9 === void 0 || (_node$properties9 = _node$properties9.conditionalIcon) === null || _node$properties9 === void 0 ? void 0 : _node$properties9.color : "";
+		let nodeId = node.id;
+		let iconColor = ((_node$properties10 = node.properties) === null || _node$properties10 === void 0 ? void 0 : _node$properties10.conditionalIconName) ? (_node$properties11 = node.properties) === null || _node$properties11 === void 0 ? void 0 : _node$properties11.conditionalIconColor : (_node$properties12 = node.properties) === null || _node$properties12 === void 0 || (_node$properties12 = _node$properties12.defaultIcon) === null || _node$properties12 === void 0 || (_node$properties12 = _node$properties12.color) === null || _node$properties12 === void 0 ? void 0 : _node$properties12.hex;
+		let aggregateThresholdId = ((_node$properties13 = node.properties) === null || _node$properties13 === void 0 ? void 0 : _node$properties13.aggregateThresholdId) || "";
+		if (node.isGroupNode) {
+			var _node$properties14, _node$properties15, _node$properties16, _node$properties17, _node$properties18;
+			label = (_node$properties14 = node.properties) === null || _node$properties14 === void 0 ? void 0 : _node$properties14.label;
+			subLabel = (_node$properties15 = node.properties) === null || _node$properties15 === void 0 ? void 0 : _node$properties15.subLabel;
+			iconName = (_node$properties16 = node.properties) === null || _node$properties16 === void 0 || (_node$properties16 = _node$properties16.icon) === null || _node$properties16 === void 0 ? void 0 : _node$properties16.name;
+			iconType = (_node$properties17 = node.properties) === null || _node$properties17 === void 0 || (_node$properties17 = _node$properties17.icon) === null || _node$properties17 === void 0 ? void 0 : _node$properties17.type;
+			iconColor = (_node$properties18 = node.properties) === null || _node$properties18 === void 0 || (_node$properties18 = _node$properties18.icon) === null || _node$properties18 === void 0 || (_node$properties18 = _node$properties18.color) === null || _node$properties18 === void 0 ? void 0 : _node$properties18.hex;
+		}
+		return /* @__PURE__ */ jsxs(WorkflowTreeMenuItem, {
+			nodeId,
+			label,
+			subLabel,
+			iconName,
+			iconType,
+			conditionalIconName,
+			conditionalIconType,
+			conditionalIconColor,
+			parentId: node.parentId,
+			iconColor,
+			onNodeSelect: handleSelectedNode,
+			selectedNodeId,
+			isSelectedNode: selectedNodeId === node.id,
+			showRightBorderColor: selectedNodeIsHidden && isCurrentActiveTree && getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) === node.id,
+			isCurrentActiveTree,
+			sidebarExpanded,
+			depth,
+			hideExpansion: !!!((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length),
+			node,
+			onDropNode,
+			treeViewMode,
+			menuIndex,
+			aggregateThresholdId,
+			children: [
+				((_node$properties19 = node.properties) === null || _node$properties19 === void 0 ? void 0 : _node$properties19.lazyLoad) && !!!((_node$childrenKey2 = node[childrenKey]) === null || _node$childrenKey2 === void 0 ? void 0 : _node$childrenKey2.length) && !node.completedLoadingChildren && /* @__PURE__ */ jsx(CircularProgress, {
+					size: 12,
+					style: { marginLeft: (depth || 1) * theme.spacing(1) }
+				}),
+				((_node$properties20 = node.properties) === null || _node$properties20 === void 0 ? void 0 : _node$properties20.lazyLoad) && !!!((_node$childrenKey3 = node[childrenKey]) === null || _node$childrenKey3 === void 0 ? void 0 : _node$childrenKey3.length) && node.completedLoadingChildren && sidebarExpanded && !node.errorRetrievingChildren && /* @__PURE__ */ jsx("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: "No Children"
+					})
+				}),
+				((_node$properties21 = node.properties) === null || _node$properties21 === void 0 ? void 0 : _node$properties21.lazyLoad) && node.completedLoadingChildren && sidebarExpanded && node.errorRetrievingChildren && /* @__PURE__ */ jsx("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: `Error Retrieving ${!!((_node$childrenKey4 = node[childrenKey]) === null || _node$childrenKey4 === void 0 ? void 0 : _node$childrenKey4.length) ? `Additional ` : ""}Children`
+					})
+				}),
+				Array.isArray(node[childrenKey]) ? node[childrenKey].map((n, i) => renderTree(n, depth + 1)) : null
+			]
+		}, nodeId);
+	}, [
+		handleSelectedNode,
+		selectedNodeId,
+		selectedNodeIsHidden,
+		isCurrentActiveTree,
+		sidebarExpanded,
+		expanded,
+		tree,
+		selectedNodeParentId,
+		theme,
+		classes,
+		onDropNode,
+		treeViewMode,
+		menuIndex,
+		childrenKey
+	]);
+	const handleNodeExpansion = useCallback(async (evt, nodeIds) => {
+		const treeCopy = cloneDeep(tree);
+		setExpanded(nodeIds);
+		const parentNode = searchTree(treeCopy, selectedNodeParentId);
+		const initialAllParentNodeIds = selectedNodeParentId ? [selectedNodeParentId] : [];
+		const allParentNodeIds = findAllParentIds(treeCopy, parentNode, initialAllParentNodeIds);
+		const selectedNodeShown = allParentNodeIds.every((id) => nodeIds.includes(id));
+		if (isCurrentActiveTree && allParentNodeIds.length && !selectedNodeShown) setSelectedNodeIsHidden(true);
+		else setSelectedNodeIsHidden(false);
+	}, [
+		isCurrentActiveTree,
+		tree,
+		selectedNodeParentId
+	]);
+	const getExpandedRecursively = useCallback((tree$1) => {
+		if (!tree$1) return [];
+		return tree$1.reduce((expandedIds, item) => {
+			var _item$childrenKey;
+			if (item === null || item === void 0 ? void 0 : item.isExpanded) expandedIds.push(item.id);
+			if (item && ((_item$childrenKey = item[childrenKey]) === null || _item$childrenKey === void 0 ? void 0 : _item$childrenKey.length)) expandedIds = expandedIds.concat(getExpandedRecursively(item[childrenKey]));
+			return expandedIds;
+		}, []);
+	}, [childrenKey]);
+	useEffect(() => {
+		setTree(menuItems);
+	}, [menuItems]);
+	useEffect(() => {
+		if (!tree) return;
+		let expanded$1 = [];
+		if (tree === null || tree === void 0 ? void 0 : tree.isExpanded) expanded$1.push(tree.id);
+		expanded$1 = expanded$1.concat(getExpandedRecursively(tree[childrenKey]));
+		setExpanded(expanded$1);
+	}, [
+		getExpandedRecursively,
+		tree,
+		childrenKey
+	]);
+	useEffect(() => {
+		if (!!searchTree(tree, selectedNodeId)) setIsCurrentActiveTree(true);
+		else setIsCurrentActiveTree(false);
+	}, [tree, selectedNodeId]);
+	if (!expanded) return null;
+	return /* @__PURE__ */ jsx(TreeView, {
+		className: classes.root,
+		defaultCollapseIcon: /* @__PURE__ */ jsx(FluentIcon, {
+			size: "small",
+			component: CaretUpSolid8Icon,
+			style: {
+				color: lighten(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		expanded: expanded || [],
+		onNodeToggle: handleNodeExpansion,
+		defaultExpandIcon: /* @__PURE__ */ jsx(FluentIcon, {
+			size: "small",
+			component: CaretDownSolid8Icon,
+			style: {
+				color: lighten(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		selected: selectedNodeId,
+		children: tree && renderTree(tree)
+	}, tree);
+};
+
+//#endregion
+//#region src/enums/workflowEnums.ts
+let UnitTypeEnums = /* @__PURE__ */ function(UnitTypeEnums$1) {
+	UnitTypeEnums$1[UnitTypeEnums$1["Scope"] = 0] = "Scope";
+	UnitTypeEnums$1[UnitTypeEnums$1["Sequence"] = 1] = "Sequence";
+	UnitTypeEnums$1[UnitTypeEnums$1["Group"] = 2] = "Group";
+	UnitTypeEnums$1[UnitTypeEnums$1["Fork"] = 3] = "Fork";
+	UnitTypeEnums$1[UnitTypeEnums$1["Branch"] = 4] = "Branch";
+	UnitTypeEnums$1[UnitTypeEnums$1["Retry"] = 5] = "Retry";
+	UnitTypeEnums$1[UnitTypeEnums$1["Attempt"] = 6] = "Attempt";
+	UnitTypeEnums$1[UnitTypeEnums$1["Iterator"] = 7] = "Iterator";
+	UnitTypeEnums$1[UnitTypeEnums$1["Loop"] = 8] = "Loop";
+	UnitTypeEnums$1[UnitTypeEnums$1["Break"] = 9] = "Break";
+	UnitTypeEnums$1[UnitTypeEnums$1["Block"] = 10] = "Block";
+	UnitTypeEnums$1[UnitTypeEnums$1["Adaptor"] = 11] = "Adaptor";
+	UnitTypeEnums$1[UnitTypeEnums$1["Code"] = 12] = "Code";
+	UnitTypeEnums$1[UnitTypeEnums$1["Pause"] = 13] = "Pause";
+	UnitTypeEnums$1[UnitTypeEnums$1["Fault"] = 14] = "Fault";
+	UnitTypeEnums$1[UnitTypeEnums$1["Trace"] = 15] = "Trace";
+	UnitTypeEnums$1[UnitTypeEnums$1["Catcher"] = 16] = "Catcher";
+	UnitTypeEnums$1[UnitTypeEnums$1["Thrower"] = 17] = "Thrower";
+	UnitTypeEnums$1[UnitTypeEnums$1["Plan"] = 18] = "Plan";
+	UnitTypeEnums$1[UnitTypeEnums$1["Task"] = 19] = "Task";
+	UnitTypeEnums$1[UnitTypeEnums$1["Sprint"] = 20] = "Sprint";
+	UnitTypeEnums$1[UnitTypeEnums$1["Auth"] = 21] = "Auth";
+	UnitTypeEnums$1[UnitTypeEnums$1["Rest"] = 22] = "Rest";
+	UnitTypeEnums$1[UnitTypeEnums$1["Fuse"] = 23] = "Fuse";
+	UnitTypeEnums$1[UnitTypeEnums$1["Mail"] = 24] = "Mail";
+	UnitTypeEnums$1[UnitTypeEnums$1["Sms"] = 25] = "Sms";
+	UnitTypeEnums$1[UnitTypeEnums$1["Publisher"] = 26] = "Publisher";
+	UnitTypeEnums$1[UnitTypeEnums$1["Fiber"] = 27] = "Fiber";
+	UnitTypeEnums$1[UnitTypeEnums$1["Mapper"] = 28] = "Mapper";
+	UnitTypeEnums$1[UnitTypeEnums$1["Section"] = 29] = "Section";
+	UnitTypeEnums$1[UnitTypeEnums$1["Scene"] = 30] = "Scene";
+	UnitTypeEnums$1[UnitTypeEnums$1["Placeholder"] = 100] = "Placeholder";
+	return UnitTypeEnums$1;
+}({});
+let UnitStateType = /* @__PURE__ */ function(UnitStateType$1) {
+	UnitStateType$1[UnitStateType$1["Initial"] = 0] = "Initial";
+	UnitStateType$1[UnitStateType$1["Started"] = 1] = "Started";
+	UnitStateType$1[UnitStateType$1["Completed"] = 2] = "Completed";
+	UnitStateType$1[UnitStateType$1["Cancelled"] = 3] = "Cancelled";
+	UnitStateType$1[UnitStateType$1["Failed"] = 4] = "Failed";
+	return UnitStateType$1;
+}({});
+
+//#endregion
+//#region src/utilities/workflow/workflowUtilities.js
+const getWorkflowTaskIconByActionType = (type) => {
+	let iconName = "ClipboardListIcon";
+	switch (type) {
+		case UnitTypeEnums.Rest:
+			iconName = "CloudImportExportIcon";
+			break;
+		case UnitTypeEnums.Sms:
+			iconName = "MessageFillIcon";
+			break;
+		case UnitTypeEnums.Mail:
+			iconName = "MailSolidIcon";
+			break;
+		case UnitTypeEnums.Scene:
+			iconName = "ReleaseGateIcon";
+			break;
+		default: break;
+	}
+	return iconName;
+};
+const getWorkflowTaskStateIconByStateType = (type) => {
+	let iconName = "";
+	switch (type) {
+		case UnitStateType.Initial:
+			iconName = "StopwatchIcon";
+			break;
+		case UnitStateType.Started:
+			iconName = "ProgressLoopOuterIcon";
+			break;
+		case UnitStateType.Completed:
+			iconName = "CheckMarkIcon";
+			break;
+		case UnitStateType.Cancelled:
+			iconName = "CancelIcon";
+			break;
+		case UnitStateType.Failed:
+		default:
+			iconName = "ErrorBadgeIcon";
+			break;
+	}
+	return iconName;
+};
+const getWorkflowTaskStateIconColorByStateType = (type) => {
+	let color = "";
+	switch (type) {
+		case UnitStateType.Initial:
+			color = "#ffa726";
+			break;
+		case UnitStateType.Started:
+			color = "#29b6f6";
+			break;
+		case UnitStateType.Completed:
+			color = "#66bb6a";
+			break;
+		case UnitStateType.Cancelled:
+			color = "#f44336";
+			break;
+		case UnitStateType.Failed:
+		default:
+			color = "#f44336";
+			break;
+	}
+	return color;
+};
+const SELECTABLE_NODE_TYPES = [
+	UnitTypeEnums.Sms,
+	UnitTypeEnums.Mail,
+	UnitTypeEnums.Scene
+];
+const transformWorkflowPlayTree = (node) => {
+	if (!node) return null;
+	const label = node.name || "";
+	const expanded = "expanded";
+	const startedAt = node.startedAt ? formatDateToLocaleString(node.startedAt, DateTime.DATETIME_SHORT) : null;
+	const updatedNode = {
+		id: node.id,
+		parentId: node.parentId,
+		isExpanded: expanded,
+		isSelectable: !!node.type && SELECTABLE_NODE_TYPES.includes(node.type),
+		properties: {
+			defaultIcon: {
+				type: "",
+				name: getWorkflowTaskIconByActionType(node.type),
+				color: ""
+			},
+			conditionalIcon: {
+				type: "",
+				name: !!node.type && getWorkflowTaskStateIconByStateType(node.state),
+				color: !!node.type && getWorkflowTaskStateIconColorByStateType(node.state)
+			},
+			nodeLabel: label,
+			nodeSubLabel: node.parentId ? node.description : startedAt || "",
+			state: node.state,
+			type: node.type,
+			interruptPages: node.interruptPages,
+			playSceneId: node.playSceneId,
+			startedAt: node.startedAt,
+			endedAt: node.endedAt,
+			dueDate: node.dueDate,
+			variables: node.variables,
+			sms: node.type === UnitTypeEnums.Sms ? {
+				templateData: node.templateData,
+				to: node.to,
+				from: node.from,
+				body: node.body
+			} : null,
+			email: node.type === UnitTypeEnums.Mail ? {
+				templateData: node.templateData,
+				to: node.to,
+				from: node.from,
+				subject: node.subject,
+				text: node.text,
+				html: node.html
+			} : null
+		},
+		children: []
+	};
+	for (const child of node.children) {
+		const updatedChild = transformWorkflowPlayTree(child);
+		if (updatedChild) updatedNode.children.push(updatedChild);
+	}
+	return updatedNode;
+};
+
+//#endregion
+//#region src/stores/workflowStore.ts
+const useWorkflowStore = create()(devtools((set) => ({
+	title: "",
+	setWorkflowToolbarTitle: (title) => set((state) => ({ title })),
+	taskDataMap: {},
+	updateTaskDataMap: (taskId, pageId, data) => set((state) => {
+		const updatedTaskDataMap = { ...state.taskDataMap };
+		if (updatedTaskDataMap[taskId]) if (updatedTaskDataMap[taskId][pageId]) updatedTaskDataMap[taskId][pageId] = data;
+		else updatedTaskDataMap[taskId] = { [pageId]: data };
+		else updatedTaskDataMap[taskId] = { [pageId]: data };
+		return { taskDataMap: updatedTaskDataMap };
+	}),
+	setTaskDataMap: (taskId, data) => set((state) => {
+		const updatedTaskDataMap = { ...state.taskDataMap };
+		updatedTaskDataMap[taskId] = data;
+		return { taskDataMap: updatedTaskDataMap };
+	})
+})));
+
+//#endregion
+//#region src/workflow/components/WorkflowTaskFlow.jsx
+const useStyles$7 = makeStyles((theme) => ({
+	root: { display: "flex" },
+	taskInfoBlock: {
+		backgroundColor: lighten(theme.palette.primary.main, .3),
+		width: theme.spacing(25),
+		color: theme.palette.common.white,
+		padding: `${theme.spacing(.5)}px ${theme.spacing(2.25)}px`
+	},
+	description: {
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		whiteSpace: "nowrap"
+	},
+	button: {
+		backgroundColor: theme.palette.primary.main,
+		color: theme.palette.common.white,
+		borderRadius: 0,
+		"&:hover": { backgroundColor: theme.palette.primary.dark },
+		minWidth: theme.spacing(3)
+	},
+	stepperContainer: {
+		width: "100%",
+		padding: 0,
+		marginTop: `-${theme.spacing(1.5)}px`,
+		background: "none"
+	},
+	stepIconRoot: {
+		zIndex: 1,
+		color: theme.palette.primary.main,
+		width: theme.spacing(3),
+		height: theme.spacing(3),
+		display: "flex",
+		borderRadius: "50%",
+		justifyContent: "center",
+		alignItems: "center",
+		"&.active": {
+			backgroundColor: theme.palette.primary.main,
+			color: theme.palette.common.white
+		},
+		"&.completed": {
+			backgroundColor: theme.palette.common.white,
+			color: theme.palette.success.main
+		}
+	},
+	stepLabel: { "& > .MuiStepLabel-label": { marginTop: theme.spacing(.5) } }
+}));
+const ColorLibConnector = withStyles((theme) => ({
+	connectorRoot: {
+		top: 10,
+		left: "calc(-50% + 12px)",
+		right: "calc(50% + 12px)"
+	},
+	alternativeLabel: {
+		left: "calc(-50% + 12px)",
+		right: "calc(50% + 12px)"
+	},
+	active: { "& $line": { borderColor: theme.palette.primary.main } },
+	completed: { "& $line": { borderColor: theme.palette.primary.main } },
+	line: {
+		borderTopWidth: 3,
+		borderRadius: 1
+	}
+}))(StepConnector);
+const ColorlibStepIcon = (props) => {
+	const { active, completed } = props;
+	const classes = useStyles$7();
+	const rootClass = `${classes.stepIconRoot} ${active ? "active" : ""} ${completed ? "completed" : ""}`;
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		children: completed ? /* @__PURE__ */ jsx(CheckCircleIcon, {}) : active ? /* @__PURE__ */ jsx(RadioButtonCheckedIcon, {}) : /* @__PURE__ */ jsx(RadioButtonUncheckedIcon, {})
+	});
+};
+const WorkflowTaskFlow = (props) => {
+	var _task$properties, _task$properties2;
+	const { steps = [], handleClick = () => {}, task } = props;
+	const classes = useStyles$7();
+	const [activeStep, setActiveStep] = useState(0);
+	const handleStepClick = (stepIndex) => {
+		handleClick(stepIndex);
+		setActiveStep(stepIndex);
+	};
+	const handleOnLeftButtonClick = useCallback(() => {
+		if (activeStep > 0) {
+			const newIndex = activeStep - 1;
+			handleClick(newIndex);
+			setActiveStep(newIndex);
+		}
+	}, [activeStep, handleClick]);
+	const handleOnRightButtonClick = useCallback(() => {
+		if (activeStep !== (steps === null || steps === void 0 ? void 0 : steps.length) - 1) {
+			const newIndex = activeStep + 1;
+			handleClick(newIndex);
+			setActiveStep(newIndex);
+		}
+	}, [
+		steps,
+		activeStep,
+		handleClick
+	]);
+	const getFormattedDueDate = useCallback((date) => {
+		if (!date) return "";
+		const shortDate = formatDateToLocaleString(date, DateTime.DATE_SHORT);
+		return `Due ${shortDate}`;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.root,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: classes.taskInfoBlock,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: classes.description,
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						children: (task === null || task === void 0 || (_task$properties = task.properties) === null || _task$properties === void 0 ? void 0 : _task$properties.nodeLabel) || ""
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: classes.description,
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						style: { fontWeight: 500 },
+						children: getFormattedDueDate(task === null || task === void 0 || (_task$properties2 = task.properties) === null || _task$properties2 === void 0 ? void 0 : _task$properties2.dueDate)
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				className: classes.button,
+				onClick: handleOnLeftButtonClick,
+				children: /* @__PURE__ */ jsx(FluentIcon, { component: ChevronLeftIcon })
+			}),
+			/* @__PURE__ */ jsx(Stepper, {
+				alternativeLabel: true,
+				activeStep,
+				connector: /* @__PURE__ */ jsx(ColorLibConnector, {}),
+				className: classes.stepperContainer,
+				children: steps.map((step, index) => /* @__PURE__ */ jsx(Step, {
+					onClick: () => handleStepClick(index),
+					children: /* @__PURE__ */ jsx(StepLabel, {
+						classes: { labelContainer: classes.stepLabel },
+						StepIconComponent: ColorlibStepIcon,
+						children: /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							children: step.label
+						})
+					})
+				}, step.label))
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				className: classes.button,
+				onClick: handleOnRightButtonClick,
+				children: /* @__PURE__ */ jsx(FluentIcon, { component: ChevronRightIcon })
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/UI/loading/LinearProgress.jsx
+const useStyles$6 = makeStyles$1((theme) => ({
+	root: { backgroundColor: theme.palette.grey[300] },
+	barColorPrimary: { backgroundColor: theme.palette.primary.main },
+	barColorSecondary: { backgroundColor: theme.palette.secondary.main },
+	barColorSuccess: { backgroundColor: theme.palette.success.main },
+	barColorError: { backgroundColor: theme.palette.error.main },
+	barColorWarning: { backgroundColor: theme.palette.warning.main },
+	barColorInfo: { backgroundColor: theme.palette.info.main },
+	customColorBar: (props) => ({ backgroundColor: props.color })
+}));
+const LinearProgress$1 = (props) => {
+	const { variant = "indeterminate", value, color = "primary",...otherProps } = props;
+	const isPredefinedColor = [
+		"primary",
+		"secondary",
+		"success",
+		"error",
+		"warning",
+		"info"
+	].includes(color);
+	const classes = useStyles$6({ color });
+	return /* @__PURE__ */ jsx(LinearProgress, {
+		...otherProps,
+		variant,
+		value,
+		classes: {
+			root: classes.root,
+			bar: clsx({
+				[classes.barColorPrimary]: color === "primary",
+				[classes.barColorSecondary]: color === "secondary",
+				[classes.barColorSuccess]: color === "success",
+				[classes.barColorError]: color === "error",
+				[classes.barColorWarning]: color === "warning",
+				[classes.barColorInfo]: color === "info",
+				[classes.customColorBar]: !isPredefinedColor
+			})
+		}
+	});
+};
+
+//#endregion
+//#region src/UI/loading/CircularProgress.jsx
+const useStyles$5 = makeStyles$1((theme) => ({
+	circleColorPrimary: { color: theme.palette.primary.main },
+	circleColorSecondary: { color: theme.palette.secondary.main },
+	circleColorSuccess: { color: theme.palette.success.main },
+	circleColorError: { color: theme.palette.error.main },
+	circleColorWarning: { color: theme.palette.warning.main },
+	circleColorInfo: { color: theme.palette.info.main },
+	customColorCircle: (props) => ({ backgroundColor: props.color })
+}));
+const CircularProgress$1 = (props) => {
+	const { variant = "indeterminate", value, color = "primary",...otherProps } = props;
+	const isPredefinedColor = [
+		"primary",
+		"secondary",
+		"success",
+		"error",
+		"warning",
+		"info"
+	].includes(color);
+	const classes = useStyles$5({ color });
+	return /* @__PURE__ */ jsx(CircularProgress, {
+		...otherProps,
+		variant,
+		value,
+		classes: {
+			root: classes.root,
+			circle: clsx({
+				[classes.circleColorPrimary]: color === "primary",
+				[classes.circleColorSecondary]: color === "secondary",
+				[classes.circleColorSuccess]: color === "success",
+				[classes.circleColorError]: color === "error",
+				[classes.circleColorWarning]: color === "warning",
+				[classes.circleColorInfo]: color === "info",
+				[classes.customColorCircle]: !isPredefinedColor
+			})
+		}
+	});
+};
+
+//#endregion
+//#region src/workflow/WorkflowUiInterruptContent.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {},
+	loadingContent: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "calc(100vh - 160px)"
+	}
+}));
+const WorkflowUiInterruptContent = (props) => {
+	var _selectedNode$propert, _selectedNode$propert2, _selectedNode$propert19;
+	const { selectedNode, workflow, reloadWorkflow, users, groups, handleClose, inquiryPageParams = {} } = props;
+	const classes = useStyles$4();
+	const [selectedPageId, setSelectedPageId] = useState("");
+	const [currentWorkflowStep, setCurrentWorkflowStep] = useState(0);
+	const [loading, setLoading] = useState(false);
+	const [loadingTaskData, setLoadingTaskData] = useState(true);
+	const [reassignSidesheetOpen, setReassignSidesheetOpen] = useState(false);
+	const [reassigningAssignee, setReassigningAssignee] = useState(false);
+	const [workflowPageData, setWorkflowPageData] = useState(null);
+	const [orderedPageData, setOrderedPageData] = useState([]);
+	const user = useUser();
+	const taskDataMap = useWorkflowStore((state) => state.taskDataMap);
+	const setTaskDataMap = useWorkflowStore((state) => state.setTaskDataMap);
+	const { t } = useTranslation();
+	const formRef = useRef(null);
+	const [{ data: pageData, loading: pageLoading, error: pageError }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${selectedPageId}`, {}, !!!selectedPageId, false);
+	const [{ data: playScene, loading: playSceneLoading, error: playSceneError }, fetchPlayScene] = useAxiosGet(ConfigService.maestroV1ApiUrl, `maestro/play/scene/${(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert = selectedNode.properties) === null || _selectedNode$propert === void 0 ? void 0 : _selectedNode$propert.playSceneId) || null}?includeData=true`, {}, !!!(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert2 = selectedNode.properties) === null || _selectedNode$propert2 === void 0 ? void 0 : _selectedNode$propert2.playSceneId), false);
+	const updatePlaySceneData = useCallback(async (data = "") => {
+		var _selectedNode$propert3;
+		return apiMutate$1(ConfigService.maestroV1ApiUrl, `maestro/play/scene/${(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert3 = selectedNode.properties) === null || _selectedNode$propert3 === void 0 ? void 0 : _selectedNode$propert3.playSceneId) || null}/data`, { method: "put" }, { data });
+	}, [selectedNode]);
+	const updatePlaySceneState = useCallback(async (data = {}, sceneState) => {
+		var _selectedNode$propert4;
+		return apiMutate$1(ConfigService.maestroV1ApiUrl, `maestro/play/scene/${(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert4 = selectedNode.properties) === null || _selectedNode$propert4 === void 0 ? void 0 : _selectedNode$propert4.playSceneId) || null}/${sceneState}`, { method: "put" }, { data });
+	}, [selectedNode]);
+	const updatePlaySceneAssignee = useCallback(async (data = "") => {
+		var _selectedNode$propert5;
+		return apiMutate$1(ConfigService.maestroV1ApiUrl, `maestro/play/scene/${(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert5 = selectedNode.properties) === null || _selectedNode$propert5 === void 0 ? void 0 : _selectedNode$propert5.playSceneId) || null}/assignee`, { method: "put" }, { data });
+	}, [selectedNode]);
+	const closeReassignmentSheet = useCallback(() => {
+		setReassignSidesheetOpen(false);
+	}, []);
+	const workflowTaskSteps = useMemo(() => {
+		var _selectedNode$propert6;
+		if (!(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert6 = selectedNode.properties) === null || _selectedNode$propert6 === void 0 ? void 0 : _selectedNode$propert6.interruptPages)) return [];
+		const orderedInterruptPages = orderBy(selectedNode.properties.interruptPages, ["sequenceNo"], ["asc"]);
+		const steps = orderedInterruptPages.reduce((list, ip) => {
+			var _ip$page, _ip$page2;
+			const step = {
+				label: ip.displayName || ((_ip$page = ip.page) === null || _ip$page === void 0 ? void 0 : _ip$page.name),
+				pageId: (_ip$page2 = ip.page) === null || _ip$page2 === void 0 ? void 0 : _ip$page2.pageId,
+				requiredFieldMapping: ip.requiredFieldMapping
+			};
+			list.push(step);
+			return list;
+		}, []);
+		return steps;
+	}, [selectedNode]);
+	const assigneeOptions = useMemo(() => {
+		const formattedUsers = (users === null || users === void 0 ? void 0 : users.reduce((list, user$1) => {
+			list.push({
+				id: (user$1 === null || user$1 === void 0 ? void 0 : user$1.unityId) || "",
+				name: `${user$1 === null || user$1 === void 0 ? void 0 : user$1.displayName} - (User)` || ""
+			});
+			return list;
+		}, [])) || [];
+		const formattedGroups = groups.reduce((list, group) => {
+			list.push({
+				id: (group === null || group === void 0 ? void 0 : group.groupId) || "",
+				name: `${group === null || group === void 0 ? void 0 : group.name} - (Group)` || ""
+			});
+			return list;
+		}, []) || [];
+		const options = formattedUsers.concat(formattedGroups);
+		return options;
+	}, [users, groups]);
+	const saveCurrentWorkflowData = useCallback(async () => {
+		var _selectedNode$propert7;
+		let playSceneData = null;
+		if (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert7 = selectedNode.properties) === null || _selectedNode$propert7 === void 0 ? void 0 : _selectedNode$propert7.playSceneId) playSceneData = taskDataMap[selectedNode.properties.playSceneId];
+		if (playSceneData) {
+			await updatePlaySceneData({ data: JSON.stringify(playSceneData) });
+			await fetchPlayScene();
+		}
+	}, [
+		taskDataMap,
+		fetchPlayScene,
+		updatePlaySceneData,
+		selectedNode
+	]);
+	const updateWorkflowPageData = useCallback(async (data, pageId) => {
+		var _selectedNode$propert8, _selectedNode$propert9, _selectedNode$propert10, _selectedNode$propert11, _selectedNode$propert12, _selectedNode$propert13;
+		if (!(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert8 = selectedNode.properties) === null || _selectedNode$propert8 === void 0 ? void 0 : _selectedNode$propert8.playSceneId) || !pageId) {
+			console.warn("No TaskId or PageId availble to save Workflow Page Data");
+			return;
+		}
+		if ((selectedNode === null || selectedNode === void 0 || (_selectedNode$propert9 = selectedNode.properties) === null || _selectedNode$propert9 === void 0 ? void 0 : _selectedNode$propert9.state) === UnitStateType.Initial || (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert10 = selectedNode.properties) === null || _selectedNode$propert10 === void 0 ? void 0 : _selectedNode$propert10.state) === UnitStateType.Completed || (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert11 = selectedNode.properties) === null || _selectedNode$propert11 === void 0 ? void 0 : _selectedNode$propert11.state) === UnitStateType.Cancelled || (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert12 = selectedNode.properties) === null || _selectedNode$propert12 === void 0 ? void 0 : _selectedNode$propert12.state) === UnitStateType.Failed) return;
+		let playSceneData = null;
+		if (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert13 = selectedNode.properties) === null || _selectedNode$propert13 === void 0 ? void 0 : _selectedNode$propert13.playSceneId) {
+			playSceneData = taskDataMap[selectedNode.properties.playSceneId];
+			if (playSceneData) playSceneData[pageId] = data;
+		}
+		if (playSceneData) {
+			await updatePlaySceneData({ data: JSON.stringify(playSceneData) });
+			await fetchPlayScene();
+		}
+	}, [
+		selectedNode,
+		fetchPlayScene,
+		taskDataMap,
+		updatePlaySceneData
+	]);
+	const handleTaskChange = useCallback(async (step) => {
+		setCurrentWorkflowStep(step);
+	}, []);
+	const handleTaskSubmit = useCallback(async () => {
+		setLoading(true);
+		await saveCurrentWorkflowData();
+		await updatePlaySceneState("", 2);
+		await reloadWorkflow();
+		setLoading(false);
+	}, [
+		updatePlaySceneState,
+		reloadWorkflow,
+		saveCurrentWorkflowData
+	]);
+	const secondaryButtons = useMemo(() => {
+		var _selectedNode$propert14;
+		const buttons = [];
+		if (handleClose) buttons.push({
+			label: t("Close"),
+			component: CancelIcon,
+			click: () => handleClose()
+		});
+		if ((selectedNode === null || selectedNode === void 0 || (_selectedNode$propert14 = selectedNode.properties) === null || _selectedNode$propert14 === void 0 ? void 0 : _selectedNode$propert14.state) !== UnitStateType.Started) return buttons;
+		buttons.push({
+			label: t("Reassign"),
+			component: ForwardIcon,
+			click: () => setReassignSidesheetOpen(true)
+		});
+		return buttons;
+	}, [
+		t,
+		selectedNode,
+		handleClose
+	]);
+	const handleReassignment = useCallback(() => {
+		formRef === null || formRef === void 0 || formRef.current.form.submit();
+	}, []);
+	const reassignTask = useCallback(async (values) => {
+		var _values$assignee;
+		setReassigningAssignee(true);
+		await updatePlaySceneAssignee({ data: (values === null || values === void 0 || (_values$assignee = values.assignee) === null || _values$assignee === void 0 ? void 0 : _values$assignee.id) || "" });
+		await fetchPlayScene();
+		setReassigningAssignee(false);
+		closeReassignmentSheet();
+	}, [
+		updatePlaySceneAssignee,
+		fetchPlayScene,
+		closeReassignmentSheet
+	]);
+	const requiredFieldMapping = useMemo(() => {
+		var _selectedNode$propert15;
+		const step = workflowTaskSteps === null || workflowTaskSteps === void 0 ? void 0 : workflowTaskSteps.find((wts) => wts.pageId === (pageData === null || pageData === void 0 ? void 0 : pageData.pageId));
+		let fieldMapping = (step === null || step === void 0 ? void 0 : step.requiredFieldMapping) ? cloneDeep(step.requiredFieldMapping) : {};
+		const workflowVariables = (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert15 = selectedNode.properties) === null || _selectedNode$propert15 === void 0 ? void 0 : _selectedNode$propert15.variables) || null;
+		if (!!fieldMapping && !!workflowVariables) {
+			var _Object$keys;
+			(_Object$keys = Object.keys(fieldMapping)) === null || _Object$keys === void 0 || _Object$keys.forEach((rfmKey) => {
+				const requiredField = fieldMapping[rfmKey];
+				if (!!(requiredField === null || requiredField === void 0 ? void 0 : requiredField.value)) {
+					if ((requiredField === null || requiredField === void 0 ? void 0 : requiredField.type) === "workflowVariable") {
+						let matchedVariable = false;
+						Object.keys(workflowVariables).forEach((key) => {
+							if (requiredField.value === key) {
+								requiredField.value = workflowVariables[key] || "";
+								matchedVariable = true;
+								return;
+							}
+						});
+						if (!matchedVariable) requiredField.value = null;
+					}
+				}
+			});
+		}
+		return fieldMapping || {};
+	}, [
+		pageData === null || pageData === void 0 ? void 0 : pageData.pageId,
+		selectedNode,
+		workflowTaskSteps
+	]);
+	const pageWidgetParams = useMemo(() => {
+		const requiredFieldsMap = Object.keys(requiredFieldMapping).reduce((fieldMap, key) => {
+			var _requiredFieldMapping;
+			fieldMap[key] = ((_requiredFieldMapping = requiredFieldMapping[key]) === null || _requiredFieldMapping === void 0 ? void 0 : _requiredFieldMapping.value) || "";
+			return fieldMap;
+		}, {});
+		return {
+			setSideSheetWidth: () => {
+				console.warn("setSideSheetWidth Not implemented");
+			},
+			setSideSheetButtonLabel: () => {
+				console.warn("setSideSheetButtonLabel Not implemented");
+			},
+			setSideSheetOnSubmit: () => {
+				console.warn("setSideSheetOnSubmit Not implemented");
+			},
+			setSideSheetAdditionalOnClose: () => {
+				console.warn("setSideSheetAdditionalOnClose Not implemented");
+			},
+			setSideSheetProps: () => {
+				console.warn("setSideSheetProps Not implemented");
+			},
+			closeSideSheet: () => {
+				console.warn("closeSideSheet Not implemented");
+			},
+			onCreate: () => {
+				console.warn("onCreate Not implemented");
+			},
+			onUpdate: () => {
+				console.warn("onUpdate Not implemented");
+			},
+			...inquiryPageParams,
+			pageId: pageData === null || pageData === void 0 ? void 0 : pageData.pageId,
+			updateWorkflowPageData: (data) => updateWorkflowPageData(data, pageData === null || pageData === void 0 ? void 0 : pageData.pageId),
+			workflowTask: selectedNode,
+			workflowPageData: {
+				...requiredFieldsMap,
+				...workflowPageData
+			},
+			requiredFieldsMap: requiredFieldMapping || null,
+			currentWorkflowStep,
+			orderedWorkflowPageData: orderedPageData
+		};
+	}, [
+		pageData === null || pageData === void 0 ? void 0 : pageData.pageId,
+		selectedNode,
+		workflowPageData,
+		updateWorkflowPageData,
+		requiredFieldMapping,
+		inquiryPageParams,
+		currentWorkflowStep,
+		orderedPageData
+	]);
+	const currentAssignee = useMemo(() => {
+		if (!(playScene === null || playScene === void 0 ? void 0 : playScene.assignee) || !(assigneeOptions === null || assigneeOptions === void 0 ? void 0 : assigneeOptions.length)) return "";
+		const matchingAssignee = assigneeOptions.find((assignee) => assignee.id === playScene.assignee);
+		return matchingAssignee || "";
+	}, [playScene, assigneeOptions]);
+	const pageHeight = useMemo(() => "calc(100vh - 162px)", []);
+	useEffect(() => {
+		var _selectedNode$propert16, _selectedNode$propert17;
+		if (!(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert16 = selectedNode.properties) === null || _selectedNode$propert16 === void 0 ? void 0 : _selectedNode$propert16.playSceneId) || !selectedPageId || loadingTaskData) {
+			setWorkflowPageData(null);
+			return;
+		}
+		if ((taskDataMap === null || taskDataMap === void 0 ? void 0 : taskDataMap[selectedNode.properties.playSceneId]) && taskDataMap[selectedNode.properties.playSceneId][selectedPageId]) {
+			setWorkflowPageData(taskDataMap[selectedNode.properties.playSceneId][selectedPageId]);
+			return;
+		}
+		if (Object.keys(taskDataMap).length && (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert17 = selectedNode.properties) === null || _selectedNode$propert17 === void 0 ? void 0 : _selectedNode$propert17.playSceneId) && selectedPageId && !playSceneLoading && !loadingTaskData) {
+			setWorkflowPageData((prevData) => {
+				if (!prevData) return {};
+				else if (!Object.keys(prevData).length) return prevData;
+			});
+			return;
+		}
+		setWorkflowPageData(null);
+	}, [
+		selectedNode,
+		selectedPageId,
+		taskDataMap,
+		loadingTaskData,
+		playSceneLoading,
+		workflowTaskSteps
+	]);
+	useEffect(() => {
+		if (workflowTaskSteps === null || workflowTaskSteps === void 0 ? void 0 : workflowTaskSteps.length) {
+			var _workflowTaskSteps$cu;
+			setSelectedPageId((_workflowTaskSteps$cu = workflowTaskSteps[currentWorkflowStep]) === null || _workflowTaskSteps$cu === void 0 ? void 0 : _workflowTaskSteps$cu.pageId);
+		}
+	}, [workflowTaskSteps, currentWorkflowStep]);
+	useEffect(() => {
+		var _selectedNode$propert18;
+		setLoadingTaskData(true);
+		if (!playSceneLoading && (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert18 = selectedNode.properties) === null || _selectedNode$propert18 === void 0 ? void 0 : _selectedNode$propert18.playSceneId)) {
+			const json = (playScene === null || playScene === void 0 ? void 0 : playScene.data) ? JSON.parse(playScene.data) : {};
+			setTaskDataMap(selectedNode.properties.playSceneId, json);
+		}
+		setLoadingTaskData(false);
+	}, [
+		playScene,
+		playSceneLoading,
+		setTaskDataMap,
+		selectedNode
+	]);
+	useEffect(() => {
+		const orderedData = [];
+		if (taskDataMap === null || taskDataMap === void 0 ? void 0 : taskDataMap[selectedNode.properties.playSceneId]) workflowTaskSteps.forEach((step) => {
+			orderedData.push(taskDataMap[selectedNode.properties.playSceneId][step.pageId] || {});
+		});
+		setOrderedPageData(orderedData);
+	}, [
+		taskDataMap,
+		workflowTaskSteps,
+		selectedNode
+	]);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs(Card, {
+			variant: "outlined",
+			style: {
+				border: "none",
+				paddingBottom: (workflowTaskSteps === null || workflowTaskSteps === void 0 ? void 0 : workflowTaskSteps.length) > 1 ? 10 : 0
+			},
+			children: [/* @__PURE__ */ jsx(PrimaryActionHeader, {
+				single: true,
+				title: workflow === null || workflow === void 0 ? void 0 : workflow.name,
+				buttonLabel: "Submit",
+				handleClick: handleTaskSubmit,
+				pabDisabled: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert19 = selectedNode.properties) === null || _selectedNode$propert19 === void 0 ? void 0 : _selectedNode$propert19.state) !== UnitStateType.Started,
+				secondaryButtons
+			}), loading && /* @__PURE__ */ jsx(LinearProgress$1, {})]
+		}),
+		(workflowTaskSteps === null || workflowTaskSteps === void 0 ? void 0 : workflowTaskSteps.length) > 1 && /* @__PURE__ */ jsx(WorkflowTaskFlow, {
+			steps: workflowTaskSteps,
+			handleClick: handleTaskChange,
+			task: selectedNode
+		}),
+		selectedPageId && workflowPageData ? /* @__PURE__ */ jsx(PageContainer, {
+			user,
+			pageData,
+			pageLoading,
+			widgetParams: pageWidgetParams,
+			disableMargins: true,
+			fromMenu: true,
+			height: pageHeight
+		}, selectedPageId) : /* @__PURE__ */ jsx("div", {
+			className: classes.loadingContent,
+			children: /* @__PURE__ */ jsx(CircularProgress$1, { size: 64 })
+		}),
+		/* @__PURE__ */ jsx(SideSheet, {
+			open: reassignSidesheetOpen,
+			buttonLabel: t("Reassign"),
+			onClose: closeReassignmentSheet,
+			onSubmit: handleReassignment,
+			title: t("Reassign Task"),
+			width: "25%",
+			progress: reassigningAssignee,
+			variant: "indeterminate",
+			children: /* @__PURE__ */ jsx(Form, {
+				onSubmit: reassignTask,
+				ref: formRef,
+				children: /* @__PURE__ */ jsx(Field, {
+					component: FluentTextFieldAutoComplete,
+					name: "assignee",
+					id: "assignee",
+					label: t("Assignee"),
+					initialValue: currentAssignee || "",
+					options: assigneeOptions || [],
+					optionKey: "name",
+					variant: "outlined",
+					margin: "dense"
+				})
+			})
+		})
+	] });
+};
+
+//#endregion
+//#region src/UI/components/dataDisplay/SmsDisplay.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	messages: {
+		flex: "1",
+		margin: "0 20px",
+		overflow: "hidden"
+	},
+	messagesBox: {
+		paddingRight: "3%",
+		paddingLeft: "3%",
+		width: "23vw",
+		height: "88%",
+		overflowY: "auto",
+		boxSizing: "border-box",
+		display: "flex",
+		justifyContent: "center"
+	},
+	message: {
+		backgroundColor: "#E9E9EB",
+		borderRadius: "10px",
+		padding: "10px",
+		marginBottom: "10px",
+		alignSelf: "flex-start",
+		overflowWrap: "break-word",
+		margin: theme.spacing(1)
+	},
+	messageSection: {
+		flex: "1",
+		overflowY: "auto",
+		padding: "20px",
+		backgroundImage: `url(${PhoneImage})`,
+		backgroundSize: "contain",
+		backgroundRepeat: "no-repeat",
+		backgroundPosition: "center",
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "calc(100vh - 140px)"
+	}
+}));
+const SmsDisplay = (props) => {
+	const { messages = [], to, from, title, handleClose } = props;
+	const classes = useStyles$3();
+	const [messagesList, setMessagesList] = useState(messages);
+	const { t } = useTranslation();
+	const messagesBoxRef = useRef(null);
+	const secondaryButtons = useMemo(() => {
+		const buttons = [];
+		if (handleClose) buttons.push({
+			label: t("Close"),
+			component: CancelIcon,
+			click: () => handleClose()
+		});
+		return buttons;
+	}, [t, handleClose]);
+	useEffect(() => {
+		if (messagesBoxRef.current) messagesBoxRef.current.scrollTop = messagesBoxRef.current.scrollHeight;
+	}, [messagesList]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Card, {
+		square: true,
+		children: /* @__PURE__ */ jsx(PrimaryActionHeader, {
+			hidePAB: true,
+			title,
+			subheader: `To: ${to} . From: ${from}`,
+			secondaryButtons
+		})
+	}), /* @__PURE__ */ jsx(Box, {
+		className: classes.messages,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: classes.messageSection,
+			children: /* @__PURE__ */ jsx(Box, {
+				className: classes.messagesBox,
+				ref: messagesBoxRef,
+				children: messagesList.map((message, index) => /* @__PURE__ */ jsx(Grow, {
+					in: true,
+					timeout: 800,
+					children: /* @__PURE__ */ jsx(Box, {
+						className: classes.message,
+						dangerouslySetInnerHTML: { __html: message }
+					})
+				}, index))
+			})
+		})
+	})] });
+};
+
+//#endregion
+//#region src/UI/components/dataDisplay/EmailDisplay.jsx
+const useStyles$2 = makeStyles((theme) => ({ htmlContainer: {
+	display: "flex",
+	justifyContent: "center"
+} }));
+const EmailDisplay = (props) => {
+	const { html = "", to, from, title, handleClose } = props;
+	const classes = useStyles$2();
+	const { t } = useTranslation();
+	const secondaryButtons = useMemo(() => {
+		const buttons = [];
+		if (handleClose) buttons.push({
+			label: t("Close"),
+			component: CancelIcon,
+			click: () => handleClose()
+		});
+		return buttons;
+	}, [t, handleClose]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Card, {
+			square: true,
+			children: /* @__PURE__ */ jsx(PrimaryActionHeader, {
+				hidePAB: true,
+				title,
+				subheader: `To: ${to} . From: ${from}`,
+				secondaryButtons
+			})
+		}),
+		/* @__PURE__ */ jsx(LayoutUnit, { unit: "sm" }),
+		/* @__PURE__ */ jsx("div", {
+			className: classes.htmlContainer,
+			children: ReactHtmlParser(html)
+		})
+	] });
+};
+
+//#endregion
+//#region src/workflow/WorkflowContent.jsx
+const useStyles$1 = makeStyles((theme) => ({ root: { height: "100%" } }));
+const WorkflowContent = (props) => {
+	var _selectedNode$propert, _selectedNode$propert2;
+	const { selectedNode, workflow, reloadWorkflow, users, groups, handleClose, inquiryPageParams = {} } = props;
+	const buildEnv = useBuildEnvironment();
+	const classes = useStyles$1({
+		...props,
+		appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0
+	});
+	const user = useUser();
+	const [{ data: pageData, loading: pageLoading, error: pageError }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${selectedNode === null || selectedNode === void 0 || (_selectedNode$propert = selectedNode.properties) === null || _selectedNode$propert === void 0 || (_selectedNode$propert = _selectedNode$propert.page) === null || _selectedNode$propert === void 0 ? void 0 : _selectedNode$propert.id}`, {}, !!!(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert2 = selectedNode.properties) === null || _selectedNode$propert2 === void 0 || (_selectedNode$propert2 = _selectedNode$propert2.page) === null || _selectedNode$propert2 === void 0 ? void 0 : _selectedNode$propert2.id), false);
+	const content = useMemo(() => {
+		var _selectedNode$propert3, _selectedNode$propert4, _selectedNode$propert9, _selectedNode$propert15;
+		let res = null;
+		if ((selectedNode === null || selectedNode === void 0 || (_selectedNode$propert3 = selectedNode.properties) === null || _selectedNode$propert3 === void 0 ? void 0 : _selectedNode$propert3.type) === UnitTypeEnums.Scene) res = /* @__PURE__ */ jsx(WorkflowUiInterruptContent, {
+			selectedNode,
+			workflow,
+			reloadWorkflow,
+			users,
+			groups,
+			handleClose,
+			inquiryPageParams
+		}, selectedNode.id);
+		else if ((selectedNode === null || selectedNode === void 0 || (_selectedNode$propert4 = selectedNode.properties) === null || _selectedNode$propert4 === void 0 ? void 0 : _selectedNode$propert4.type) === UnitTypeEnums.Sms) {
+			var _selectedNode$propert5, _selectedNode$propert6, _selectedNode$propert7, _selectedNode$propert8;
+			res = /* @__PURE__ */ jsx(SmsDisplay, {
+				messages: [(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert5 = selectedNode.properties) === null || _selectedNode$propert5 === void 0 || (_selectedNode$propert5 = _selectedNode$propert5.sms) === null || _selectedNode$propert5 === void 0 ? void 0 : _selectedNode$propert5.body) || ""],
+				to: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert6 = selectedNode.properties) === null || _selectedNode$propert6 === void 0 || (_selectedNode$propert6 = _selectedNode$propert6.sms) === null || _selectedNode$propert6 === void 0 ? void 0 : _selectedNode$propert6.to) || "",
+				from: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert7 = selectedNode.properties) === null || _selectedNode$propert7 === void 0 || (_selectedNode$propert7 = _selectedNode$propert7.sms) === null || _selectedNode$propert7 === void 0 ? void 0 : _selectedNode$propert7.from) || "",
+				title: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert8 = selectedNode.properties) === null || _selectedNode$propert8 === void 0 ? void 0 : _selectedNode$propert8.nodeLabel) || "",
+				handleClose
+			});
+		} else if ((selectedNode === null || selectedNode === void 0 || (_selectedNode$propert9 = selectedNode.properties) === null || _selectedNode$propert9 === void 0 ? void 0 : _selectedNode$propert9.type) === UnitTypeEnums.Mail) {
+			var _selectedNode$propert10, _selectedNode$propert11, _selectedNode$propert12, _selectedNode$propert13, _selectedNode$propert14;
+			res = /* @__PURE__ */ jsx(EmailDisplay, {
+				html: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert10 = selectedNode.properties) === null || _selectedNode$propert10 === void 0 || (_selectedNode$propert10 = _selectedNode$propert10.email) === null || _selectedNode$propert10 === void 0 ? void 0 : _selectedNode$propert10.html) || (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert11 = selectedNode.properties) === null || _selectedNode$propert11 === void 0 || (_selectedNode$propert11 = _selectedNode$propert11.email) === null || _selectedNode$propert11 === void 0 ? void 0 : _selectedNode$propert11.text) || "",
+				to: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert12 = selectedNode.properties) === null || _selectedNode$propert12 === void 0 || (_selectedNode$propert12 = _selectedNode$propert12.email) === null || _selectedNode$propert12 === void 0 ? void 0 : _selectedNode$propert12.to) || "",
+				from: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert13 = selectedNode.properties) === null || _selectedNode$propert13 === void 0 || (_selectedNode$propert13 = _selectedNode$propert13.email) === null || _selectedNode$propert13 === void 0 ? void 0 : _selectedNode$propert13.from) || "",
+				title: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert14 = selectedNode.properties) === null || _selectedNode$propert14 === void 0 ? void 0 : _selectedNode$propert14.nodeLabel) || "",
+				handleClose
+			});
+		} else if (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert15 = selectedNode.properties) === null || _selectedNode$propert15 === void 0 || (_selectedNode$propert15 = _selectedNode$propert15.page) === null || _selectedNode$propert15 === void 0 ? void 0 : _selectedNode$propert15.id) {
+			var _selectedNode$propert16, _selectedNode$propert17, _selectedNode$propert18, _selectedNode$propert19, _selectedNode$propert20, _selectedNode$propert21;
+			res = /* @__PURE__ */ jsx(PageContainer, {
+				user,
+				pageData,
+				pageLoading,
+				widgetParams: {
+					pageId: pageData === null || pageData === void 0 ? void 0 : pageData.pageId,
+					entityName: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert16 = selectedNode.properties) === null || _selectedNode$propert16 === void 0 || (_selectedNode$propert16 = _selectedNode$propert16.page) === null || _selectedNode$propert16 === void 0 || (_selectedNode$propert16 = _selectedNode$propert16.entity) === null || _selectedNode$propert16 === void 0 ? void 0 : _selectedNode$propert16.entityName,
+					pbiReportCode: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert17 = selectedNode.properties) === null || _selectedNode$propert17 === void 0 || (_selectedNode$propert17 = _selectedNode$propert17.page) === null || _selectedNode$propert17 === void 0 ? void 0 : _selectedNode$propert17.pbiReportCode,
+					requiredFieldsMap: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert18 = selectedNode.properties) === null || _selectedNode$propert18 === void 0 || (_selectedNode$propert18 = _selectedNode$propert18.page) === null || _selectedNode$propert18 === void 0 ? void 0 : _selectedNode$propert18.requiredFieldMapping,
+					udpTagId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert19 = selectedNode.properties) === null || _selectedNode$propert19 === void 0 || (_selectedNode$propert19 = _selectedNode$propert19.page) === null || _selectedNode$propert19 === void 0 ? void 0 : _selectedNode$propert19.udpTagId,
+					queryId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert20 = selectedNode.properties) === null || _selectedNode$propert20 === void 0 || (_selectedNode$propert20 = _selectedNode$propert20.page) === null || _selectedNode$propert20 === void 0 ? void 0 : _selectedNode$propert20.queryId,
+					inquiryTreeId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert21 = selectedNode.properties) === null || _selectedNode$propert21 === void 0 || (_selectedNode$propert21 = _selectedNode$propert21.page) === null || _selectedNode$propert21 === void 0 ? void 0 : _selectedNode$propert21.inquiryTreeId
+				},
+				disableMargins: true,
+				fromMenu: true
+			}, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.id);
+		}
+		return res;
+	}, [
+		groups,
+		pageData,
+		pageLoading,
+		reloadWorkflow,
+		selectedNode,
+		user,
+		users,
+		workflow,
+		handleClose
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: classes.root,
+		children: content
+	});
+};
+
+//#endregion
+//#region src/hooks/useUpdateSearchParams.js
+const useUpdateSearchParams = () => {
+	const history = useHistory();
+	const location = useLocation();
+	const updateSearchParams = (params) => {
+		const searchParams = new URLSearchParams(location.search);
+		Object.keys(params).forEach((key) => {
+			if (params[key] !== null) searchParams.set(key, params[key]);
+			else searchParams.delete(key);
+		});
+		history.push({
+			pathname: location.pathname,
+			search: searchParams.toString()
+		});
+	};
+	return updateSearchParams;
+};
+
+//#endregion
+//#region src/workflow/WorkflowContainer.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		flex: 1,
+		minHeight: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		display: "grid",
+		gridTemplateAreas: ["sidebar content"].map((line) => `"${line}"`).join(" "),
+		gridTemplateColumns: "auto 1fr",
+		gridTemplateRows: "auto 1fr"
+	},
+	sidebar: {
+		gridArea: "sidebar",
+		marginRight: theme.spacing(1)
+	},
+	content: {
+		gridArea: "content",
+		display: "flex",
+		flexDirection: "column",
+		position: "relative",
+		zIndex: 1,
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		overflowY: "auto"
+	},
+	menuContent: {
+		marginTop: theme.spacing(1),
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 116}px)`,
+		overflowX: "hidden"
+	},
+	loader: {
+		marginRight: theme.spacing(1),
+		marginLeft: theme.spacing(1)
+	},
+	loadingContent: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+}));
+const WorkflowContainer = (props) => {
+	const { playId, taskId, autoCollapseNav = true } = props;
+	const buildEnv = useBuildEnvironment();
+	const classes = useStyles({
+		...props,
+		appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0
+	});
+	const location = useLocation();
+	const updateSearchParams = useUpdateSearchParams();
+	const user = useUser();
+	const setLocationState = useSetLocationState();
+	const { t } = useTranslation();
+	const [menuItemsList, setMenuItemsList] = useState([]);
+	const [selectedNode, setSelectedNode] = useState(null);
+	const [sidebarExpanded, setSidebarExpanded] = useState(true);
+	const [reloadFromPage, setReloadFromPage] = useState(false);
+	const [workflow, setWorkflow] = useState(false);
+	const state = location.state;
+	let searchParamStr = location.search;
+	let searchParams = new URLSearchParams(searchParamStr);
+	const urlPlayId = location.pathname.replace("/workflowtask/", "");
+	const udpPlayId = playId || urlPlayId || (state ? state.playId : searchParams.has("playId") === true ? searchParams.get("playId") : "");
+	const udpTaskId = taskId || (state ? state.taskId : searchParams.has("taskId") === true ? searchParams.get("taskId") : "");
+	const [{ data: workflowPlay, loading: workflowPlayLoading }, reloadWorkflow] = useAxiosGet(ConfigService.builderV1ApiUrl, `workflow/play/${udpPlayId}`, {}, !!!udpPlayId, false);
+	const [{ data: users }] = useAxiosGet(ConfigService.securityV1ApiUrl, `users?tenantId=${(user === null || user === void 0 ? void 0 : user.currentTenantId) || ""}`, {}, !!!(user === null || user === void 0 ? void 0 : user.currentTenantId));
+	const [{ data: groups }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `groups?tenantId=${(user === null || user === void 0 ? void 0 : user.currentTenantId) || ""}&productId=${ConfigService.config.UNITY_PRODUCT_ID}`, {}, !!!(user === null || user === void 0 ? void 0 : user.currentTenantId));
+	const { setSubHeaderActionHasChildren, setNavigationExpanded } = useShellStore();
+	const handleReloadWorkflow = useCallback(async () => {
+		setReloadFromPage(true);
+		await reloadWorkflow();
+		setReloadFromPage(false);
+	}, [reloadWorkflow]);
+	const handleSelectedNode = useCallback(async (node, menuIndex) => {
+		if (node.isSelectable) {
+			var _node$properties;
+			setSelectedNode(node);
+			await handleReloadWorkflow();
+			if (node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.playSceneId) updateSearchParams({ taskId: node.properties.playSceneId });
+		}
+	}, [updateSearchParams, handleReloadWorkflow]);
+	const handleDropNode = useCallback((sourceNode, targetNode, sourceNodeMenuIndex, targetNodeMenuIndex) => {}, []);
+	const handleSidebarExpandClick = useCallback(() => {
+		setSidebarExpanded((expanded) => !expanded);
+	}, []);
+	useEffect(() => {
+		if (workflowPlay) setWorkflow(workflowPlay);
+	}, [workflowPlay]);
+	useEffect(() => {
+		setLocationState({ label: t("Workflow") });
+	}, [setLocationState, t]);
+	useEffect(() => {
+		if (workflow) setSelectedNode((prevNode) => {
+			if (!!prevNode) {
+				var _workflow$workflowPla;
+				const foundNode = (_workflow$workflowPla = workflow.workflowPlayNode) === null || _workflow$workflowPla === void 0 || (_workflow$workflowPla = _workflow$workflowPla.children) === null || _workflow$workflowPla === void 0 ? void 0 : _workflow$workflowPla.find((child) => child.id === prevNode.id);
+				if (!!foundNode) {
+					const updatedNode = { ...prevNode };
+					updatedNode.properties.state = foundNode.state;
+					return updatedNode;
+				} else return prevNode;
+			}
+		});
+	}, [workflow]);
+	useEffect(() => {
+		if (workflow) {
+			const list = [];
+			const updatedMenu = transformWorkflowPlayTree(workflow.workflowPlayNode);
+			if (updatedMenu) list.push(updatedMenu);
+			setMenuItemsList(list);
+		}
+	}, [workflow]);
+	useEffect(() => {
+		if (!selectedNode) {
+			const menu = menuItemsList[0];
+			if (menu) {
+				if (!!udpTaskId) {
+					const matchingTaskNode = menu.children.find((child) => {
+						var _child$properties;
+						return (child === null || child === void 0 || (_child$properties = child.properties) === null || _child$properties === void 0 ? void 0 : _child$properties.playSceneId) === udpTaskId;
+					});
+					setSelectedNode(matchingTaskNode || menu.children[0] || null);
+				} else {
+					var _menu$children;
+					const firstSelectableMenuItem = menu === null || menu === void 0 || (_menu$children = menu.children) === null || _menu$children === void 0 ? void 0 : _menu$children.find((item) => item.isSelectable);
+					setSelectedNode(firstSelectableMenuItem || null);
+				}
+				if (autoCollapseNav) setNavigationExpanded(false);
+			}
+		}
+	}, [
+		udpTaskId,
+		menuItemsList,
+		selectedNode,
+		setNavigationExpanded,
+		autoCollapseNav
+	]);
+	useEffect(() => {
+		setSubHeaderActionHasChildren(false);
+	}, [setSubHeaderActionHasChildren]);
+	return /* @__PURE__ */ jsx(DndProvider, {
+		backend: HTML5Backend,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classes.root,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: classes.sidebar,
+				children: /* @__PURE__ */ jsx(UtilitySideBar, {
+					title: "Workflow",
+					isUsingChildren: true,
+					resizable: true,
+					removePadding: true,
+					removeTopLayoutUnit: true,
+					onUtilitySidebarToggleExpandClick: handleSidebarExpandClick,
+					collapsedWidth: 64,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: classes.menuContent,
+						children: [(menuItemsList === null || menuItemsList === void 0 ? void 0 : menuItemsList.length) > 0 && (!workflowPlayLoading || reloadFromPage) && menuItemsList.map((menuItems, index) => /* @__PURE__ */ jsx("div", {
+							className: classes.nodeContainer,
+							children: /* @__PURE__ */ jsx(WorkflowTreeMenu, {
+								menuItems,
+								onSelectNode: handleSelectedNode,
+								onDropNode: handleDropNode,
+								menuIndex: index,
+								selectedNodeId: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.id,
+								selectedNodeParentId: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.parentId,
+								sidebarExpanded,
+								treeViewMode: TreeViewModeEnums.Classic
+							})
+						}, menuItems.id)), workflowPlayLoading && !reloadFromPage && /* @__PURE__ */ jsx("div", {
+							className: classes.loader,
+							children: /* @__PURE__ */ jsx(NodeLoader, { loading: workflowPlayLoading })
+						})]
+					}, playId)
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: classes.content,
+				children: /* @__PURE__ */ jsx(WorkflowContent, {
+					selectedNode,
+					workflow,
+					reloadWorkflow: handleReloadWorkflow,
+					users,
+					groups
+				})
+			})]
+		})
+	});
+};
+
+//#endregion
+export { CircularProgress$1 as CircularProgress, FluentTextFieldAutoComplete, LinearProgress$1 as LinearProgress, UnitStateType, WorkflowContainer, WorkflowContent, WorkflowTreeMenu, formatDateToLocaleString, toUtcDate, transformWorkflowPlayTree, useWorkflowStore };
+//# sourceMappingURL=WorkflowContainer-mXeP_hbS.js.map