- \n {items.reduce(\n (acc, item) =>\n reduceChildRoutes({\n acc,\n item,\n navOpen,\n ...rest,\n }),\n []\n )}\n
\n {navOpen ? (\n \n {\n localStorage.setItem('navOpen', !navOpen);\n setNavOpen(!navOpen);\n window.dispatchEvent(new Event('storage'));\n }}\n >\n \n {\n localStorage.setItem('navOpen', !navOpen);\n setNavOpen(!navOpen);\n window.dispatchEvent(new Event('storage'));\n }}\n >\n
\n )}\n \n );\n\n return (\n <>\n \n \n\n {explode && (\n setExplode(false)}\n recycle={false}\n initialVelocityY={-20}\n />\n )}\n
\n )}\n \n );\n}\n\nBadgeUnlock.propTypes = {\n badge: PropTypes.object,\n showBadge: PropTypes.bool,\n handleBadgeClosed: PropTypes.func,\n};\n\nexport default BadgeUnlock;\n","import React, { useRef, useState, useEffect } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Avatar,\n Box,\n Button,\n IconButton,\n List,\n ListItem,\n ListItemAvatar,\n ListItemText,\n Popover,\n SvgIcon,\n Tooltip,\n Typography,\n makeStyles,\n useTheme,\n Badge,\n} from '@material-ui/core';\nimport { Bell as BellIcon, MessageCircle as MessageIcon } from 'react-feather';\nimport { getNotifications } from 'src/actions/notificationsActions';\nimport axios from 'src/utils/axios';\nimport BadgeUnlock from 'src/components/BadgeUnlock';\n\nconst useStyles = makeStyles((theme) => ({\n popover: {\n width: 320,\n },\n icon: {\n backgroundColor: theme.palette.secondary.main,\n color: theme.palette.secondary.contrastText,\n },\n badge: {\n fontSize: 10,\n borderRadius: 5,\n marginTop: 10,\n marginRight: 5,\n },\n}));\n\nfunction Notifications() {\n const classes = useStyles();\n const notifications = useSelector((state) => state.notifications.notifications);\n const ref = useRef(null);\n const dispatch = useDispatch();\n const [isOpen, setOpen] = useState(false);\n const theme = useTheme();\n const [loaded, setLoaded] = useState(false);\n const [badge, setBadge] = useState();\n const [showBadge, setShowBadge] = useState(false);\n\n const handleBadgeClosed = () => {\n setShowBadge(false);\n\n axios\n .put(`/api/notification/${badge.notificationId}/markAsRead`)\n .then(() => {\n dispatch(getNotifications());\n setOpen(false);\n })\n .catch((error) => {\n console.error(error);\n setOpen(false);\n });\n };\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleClick = (notification) => {\n if (notification.portalSeen) {\n setOpen(false);\n return;\n }\n\n axios\n .put(`/api/notification/${notification.id}/markAsRead`)\n .then(() => {\n dispatch(getNotifications());\n setOpen(false);\n })\n .catch((error) => {\n console.error(error);\n setOpen(false);\n });\n };\n\n const markAllAsRead = () => {\n if (notifications.filter((x) => !x.portalSeen).length === 0) {\n setOpen(false);\n return;\n }\n\n axios\n .put('/api/notification/markAllAsRead', null)\n .then(() => {\n dispatch(getNotifications());\n setOpen(false);\n })\n .catch((error) => {\n console.error(error);\n setOpen(false);\n });\n };\n\n useEffect(() => {\n let interval = null;\n interval = setInterval(() => {\n dispatch(getNotifications());\n }, 30000);\n\n return () => clearInterval(interval);\n }, [dispatch]);\n\n useEffect(() => {\n setLoaded(false);\n dispatch(getNotifications());\n }, [loaded, dispatch]);\n\n useEffect(() => {\n setShowBadge(false);\n\n const badgesAwarded = notifications.filter(\n (x) => !x.portalSeen && x.portalTitle === 'Badge Awarded'\n );\n if (badgesAwarded.length > 0) {\n let newBadge = null;\n if (badgesAwarded[0].extraDetails) {\n newBadge = JSON.parse(badgesAwarded[0].extraDetails);\n newBadge.notificationId = badgesAwarded[0].id;\n }\n\n setBadge(newBadge);\n setShowBadge(true);\n }\n }, [notifications]);\n\n return (\n <>\n - \n {notifications.map((notification) => (\n
\n
\n \n setMobileNavOpen(true)} />\n setMobileNavOpen(false)}\n openMobile={isMobileNavOpen}\n />\n
\n );\n}\n\nDashboardLayout.propTypes = {\n children: PropTypes.any\n};\n\nexport default DashboardLayout;\n","import React, {\n useRef,\n useState\n} from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { useHistory } from 'react-router';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useSnackbar } from 'notistack';\nimport {\n Avatar,\n Box,\n ButtonBase,\n Hidden,\n Menu,\n MenuItem,\n Typography,\n makeStyles\n} from '@material-ui/core';\nimport { logout } from 'src/actions/accountActions';\n\nconst useStyles = makeStyles((theme) => ({\n avatar: {\n height: 32,\n width: 32,\n marginRight: theme.spacing(1)\n },\n popover: {\n width: 200\n }\n}));\n\nfunction Account() {\n const classes = useStyles();\n const history = useHistory();\n const ref = useRef(null);\n const dispatch = useDispatch();\n const account = useSelector((state) => state.account);\n const { enqueueSnackbar } = useSnackbar();\n const [isOpen, setOpen] = useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleLogout = async () => {\n try {\n handleClose();\n await dispatch(logout());\n history.push('/');\n } catch (error) {\n enqueueSnackbar('Unable to logout', {\n variant: 'error'\n });\n }\n };\n\n return (\n <>\n \n
\n \n
\n \n {children}\n
\n - \n {items.reduce(\n (acc, item) =>\n reduceChildRoutes({\n acc,\n item,\n actionRequired,\n ...rest,\n }),\n []\n )}\n
\n setMobileNavOpen(true)} />\n setMobileNavOpen(false)}\n openMobile={isMobileNavOpen}\n />\n
\n );\n}\n\nCustomerPortalLayout.propTypes = {\n children: PropTypes.any\n};\n\nexport default CustomerPortalLayout;\n","import React, {\n useRef,\n useState\n} from 'react';\nimport { useHistory } from 'react-router';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useSnackbar } from 'notistack';\nimport {\n Avatar,\n Box,\n ButtonBase,\n Hidden,\n Menu,\n MenuItem,\n Typography,\n makeStyles\n} from '@material-ui/core';\nimport { logout } from 'src/actions/accountActions';\n\nconst useStyles = makeStyles((theme) => ({\n avatar: {\n height: 32,\n width: 32,\n marginRight: theme.spacing(1)\n },\n popover: {\n width: 200\n }\n}));\n\nfunction Account() {\n const classes = useStyles();\n const history = useHistory();\n const ref = useRef(null);\n const dispatch = useDispatch();\n const account = useSelector((state) => state.account);\n const { enqueueSnackbar } = useSnackbar();\n const [isOpen, setOpen] = useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleLogout = async () => {\n try {\n handleClose();\n await dispatch(logout());\n history.push('/');\n } catch (error) {\n enqueueSnackbar('Unable to logout', {\n variant: 'error'\n });\n }\n };\n\n return (\n <>\n \n
\n \n
\n \n {children}\n
\n - \n {items.reduce(\n (acc, item) => reduceChildRoutes({\n acc, item, actionRequired, ...rest\n }),\n []\n )}\n
\n setMobileNavOpen(true)} />\n setMobileNavOpen(false)}\n openMobile={isMobileNavOpen}\n />\n
\n );\n}\n\nExternalSupportPortalLayout.propTypes = {\n children: PropTypes.any\n};\n\nexport default ExternalSupportPortalLayout;\n","import React, {\n useState,\n useEffect\n} from 'react';\nimport {\n Box,\n Button,\n Portal,\n Typography,\n makeStyles,\n Dialog,\n DialogTitle,\n DialogContent,\n} from '@material-ui/core';\nimport { useSelector } from 'react-redux';\nimport LoginView from 'src/views/auth/LoginView';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.common.black,\n color: theme.palette.common.white,\n maxWidth: 600,\n position: 'fixed',\n bottom: 0,\n left: 0,\n margin: theme.spacing(3),\n padding: theme.spacing(3),\n outline: 'none',\n zIndex: 2000\n },\n action: {\n backgroundColor: theme.palette.common.white,\n color: theme.palette.common.black,\n marginLeft: 10,\n }\n}));\n\nfunction NewsLoginNotification() {\n const classes = useStyles();\n const [open, setOpen] = useState(false);\n const [loginOpen, setLoginOpen] = useState(false);\n const account = useSelector((state) => state.account);\n const [ignoreNewsLogin, setIgnoreNewsLogin] = useState(localStorage.getItem('ignoreNewsLogin') === 'true');\n\n const handleLogin = () => {\n setLoginOpen(true);\n };\n\n useEffect(() => {\n if (account?.user === null && !ignoreNewsLogin) {\n setOpen(true);\n }\n }, [ignoreNewsLogin, account]);\n\n useEffect(() => {\n const ignoreNewsLoginChanged = () => {\n setIgnoreNewsLogin(localStorage.getItem('ignoreNewsLogin') === 'true');\n if (localStorage.getItem('loggedInUser') !== null) {\n setOpen(false);\n }\n };\n\n window.addEventListener('storage', ignoreNewsLoginChanged);\n\n return () => {\n window.removeEventListener('storage', ignoreNewsLoginChanged);\n };\n }, []);\n\n if (!open) {\n return null;\n }\n\n const ignoreClick = () => {\n localStorage.setItem('ignoreNewsLogin', true);\n window.dispatchEvent(new Event('storage'));\n setOpen(false);\n };\n\n return (\n <>\n \n\n \n
\n \n
\n \n {children}\n
\n \n \n Please login with your ConnectX account to gain access to all the\n ConnectX News features, such as Favourites, Relevant Articles and more.\n\n \n \n \n Login\n \n\n \n Next Time\n \n \n
\n - \n {items.reduce(\n (acc, item) => reduceChildRoutes({\n acc, item, ...rest\n }),\n []\n )}\n
\n setMobileNavOpen(true)} />\n setMobileNavOpen(false)}\n openMobile={isMobileNavOpen}\n />\n
\n );\n}\n\nNewsPortalLayout.propTypes = {\n children: PropTypes.any\n};\n\nexport default NewsPortalLayout;\n","import React from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport {\n AppBar,\n Box,\n Toolbar,\n makeStyles,\n} from '@material-ui/core';\nimport Logo from 'src/components/Logo';\nimport { THEMES } from 'src/constants';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n zIndex: theme.zIndex.drawer + 100,\n ...theme.name === THEMES.LIGHT ? {\n boxShadow: 'none',\n backgroundColor: theme.palette.primary.main\n } : {},\n ...theme.name === THEMES.ONE_DARK ? {\n backgroundColor: theme.palette.background.default\n } : {}\n },\n toolbar: {\n minHeight: 64\n },\n input: {\n color: 'black'\n }\n}));\n\nfunction TopBar({\n className,\n ...rest\n}) {\n const classes = useStyles();\n\n const getTo = () => {\n if (window.location.pathname.startsWith('/menu/help')) {\n return '/menu/help';\n }\n\n return '/menu/roadmap';\n };\n\n return (\n \n
\n \n
\n \n {children}\n
\n \n
\n );\n}\n\nMenuLayout.propTypes = {\n children: PropTypes.any\n};\n\nexport default MenuLayout;\n","import React from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n AppBar,\n Box,\n Button,\n Divider,\n Toolbar,\n Hidden,\n Typography,\n Link,\n makeStyles\n} from '@material-ui/core';\nimport { APP_VERSION } from 'src/config';\nimport Logo from 'src/components/Logo';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.background.default\n },\n toolbar: {\n height: 64\n },\n logo: {\n marginRight: theme.spacing(2)\n },\n link: {\n fontWeight: theme.typography.fontWeightMedium,\n '& + &': {\n marginLeft: theme.spacing(2)\n }\n },\n divider: {\n width: 1,\n height: 32,\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2)\n }\n}));\n\nfunction TopBar({ className, ...rest }) {\n const classes = useStyles();\n\n return (\n \n
\n \n
\n \n {children}\n
\n \n
\n );\n}\n\nMainLayout.propTypes = {\n children: PropTypes.any\n};\n\nexport default MainLayout;\n","import React, { useEffect } from 'react';\nimport NProgress from 'nprogress';\nimport { Box, LinearProgress, makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n alignItems: 'center',\n backgroundColor: theme.palette.background.default,\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n justifyContent: 'center',\n minHeight: '100%',\n padding: theme.spacing(3)\n }\n}));\n\nfunction LoadingScreen() {\n const classes = useStyles();\n\n useEffect(() => {\n NProgress.start();\n\n return () => {\n NProgress.done();\n };\n }, []);\n\n return (\n \n
\n \n
\n \n {children}\n
\n \n \n \n
\n );\n}\n\nexport default LoadingScreen;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { Redirect } from 'react-router-dom';\nimport PropTypes from 'prop-types';\n\nconst AuthGuard = ({ children }) => {\n const account = useSelector((state) => state.account);\n\n if (!account.user) {\n if (window.location.pathname === '/app/reports/Dashboard') {\n return \n\n handleColourClose(false)}\n >\n \n setSelectedColour(color.hex)} />\n \n \n \n \n \n \n\n \n \n\n {!loaded || queues === undefined\n ? (\n \n
\n );\n});\n\nexport default QueueList;\n","import React from 'react';\nimport { Typography } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nfunction BadgeIcon({\n OverlayIcon, colour, number, width, height, numberSize\n}) {\n const imageContainerStyle = {\n position: 'relative',\n width: width ?? '200px',\n height: height ?? '200px',\n };\n\n const imageStyle = {\n position: 'absolute',\n width: '100%',\n height: '100%',\n };\n\n const overlayStyle = {\n position: 'absolute',\n width: '50%',\n height: '50%',\n marginLeft: '25%',\n marginTop: '25%',\n color: 'black',\n };\n\n const overlayLevel = {\n position: 'absolute',\n width: '30%',\n height: '30%',\n marginLeft: '55%',\n marginTop: 2,\n color: 'black',\n };\n\n const overlayNumber = {\n position: 'absolute',\n marginLeft: '65%',\n marginTop: '6%',\n color: 'black',\n fontSize: numberSize ?? '',\n };\n\n const getImage = () => {\n if (colour === 'green') {\n return (\n \n {!q\n ? (\n x.id.toString() === (queueId === 'all' ? 0 : queueId))[0]?.name ?? ''}\n tickets={tickets.allIds.length}\n />\n )\n : null}\n \n \n {q && tickets.allTickets.length === 0 && tickets.parserErrors.length === 0 && (\n
\n \n
\n )}\n ![\"\"](\"/static/images/greenBadge.png\")
\n );\n }\n\n if (colour === 'orange') {\n return (\n ![\"\"](\"/static/images/orangeBadge.png\")
\n );\n }\n\n if (colour === 'purple') {\n return (\n ![\"\"](\"/static/images/purpleBadge.png\")
\n );\n }\n\n if (colour === 'red') {\n return (\n ![\"\"](\"/static/images/redBadge.png\")
\n );\n }\n\n return ![\"\"](\"/static/images/blueBadge.png\")
;\n };\n\n return (\n \n
\n );\n}\n\nBadgeIcon.propTypes = {\n OverlayIcon: PropTypes.any.isRequired,\n colour: PropTypes.string,\n number: PropTypes.number,\n width: PropTypes.number,\n height: PropTypes.number,\n numberSize: PropTypes.number,\n};\n\nexport default BadgeIcon;\n","import React, { useState } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { useParams } from 'react-router';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport {\n IconButton,\n makeStyles,\n TableRow,\n TableCell,\n Button,\n Link,\n Typography,\n Menu,\n MenuItem,\n} from '@material-ui/core';\nimport moment from 'moment';\nimport * as Icons from '@material-ui/icons';\n\nfunction getTo(params, ticketId) {\n const { queueId } = params;\n const baseUrl = '/app/queue';\n\n if (queueId) {\n return `${baseUrl}/${queueId}/${ticketId}`;\n }\n\n return `${baseUrl}/all/${ticketId}`;\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.background.default,\n padding: theme.spacing(2),\n borderBottom: `1px solid ${theme.palette.divider}`,\n alignItems: 'center',\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n cursor: 'pointer',\n textDecoration: 'none',\n },\n cell: {\n borderBottom: 'none',\n padding: 0,\n overflow: 'hidden',\n },\n link: {\n display: 'block',\n padding: theme.spacing(1) + 1000,\n margin: -1000,\n textDecoration: 'none',\n '&:hover': {\n textDecoration: 'none',\n },\n },\n link2: {\n display: 'block',\n padding: theme.spacing(1) + 1000,\n margin: -1000,\n textDecoration: 'underline',\n },\n}));\n\nconst QueueItem = ({\n className,\n ticket,\n allColumns,\n setRowColour,\n clearRowColour,\n ...rest\n}) => {\n const classes = useStyles();\n const params = useParams();\n const to = getTo(params, ticket.id);\n\n const [showRightClickMenu, setShowRightClickMenu] = useState(false);\n const [anchorEl, setAnchorEl] = React.useState(null);\n\n const getIcon = (name, colour) => {\n const Icon = Icons[name];\n if (colour !== null) return \n {getImage()}\n\n \n {number}\n \n \n )}\n
\n \n \n \n \n \n \n \n \n\n \n \n {avaliableColumns.map((column) => (\n\n x.key === column).length > 0} onChange={handleColumnChange} name={column} />}\n label={column}\n />\n ))}\n \n\n \n\n \n\n \n \n \n\n \n\n \n \n Name\n \n\n setName(e.target.value)}\n style={{ marginBottom: 10 }}\n />\n\n \n\n \n \n Filter\n \n\n setFilter(e.target.value)}\n style={{ marginBottom: 10 }}\n />\n\n \n\n \n \n Order By\n \n\n setOrderBy(e.target.value)}\n style={{ marginBottom: 10 }}\n />\n\n \n\n \n Order By Direction \n setOrderByDirection(e.target.value)}>\n \n \n \n
\n );\n});\n\n\nQueueEditNew.propTypes = {\n id: PropTypes.string.isRequired,\n};\n\n\nexport default QueueEditNew;\n","import React from 'react';\n\nfunction OCLogo(props) {\n return (\n ![\"EdgePOSLogo\"](\"/static/EdgePOSLogo.png\")
;\n}\n\nexport default EdgePOSLogo;\n","import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport clsx from 'clsx';\nimport * as Yup from 'yup';\nimport PropTypes from 'prop-types';\nimport { Formik } from 'formik';\nimport {\n Box,\n Button,\n TextField,\n FormHelperText,\n makeStyles\n} from '@material-ui/core';\nimport { login } from 'src/actions/accountActions';\n\nconst useStyles = makeStyles(() => ({\n root: {}\n}));\n\nfunction LoginForm({ className, onSubmitSuccess, ...rest }) {\n const classes = useStyles();\n const dispatch = useDispatch();\n\n return (\n