\r\n {icon !== undefined ? {message} \r\n \r\n }\r\n action={action}\r\n ContentProps={{\r\n classes: {\r\n root: classes.root + \" \" + classes[color],\r\n message: classes.message,\r\n action: classNames({ [classes.actionRTL]: rtlActive })\r\n }\r\n }}\r\n />\r\n );\r\n}\r\n\r\nSnackbar.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n message: PropTypes.node.isRequired,\r\n color: PropTypes.oneOf([\"info\", \"success\", \"warning\", \"danger\", \"primary\"]),\r\n close: PropTypes.bool,\r\n icon: PropTypes.func,\r\n place: PropTypes.oneOf([\"tl\", \"tr\", \"tc\", \"br\", \"bl\", \"bc\"]),\r\n open: PropTypes.bool,\r\n rtlActive: PropTypes.bool\r\n};\r\n\r\nexport default withStyles(snackbarContentStyle)(Snackbar);\r\n","/* eslint-disable */\r\nimport React from \"react\";\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n// @material-ui/icons\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport SnackbarContent from \"components/Snackbar/SnackbarContent.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nclass Notifications extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n tl: false,\r\n tc: false,\r\n tr: false,\r\n bl: false,\r\n bc: false,\r\n br: false\r\n };\r\n }\r\n // to stop the warning of calling setState of unmounted component\r\n componentWillUnmount() {\r\n var id = window.setTimeout(null, 0);\r\n while (id--) {\r\n window.clearTimeout(id);\r\n }\r\n }\r\n showNotification(place) {\r\n var x = [];\r\n x[place] = true;\r\n this.setState(x);\r\n this.alertTimeout = setTimeout(\r\n function() {\r\n x[place] = false;\r\n this.setState(x);\r\n }.bind(this),\r\n 6000\r\n );\r\n }\r\n render() {\r\n const { classes } = this.props;\r\n return (\r\n \r\n \r\n Notifications \r\n \r\n Handcrafted by our friends from{\" \"}\r\n \r\n Material UI\r\n {\" \"}\r\n and styled by{\" \"}\r\n \r\n Creative Tim\r\n \r\n . Please checkout the{\" \"}\r\n \r\n full documentation\r\n \r\n .\r\n
\r\n \r\n \r\n \r\n \r\n Notifications Style \r\n \r\n \r\n Notifications States \r\n \r\n \r\n \r\n \r\n \r\n Notifications Places\r\n Click to view notifications \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.showNotification(\"tl\")}\r\n >\r\n Top Left\r\n \r\n this.setState({ tl: false })}\r\n close\r\n />\r\n \r\n \r\n this.showNotification(\"tc\")}\r\n >\r\n Top Center\r\n \r\n this.setState({ tc: false })}\r\n close\r\n />\r\n \r\n \r\n this.showNotification(\"tr\")}\r\n >\r\n Top Right\r\n \r\n this.setState({ tr: false })}\r\n close\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.showNotification(\"bl\")}\r\n >\r\n Bottom Left\r\n \r\n this.setState({ bl: false })}\r\n close\r\n />\r\n \r\n \r\n this.showNotification(\"bc\")}\r\n >\r\n Bottom Center\r\n \r\n this.setState({ bc: false })}\r\n close\r\n />\r\n \r\n \r\n this.showNotification(\"br\")}\r\n >\r\n Bottom Right\r\n \r\n this.setState({ br: false })}\r\n close\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(Notifications);\r\n","import {\r\n primaryColor,\r\n dangerColor,\r\n successColor,\r\n grayColor,\r\n defaultFont\r\n} from \"assets/jss/material-dashboard-react.jsx\";\r\n\r\nconst customInputStyle = {\r\n disabled: {\r\n \"&:before\": {\r\n backgroundColor: \"transparent !important\"\r\n }\r\n },\r\n underline: {\r\n \"&:hover:not($disabled):before,&:before\": {\r\n borderColor: grayColor[4] + \" !important\",\r\n borderWidth: \"1px !important\"\r\n },\r\n \"&:after\": {\r\n borderColor: primaryColor[0]\r\n }\r\n },\r\n underlineError: {\r\n \"&:after\": {\r\n borderColor: dangerColor[0]\r\n }\r\n },\r\n underlineSuccess: {\r\n \"&:after\": {\r\n borderColor: successColor[0]\r\n }\r\n },\r\n labelRoot: {\r\n ...defaultFont,\r\n color: grayColor[3] + \" !important\",\r\n fontWeight: \"400\",\r\n fontSize: \"14px\",\r\n lineHeight: \"1.42857\"\r\n },\r\n labelRootError: {\r\n color: dangerColor[0]\r\n },\r\n labelRootSuccess: {\r\n color: successColor[0]\r\n },\r\n feedback: {\r\n position: \"absolute\",\r\n top: \"18px\",\r\n right: \"0\",\r\n zIndex: \"2\",\r\n display: \"block\",\r\n width: \"24px\",\r\n height: \"24px\",\r\n textAlign: \"center\",\r\n pointerEvents: \"none\"\r\n },\r\n marginTop: {\r\n marginTop: \"16px\"\r\n },\r\n formControl: {\r\n paddingBottom: \"10px\",\r\n margin: \"27px 0 0 0\",\r\n position: \"relative\",\r\n verticalAlign: \"unset\"\r\n }\r\n};\r\n\r\nexport default customInputStyle;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\n\r\n// material-ui components\r\nimport InfoIcon from '@material-ui/icons/Info';\r\n\r\nconst styles = {\r\n}\r\n\r\nfunction InputInfoButton({ ...props }) {\r\n const {\r\n text,\r\n ...rest\r\n } = props;\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nInputInfoButton.propTypes = {\r\n text: PropTypes.string\r\n};\r\n\r\nexport default withStyles (styles)(InputInfoButton)\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Input from \"@material-ui/core/Input\";\r\n// @material-ui/icons\r\nimport Clear from \"@material-ui/icons/Clear\";\r\nimport Check from \"@material-ui/icons/Check\";\r\nimport InfoIcon from '@material-ui/icons/Info';\r\n\r\n// core components\r\nimport customInputStyle from \"assets/jss/material-dashboard-react/components/customInputStyle.jsx\";\r\nimport InputInfoButton from \"components/CustomInput/InputInfoButton.jsx\";\r\n\r\nfunction CustomInput({ ...props }) {\r\n const\r\n {\r\n classes,\r\n formControlProps,\r\n labelText,\r\n id,\r\n labelProps,\r\n inputProps,\r\n error,\r\n success,\r\n multiline,\r\n rows,\r\n onValueChange,\r\n infoText\r\n } = props;\r\n\r\n const labelClasses = classNames({\r\n [\" \" + classes.labelRootError]: error,\r\n [\" \" + classes.labelRootSuccess]: success && !error\r\n });\r\n\r\n const underlineClasses = classNames({\r\n [classes.underlineError]: error,\r\n [classes.underlineSuccess]: success && !error,\r\n [classes.underline]: true\r\n });\r\n\r\n const marginTop = classNames({\r\n [classes.marginTop]: labelText === undefined\r\n });\r\n\r\n return (\r\n \r\n {\r\n labelText !== undefined ?\r\n (\r\n \r\n {labelText}\r\n \r\n ) : null\r\n }\r\n\r\n \r\n : null\r\n } />\r\n\r\n {\r\n error ?\r\n (\r\n \r\n );\r\n}\r\n\r\nCustomInput.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n labelText: PropTypes.node,\r\n labelProps: PropTypes.object,\r\n id: PropTypes.string,\r\n inputProps: PropTypes.object,\r\n formControlProps: PropTypes.object,\r\n error: PropTypes.bool,\r\n success: PropTypes.bool,\r\n multiline: PropTypes.bool,\r\n rows: PropTypes.number,\r\n onValueChange: PropTypes.func,\r\n infoText: PropTypes.string\r\n};\r\n\r\nexport default withStyles(customInputStyle)(CustomInput);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { withRouter } from 'react-router-dom'\r\n\r\n// @material-ui/\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport Button from '@material-ui/core/Button';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DeleteIcon from \"@material-ui/icons/Delete\";\r\nimport EditIcon from \"@material-ui/icons/Edit\";\r\nimport ApproveIcon from \"@material-ui/icons/CheckCircleOutline\";\r\nimport DisapproveIcon from \"@material-ui/icons/HighlightOff\"\r\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\n\r\n// styles\r\nimport tableStyle from \"assets/jss/material-dashboard-react/components/tableStyle.jsx\";\r\n\r\n\r\n// TODO: Clear up this class\r\nfunction CustomTableJson({ ...props }) \r\n{\r\n const \r\n { \r\n classes, \r\n\r\n tableHead, \r\n tableData, \r\n tableHeadDataMap, \r\n\r\n tableHeaderColor,\r\n\r\n tableDayOfWeekColumns,\r\n tableNumericColumns,\r\n tableDateColumns,\r\n\r\n tableIgnoreSortColumns,\r\n\r\n isClickable,\r\n\r\n onClickLink,\r\n \r\n selectableRows,\r\n selectedItems,\r\n\r\n infoFieldIndex,\r\n infoFieldLinkText,\r\n infoModalTitle,\r\n\r\n onListItemClicked,\r\n onApproveButtonClicked,\r\n onDisapproveButtonClicked,\r\n onDeleteButtonClicked,\r\n onEditButtonClicked,\r\n initialOrderBy,\r\n initialSortingOrder,\r\n isSortable\r\n } = props;\r\n \r\n const [tempToggle, setTempToggle] = React.useState(false); // TODO: Somehow the TableRow doesn't update it's style if not updating this variable...\r\n const [localSelectedItems, setLocalSelectedItems] = React.useState([]);\r\n const [open, setOpen] = React.useState(false);\r\n const [modalDescription, setModalDescription] = React.useState(false);\r\n const [sortingOrder, setSortingOrder] = React.useState(initialSortingOrder ? initialSortingOrder : \"asc\");\r\n const [orderBy, setOrderBy] = React.useState(initialOrderBy ? initialOrderBy : \"\");\r\n\r\n const selectedRowStyle =\r\n {\r\n backgroundColor: \"Red\"\r\n }\r\n\r\n const handleClickOpen = (description) => \r\n {\r\n setOpen(true);\r\n setModalDescription(description);\r\n };\r\n\r\n function handleClose() {\r\n setOpen(false);\r\n }\r\n\r\n /**\r\n * Generates a sortable tableHead if isSortable is true.\r\n * If isSortable is false, it will return a normal tableHead.\r\n * @param {*} props Represents onRequestSort callback function.\r\n */\r\n function SortableTableHead(props)\r\n {\r\n const { onRequestSort } = props;\r\n\r\n const createSortHandler = dataColumnName => event => \r\n {\r\n onRequestSort(event, dataColumnName);\r\n }\r\n\r\n return(\r\n \r\n \r\n {\r\n tableHead.map((prop, index) => \r\n {\r\n var dataColumnName = tableHeadDataMap[index];\r\n\r\n // Check if tableHeaders should be sorted and return sortable tableHeaders.\r\n // If tableHeaders shouldn't be sorted or if they should be ignored, return normal tableHeaders.\r\n if (isSortable && (tableIgnoreSortColumns ? !tableIgnoreSortColumns.includes(dataColumnName) : true))\r\n {\r\n return (\r\n \r\n \r\n {prop}\r\n \r\n \r\n );\r\n }\r\n else\r\n {\r\n return (\r\n \r\n {prop}\r\n \r\n );\r\n }\r\n })\r\n }\r\n \r\n \r\n )\r\n }\r\n\r\n /**\r\n * Updates sortingOrder and orderBy variables \r\n * @param {*} event clickEvent\r\n * @param {*} orderByProperty property the data should be sorted by.\r\n */\r\n function handleRequestSort(event, orderByProperty) \r\n {\r\n // If same property is clicked, sort data descending. Otherwise sort data ascending.\r\n const sortDescending = orderBy === orderByProperty && sortingOrder === 'asc';\r\n\r\n // Set sorting direction and orderBy property\r\n setSortingOrder(sortDescending ? \"desc\" : \"asc\");\r\n setOrderBy(orderByProperty);\r\n }\r\n\r\n /**\r\n * Compares the provided obj1 and obj2 in an ascending order\r\n * @param {*} obj1 Object 1 to compare\r\n * @param {*} obj2 Object 2 to compare\r\n * @param {*} orderBy Property to compare between the two objects.\r\n */\r\n function compareDataAscending(obj1, obj2, orderBy) \r\n {\r\n var valueToCompare1 = \"\";\r\n var valueToCompare2 = \"\";\r\n\r\n // Check if data should be sorted on child of a property (only goes one layer deep).\r\n if (orderBy.includes('.'))\r\n {\r\n var orderBySplit = orderBy.split('.');\r\n\r\n valueToCompare1 = obj1[orderBySplit[0]][orderBySplit[1]];\r\n valueToCompare2 = obj2[orderBySplit[0]][orderBySplit[1]];\r\n }\r\n else\r\n {\r\n valueToCompare1 = obj1[orderBy];\r\n valueToCompare2 = obj2[orderBy];\r\n }\r\n\r\n //Check null values\r\n if (valueToCompare1 == null) \r\n {\r\n return -1;\r\n }\r\n else if (valueToCompare2 == null) \r\n {\r\n return 1;\r\n }\r\n\r\n // Check if value is a number, date or text and handle comparisons\r\n if (tableNumericColumns && tableNumericColumns.includes(orderBy))\r\n { \r\n if (valueToCompare2 - valueToCompare1 > 0) \r\n {\r\n return -1;\r\n }\r\n if (valueToCompare2 - valueToCompare1 < 0) \r\n {\r\n return 1;\r\n }\r\n }\r\n else if (tableDateColumns && tableDateColumns.includes(orderBy))\r\n {\r\n // Assumes date is in DAY-MONTH-YEAR HOUR:MINUTE format.\r\n var splitDateTime1 = valueToCompare1.split(' ');\r\n var splitDateTime2 = valueToCompare2.split(' ');\r\n\r\n var date1 = splitDateTime1[0].split('-');\r\n var date2 = splitDateTime2[0].split('-');\r\n\r\n // If date contained time, add time to new date object\r\n if (splitDateTime1[1] && splitDateTime2[1])\r\n {\r\n var time1 = splitDateTime1[1].split(':');\r\n var time2 = splitDateTime2[1].split(':');\r\n \r\n valueToCompare1 = new Date(date1[2], date1[1], date1[0], time1[0], time1[1]);\r\n valueToCompare2 = new Date(date2[2], date2[1], date2[0], time2[0], time2[1]);\r\n }\r\n else\r\n {\r\n valueToCompare1 = new Date(date1[2], date1[1], date1[0]);\r\n valueToCompare2 = new Date(date2[2], date2[1], date2[0]);\r\n }\r\n\r\n if (valueToCompare2 > valueToCompare1) \r\n {\r\n return -1;\r\n }\r\n if (valueToCompare2 < valueToCompare1) \r\n {\r\n return 1;\r\n }\r\n }\r\n else if (tableDayOfWeekColumns && tableDayOfWeekColumns.includes(orderBy))\r\n {\r\n var daysOfWeek = { \r\n 'MON': 0,\r\n 'TUE': 1,\r\n 'WED': 2,\r\n 'THU': 3,\r\n 'FRI': 4, \r\n 'SAT': 5, \r\n 'SUN': 6 \r\n };\r\n\r\n var value1 = daysOfWeek[valueToCompare1];\r\n var value2 = daysOfWeek[valueToCompare2];\r\n\r\n if (value1 < value2)\r\n {\r\n return -1;\r\n }\r\n else if (value1 > value2)\r\n {\r\n return 1;\r\n }\r\n }\r\n else\r\n { \r\n valueToCompare1 = valueToCompare1.toString();\r\n valueToCompare2 = valueToCompare2.toString();\r\n \r\n if (valueToCompare2.toLowerCase() > valueToCompare1.toLowerCase()) \r\n {\r\n return -1;\r\n }\r\n if (valueToCompare2.toLowerCase() < valueToCompare1.toLowerCase()) \r\n {\r\n return 1;\r\n }\r\n }\r\n\r\n return 0;\r\n }\r\n\r\n /**\r\n * Sort provided data by the provided property\r\n * @param {*} data Data to sort\r\n * @param {*} orderBy Property to sort data by\r\n */\r\n function sortTableByProperty(data, orderBy) \r\n {\r\n if (!orderBy)\r\n {\r\n return data;\r\n }\r\n\r\n var sortedData = data.sort((obj1, obj2) =>\r\n {\r\n if (sortingOrder === \"asc\")\r\n {\r\n return compareDataAscending(obj1, obj2, orderBy);\r\n }\r\n else\r\n {\r\n return -compareDataAscending(obj1, obj2, orderBy);\r\n }\r\n });\r\n\r\n return sortedData;\r\n }\r\n\r\n /**\r\n * Custom TableRow component which is able to perform an action on click\r\n */\r\n const RouterTableRow = withRouter(({rowKey, hoverStyle, listItem, history }) => (\r\n \r\n {\r\n // Somehow the TableRow doesn't update without setting this variable... \r\n setTempToggle(!tempToggle);\r\n\r\n // Check if TableRow is clickable\r\n if (!isClickable)\r\n {\r\n return;\r\n }\r\n\r\n // Check if a click event should be sent back to the place where this control is defined.\r\n if (onListItemClicked)\r\n onListItemClicked(listItem)\r\n\r\n // Check if an onClickLink has been passed to this control.\r\n if (onClickLink)\r\n {\r\n // Get single parameter from url.\r\n var matches = onClickLink.match(/\\{([^)]+)\\}/)\r\n \r\n var newLink = onClickLink;\r\n \r\n // If any parameter enclosed by { } was found,\r\n // try to fetch a listItemValue using the parameter\r\n // and replace the parameter by the found listItemValue.\r\n // e.g: /cases/ticket?no={ticketnumber} -> /cases/ticket?no=TIC-12345-67890\r\n if (matches)\r\n {\r\n var parameter = matches[1];\r\n var listItemValue = listItem[parameter];\r\n \r\n newLink = newLink.replace(matches[0], listItemValue);\r\n }\r\n \r\n history.push(newLink); \r\n }\r\n\r\n // Check if rows should be selected\r\n else if (selectableRows && selectedItems)\r\n {\r\n if (selectedItems.includes(listItem))\r\n {\r\n var itemIndex = selectedItems.indexOf(listItem);\r\n selectedItems.splice(itemIndex, 1);\r\n\r\n setLocalSelectedItems(selectedItems);\r\n }\r\n else\r\n {\r\n selectedItems.push(listItem);\r\n setLocalSelectedItems(selectedItems);\r\n }\r\n }\r\n }}>\r\n\r\n {\r\n createPropertyArrayFromJsonObject(listItem, tableHeadDataMap).map((property, index) =>\r\n { \r\n if (listItem[\"CallTo\"] != null)\r\n { \r\n if (listItem[\"CallTo\"].toString().includes(\"playing\"))\r\n {\r\n return (\r\n \r\n { \r\n // If current item index is equal to the infoFieldIndex,\r\n // Show info field as a link.\r\n (infoFieldIndex === index) \r\n ? handleClickOpen(property)}>{infoFieldLinkText} \r\n : property.toString()\r\n }\r\n \r\n ); \r\n } \r\n else\r\n {\r\n return (\r\n \r\n { \r\n // If current item index is equal to the infoFieldIndex,\r\n // Show info field as a link.\r\n (infoFieldIndex === index) \r\n ? handleClickOpen(property)}>{infoFieldLinkText} \r\n : property.toString()\r\n }\r\n \r\n ); \r\n } \r\n }\r\n else\r\n {\r\n return (\r\n \r\n { \r\n // If current item index is equal to the infoFieldIndex,\r\n // Show info field as a link.\r\n (infoFieldIndex === index) \r\n ? handleClickOpen(property)}>{infoFieldLinkText} \r\n : property.toString()\r\n }\r\n \r\n ); \r\n }\r\n }\r\n )\r\n }\r\n\r\n {\r\n // Show delete button if onDeleteButtonClicked is not null\r\n onDeleteButtonClicked || onEditButtonClicked || onApproveButtonClicked || onDisapproveButtonClicked\r\n ?\r\n \r\n {\r\n onApproveButtonClicked ? onApproveButtonClicked(listItem)}/> : null\r\n }\r\n {\r\n onDisapproveButtonClicked ? onDisapproveButtonClicked(listItem)}/> : null\r\n }\r\n {\r\n onEditButtonClicked ? onEditButtonClicked(listItem)}/> : null\r\n }\r\n {\r\n onDeleteButtonClicked ? onDeleteButtonClicked(listItem)}/> : null\r\n } \r\n \r\n :\r\n null\r\n }\r\n\r\n \r\n ))\r\n\r\n return (\r\n // TODO: Maybe create global modal.\r\n \r\n
\r\n \r\n {infoModalTitle} \r\n \r\n \r\n {modalDescription} \r\n \r\n \r\n \r\n \r\n Close\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n {\r\n tableHead !== undefined ?\r\n \r\n {\r\n sortTableByProperty(tableData, orderBy).map((listItem, rowKey) =>\r\n { \r\n var hoverStyle =\r\n {\r\n cursor: \"pointer\"\r\n }\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n Active Cases \r\n \r\n All active cases of my organization. \r\n
\r\n \r\n \r\n\r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"ADMINCASES\", \"PERSONALCASESONLY\", \"READALLCASESPERSONALWRITE\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n \r\n \r\n \r\n \r\n \r\n : null\r\n } \r\n \r\n \r\n \r\n \r\n \r\n );\r\n } \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(Cases)","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Input from \"@material-ui/core/Input\";\r\nimport NativeSelect from \"@material-ui/core/NativeSelect\";\r\n\r\n// @material-ui/icons\r\nimport Clear from \"@material-ui/icons/Clear\";\r\nimport Check from \"@material-ui/icons/Check\";\r\nimport InfoIcon from '@material-ui/icons/Info';\r\n\r\n// core components\r\nimport customSelectStyle from \"assets/jss/material-dashboard-react/components/customInputStyle.jsx\";\r\nimport InputInfoButton from \"components/CustomInput/InputInfoButton.jsx\";\r\n\r\nfunction CustomSelect({ ...props }) \r\n{\r\n const \r\n {\r\n classes,\r\n formControlProps,\r\n labelText,\r\n id,\r\n labelProps,\r\n inputProps,\r\n error,\r\n success,\r\n onValueChange,\r\n selectedValue,\r\n values,\r\n keyColumn,\r\n valueColumn,\r\n infoText\r\n } = props;\r\n\r\n const labelClasses = classNames({\r\n [\" \" + classes.labelRootError]: error,\r\n [\" \" + classes.labelRootSuccess]: success && !error\r\n });\r\n\r\n const marginTop = classNames({\r\n [classes.marginTop]: labelText === undefined\r\n });\r\n \r\n const createOptionItemsFromValues = () =>\r\n {\r\n // If keycolumn is not null, use the key and value column. Else use the item.\r\n if (keyColumn)\r\n {\r\n return values.map((item, key) =>\r\n {\r\n return({item[valueColumn]} )\r\n });\r\n }\r\n else\r\n {\r\n return values.map((item, key) =>\r\n {\r\n return({item} )\r\n });\r\n }\r\n }\r\n\r\n return (\r\n \r\n {\r\n labelText !== undefined ? \r\n (\r\n \r\n {labelText}\r\n \r\n ) : null\r\n }\r\n \r\n onValueChange ? onValueChange(event.target.value) : null}\r\n value={selectedValue}\r\n input={ \r\n \r\n {\r\n error ? \r\n (\r\n \r\n );\r\n}\r\n\r\nCustomSelect.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n labelText: PropTypes.node,\r\n labelProps: PropTypes.object,\r\n id: PropTypes.string,\r\n inputProps: PropTypes.object,\r\n formControlProps: PropTypes.object,\r\n error: PropTypes.bool,\r\n success: PropTypes.bool,\r\n onValueChange: PropTypes.func,\r\n values: PropTypes.array,\r\n keyColumn: PropTypes.string,\r\n valueColumn: PropTypes.string,\r\n infoText: PropTypes.string\r\n};\r\n\r\nexport default withStyles(customSelectStyle)(CustomSelect);\r\n","import React from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport CardFooter from \"components/Card/CardFooter.jsx\";\r\nimport CustomSelect from \"../../components/CustomInput/CustomSelect\";\r\nimport Danger from \"components/Typography/Danger.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\n// Local scripts\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet, apiPostJson } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n };\r\n\r\nvar allowedPortalPermissions = [\r\n \"ADMINCASES\", \r\n \"PERSONALCASESONLY\", \r\n \"READALLCASESPERSONALWRITE\"\r\n]\r\n\r\nclass NewCase extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n creatingCase: false,\r\n createCaseError: null,\r\n caseCreated: false,\r\n\r\n caseTypes: [],\r\n entitlements: [],\r\n subjects:[],\r\n\r\n caseTitle: \"\",\r\n caseType: \"\",\r\n caseSubject: \"\",\r\n caseEntitlement: \"\",\r\n caseDescription: \"\"\r\n }\r\n }\r\n\r\n componentDidMount()\r\n {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Fetch case meta data\r\n apiGet(\"cases/meta\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n var formattedSubjects = this.flattenSubjectTree(result.data.SubjectTree);\r\n\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n caseTypes: result.data.CaseTypes,\r\n entitlements: result.data.Entitlements,\r\n subjects: formattedSubjects,\r\n caseOriginCodes: result.data.CaseOriginCodes\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data.Message\r\n });\r\n });\r\n }\r\n\r\n /**\r\n * Put all parent and child subjects in the same list.\r\n */\r\n flattenSubjectTree = (parentSubject) =>\r\n {\r\n var subjects = []\r\n\r\n parentSubject.ChildSubjects.map((childSubject) =>\r\n {\r\n subjects.push(childSubject);\r\n\r\n if (childSubject.ChildSubjects != null)\r\n {\r\n this.flattenSubjectTree(childSubject).map((childChildSubject) =>\r\n {\r\n childChildSubject.ChildSubjects = null;\r\n childChildSubject.Title = childSubject.Title + \" / \" + childChildSubject.Title;\r\n subjects.push(childChildSubject);\r\n });\r\n }\r\n });\r\n\r\n return subjects;\r\n }\r\n\r\n createNewCase = () => \r\n {\r\n this.setState({creatingCase: true})\r\n\r\n // TODO: authentication\r\n const { caseTitle, caseType, caseSubject, caseEntitlement, caseDescription, caseOriginCodes } = this.state;\r\n \r\n // Get Web origin code\r\n var originCodeKey = -1;\r\n\r\n for (var i = 0; i < caseOriginCodes.length; i++) \r\n {\r\n var originCode = caseOriginCodes[i];\r\n \r\n if (originCode.Name === \"Web\")\r\n {\r\n originCodeKey = originCode.Key;\r\n break;\r\n }\r\n } \r\n\r\n // Create request body\r\n var requestBody = \r\n {\r\n SubjectId : caseSubject,\r\n CaseTypeKey: caseType,\r\n Title : caseTitle,\r\n EntitlementId : caseEntitlement,\r\n Description : caseDescription,\r\n CaseOriginKey : originCodeKey\r\n }\r\n\r\n // Create case\r\n apiPostJson(\"cases/create\", requestBody).then(() =>\r\n {\r\n this.setState(\r\n {\r\n caseCreated: true\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n createCaseError: error.data, \r\n creatingCase: false\r\n });\r\n });\r\n }\r\n\r\n render() \r\n {\r\n const { error, isLoaded, creatingCase, createCaseError, caseCreated, caseTypes, entitlements, subjects, caseType, caseSubject, caseEntitlement } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(NewCase);","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\n// Extra libs\r\nimport Cookies from \"js-cookie\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n };\r\n\r\nconst allowedPortalPermissions =\r\n[\r\n \"ADMINCASES\",\r\n \"PERSONALCASESONLY\",\r\n \"READALLCASES\",\r\n \"READALLCASESPERSONALWRITE\"\r\n]\r\n\r\nclass ClosedCases extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n cases: []\r\n }\r\n }\r\n\r\n componentDidMount()\r\n {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Get cases\r\n apiGet(\"cases/closedcases\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n cases: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n\r\n render() \r\n {\r\n const { error, isLoaded, cases } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n Closed Cases \r\n \r\n Closed cases (in the last 12 months) of my organization. \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n } \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(ClosedCases)","import React from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\n// Extra libs\r\nimport globalData from \"variables/globalData.jsx\";\r\n\r\nimport { apiGet, apiPost } from \"utils/webRequestUtils.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = theme => (\r\n{\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n responsiveDialog:\r\n {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginLeft: \"-33px !important\",\r\n marginRight: \"-33px !important\"\r\n },\r\n }\r\n});\r\n\r\nclass ClosedCaseDetails extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n\r\n confirmDialogOpen: false,\r\n closingCase: false,\r\n caseClosed: false,\r\n\r\n toastOpen: false,\r\n toastColor: \"success\",\r\n toastText: \"\",\r\n\r\n isCaseOwner: false,\r\n caseDetails: null\r\n }\r\n }\r\n\r\n // TODO: This is a temporary solution.\r\n // TODO: Duplicatie code (CaseDetails / CaseActivities)\r\n getOwnerDetails = () =>\r\n {\r\n // Get case ticketnumber from url parameter.\r\n var url = new URL(window.location.href);\r\n var ticketNumber = url.searchParams.get(\"no\");\r\n\r\n // Check if user is case owner\r\n apiGet(\"cases/owner/\" + ticketNumber).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoadedOwnerDetails:true,\r\n isCaseOwner: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoadedOwnerDetails: true,\r\n error: error.data,\r\n isCaseOwner: false\r\n });\r\n });\r\n }\r\n \r\n componentDidMount()\r\n {\r\n // Get case ticketnumber from url parameter.\r\n var url = new URL(window.location.href);\r\n var ticketNumber = url.searchParams.get(\"no\");\r\n\r\n // Get details of case\r\n apiGet(\"cases/get/closed/\" + ticketNumber).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n caseDetails: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n\r\n // Get case ownership info\r\n this.getOwnerDetails();\r\n }\r\n \r\n handleConfirmDialogOpen = () =>\r\n {\r\n this.setState({\r\n confirmDialogOpen: true\r\n })\r\n }\r\n\r\n handleConfirmDialogClose = () => \r\n {\r\n this.setState({\r\n confirmDialogOpen: false\r\n })\r\n }\r\n\r\n // TODO: Check if this method is reusable in other classes.\r\n showNotification = (toastColor, toastText) =>\r\n {\r\n this.setState(\r\n {\r\n toastOpen: true,\r\n toastColor: toastColor,\r\n toastText: toastText\r\n });\r\n\r\n this.alertTimeout = setTimeout(\r\n function() \r\n {\r\n this.setState(\r\n {\r\n toastOpen: false\r\n });\r\n }.bind(this),\r\n 3000\r\n );\r\n }\r\n\r\n render() \r\n { \r\n const { error, isLoaded, confirmDialogOpen, closingCase, caseClosed, toastOpen, toastColor, toastText, isCaseOwner, caseDetails } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n\r\n {/* Popup alert */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n /> \r\n\r\n {/* Case details card */}\r\n \r\n \r\n \r\n \r\n Case Details \r\n {caseDetails.Title}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Description */}\r\n \r\n \r\n \r\n \r\n \r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n \r\n \r\n \r\n \r\n Closed Case Activities \r\n All closed case activities.
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(ClosedCaseInfoPage)","import React from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\n\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\n// Extra libs\r\nimport globalData from \"variables/globalData.jsx\";\r\n\r\nimport { apiGet, apiPost } from \"utils/webRequestUtils.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = theme => (\r\n{\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n responsiveDialog:\r\n {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginLeft: \"-33px !important\",\r\n marginRight: \"-33px !important\"\r\n },\r\n }\r\n});\r\n\r\nclass CaseDetails extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n\r\n confirmDialogOpen: false,\r\n closingCase: false,\r\n caseClosed: false,\r\n\r\n toastOpen: false,\r\n toastColor: \"success\",\r\n toastText: \"\",\r\n\r\n isCaseOwner: false,\r\n caseDetails: null\r\n }\r\n }\r\n\r\n // TODO: This is a temporary solution.\r\n // TODO: Duplicatie code (CaseDetails / CaseActivities)\r\n getOwnerDetails = () =>\r\n {\r\n // Get case ticketnumber from url parameter.\r\n var url = new URL(window.location.href);\r\n var ticketNumber = url.searchParams.get(\"no\");\r\n\r\n // Check if user is case owner\r\n apiGet(\"cases/owner/\" + ticketNumber).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoadedOwnerDetails:true,\r\n isCaseOwner: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoadedOwnerDetails: true,\r\n error: error.data,\r\n isCaseOwner: false\r\n });\r\n });\r\n }\r\n \r\n componentDidMount()\r\n {\r\n // Get case ticketnumber from url parameter.\r\n var url = new URL(window.location.href);\r\n var ticketNumber = url.searchParams.get(\"no\");\r\n\r\n // Get details of case\r\n apiGet(\"cases/get/\" + ticketNumber).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n caseDetails: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n\r\n // Get case ownership info\r\n this.getOwnerDetails();\r\n }\r\n \r\n handleConfirmDialogOpen = () =>\r\n {\r\n this.setState({\r\n confirmDialogOpen: true\r\n })\r\n }\r\n\r\n handleConfirmDialogClose = () => \r\n {\r\n this.setState({\r\n confirmDialogOpen: false\r\n })\r\n }\r\n\r\n // TODO: Check if this method is reusable in other classes.\r\n showNotification = (toastColor, toastText) =>\r\n {\r\n this.setState(\r\n {\r\n toastOpen: true,\r\n toastColor: toastColor,\r\n toastText: toastText\r\n });\r\n\r\n this.alertTimeout = setTimeout(\r\n function() \r\n {\r\n this.setState(\r\n {\r\n toastOpen: false\r\n });\r\n }.bind(this),\r\n 3000\r\n );\r\n }\r\n\r\n closeCase = () =>\r\n {\r\n this.setState({closingCase:true});\r\n\r\n // TODO: Getting ticketnumber is duplicate at this point.\r\n // Get case ticketnumber from url parameter.\r\n var url = new URL(window.location.href);\r\n var ticketNumber = url.searchParams.get(\"no\");\r\n\r\n // Close case\r\n apiPost(\"cases/close/\" + ticketNumber).then(() => \r\n {\r\n this.setState(\r\n {\r\n closingCase: false,\r\n caseClosed: true\r\n }); \r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n //TODO: User friendly error.\r\n closingCase: false\r\n });\r\n\r\n this.handleConfirmDialogClose();\r\n this.showNotification(\"danger\", error.data);\r\n });\r\n }\r\n\r\n render() \r\n { \r\n const { error, isLoaded, confirmDialogOpen, closingCase, caseClosed, toastOpen, toastColor, toastText, isCaseOwner, caseDetails } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n\r\n {/* Popup alert */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Close case dialog */}\r\n this.handleConfirmDialogClose()} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to close this case?\"} \r\n \r\n \r\n Closed cases can't be reopened from the Universal Customer Portal again.\r\n \r\n \r\n \r\n this.handleConfirmDialogClose()} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.closeCase()} color=\"danger\">\r\n Close case!\r\n \r\n \r\n \r\n\r\n {/* Case details card */}\r\n \r\n \r\n \r\n \r\n Case Details \r\n {caseDetails.Title}
\r\n \r\n \r\n { \r\n PMUtils.userHasAnyRequiredPermissions([\"ADMINCASES\"], globalData.loggedInUser.PortalPermissions) ||\r\n (PMUtils.userHasAnyRequiredPermissions([\"PERSONALCASESONLY\", \"READALLCASESPERSONALWRITE\"], globalData.loggedInUser.PortalPermissions) && isCaseOwner)\r\n ? \r\n ( this.handleConfirmDialogOpen()}>Close Case ) \r\n : null\r\n } \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Description */}\r\n \r\n \r\n \r\n \r\n \r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n this.handleReplyDialogClose()} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Case Activities \r\n All case activities.
\r\n \r\n \r\n { \r\n PMUtils.userHasAnyRequiredPermissions([\"ADMINCASES\"], globalData.loggedInUser.PortalPermissions) ||\r\n (PMUtils.userHasAnyRequiredPermissions([\"PERSONALCASESONLY\", \"READALLCASESPERSONALWRITE\"], globalData.loggedInUser.PortalPermissions) && isCaseOwner)\r\n ? \r\n ( this.handleReplyDialogOpen()}>Reply to Case ) \r\n : null\r\n } \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(CaseInfoPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// @material-ui/icons\r\nimport FolderIcon from \"@material-ui/icons/FolderOpen\";\r\n\r\n// core components\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardIcon from \"components/Card/CardIcon.jsx\";\r\nimport CardFooter from \"components/Card/CardFooter.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\nimport dashboardStyle from \"assets/jss/material-dashboard-react/views/dashboardStyle.jsx\";\r\n\r\nconst requiredPortalPermissions = [\r\n \"UCALLMANAGER.ACCESS\"\r\n]\r\n\r\nconst allowedPortalPermissions = [\r\n \"UCALLMANAGER.AGENTS.VIEW\",\r\n \"UCALLMANAGER.AGENTS.EDIT\",\r\n \"UCALLMANAGER.QUEUES.EDIT\"\r\n]\r\n\r\nclass PortalGeneralDocumentsWidget extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state =\r\n {\r\n error: null,\r\n isLoaded: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions) ||\r\n !PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.setState(\r\n {\r\n isLoaded: true\r\n });\r\n }\r\n render() {\r\n const { classes } = this.props;\r\n const { isLoaded, error } = this.state;\r\n\r\n if (!isLoaded) {\r\n\r\n return \r\n \r\n \r\n \r\n General Documents
\r\n \r\n \r\n \r\n Go to General Documents\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\nexport default withStyles(dashboardStyle)(PortalGeneralDocumentsWidget);","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// @material-ui/icons\r\nimport FolderIcon from \"@material-ui/icons/FolderOpen\";\r\n\r\n// core components\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardIcon from \"components/Card/CardIcon.jsx\";\r\nimport CardFooter from \"components/Card/CardFooter.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\nimport dashboardStyle from \"assets/jss/material-dashboard-react/views/dashboardStyle.jsx\";\r\n\r\nconst requiredPortalPermissions = [ \r\n \"UCALLMANAGER.ACCESS\"\r\n]\r\n\r\nconst allowedPortalPermissions = [\r\n \"UCALLMANAGER.AGENTS.VIEW\",\r\n \"UCALLMANAGER.AGENTS.EDIT\",\r\n \"UCALLMANAGER.QUEUES.EDIT\"\r\n]\r\n\r\nclass UCallManagerAgentsWidget extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false\r\n }\r\n }\r\n\r\n componentDidMount()\r\n { \r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions) ||\r\n !PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.setState(\r\n {\r\n isLoaded: true\r\n });\r\n }\r\n\r\n render() \r\n {\r\n const { classes } = this.props;\r\n const { isLoaded, error } = this.state;\r\n \r\n if (!isLoaded)\r\n {\r\n \r\n return \r\n \r\n \r\n \r\n Contracts
\r\n \r\n \r\n \r\n Go to Contracts\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\nexport default withStyles(dashboardStyle)(UCallManagerAgentsWidget);","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// @material-ui/icons\r\nimport FolderIcon from \"@material-ui/icons/FolderOpen\";\r\n\r\n// core components\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardIcon from \"components/Card/CardIcon.jsx\";\r\nimport CardFooter from \"components/Card/CardFooter.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\nimport dashboardStyle from \"assets/jss/material-dashboard-react/views/dashboardStyle.jsx\";\r\n\r\nconst requiredPortalPermissions = [\r\n \"UCALLMANAGER.ACCESS\"\r\n]\r\n\r\nconst allowedPortalPermissions = [\r\n \"UCALLMANAGER.AGENTS.VIEW\",\r\n \"UCALLMANAGER.AGENTS.EDIT\",\r\n \"UCALLMANAGER.QUEUES.EDIT\"\r\n]\r\n\r\nclass UCallManagerAgentsWidget extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state =\r\n {\r\n error: null,\r\n isLoaded: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions) ||\r\n !PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.setState(\r\n {\r\n isLoaded: true\r\n });\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const { isLoaded, error } = this.state;\r\n\r\n if (!isLoaded) {\r\n\r\n return \r\n \r\n \r\n \r\n Invoices
\r\n \r\n \r\n \r\n Go to Invoices\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\nexport default withStyles(dashboardStyle)(UCallManagerAgentsWidget);","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport GeneralDocumentsWidget from \"views/Dashboard/PortalWidgets/PortalGeneralDocumentsWidget.jsx\";\r\nimport ContractsWidget from \"views/Dashboard/PortalWidgets/PortalContractsWidget.jsx\";\r\nimport InvoicesWidget from \"views/Dashboard/PortalWidgets/PortalInvoicesWidget.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nconst allowedPortalPermissions =\r\n [\r\n \"UCP.DOCUMENTS.GENERAL.VIEW\",\r\n \"VIEWCONTRACTS\",\r\n \"ADMININVOICES\"\r\n ]\r\n\r\nconst requiredGeneralDocsPermissions = [\r\n \"UCP.DOCUMENTS.GENERAL.VIEW\",\r\n]\r\n\r\nconst requiredContractsPermissions = [\r\n \"VIEWCONTRACTS\",\r\n]\r\n\r\nconst requiredInvoicesPermissions = [\r\n \"ADMININVOICES\"\r\n]\r\n\r\nclass DocumentsOverviewPage extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n error: null,\r\n isLoaded: false\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.setState(\r\n {\r\n isLoaded: true\r\n });\r\n }\r\n\r\n render() {\r\n const { error, isLoaded } = this.state;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n
Documents \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions(requiredGeneralDocsPermissions, globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (\r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n\r\n {\r\n PMUtils.userHasAnyRequiredPermissions(requiredContractsPermissions, globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (\r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n\r\n {\r\n PMUtils.userHasAnyRequiredPermissions(requiredInvoicesPermissions, globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (\r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(DocumentsOverviewPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet, apiPostJson, apiPostFileJson } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nconst allowedPortalPermissions =\r\n [\r\n \"UCP.DOCUMENTS.GENERAL.VIEW\"\r\n ]\r\n\r\nclass GeneralDocumentsPage extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n generalDocs: [],\r\n selectedDocuments: [],\r\n triggerRender: \"\",\r\n\r\n downloading: false\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Get list of general documents\r\n apiGet(\"documents/general\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n generalDocs: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n downloadDocuments = () =>\r\n {\r\n const { selectedDocuments } = this.state;\r\n\r\n this.setState(\r\n {\r\n downloading: true\r\n });\r\n\r\n var requestBody = selectedDocuments;\r\n\r\n // Get downloadable zip file containing selected documents.\r\n apiPostFileJson(\"documents/general/get\", requestBody).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n downloading: false,\r\n });\r\n\r\n // Trigger file download\r\n const data = window.URL.createObjectURL(result);\r\n var link = document.createElement('a');\r\n link.href = data;\r\n link.download=\"documents.zip\";\r\n link.click();\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n downloading: false,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n const { error, isLoaded, generalDocs, selectedDocuments, downloading } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n General Documents \r\n \r\n Overview of general documents.\r\n
\r\n \r\n \r\n {\r\n selectedDocuments.length > 0\r\n ?\r\n (\r\n \r\n \r\n {selectedDocuments.length === 1 ? \"1 document selected\" : selectedDocuments.length + \" documents selected\"}\r\n \r\n this.downloadDocuments()}>\r\n {\r\n downloading\r\n ?\r\n \"Preparing download...\"\r\n :\r\n (selectedDocuments.length === 1 ? \"Download Document (.zip)\" : \"Download Documents (.zip)\")\r\n } \r\n \r\n \r\n )\r\n :\r\n null\r\n } \r\n\r\n this.setState({ triggerRender: \"\" }) }\r\n initialOrderBy={\"CreationTime\"}\r\n initialSortingOrder={\"desc\"}\r\n tableDateColumns={[\"CreationTime\"]}\r\n />\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(GeneralDocumentsPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet, apiPostJson, apiPostFileJson } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nconst allowedPortalPermissions =\r\n [\r\n \"VIEWCONTRACTS\"\r\n ]\r\n\r\nclass ContractsPage extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n contracts: [],\r\n\r\n selectedContracts: [],\r\n triggerRender: \"\",\r\n\r\n downloading: false\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Get list of recordings\r\n apiGet(\"documents/contracts\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n contracts: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n downloadContracts = () =>\r\n {\r\n const { selectedContracts } = this.state;\r\n\r\n this.setState(\r\n {\r\n downloading: true\r\n });\r\n\r\n var requestBody = selectedContracts;\r\n\r\n // Get downloadable zip file containing selected contracts.\r\n apiPostFileJson(\"documents/contracts/get\", requestBody).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n downloading: false,\r\n });\r\n\r\n // Trigger file download\r\n const data = window.URL.createObjectURL(result);\r\n var link = document.createElement('a');\r\n link.href = data;\r\n link.download=\"contracts.zip\";\r\n link.click();\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n downloading: false,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n const { error, isLoaded, contracts, selectedContracts, downloading } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n Contracts \r\n \r\n Overview of contracts.\r\n
\r\n \r\n \r\n {\r\n selectedContracts.length > 0\r\n ?\r\n (\r\n \r\n \r\n {selectedContracts.length === 1 ? \"1 contract selected\" : selectedContracts.length + \" contracts selected\"}\r\n \r\n this.downloadContracts()}>\r\n {\r\n downloading\r\n ?\r\n \"Preparing download...\"\r\n :\r\n (selectedContracts.length === 1 ? \"Download Contract (.zip)\" : \"Download Contracts (.zip)\")\r\n } \r\n \r\n \r\n )\r\n :\r\n null\r\n } \r\n\r\n this.setState({ triggerRender: \"\" }) }\r\n initialOrderBy={\"CreationTime\"}\r\n initialSortingOrder={\"desc\"}\r\n tableDateColumns={[\"CreationTime\"]}\r\n />\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(ContractsPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet, apiPostJson, apiPostFileJson } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nconst allowedPortalPermissions =\r\n [\r\n \"ADMININVOICES\"\r\n ]\r\n\r\nclass InvoicesPage extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n invoices: [],\r\n\r\n selectedInvoices: [],\r\n triggerRender: \"\",\r\n\r\n downloading: false\r\n }\r\n\r\n }\r\n\r\n componentDidMount() {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Get list of invoices\r\n apiGet(\"documents/invoices\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n invoices: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n downloadInvoices = () =>\r\n {\r\n const { selectedInvoices } = this.state;\r\n\r\n this.setState(\r\n {\r\n downloading: true\r\n });\r\n\r\n var requestBody = selectedInvoices;\r\n\r\n // Get downloadable zip file containing selected invoices.\r\n apiPostFileJson(\"documents/invoices/get\", requestBody).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n downloading: false,\r\n });\r\n\r\n // Trigger file download\r\n const data = window.URL.createObjectURL(result);\r\n var link = document.createElement('a');\r\n link.href = data;\r\n link.download=\"invoices.zip\";\r\n link.click();\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n downloading: false,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n const { error, isLoaded, invoices, selectedInvoices, downloading } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n Invoices \r\n \r\n Overview of invoices.\r\n
\r\n \r\n \r\n {\r\n selectedInvoices.length > 0\r\n ?\r\n (\r\n \r\n \r\n {selectedInvoices.length === 1 ? \"1 invoice selected\" : selectedInvoices.length + \" invoices selected\"}\r\n \r\n this.downloadInvoices()}>\r\n {\r\n downloading\r\n ?\r\n \"Preparing download...\"\r\n :\r\n (selectedInvoices.length === 1 ? \"Download Invoice (.zip)\" : \"Download Invoices (.zip)\")\r\n } \r\n \r\n \r\n )\r\n :\r\n null\r\n } \r\n\r\n this.setState({ triggerRender: \"\" }) }\r\n initialOrderBy={\"CreationTime\"}\r\n initialSortingOrder={\"desc\"}\r\n tableDateColumns={[\"CreationTime\"]}\r\n />\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(InvoicesPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n };\r\n\r\nconst allowedPortalPermissions =\r\n[\r\n \"READORDERS\",\r\n \"ADMINORDERS\"\r\n]\r\n\r\nclass OrdersPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n orders: []\r\n }\r\n }\r\n\r\n componentDidMount()\r\n {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Get orders\r\n apiGet(\"orders/pending\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n orders: this.appendDescriptionToOrders(result.data)\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n appendDescriptionToOrders(orders)\r\n {\r\n var newOrders = [];\r\n\r\n for (var orderIndex = 0; orderIndex < orders.length; orderIndex++)\r\n {\r\n var order = orders[orderIndex];\r\n\r\n var productsDescription = \"\";\r\n\r\n for (var productIndex = 0; productIndex < order[\"Products\"].length; productIndex++)\r\n {\r\n var productAmount = order[\"Products\"][productIndex][\"Amount\"];\r\n var productName = order[\"Products\"][productIndex][\"IsAddOn\"] === true\r\n ?\r\n order[\"Products\"][productIndex][\"ProductDisplayName\"]\r\n :\r\n order[\"Products\"][productIndex][\"ProductName\"];\r\n\r\n\r\n productsDescription += (\"- \" + \"(\" + productAmount + \"x) \" + productName) + \"\\n\";\r\n }\r\n\r\n order[\"ProductsDescription\"] = productsDescription;\r\n\r\n newOrders.push(order);\r\n }\r\n\r\n return newOrders;\r\n }\r\n\r\n render() \r\n {\r\n const { error, isLoaded, orders } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n Pending Orders \r\n \r\n All pending orders of my organization. \r\n
\r\n \r\n \r\n\r\n \r\n \r\n Pricelists \r\n Microsoft 365 CSP Pricelist \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"ADMINORDERS\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n : null\r\n } \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n } \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(OrdersPage)","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport { apiGet, apiPost } from \"utils/webRequestUtils.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n };\r\n\r\nconst requiredPortalPermissions =\r\n[\r\n \"UNIVERSALGENERATEPRICELIST\"\r\n]\r\n\r\nclass ApproveOrder extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n approvingOrder: false,\r\n removingOrder: false,\r\n orderToRemove: null,\r\n orderToApprove: null,\r\n approveOrderDialogOpen: false,\r\n removeOrderDialogOpen: false,\r\n // Toast\r\n toastOpen: false,\r\n toastColor: \"success\",\r\n toastText: \"\",\r\n orders: []\r\n }\r\n }\r\n\r\n componentDidMount()\r\n {\r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.setState(\r\n {\r\n isLoaded: true\r\n });\r\n }\r\n\r\n // TODO: Check if this method is reusable in other classes.\r\n showNotification = (toastColor, toastText) => {\r\n this.setState(\r\n {\r\n toastOpen: true,\r\n toastColor: toastColor,\r\n toastText: toastText\r\n });\r\n\r\n this.alertTimeout = setTimeout(\r\n function () {\r\n this.setState(\r\n {\r\n toastOpen: false\r\n });\r\n }.bind(this),\r\n 3000\r\n );\r\n }\r\n\r\n generateList() {\r\n this.setState({ generatingList: true });\r\n\r\n // Approve Order\r\n apiGet(\"pc/products/generate\").then(() => {\r\n this.setState(\r\n {\r\n generatingList: false\r\n });\r\n\r\n this.showNotification(\"success\", \"List has been generated\");\r\n },\r\n (error) => {\r\n this.setState(\r\n {\r\n //TODO: User friendly error. \r\n generatingList: false\r\n });\r\n\r\n this.showNotification(\"danger\", error.data);\r\n });\r\n } \r\n\r\n render() \r\n {\r\n const { error, isLoaded, toastColor, toastText, toastOpen, generatingList: generatingList } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n\r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n \r\n \r\n \r\n \r\n Generate price list \r\n \r\n Click the button below to generate a new price list. \r\n
\r\n \r\n \r\n \r\n this.generateList()} color=\"secondary\">\r\n {generatingList ? \"Generating list...\" : \"Generate\"} \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Disapprove order confirmation dialog */}\r\n this.toggleRemoveOrderDialogOpen(removeOrderDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to disapprove this order?\"} \r\n \r\n \r\n This step will be irreversible.\r\n \r\n \r\n \r\n this.toggleRemoveOrderDialogOpen(removeOrderDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeOrder()} color=\"danger\">\r\n {removingOrder ? \"Disapproving order...\" : \"Disapprove order\"} \r\n \r\n \r\n \r\n\r\n {/* Approve order confirmation dialog */}\r\n this.toggleApproveOrderDialogOpen(approveOrderDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to approve this order?\"} \r\n \r\n \r\n This step will be irreversible.\r\n \r\n \r\n \r\n this.toggleApproveOrderDialogOpen(approveOrderDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.approveOrder()} color=\"secondary\">\r\n {approvingOrder ? \"Approving order...\" : \"Approve order\"} \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Pending Orders \r\n \r\n All pending orders (to be approved by an Universal employee). \r\n
\r\n \r\n \r\n \r\n { this.setState({ orderToApprove: clickedItem }); this.toggleApproveOrderDialogOpen(approveOrderDialogOpen); }\r\n : null\r\n }\r\n onDisapproveButtonClicked=\r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UNIVERSALAPPROVEORDERS\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (clickedItem) => { this.setState({ orderToRemove: clickedItem }); this.toggleRemoveOrderDialogOpen(removeOrderDialogOpen); }\r\n : null\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n tableHead.map((prop, index) => \r\n {\r\n var dataColumnName = tableHeadDataMap[index];\r\n\r\n // Check if tableHeaders should be sorted and return sortable tableHeaders.\r\n // If tableHeaders shouldn't be sorted or if they should be ignored, return normal tableHeaders.\r\n if (isSortable && (tableIgnoreSortColumns ? !tableIgnoreSortColumns.includes(prop) : true))\r\n {\r\n return (\r\n \r\n \r\n {prop}\r\n \r\n \r\n );\r\n }\r\n else\r\n {\r\n return (\r\n \r\n {prop}\r\n \r\n );\r\n }\r\n })\r\n }\r\n \r\n \r\n )\r\n }\r\n\r\n /**\r\n * Updates sortingOrder and orderBy variables \r\n * @param {*} event clickEvent\r\n * @param {*} orderByProperty property the data should be sorted by.\r\n */\r\n function handleRequestSort(event, orderByProperty) \r\n {\r\n // If same property is clicked, sort data descending. Otherwise sort data ascending.\r\n const sortDescending = orderBy === orderByProperty && sortingOrder === 'asc';\r\n\r\n // Set sorting direction and orderBy property\r\n setSortingOrder(sortDescending ? \"desc\" : \"asc\");\r\n setOrderBy(orderByProperty);\r\n }\r\n\r\n /**\r\n * Compares the provided obj1 and obj2 in an ascending order\r\n * @param {*} obj1 Object 1 to compare\r\n * @param {*} obj2 Object 2 to compare\r\n * @param {*} orderBy Property to compare between the two objects.\r\n */\r\n function compareDataAscending(obj1, obj2, orderBy) \r\n {\r\n var valueToCompare1 = \"\";\r\n var valueToCompare2 = \"\";\r\n\r\n // Check if data should be sorted on child of a property (only goes one layer deep).\r\n if (orderBy.includes('.'))\r\n {\r\n var orderBySplit = orderBy.split('.');\r\n\r\n valueToCompare1 = obj1[orderBySplit[0]][orderBySplit[1]];\r\n valueToCompare2 = obj2[orderBySplit[0]][orderBySplit[1]];\r\n }\r\n else\r\n {\r\n valueToCompare1 = obj1[orderBy];\r\n valueToCompare2 = obj2[orderBy];\r\n }\r\n\r\n // Check if value is a number, date or text and handle comparisons\r\n if (tableNumericColumns && tableNumericColumns.includes(orderBy))\r\n { \r\n if (valueToCompare2 - valueToCompare1 > 0) \r\n {\r\n return -1;\r\n }\r\n if (valueToCompare2 - valueToCompare1 < 0) \r\n {\r\n return 1;\r\n }\r\n }\r\n else if (tableDateColumns && tableDateColumns.includes(orderBy))\r\n {\r\n // Assumes date is in DAY-MONTH-YEAR HOUR:MINUTE format.\r\n var splitDateTime1 = valueToCompare1.split(' ');\r\n var splitDateTime2 = valueToCompare2.split(' ');\r\n\r\n var date1 = splitDateTime1[0].split('-');\r\n var date2 = splitDateTime2[0].split('-');\r\n\r\n // If date contained time, add time to new date object\r\n if (splitDateTime1[1] && splitDateTime2[1])\r\n {\r\n var time1 = splitDateTime1[1].split(':');\r\n var time2 = splitDateTime2[1].split(':');\r\n \r\n valueToCompare1 = new Date(date1[2], date1[1], date1[0], time1[0], time1[1]);\r\n valueToCompare2 = new Date(date2[2], date2[1], date2[0], time2[0], time2[1]);\r\n }\r\n else\r\n {\r\n valueToCompare1 = new Date(date1[2], date1[1], date1[0]);\r\n valueToCompare2 = new Date(date2[2], date2[1], date2[0]);\r\n }\r\n\r\n if (valueToCompare2 > valueToCompare1) \r\n {\r\n return -1;\r\n }\r\n if (valueToCompare2 < valueToCompare1) \r\n {\r\n return 1;\r\n }\r\n }\r\n else\r\n {\r\n valueToCompare1 = valueToCompare1.toString();\r\n valueToCompare2 = valueToCompare2.toString();\r\n \r\n if (valueToCompare2.toLowerCase() > valueToCompare1.toLowerCase()) \r\n {\r\n return -1;\r\n }\r\n if (valueToCompare2.toLowerCase() < valueToCompare1.toLowerCase()) \r\n {\r\n return 1;\r\n }\r\n }\r\n\r\n return 0;\r\n }\r\n\r\n /**\r\n * Sort provided data by the provided property\r\n * @param {*} data Data to sort\r\n * @param {*} orderBy Property to sort data by\r\n */\r\n function sortTableByProperty(data, orderBy) \r\n {\r\n if (!orderBy)\r\n {\r\n return data;\r\n }\r\n\r\n var sortedData = data.sort((obj1, obj2) =>\r\n {\r\n if (sortingOrder === \"asc\")\r\n {\r\n return compareDataAscending(obj1, obj2, orderBy);\r\n }\r\n else\r\n {\r\n return -compareDataAscending(obj1, obj2, orderBy);\r\n }\r\n });\r\n\r\n return sortedData;\r\n }\r\n\r\n /**\r\n * Custom TableRow component which is able to perform an action on click\r\n */\r\n const RouterTableRow = withRouter(({rowKey, hoverStyle, listItem, history }) => (\r\n \r\n\r\n {\r\n createPropertyArrayFromJsonObject(listItem, tableHeadDataMap).map((property, index) =>\r\n { \r\n // If current item index is equal to the amountEditFieldIndex,\r\n // and if current item is selected.\r\n // Show an editable numeric field\r\n if (amountEditFieldIndex && amountEditFieldIndex === index)\r\n {\r\n var inputProps = \r\n {\r\n title: \"Only numbers allowed\",\r\n placeholder: \"0\",\r\n defaultValue: listItem[\"Amount\"] ? listItem[\"Amount\"] : \"\",\r\n type: \"number\"\r\n }\r\n\r\n if (minimumAmountColumnName)\r\n {\r\n inputProps[\"title\"] += \" (min: \" + listItem[minimumAmountColumnName] + \")\";\r\n inputProps[\"min\"] = listItem[minimumAmountColumnName];\r\n }\r\n if (maximumAmountColumnName)\r\n {\r\n inputProps[\"title\"] += \" (max: \" + listItem[maximumAmountColumnName] + \")\";\r\n inputProps[\"max\"] = listItem[maximumAmountColumnName];\r\n }\r\n\r\n return (\r\n \r\n {\r\n localSelectedItems.includes(listItem)\r\n ?\r\n \r\n { listItem[\"Amount\"] = value }\r\n }\r\n\r\n inputProps={ inputProps } \r\n />\r\n \r\n { listItem[amountUnitColumnName] }\r\n \r\n
\r\n : null\r\n } \r\n \r\n ); \r\n } \r\n\r\n // Else return a default TableCell column\r\n else\r\n { \r\n return (\r\n \r\n {\r\n // Somehow the TableRow doesn't update without setting this variable... \r\n setTempToggle(!tempToggle);\r\n \r\n // Check if TableRow is clickable\r\n if (!isClickable)\r\n {\r\n return;\r\n }\r\n \r\n // Check if a click event should be sent back to the place where this control is defined.\r\n if (onListItemClicked)\r\n onListItemClicked(listItem)\r\n \r\n // Check if an onClickLink has been passed to this control.\r\n if (onClickLink)\r\n {\r\n // Get single parameter from url.\r\n var matches = onClickLink.match(/\\{([^)]+)\\}/)\r\n \r\n var newLink = onClickLink;\r\n \r\n // If any parameter enclosed by { } was found,\r\n // try to fetch a listItemValue using the parameter\r\n // and replace the parameter by the found listItemValue.\r\n // e.g: /cases/ticket?no={ticketnumber} -> /cases/ticket?no=TIC-12345-67890\r\n if (matches)\r\n {\r\n var parameter = matches[1];\r\n var listItemValue = listItem[parameter];\r\n \r\n newLink = newLink.replace(matches[0], listItemValue);\r\n }\r\n \r\n history.push(newLink); \r\n }\r\n \r\n // Check if rows should be selected\r\n else if (selectableRows && selectedItems)\r\n {\r\n if (selectedItems.includes(listItem))\r\n {\r\n var itemIndex = selectedItems.indexOf(listItem);\r\n selectedItems.splice(itemIndex, 1);\r\n \r\n setLocalSelectedItems(selectedItems);\r\n }\r\n else\r\n {\r\n selectedItems.push(listItem);\r\n setLocalSelectedItems(selectedItems);\r\n }\r\n }\r\n }}>\r\n { \r\n // If current item index is equal to the infoFieldIndex,\r\n // Show info field as a link.\r\n (infoFieldIndex === index) \r\n ? handleClickOpen(property)}>{infoFieldLinkText} \r\n : property.toString()\r\n }\r\n \r\n );\r\n } \r\n })\r\n }\r\n\r\n {\r\n // Show delete button if onDeleteButtonClicked is not null\r\n onDeleteButtonClicked || onEditButtonClicked\r\n ?\r\n \r\n {\r\n onEditButtonClicked ? onEditButtonClicked(listItem)}/> : null\r\n }\r\n {\r\n onDeleteButtonClicked ? onDeleteButtonClicked(listItem)}/> : null\r\n } \r\n \r\n :\r\n null\r\n }\r\n\r\n \r\n ))\r\n\r\n return (\r\n // TODO: Maybe create global modal.\r\n \r\n
\r\n \r\n {infoModalTitle} \r\n \r\n \r\n {modalDescription} \r\n \r\n \r\n \r\n \r\n Close\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n {\r\n tableHead !== undefined ?\r\n \r\n {\r\n sortTableByProperty(tableData, orderBy).map((listItem, rowKey) =>\r\n { \r\n var hoverStyle =\r\n {\r\n cursor: \"pointer\"\r\n }\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n Account Name
\r\n \r\n \r\n {globalData.loggedInUser.Organization.Name}
\r\n \r\n \r\n
\r\n \r\n Tenant
\r\n \r\n \r\n {tenant}
\r\n \r\n \r\n
\r\n \r\n Created By
\r\n \r\n \r\n {globalData.loggedInUser.FullName}
\r\n \r\n \r\n
\r\n \r\n Products
\r\n \r\n {\r\n products.map((product, index) => \r\n {\r\n return {product.Amount} x {product[productNameFieldKey]} \r\n })\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n Microsoft Customer Agreement
\r\n onAgreementAccept(value) } color=\"primary\" required={true} />\r\n }\r\n label={(I confirm that I have read, understand and agree to the Microsoft Customer Agreement )}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n { onSelectTenant(value) }\r\n }\r\n />\r\n \r\n \r\n
\r\n ); \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(NewOrderTenantSelect)","import React from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport Stepper from '@material-ui/core/Stepper';\r\nimport Step from '@material-ui/core/Step';\r\nimport StepLabel from '@material-ui/core/StepLabel';\r\nimport ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';\r\nimport ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';\r\nimport DoneIcon from '@material-ui/icons/Done';\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport ProductPicker from \"components/Table/TableJsonProductPicker.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\n\r\nimport NewOrderConfirmationTab from \"views/Orders/NewOrder/NewOrderConfirmation.jsx\";\r\nimport NewOrderTenantSelectTab from \"views/Orders/NewOrder/NewOrderTenantSelect.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet, apiPostJson } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n };\r\n\r\nconst invisibleStyle = {\r\n display: \"none\"\r\n}\r\n\r\nconst previousTabButtonStyle = {\r\n float: \"left\",\r\n backgroundColor: \"#229988\"\r\n}\r\n\r\nconst nextTabButtonStyle = {\r\n float: \"right\",\r\n backgroundColor: \"#229988\"\r\n}\r\n\r\nconst previousTabButtonStyleFixed = {\r\n //position: \"absolute\",\r\n float: \"left\"\r\n}\r\n\r\nconst nextTabButtonStyleFixed = {\r\n //position: \"absolute\",\r\n float: \"right\"\r\n}\r\n\r\nconst allowedPortalPermissions =\r\n[\r\n \"ADMINORDERS\"\r\n]\r\n\r\nclass NewOrderPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n offersAreLoaded: false,\r\n tenantIdsAreLoaded: false,\r\n offers: [],\r\n tenants: [], \r\n data: [],\r\n searchText: \"\",\r\n\r\n // Toast\r\n toastOpen: false,\r\n toastColor: \"success\",\r\n toastText: \"\",\r\n\r\n selectedTenantName: \"\",\r\n selectedTenantId: \"\",\r\n selectedOffers: [],\r\n previousSelectedTenantId: \"\",\r\n\r\n agreementAccepted: false,\r\n\r\n activeStepIndex: 0,\r\n\r\n previousButtonStyle: invisibleStyle,\r\n previousButtonText: \"\",\r\n nextButtonText: \"Select Products\",\r\n\r\n creatingOrder: false,\r\n orderCreated: false\r\n }\r\n }\r\n\r\n componentDidMount()\r\n {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n offersAreLoaded: true,\r\n tenantIdsAreLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Get tenants\r\n apiGet(\"tenantids\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n tenantIdsAreLoaded:true,\r\n tenants: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n tenantIdsAreLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n getOffers = (selectedTenant) => \r\n {\r\n apiGet(\"pc/products/\" + selectedTenant).then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n offersAreLoaded: true,\r\n offers: result.data,\r\n data: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n offersAreLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n // TODO: Check if this method is reusable in other classes.\r\n showNotification = (toastColor, toastText) =>\r\n {\r\n this.setState(\r\n {\r\n toastOpen: true,\r\n toastColor: toastColor,\r\n toastText: toastText\r\n });\r\n\r\n this.alertTimeout = setTimeout(\r\n function() \r\n {\r\n this.setState(\r\n {\r\n toastOpen: false\r\n });\r\n }.bind(this),\r\n 3000\r\n );\r\n }\r\n\r\n previousStepClicked = () =>\r\n {\r\n const { activeStepIndex } = this.state;\r\n\r\n var newStepIndex = activeStepIndex === 0 ? 0 : activeStepIndex - 1;\r\n \r\n this.setPreviousAndNextButtonVariables(newStepIndex);\r\n \r\n document.getElementById(\"mainpanel\").scrollTop = 0; // Get pagecontainer by id and scroll to top of it.\r\n \r\n this.setState({ activeStepIndex: newStepIndex });\r\n\r\n }\r\n\r\n validateFormAndGoToNextStep = () =>\r\n {\r\n const { selectedTenantId, previousSelectedTenantId, selectedOffers, activeStepIndex } = this.state;\r\n\r\n // If current active tab is select-tenant, try fetching orders if tenant changed.\r\n if (activeStepIndex === 0 && previousSelectedTenantId !== selectedTenantId)\r\n {\r\n this.setState({ previousSelectedTenantId: selectedTenantId, offersAreLoaded: false, selectedOffers: [] });\r\n this.getOffers(selectedTenantId);\r\n }\r\n\r\n // If current active tab is select-orders, check if any orders have been filled in.\r\n else if (activeStepIndex === 1 && selectedOffers.length < 1)\r\n { \r\n this.showNotification(\"warning\", \"Please, select an offer to continue.\");\r\n return false;\r\n }\r\n\r\n else if (selectedOffers.length > 0 && activeStepIndex === 1) {\r\n for(var i = 0; i < selectedOffers.length; i++) { \r\n if (selectedOffers[i].Amount == 0)\r\n {\r\n this.showNotification(\"warning\", \"Please, select a correct amount for the chosen offers to continue.\");\r\n return false;\r\n }\r\n }\r\n }\r\n\r\n else if (activeStepIndex === 2)\r\n {\r\n this.confirmOrder();\r\n return true;\r\n }\r\n\r\n this.nextStepClicked();\r\n return true;\r\n }\r\n\r\n nextStepClicked = () =>\r\n {\r\n const { activeStepIndex } = this.state;\r\n\r\n var newStepIndex = activeStepIndex === 2 ? 2 : activeStepIndex + 1;\r\n\r\n this.setPreviousAndNextButtonVariables(newStepIndex);\r\n\r\n document.getElementById(\"mainpanel\").scrollTop = 0; // Get pagecontainer by id and scroll to top of it.\r\n\r\n this.setState({ activeStepIndex: newStepIndex });\r\n\r\n }\r\n\r\n setPreviousAndNextButtonVariables = (stepIndex) =>\r\n { \r\n if (stepIndex === 0)\r\n {\r\n this.setState(\r\n { \r\n previousButtonStyle : invisibleStyle,\r\n previousButtonText: \"\",\r\n nextButtonText: \"Select Products\"\r\n });\r\n }\r\n else if (stepIndex === 1)\r\n {\r\n this.setState(\r\n { \r\n previousButtonStyle : previousTabButtonStyle,\r\n previousButtonText: \"Select Tenant\",\r\n nextButtonText: \"Confirm Order\"\r\n });\r\n }\r\n else if (stepIndex === 2)\r\n {\r\n this.setState(\r\n { \r\n previousButtonStyle : previousTabButtonStyle,\r\n previousButtonText: \"Select Products\",\r\n nextButtonText: \"Confirm\"\r\n });\r\n }\r\n }\r\n\r\n setNewSelectedTenantValues = (tenantId) =>\r\n {\r\n const { tenants } = this.state;\r\n\r\n // Get tenantName by id and set states\r\n var tenantName;\r\n\r\n for (var i = 0; i < tenants.length; i++)\r\n {\r\n if (tenants[i].ID === tenantId)\r\n {\r\n tenantName = tenants[i].TenantName;\r\n break;\r\n }\r\n }\r\n\r\n this.setState({selectedTenantName: tenantName, selectedTenantId: tenantId})\r\n }\r\n\r\n confirmOrder = () =>\r\n {\r\n this.setState({creatingOrder: true})\r\n \r\n // TODO: authentication\r\n const { selectedTenantId, selectedOffers } = this.state;\r\n \r\n // Create request body\r\n var requestBody = \r\n {\r\n TenantId: selectedTenantId,\r\n Products: selectedOffers\r\n }\r\n\r\n // Create order\r\n apiPostJson(\"orders/new\", requestBody).then(() => \r\n {\r\n this.setState(\r\n {\r\n orderCreated: true\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n //TODO: User friendly error.\r\n creatingOrder: false\r\n });\r\n\r\n this.showNotification(\"danger\", error.data);\r\n });\r\n \r\n }\r\n\r\n setSearch = (searchTerm) => {\r\n const { offers, searchText, data } = this.state; \r\n const search = offers.filter(\r\n item =>\r\n item.Name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1,\r\n );\r\n if (searchTerm == \"\") {\r\n this.setState( { data: offers, searchText: searchTerm });\r\n }\r\n else { \r\n this.setState( { data: search, searchText: searchTerm }); \r\n } \r\n }\r\n\r\n render() \r\n {\r\n const { error, offersAreLoaded, tenantIdsAreLoaded,\r\n toastColor, toastText, toastOpen, data, searchText,\r\n offers, tenants, selectedOffers, selectedTenantName, selectedTenantId, agreementAccepted, activeStepIndex, previousButtonStyle, previousButtonText, nextButtonText, creatingOrder, orderCreated } = this.state;\r\n const { classes } = this.props;\r\n \r\n const handleSearch = (event) => {\r\n if (offersAreLoaded)\r\n { \r\n this.setSearch(event);\r\n }\r\n };\r\n\r\n if (error)\r\n {\r\n // TODO: Error logging\r\n return \r\n\r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Content */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Content */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Order History \r\n \r\n Order history of my organization. \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n } \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(OrderHistoryPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// @material-ui/icons\r\nimport CodeIcon from \"@material-ui/icons/Code\";\r\n\r\n// core components\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardIcon from \"components/Card/CardIcon.jsx\";\r\nimport CardFooter from \"components/Card/CardFooter.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\nimport dashboardStyle from \"assets/jss/material-dashboard-react/views/dashboardStyle.jsx\";\r\n\r\nclass PortalSettingsGraphApiWidget extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Graph API Settings
\r\n \r\n \r\n \r\n Go to Graph API settings\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\nexport default withStyles(dashboardStyle)(PortalSettingsGraphApiWidget);","import React from \"react\";\r\n\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\nimport GraphAPIWidget from \"views/Dashboard/PortalWidgets/PortalSettingsGraphApiWidget.jsx\";\r\n\r\nimport Divider from '@material-ui/core/Divider';\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nimport dashboardStyle from \"assets/jss/material-dashboard-react/views/dashboardStyle.jsx\";\r\n\r\nconst requiredPermissions = [\r\n \"UCP.SETTINGS.ACCESS\"\r\n ]\r\n \r\n const allowedGraphApiPermissions = [ \r\n \"UCP.SETTINGS.GRAPHAPI.EDIT\"\r\n ]\r\n\r\nclass SettingsOverview extends React.Component {\r\n\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n // Component loading\r\n error: null\r\n }\r\n }\r\n\r\n componentDidMount()\r\n { \r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const { error } = this.state;\r\n\r\n if (error)\r\n {\r\n // TODO: Error logging\r\n return \r\n
Settings \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions(allowedGraphApiPermissions, globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (\r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nSettingsOverview.propTypes = {\r\n classes: PropTypes.object.isRequired\r\n};\r\n\r\nexport default withStyles(dashboardStyle)(SettingsOverview);\r\n","import React from \"react\";\r\n\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n\r\n// core components\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\n\r\nimport Divider from '@material-ui/core/Divider';\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet, apiPost, apiPostJson } from \"utils/webRequestUtils.jsx\";\r\n\r\nimport Cookies from \"js-cookie\";\r\n\r\nimport dashboardStyle from \"assets/jss/material-dashboard-react/views/dashboardStyle.jsx\";\r\n\r\nconst requiredPortalPermissions = [\r\n \"UCP.SETTINGS.ACCESS\",\r\n \"UCP.SETTINGS.GRAPHAPI.EDIT\"\r\n]\r\n\r\nclass SettingsGraphApi extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state =\r\n {\r\n // Component loading\r\n error: null,\r\n checkingGraphApiConnection: true,\r\n\r\n // Toast\r\n toastOpen: false,\r\n toastColor: \"success\",\r\n toastText: \"\",\r\n\r\n // Graph\r\n connectedToGraph: false,\r\n connectedUserFullName: \"\",\r\n connectedUserEmail: \"\"\r\n }\r\n }\r\n\r\n // TODO: Check if this method is reusable in other classes.\r\n showNotification = (toastColor, toastText) => {\r\n this.setState(\r\n {\r\n toastOpen: true,\r\n toastColor: toastColor,\r\n toastText: toastText\r\n });\r\n\r\n this.alertTimeout = setTimeout(\r\n function () {\r\n this.setState(\r\n {\r\n toastOpen: false\r\n });\r\n }.bind(this),\r\n 3000\r\n );\r\n }\r\n\r\n componentDidMount() {\r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions)) {\r\n this.setState(\r\n {\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n \r\n // Check if 'code' parameter was provided in url. If it is, fetch new refresh token and access token.\r\n var url = new URL(window.location.href);\r\n var code = url.searchParams.get(\"code\");\r\n\r\n if (code) {\r\n this.getGraphApiTokenByAuthorizationCode(code);\r\n return;\r\n }\r\n\r\n // If no code parameter was provided, check if a token cookie exists. If no token cookie exists, try to fetch token from UCP API.\r\n // If a token cookie exists, try to fetch connected graph user info.\r\n var graphToken = Cookies.get(\"auth-graph\");\r\n\r\n if (graphToken)\r\n {\r\n this.getGraphApiConnectedUserInfo();\r\n }\r\n else\r\n {\r\n this.getNewGraphApiToken();\r\n }\r\n }\r\n\r\n redirectUserToGraphAPIAuthorization = () => {\r\n window.location.replace(\"https://login.microsoftonline.com/common/oauth2/v2.0/authorize?\"\r\n + \"client_id=8db7dd71-98a1-4a9e-83f8-c1f90a74f44e\"\r\n + \"&response_type=code\"\r\n //+ \"&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2Fsettings%2Fgraph-api\"\r\n + \"&redirect_uri=https%3A%2F%2Fportal.universal.cloud%2Fsettings%2Fgraph-api\"\r\n + \"&response_mode=query\"\r\n + \"&scope=user.read user.read.all group.read.all\");\r\n //TODO: Add state parameter.\r\n }\r\n\r\n /**\r\n * Fetch access and refresh token by authorization code\r\n */\r\n getGraphApiTokenByAuthorizationCode = (code) => \r\n { \r\n apiPostJson(\"graph-api/auth\", code).then((result) => \r\n {\r\n Cookies.set(\"auth-graph\", result.data, { expires: 1 / 24, secure: true, sameSite: \"lax\" }); // TODO: Add Secure, http only & SameSite flags. Write documentation about why these flags are added.\r\n this.getGraphApiConnectedUserInfo(result.data);\r\n },\r\n (error) => \r\n {\r\n this.setState({\r\n checkingGraphApiConnection: false\r\n })\r\n\r\n this.showNotification(\"danger\", \"Could not fetch token: \" + error.data);\r\n });\r\n }\r\n\r\n logoutFromGraphAPI = () =>\r\n {\r\n var graphToken = Cookies.get(\"auth-graph\");\r\n \r\n apiPostJson(\"graph-api/auth/logout\", graphToken).then((result) => \r\n {\r\n Cookies.remove(\"auth-graph\");\r\n\r\n this.setState({ \r\n checkingGraphApiConnection: false,\r\n connectedToGraph: false,\r\n connectedUserEmail: \"\",\r\n connectedUserFullName: \"\"\r\n })\r\n },\r\n (error) => {\r\n this.setState({\r\n checkingGraphApiConnection: false\r\n })\r\n });\r\n }\r\n\r\n /**\r\n * Try to fetch Graph API access token from cookie or API, and fetch graph API user info.\r\n */\r\n getGraphApiConnectedUserInfo = (token) => \r\n {\r\n var graphToken = token;\r\n\r\n if (!graphToken)\r\n {\r\n graphToken = Cookies.get(\"auth-graph\");\r\n }\r\n\r\n fetch(\"https://graph.microsoft.com/v1.0/me/\",\r\n {\r\n method: \"GET\",\r\n headers:\r\n {\r\n \"Authorization\": \"Bearer \" + graphToken\r\n }\r\n })\r\n .then((response) => \r\n {\r\n response.json().then((result) => \r\n {\r\n // If no token was provided intitially and the request failed, try to fetch one from the UCP API.\r\n if (!token && response.status !== 200)\r\n {\r\n this.getNewGraphApiToken();\r\n return;\r\n }\r\n\r\n // If a token was provided and the request failed, no valid tokens can be fetched. User needs to reconnect to Graph.\r\n else if (response.status !== 200)\r\n {\r\n throw new Error(result.error_description);\r\n }\r\n\r\n // If request as succesful, show data.\r\n this.setState({\r\n checkingGraphApiConnection: false,\r\n connectedToGraph: true,\r\n connectedUserEmail: result.mail,\r\n connectedUserFullName: result.displayName\r\n })\r\n })\r\n .catch((error) => \r\n {\r\n console.log(error);\r\n\r\n this.setState({\r\n checkingGraphApiConnection: false\r\n })\r\n });\r\n })\r\n }\r\n\r\n /**\r\n * Try to fetch Graph API access token from UCP API.\r\n */\r\n getNewGraphApiToken = () =>\r\n {\r\n apiGet(\"graph-api/auth\").then((result) => \r\n {\r\n Cookies.set(\"auth-graph\", result.data, { expires: 1 / 24, secure: true, sameSite: \"lax\" }); // TODO: Add Secure, http only & SameSite flags. Write documentation about why these flags are added.\r\n this.getGraphApiConnectedUserInfo(result.data);\r\n },\r\n (error) => {\r\n this.setState({\r\n checkingGraphApiConnection: false\r\n })\r\n });\r\n }\r\n\r\n render() {\r\n const { classes } = this.props;\r\n const { error, checkingGraphApiConnection,\r\n toastColor, toastText, toastOpen,\r\n connectedToGraph, connectedUserEmail, connectedUserFullName } = this.state;\r\n\r\n if (error) {\r\n // TODO: Error logging\r\n return \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* What is the Graph API? \r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. (What is graph api, need admin consent, will only access ... data).
\r\n */}\r\n {\r\n checkingGraphApiConnection\r\n ?\r\n \r\n
\r\n { \r\n connectedToGraph \r\n ? \"Connected to Graph API (\" + connectedUserFullName +\", \" + connectedUserEmail + \")!\" \r\n : \"Not connected to Graph API.\"\r\n }\r\n \r\n {\r\n !connectedToGraph\r\n ? this.redirectUserToGraphAPIAuthorization()} color={connectedToGraph ? \"success\" : \"secondary\"}> {connectedToGraph ? \"Connected!\" : \"Connect to Graph API\"} \r\n : this.logoutFromGraphAPI()} color={!connectedToGraph ? \"success\" : \"danger\"}> {!connectedToGraph ? \"Disconnected!\" : \"Disconnect from Graph API\"} \r\n }\r\n \r\n )\r\n }\r\n \r\n \r\n
Dashboard \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions(allowedUCallManagerQueuesPermissions, globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (\r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n\r\n {\r\n PMUtils.userHasAnyRequiredPermissions(allowedUCallManagerAgentsPermissions, globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (\r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n\r\n { \r\n PMUtils.userHasAnyRequiredPermissions(allowedUCallManagerHolidaysPermissions, globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (\r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n \r\n \r\n ) \r\n }\r\n}\r\n\r\nexport default withStyles(dashboardStyle)(UCallManagerPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport QueuesIcon from \"@material-ui/icons/ViewHeadline\";\r\n\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\n// Extra libs\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n textCursive:{\r\n fontStyle: \"italic\"\r\n }\r\n};\r\n\r\nconst requiredPortalPermissions = [\r\n \"UCALLMANAGER.ACCESS\"\r\n]\r\n\r\nconst allowedPortalPermissions = [ \r\n \"UCALLMANAGER.QUEUES.VIEW\",\r\n \"UCALLMANAGER.QUEUES.EDIT\"\r\n]\r\n\r\nclass QueuesPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n // Component loading\r\n error: null,\r\n isLoaded: false, \r\n \r\n // Data\r\n queues: []\r\n }\r\n }\r\n\r\n componentDidMount()\r\n { \r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions) || !PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n // Get queues\r\n this.getQueues();\r\n }\r\n\r\n getQueues()\r\n {\r\n apiGet(\"ucm/queues\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n queues: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n render() \r\n {\r\n const { error, isLoaded, queues } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n Call Queues \r\n Overview of call queues.
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Click queue to view or edit.
\r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.QUEUES.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n \r\n \r\n \r\n \r\n \r\n : null\r\n } \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n ); \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(QueuesPage)","// Extra libs\r\nimport Cookies from \"js-cookie\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\n\r\nconst Graph_Api_Base_Url = \"https://graph.microsoft.com/v1.0/\";\r\nconst Graph_Api_Base_Url_Beta = \"https://graph.microsoft.com/beta/\";\r\n\r\n/**\r\n * Executes GraphAPI GET call to provided api path.\r\n * @param {string} apiPath Endpoint to call (without backslash prefix).\r\n * @param {boolean} useBeta Should this call use the beta endpoint of the GraphAPI?.\r\n * @param {boolean} isRetry Indicates if this call is a retry attempt because of a previous call failing.\r\n * @throws Throws Error object containing errorMessage if the web request failed.\r\n * @returns Returns promise containing web request result.\r\n */\r\nexport function graphApiGet(apiPath, useBeta = false, isRetry = false)\r\n{\r\n var baseUrl = useBeta ? Graph_Api_Base_Url_Beta : Graph_Api_Base_Url;\r\n\r\n // Get authentication token.\r\n var token = document.cookie.replace(/(?:(?:^|.*;\\s*)auth-graph\\s*\\=\\s*([^;]*).*$)|^.*$/, \"$1\")\r\n \r\n return fetch(baseUrl + apiPath,\r\n {\r\n headers:\r\n {\r\n \"Authorization\": \"Bearer \" + token\r\n }\r\n })\r\n .then((response) => response.json().then(body => ({ status: response.status, data: body })))\r\n .then((result) =>\r\n {\r\n // If unauthorized is returned, try to fetch new token from UCP API and retry to call the GraphAPI.\r\n if (result.status === 401 && !isRetry)\r\n {\r\n return getNewGraphApiToken().then(() =>\r\n {\r\n return graphApiGet(apiPath, useBeta, true);\r\n });\r\n }\r\n else if (result.status !== 200)\r\n {\r\n throw result;\r\n }\r\n else\r\n {\r\n return result; \r\n } \r\n });\r\n}\r\n\r\n/**\r\n * Executes GraphAPI POST call to provided api path.\r\n * @param {string} apiPath Endpoint to call (without backslash prefix). \r\n * @param {boolean} useBeta Should this call use the beta endpoint of the GraphAPI?.\r\n * @param {boolean} isRetry Indicates if this call is a retry attempt because of a previous call failing.\r\n * @throws Throws Error object containing errorMessage if the web request failed.\r\n * @returns Returns promise containing web request result.\r\n */\r\nexport function graphApiPost(apiPath, useBeta = false, isRetry = false)\r\n{\r\n var baseUrl = useBeta ? Graph_Api_Base_Url_Beta : Graph_Api_Base_Url;\r\n\r\n // Get authentication token.\r\n var token = document.cookie.replace(/(?:(?:^|.*;\\s*)auth-graph\\s*\\=\\s*([^;]*).*$)|^.*$/, \"$1\")\r\n\r\n return fetch(baseUrl + apiPath,\r\n {\r\n method: \"POST\",\r\n headers:\r\n {\r\n \"Authorization\": \"Bearer \" + token\r\n }\r\n })\r\n .then((response) => response.json().then(body => ({ status: response.status, data: body })))\r\n .then((result) =>\r\n {\r\n // If unauthorized is returned, try to fetch new token from UCP API and retry to call the GraphAPI.\r\n if (result.status === 401 && !isRetry)\r\n {\r\n return getNewGraphApiToken().then(() =>\r\n {\r\n return graphApiGet(apiPath, useBeta, true);\r\n });\r\n }\r\n else if (result.status !== 200)\r\n {\r\n throw result;\r\n }\r\n\r\n return result; \r\n });\r\n}\r\n\r\n/**\r\n * Executes GraphAPI POST call to provided api path.\r\n * @param {string} apiPath Endpoint to call (e.g. /cases OR /users/me). \r\n * @param {object} jsonBody Json object to pass a the request body (don't stringify the object).\r\n * @param {boolean} useBeta Should this call use the beta endpoint of the GraphAPI?.\r\n * @param {boolean} isRetry Indicates if this call is a retry attempt because of a previous call failing.\r\n * @throws Throws Error object containing errorMessage if the web request failed.\r\n * @returns Returns promise containing web request result.\r\n */\r\nexport function graphPostJson(apiPath, jsonBody, useBeta = false, isRetry = false)\r\n{\r\n var baseUrl = useBeta ? Graph_Api_Base_Url_Beta : Graph_Api_Base_Url;\r\n\r\n // Get authentication token.\r\n var token = document.cookie.replace(/(?:(?:^|.*;\\s*)auth-graph\\s*\\=\\s*([^;]*).*$)|^.*$/, \"$1\")\r\n\r\n return fetch(baseUrl + apiPath,\r\n {\r\n method: \"POST\",\r\n headers:\r\n {\r\n \"Authorization\": \"Bearer \" + token,\r\n \"Content-Type\": \"application/json\"\r\n },\r\n body: JSON.stringify(jsonBody)\r\n })\r\n .then((response) => response.json().then(body => ({ status: response.status, data: body })))\r\n .then((result) =>\r\n {\r\n // If unauthorized is returned, try to fetch new token from UCP API and retry to call the GraphAPI.\r\n if (result.status === 401 && !isRetry)\r\n {\r\n return getNewGraphApiToken().then(() =>\r\n {\r\n return graphApiGet(apiPath, useBeta, true);\r\n });\r\n }\r\n else if (result.status !== 200)\r\n {\r\n throw result;\r\n }\r\n\r\n return result; \r\n });\r\n}\r\n\r\n/**\r\n* Try to fetch Graph API access token from UCP API.\r\n*/\r\nfunction getNewGraphApiToken()\r\n{\r\n return apiGet(\"graph-api/auth\").then((result) => \r\n {\r\n Cookies.set(\"auth-graph\", result.data, { expires: 1 / 24, secure: true, sameSite: \"lax\" }); // TODO: Add Secure, http only & SameSite flags. Write documentation about why these flags are added.\r\n });\r\n}","import React from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport DeleteIcon from \"@material-ui/icons/Delete\";\r\nimport EditIcon from \"@material-ui/icons/Edit\";\r\nimport RefreshIcon from \"@material-ui/icons/Refresh\";\r\nimport Divider from '@material-ui/core/Divider';\r\n\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport CustomSelect from \"components/CustomInput/CustomSelect\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport { apiGet, apiPost, apiPostJson } from \"utils/webRequestUtils.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { graphApiGet } from \"utils/graphApi/graphApiWebRequestUtils.jsx\";\r\n\r\nconst styles = theme => ({\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n responsiveDialog:\r\n {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginLeft: \"-33px !important\",\r\n marginRight: \"-33px !important\"\r\n },\r\n }\r\n});\r\n\r\nconst AntTabs = withStyles({\r\n root: {\r\n borderBottom: '1px solid #e8e8e8',\r\n },\r\n indicator: {\r\n backgroundColor: '#1890ff',\r\n },\r\n })(Tabs);\r\n\r\nconst AntTab = withStyles(theme => ({\r\n root: {\r\n textTransform: 'none',\r\n minWidth: 72,\r\n fontWeight: theme.typography.fontWeightRegular,\r\n fontFamily: [\r\n '-apple-system',\r\n 'BlinkMacSystemFont',\r\n '\"Segoe UI\"',\r\n 'Roboto',\r\n '\"Helvetica Neue\"',\r\n 'Arial',\r\n 'sans-serif',\r\n '\"Apple Color Emoji\"',\r\n '\"Segoe UI Emoji\"',\r\n '\"Segoe UI Symbol\"',\r\n ].join(','),\r\n '&:hover': {\r\n color: '#40a9ff',\r\n opacity: 1,\r\n },\r\n '&$selected': {\r\n color: '#1890ff',\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n '&:focus': {\r\n color: '#40a9ff',\r\n },\r\n },\r\n selected: {},\r\n }))(props => \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Fetch shifts dialog */}\r\n {/* this.toggleFetchShiftsDialogOpen(fetchShiftsDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n */}\r\n\r\n {/* Update queue dialog */}\r\n this.toggleUpdateQueueDialogOpen(updateQueueDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Remove queue confirmation dialog */}\r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to remove this queue?\"} \r\n \r\n \r\n All data of this queue will be lost!\r\n \r\n { this.setState({ queueToRemove: value}) }\r\n }\r\n /> \r\n \r\n \r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeQueue()} color=\"danger\">\r\n {removingQueue ? \"Removing Queue...\" : \"Remove Queue\"} \r\n \r\n \r\n \r\n\r\n {/* Details card */}\r\n \r\n \r\n Queue: {queueDetails.QueueName} \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.QUEUES.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ? \r\n \r\n {/* {\r\n queueDetails.QueueType.Type === \"shift\"\r\n ?\r\n this.toggleFetchShiftsDialogOpen(fetchShiftsDialogOpen) }>\r\n \r\n : null\r\n } */}\r\n this.toggleUpdateQueueDialogOpen(updateQueueDialogOpen) }>\r\n \r\n this.toggleConfirmDialogOpen(confirmDialogOpen) }>\r\n \r\n \r\n : null\r\n }\r\n\r\n \r\n
this.selectedTabChanged(value)}>\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n }\r\n {\r\n selectedTab === 1 &&\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n {\r\n selectedTab === 2 &&\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n {\r\n selectedTab === 3 &&\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n {\r\n selectedTab === 4 &&\r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Business Hours dialog */}\r\n this.toggleAddBusinessHoursDialogOpen(addBusinessHoursDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Remove business hours confirmation dialog */}\r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to remove this business hour record?\"} \r\n \r\n \r\n \r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeBusinessHours()} color=\"danger\">\r\n {removingBusinessHours ? \"Removing business hours...\" : \"Remove business hours\"} \r\n \r\n \r\n \r\n\r\n {/* Business Hours card */}\r\n \r\n \r\n \r\n \r\n Business Hours \r\n Business hours per day
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.QUEUES.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.toggleAddBusinessHoursDialogOpen(addBusinessHoursDialogOpen)} >\r\n \r\n \r\n : null\r\n } \r\n\r\n {this.setState({businessHoursToRemove: clickedItem}); this.toggleConfirmDialogOpen(confirmDialogOpen);}\r\n : null\r\n }\r\n />\r\n \r\n \r\n \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Add holidays dialog */}\r\n this.toggleAddHolidaysDialogOpen(addHolidaysDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Remove holiday confirmation dialog */}\r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to remove this holiday from the queue?\"} \r\n \r\n \r\n This will not affect other queues.\r\n \r\n \r\n \r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeHoliday()} color=\"danger\">\r\n {removingHoliday ? \"Removing holiday...\" : \"Remove holiday\"} \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Holidays \r\n Holidays linked to queue
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.QUEUES.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.toggleAddHolidaysDialogOpen(addHolidaysDialogOpen)} >\r\n \r\n \r\n : null\r\n }\r\n\r\n {this.setState({holidayToRemove: clickedItem}); this.toggleConfirmDialogOpen(confirmDialogOpen);}\r\n : null\r\n }\r\n isSortable={true}\r\n initialOrderBy={\"Date\"}\r\n tableDateColumns={[\"Date\"]}\r\n />\r\n \r\n \r\n \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Add agents dialog */}\r\n this.toggleAddAgentDialogOpen(addAgentDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n \r\n {/* Update agent dialog */}\r\n this.toggleUpdateAgentDialogOpen(updateAgentDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Remove agent confirmation dialog */}\r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to remove this agent from the queue?\"} \r\n \r\n \r\n This will not affect other queues.\r\n \r\n \r\n \r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeAgent()} color=\"danger\">\r\n {removingAgent ? \"Removing agent...\" : \"Remove agent\"} \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Queue Agents \r\n Agents linked to queue
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.QUEUES.EDIT\"], globalData.loggedInUser.PortalPermissions) && queueDetails.QueueType.Type !== \"shift\"\r\n ?\r\n \r\n { this.setState({agentPenalty: 0}); this.toggleAddAgentDialogOpen(addAgentDialogOpen) }} >\r\n \r\n \r\n : null\r\n }\r\n\r\n {\r\n queueDetails.QueueType.Type === \"shift\"\r\n ?\r\n These agents are dynamically fetched from MS Teams shifts (refreshed hourly).
\r\n :\r\n null\r\n }\r\n\r\n {this.setState({agentToRemove: clickedItem}); this.toggleConfirmDialogOpen(confirmDialogOpen);}\r\n : null\r\n }\r\n onEditButtonClicked=\r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.QUEUES.EDIT\"], globalData.loggedInUser.PortalPermissions) && queueDetails.QueueType.Type !== \"shift\"\r\n ?\r\n (clickedItem) => { this.setUpdateAgentStateValues(clickedItem); this.toggleUpdateAgentDialogOpen(updateAgentDialogOpen) }\r\n : null\r\n }\r\n isSortable={true}\r\n initialOrderBy={\"Agent\"}\r\n tableNumericColumns={[\"Number\", \"Penalty\"]}\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n {\r\n // Hide content based on queuetype\r\n queueDetails.QueueType.Type !== \"shift\"\r\n ?\r\n (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n )\r\n :\r\n null\r\n }\r\n \r\n
\r\n \r\n \r\n \r\n {/* Voice Prompts
*/}\r\n \r\n \r\n
\r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {item[valueColumn]} )\r\n });\r\n }\r\n else\r\n {\r\n return values.map((item, key) =>\r\n {\r\n return({item} )\r\n });\r\n }\r\n }\r\n\r\n return (\r\n \r\n\r\n
Currently selected: {selectedName}
\r\n\r\n
\r\n {values && values.length > 0 ? (\r\n values.map((user) => ( \r\n
onPress(user.id, user.userPrincipalName)} className=\"user\" style={{cursor:'pointer'}}> \r\n {user.name} {user.id == selectedValue ? ({user.userPrincipalName})
\r\n ))\r\n ) : (\r\n
No results found! \r\n )}\r\n
\r\n
\r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Add agents dialog */}\r\n this.toggleAddAgentsDialogOpen(addAgentsDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Update agents dialog */}\r\n this.toggleUpdateAgentsDialogOpen(updateAgentsDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Remove agent confirmation dialog */}\r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to remove this agent?\"} \r\n \r\n \r\n This will also remove the agent from all assigned queues.\r\n \r\n \r\n \r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeAgent()} color=\"danger\">\r\n {removingAgent ? \"Removing agent...\" : \"Remove agent\"} \r\n \r\n \r\n \r\n\r\n {/* Cards */}\r\n \r\n \r\n {/* Agents overview card */}\r\n \r\n \r\n \r\n \r\n Agents \r\n Available agents
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.AGENTS.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.toggleAddAgentsDialogOpen(addAgentsDialogOpen)} >\r\n \r\n \r\n : null\r\n }\r\n\r\n {this.setState({agentToRemove: clickedItem.AgentID}); this.toggleConfirmDialogOpen(confirmDialogOpen);}\r\n : null\r\n }\r\n onEditButtonClicked=\r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.AGENTS.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (clickedItem) => { this.setUpdateAgentStateValues(clickedItem); this.toggleUpdateAgentsDialogOpen(updateAgentsDialogOpen); }\r\n : null\r\n }\r\n isSortable={true}\r\n initialOrderBy={\"Agent\"}\r\n tableNumericColumns={[\"Number\", \"FallbackNumber\"]}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Add holidays dialog */}\r\n this.toggleAddHolidaysDialogOpen(addHolidaysDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Update holidays dialog */}\r\n this.toggleUpdateHolidaysDialogOpen(updateHolidaysDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n \r\n \r\n\r\n {/* Remove holiday confirmation dialog */}\r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {\"Are you sure you want to remove this holiday?\"} \r\n \r\n \r\n This will also remove the holiday from all assigned queues.\r\n \r\n \r\n \r\n this.toggleConfirmDialogOpen(confirmDialogOpen)} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeHoliday()} color=\"danger\">\r\n {removingHoliday ? \"Removing holiday...\" : \"Remove holiday\"} \r\n \r\n \r\n \r\n\r\n {/* Cards */}\r\n \r\n \r\n {/* Holidays overview card */}\r\n \r\n \r\n \r\n \r\n Holidays \r\n Holidays this year
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.HOLIDAYS.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.toggleAddHolidaysDialogOpen(addHolidaysDialogOpen)} >\r\n \r\n \r\n : null\r\n }\r\n\r\n { this.setUpdateData(clickedItem); this.toggleUpdateHolidaysDialogOpen(updateHolidaysDialogOpen);}\r\n : null\r\n }\r\n onDeleteButtonClicked=\r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.HOLIDAYS.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (clickedItem) => {this.setState({holidayToRemove: clickedItem}); this.toggleConfirmDialogOpen(confirmDialogOpen);}\r\n : null\r\n }\r\n isSortable={true}\r\n initialOrderBy={\"Date\"}\r\n tableDateColumns={[\"Date\"]}\r\n />\r\n \r\n \r\n \r\n \r\n Voice Prompts page!
) \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(VoicePromptsPage)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport IVRIcon from \"@material-ui/icons/CallSplit\";\r\n\r\n// Extra libs\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nconst requiredPortalPermissions = [\r\n \"UCALLMANAGER.ACCESS\"\r\n]\r\n\r\nconst allowedPortalPermissions = [ \r\n \"UCALLMANAGER.IVR.VIEW\",\r\n \"UCALLMANAGER.IVR.EDIT\"\r\n]\r\n\r\nclass IVROverviewPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n // Component loading\r\n error: null,\r\n isLoaded: false, \r\n\r\n ivrs: []\r\n }\r\n }\r\n\r\n componentDidMount()\r\n { \r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions) || !PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.getIVRs()\r\n }\r\n\r\n getIVRs()\r\n {\r\n apiGet(\"ucm/ivr/all\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n ivrs: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data.Message\r\n });\r\n });\r\n }\r\n\r\n render() \r\n {\r\n const { error, isLoaded } = this.state;\r\n const { ivrs } = this.state;\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n IVR \r\n Overview of Interactive Voice Responses.
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Click IVR to view or edit.
\r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.IVR.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n \r\n \r\n \r\n \r\n \r\n : null\r\n } \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n ); \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(IVROverviewPage)","import React from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport Divider from '@material-ui/core/Divider';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\n\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport CardFooter from \"components/Card/CardFooter.jsx\";\r\nimport CustomSelect from \"components/CustomInput/CustomSelect\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\n\r\n// Local scripts\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport { apiGet, apiPostJson } from \"utils/webRequestUtils.jsx\";\r\nimport { graphApiGet } from \"utils/graphApi/graphApiWebRequestUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n };\r\n\r\n const requiredPortalPermissions = [\r\n \"UCALLMANAGER.ACCESS\"\r\n]\r\n\r\nconst allowedPortalPermissions = [\r\n \"UCALLMANAGER.IVR.EDIT\"\r\n]\r\n\r\nclass NewIVR extends React.Component\r\n{\r\n constructor(props)\r\n {\r\n super(props);\r\n\r\n this.state =\r\n {\r\n // Component loading\r\n error: null,\r\n isLoaded: false,\r\n \r\n // Toast\r\n toastOpen: false,\r\n toastColor: \"success\",\r\n toastText: \"\",\r\n\r\n // IVR Meta\r\n newIVRMeta: null,\r\n\r\n // New IVR data\r\n ivrName: \"\",\r\n isRoot: \"\",\r\n linkedPhoneNumber: \"\",\r\n parentIVR: \"\",\r\n ivrPrompt: \"\",\r\n welcomeVoicePrompt: \"\",\r\n closedVoicePrompt: \"\",\r\n fallbackQueue: \"\",\r\n\r\n // States\r\n creatingIVR: false,\r\n ivrCreated: false\r\n }\r\n\r\n this.getNewIVRMeta();\r\n }\r\n\r\n componentDidMount()\r\n {\r\n // Check portal permissions\r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions) ||\r\n !PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n\r\n }\r\n\r\n // TODO: Check if this method is reusable in other classes.\r\n showNotification = (toastColor, toastText) =>\r\n {\r\n this.setState(\r\n {\r\n toastOpen: true,\r\n toastColor: toastColor,\r\n toastText: toastText\r\n });\r\n\r\n this.alertTimeout = setTimeout(\r\n function()\r\n {\r\n this.setState(\r\n {\r\n toastOpen: false\r\n });\r\n }.bind(this),\r\n 3000\r\n );\r\n }\r\n \r\n getNewIVRMeta()\r\n {\r\n // Fetch IVR meta data\r\n apiGet(\"ucm/ivr/meta\").then((result) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded:true,\r\n newIVRMeta: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n\r\n createIVR()\r\n {\r\n this.setState({creatingIVR: true})\r\n\r\n const { ivrName, isRoot, linkedPhoneNumber, parentIVR, ivrPrompt, welcomeVoicePrompt, closedVoicePrompt, fallbackQueue } = this.state;\r\n \r\n // Create request body\r\n var requestBody =\r\n {\r\n IVRName: ivrName,\r\n IsRoot: isRoot,\r\n LinkedPhoneNumber: linkedPhoneNumber,\r\n ParentIVR: parentIVR,\r\n IVRPrompt: ivrPrompt,\r\n WelcomeVoicePrompt: welcomeVoicePrompt,\r\n ClosedVoicePrompt: closedVoicePrompt,\r\n FallbackQueue: fallbackQueue\r\n };\r\n\r\n // Create IVR\r\n apiPostJson(\"ucm/ivr/add\", requestBody).then(() =>\r\n {\r\n this.setState(\r\n {\r\n ivrCreated: true\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n //TODO: User friendly error.\r\n creatingIVR: false\r\n });\r\n\r\n this.showNotification(\"danger\", error.data);\r\n });\r\n }\r\n\r\n render()\r\n {\r\n const { error, isLoaded } = this.state;\r\n const { toastColor, toastText, toastOpen } = this.state;\r\n const { newIVRMeta } = this.state;\r\n const { ivrName, isRoot, linkedPhoneNumber, parentIVR, ivrPrompt, welcomeVoicePrompt, closedVoicePrompt, fallbackQueue } = this.state;\r\n const { creatingIVR, ivrCreated } = this.state;\r\n\r\n const { classes } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\"Are you sure you want to remove this IVR?\"} \r\n \r\n \r\n All data of this IVR will be lost!\r\n \r\n { this.setState({ ivrToRemove: value}) }\r\n }\r\n /> \r\n \r\n \r\n this.props.onDialogClose()} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeIVR()} color=\"danger\">\r\n {removingIVR ? \"Removing IVR...\" : \"Remove IVR\"} \r\n \r\n \r\n
\r\n ); \r\n }\r\n}\r\n\r\nIVRDetailsDeleteDialog.propTypes = {\r\n ivrName: PropTypes.string,\r\n onSubmitError: PropTypes.func,\r\n onDialogClose: PropTypes.func\r\n };\r\n\r\nexport default withStyles(styles)(IVRDetailsDeleteDialog)","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport DeleteIcon from \"@material-ui/icons/Delete\";\r\nimport EditIcon from \"@material-ui/icons/Edit\";\r\n\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport IVRDetailsEditDialog from \"./IVRDetailsEditDialog.jsx\"\r\nimport IVRDetailsDeleteDialog from \"./IVRDetailsDeleteDialog.jsx\"\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = theme => ({\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n responsiveDialog:\r\n {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginLeft: \"-33px !important\",\r\n marginRight: \"-33px !important\"\r\n },\r\n }\r\n});\r\n\r\nconst AntTabs = withStyles({\r\n root: {\r\n borderBottom: '1px solid #e8e8e8',\r\n },\r\n indicator: {\r\n backgroundColor: '#1890ff',\r\n },\r\n })(Tabs);\r\n\r\nconst AntTab = withStyles(theme => ({\r\n root: {\r\n textTransform: 'none',\r\n minWidth: 72,\r\n fontWeight: theme.typography.fontWeightRegular,\r\n fontFamily: [\r\n '-apple-system',\r\n 'BlinkMacSystemFont',\r\n '\"Segoe UI\"',\r\n 'Roboto',\r\n '\"Helvetica Neue\"',\r\n 'Arial',\r\n 'sans-serif',\r\n '\"Apple Color Emoji\"',\r\n '\"Segoe UI Emoji\"',\r\n '\"Segoe UI Symbol\"',\r\n ].join(','),\r\n '&:hover': {\r\n color: '#40a9ff',\r\n opacity: 1,\r\n },\r\n '&$selected': {\r\n color: '#1890ff',\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n '&:focus': {\r\n color: '#40a9ff',\r\n },\r\n },\r\n selected: {},\r\n }))(props => \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Dialog */}\r\n this.toggleDialogOpen(dialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {(() => {\r\n switch (dialogType) {\r\n case 'update':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"IVR updated!\"); this.getIVRDetails(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n case 'delete':\r\n return this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n default:\r\n return
;\r\n }\r\n })()}\r\n \r\n\r\n {/* Details card */}\r\n \r\n \r\n IVR: {ivrDetails.IVRName} \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.IVR.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.openIVRUpdateDialog()}>\r\n \r\n this.openIVRDeleteDialog()}>\r\n \r\n \r\n : null\r\n }\r\n\r\n \r\n
this.selectedTabChanged(value)}>\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n {\r\n selectedTab === 1 &&\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n \r\n \r\n \r\n {\"Are you sure you want to remove these business hours from the IVR?\"} \r\n \r\n \r\n This will not affect other IVR's.\r\n \r\n \r\n \r\n this.props.onDialogClose()} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeIVRBusinessHours()} color=\"danger\">\r\n {removingBusinessHours ? \"Removing Business Hours...\" : \"Remove Business Hours\"} \r\n \r\n \r\n
\r\n ); \r\n }\r\n}\r\n\r\nIVRBusinessHoursDeleteDialog.propTypes = {\r\n businessHoursID: PropTypes.number,\r\n onSubmitSuccess: PropTypes.func,\r\n onSubmitError: PropTypes.func,\r\n onDialogClose: PropTypes.func\r\n };\r\n\r\nexport default withStyles(styles)(IVRBusinessHoursDeleteDialog)","import React from \"react\";\r\nimport { Redirect } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogContentText from '@material-ui/core/DialogContentText';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport Checkbox from '@material-ui/core/Checkbox';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport DeleteIcon from \"@material-ui/icons/Delete\";\r\nimport EditIcon from \"@material-ui/icons/Edit\";\r\nimport RefreshIcon from \"@material-ui/icons/Refresh\";\r\nimport Divider from '@material-ui/core/Divider';\r\nimport ScheduleIcon from \"@material-ui/icons/Schedule\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\n\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport CustomSelect from \"components/CustomInput/CustomSelect\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport { apiGet, apiPost, apiPostJson } from \"utils/webRequestUtils.jsx\";\r\nimport IVRBusinessHoursAddDialog from \"./IVRBusinessHoursAddDialog.jsx\"\r\nimport IVRBusinessHoursDeleteDialog from \"./IVRBusinessHoursDeleteDialog.jsx\"\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = theme => ({\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n responsiveDialog:\r\n {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginLeft: \"-33px !important\",\r\n marginRight: \"-33px !important\"\r\n },\r\n }\r\n});\r\n\r\nconst AntTabs = withStyles({\r\n root: {\r\n borderBottom: '1px solid #e8e8e8',\r\n },\r\n indicator: {\r\n backgroundColor: '#1890ff',\r\n },\r\n })(Tabs);\r\n\r\nconst AntTab = withStyles(theme => ({\r\n root: {\r\n textTransform: 'none',\r\n minWidth: 72,\r\n fontWeight: theme.typography.fontWeightRegular,\r\n fontFamily: [\r\n '-apple-system',\r\n 'BlinkMacSystemFont',\r\n '\"Segoe UI\"',\r\n 'Roboto',\r\n '\"Helvetica Neue\"',\r\n 'Arial',\r\n 'sans-serif',\r\n '\"Apple Color Emoji\"',\r\n '\"Segoe UI Emoji\"',\r\n '\"Segoe UI Symbol\"',\r\n ].join(','),\r\n '&:hover': {\r\n color: '#40a9ff',\r\n opacity: 1,\r\n },\r\n '&$selected': {\r\n color: '#1890ff',\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n '&:focus': {\r\n color: '#40a9ff',\r\n },\r\n },\r\n selected: {},\r\n }))(props => \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Dialog */}\r\n this.toggleDialogOpen(dialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {(() => {\r\n switch (dialogType) {\r\n case 'add':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"Business hours added!\"); this.getIVRBusinessHours(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n case 'delete':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"Business hours removed!\"); this.getIVRBusinessHours(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n default:\r\n return
;\r\n }\r\n })()}\r\n \r\n\r\n {/* Business Hours card */}\r\n \r\n \r\n \r\n \r\n Business Hours \r\n Business hours per day
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.IVR.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.openBusinessHoursAddDialog()} >\r\n \r\n \r\n : null\r\n } \r\n\r\n { this.openBusinessHoursDeleteDialog(clickedItem); }\r\n : null\r\n }\r\n />\r\n \r\n \r\n \r\n {\"Are you sure you want to remove this IVR menu option from the IVR?\"} \r\n \r\n \r\n This will not affect other IVR's.\r\n \r\n \r\n \r\n this.props.onDialogClose()} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeIVRMenuOption()} color=\"danger\">\r\n {removingMenuOption ? \"Removing Menu option...\" : \"Remove Menu Option\"} \r\n \r\n \r\n
\r\n ); \r\n }\r\n}\r\n\r\nIVRMenuOptionsDeleteDialog.propTypes = {\r\n menuOptionID: PropTypes.number,\r\n onSubmitSuccess: PropTypes.func,\r\n onSubmitError: PropTypes.func,\r\n onDialogClose: PropTypes.func\r\n };\r\n\r\nexport default withStyles(styles)(IVRMenuOptionsDeleteDialog)","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport DialpadIcon from \"@material-ui/icons/Dialpad\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\n\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\n\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport IVRMenuOptionsAddDialog from \"./IVRMenuOptionsAddDialog\"\r\nimport IVRMenuOptionsEditDialog from \"./IVRMenuOptionsEditDialog\"\r\nimport IVRMenuOptionsDeleteDialog from \"./IVRMenuOptionsDeleteDialog\"\r\n\r\nconst styles = theme => ({\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n responsiveDialog:\r\n {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginLeft: \"-33px !important\",\r\n marginRight: \"-33px !important\"\r\n },\r\n }\r\n});\r\n\r\nconst AntTabs = withStyles({\r\n root: {\r\n borderBottom: '1px solid #e8e8e8',\r\n },\r\n indicator: {\r\n backgroundColor: '#1890ff',\r\n },\r\n })(Tabs);\r\n\r\nconst AntTab = withStyles(theme => ({\r\n root: {\r\n textTransform: 'none',\r\n minWidth: 72,\r\n fontWeight: theme.typography.fontWeightRegular,\r\n fontFamily: [\r\n '-apple-system',\r\n 'BlinkMacSystemFont',\r\n '\"Segoe UI\"',\r\n 'Roboto',\r\n '\"Helvetica Neue\"',\r\n 'Arial',\r\n 'sans-serif',\r\n '\"Apple Color Emoji\"',\r\n '\"Segoe UI Emoji\"',\r\n '\"Segoe UI Symbol\"',\r\n ].join(','),\r\n '&:hover': {\r\n color: '#40a9ff',\r\n opacity: 1,\r\n },\r\n '&$selected': {\r\n color: '#1890ff',\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n '&:focus': {\r\n color: '#40a9ff',\r\n },\r\n },\r\n selected: {},\r\n }))(props => \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Dialog */}\r\n this.toggleDialogOpen(dialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {(() => {\r\n switch (dialogType) {\r\n case 'add':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"IVR menu option added!\"); this.getIVRMenuOptions(); this.getIVRMenuOptionsMeta(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n case 'update':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"IVR menu option updated!\"); this.getIVRMenuOptions(); this.getIVRMenuOptionsMeta(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n case 'delete':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"IVR menu option removed!\"); this.getIVRMenuOptions(); this.getIVRMenuOptionsMeta(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n default:\r\n return
;\r\n }\r\n })()}\r\n \r\n\r\n {/* Menu options overview card */}\r\n \r\n \r\n \r\n \r\n IVR Menu Options \r\n IVR menu options assigned to currently viewing IVR.
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.IVR.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.openMenuOptionAddDialog()}>\r\n \r\n \r\n : null\r\n } \r\n\r\n { this.openMenuOptionDeleteDialog(clickedItem) }\r\n :\r\n null\r\n }\r\n onEditButtonClicked=\r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.IVR.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (clickedItem) => { this.openMenuOptionUpdateDialog(clickedItem); }\r\n :\r\n null\r\n }\r\n />\r\n \r\n \r\n \r\n {\"Are you sure you want to remove this holiday from the IVR?\"} \r\n \r\n \r\n This will not affect other IVR's.\r\n \r\n \r\n \r\n this.props.onDialogClose()} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeHoliday()} color=\"danger\">\r\n {removingHoliday ? \"Removing holiday...\" : \"Remove holiday\"} \r\n \r\n \r\n
\r\n ); \r\n }\r\n}\r\n\r\nIVRHolidaysDeleteDialog.propTypes = {\r\n selectedHolidayID: PropTypes.number,\r\n ivrName: PropTypes.string,\r\n onSubmitSuccess: PropTypes.func,\r\n onSubmitError: PropTypes.func,\r\n onDialogClose: PropTypes.func\r\n };\r\n\r\nexport default withStyles(styles)(IVRHolidaysDeleteDialog)","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport HolidayIcon from \"@material-ui/icons/Today\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\n\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\n\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport IVRHolidaysAddDialog from \"./IVRHolidaysAddDialog.jsx\"\r\nimport IVRHolidaysDeleteDialog from \"./IVRHolidaysDeleteDialog.jsx\"\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = theme => ({\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n responsiveDialog:\r\n {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginLeft: \"-33px !important\",\r\n marginRight: \"-33px !important\"\r\n },\r\n }\r\n});\r\n\r\nconst AntTabs = withStyles({\r\n root: {\r\n borderBottom: '1px solid #e8e8e8',\r\n },\r\n indicator: {\r\n backgroundColor: '#1890ff',\r\n },\r\n })(Tabs);\r\n\r\nconst AntTab = withStyles(theme => ({\r\n root: {\r\n textTransform: 'none',\r\n minWidth: 72,\r\n fontWeight: theme.typography.fontWeightRegular,\r\n fontFamily: [\r\n '-apple-system',\r\n 'BlinkMacSystemFont',\r\n '\"Segoe UI\"',\r\n 'Roboto',\r\n '\"Helvetica Neue\"',\r\n 'Arial',\r\n 'sans-serif',\r\n '\"Apple Color Emoji\"',\r\n '\"Segoe UI Emoji\"',\r\n '\"Segoe UI Symbol\"',\r\n ].join(','),\r\n '&:hover': {\r\n color: '#40a9ff',\r\n opacity: 1,\r\n },\r\n '&$selected': {\r\n color: '#1890ff',\r\n fontWeight: theme.typography.fontWeightMedium,\r\n },\r\n '&:focus': {\r\n color: '#40a9ff',\r\n },\r\n },\r\n selected: {},\r\n }))(props => \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Dialog */}\r\n this.toggleDialogOpen(dialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {(() => {\r\n switch (dialogType) {\r\n case 'add':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"Holiday added!\"); this.getIVRHolidays(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n case 'delete':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"Holiday removed!\"); this.getIVRHolidays(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n default:\r\n return
;\r\n }\r\n })()}\r\n \r\n\r\n {/* Business Hours card */}\r\n \r\n \r\n \r\n \r\n Holidays \r\n Holidays linked to IVR
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.IVR.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.openHolidaysAddDialog()} >\r\n \r\n \r\n : null\r\n } \r\n\r\n { this.openHolidaysDeleteDialog(clickedItem); }\r\n : null\r\n }\r\n isSortable={true}\r\n initialOrderBy={\"Date\"}\r\n tableDateColumns={[\"Date\"]}\r\n />\r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {\"Are you sure you want to remove this audio file?\"} \r\n \r\n \r\n This action can't be undone. \r\n \r\n \r\n \r\n this.props.onDialogClose()} color=\"white\" autoFocus>\r\n Cancel\r\n \r\n this.removeAudioFile()} color=\"danger\">\r\n {removingAudioFile ? \"Removing Audio File...\" : \"Remove Audio File\"} \r\n \r\n \r\n
\r\n ); \r\n }\r\n}\r\n\r\nAudioLibraryDeleteDialog.propTypes = {\r\n audioFileName: PropTypes.string,\r\n onSubmitSuccess: PropTypes.func,\r\n onSubmitError: PropTypes.func,\r\n onDialogClose: PropTypes.func\r\n };\r\n\r\nexport default withStyles(styles)(AudioLibraryDeleteDialog)","import React from \"react\";\r\nimport { NavLink } from 'react-router-dom'\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Typography from '@material-ui/core/Typography';\r\nimport AudioIcon from '@material-ui/icons/Equalizer';\r\nimport Dialog from '@material-ui/core/Dialog';\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport TableJson from \"components/Table/TableJson.jsx\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.jsx\";\r\n\r\nimport AudioLibraryAddDialog from \"./AudioLibraryAddDialog.jsx\";\r\nimport AudioLibraryDeleteDialog from \"./AudioLibraryDeleteDialog.jsx\";\r\n\r\n// Extra libs\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nconst requiredPortalPermissions = [\r\n \"UCALLMANAGER.ACCESS\"\r\n]\r\n\r\nconst allowedPortalPermissions = [ \r\n \"UCALLMANAGER.IVR.VIEW\",\r\n \"UCALLMANAGER.IVR.EDIT\",\r\n \"UCALLMANAGER.AUDIOLIBRARY.EDIT\"\r\n]\r\n\r\nclass AudioLibraryOverviewPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n // Component loading\r\n error: null,\r\n isLoaded: false,\r\n \r\n // Toast\r\n toastOpen: false,\r\n toastColor: \"success\",\r\n toastText: \"\",\r\n\r\n // Dialog\r\n dialogOpen: false,\r\n dialogType: \"\",\r\n\r\n // Data\r\n audioFiles: [],\r\n selectedAudioFile: \"\"\r\n }\r\n }\r\n\r\n componentDidMount()\r\n { \r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredPortalPermissions, globalData.loggedInUser.PortalPermissions) || !PMUtils.userHasAnyRequiredPermissions(allowedPortalPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.getAudioFiles();\r\n }\r\n\r\n getAudioFiles = () =>\r\n {\r\n // Get activities of ticket\r\n apiGet(\"ucm/audio/get-meta\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n audioFiles: result.data\r\n });\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n \r\n openAudioFileAddDialog() \r\n {\r\n this.setState({ dialogType: \"add\", dialogOpen: true });\r\n }\r\n\r\n openAudioFileDeleteDialog(selectedAudioFile) \r\n {console.log(selectedAudioFile)\r\n this.setState({ selectedAudioFile: selectedAudioFile, dialogType: \"delete\", dialogOpen: true });\r\n }\r\n\r\n toggleDialogOpen = (isOpen) => \r\n {\r\n this.setState({ dialogOpen: !isOpen });\r\n }\r\n \r\n // TODO: Check if this method is reusable in other classes.\r\n showNotification = (toastColor, toastText) =>\r\n {\r\n this.setState(\r\n {\r\n toastOpen: true,\r\n toastColor: toastColor,\r\n toastText: toastText\r\n });\r\n\r\n this.alertTimeout = setTimeout(\r\n function() \r\n {\r\n this.setState(\r\n {\r\n toastOpen: false\r\n });\r\n }.bind(this),\r\n 3000\r\n );\r\n }\r\n\r\n render() \r\n {\r\n const { classes } = this.props;\r\n const { error, isLoaded } = this.state;\r\n const { toastColor, toastText, toastOpen } = this.state;\r\n const { dialogOpen, dialogType } = this.state;\r\n const { audioFiles, selectedAudioFile } = this.state;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n {/* Toast */}\r\n
this.setState({ toastOpen: false })}\r\n close\r\n />\r\n\r\n {/* Dialog */}\r\n this.toggleDialogOpen(dialogOpen)} aria-labelledby=\"form-dialog-title\" fullWidth={true}>\r\n {(() => {\r\n switch (dialogType) {\r\n case 'add':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"Audio file(s) uploaded\"); this.getAudioFiles(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n case 'delete':\r\n return { this.toggleDialogOpen(dialogOpen); this.showNotification(\"success\", \"Audio file removed!\"); this.getAudioFiles(); }}\r\n onSubmitError={(message) => this.showNotification(\"danger\", message)}\r\n onDialogClose={() => this.toggleDialogOpen(dialogOpen)}\r\n > \r\n default:\r\n return
;\r\n }\r\n })()}\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Audio Library \r\n Overview of audio files to be used in uCallManager IVR's.
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.AUDIOLIBRARY.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n \r\n this.openAudioFileAddDialog()}>\r\n \r\n \r\n : null\r\n } \r\n\r\n { console.log(listItem) }\r\n // }\r\n isSortable={true}\r\n initialOrderBy={\"Filename\"} \r\n onDeleteButtonClicked=\r\n {\r\n PMUtils.userHasAnyRequiredPermissions([\"UCALLMANAGER.AUDIOLIBRARY.EDIT\"], globalData.loggedInUser.PortalPermissions)\r\n ?\r\n (clickedItem) => { this.openAudioFileDeleteDialog(clickedItem.Filename); }\r\n : null\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Call Recordings \r\n \r\n Overview of past call recordings. \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Select a period/date to view the recordings in the list below.
\r\n \r\n\r\n \r\n { this.setState({ selectedMonth: value}) }\r\n }\r\n values={[\"01\", \"02\", \"03\", \"04\", \"05\", \"06\", \"07\", \"08\", \"09\", \"10\", \"11\", \"12\"]}\r\n />\r\n \r\n \r\n { this.setState({ selectedDay: value}) }\r\n }\r\n values={[\"01\", \"02\", \"03\", \"04\", \"05\", \"06\", \"07\", \"08\", \"09\", \"10\", \"11\", \"12\", \"13\", \"14\", \"15\",\r\n \"16\", \"17\", \"18\", \"19\", \"20\", \"21\", \"22\", \"23\", \"24\", \"25\", \"26\", \"27\", \"28\", \"29\", \"30\", \"31\"]}\r\n />\r\n \r\n \r\n { this.setState({ selectedHour: value}) }\r\n }\r\n values={[\"01\", \"02\", \"03\", \"04\", \"05\", \"06\", \"07\", \"08\", \"09\", \"10\", \"11\", \"12\", \"13\", \"14\", \"15\",\r\n \"16\", \"17\", \"18\", \"19\", \"20\", \"21\", \"22\", \"23\", \"24\"]}\r\n />\r\n \r\n \r\n\r\n this.getAudioRecordings()}>{ \"Get recordings\" } \r\n \r\n \r\n\r\n { \r\n \r\n for(var i = 0; i < recordings.length; i++)\r\n {\r\n if (recordings[i].FileName == listItem.FileName)\r\n {\r\n recordings[i].CallTo = recordings[i].CallTo.toString().replace(\" (currently playing)\", \"\");\r\n recordings[i].CallTo = recordings[i].CallTo + \" (currently playing)\"; \r\n }\r\n else\r\n {\r\n recordings[i].CallTo = recordings[i].CallTo.toString().replace(\" (currently playing)\", \"\");\r\n }\r\n }\r\n \r\n this.loadAudioFile(listItem) }\r\n }\r\n isSortable={true}\r\n initialOrderBy={\"CallDateTime\"}\r\n initialSortingOrder={\"desc\"}\r\n tableNumericColumns={[\"CallTo\"]}\r\n tableDateColumns={[\"CallDateTime\"]}\r\n />\r\n \r\n \r\n \r\n \r\n ); \r\n }\r\n}\r\n\r\nexport default withStyles(styles)(RecordingsPage)","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport Divider from '@material-ui/core/Divider';\r\n\r\n// core components\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\n\r\n// Extra libs\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nimport * as powerbi from 'powerbi-client';\r\nimport $ from 'jquery';\r\n\r\nconst requiredUCallManagerPermissions = [\r\n \"UCALLMANAGER.ACCESS\"\r\n ]\r\n\r\nclass ReportingPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n reportEmbedData: null\r\n }\r\n }\r\n\r\n componentDidMount()\r\n { \r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredUCallManagerPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.getDashboardReport();\r\n }\r\n\r\n getDashboardReport()\r\n {\r\n apiGet(\"ucm/reports/dashboard\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n reportEmbedData: result.data\r\n });\r\n\r\n this.loadReport(result.data.AccessToken, result.data.EmbedURL, result.data.ReportID)\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n \r\n loadReport(accessToken, embedUrl, embedReportId) \r\n { \r\n // Fetch viewport width (used for determining if report should be shown in mobile view).\r\n var screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\r\n \r\n // Get Power BI SDK models.\r\n var models = powerbi.models;\r\n \r\n var config;\r\n \r\n // Load normal or mobile report view.\r\n if (screenWidth > 768) {\r\n config = {\r\n type: 'report',\r\n id: embedReportId,\r\n tokenType: models.TokenType.Embed,\r\n accessToken: accessToken,\r\n embedUrl: embedUrl,\r\n permissions: models.Permissions.Read,\r\n settings:\r\n {\r\n filterPaneEnabled: false,\r\n navContentPaneEnabled: false,\r\n }\r\n };\r\n }\r\n else {\r\n config = {\r\n type: 'report',\r\n tokenType: models.TokenType.Embed,\r\n accessToken: accessToken,\r\n embedUrl: embedUrl,\r\n id: embedReportId,\r\n permissions: models.Permissions.Read,\r\n settings:\r\n {\r\n filterPaneEnabled: false,\r\n navContentPaneEnabled: false,\r\n layoutType: models.LayoutType.MobilePortrait\r\n }\r\n };\r\n }\r\n\r\n // Get a reference to the reportcontainer element\r\n var reportContainer = $('#reportContainer')[0];\r\n\r\n if (reportContainer == null)\r\n {\r\n return;\r\n }\r\n\r\n // Embed the report and display it within the div container.\r\n var report = window.powerbi.embed(reportContainer, config);\r\n report.iframe.style.border = \"None\";\r\n\r\n // For updating settings at runtime\r\n // report.updateSettings(newSettings)\r\n // .catch(error => { ... });\r\n }\r\n\r\n render() \r\n {\r\n const { error, isLoaded } = this.state\r\n\r\n if (!isLoaded)\r\n {\r\n return
\r\n ) \r\n }\r\n}\r\n\r\nexport default ReportingPage","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport Divider from '@material-ui/core/Divider';\r\n\r\n// core components\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\nimport GridItem from \"components/Grid/GridItem.jsx\";\r\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\r\n\r\n// Extra libs\r\nimport { apiGet } from \"utils/webRequestUtils.jsx\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport PMUtils from \"utils/portalPermissionUtils.jsx\";\r\n\r\nimport * as powerbi from 'powerbi-client';\r\nimport $ from 'jquery';\r\n\r\nconst requiredUCallManagerPermissions = [\r\n \"UCALLMANAGER.ACCESS\",\r\n \"UCALLMANAGER.CALLDETAILRECORDS.VIEW\"\r\n ]\r\n\r\nclass CallDetailRecordsPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n \r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n reportEmbedData: null\r\n }\r\n }\r\n\r\n componentDidMount()\r\n { \r\n // Check portal permissions \r\n if (!PMUtils.userHasAllRequiredPermissions(requiredUCallManagerPermissions, globalData.loggedInUser.PortalPermissions))\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: \"Access denied\"\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.getDashboardReport();\r\n }\r\n\r\n getDashboardReport()\r\n {\r\n apiGet(\"ucm/reports/cdr\").then((result) => \r\n {\r\n // TODO: Check if 'Authorization has been denied for this request' message is received.\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n reportEmbedData: result.data\r\n });\r\n\r\n this.loadReport(result.data.AccessToken, result.data.EmbedURL, result.data.ReportID)\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error.data\r\n });\r\n });\r\n }\r\n \r\n loadReport(accessToken, embedUrl, embedReportId) \r\n { \r\n // Fetch viewport width (used for determining if report should be shown in mobile view).\r\n var screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\r\n \r\n // Get Power BI SDK models.\r\n var models = powerbi.models;\r\n \r\n var config;\r\n \r\n // Load normal or mobile report view.\r\n if (screenWidth > 768) {\r\n config = {\r\n type: 'report',\r\n id: embedReportId,\r\n tokenType: models.TokenType.Embed,\r\n accessToken: accessToken,\r\n embedUrl: embedUrl,\r\n permissions: models.Permissions.Read,\r\n settings:\r\n {\r\n filterPaneEnabled: false,\r\n navContentPaneEnabled: false,\r\n }\r\n };\r\n }\r\n else {\r\n config = {\r\n type: 'report',\r\n tokenType: models.TokenType.Embed,\r\n accessToken: accessToken,\r\n embedUrl: embedUrl,\r\n id: embedReportId,\r\n permissions: models.Permissions.Read,\r\n settings:\r\n {\r\n filterPaneEnabled: false,\r\n navContentPaneEnabled: false,\r\n layoutType: models.LayoutType.MobilePortrait\r\n }\r\n };\r\n }\r\n\r\n // Get a reference to the reportcontainer element\r\n var reportContainer = $('#reportContainer')[0];\r\n\r\n if (reportContainer == null)\r\n {\r\n return;\r\n }\r\n\r\n // Embed the report and display it within the div container.\r\n var report = window.powerbi.embed(reportContainer, config);\r\n report.iframe.style.border = \"None\";\r\n\r\n // For updating settings at runtime\r\n // report.updateSettings(newSettings)\r\n // .catch(error => { ... });\r\n }\r\n\r\n render() \r\n {\r\n const { error, isLoaded } = this.state\r\n\r\n if (!isLoaded)\r\n {\r\n return
\r\n ) \r\n }\r\n}\r\n\r\nexport default CallDetailRecordsPage","// @material-ui/icons\r\nimport Home from \"@material-ui/icons/Home\";\r\nimport LibraryBooks from \"@material-ui/icons/LibraryBooks\";\r\nimport BubbleChart from \"@material-ui/icons/BubbleChart\";\r\nimport Notifications from \"@material-ui/icons/Notifications\";\r\nimport Folder from \"@material-ui/icons/FolderOpen\";\r\nimport AllInbox from \"@material-ui/icons/AllInbox\";\r\nimport Call from \"@material-ui/icons/Call\";\r\nimport ShoppingCart from \"@material-ui/icons/ShoppingCart\";\r\nimport CloudDone from \"@material-ui/icons/CloudDone\";\r\nimport CloudQueue from \"@material-ui/icons/CloudQueue\";\r\nimport DNS from \"@material-ui/icons/Dns\";\r\nimport Settings from \"@material-ui/icons/Settings\";\r\n\r\n// core components/views for Admin layout\r\nimport DashboardPage from \"views/Dashboard/Dashboard.jsx\";\r\nimport UserProfile from \"views/UserProfile/UserProfile.jsx\";\r\nimport TableList from \"views/TableList/TableList.jsx\";\r\nimport Typography from \"views/Typography/Typography.jsx\";\r\nimport Icons from \"views/Icons/Icons.jsx\";\r\nimport NotificationsPage from \"views/Notifications/Notifications.jsx\";\r\n\r\nimport CasesPage from \"views/Cases/Cases.jsx\";\r\nimport NewCasePage from \"views/Cases/NewCase.jsx\";\r\nimport ClosedCasesPage from \"views/Cases/ClosedCases.jsx\";\r\nimport ClosedCaseInfoPage from \"views/Cases/CaseInfo/ClosedCaseInfoPage.jsx\";\r\nimport CaseInfoPage from \"views/Cases/CaseInfo/CaseInfoPage.jsx\";\r\n\r\nimport DocumentsOverviewPage from \"views/Documents/DocumentsOverview.jsx\";\r\nimport GeneralDocumentsPage from \"views/Documents/GeneralDocuments.jsx\";\r\nimport ContractsPage from \"views/Documents/Contracts.jsx\";\r\nimport InvoicesPage from \"views/Documents/Invoices.jsx\";\r\n\r\nimport OrdersPage from \"views/Orders/Orders.jsx\";\r\nimport GeneratePriceListPage from \"views/Orders/GeneratePriceList.jsx\";\r\nimport ApproveOrderPage from \"views/Orders/ApproveOrder.jsx\";\r\nimport NewOrderPage from \"views/Orders/NewOrder.jsx\";\r\nimport NewAddOnOrderPage from \"views/Orders/NewAddOnOrder.jsx\";\r\nimport OrderHistoryPage from \"views/Orders/OrderHistory.jsx\";\r\n\r\nimport SettingsOverviewPage from \"views/Settings/SettingsOverview.jsx\";\r\nimport SettingsGraphApiPage from \"views/Settings/SettingsGraphApi\";\r\n\r\nimport UCallManagerPage from \"views/UCallManager/UCallManager.jsx\";\r\n\r\nimport QueuesPage from \"views/UCallManager/Queues/Queues.jsx\";\r\nimport ViewQueuePage from \"views/UCallManager/Queues/ViewQueue/ViewQueue.jsx\";\r\nimport NewQueuePage from \"views/UCallManager/Queues/NewQueue.jsx\";\r\n\r\nimport AgentsPage from \"views/UCallManager/Agents.jsx\";\r\nimport HolidaysPage from \"views/UCallManager/Holidays.jsx\";\r\nimport VoicePromptsPage from \"views/UCallManager/VoicePrompts.jsx\";\r\n\r\nimport IVROverviewPage from \"views/UCallManager/IVR/IVROverview.jsx\";\r\nimport NewIVRPage from \"views/UCallManager/IVR/NewIVR/NewIVR.jsx\"\r\nimport IVRDetailsOverviewPage from \"views/UCallManager/IVR/IVRDetails/IVRDetailsOverview.jsx\";\r\n\r\nimport AudioLibraryOverviewPage from \"views/UCallManager/AudioLibrary/AudioLibraryOverview.jsx\";\r\n\r\nimport RecordingsPage from \"views/UCallManager/Recordings.jsx\";\r\nimport ReportingPage from \"views/UCallManager/Reporting.jsx\";\r\nimport CallDetailRecordsPage from \"views/UCallManager/CallDetailRecords.jsx\";\r\n\r\nimport Cookies from \"js-cookie\";\r\n\r\nconst dashboardRoutes = [\r\n // ------------------------ Customer Portal ------------------------\r\n // Home\r\n {\r\n path: \"/dashboard\",\r\n name: \"Home\",\r\n icon: Home,\r\n component: DashboardPage,\r\n parentRoute: null,\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: []\r\n },\r\n\r\n // Cases\r\n {\r\n path: \"/cases\",\r\n name: \"Cases\",\r\n icon: AllInbox,\r\n component: CasesPage,\r\n parentRoute: null,\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMINCASES\",\r\n \"PERSONALCASESONLY\",\r\n \"READALLCASES\",\r\n \"READALLCASESPERSONALWRITE\"\r\n ]\r\n },\r\n {\r\n path: \"/cases/new\",\r\n name: \"New Case\",\r\n icon: null,\r\n component: NewCasePage,\r\n parentRoute: \"/cases\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMINCASES\",\r\n \"PERSONALCASESONLY\",\r\n \"READALLCASESPERSONALWRITE\"\r\n ]\r\n },\r\n {\r\n path: \"/cases/closed\",\r\n name: \"Closed Cases\",\r\n icon: null,\r\n component: ClosedCasesPage,\r\n parentRoute: \"/cases\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMINCASES\",\r\n \"PERSONALCASESONLY\",\r\n \"READALLCASESPERSONALWRITE\"\r\n ]\r\n },\r\n {\r\n path: \"/cases/ticket\",\r\n name: \"Ticket\",\r\n icon: null,\r\n component: CaseInfoPage,\r\n parentRoute: \"/cases\",\r\n displayRoute: false,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMINCASES\",\r\n \"PERSONALCASESONLY\",\r\n \"READALLCASES\",\r\n \"READALLCASESPERSONALWRITE\"\r\n ]\r\n },\r\n {\r\n path: \"/cases/closedticket\",\r\n name: \"Ticket\",\r\n icon: null,\r\n component: ClosedCaseInfoPage,\r\n parentRoute: \"/cases\",\r\n displayRoute: false,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMINCASES\",\r\n \"PERSONALCASESONLY\",\r\n \"READALLCASES\",\r\n \"READALLCASESPERSONALWRITE\"\r\n ]\r\n },\r\n // Documents\r\n {\r\n path: \"/documents\",\r\n name: \"Documents\",\r\n icon: Folder,\r\n component: DocumentsOverviewPage,\r\n parentRoute: null,\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"UCP.DOCUMENTS.GENERAL.VIEW\",\r\n \"VIEWCONTRACTS\",\r\n \"ADMININVOICES\"\r\n ]\r\n },\r\n {\r\n path: \"/documents/general\",\r\n name: \"General\",\r\n icon: null,\r\n component: GeneralDocumentsPage,\r\n parentRoute: \"/documents\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"UCP.DOCUMENTS.GENERAL.VIEW\"\r\n ]\r\n },\r\n {\r\n path: \"/documents/contracts\",\r\n name: \"Contracts\",\r\n icon: null,\r\n component: ContractsPage,\r\n parentRoute: \"/documents\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"VIEWCONTRACTS\"\r\n ]\r\n },\r\n {\r\n path: \"/documents/invoices\",\r\n name: \"Invoices\",\r\n icon: null,\r\n component: InvoicesPage,\r\n parentRoute: \"/documents\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMININVOICES\"\r\n ]\r\n },\r\n\r\n // Orders\r\n {\r\n path: \"/orders\",\r\n name: \"Orders\",\r\n icon: ShoppingCart,\r\n component: OrdersPage,\r\n parentRoute: null,\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"READORDERS\",\r\n \"ADMINORDERS\"\r\n ]\r\n },\r\n {\r\n path: \"/orders/approval\",\r\n name: \"Approve order\",\r\n icon: null,\r\n component: ApproveOrderPage,\r\n parentRoute: \"/orders\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"UNIVERSALAPPROVEORDERS\"\r\n ]\r\n },\r\n {\r\n path: \"/orders/generatepricelist\",\r\n name: \"Generate price list\",\r\n icon: null,\r\n component: GeneratePriceListPage,\r\n parentRoute: \"/orders\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"UNIVERSALGENERATEPRICELIST\"\r\n ]\r\n },\r\n {\r\n path: \"/orders/new\",\r\n name: \"New order\",\r\n icon: null,\r\n component: NewOrderPage,\r\n parentRoute: \"/orders\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMINORDERS\"\r\n ]\r\n },\r\n /*{\r\n path: \"/orders/addons/new\",\r\n name: \"New add-on order\",\r\n icon: null,\r\n component: NewAddOnOrderPage,\r\n parentRoute: \"/orders\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"ADMINORDERS\"\r\n ]\r\n },*/\r\n {\r\n path: \"/orders/history\",\r\n name: \"Order history\",\r\n icon: null,\r\n component: OrderHistoryPage,\r\n parentRoute: \"/orders\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: [\r\n \"READORDERS\",\r\n \"ADMINORDERS\"\r\n ]\r\n },\r\n\r\n // Profile\r\n {\r\n path: \"/profile\",\r\n name: \"My Profile\",\r\n icon: null,\r\n component: UserProfile,\r\n parentRoute: \"\",\r\n displayRoute: false,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: []\r\n },\r\n\r\n // ------------------------ UCallManager ------------------------\r\n // Dashboard\r\n {\r\n path: \"/ucm\",\r\n name: \"uCallManager\",\r\n icon: Call,\r\n component: UCallManagerPage,\r\n parentRoute: null,\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: []\r\n },\r\n \r\n // Queues\r\n {\r\n path: \"/ucm/queues\",\r\n name: \"Queues\",\r\n icon: null,\r\n component: QueuesPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: [\r\n \"UCALLMANAGER.QUEUES.VIEW\",\r\n \"UCALLMANAGER.QUEUES.EDIT\"\r\n ]\r\n },\r\n {\r\n path: \"/ucm/queues/new\",\r\n name: \"New Queue\",\r\n icon: null,\r\n component: NewQueuePage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: false,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: [\"UCALLMANAGER.QUEUES.EDIT\"] \r\n },\r\n {\r\n path: \"/ucm/queues/view\",\r\n name: \"View Queue\",\r\n icon: null,\r\n component: ViewQueuePage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: false,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: [\r\n \"UCALLMANAGER.QUEUES.VIEW\",\r\n \"UCALLMANAGER.QUEUES.EDIT\"]\r\n },\r\n\r\n // Agents\r\n {\r\n path: \"/ucm/agents\",\r\n name: \"Agents\",\r\n icon: null,\r\n component: AgentsPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: [\r\n \"UCALLMANAGER.AGENTS.VIEW\",\r\n \"UCALLMANAGER.AGENTS.EDIT\",\r\n \"UCALLMANAGER.QUEUES.EDIT\"\r\n ]\r\n },\r\n\r\n // Holidays\r\n {\r\n path: \"/ucm/holidays\",\r\n name: \"Holidays\",\r\n icon: null,\r\n component: HolidaysPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\",\r\n ],\r\n portalPermissions: [\r\n \"UCALLMANAGER.HOLIDAYS.EDIT\",\r\n \"UCALLMANAGER.QUEUES.EDIT\",\r\n \"UCALLMANAGER.IVR.EDIT\"\r\n ]\r\n },\r\n\r\n // // Voice Prompts\r\n // {\r\n // path: \"/ucm/voiceprompts\",\r\n // name: \"Voice Prompts\",\r\n // icon: null,\r\n // component: VoicePromptsPage,\r\n // parentRoute: \"/ucm\",\r\n // displayRoute: true,\r\n // portalPermissionsMinimum: [\r\n // \"UCALLMANAGER.ACCESS\"\r\n // ],\r\n // portalPermissions: []\r\n // },\r\n\r\n // IVR\r\n {\r\n path: \"/ucm/ivr\",\r\n name: \"IVR\",\r\n icon: null,\r\n component: IVROverviewPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: [\r\n \"UCALLMANAGER.IVR.VIEW\",\r\n \"UCALLMANAGER.IVR.EDIT\"]\r\n },\r\n\r\n {\r\n path: \"/ucm/ivr/new\",\r\n name: \"New IVR\",\r\n icon: null,\r\n component: NewIVRPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: false,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\",\r\n \"UCALLMANAGER.IVR.EDIT\"\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n {\r\n path: \"/ucm/ivr/details\",\r\n name: \"IVR Details\",\r\n icon: null,\r\n component: IVRDetailsOverviewPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: false,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: [\r\n \"UCALLMANAGER.IVR.VIEW\",\r\n \"UCALLMANAGER.IVR.EDIT\"\r\n ]\r\n },\r\n\r\n // Audio Library\r\n {\r\n path: \"/ucm/audio\",\r\n name: \"Audio Library\",\r\n icon: null,\r\n component: AudioLibraryOverviewPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: [\r\n \"UCALLMANAGER.IVR.VIEW\",\r\n \"UCALLMANAGER.IVR.EDIT\",\r\n \"UCALLMANAGER.AUDIOLIBRARY.EDIT\"\r\n ]\r\n },\r\n \r\n // Call Recordings\r\n {\r\n path: \"/ucm/recordings\",\r\n name: \"Recordings\",\r\n icon: null,\r\n component: RecordingsPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\",\r\n \"UCALLMANAGER.CALLRECORDINGS.VIEW\"\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n // Reporting\r\n {\r\n path: \"/ucm/reporting\",\r\n name: \"Reporting\",\r\n icon: null,\r\n component: ReportingPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\"\r\n ],\r\n portalPermissions: []\r\n},\r\n\r\n // Call Detail Records\r\n {\r\n path: \"/ucm/calldetailrecords\",\r\n name: \"Call Detail Records\",\r\n icon: null,\r\n component: CallDetailRecordsPage,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\",\r\n \"UCALLMANAGER.CALLDETAILRECORDS.VIEW\"\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n // UWallboard (link to: https://uwallboard.com)\r\n {\r\n path: \"https://uwallboard.com?user=\", // token to uwallboard is added in sidebar.jsx\r\n name: \"uWallboard (Link)\",\r\n icon: null,\r\n component: null,\r\n parentRoute: \"/ucm\",\r\n displayRoute: true,\r\n isLink: true,\r\n portalPermissionsMinimum: [\r\n \"UCALLMANAGER.ACCESS\",\r\n \"UCALLMANAGER.UWALLBOARD.VIEW\"\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n \r\n // ------------------------ Customer Portal ------------------------\r\n // Service status (link to: https://status.universal.nl/);\r\n {\r\n path: \"https://status.universal.nl\",\r\n name: \"Service Status (Link)\",\r\n icon: CloudDone,\r\n component: null,\r\n parentRoute: null,\r\n displayRoute: true,\r\n isLink: true,\r\n portalPermissionsMinimum: [\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n // Universal DNS (link to: https://dns.universal.cloud);\r\n {\r\n path: \"https://dns.universal.cloud/\",\r\n name: \"Universal DNS (Link)\",\r\n icon: DNS,\r\n component: null,\r\n parentRoute: null,\r\n displayRoute: true,\r\n isLink: true,\r\n portalPermissionsMinimum: [\r\n \"UCP.DNS\"\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n // Control Cloud Service (link to: https://controlcloudservice.com/);\r\n {\r\n path: \"https://controlcloudservice.com/\",\r\n name: \"Control Cloud Service (Link)\",\r\n icon: CloudQueue,\r\n component: null,\r\n parentRoute: null,\r\n displayRoute: true,\r\n isLink: true,\r\n portalPermissionsMinimum: [\r\n \"ADMINCCS\"\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n // Skype Panel (link to: https://skype.controlcloudservice.com/);\r\n /*{\r\n path: \"https://skype.controlcloudservice.com/\",\r\n name: \"Skype Panel (Link)\",\r\n icon: Dashboard,\r\n component: null,\r\n parentRoute: null,\r\n displayRoute: true,\r\n isLink: true,\r\n portalPermissionsMinimum: [\r\n \"ADMINSKYPECCS\"\r\n ],\r\n portalPermissions: []\r\n },*/\r\n\r\n // Settings page\r\n {\r\n path: \"/settings\",\r\n name: \"Settings\",\r\n icon: Settings,\r\n component: SettingsOverviewPage,\r\n parentRoute: null,\r\n displayRoute: true,\r\n isLink: false,\r\n portalPermissionsMinimum: [\r\n \"UCP.SETTINGS.ACCESS\"\r\n ],\r\n portalPermissions: []\r\n },\r\n {\r\n path: \"/settings/graph-api\",\r\n name: \"Graph API\",\r\n icon: null,\r\n component: SettingsGraphApiPage,\r\n parentRoute: \"/settings\",\r\n displayRoute: true,\r\n isLink: false,\r\n portalPermissionsMinimum: [\r\n \"UCP.SETTINGS.ACCESS\",\r\n \"UCP.SETTINGS.GRAPHAPI.EDIT\"\r\n ],\r\n portalPermissions: []\r\n },\r\n\r\n // Link route example\r\n // {\r\n // path: \"/ucm/calldetailrecords\",\r\n // name: \"Call Detail Records (Link)\",\r\n // icon: null,\r\n // component: null,\r\n // parentRoute: \"/ucm\",\r\n // displayRoute: true,\r\n // isLink: true,\r\n // portalPermissionsMinimum: [\r\n // \"UCALLMANAGER.ACCESS\",\r\n // \"UCALLMANAGER.CALLDETAILRECORDS.VIEW\"\r\n // ],\r\n // portalPermissions: []\r\n // },\r\n\r\n // ------------------------ Samples ------------------------ \r\n // Default\r\n {\r\n path: \"/table\",\r\n name: \"Table List\",\r\n icon: \"content_paste\",\r\n component: TableList,\r\n parentRoute: null,\r\n displayRoute: false,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: []\r\n },\r\n {\r\n path: \"/typography\",\r\n name: \"Typography\",\r\n icon: LibraryBooks,\r\n component: Typography,\r\n parentRoute: null,\r\n displayRoute: false,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: []\r\n },\r\n {\r\n path: \"/icons\",\r\n name: \"Icons\",\r\n icon: BubbleChart,\r\n component: Icons,\r\n parentRoute: null,\r\n displayRoute: false,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: []\r\n },\r\n {\r\n path: \"/notifications\",\r\n name: \"Notifications\",\r\n icon: Notifications,\r\n component: NotificationsPage,\r\n parentRoute: null,\r\n displayRoute: false,\r\n portalPermissionsMinimum: [],\r\n portalPermissions: []\r\n }\r\n];\r\n\r\nexport default dashboardRoutes;\r\n","import {\r\n drawerWidth,\r\n transition,\r\n container\r\n} from \"assets/jss/material-dashboard-react.jsx\";\r\n\r\nconst appStyle = theme => ({\r\n wrapper: {\r\n position: \"relative\",\r\n top: \"0\",\r\n height: \"100vh\"\r\n },\r\n mainPanel: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: `calc(100% - ${drawerWidth}px)`\r\n },\r\n overflow: \"auto\",\r\n position: \"relative\",\r\n float: \"right\",\r\n ...transition,\r\n maxHeight: \"100%\",\r\n width: \"100%\",\r\n overflowScrolling: \"touch\",\r\n\r\n height: \"100vh\",\r\n display: \"flex\",\r\n flexDirection: \"column\"\r\n },\r\n content: {\r\n marginTop: \"70px\",\r\n [theme.breakpoints.up(\"md\")]:{\r\n padding: \"30px 15px\"\r\n },\r\n [theme.breakpoints.down(\"sm\")]:{\r\n padding: \"30px 0px\"\r\n },\r\n flex: \"1\"\r\n //minHeight: \"calc(100vh - 200px)\"\r\n },\r\n container,\r\n map: {\r\n marginTop: \"70px\"\r\n }\r\n});\r\n\r\nexport default appStyle;\r\n","/* eslint-disable */\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.jsx\";\r\nimport Footer from \"components/Footer/Footer.jsx\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.jsx\";\r\nimport LoadingIndicator from \"components/LoadingIndicator/LoadingIndicator.jsx\";\r\nimport ErrorIndicator from \"components/ErrorIndicator/ErrorIndicator.jsx\";\r\n\r\n// Extra libs\r\nimport Cookies from \"js-cookie\";\r\n\r\nimport routes from \"routes.js\";\r\n\r\nimport dashboardStyle from \"assets/jss/material-dashboard-react/layouts/dashboardStyle.jsx\";\r\n\r\nimport image from \"assets/img/sidebar-2.jpg\";\r\nimport globalData from \"variables/globalData.jsx\";\r\nimport Constants from \"variables/constants.jsx\"\r\n\r\nimport { connect } from \"react-redux\";\r\nimport { addArticle } from \"../stateManagement/actions/index\";\r\n\r\nconst switchRoutes = (\r\n \r\n {\r\n routes.map((prop, key) => \r\n {\r\n return (\r\n \r\n);\r\n\r\nconst mapStateToProps = state => {\r\n return { articles: state.articles };\r\n};\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n addArticle: article => dispatch(addArticle(article))\r\n };\r\n}\r\n\r\nclass Dashboard extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n this.state = \r\n {\r\n error: null,\r\n isLoaded: false,\r\n\r\n image: image,\r\n color: \"neutral\",\r\n hasImage: true,\r\n fixedClasses: \"dropdown show\",\r\n mobileOpen: false\r\n };\r\n }\r\n\r\n handleImageClick = image => \r\n {\r\n this.setState({ image: image });\r\n };\r\n\r\n handleColorClick = color => \r\n {\r\n this.setState({ color: color });\r\n };\r\n\r\n handleFixedClick = () => \r\n {\r\n if (this.state.fixedClasses === \"dropdown\") {\r\n this.setState({ fixedClasses: \"dropdown show\" });\r\n } else {\r\n this.setState({ fixedClasses: \"dropdown\" });\r\n }\r\n };\r\n \r\n handleDrawerToggle = () => \r\n {\r\n this.setState({ mobileOpen: !this.state.mobileOpen });\r\n };\r\n\r\n resizeFunction = () => \r\n {\r\n if (window.innerWidth >= 960) {\r\n this.setState({ mobileOpen: false });\r\n }\r\n };\r\n\r\n componentDidMount() \r\n {\r\n // TODO: Make use of util method\r\n var token = Cookies.get(\"auth\");\r\n\r\n fetch(Constants.ApiBaseUrl + \"users/me\",\r\n {\r\n headers:\r\n {\r\n \"Authorization\": \"Bearer \" + token\r\n }\r\n })\r\n .then((response) => \r\n {\r\n if (response.status !== 200)\r\n {\r\n throw new Error(response.status);\r\n }\r\n\r\n return response.json()\r\n })\r\n .then((result) => \r\n {\r\n // Store user data globally\r\n globalData.loggedInUser = result;\r\n\r\n this.setState(\r\n {\r\n isLoaded:true\r\n });\r\n\r\n if (navigator.platform.indexOf(\"Win\") > -1) {\r\n const ps = new PerfectScrollbar(this.refs.mainPanel);\r\n }\r\n window.addEventListener(\"resize\", this.resizeFunction);\r\n },\r\n (error) =>\r\n {\r\n this.setState(\r\n {\r\n isLoaded: true,\r\n error: error\r\n });\r\n });\r\n } \r\n\r\n componentDidUpdate(e) \r\n {\r\n if (e.history.location.pathname !== e.location.pathname) {\r\n this.refs.mainPanel.scrollTop = 0;\r\n if (this.state.mobileOpen) {\r\n this.setState({ mobileOpen: false });\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() \r\n { \r\n window.removeEventListener(\"resize\", this.resizeFunction);\r\n }\r\n\r\n render() \r\n {\r\n const { error, isLoaded } = this.state;\r\n const { classes, ...rest } = this.props;\r\n\r\n if (!isLoaded)\r\n {\r\n return \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(ResetPasswordPage);\r\n","/* eslint-disable */\r\nimport React from \"react\";\r\nimport { Redirect } from \"react-router-dom\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\n\r\n// core components\r\nimport CustomInput from \"components/CustomInput/CustomInput.jsx\";\r\nimport Button from \"components/CustomButtons/Button.jsx\";\r\nimport Card from \"components/Card/Card.jsx\";\r\nimport CardHeader from \"components/Card/CardHeader.jsx\";\r\nimport Danger from \"components/Typography/Danger.jsx\";\r\nimport CardBody from \"components/Card/CardBody.jsx\";\r\nimport CardFooter from \"components/Card/CardFooter.jsx\";\r\n\r\n// Extra libs\r\nimport Constants from \"variables/constants.jsx\"\r\n\r\nconst styles = \r\n{\r\n cardTitleWhite: \r\n {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nclass SetNewPasswordPage extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n\r\n this.state = \r\n {\r\n error: null, \r\n\r\n submittingPasswords: false, \r\n requestSuccessful: false,\r\n loginPageRedictCount: 5,\r\n\r\n password: \"\",\r\n repeatPassword: \"\"\r\n }\r\n }\r\n\r\n submitPasswords = () =>\r\n { \r\n const { password } = this.state\r\n \r\n this.setState({submittingPasswords: true, error: null})\r\n\r\n // Check if passwords are equal\r\n if (!this.checkPasswordsAreEqual())\r\n {\r\n this.setState(\r\n {\r\n error: \"Oops, the two passwords you entered are not equal.\", \r\n submittingPasswords: false\r\n })\r\n return;\r\n }\r\n\r\n // Get registration key from url\r\n var url = new URL(window.location.href);\r\n var registrationKey = url.searchParams.get(\"validate\");\r\n\r\n if (!registrationKey)\r\n {\r\n this.setState(\r\n {\r\n error: \"Your registration key is missing.\", \r\n submittingPasswords: false\r\n })\r\n return;\r\n }\r\n\r\n // Create request body\r\n var requestBody = {\r\n \"RegistrationKey\": registrationKey,\r\n \"Password\": password\r\n }\r\n\r\n // Send request to API\r\n fetch(Constants.ApiBaseUrl + \"registration/newpassword\", \r\n {\r\n method: \"POST\",\r\n headers:\r\n {\r\n \"Content-Type\": \"application/json\"\r\n },\r\n body: JSON.stringify(requestBody)\r\n })\r\n .then((response) => \r\n {\r\n response.json().then((result) =>\r\n {\r\n if (response.status !== 200)\r\n { \r\n throw new Error(result);\r\n }\r\n\r\n this.setState(\r\n {\r\n submittingPasswords: false,\r\n requestSuccessful: true\r\n })\r\n\r\n this.redirectToLoginPageCountDown();\r\n })\r\n .catch((error) =>\r\n {\r\n this.setState(\r\n {\r\n error: error.message, \r\n submittingPasswords: false\r\n })\r\n });\r\n })\r\n }\r\n\r\n redirectToLoginPageCountDown = () =>\r\n {\r\n var timerCounter = 4;\r\n\r\n var timer = setInterval(function() \r\n {\r\n this.setState(\r\n {\r\n loginPageRedictCount: timerCounter\r\n })\r\n\r\n timerCounter--;\r\n\r\n // If the count down is finished, write some text\r\n if (timerCounter < 0) {\r\n clearInterval(timer);\r\n }\r\n }.bind(this), 1000);\r\n }\r\n\r\n checkPasswordsAreEqual = () =>\r\n {\r\n const { password, repeatPassword } = this.state\r\n\r\n if (!password || !repeatPassword)\r\n {\r\n return false;\r\n }\r\n\r\n return (password === repeatPassword);\r\n }\r\n\r\n render() \r\n { \r\n const { error, submittingPasswords, requestSuccessful, loginPageRedictCount } = this.state\r\n const { classes } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(SetNewPasswordPage);\r\n","/* eslint-disable */\r\nimport React from \"react\";\r\nimport { Switch, Route } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\n\r\nimport AzureAuthentication from \"views/Authentication/Azure.jsx\";\r\nimport ResetPassword from \"views/Authentication/ResetPassword.jsx\";\r\nimport SetNewPassword from \"views/Authentication/SetNewPassword.jsx\";\r\nimport BackgroundImage from \"assets/img/background-1.jpg\";\r\n\r\nclass External extends React.Component \r\n{\r\n constructor(props) \r\n {\r\n super(props);\r\n }\r\n\r\n render() \r\n { \r\n var containerDivStyle = \r\n {\r\n height: \"100%\",\r\n background: \"url(\" + BackgroundImage + \") no-repeat\",\r\n backgroundSize: \"cover\",\r\n backgroundPosition: \"center center\",\r\n backgroundAttachment: \"fixed\"\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n\r\n\r\n );\r\n }\r\n}\r\n\r\nexport default (External);\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { PublicClientApplication } from \"@azure/msal-browser\";\r\nimport { MsalProvider } from \"@azure/msal-react\";\r\nimport { createBrowserHistory } from \"history\";\r\nimport { Router, Route, Switch, Redirect } from \"react-router-dom\";\r\nimport { msalConfig } from \"./utils/azuread/authConfig\";\r\nimport { Provider } from \"react-redux\";\r\nimport store from \"./stateManagement/store/index\";\r\nimport AzureAuthentication from \"views/Authentication/Azure.jsx\";\r\nimport AzureAuthenticationLogout from \"views/Authentication/Azure.jsx\";\r\n\r\n// core components\r\nimport Admin from \"layouts/Admin.jsx\";\r\nimport External from \"layouts/External.jsx\";\r\n\r\n// Extra libs\r\nimport Cookies from \"js-cookie\";\r\n\r\nimport \"assets/css/material-dashboard-react.css?v=1.6.0\";\r\n\r\nconst hist = createBrowserHistory();\r\n\r\nconst PrivateRoute = ({ component: Component, ...rest }) => (\r\n \r\n (\r\n tokenIsValid() \r\n ? \r\n \r\n)\r\n\r\n// TODO: Better way of checking if token is valid.\r\nfunction tokenIsValid()\r\n{\r\n var token = Cookies.get(\"auth\");\r\n\r\n if (token)\r\n {\r\n return true;\r\n }\r\n else\r\n {\r\n return false; \r\n }\r\n}\r\n\r\nexport const msalInstance = new PublicClientApplication(msalConfig);\r\n\r\nReactDOM.render(\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n","// TODO: Replace with redux\r\nvar loggedInUser = null;\r\nvar currentlyViewingQueue = null;\r\n \r\nmodule.exports = \r\n{\r\n loggedInUser,\r\n currentlyViewingQueue\r\n};\r\n ","//const ApiBaseUrl = \"https://localhost:44328/api/\";\r\nconst ApiBaseUrl = \"https://portal.universal.cloud/api/api/\";\r\n\r\nmodule.exports = \r\n{\r\n ApiBaseUrl\r\n}","\r\n/**\r\n * Check if the actualPermissions array contains any permissions from the allowedPermissions array.\r\n * @param {string[]} allowedPermissions Array containing allowed permissions\r\n * @param {string[]} actualPermissions Array containing actual permissions of a user.\r\n * @returns True if actualPermissions contains any permissions from the allowedPermissions array.\r\n */\r\nfunction userHasAnyRequiredPermissions(allowedPermissions, actualPermissions)\r\n{\r\n // If no allowedPermissions are defined, return true (wildcard)\r\n if (allowedPermissions.length === 0)\r\n {\r\n return true;\r\n }\r\n\r\n for (var i = 0; i < allowedPermissions.length; i++)\r\n {\r\n if (actualPermissions.includes(allowedPermissions[i]))\r\n {\r\n return true;\r\n } \r\n }\r\n\r\n return false;\r\n}\r\n\r\n/**\r\n * Check if the actualPermissions array contains all permissions from the allowedPermissions array.\r\n * @param {string[]} requiredPermissions Array containing required permissions\r\n * @param {string[]} actualPermissions Array containing actual permissions of a user.\r\n * @returns True if actualPermissions contains all permissions from the allowedPermissions array.\r\n */\r\nfunction userHasAllRequiredPermissions(requiredPermissions, actualPermissions)\r\n{\r\n // If no requiredPermissions are defined, return true (wildcard)\r\n if (requiredPermissions.length === 0)\r\n {\r\n return true;\r\n }\r\n\r\n for (var i = 0; i < requiredPermissions.length; i++)\r\n {\r\n if (!actualPermissions.includes(requiredPermissions[i]))\r\n {\r\n return false;\r\n } \r\n }\r\n \r\n return true;\r\n}\r\n\r\nmodule.exports =\r\n{\r\n userHasAnyRequiredPermissions,\r\n userHasAllRequiredPermissions\r\n};"],"sourceRoot":""}