\n setAvatarHover(true)}\n onMouseLeave={() => setAvatarHover(false)}\n >\n \n {getInitials(name)}\n \n \n { isUploading ? (\n \n \n \n \n )}\n \n \n { avatarError && (\n \n {t(\"The image must be smaller than 5 MB\")}\n \n )}\n \n \n { imageUrl && (\n \n )}\n \n
\n )\n}\n\nAvatarPicker.propTypes = {\n className: PropTypes.string,\n name: PropTypes.string,\n imageUrl: PropTypes.string,\n variant: PropTypes.oneOf([\"rounded\", \"circular\"]),\n onAvatarSelected: PropTypes.func.isRequired,\n onAvatarCleared: PropTypes.func,\n isUploading: PropTypes.bool,\n uploadProgress: PropTypes.number,\n classes: PropTypes.object\n}\n\nAvatarPicker.defaultProps = {\n variant: \"circular\",\n isUploading: false,\n classes: {},\n onAvatarSelected: () => {},\n onAvatarCleared: () => {}\n};\n\nexport default AvatarPicker;","import AvatarPicker from \"./AvatarPicker\";\n\nexport default AvatarPicker;","// TODO: Delete\nexport const LANGUAGES = [\n {label: \"English\", code: \"en\"},\n {label: \"Čeština\", code: \"cs\"},\n {label: \"Deutsch\", code: \"de\"},\n {label: \"Slovenčina\", code: \"sk\"},\n {label: \"Polski\", code: \"pl\"},\n {label: \"Magyar\", code: \"hu\"},\n {label: \"Français\", code: \"fr\"},\n {label: \"Español\", code: \"es\"},\n {label: \"Português\", code: \"pt\"},\n {label: \"Italiano\", code: \"it\"},\n {label: \"Nederlands \", code: \"nl\"},\n {label: \"Dansk \", code: \"da\"},\n {label: \"Norsk \", code: \"no\"},\n {label: \"Suomi \", code: \"fi\"},\n {label: \"Svenska \", code: \"sv\"},\n {label: \"Română \", code: \"ro\"},\n {label: \"Slovenščina \", code: \"sl\"},\n {label: \"Hrvatski \", code: \"hr\"},\n {label: \"Latviešu \", code: \"lv\"},\n {label: \"Eesti \", code: \"et\"},\n {label: \"Pусский \", code: \"ru\"},\n {label: \"Українська \", code: \"uk\"},\n {label: \"български език\", code: \"bg\"},\n {label: \"ελληνικά\", code: \"el\"}\n];\n\nexport const LANGUAGE_LABELS = {\n en: \"English\",\n cs: \"Čeština\",\n de: \"Deutsch\",\n sk: \"Slovenčina\",\n pl: \"Polski\",\n hu: \"Magyar\",\n fr: \"Français\",\n es: \"Español\",\n pt: \"Português\",\n it: \"Italiano\",\n nl: \"Nederlands\",\n da: \"Dansk\",\n no: \"Norsk\",\n fi: \"Suomi\",\n sv: \"Svenska\",\n ro: \"Română\",\n sl: \"Slovenščina\",\n hr: \"Hrvatski\",\n lv: \"Latviešu\",\n et: \"Eesti\",\n ru: \"Pусский\",\n uk: \"Українська\",\n bg: \"български език\",\n el: \"ελληνικά\"\n};\n\nexport const PORTAL_LANGUAGES = [LANGUAGES[0], LANGUAGES[1]];","import * as types from \"./actionTypes\";\nimport {stableSort} from \"../../utils/arrayUtils\";\nimport {toId} from \"../../utils/apiUtils\";\n\nconst getMembersWithId = (members) => {\n return members.map(member => ({...member, id: toId(member.pk)}))\n}\n\nconst getMemberWithId = (member) => {\n return {...member, id: toId(member.pk)}\n}\n\nexport const loadMembers = (workspaceKey, members) => async (dispatch, getState) => {\n if (!members || members.length === 0) {\n return;\n }\n\n dispatch({ type: types.MEMBERS_LOADED, payload: {workspaceKey: workspaceKey, members: getMembersWithId(members)} });\n}\n\nexport const addMembers = (workspaceKey, members) => async (dispatch, getState) => {\n if (!members || members.length === 0) {\n return;\n }\n\n const existingMembers = getState().members[workspaceKey] ?? [];\n const uniqueMembers = [...existingMembers, ...getMembersWithId(members)];\n dispatch({ type: types.MEMBERS_LOADED, payload: {workspaceKey: workspaceKey, members: uniqueMembers} });\n}\n\nexport const addMember = (workspaceKey, member) => async (dispatch, getState) => {\n const existingMembers = getState().members[workspaceKey];\n\n if (existingMembers && existingMembers.find(t => t.pk === member.pk)) {\n console.log(\"WARNING. Member already exists\");\n return;\n }\n\n dispatch({ type: types.MEMBER_ADDED, payload: {workspaceKey: workspaceKey, member: getMemberWithId(member)} });\n}\n\nexport const updateMember = (workspaceKey, memberKey, data) => async (dispatch, getState) => {\n const member = getState().members[workspaceKey]?.find(t => t.pk === memberKey);\n\n if (!member) {\n console.error(\"Cann update member %o as it doesn't exist\", memberKey);\n } else {\n const updated = {...member, ...data};\n dispatch({ type: types.MEMBER_UPDATED, payload: {workspaceKey, member: updated} });\n }\n}\n\nexport const deleteMember = (workspaceKey, memberKey) => async (dispatch, getState) => {\n dispatch({ type: types.MEMBER_DELETED, payload: { workspaceKey, memberKey } });\n}\n\nexport const deleteAllMembers = (workspaceKey) => async (dispatch, getState) => {\n dispatch({ type: types.MEMBERS_DELETED, payload: { workspaceKey }});\n}","import React, {useContext, useEffect, useState} from 'react';\nimport {makeStyles, CircularProgress, Typography, Box, DialogActions} from \"@material-ui/core\"\nimport PropTypes from \"prop-types\";\nimport Button from \"@material-ui/core/Button\";\nimport Loader from \"../Loader\";\nimport clsx from \"clsx\";\n\nconst useStyles = makeStyles((theme) => ({\n confirmationButton: {\n // '&.Mui-disabled': {\n // color: props => props.busy ? \"transparent\" : \"initial\"\n // }\n },\n busy: {\n color: \"transparent!important\"\n },\n loader: {\n position: \"absolute\",\n }\n}));\n\n// TODO: Rename\nexport const SpinnerButton = ({className, children, disabled, autoFocus, showSpinner, ...rest}) => {\n const classes = useStyles({showSpinner});\n\n return (\n \n \n {\n handleLanguageChange(newValue);\n }}\n getOptionLabel={(option) => t(option.code)}\n renderInput={(params) => (\n
\n - \n {items.map((item, index) => (\n
\n {children}\n
\n );\n};\n\nStaticDialogContent.propTypes = {\n className: PropTypes.string\n};\n\nStaticDialogContent.defaultProps = {\n};\n\nexport default StaticDialogContent;\n","export const allMembersSelector = (workspaceKey) => state => state.members[workspaceKey];\nexport const activeMembersSelector = (workspaceKey) => state => state.members[workspaceKey].filter(member => Boolean(member.role));\n\nexport const memberSelector = (workspaceKey, memberKey) => state => {\n if (!Boolean(workspaceKey) || !Boolean(memberKey)) {\n return null;\n }\n\n return state.members[workspaceKey]?.find(t => t.pk === memberKey)\n};\n\nexport const membersSelector = (workspaceKey, memberKeys) => state => {\n if (!Boolean(workspaceKey) || !Boolean(memberKeys) || memberKeys.length === 0) {\n return null;\n }\n\n return state.members[workspaceKey]?.find(t => memberKeys.includes(t.pk));\n};\n\nexport const adminMembersSelector = (workspaceKey) => state => state.members[workspaceKey]?.filter(t => t.role === \"admin\");\nexport const solverMembersSelector = (workspaceKey) => state => state.members[workspaceKey]?.filter(t => t.role === \"solver\");\nexport const approverMembersSelector = (workspaceKey) => state => state.members[workspaceKey]?.filter(t => t.role === \"approver\");\n\nexport const currentUserRoleSelector = (workspaceKey) => state => {\n if (!state.currentUser || !state.members[workspaceKey]) {\n return null;\n }\n return state.members[workspaceKey].find(t => t.pk === state.currentUser.pk).role;\n};\n\nexport const currentUserMemberships = () => state => {\n if (!state.currentUser || !state.members) {\n return null;\n }\n\n return Object.keys(state.members);\n}","import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Avatar, Box,\n Chip, alpha,\n makeStyles,\n TextField, Typography, useTheme,\n} from '@material-ui/core';\nimport MUIRichTextEditor from 'mui-rte'\nimport {useTranslation} from \"react-i18next\";\nimport Button from \"@material-ui/core/Button\";\nimport VpnKeyIcon from \"@material-ui/icons/VpnKey\";\nimport TitleIcon from '@material-ui/icons/Title';\nimport {ThemeProvider} from \"@emotion/react\";\nimport {CardShadow, NavBarWidth} from \"../../constants\";\nimport {useSelector} from \"react-redux\";\nimport {activeMembersSelector} from \"../../state/members/selectors\";\nimport {useParams} from \"react-router-dom\";\nimport {toWorkspaceKey} from \"../../utils/apiUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n richTextEditorReadOnly: {\n position: \"relative\",\n '& div[data-contents]': {\n padding: 0\n },\n },\n richTextEditor: {\n position: \"relative\",\n borderRadius: \"4px\",\n '&::before': {\n content: '\"\"',\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n borderRadius: \"4px\"\n },\n '&:hover::before': {\n border: `1px solid ${theme.palette.text.primary}`\n },\n '&:focus-within': {\n '&:before': {\n content: '\"\"',\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n borderRadius: \"4px\",\n border: `2px solid ${theme.palette.primary.main}`\n },\n },\n '& div[data-contents]': {\n padding: [theme.spacing(2.25), theme.spacing(1.75)]\n },\n '& #mui-rte-root': {\n margin: [0, theme.spacing(0.25)],\n },\n '& #mui-rte-editor': {\n marginTop: \"2px\", // Needed for scrollbar so that it doesn't overlap borders\n marginBottom: \"2px\",\n },\n '& #mui-rte-toolbar': {\n //opacity: props => props.toolbarAnchor ? 1 : 0,\n //display: props => props.toolbarAnchor ? \"initial\" : \"none\",\n visibility: props => props.toolbarOffset ? \"visible\" : \"hidden\",\n transform: props => props.toolbarOffset ? \"none\" : \"scale(0.75, 0.5625)\",\n //pointerEvents: props => props.toolbarAnchor ? \"initial\" : \"none\",\n left: props => props.toolbarOffset?.left ?? 0,\n top: props => props.toolbarOffset?.top ?? 0,\n width: props => props.toolbarOffset?.width ?? 0,\n transition: theme.transitions.create(['transform'], {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.short,\n })\n },\n },\n fixedBorder: {\n '&::before': {\n border: `1px solid ${theme.palette.divider}`\n },\n }\n}));\n\nconst Title1ButtonComponent = (t) => (props) => (\n \n {children}\n
\n );\n};\n\nStaticDialogActions.propTypes = {\n className: PropTypes.string\n};\n\nStaticDialogActions.defaultProps = {\n};\n\nexport default StaticDialogActions;\n","import React, {useContext, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport {\n Avatar,\n Box,\n Button,\n Card,\n CardActions,\n CardContent,\n Divider,\n Typography,\n makeStyles, CardHeader, Grid, TextField, CardActionArea, Container, withStyles\n} from '@material-ui/core';\nimport UserAvatar from \"../UserAvatar\";\n\nconst useStyles = makeStyles((theme) => ({\n staticDialogHeader: {\n flex: \"0 0 auto\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: theme.spacing(2),\n marginBottom: theme.spacing(1),\n '&>div': {\n flex: \"initial\"\n }\n },\n logo: {\n width: theme.spacing(6),\n height: theme.spacing(6),\n fontSize: \"1.5rem\",\n marginRight: theme.spacing(2)\n },\n}));\n\n// TODO: Rename to submitHeader\nconst StaticDialogHeader = ({className, workspace}) => {\n const classes = useStyles();\n\n return (\n \n \n {workspace.name} \n
\n );\n};\n\nStaticDialogHeader.propTypes = {\n className: PropTypes.string,\n workspace: PropTypes.object.isRequired\n};\n\nStaticDialogHeader.defaultProps = {\n};\n\nexport default StaticDialogHeader;\n","// TODO: Move to text utils\nexport const formatText = (text, wordLength, separator = ' ') => {\n const pattern = new RegExp(`.{1,${wordLength}}`, 'g') // constructor with string pattern as first argument\n if (!text) {\n return \"\";\n }\n\n return text.match(pattern).join(separator);\n}\n\nexport const formatFormId = (id) => {\n return formatText(id, 4, '-');\n}\n\nexport const formatReportId = (id) => {\n return formatText(id, 4, '-');\n}\n\nexport const formatWorkspaceId = (id) => {\n return formatText(id, 3);\n}\n\nexport const normalizeId = (text)=> {\n if (!text) {\n return null;\n }\n\n return text.replaceAll(' ', '').replaceAll('-', '');\n}\n\nexport function formatPhoneNumber(value) {\n const normalized = normalizeId(value);\n const number = normalized.startsWith('+') ? value.slice(1) : value;\n return `+${formatText(number, 3)}`;\n}","import moment from \"moment\";\n\nexport function capitalizeFirstLetter(text) {\n return text.charAt(0).toUpperCase() + text.slice(1);\n}\n\nexport function getReportName(report, t) {\n if (report.name) {\n return report.name;\n }\n\n return t(\"Report from {date}\", {date: new Date(report.createdAt)});\n}\n\nexport function isValidEmail(email) {\n const regex = /\\S+@\\S+\\.\\S+/;\n return regex.test(email);\n}\n\nexport function isValidDate(date) {\n return moment(date).isValid();\n}\n\nexport function urlB64ToUint8Array(base64String) {\n const padding = \"=\".repeat((4 - (base64String.length % 4)) % 4);\n const base64 = (base64String + padding)\n .replace(/\\-/g, \"+\")\n .replace(/_/g, \"/\");\n\n const rawData = window.atob(base64);\n const outputArray = new Uint8Array(rawData.length);\n\n for (let i = 0; i < rawData.length; ++i) {\n outputArray[i] = rawData.charCodeAt(i);\n }\n return outputArray;\n}\n\nexport function insertAtCaret(textArea, text) {\n text = text || '';\n if (document.selection) {\n // IE\n textArea.focus();\n var sel = document.selection.createRange();\n sel.text = text;\n } else if (textArea.selectionStart || textArea.selectionStart === 0) {\n // Others\n var startPos = textArea.selectionStart;\n var endPos = textArea.selectionEnd;\n textArea.value = textArea.value.substring(0, startPos) +\n text +\n textArea.value.substring(endPos, textArea.value.length);\n textArea.selectionStart = startPos + text.length;\n textArea.selectionEnd = startPos + text.length;\n } else {\n textArea.value += text;\n }\n};","import React, {useContext, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport {\n Avatar,\n Box,\n Button,\n Card,\n CardActions,\n CardContent,\n Divider,\n Typography,\n makeStyles,\n CardHeader,\n Grid,\n TextField,\n CardActionArea,\n Container,\n InputAdornment,\n FormControl,\n Input,\n FormHelperText, InputLabel, Tooltip\n} from '@material-ui/core';\nimport IconButton from \"@material-ui/core/IconButton\";\nimport FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';\nimport EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';\nimport { useNavigate } from 'react-router-dom';\nimport * as texts from \"../../constants/texts\";\nimport {CONFIRMATION_PROP_TYPES, DEFAULT_CONFIRMATION_SETTINGS} from \"../../constants/dialogs\";\nimport DialogContainer from \"../DialogContainer\";\nimport StaticDialog from \"../staticDialog/StaticDialog\";\nimport StaticDialogContent from \"../staticDialog/StaticDialogContent\";\nimport RichTextEditor from \"../RichTextEditor\";\nimport {useTranslation} from \"react-i18next\";\nimport StaticDialogActions from \"../staticDialog/StaticDialogActions\";\nimport StaticDialogHeader from \"../staticDialog/StaticDialogHeader\";\nimport {formatReportId} from \"../../utils/textFormatter\";\nimport {toId} from \"../../utils/apiUtils\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {isValidEmail} from \"../../utils/textUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n avatar: {\n maxWidth: \"100%\",\n },\n avatarContainer: {\n maxWidth: \"45%\",\n },\n header: {\n flexDirection: \"column\",\n justifyContent: \"center\"\n },\n idField: {\n marginTop: theme.spacing(3)\n },\n // Not used\n placeholder: {\n color: theme.palette.text.secondary\n },\n emailField: {\n marginTop: theme.spacing(0.25)\n },\n textOffset: {\n // to compensate padding of rtf editor when its editable. Horizontal margin is 2px smaller than\n // rtf editor padding, this is to keep border visible when rtf is in scrollable container\n margin: [-theme.spacing(2), -theme.spacing(1.75)]\n },\n actions: {\n pointerEvents: props => props.editable ? \"none\" : \"initial\"\n },\n}));\n\nconst copyIdToClipboard = () => {\n const copyText = document.getElementById(\"report-id-box\");\n copyText.select();\n copyText.setSelectionRange(0, 99999);\n document.execCommand(\"copy\");\n}\n\nconst ConfirmationDialog = ({className, classes: propClasses, showLogo, accessId, workspace, language, layout, editable, onSave, ...rest}) => {\n const classes = useStyles({editable});\n const navigate = useNavigate();\n const { t } = useTranslation(['translation', 'dialogs']);\n const api = useContext(ApiContext);\n const rtfData = layout ?? t(\"confirmation.defaultText\", {ns: \"dialogs\", lng: language});\n const [email, setEmail] = useState(\"\");\n const [emailError, setEmailError] = useState();\n\n const handleContinueClick = async (event) => {\n event.persist()\n event.preventDefault();\n if (email && !isValidEmail(email)) {\n setEmailError(true);\n return;\n } else if (email) {\n await api.mutation.updateResourceAccessKey(accessId, {email: email});\n }\n navigate('/followup'); //navigate('/app');\n };\n\n const handleEmailChange = (event) => {\n setEmailError(false); // reset error if value becomes valid\n setEmail(event.target.value);\n }\n\n const handleCopyButtonOnClick = () => {\n copyIdToClipboard();\n };\n\n return (\n \n \n {/*{name ?? t(\"Anonymous\")}*/}\n {title}\n \n { subtitle && (\n \n {subtitle}\n \n )}\n
\n \n );\n};\n\nAvatarMenuItem.propTypes = {\n className: PropTypes.string,\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.string,\n imageKey: PropTypes.string,\n icon: PropTypes.object,\n AvatarProps: PropTypes.object,\n size: PropTypes.oneOf([\"small\", \"medium\", \"large\", \"xSmall\"])\n}\n\nAvatarMenuItem.defaultProps = {\n size: 'medium'\n};\n\nexport default AvatarMenuItem;","export const STATIC_DOCUMENTS = [\n {\n name: \"Whispero - Manuál.pdf\",\n url:\n \"https://files.whispero.cz/manual.pdf\",\n size: \"1.6 MB\",\n },\n {\n name: \"Návod k implementaci.pdf\",\n url:\n \"https://files.whispero.cz/implementace.pdf\",\n size: \"137.7 KB\",\n },\n {\n name: \"Vzor - interní směrnice.docx\",\n url:\n \"https://files.whispero.cz/smernice.docx\",\n size: \"12.9 KB\",\n },\n {\n name: \"Vzor - Záznam o určení a poučení příslušné osoby.docx\",\n url:\n \"https://files.whispero.cz/zaznam.docx\",\n size: \"10.0 KB\",\n },\n {\n name: \"Zákon o ochraně oznamovatelů.pdf\",\n url:\n \"https://files.whispero.cz/zakon-o-ochrane-oznamovatelu.pdf\",\n size: \"144.6 KB\",\n },\n {\n name: \"Směrnice (EU) 1937/2019 o ochraně osob porušíjích právo Unie.pdf\",\n url:\n \"https://files.whispero.cz/smernice-1937-2019.pdf\",\n size: \"144.6 KB\",\n },\n];\n","import {AtomicBlockUtils, convertToRaw, EditorState, Modifier} from \"draft-js\";\nimport {addText} from \"./modifierUtils\";\nimport AvatarMenuItem from \"../AvatarMenuItem\";\nimport {STATIC_DOCUMENTS} from \"../../constants/documents\";\nimport DescriptionOutlinedIcon from \"@material-ui/icons/DescriptionOutlined\";\nimport React from \"react\";\n\nexport const insertAutocompleteSuggestionAsAtomicBlock = (editorState, selection, blockName, data) => {\n // Remove selected text\n const removedSelectionContentState = Modifier.removeRange(editorState.getCurrentContent(), selection,\"forward\");\n const removedSelectionState = EditorState.push(editorState, removedSelectionContentState, \"remove-range\");\n // Create entity\n // TODO: May need to call getCurrentContent() to get content state from the editor state returned from above method instead of reusing removedSelectionContentState\n const createdEntityContentState = removedSelectionContentState.createEntity(blockName.toUpperCase(), 'IMMUTABLE', data);\n const entityKey = createdEntityContentState.getLastCreatedEntityKey();\n const createdEntityEditorStateRaw = EditorState.set(editorState, {\n currentContent: createdEntityContentState,\n selection: removedSelectionState.getCurrentContent().getSelectionAfter()\n });\n // Insert atomic block\n const withAtomicBlockEditorState = AtomicBlockUtils.insertAtomicBlock(createdEntityEditorStateRaw, entityKey, ' ');\n return withAtomicBlockEditorState;\n // return insertSpaceAfter ? insertSpace(withAtomicBlockEditorState) : withAtomicBlockEditorState;\n}\n\nexport const insertAutocompleteSuggestionAsText = (editorState, selection, value, data, insertSpaceAfter = true) => {\n const currentContentState = editorState.getCurrentContent();\n const entityKey = currentContentState.createEntity(\"MENTION\", 'IMMUTABLE', data).getLastCreatedEntityKey();\n const contentState = Modifier.replaceText(\n currentContentState,\n selection,\n value,\n editorState.getCurrentInlineStyle(),\n entityKey);\n const newEditorState = EditorState.push(editorState, contentState, \"insert-characters\");\n return insertSpaceAfter ? addText(newEditorState, \" \") : newEditorState;\n}\n\nexport const filterAutocompleteItems = (allItems, searchTerm) => {\n if (!searchTerm) {\n return allItems;\n }\n const lowercaseSearchTerm = searchTerm.toLowerCase();\n return allItems.filter(item => item.key.toLowerCase().includes(lowercaseSearchTerm));\n}\n\nexport const getAtMentionStrategy = (members, t) => {\n let items = members.map(user => ({\n key: user.name,\n //value: {name: user.name},\n value: user.name,\n data: {url: \"#\", key: user.pk},\n group: t(\"Users\"),\n content: \n {controls.map((control, index) => {\n let active = false;\n if (editorHasFocus) {\n if (control.type === \"inline\" && currentInlineStyle) {\n active = currentInlineStyle.has(getStyleName(control));\n } else if (control.type === \"block\" && currentBlock) {\n active = getContentBlockType(control) === currentBlock.getType();\n }\n else if (control.name === \"link\") {\n // active = control.style === getSelectionInfo(editorState).entityType\n }\n }\n\n return control.component ? (\n // \n {control.component}\n \n ) : (\n onControlClicked(control)}\n />\n );\n })}\n
\n );\n};\n\nToolbar.propTypes = {\n options: PropTypes.arrayOf(PropTypes.string).isRequired,\n customControls: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n icon: PropTypes.object,\n label: PropTypes.string,\n })),\n onClick: PropTypes.func,\n onControlClicked: PropTypes.func,\n onAttachmentAdded: PropTypes.func\n};\n\nToolbar.defaultProps = {\n customControls: [],\n onClick: () => {},\n onControlClicked: () => {},\n onAttachmentAdded: () => {}\n};\n\nexport default Toolbar;\n","import React, {useContext, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport {\n Avatar,\n Box,\n Button,\n Card,\n CardActions,\n CardContent,\n Divider,\n Typography,\n makeStyles,\n CardHeader,\n Grid,\n TextField,\n CardActionArea,\n Container,\n List,\n ListItem,\n Paper,\n Popover,\n Popper,\n Fade,\n ListSubheader, ListItemText\n} from '@material-ui/core';\nimport IconButton from \"@material-ui/core/IconButton\";\nimport EditOutlinedIcon from '@material-ui/icons/EditOutlined';\nimport {useTranslation} from \"react-i18next\";\nimport {TopBarHeight} from \"../../constants\";\nimport {groupBy} from \"../../utils/arrayUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n autocomplete: {\n width: theme.spacing(60),\n maxWidth: `calc(100vw - ${theme.spacing(2)}px)`,\n maxHeight: theme.spacing(45),\n //maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,\n // [theme.breakpoints.down('sm')]: {\n // maxWidth: `calc(100vw - ${theme.spacing(2)}px)`,\n // maxHeight: `calc(100vh - ${theme.spacing(2)}px)`,\n // },\n //position: \"absolute\",\n zIndex: theme.zIndex.drawer + 2,\n },\n paper: {\n height: \"100%\",\n overflowX: \"hidden\",\n overflowY: \"auto\",\n borderRadius: \"6px\",\n maxHeight: theme.spacing(45),\n //maxHeight: `calc(100vh - ${theme.spacing(2)}px)`\n },\n noMatchHint: {\n padding: [theme.spacing(2), theme.spacing(2)],\n textAlign: \"center\",\n pointerEvents: \"none\"\n },\n list: {\n backgroundColor: 'inherit',\n },\n listSection: {\n backgroundColor: 'inherit'\n },\n ul: {\n backgroundColor: \"inherit\",\n padding: 0\n }\n}));\n\nconst AutocompletePopper = ({ className, open, anchorEl, top, left, items, selectedKey, onClick, ...rest }) => {\n const classes = useStyles();\n const {t} = useTranslation();\n const grouped = groupBy(items, \"group\");\n\n const preventFocus = (e) => {\n e.preventDefault(); // prevents control from taking focus from rich editor\n }\n\n return (\n \n \n {t(\"noMatchesFound\")}\n \n
\n ) : (\n - \n
\n {group !== \"undefined\" ? group : t(\"other\")}\n
\n \n {/**/}\n \n )}\n
\n )\n};\n\nAttachmentProgress.propTypes = {\n className: PropTypes.string,\n progress: PropTypes.number,\n type: PropTypes.oneOf(['circular', 'linear'])\n}\n\nAttachmentProgress.defaultProps = {\n type: 'linear'\n};\n\nexport default AttachmentProgress;","export const isImage = (filename) => filename?.match(/.(jpg|jpeg|png|gif)$/i);\nexport const isAudio = (filename) => filename?.match(/.(wav|mp3|flac)$/i);\nexport const getExtension = (filename) => '.' + filename.split('.').pop();\n\nexport const getFileKey = (file) => (`${file.name}-${file.lastModified}-${file.size}`);\n\nexport const isSvgFile = (filename) => {\n const parts = filename.split(\".\");\n if( parts.length === 1 || ( parts[0] === \"\" && parts.length === 2 ) ) {\n return false;\n }\n const extension = parts.pop();\n return extension === \"svg\";\n}","import React, {useContext, useEffect, useState} from 'react';\nimport {\n Box,\n makeStyles,\n Avatar,\n Typography, Backdrop, CircularProgress, Tooltip, Toolbar, Link, useTheme\n} from '@material-ui/core';\nimport PropTypes from \"prop-types\";\nimport PersonIcon from '@material-ui/icons/Person';\nimport DueDatePicker from \"../Pickers/DueDatePicker\";\nimport {\n cyan,\n green,\n grey,\n indigo,\n lightBlue,\n lime,\n purple,\n red\n} from '@material-ui/core/colors';\nimport clsx from \"clsx\";\nimport PickerContainer from \"../Pickers/PickerBase\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport CloudDownloadOutlinedIcon from \"@material-ui/icons/CloudDownloadOutlined\";\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';\nimport PlayCircleOutlineOutlinedIcon from '@material-ui/icons/PlayCircleOutlineOutlined';\nimport DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport CloseIcon from '@material-ui/icons/Close';\nimport {isAudio, isImage} from \"../../utils/fileUtils\";\nimport AudioPlayer from \"material-ui-audio-player\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {Skeleton} from \"@material-ui/lab\";\nimport {getSignedUrl} from \"../../utils/apiUtils\";\nimport {useTranslation} from \"react-i18next\";\n\nconst useStyles = makeStyles((theme) => ({\n attachmentDeleteButton: {\n position: \"absolute\",\n right: 0,\n top: \"50%\",\n transform: \"translate(0, -50%)\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"center\",\n padding: theme.spacing(0.5),\n zIndex: theme.zIndex.drawer + 2,\n color: theme.palette.grey[200]\n },\n hidden: {\n display: \"none\"\n }\n}));\n\nconst AttachmentDeleteButton = ({className, visible, language, onClick, ...rest}) => {\n const { t, i18n } = useTranslation();\n const classes = useStyles();\n const activeLanguage = language ?? i18n.language;\n\n return (\n \n \n \n \n \n
\n );\n};\n\nAttachmentDeleteButton.propTypes = {\n className: PropTypes.string,\n visible: PropTypes.bool,\n language: PropTypes.string,\n onClick: PropTypes.func\n}\n\nAttachmentDeleteButton.defaultProps = {\n onClick: () => {},\n visible: true\n};\n\nexport default AttachmentDeleteButton;","import React, {useContext, useEffect, useState} from 'react';\nimport {\n Box,\n makeStyles,\n Avatar,\n Typography, Backdrop, CircularProgress, Tooltip, Toolbar, Link, useTheme\n} from '@material-ui/core';\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport CloseIcon from '@material-ui/icons/Close';\nimport {isAudio, isImage} from \"../../utils/fileUtils\";\nimport AudioPlayer from \"material-ui-audio-player\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {Skeleton} from \"@material-ui/lab\";\nimport {getSignedUrl} from \"../../utils/apiUtils\";\nimport {useTranslation} from \"react-i18next\";\nimport AttachmentDeleteButton from \"./AttachmentDeleteButton\";\nimport {ThumbnailHeight, ThumbnailMaxWidth} from \"../../constants\";\n\nconst borderRadius = 8;\n\n// TODO: Move sizes to contants\nconst useStyles = makeStyles((theme) => ({\n imagePreview: {\n display: \"inline-block\",\n maxWidth: props => props.size === \"small\" ? theme.spacing(20) : ThumbnailMaxWidth,\n height: props => props.size === \"small\" ? theme.spacing(10) : ThumbnailHeight,\n position: \"relative\",\n zIndex: 0,\n },\n filePreview: {\n width: theme.spacing(40), // 25\n maxWidth: \"100%\",\n //height: theme.spacing(8),\n position: \"relative\",\n backgroundColor: theme.palette.background.paper,\n borderRadius,\n borderWidth: \"thin\",\n borderStyle: \"solid\",\n borderColor: theme.palette.grey[300]\n },\n audioPreview: {\n width: theme.spacing(40),\n maxWidth: \"100%\",\n //height: theme.spacing(8),\n position: \"relative\",\n backgroundColor: theme.palette.background.paper,\n borderRadius,\n borderWidth: \"thin\",\n borderStyle: \"solid\",\n borderColor: theme.palette.grey[300],\n paddingRight: props => props.canDelete ? theme.spacing(6) : 0,\n '&>div:first-child': {\n margin: 0,\n backgroundColor: \"transparent\"\n },\n },\n backdrop: {\n position: \"absolute\",\n zIndex: theme.zIndex.drawer + 1,\n borderRadius\n },\n image: {\n maxHeight: \"100%\",\n maxWidth: \"100%\",\n borderRadius,\n },\n icon: {\n width: theme.spacing(5),\n height: theme.spacing(5),\n color: theme.palette.grey[400],\n marginRight: theme.spacing(1)\n },\n filePreviewContent: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n padding: theme.spacing(1),\n paddingRight: props => props.canDelete ? theme.spacing(6) : theme.spacing(2)\n },\n placeholder: {\n width: \"100%\",\n height: \"100%\"\n },\n text: {\n minWidth: 0\n }\n}));\n\n// TODO: Reduce number of divs\nconst AttachmentPreview = ({className, classes: propClasses, name, language, imageShowName, url, size, canDelete, onDownload, onDelete}) => {\n //const attachmentName = url.split('/')?.pop();\n const [hover, setHover] = React.useState(false);\n const classes = useStyles({canDelete, size});\n\n const imagePreview = () => (\n \n \n \n }\n
\n );\n\n const audioPreview = () => (\n \n {/**/}\n \n {name}\n \n
\n \n { canDelete &&\n \n \n }\n
\n );\n\n if (isImage(name)) {\n return imagePreview();\n } else if (isAudio(name)) {\n return audioPreview();\n } else {\n return filePreview();\n }\n};\n\nAttachmentPreview.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object,\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n downloadUrl: PropTypes.string,\n imageShowName: PropTypes.bool,\n size: PropTypes.oneOf([\"small\", \"normal\"]),\n onDownload: PropTypes.func,\n language: PropTypes.string\n}\n\nAttachmentPreview.defaultProps = {\n classes: {},\n size: \"normal\",\n onDownload: () => {}\n};\n\nexport default AttachmentPreview;","export const downloadFile = (url, downloadName, openInNewWindow = false) => {\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = downloadName;\n if (openInNewWindow) {\n link.target = \"_blank\";\n }\n\n // Append link to the body\n document.body.appendChild(link);\n\n // Dispatch click event on the link\n // This is necessary as link.click() does not work on the latest firefox\n link.dispatchEvent(\n new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n view: window\n })\n );\n\n // Remove link from body\n document.body.removeChild(link);\n}","import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {\n Box, LinearProgress,\n makeStyles,\n} from '@material-ui/core';\nimport PropTypes from \"prop-types\";\nimport {isAudio, isImage} from \"../../utils/fileUtils\";\nimport {Skeleton} from \"@material-ui/lab\";\nimport AttachmentPreview from \"./AttachmentPreview\";\nimport {downloadFile} from \"../../utils/storageUtils\";\nimport {ThumbnailMaxWidth, ThumbnailHeight} from \"../../constants\";\nimport clsx from \"clsx\";\nimport DescriptionIcon from \"@material-ui/icons/Description\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\n\nconst useStyles = makeStyles((theme) => ({\n imageAttachment: {\n maxWidth: theme.spacing(40),\n height: theme.spacing(8),\n },\n localAttachmentUploading: {\n width: theme.spacing(20),\n height: theme.spacing(8),\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n borderRadius: 8,\n borderWidth: \"thin\",\n borderStyle: \"solid\",\n borderColor: theme.palette.divider,\n padding: theme.spacing(1),\n paddingRight: theme.spacing()\n },\n icon: {\n width: theme.spacing(5),\n height: theme.spacing(5),\n color: theme.palette.grey[400],\n marginRight: theme.spacing(1)\n },\n progress: {\n height: theme.spacing(0.75),\n flex: \"1 1 auto\",\n borderRadius: 6,\n backgroundColor: theme.palette.grey[300]\n },\n barColor : {\n backgroundColor: theme.palette.grey[500]\n }\n}));\n\n// TODO: Rename\nconst LocalAttachment = ({className, language, file, onUploaded, onDeleted}) => {\n const classes = useStyles();\n const api = useContext(ApiContext);\n const [uploadProgress, setUploadProgress] = useState(0);\n const [blobUrl, setBlobUrl] = useState();\n const [uploaded, setUploaded] = useState();\n const s3KeyRef = useRef();\n\n useEffect(() => {\n setBlobUrl(URL.createObjectURL(file));\n uploadAttachment();\n\n return () => {\n URL.revokeObjectURL(blobUrl);\n // TODO: Delete unused attachments, bellow is commented\n // out because it deleted attachments event if message was successfully sent\n // if (s3KeyRef.current) {\n // StorageApi.deleteAttachment(s3KeyRef.current);\n // }\n }\n }, [])\n\n const uploadAttachment = async () => {\n const key = await api.storage.uploadAttachment(file, setUploadProgress);\n s3KeyRef.current = key;\n setUploaded(true);\n onUploaded(key);\n }\n\n const handleDelete = () => {\n URL.revokeObjectURL(blobUrl);\n api.storage.deleteAttachment(s3KeyRef.current);\n s3KeyRef.current = null; // set to null to prevent duplicit deletion in useEffect cleanup\n onDeleted();\n };\n\n return uploaded ? (\n \n
\n )\n}\n\nLocalAttachment.propTypes = {\n className: PropTypes.string,\n file: PropTypes.object.isRequired,\n onUploaded: PropTypes.func,\n onDeleted: PropTypes.func,\n language: PropTypes.string\n}\n\nLocalAttachment.defaultProps = {\n onUploaded: () => {},\n onDeleted: () => {}\n};\n\nexport default LocalAttachment;","import React, { useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Box, makeStyles } from \"@material-ui/core\";\nimport PropTypes from \"prop-types\";\nimport { isAudio, isImage } from \"../../utils/fileUtils\";\nimport { Skeleton } from \"@material-ui/lab\";\nimport AttachmentPreview from \"./AttachmentPreview\";\nimport { downloadFile } from \"../../utils/storageUtils\";\nimport { ThumbnailMaxWidth, ThumbnailHeight } from \"../../constants\";\nimport clsx from \"clsx\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {ThumbnailPictureSuffix} from \"../../constants/storage\";\n\nconst borderRadius = 8;\nconst useStyles = makeStyles((theme) => ({\n imageAttachmentSkeleton: {\n width: (props) => (props.size === \"small\" ? theme.spacing(20) : ThumbnailMaxWidth),\n height: (props) => (props.size === \"small\" ? theme.spacing(10) : ThumbnailHeight),\n borderRadius,\n backgroundColor: theme.palette.common.white,\n },\n attachmentSkeleton: {\n width: theme.spacing(40),\n height: theme.spacing(8),\n borderRadius,\n backgroundColor: theme.palette.common.white,\n },\n}));\n\nconst getName = (s3Key) => s3Key.split(\"/\")?.pop();\n\nconst S3Attachment = ({ className, classes: propClasses, s3Key, size, canDelete, language, onRendered, onDelete, ...rest }) => {\n const classes = useStyles({ size });\n const api = useContext(ApiContext);\n const [url, setUrl] = useState();\n const blobUrlRef = useRef();\n const isImageKey = isImage(s3Key);\n const isAudioKey = isAudio(s3Key);\n const name = isImageKey ? getName(s3Key).replace(ThumbnailPictureSuffix, \"\") : getName(s3Key);\n const isMounted = useRef(true);\n const isV0 = !s3Key.startsWith(\"v1\");\n\n useEffect(() => {\n if (url && isMounted.current) {\n onRendered();\n }\n }, [url]);\n\n useEffect(() => {\n if (!s3Key) {\n // S3Attachment with already loaded images might have their key set to null if a user for example would\n // want to reset the attachment preview. The blobUrl must be then revoked and the url state set to null\n // to avoid rendering the old image in the preview.\n if (blobUrlRef.current) {\n URL.revokeObjectURL(blobUrlRef.current);\n setUrl(null);\n }\n return;\n }\n\n (async () => {\n if (!isV0 && (isImageKey || isAudioKey)) {\n const downloaded = await api.storage.downloadObject(s3Key);\n // Top avoid react errors we update state only if the component is still mounted. It can happen that\n // the component is unmounted before the data are downloaded. Updating state of unmounted component leads\n // to react errors.\n if (isMounted.current) {\n const blobUrl = URL.createObjectURL(downloaded.Body);\n blobUrlRef.current = blobUrl;\n setUrl(blobUrl);\n }\n } else {\n // Show only simple public url for file attachment, signed url will be generated\n // when user will click on the link\n const attachmentUrl = api.storage.getPublicUrl(s3Key);\n setUrl(attachmentUrl);\n }\n })();\n\n // Return cleanup function\n return () => {\n isMounted.current = false;\n if (blobUrlRef.current) {\n URL.revokeObjectURL(blobUrlRef.current);\n }\n };\n }, [s3Key]);\n\n const handleDownload = async (event) => {\n event.preventDefault();\n if (isV0) {\n downloadFile(url, name, true);\n return;\n }\n\n const attachmentKey = isImageKey ? s3Key.replace(ThumbnailPictureSuffix, \"\") : s3Key;\n const attachmentUrl = await api.storage.getSignedUrl(attachmentKey);\n downloadFile(attachmentUrl, name, true);\n };\n\n const handleDelete = () => {\n api.storage.deleteAttachment(s3Key);\n onDelete();\n };\n\n if (url) {\n return (\n \n \n {isOverdue ? (t(\"days overdue\", {count: remaining})) : (t(\"days remaining\", {count: remaining}))}\n \n
\n )\n};\n\nReportProgress.propTypes = {\n className: PropTypes.string,\n createdAt: PropTypes.string.isRequired,\n labelPlacement: PropTypes.oneOf([\"left\", \"right\"]),\n}\n\nReportProgress.defaultProps = {\n reverseDirection: true,\n classes: {},\n labelPlacement: \"right\",\n LabelProps: {}\n};\n\n\nexport default ReportProgress;","import React, {useContext} from 'react';\nimport { Page, Text, View, Document, StyleSheet, Image, Font } from '@react-pdf/renderer';\nimport {getAvatarColor, getInitials} from \"../../utils/avatarUtils\";\nimport {isImage} from \"../../utils/fileUtils\";\nimport {getSignedUrl, toUserKey} from \"../../utils/apiUtils\";\nimport PropTypes from \"prop-types\";\nimport {getReportName} from \"../../utils/textUtils\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {useTranslation} from \"react-i18next\";\nimport AttachmentsContainer from \"../AttachmentsContainer\";\nimport {getSystemMessageContent, isClosed, isSystemMessage} from \"../../utils/reportUtils\";\nimport {useSelector} from \"react-redux\";\nimport {currentUserRoleSelector} from \"../../state/members/selectors\";\nimport {deserializeEditorState} from \"../RichTextEditor2/editorState\";\n\nFont.register({ family: 'Montserrat', fonts: [\n //{ src: source1 }, // font-style: normal, font-weight: normal\n { src: 'https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm45xW4.ttf', fontStyle: 'normal', fontWeight: '400' },\n { src: 'https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_ZpC7g4.ttf', fontStyle: 'normal', fontWeight: '500' },\n { src: 'https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_bZF7g4.ttf', fontStyle: 'normal', fontWeight: '600' },\n ]});\n\nFont.register({ family: 'Lora', fonts: [\n //{ src: source1 }, // font-style: normal, font-weight: normal\n { src: 'https://fonts.gstatic.com/s/lora/v17/0QI6MX1D_JOuGQbT0gvTJPa787weuyJG.ttf', fontStyle: 'normal', fontWeight: '400' },\n { src: 'https://fonts.gstatic.com/s/lora/v17/0QI6MX1D_JOuGQbT0gvTJPa787wsuyJG.ttf', fontStyle: 'normal', fontWeight: '500' },\n { src: 'https://fonts.gstatic.com/s/lora/v17/0QI6MX1D_JOuGQbT0gvTJPa787zAvCJG.ttf', fontStyle: 'normal', fontWeight: '600' },\n ]});\n\nFont.register({ family: 'Poppins', fonts: [\n //{ src: source1 }, // font-style: normal, font-weight: normal\n { src: 'https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrFJA.ttf', fontStyle: 'normal', fontWeight: '400' },\n { src: 'https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9V1s.ttf', fontStyle: 'normal', fontWeight: '500' },\n { src: 'https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6V1s.ttf', fontStyle: 'normal', fontWeight: '600' },\n ]});\n\nFont.register({ family: 'JetBrains Mono', fonts: [\n { src: 'https://fonts.gstatic.com/s/jetbrainsmono/v6/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPQ.ttf', fontStyle: 'normal', fontWeight: '400' }\n]});\n\nFont.register({ family: 'Fira Code', fonts: [\n { src: 'https://fonts.gstatic.com/s/firacode/v12/uU9dCBsR6Z2vfE9aq3bpdva8iVtipIat--AvNZ-YE8Y.ttf', fontStyle: 'normal', fontWeight: '400' }\n]});\n\nFont.register({ family: 'Source Code Pro', fonts: [\n { src: 'https://fonts.gstatic.com/s/sourcecodepro/v14/HI_SiYsKILxRpg3hIP6sJ7fM7PqVOg.ttf', fontStyle: 'normal', fontWeight: '400' }\n]});\n\nconst colors = {\n primary: '#212121',\n secondary: '#565656'\n}\n\nconst styles = StyleSheet.create({\n body: {\n padding: \"2.54cm\"\n },\n footer: {\n position: 'absolute',\n bottom: 30,\n left: \"2.54cm\",\n right: \"2.54cm\",\n display: \"flex\",\n flexDirection: \"row\"\n },\n footerText: {\n fontFamily: \"Poppins\",\n fontSize: 11,\n color: 'grey',\n },\n pageNumber: {\n position: 'absolute',\n fontSize: 12,\n bottom: 30,\n left: 0,\n right: 0,\n textAlign: 'center',\n color: 'grey',\n },\n logo: {\n marginLeft: 'auto',\n marginRight: 'auto',\n marginBottom: 24,\n marginTop: 0\n },\n companyName: {\n fontFamily: \"Montserrat\",\n fontSize: 20,\n fontWeight: 500,\n color: colors.primary,\n marginLeft: 6\n },\n title: {\n fontFamily: \"Lora\",\n fontSize: 24,\n fontWeight: 400,\n marginBottom: 8,\n color: colors.primary\n },\n subtitle: {\n fontFamily: \"Lora\",\n fontWeight: 400,\n fontSize: 18,\n marginVertical: 8,\n color: colors.primary\n },\n textRegular: {\n fontFamily: \"Poppins\",\n fontSize: 11,\n textAlign: 'justify',\n color: colors.secondary,\n },\n textSmall: {\n fontFamily: \"Poppins\",\n fontSize: 10,\n color: colors.secondary\n },\n primaryColor: {\n color: colors.primary\n },\n boldText: {\n fontWeight: 600,\n },\n divider: {\n borderBottomColor: '#E0E0E0',\n borderBottomWidth: 1\n },\n paragraph: {\n marginVertical: 8,\n wordWrap: \"break-word\"\n },\n messageContent: {\n marginTop: 2\n },\n inline: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: 'center'\n },\n topAlignment: {\n alignItems: 'flex-start'\n },\n avatar: {\n width: 32,\n height: 32,\n borderRadius: 4,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: 'center',\n color: \"white\"\n },\n imageAttachment: {\n marginVertical: 4,\n objectFit: \"scale-down\",\n objectPosition: \"0 0\",\n },\n fileAttachment: {\n fontFamily: \"Source Code Pro\",\n marginVertical: 4,\n fontSize: 11,\n color: colors.secondary,\n wordBreak: \"break-all\",\n wordWrap: \"break-word\",\n hyphens: \"none\"\n }\n});\n\nconst renderLogo = (workspace) => {\n const background = getAvatarColor(workspace.name);\n\n return (\n \n \n \n { isExtended && (\n \n \n )}\n
\n \n \n
\n \n )\n}\n\nExportToPdfDialog.propTypes = {\n className: PropTypes.string,\n open: PropTypes.bool,\n onClose: PropTypes.func\n}\n\nExportToPdfDialog.defaultProps = {\n onClose: () => {}\n};\n\nexport default ExportToPdfDialog;","import React, {useContext, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Avatar,\n Box,\n Card,\n CardContent,\n Grid,\n Typography,\n colors,\n makeStyles,\n CssBaseline,\n Table,\n TableHead,\n TableRow,\n TableCell,\n Checkbox,\n TableBody,\n TablePagination,\n List,\n ListItem,\n ListItemAvatar,\n useTheme,\n ListItemText,\n Divider,\n ListItemSecondaryAction,\n ListItemIcon,\n ButtonBase,\n Dialog,\n useMediaQuery, DialogTitle, DialogContent, DialogActions, Tabs, Tab, Button, Tooltip\n} from '@material-ui/core';\nimport IconButton from \"@material-ui/core/IconButton\";\nimport CloudDownloadOutlinedIcon from \"@material-ui/icons/CloudDownloadOutlined\";\nimport ExportToPdfDialog from \"../ReportPDF/ExportToPdfDialog\";\nimport {useTranslation} from \"react-i18next\";\n\n// TODO: Remove, not used\nconst ExportReportButton = ({className, report}) => {\n const { t } = useTranslation();\n const [exportPdfDialogOpen, setExportPdfDialogOpen] = useState(false);\n\n const handleOnClick = () => {\n setExportPdfDialogOpen(true);\n }\n\n const handleExportCompleted = (blob) => {\n setExportPdfDialogOpen(false);\n }\n\n return (\n <>\n \n {/**/}\n
\n )\n};\n\nAttachmentUploadProgress.propTypes = {\n className: PropTypes.string,\n progress: PropTypes.number.isRequired\n}\n\nAttachmentUploadProgress.defaultProps = {\n};\n\nexport default AttachmentUploadProgress;","import React, {useContext, useEffect, useState} from 'react';\nimport {\n Box,\n makeStyles,\n Avatar,\n Typography, useTheme, alpha\n} from '@material-ui/core';\nimport PropTypes from \"prop-types\";\nimport PersonIcon from '@material-ui/icons/Person';\nimport DueDatePicker from \"./Pickers/DueDatePicker\";\nimport {\n cyan,\n green,\n grey,\n indigo,\n lightBlue,\n lime,\n purple,\n red\n} from '@material-ui/core/colors';\nimport clsx from \"clsx\";\nimport {ApiContext} from \"../contexts/ApiContext\";\nimport {getAvatarColor, getInitials} from \"../utils/avatarUtils\";\nimport {Skeleton} from \"@material-ui/lab\";\nimport {getSignedUrl} from \"../utils/apiUtils\";\nimport {useTranslation} from \"react-i18next\";\nimport UserAvatar from \"./UserAvatar\";\n\nconst useStyles = makeStyles((theme) => ({\n avatarWithLabelRoot: {\n display: \"flex\",\n alignItems: \"center\"\n },\n textContainer: {\n marginLeft: theme.spacing(1),\n lineHeight: 0\n },\n title: {\n //marginLeft: theme.spacing(1),\n //fontSize: props => `${fontSizes[props.size]}`,\n },\n subtitle: {\n color: theme.palette.text.hint,\n lineHeight: 1.33\n //marginLeft: theme.spacing(1)\n }\n}));\n\nconst UserCard = ({className, name, subtitle, imageKey, size, AvatarProps, ...rest}) => {\n const { t } = useTranslation();\n const headerOrientation = size === \"small\" || size === \"medium\" ? \"horizontal\" : \"vertical\";\n const classes = useStyles({size});\n\n return (\n \n \n {name ?? t(\"Anonymous\")}\n \n { subtitle && (\n \n {subtitle}\n \n )}\n
\n \n );\n};\n\nUserCard.propTypes = {\n className: PropTypes.string,\n name: PropTypes.string,\n subtitle: PropTypes.string,\n imageKey: PropTypes.string,\n AvatarProps: PropTypes.object,\n size: PropTypes.string\n}\n\nUserCard.defaultProps = {\n size: 'medium'\n};\n\nexport default UserCard;","import React, {useContext} from 'react';\nimport {\n makeStyles,\n useTheme,\n MenuList,\n MenuItem,\n Avatar,\n Box,\n Tooltip,\n IconButton,\n Popover,\n Popper,\n alpha,\n InputBase,\n Typography,\n ButtonBase,\n Badge, withStyles, ListItemIcon, ListItemText, List, ListItem, ListItemAvatar\n} from '@material-ui/core';\nimport PropTypes from \"prop-types\";\nimport {Autocomplete} from \"@material-ui/lab\";\nimport clsx from \"clsx\";\nimport {useTranslation} from \"react-i18next\";\nimport UserCard from \"./UserCard\";\nimport Menu from \"@material-ui/core/Menu\";\nimport {isOpen} from \"../utils/reportUtils\";\nimport {isApprover} from \"../utils/user\";\nimport NotInterestedOutlinedIcon from \"@material-ui/icons/NotInterestedOutlined\";\nimport SaveAltOutlinedIcon from \"@material-ui/icons/SaveAltOutlined\";\n\nconst useStyles = makeStyles((theme) => ({\n userMenuRoot: {\n minWidth: theme.spacing(80),\n },\n paper: {\n boxShadow: 'none',\n margin: 0\n },\n popperDisablePortal: {\n position: 'relative',\n width: \"initial!important\"\n },\n inputBase: {\n padding: 10,\n width: '100%',\n borderBottom: '1px solid #dfe2e5',\n '& input': {\n borderRadius: 4,\n backgroundColor: theme.palette.common.white,\n padding: 8,\n transition: theme.transitions.create(['border-color', 'box-shadow']),\n border: '1px solid #ced4da',\n fontSize: 14,\n '&:focus': {\n boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,\n borderColor: theme.palette.primary.main,\n },\n },\n },\n readOnlyItem: {\n paddingTop: theme.spacing(0.75),\n paddingBottom: theme.spacing(0.75),\n }\n}));\n\nclass ImageIcon extends React.Component<{}> {\n render() {\n return null;\n }\n}\n\nconst UserMenu = ({className, open, anchorEl, users, readOnly, onClose, onUserSelected, ...rest}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n\n const handleClose = (event, reason) => {\n if (reason === 'toggleInput') {\n return;\n }\n if (anchorEl) {\n anchorEl.focus();\n }\n onClose();\n };\n\n return (\n - \n {users.map(user => (\n
- */}\n {/* {users.map(user => (*/}\n {/*
\n
\n )\n}\n\nconst BlockHeader = ({ className, blockTemplate, languagePack, defaultValue, placeholder, editable, onTemplateChange, onTextChange}) => {\n return editable ? (\n \n \n {t(\"options\")}\n \n \n {(provided) => (\n \n }\n onClick={handleAddOptionClick}\n >\n {t(\"addNewOption\")}\n \n
\n )\n};\n\nOptionFieldsList.propTypes = {\n className: PropTypes.string,\n blockTemplate: PropTypes.object.isRequired,\n languagePack: PropTypes.object.isRequired,\n ItemIcon: PropTypes.object,\n onTextChange: PropTypes.func,\n onTemplateChange: PropTypes.func,\n onTextDelete: PropTypes.func\n};\n\nOptionFieldsList.defaultProps = {\n onTextChange: () => {},\n onTemplateChange: () => {},\n onTextDelete: () => {},\n};\n\nexport default OptionFieldsList;\n","import { s4, s8 } from \"./idGenerator\";\nimport React from \"react\";\nimport {isValidDate, isValidEmail} from \"./textUtils\";\nimport { scrollToElement } from \"./ui\";\n\nexport function newFormBlock(type) {\n switch (type) {\n case \"header\": {\n return {\n key: s8(),\n type: type,\n content: s8(),\n };\n }\n case \"text\": {\n return {\n key: s8(),\n type: type,\n content: s8(),\n };\n }\n case \"textField\": {\n return {\n key: s8(),\n type: type,\n label: s8(),\n };\n }\n case \"multilineTextField\": {\n return {\n key: s8(),\n type: type,\n label: s8(),\n };\n }\n case \"dateField\": {\n return {\n key: s8(),\n type: type,\n label: s8(),\n };\n }\n case \"dropdown\": {\n return {\n key: s8(),\n type: type,\n label: s8(),\n options: [],\n };\n }\n case \"checkboxList\": {\n return {\n key: s8(),\n type: type,\n label: s8(),\n options: [],\n };\n }\n case \"attachments\": {\n return {\n key: s8(),\n type: type,\n label: s8(),\n buttonText: s8(),\n hintText: s8(),\n };\n }\n default:\n throw new Error(\"Cannot create block, an unknown form block type '%o' was specified.\", type);\n }\n}\n\nexport const isReportIdBlock = (block) => block.type === \"reportIdField\";\n\nexport const isReportEmailBlock = (block) => block.type === \"reportEmailField\";\n\nexport const isDateBlock = (block) => block.type === \"dateField\";\n\nexport const defaultTitle = (blockType, t, language) => {\n switch (blockType) {\n case \"attachments\": {\n return t(\"attachmentsTitle\", { lng: language });\n }\n case \"dropdown\": {\n return t(\"dropdownTitle\", { lng: language });\n }\n case \"checkboxList\": {\n return t(\"checkboxListTitle\", { lng: language });\n }\n default: {\n return \"\";\n }\n }\n}\n\nexport const convertToMessageSection = (block, languagePack, t, language) => {\n if (block.type === \"text\" || !Boolean(block.value)) {\n return null;\n }\n\n const label = languagePack[block.label] ?? defaultTitle(block.type, t, language);\n if (block.type === \"attachments\") {\n return newAttachmentsSection(label, block.value);\n } else if (block.type === 'checkboxList') {\n return newArraySection(label, block.value.map(item => languagePack[item]));\n } else if (block.type === \"dropdown\") {\n // Values of other block types, like dropdown, only contain an ID of a text in a language pack\n return newTextSection(label, languagePack[block.value]);\n } else if (block.type === \"dateField\") {\n return newDateSection(label, block.value);\n } else {\n // Other block types like textField or emailField\n return newTextSection(label, block.value);\n }\n};\n\n// TODO: Rename to newTextAnswer\nexport const newTextSection = (label, value) => ({\n type: \"text\",\n label: label,\n value: value,\n});\n\nexport const newDateSection = (label, value) => ({\n type: \"date\",\n label: label,\n value: value,\n});\n\nexport const newArraySection = (label, value) => ({\n type: \"array\",\n label: label,\n value: value,\n});\n\nexport const newAttachmentsSection = (label, value) => ({\n type: \"attachments\",\n label: label,\n value: value,\n});\n\nexport const isAttachmentSection = (section) => section.type === \"attachments\";\n\nexport const isDateSection = (section) => section.type === \"date\";","import React, {useContext, useEffect, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport {\n Avatar,\n Box,\n Button,\n Card,\n CardActions,\n CardContent,\n Divider,\n Typography,\n makeStyles,\n CardHeader,\n Grid,\n TextField,\n CardActionArea,\n Container,\n Paper,\n FormControlLabel,\n Checkbox,\n alpha,\n MenuItem, InputAdornment, FormControl\n} from '@material-ui/core';\nimport BlockHeader from \"./BlockHeader\";\nimport OptionFieldsList from \"./OptionFieldsList\";\nimport FormBlock from \"./index\";\nimport {useTranslation} from \"react-i18next\";\nimport {DEFAULT_FORM_SIDE_PADDING_SPACING} from \"../../constants\";\nimport {defaultTitle} from \"../../utils/formBlockUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n dropdownFormBlock: {\n },\n disabledSelect: {\n '& .MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline': {\n // borderColor: alpha(theme.palette.text.primary, 0.16)\n },\n pointerEvents: \"none\"\n },\n optionsContainer: {\n // backgroundColor: theme.palette.background.paper,\n // borderRadius: theme.shape.borderRadius,\n // border: `1px solid ${theme.palette.border.default}`,\n // overflowY: \"hidden\",\n marginTop: theme.spacing(1),\n // padding: [theme.spacing(1), theme.spacing(0)],\n\n },\n options: {\n overflow: \"hidden\",\n },\n addButton: {\n marginLeft: theme.spacing(3.75),\n marginTop: theme.spacing(0.5),\n color: theme.palette.text.secondary\n },\n helperText: {\n position: \"absolute\",\n top: \"100%\"\n },\n optionsList: {\n marginTop: theme.spacing(0.5),\n }\n}));\n\nconst DropdownFormBlock = ({ blockTemplate, languagePack, language, editable, errorText, onTextChange, onTemplateChange, onTextDelete, onValueChange}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n\n const handleChange = (event) => {\n onValueChange(event.target.value);\n }\n\n return (\n \n {optionsKeysRef.current.map((key, index) => (\n handleTextChange(key, value)}\n onDelete={() => handleOptionDelete(key)}\n />\n ))}\n {provided.placeholder}\n
\n )}\n \n \n \n
\n \n
\n \n {renderBlock(\n blockTemplate,\n languagePack,\n language,\n editable,\n errorText,\n onTextChange,\n onTemplateChange,\n onTextDelete,\n onValueChange\n )}\n
\n );\n};\n\nFormBlock.propTypes = {\n className: PropTypes.string,\n blockTemplate: PropTypes.object.isRequired,\n languagePack: PropTypes.object.isRequired,\n language: PropTypes.string.isRequired,\n editable: PropTypes.bool,\n errorText: PropTypes.string,\n onTextChange: PropTypes.func,\n onTemplateChange: PropTypes.func,\n onTextDelete: PropTypes.func,\n onValueChange: PropTypes.func,\n};\n\nFormBlock.defaultProps = {\n onTextChange: () => {},\n onTemplateChange: () => {},\n onTextDelete: () => {},\n onValueChange: () => {},\n};\n\nexport default FormBlock;\n","import FormBlock from \"./FormBlock\";\n\nexport default FormBlock;","import React, { useMemo, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Button, Tooltip } from \"@material-ui/core\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport AttachFileOutlinedIcon from \"@material-ui/icons/AttachFileOutlined\";\nimport ErrorDialog from \"../ErrorDialog\";\nimport { useTranslation } from \"react-i18next\";\nimport { numericId } from \"../../utils/idGenerator\";\nimport FormBlock from \"../formBlocks\";\nimport AttachmentsFormBlock from \"../formBlocks/AttachmentsFormBlock\";\nimport {MAX_ATTACHMENT_SIZE} from \"../../constants\";\n\nconst AddAttachmentButton = ({\n className,\n language,\n variant,\n size,\n edge,\n component,\n children,\n onFileAdded,\n ...rest\n}) => {\n const { t, i18n } = useTranslation();\n const activeLanguage = language ?? i18n.language;\n const [invalidFile, setInvalidFile] = useState(false);\n const inputId = useMemo(() => `file-upload-button-${numericId()}`, []);\n\n const handleFileInputChange = (event) => {\n const {\n target: { value, files },\n } = event;\n for (const file of files) {\n if (file.size > MAX_ATTACHMENT_SIZE) {\n setInvalidFile(file.name);\n } else {\n onFileAdded(file);\n }\n }\n\n // setFileKeys(newFiles.map(file => getFileKey(file)));\n event.target.value = \"\";\n };\n\n const renderButton = () =>\n variant === \"icon\" ? (\n \n \n {workspace.name} \n
\n )\n\n return (\n <>\n \n \n
\n - \n {availableLanguages.map((lang) => (\n
\n setContent(e.target.value)}\n InputProps={{\n disableUnderline: true\n }}\n />\n { (attachments.length > 0) && (\n \n {attachments.map((attachment) => (\n handleAttachmentUploaded(attachment.id, key)}\n onDeleted={() => handleAttachmentDeleted(attachment.id)}\n />\n ))}\n \n )}\n
\n {buttonType === \"standard\" ? (\n \n \n )}\n
\n )\n}\n\nChatMessageSkeleton.propTypes = {\n position: PropTypes.oneOf([\"left\", \"right\"])\n}\n\nChatMessageSkeleton.defaultProps = {\n position: \"left\",\n};\n\nexport default ChatMessageSkeleton;","import React, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Typography,\n makeStyles,\n} from '@material-ui/core';\nimport UserAvatar from \"../UserAvatar\";\nimport { isImage } from \"../../utils/fileUtils\";\nimport AttachmentsContainer from \"../AttachmentsContainer\";\nimport { useTranslation } from \"react-i18next\";\nimport S3Attachment from \"../attachments/S3Attachment\";\nimport RichTextEditor2 from \"../RichTextEditor2/RichTextEditor2\";\nimport { deserializeEditorState } from \"../RichTextEditor2/editorState\";\nimport { isAttachmentSection, isDateSection } from \"../../utils/formBlockUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n chatMessage: props => ({\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: props.position === \"right\" ? \"row\": \"row-reverse\"\n }),\n messageContainer: {\n flex: \"1 1 auto\",\n minWidth: 0,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: props => props.position === \"right\" ? \"flex-end\" : \"flex-start\"\n },\n message: {\n [theme.breakpoints.up('xs')]: {\n maxWidth: \"100%\",\n },\n [theme.breakpoints.up('sm')]: {\n maxWidth: \"40ch\",\n },\n [theme.breakpoints.up('lg')]: {\n maxWidth: \"50ch\",\n },\n [theme.breakpoints.up('xl')]: {\n maxWidth: \"60ch\",\n },\n wordWrap: \"break-word\",\n padding: theme.spacing(2),\n borderRadius: 12,\n border: `1px solid ${theme.palette.grey[300]}`, //300\n //boxShadow: \"0px 4px 20px rgba(0, 0, 0, 0.15)\"\n //...CardShadow,\n \"&>*:not(:last-child)\": {\n marginBottom: \"1rem\"\n }\n },\n rightPositioned: {\n color: theme.palette.primary.contrastText,\n backgroundColor: theme.palette.primary.main,\n },\n leftPositioned: {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.grey[200], //200\n },\n avatar: {\n marginTop: \"0.15rem\",\n marginRight: theme.spacing(1),\n },\n attachmentsContainer: {\n marginTop: theme.spacing(0.5)\n },\n senderLabel: {\n lineHeight: 0,\n '&>span:not(:last-child)': {\n marginRight: theme.spacing(1)\n }\n },\n sectionLabelDark: {\n color: theme.palette.common.white\n },\n sectionLabelLight: {\n color: theme.palette.text.secondary\n }\n}));\n\nconst renderContent = (content, messagePosition, classes, i18n) => {\n const renderAnswer = (section) => {\n if (Array.isArray(section.value)) {\n return section.value.map(item => (\n \n . \n \n \n . \n \n
\n {position === \"left\" && (\n \n \n {section.label}\n \n \n {renderAnswer(section)}\n \n
\n ))\n )\n}\n\n// TODO: Simplify component\nconst ChatMessage = ({\n className,\n classes: propClasses,\n message,\n sender,\n position,\n labelPlacement,\n showSenderName,\n attachmentSize,\n LabelProps,\n AvatarProps,\n onRendered,\n header\n}) => {\n const classes = useStyles({position});\n const { t, i18n } = useTranslation();\n const [renderedCount, setRenderedCount] = useState(0);\n\n const content = useMemo(() => {\n if (!message.content) {\n return null;\n }\n\n if (Array.isArray(message.content)) {\n return message.content;\n }\n\n return deserializeEditorState(message.content);\n }, [message.content]);\n\n const [imageAttachments, fileAttachments] = useMemo(() => {\n let attachments = message.attachments ?? [];\n if (message.content && Array.isArray(message.content)) {\n const sectionAttachments = message.content.filter(isAttachmentSection).flatMap(section => section.value);\n attachments = attachments.concat(sectionAttachments);\n }\n const images = attachments.filter(attachment => isImage(attachment));\n const files = attachments.filter(attachment => !isImage(attachment));\n return [images, files]\n });\n\n useEffect(() => {\n if (renderedCount === imageAttachments.length) {\n onRendered();\n }\n }, [renderedCount])\n\n const handleAttachmentRendered = () => {\n setRenderedCount(prev => prev + 1)\n }\n\n const label = () => (\n \n { showSenderName &&\n \n {sender.name}\n \n }\n \n {t(\"{timeAgo}\", {value: new Date(message.createdAt)})}\n \n
\n );\n\n // TODO: Refactor\n return (\n \n \n { imageAttachments.map(attachmentKey => (\n \n )}\n { fileAttachments.length > 0 && (\n \n { fileAttachments.map(attachmentKey => (\n \n ))}\n \n )}\n {labelPlacement === \"bottom\" && label()}\n
\n { position === \"left\" && (\n \n {labelPlacement === \"top\" && label()}\n { ((message.text && !message.text.startsWith(\"__\", 0)) || header || message.content) && (\n \n {header && (\n \n {header}\n \n )}\n { message.text && !message.text.startsWith(\"__\", 0) && (\n \n {message.text}\n \n )}\n { content && renderContent(content, position, classes, i18n)}\n
\n )}\n { imageAttachments.length > 0 && (\n \n \n \n {`${getSystemMessageContent(message, sender?.name, t)} `}\n \n \n {t(\"{dateLong}\", {date: new Date(message.createdAt)})}\n \n \n
\n );\n}\n\nSystemMessage.propTypes = {\n className: PropTypes.string,\n onRendered: PropTypes.func\n}\n\nSystemMessage.defaultProps = {\n onRendered: () => {}\n};\n\nexport default SystemMessage;","import {toUserKey} from \"./apiUtils\";\n\nexport const getMessageSender = (message, users) => {\n if (!message.sender) {\n return null;\n }\n\n return users?.find(user => user.pk === message.sender);\n}","import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles\n} from '@material-ui/core';\nimport { useTranslation } from \"react-i18next\";\nimport ChatInputBox from \"./ChatInputBox\";\nimport { scrollToView } from \"../../utils/ui\";\nimport ChatMessageSkeleton from \"./ChatMessageSkeleton\";\nimport { isSystemMessage } from \"../../utils/reportUtils\";\nimport SystemMessage from \"./SystemMessage\";\nimport ChatMessage from \"./ChatMessage\";\nimport { useSelector } from \"react-redux\";\nimport { allMembersSelector } from \"../../state/members/selectors\";\nimport { currentUserSelector } from \"../../state/currentUser/selectors\";\nimport { getMessageSender } from \"../../utils/redux\";\nimport { useFetchMissingSenders } from \"../../hooks/useFetchMissingSenders\";\n\nconst InputBoxHeight = 90;\n\nconst useStyles = makeStyles((theme) => ({\n chat: {\n display: \"flex\",\n flexDirection: \"column\"\n },\n content: {\n flex: \"1 1 auto\",\n minHeight: 0,\n // [theme.breakpoints.down('sm')]: {\n // minHeight: '300px'\n // },\n overflow: \"auto\"\n },\n messageContainer: {\n [theme.breakpoints.down('sm')]: {\n padding: theme.spacing(2),\n '&>div:not(:last-child) ': {\n marginBottom: theme.spacing(2),\n }\n },\n padding: [theme.spacing(4), theme.spacing(4), theme.spacing(3), theme.spacing(4)],\n '&>div:not(:last-child) ': {\n marginBottom: theme.spacing(3),\n }\n },\n inputContainer: {\n flex: \"0 0 auto\",\n padding: theme.spacing(1),\n margin: [0, theme.spacing(3), theme.spacing(3), theme.spacing(3)],\n [theme.breakpoints.down('sm')]: {\n margin: theme.spacing(1),\n width: '100%',\n // minHeight: '100px', // would be cool to somehow allocate enough to make visible what is being typed;)\n maxHeight: '25%',\n boxSizing: 'border-box'\n },\n backgroundColor: theme.palette.background.paper\n },\n disabledInput: {\n transition: `opacity 75ms ease-in-out`,\n opacity: \"0.5\",\n pointerEvents: \"none\",\n backgroundColor: theme.palette.grey[100]\n },\n}));\n\nconst renderMessage = (message, users, currentUser, onRendered) => {\n const sender = getMessageSender(message, users);\n\n let position = \"left\";\n if ((!Boolean(currentUser) && !message.sender) ||\n (Boolean(currentUser) && message.sender && message.sender === currentUser.pk)) {\n position = \"right\";\n }\n\n if (Boolean(message.sender) && !sender) {\n // In case the sender is not yet fetched return message skeleton\n return (\n
\n );\n}\n\nChat.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object,\n onSubmit: PropTypes.func,\n workspaceKey: PropTypes.string,\n messages: PropTypes.arrayOf(PropTypes.shape({\n pk: PropTypes.string.isRequired,\n sk: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n sender: PropTypes.string\n })),\n header: PropTypes.element,\n inputDisabled: PropTypes.bool,\n inputPlaceholder: PropTypes.string\n}\n\nChat.defaultProps = {\n classes: {}\n};\n\nexport default Chat;","import React, {useContext, useState, useEffect, useRef} from 'react';\nimport {ApiContext} from \"../contexts/ApiContext\";\nimport {ReactReduxContext, useDispatch} from \"react-redux\";\nimport {addMember} from \"../state/members/actions\";\nimport {toUserKey} from \"../utils/apiUtils\";\n\n// TODO: Delete, replace with useFetchUsers\n// TODO: Extract missing user function to utils\nexport const useFetchMissingSenders = (workspaceKey, messages) => {\n const api = useContext(ApiContext);\n const dispatch = useDispatch();\n const { store } = useContext(ReactReduxContext);\n const messagesLength = messages?.length ?? 0;\n const messageKey = messagesLength > 0 ? messages[0].pk : \"\";\n\n const fetchMissingUsers = async () => {\n const senders = messages.filter(msg => Boolean(msg.sender)).map(msg => msg.sender);\n const uniqueUsers = [...new Set(senders)];\n const existingUsers = store.getState().members[workspaceKey];\n const missingUsers = existingUsers\n ? uniqueUsers.flatMap(key =>!existingUsers.find(user => user.pk === key) ? [key] : [])\n : uniqueUsers;\n if (missingUsers.length === 0) {\n return;\n }\n\n for (const key of missingUsers) {\n console.log(\"fetchMissingMember: %o\", key);\n const user = await api.query.getUserProfile(key);\n dispatch(addMember(workspaceKey, user));\n }\n };\n\n useEffect(() => {\n if (!messages || messages.length === 0) {\n return;\n }\n\n fetchMissingUsers();\n }, [workspaceKey, messagesLength, messageKey]);\n}","import React, {useContext, useEffect, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Avatar,\n Box,\n Card,\n CardContent,\n Grid,\n Typography,\n colors,\n makeStyles,\n CssBaseline,\n Table,\n TableHead,\n TableRow,\n TableCell,\n Checkbox,\n TableBody,\n TablePagination,\n List,\n ListItem,\n ListItemAvatar, useTheme, ListItemText, Divider, ListItemSecondaryAction, ListItemIcon, ButtonBase\n} from '@material-ui/core';\nimport {Skeleton} from \"@material-ui/lab\";\nimport ChatMessageSkeleton from \"./ChatMessageSkeleton\";\nimport ChatMessage from \"./ChatMessage\";\n\nconst useStyles = makeStyles((theme) => ({\n chatSkeleton: {\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n messageContainer: {\n flex: \"1 1 auto\",\n padding: [theme.spacing(4)],\n '&>div:not(:last-child) ': {\n marginBottom: theme.spacing(3),\n }\n },\n inputSkeleton: {\n margin: [0, theme.spacing(4), theme.spacing(4), theme.spacing(4)],\n flex: \"0 0 auto\"\n }\n}));\n\nconst ChatSkeleton = ({className}) => {\n const classes = useStyles();\n\n return (\n \n
\n \n { header && header }\n { messages.map(msg => renderMessage(msg, users, currentUser, handleMessageRendered)) }\n
\n \n \n
\n \n \n
\n );\n}\nChatSkeleton.propTypes = {\n className: PropTypes.string\n}\n\nexport default ChatSkeleton;","import * as types from \"./actionTypes\";\nimport {groupBy, stableSort} from \"../../utils/arrayUtils\";\n\nexport const loadComments = (reportKey, comments) => async (dispatch, getState) => {\n const sorted = stableSort(comments, 'asc', \"createdAt\");\n dispatch({ type: types.COMMENTS_LOADED, payload: {reportKey: reportKey, comments: sorted} });\n}\n\nexport const addComment = (reportKey, comment) => async (dispatch, getState) => {\n const exists = getState().comments[reportKey]?.some(t => t.sk === comment.sk);\n if (exists) {\n console.warn(`Comment with id ${comment.sk} already exists`);\n return;\n }\n\n dispatch({ type: types.COMMENT_ADDED, payload: {reportKey: reportKey, comment: comment} });\n}\n\nexport const deleteAllComments = (workspaceKey) => async (dispatch, getState) => {\n dispatch({ type: types.COMMENTS_DELETED, payload: { workspaceKey } });\n}","import * as types from \"./actionTypes\";\n\nexport const loadReports = (workspaceKey, reports) => async (dispatch, getState) => {\n const loaded = Boolean(getState().reports[workspaceKey]);\n if (loaded) {\n console.warn(`Reports for workspace %o already loaded`, workspaceKey);\n }\n\n dispatch({ type: types.REPORTS_LOADED, payload: {workspaceKey: workspaceKey, reports: reports} });\n}\n\nexport const addOrUpdateReport = (workspaceKey, reportKey, report) => async (dispatch, getState) => {\n const reports = getState().reports[workspaceKey];\n console.log(\"addOrUpdateReport called\");\n if (!reports) {\n console.log(\"addOrUpdateReport - no reports loaded, loading report into workspace\")\n dispatch({ type: types.REPORTS_LOADED, payload: {workspaceKey: workspaceKey, reports: [report]} });\n return;\n }\n\n const existing = reports.find(t => t.pk === reportKey);\n if (existing) {\n console.log(\"addOrUpdateReport - found marching report, updating existing report\")\n const updated = {...existing, ...report};\n dispatch({ type: types.REPORT_UPDATED, payload: {workspaceKey: workspaceKey, report: updated} });\n } else {\n console.log(\"addOrUpdateReport - no marching report, adding report into workspace\")\n dispatch({ type: types.REPORT_ADDED, payload: {workspaceKey: workspaceKey, report: report} });\n }\n}\n\nexport const deleteAllReports = (workspaceKey) => async (dispatch, getState) => {\n dispatch({ type: types.REPORTS_DELETED, payload: { workspaceKey } });\n}","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles,\n LinearProgress,\n Tooltip, Typography\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\nimport {addDays, daysDiff, millisecondsToDays} from \"../../utils/time\";\nimport {isFormKey} from \"../../utils/apiUtils\";\nimport {isOverdue, remainingDays} from \"../../utils/reportUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n termProgress: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n progressBar: {\n height: \"4px\",\n width: \"33%\",\n borderRadius: \"4px\",\n backgroundColor: theme.palette.grey[300],\n position: \"relative\",\n '&:after': {\n content: '\"\"',\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n borderRadius: \"4px\",\n border: `1px solid ${theme.palette.divider}`\n },\n },\n barColorDefault: {\n backgroundColor: theme.palette.secondary.light\n },\n barColorOverdue : {\n backgroundColor: theme.palette.secondary.dark\n },\n label: {\n color: theme.palette.text.hint,\n lineHeight: \"135%\",\n marginLeft: theme.spacing(0.5)\n },\n}));\n\nconst TermProgress = ({className, classes: propClasses, report, TypographyProps}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const createdAt = new Date(report.createdAt);\n // All new reports have form tags. These reports use dueDate and not static 90 days deadline.\n const dueDate = new Date(report.dueDate);\n const termLength = daysDiff(createdAt, dueDate);\n const elapsed = daysDiff(createdAt, new Date());\n const isOverdue = new Date() > dueDate;\n const days = Math.abs(termLength - elapsed);\n const label = isOverdue ? (t(\"days overdue\", {count: days})) : (t(\"days remaining\", {count: days}));\n\n // TODO: Return Open status indicator??\n if (!report.dueDate) {\n return <>\n }\n\n return (\n // \n \n
\n \n \n {label}\n \n
\n // \n \n \n {t(report.state)}\n \n
\n\n )\n};\n\nStatusIndicator.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.object,\n TypographyProps: PropTypes.object,\n report: PropTypes.shape({\n state: PropTypes.oneOf([\"open\", \"solved\", \"junk\"])\n })\n}\n\nStatusIndicator.defaultProps = {\n classes: {},\n TypographyProps: {}\n};\n\n\nexport default StatusIndicator;","import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Typography, colors, makeStyles, LinearProgress, Tooltip } from \"@material-ui/core\";\nimport { millisecondsToDays } from \"../../utils/time\";\nimport DueDatePicker from \"../Pickers/DueDatePicker\";\nimport { useTranslation } from \"react-i18next\";\nimport { elapsedDays, isOpen, isOverdue, remainingDays, termDays } from \"../../utils/reportUtils\";\nimport TermProgress from \"./TermProgress\";\nimport StatusIndicator from \"./StatusIndicator\";\nimport {isFormKey} from \"../../utils/apiUtils\";\n\nconst ReportStatus = ({ className, classes: propClasses, report}) => {\n return isOpen(report) ? (\n \n \n \n {`Report ${accessId}`}\n \n {/**/}\n {/* \n {/**/}\n {/* */}\n {/* */}\n {/* */}\n {/**/}\n {/* */}\n {/* */}\n {/* */}\n \n \n \n \n
\n );\n\n const headerSkeleton = () => (\n <>\n \n \n \n {workspace.name}\n \n
\n \n \n {t(\"anonymousChatNotification\")}\n \n
\n \n )}\n />\n ) : (\n \n {children}\n
\n )\n};\n\nexport default Card;","import { toId } from \"../../utils/apiUtils\";\n\nexport const reportSelector = (workspaceKey, reportKey) => state => {\n return state.reports[workspaceKey]?.find(t => t.pk === reportKey);\n}\n// TODO: Filter reports on backend!!!!\nexport const workspaceReports = (workspaceKey) => state => {\n if (!state.currentUser || !state.members[workspaceKey]) {\n return [];\n }\n\n // Return all reports if current user role is not approver\n const membership = state.members[workspaceKey].find(t => t.pk === state.currentUser.pk);\n if (membership.role !== \"approver\") {\n return state.reports[workspaceKey] ?? [];\n }\n\n // Return only approved reports or reports awaiting approval\n return state.reports[workspaceKey]?.filter(t => Boolean(t.approval) || t.followers?.includes(state.currentUser.pk) || t.owners?.includes(toId(state.currentUser.pk))) ?? [];\n};\n\nexport const reportsAssignedToCurrentUser = () => state => {\n if (!state.currentUser) {\n return [];\n }\n\n return Object.entries(state.reports).flatMap(report => report.owners?.includes(state.currentUser.id) ? [report] : []);\n};\n","import React, {useContext, useEffect, useState} from 'react';\nimport {\n Avatar,\n Box,\n Card,\n Checkbox,\n Table,\n TableBody,\n TableCell,\n TablePagination,\n TableRow,\n Typography,\n Container,\n LinearProgress,\n makeStyles, useTheme, TableSortLabel, TableContainer, Divider, TableHead, IconButton\n} from '@material-ui/core';\nimport clsx from \"clsx\";\nimport theme from \"../../theme\";\nimport PropTypes from \"prop-types\";\nimport {useSelector} from \"react-redux\";\nimport {workspaceReports} from \"../../state/reports/selectors\";\nimport UserAvatar from \"../../components/UserAvatar\";\nimport ReportProgress from \"../../components/ReportProgress\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {stableSort} from \"../../utils/arrayUtils\";\nimport {getReportName} from \"../../utils/textUtils\";\nimport {useTranslation} from \"react-i18next\";\nimport UserCard from \"../../components/UserCard\";\nimport {activeMembersSelector} from \"../../state/members/selectors\";\nimport {AvatarGroup} from \"@material-ui/lab\";\nimport {useParams} from \"react-router-dom\";\nimport {toWorkspaceKey} from \"../../utils/apiUtils\";\nimport TermProgress from \"../../components/ReportStatus/TermProgress\";\n\nconst avatarSize = 40;\nconst rowHeight = avatarSize + 2 * theme.spacing(2) + 1; // + 1 to include divider height\n\nconst useStyles = makeStyles((theme) => ({\n tableRoot: {\n height: \"100%\",\n width: \"100%\",\n padding: [0, theme.spacing(2)]\n },\n table: {\n tableLayout: \"fixed\"\n },\n avatar: {\n marginRight: theme.spacing(2)\n },\n progress: {\n height: \"6px\",\n width: \"100%\",\n borderRadius: 8,\n marginTop: theme.spacing(0.25)\n },\n idColumn: {\n width: \"7%\"\n },\n detailsColumn: {\n width: \"35%\"\n },\n header: {\n '&>th:first-child': {\n borderRadius: \"8px 0px 0px 8px\"\n },\n '&>th:last-child': {\n borderRadius: \"0px 8px 8px 0px\"\n }\n },\n cell: {\n padding: [0, theme.spacing(2)],\n borderBottom: \"initial\"\n },\n row: {\n height: theme.spacing(7)\n },\n headerCell: {\n color: theme.palette.text.secondary,\n backgroundColor: theme.palette.grey[50],\n borderBottom: \"initial\"\n }\n}));\n\nconst ReportTable = ({className, reports}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {workspaceId} = useParams();\n const workspaceKey = toWorkspaceKey(workspaceId);\n const users = useSelector(activeMembersSelector(workspaceKey));\n\n return (\n \n {children}\n
\n );\n});\n\nFormBlockContainer.propTypes = {\n className: PropTypes.string\n};\n\nFormBlockContainer.defaultProps = {\n};\n\nexport default FormBlockContainer;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport {\n alpha,\n Button,\n ButtonBase,\n Checkbox,\n createTheme,\n makeStyles,\n useTheme,\n ThemeProvider,\n Paper,\n} from \"@material-ui/core\";\nimport { SpinnerButton } from \"../ConfirmationButton/SpinnerButton\";\nimport FormTextField from \"../FormTextField/FormTextField\";\nimport { useTranslation } from \"react-i18next\";\nimport FormBlock from \"../formBlocks\";\nimport { isConfirmationPage } from \"../../utils/formUtils\";\nimport FormBlockContainer from \"../FormBlockContainer/FormBlockContainer\";\n\nconst useStyles = makeStyles((theme) => ({\n formPageActions: {\n //flex: \"0 0 auto\",\n //padding: [theme.spacing(2), 0],\n //paddingTop: theme.spacing(2),\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n paddingTop: theme.spacing(5)\n },\n secondaryButton: {\n marginRight: theme.spacing(3),\n },\n disabledContainedButton: {\n width: \"100%\",\n borderRadius: theme.shape.borderRadius,\n //backgroundColor: theme.palette.action.disabledBackground,\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n boxShadow: theme.shadows[2],\n padding: \"6px 22px\",\n },\n disabledOutlinedButton: {\n width: \"100%\",\n borderRadius: theme.shape.borderRadius,\n //border: `1px solid ${theme.palette.action.disabledBackground}`,\n border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,\n color: theme.palette.primary.main,\n padding: \"5px 21px\",\n },\n editorTextField: {\n pointerEvents: \"all\",\n color: \"inherit\",\n },\n}));\n\nconst showSecondaryButton = (variant) => variant === \"other\" || variant === \"lastPage\";\n\nconst getPrimaryDefaultText = (t, language, variant) =>\n variant === \"lastPage\" ? t(\"submit\", { lng: language }) : t(\"continue\", { lng: language });\n\nconst getSecondaryDefaultText = (t, language) => t(\"back\", { lng: language });\n\nexport const getFormActionsVariant = (pageIndex, pagesCount) => {\n if (pageIndex === 0) {\n return \"firstPage\";\n } else if (pageIndex === pagesCount - 2) {\n return \"lastPage\";\n } else if (isConfirmationPage(pageIndex, pagesCount)) {\n return \"confirmationPage\";\n } else {\n return \"other\";\n }\n};\n\nconst PresentationalFormActionButtons = ({\n className,\n template,\n languagePack,\n language,\n pageIndex,\n pagesCount,\n isBusy,\n onPrimaryButtonClick,\n onSecondaryButtonClick,\n}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const variant = getFormActionsVariant(pageIndex, pagesCount);\n\n return (\n \n \n {workspace.name} \n
\n )\n\n return (\n ![{LANGUAGE_LABELS[selectedLanguage]}]({`/static/icons/flags/${selectedLanguage}.svg`}){kind=icon}
\n \n {LANGUAGE_LABELS[selectedLanguage]}\n \n \n ![{LANGUAGE_LABELS[lang]}]({`/static/icons/flags/${lang}.svg`})
\n
\n \n \n // setDrawerOpen(false)}\n // >\n //
\n // - \n // {languages.map((lang) => (\n //
\n \n {showLoginPage ? loginPage() : formPages()}\n \n
\n \n {children}\n
\n \n \n {document.name}\n \n \n {document.type}\n \n
\n \n \n \n {getFileExtension(document.name).toUpperCase()}\n \n
\n \n \n \n {document.size}\n \n \n {!STATIC_DOCUMENTS.some(staticDoc => staticDoc.name === document.name) && (\n
\n \n \n {t(\"What is your company's name\")}\n \n \n {t(\"It will be used as the name of your workspace\")}\n \n
\n )\n}\n\nWorkspaceDetailsPage.propTypes = {\n className: PropTypes.string,\n name: PropTypes.string,\n error: PropTypes.bool,\n onNameChanged: PropTypes.func\n}\n\nWorkspaceDetailsPage.defaultProps = {\n onNameChanged: () => {},\n error: false\n};\n\nexport default WorkspaceDetailsPage;","import {\n Divider,\n FormControl,\n InputLabel,\n ListItem,\n ListItemAvatar,\n ListItemText, makeStyles,\n MenuItem,\n Select,\n Typography\n} from \"@material-ui/core\";\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {useTranslation} from \"react-i18next\";\n\nconst useStyles = makeStyles((theme) => ({\n menuItem: {\n whiteSpace: \"normal\",\n maxWidth: theme.spacing(75)\n },\n}));\n\nconst UserRoleSelect = ({className, value, onChange, hiddenLabel, SelectProps, ...rest}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n\n const handleChange = (value) => {\n ;\n }\n\n return (\n \n handleUpdateInvitationEmail(index, event)}\n />\n handleUpdateInvitationRole(index, role)}\n />\n \n handleRemoveInvitation(index)}>\n \n \n
\n ))}\n \n \n \n {t(\"Invite people to your workspace\")}\n \n \n {t(\"Your teammates will get an email that gives them access to your workspace\")}\n \n \n
\n )\n}\n\nWorkspaceInvitationPage.propTypes = {\n className: PropTypes.string,\n onInvitationsChanged: PropTypes.func\n}\n\nWorkspaceInvitationPage.defaultProps = {\n onInvitationsChanged: () => {}\n};\n\nexport default WorkspaceInvitationPage;","import React, {useContext, useEffect, useState} from 'react';\nimport {Box, CircularProgress, Container, makeStyles, Step, StepLabel, Stepper, Typography} from \"@material-ui/core\"\nimport PropTypes from \"prop-types\";\nimport GeneralProfileSettings from \"../ProfileButton/GeneralProfileSettings\";\nimport Button from \"@material-ui/core/Button\";\nimport clsx from \"clsx\";\nimport WorkspaceDetailsPage from \"./WorkspaceDetailsPage\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport WorkspaceInvitationPage from \"./WorkspaceInvitationPage\";\nimport {useSelector} from \"react-redux\";\nimport {currentUserSelector} from \"../../state/currentUser/selectors\";\nimport {useTranslation} from \"react-i18next\";\nimport {AuthContext} from \"../../contexts/AuthContext\";\nimport {isValidEmail} from \"../../utils/textUtils\";\nimport {SpinnerButton} from \"../ConfirmationButton/SpinnerButton\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.background.paper\n //display: \"flex\",\n //flexDirection: \"column\"\n //padding: [theme.spacing(5), theme.spacing(12)],\n //minWidth: theme.spacing(75)\n },\n stepper: {\n //flex: \"0 0 auto\"\n //padding: [theme.spacing(2), theme.spacing(3)]\n },\n content: {\n marginTop: theme.spacing(2),\n //flex: \"1 1 auto\"\n //padding: [theme.spacing(1), theme.spacing(3)],\n },\n actions: {\n //flex: \"0 0 auto\",\n display: \"flex\",\n justifyContent: \"space-between\",\n marginTop: theme.spacing(3),\n }\n}));\n\nfunction getSteps(t) {\n return [t(\"Workspace details\"), t(\"Invite teammates\")];\n}\n\nconst WorkspaceWizard = ({className, onCompleted}) => {\n const classes = useStyles();\n const api = useContext(ApiContext);\n const { refreshToken } = useContext(AuthContext);\n const { t } = useTranslation();\n const steps = getSteps(t);\n const currentUser = useSelector(currentUserSelector());\n const [activeStep, setActiveStep] = React.useState(0);\n const [name, setName] = useState(\"\");\n const [nameError, setNameError] = useState(false);\n const [invitations, setInvitations] = useState([]);\n const [idle, setIdle] = useState(false);\n\n const handleNameChanged = (value) => {\n setName(value);\n setNameError(value.length === 0);\n }\n\n const getStepContent = (stepIndex) => {\n switch (stepIndex) {\n case 0:\n return (\n \n {steps.map((label) => (\n \n {label} \n \n ))}\n \n
\n )\n}\n\nWorkspaceWizard.propTypes = {\n className: PropTypes.string\n}\n\nWorkspaceWizard.defaultProps = {\n onCompleted: () => {}\n};\n\nexport default WorkspaceWizard;","import WorkspaceWizard from \"./WorkspaceWizard\";\n\nexport default WorkspaceWizard;","import React, {useContext, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles,\n useTheme,\n Dialog,\n useMediaQuery, Tooltip\n} from '@material-ui/core';\nimport WorkspaceWizard from \"../WorkspaceWizard\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport ClearOutlinedIcon from \"@material-ui/icons/ClearOutlined\";\nimport {useNavigate} from \"react-router-dom\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {addOrUpdateWorkspace} from \"../../state/workspaces/actions\";\nimport {currentUserSelector} from \"../../state/currentUser/selectors\";\nimport {useTranslation} from \"react-i18next\";\nimport {toId} from \"../../utils/apiUtils\";\nimport {addMember} from \"../../state/members/actions\";\nimport {loadOrUpdateCurrentUser} from \"../../state/currentUser/actions\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n },\n toolbar: {\n flex: \"0 0 auto\",\n padding: [theme.spacing(2), theme.spacing(3), theme.spacing(0), theme.spacing(3)],\n display: \"flex\",\n justifyContent: \"flex-end\"\n },\n content: {\n width: theme.breakpoints.values.sm,\n\n padding: [theme.spacing(0), theme.spacing(3), theme.spacing(3), theme.spacing(3)],\n overflowY: \"auto\"\n //padding: [theme.spacing(5), theme.spacing(12)],\n }\n}));\n\nconst CreateWorkspaceDialog = ({className, open, onClose}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const theme = useTheme();\n const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));\n const currentUser = useSelector(currentUserSelector());\n\n const handleOnCompleted = (workspace) => {\n dispatch(addOrUpdateWorkspace(workspace));\n dispatch(addMember(workspace.pk, {...currentUser, sk: workspace.pk, role: \"admin\"}));\n const lastReads = {...currentUser.lastReads};\n lastReads[workspace.pk] = {};\n dispatch(loadOrUpdateCurrentUser({lastReads: lastReads}));\n onClose();\n navigate(`/portal/${toId(workspace.pk)}/overview`);\n }\n\n return (\n \n {getStepContent(activeStep)}\n
\n \n \n {t(\"Back\")}\n \n \n {nextButtonText()}\n \n
\n \n \n \n \n \n
\n \n \n {!collapsed && (\n \n whispero\n \n )}\n\n
\n {/*{ !activeWorkspaceLoaded && (*/}\n {/* <>*/}\n {/* - \n {items.map((item) => (\n
\n { !collapsed && (\n \n {t(\"workspaces\")}\n \n )}\n \n setWorkspaceDialogOpen(true)} edge=\"end\">\n \n \n
\n - \n {/*
\n \n
\n ))\n ) : (\n workspaces.map((workspace) => (\n \n \n {title}\n \n \n \n
\n \n ) : (\n \n \n {t(\"screenSizeNotSupported\")}\n \n
\n )\n }\n\n return (\n \n \n {workspacesLoaded ? (\n
\n )\n}\n\nconst useStyles = makeStyles((theme) => ({\n layoutRoot: {\n overflow: \"hidden\",\n height: '100%',\n display: \"flex\",\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column'\n }\n },\n container: {\n height: \"100%\",\n flex: \"1 1 auto\",\n display: 'flex',\n flexDirection: 'column',\n [theme.breakpoints.down('sm')]: {\n height: 'auto',\n minHeight: 0\n }\n },\n main: {\n height: `calc(100% - ${TopBarHeight + 1}px)`, // + 1 is to include divider under top bar\n [theme.breakpoints.down('sm')]: {\n height: 'auto',\n flex: 1,\n overflowY: 'auto',\n WebkitOverflowScrolling: 'touch' // For smooth scrolling on iOS\n }\n },\n mobileNav: {\n display: 'none',\n [theme.breakpoints.down('sm')]: {\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(1),\n borderBottom: `1px solid ${theme.palette.divider}`\n }\n },\n navBarMobile: {\n [theme.breakpoints.down('sm')]: {\n position: 'fixed',\n left: 0,\n top: 0,\n bottom: 0,\n zIndex: theme.zIndex.drawer,\n transform: props => props.isNavOpen ? 'translateX(0)' : 'translateX(-100%)',\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.standard\n })\n }\n },\n overlay: {\n display: 'none',\n [theme.breakpoints.down('sm')]: {\n display: 'block',\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n zIndex: theme.zIndex.drawer - 1\n }\n }\n}));\n\nconst PortalLayout = () => {\n const [isNavOpen, setIsNavOpen] = useState(false);\n const classes = useStyles({ isNavOpen });\n // const { t } = useTranslation();\n // const theme = useTheme(); // historically used for smallScreen check, not needed now\n const workspaceKeys = useSelector(currentUserMemberships()) ?? [];\n const workspacesLoaded = useFetchWorkspaces(workspaceKeys);\n\n const toggleNav = () => {\n setIsNavOpen(!isNavOpen);\n };\n\n return (\n \n \n \n
\n ) : (\n \n {/* Mobile Navigation Toggle */}\n \n \n\n {/* Navigation Sidebar */}\n \n setIsNavOpen(false)}\n />\n \n )}\n\n {/* Main Content */}\n {workspacesLoaded ? (\n
\n );\n};\n\n\nexport default PortalLayout;","import PortalLayout from './PortalLayout';\n\nexport default PortalLayout","import React from 'react';\nimport {\n makeStyles, Container\n} from \"@material-ui/core\";\nimport { Navigate, useNavigate } from \"react-router-dom\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { currentUserSelector } from \"../../state/currentUser/selectors\";\nimport Card from \"../../components/Card\";\nimport WorkspaceWizard from \"../../components/WorkspaceWizard\";\nimport { activeWorkspacesSelector } from \"../../state/workspaces/selectors\";\nimport { addOrUpdateWorkspace } from \"../../state/workspaces/actions\";\nimport { toId } from \"../../utils/apiUtils\";\nimport Page from \"../../components/Page/Page\";\nimport { useTranslation } from \"react-i18next\";\n\nconst useStyles = makeStyles((theme) => ({\n container: {\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n },\n paper: {\n padding: [theme.spacing(2), theme.spacing(3), theme.spacing(3), theme.spacing(3)],\n backgroundColor: theme.palette.background.paper\n },\n wizard: {\n }\n}));\n\n// TODO: Wrap in Page\nexport const Onboarding = (props) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const workspaces = useSelector(activeWorkspacesSelector());\n const user = useSelector(currentUserSelector());\n const navigate = useNavigate();\n const dispatch = useDispatch();\n\n const handleOnCompleted = (workspace) => {\n dispatch(addOrUpdateWorkspace(workspace));\n navigate(`/portal/${toId(workspace.pk)}/home`);\n }\n\n return workspaces.length > 0 ? (\n \n \n \n
\n \n
\n\n {/* Mobile Overlay */}\n {isNavOpen && (\n \n \n \n
\n ):(\n \n handleWorkspaceCountChanged(e.target.value)}\n />\n \n
\n );\n };\n\n const handleOnCompleted = (workspace) => {\n navigate(`/portal/${toId(workspace.pk)}/home`);\n };\n\n return workspaces.length > 0 ? (\n \n \n {t(\"Basic information\")}\n \n \n {t(\"Information about your company that will be used in document templates and report forms\")}\n \n
\n \n handleOnAvatarSelected(null)}\n />\n
\n \n {\n handleCountryChange(newValue);\n }}\n getOptionLabel={(option) => option.label ?? \"\"}\n renderInput={(params) => (\n \n \n
\n \n \n
\n \n setInvitationDialogOpen(false)}/>\n {renderContextMenu()}\n
\n );\n};\n\nexport default InvitationsSection;\n\nInvitationsSection.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.shape({\n content: PropTypes.string,\n tableHeader: PropTypes.string\n })\n}\n\nInvitationsSection.defaultProps = {\n classes: {}\n};","export const invitationsSelector = (workspaceKey) => state => state.invitations[workspaceKey];","import React, {useContext, useState} from 'react';\nimport {\n Chip,\n Container, Dialog,\n Grid,\n makeStyles, Typography,\n useTheme\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\n\nconst useStyles = makeStyles((theme) => ({\n chip: {\n color: theme.palette.secondary.light\n },\n}));\n\nconst OwnerChip = () => {\n const classes = useStyles();\n const {t} = useTranslation();\n\n return (\n \n \n \n {t(\"Invitations\")}\n \n \n {t(\"People invited to your workspace that have not yet accepted the invitation\")}\n \n \n \n
\n\n \n { renderInvitations() }\n
\n \n \n {t(\"Members\")}\n \n \n {t(\"Members have access to workspace reports and conversations\")}\n \n setRoleConfirmationDialogOpen(false)}\n onConfirm={handleRoleConfirmationDialogConfirmed}\n />\n setDeleteMemberDialogOpen(false)}\n onConfirm={handleDeleteConfirmationDialogConfirmed}\n />\n
\n );\n};\n\nexport default MembersSection;\n\nMembersSection.propTypes = {\n className: PropTypes.string,\n classes: PropTypes.shape({\n content: PropTypes.string,\n tableHeader: PropTypes.string\n })\n}\n\nMembersSection.defaultProps = {\n classes: {}\n};","import React, {useContext, useEffect, useState} from 'react';\nimport {\n Box,\n Container,\n Dialog,\n DialogActions,\n DialogContent,\n Divider,\n alpha,\n Grid, ListItemIcon, ListItemText,\n makeStyles,\n Table,\n TableBody,\n TableCell,\n TableContainer,\n TableHead,\n TableRow,\n TextField,\n Toolbar,\n Tooltip,\n Typography,\n useTheme\n} from '@material-ui/core';\nimport clsx from \"clsx\";\nimport StyledContainer from \"../../../components/StyledContainer\";\nimport InvitationsSection from \"./InvitationsSection\";\nimport MembersSection from \"./MembersSection\";\nimport {CardShadow} from \"../../../constants\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n ...CardShadow\n },\n section: {\n margin: [theme.spacing(0), theme.spacing(4)]\n },\n inviteButton: {\n marginTop: theme.spacing(0.5),\n flex: \"0 0 auto\"\n },\n sectionContent: {\n marginTop: theme.spacing(2)\n },\n divider: {\n margin: [theme.spacing(4), 0]\n },\n headerCell: {\n color: theme.palette.text.secondary,\n },\n roleSelect: {\n width: theme.spacing(15),\n }\n}));\n\n// TODO: Split component into smaller subcomponents\nconst WorkspaceUsersSettings = ({className}) => {\n const classes = useStyles();\n\n return (\n \n \n \n
\n \n
\n {renderContextMenu()}\n - {t(\"dialogSettings.languages\")}}>\n { items.map((item, index) => {\n // Disable switch if this is the only language that is still enabled. At least one language\n // must remain enabled.\n const isSwitchDisabled = enabledLanguagesCount === 1 && item.enabled;\n return (\n
\n \n \n
\n );\n};\n\nexport default DialogsSettings;","import DialogsSettings from \"./DialogsSettings\";\n\nexport default DialogsSettings;","import React, {useContext, useState} from 'react';\nimport {\n AppBar,\n Container, Dialog, Divider,\n Grid,\n makeStyles, Toolbar, Typography,\n useTheme\n} from '@material-ui/core';\nimport {Navigate, useParams} from \"react-router-dom\";\nimport {useSelector} from \"react-redux\";\nimport {workspaceReports} from \"../../state/reports/selectors\";\nimport StyledTabs from \"../../components/StyledTabs/StyledTabs\";\nimport StyledTab from \"../../components/StyledTabs/StyledTab\";\nimport AccountBoxIcon from \"@material-ui/icons/AccountBox\";\nimport VpnKeyIcon from \"@material-ui/icons/VpnKey\";\nimport TabPanel from \"../../components/StyledTabs/TabPanel\";\nimport InfoIcon from '@material-ui/icons/Info';\nimport GroupIcon from '@material-ui/icons/Group';\nimport GeneralWorkspaceSettings from \"./GeneralWorkspaceSettings\";\nimport WorkspaceUsersSettings from \"./WorkspaceUserSettings/WorkspaceUsersSettings\";\nimport DialogsSettings from \"./DialogsSettings\";\nimport BallotIcon from '@material-ui/icons/Ballot';\nimport {useTranslation} from \"react-i18next\";\nimport {currentUserRoleSelector} from \"../../state/members/selectors\";\nimport {toId, toWorkspaceKey} from \"../../utils/apiUtils\";\nimport clsx from \"clsx\";\nimport Page from \"../../components/Page/Page\";\nimport {WorkspaceKeyContext} from \"../../contexts/WorkspaceKeyContext\";\nimport {workspaceSelector} from \"../../state/workspaces/selectors\";\nimport WorkspacePage from \"../../components/WorkspacePage/WorkspacePage\";\nimport { isAdmin, isOwner } from \"../../utils/user\";\nimport { currentUserSelector } from \"../../state/currentUser/selectors\";\n\nconst useStyles = makeStyles((theme) => ({\n settings: {\n width: '100%',\n height: \"100%\",\n },\n toolbarTab:{\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(2),\n textTransform: \"none\",\n ...theme.typography.body2,\n },\n container: {\n padding: theme.spacing(3)\n },\n tabPanel: {\n paddingTop: theme.spacing(4)\n },\n avatar: {\n backgroundColor: theme.palette.primary.light\n },\n dialogSettings: {\n height: \"100%\"\n },\n toolbar: {\n padding: [0, theme.spacing(4)]\n }\n}));\n\n// TODO: Rename\nconst PortalSettings = () => {\n const classes = useStyles();\n const { t } = useTranslation();\n const workspaceKey = useContext(WorkspaceKeyContext);\n const workspace = useSelector(workspaceSelector(workspaceKey));\n const currentUser = useSelector(currentUserSelector(workspaceKey));\n const currentUserRole = useSelector(currentUserRoleSelector(workspaceKey));\n const [tabValue, setTabValue] = React.useState(0);\n\n if (!isOwner(workspace, currentUser) && !isAdmin(currentUserRole)) {\n return (\n \n
\n \n {dialogIndex === 0 && (\n \n )}\n {dialogIndex === 1 && (\n \n )}\n {dialogIndex === 2 && (\n \n )}\n
\n \n \n
\n \n \n {workspace.name}\n \n
\n \n );\n};\n\nexport default WorkspaceTile;","import React, {useContext, useState} from 'react';\nimport {\n Box,\n Container, Divider,\n Grid,\n makeStyles, Typography,\n useTheme\n} from '@material-ui/core';\nimport Card from \"../../components/Card\";\nimport Button from \"@material-ui/core/Button\";\nimport {useTranslation} from \"react-i18next\";\nimport AddCircleIcon from '@material-ui/icons/AddCircle';\nimport IconButton from \"@material-ui/core/IconButton\";\nimport CreateWorkspaceDialog from \"../../components/CreateWorkspaceDialog/CreateWorkspaceDialog\";\n\nconst useStyles = makeStyles((theme) => ({\n addWorkspaceButton: {\n width: theme.spacing(14),\n minWidth: theme.spacing(14),\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n // padding: [theme.spacing(3), 0]\n '&:hover': {\n backgroundColor: theme.palette.grey[100]\n },\n borderRadius: 6,\n padding: theme.spacing(2),\n textTransform: \"none\",\n textAlign: \"center\",\n ...theme.typography.body2\n },\n label: {\n display: \"block\",\n },\n startIcon: {\n margin: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: theme.spacing(10),\n height: theme.spacing(10),\n borderRadius: \"12px\",\n border: `1px dashed ${theme.palette.grey[400]}`,\n marginBottom: theme.spacing(1)\n }\n}));\n\nconst AddWorkspaceButton = ({...rest}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const [workspaceDialogOpen, setWorkspaceDialogOpen] = useState(false);\n\n return (\n <>\n \n
\n \n {workspaces.map((workspace) => (\n
\n \n \n {workspace.name} \n
\n )\n\n const handleDrawerOpen = () => {\n setDrawerOpen(true);\n };\n\n const handleDrawerClose = () => {\n setDrawerOpen(false);\n };\n\n const handleDrawerLanguageChanged = (value) => {\n setLanguage(value);\n setDrawerOpen(false);\n }\n\n if (!workspaceLoaded || !availableLanguages) {\n return \n \n \n \n \n \n \n \n setLanguage(event.target.value)}\n >\n {availableLanguages.map((lang) => (\n \n ))}\n \n \n {t(\"loginToReport\", {lng: language})}\n \n \n \n \n \n \n \n \n \n \n \n \n \n {t(\"Language\", {lng: language})} \n \n \n \n \n \n {t(\"loginToReport\", {lng: language})}\n \n \n
\n )\n}\n\nexport default SubmitLayout","import SubmitLayout from \"./SubmitLayout\";\n\nexport default SubmitLayout;","import React, {useContext, useEffect, useState} from 'react';\nimport {\n alpha, AppBar,\n Avatar,\n Box, Button, ButtonBase, CircularProgress,\n Container, Divider,\n Grid, Link,\n makeStyles, Typography,\n useTheme\n} from '@material-ui/core';\nimport {NavLink, useNavigate, useParams} from \"react-router-dom\";\nimport {ReactReduxContext, useDispatch, useSelector} from \"react-redux\";\nimport {WorkspaceKeyContext} from \"../../contexts/WorkspaceKeyContext\";\nimport {workspaceSelector} from \"../../state/workspaces/selectors\";\nimport {ActiveLanguageContext} from \"../../contexts/ActiveLanguageContext\";\nimport Page from \"../../components/Page/Page\";\nimport {useTranslation} from \"react-i18next\";\nimport DesktopWindowsOutlinedIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneOutlinedIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';\nimport DesktopWindowsIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailIcon from '@material-ui/icons/EmailOutlined';\nimport {CardShadow, CardShadow2, WHISPERO_PRIVACY_POLICY_URL} from \"../../constants\";\nimport UnderlinedLink from \"../../components/UnderlinedLink\";\n\nconst useStyles = makeStyles((theme) => ({\n submitHomeRoot: {\n display: \"flex\",\n flexDirection: \"column\",\n // alignItems: \"center\",\n // justifyContent: \"center\",\n // overflowX: \"hidden\",\n //padding: [theme.spacing(2), 0]\n },\n body: {\n flexGrow: \"1\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: [theme.spacing(2), 0]\n },\n actions: {\n display: \"flex\",\n marginTop: theme.spacing(4)\n },\n buttonGrid: {\n width: \"initial\",\n marginTop: theme.spacing(3)\n },\n gridItem: {\n textAlign: \"center\"\n },\n tileButton: {\n width: theme.spacing(22),\n //height: \"100%\",\n overflow: \"hidden\",\n margin: \"auto\",\n display: \"block\",\n padding: [theme.spacing(3), theme.spacing(1)],\n paddingTop: theme.spacing(3.5),\n //borderRadius: 24,\n borderRadius: 12,\n //border: `1px solid ${theme.palette.grey[300]}`,\n //border: `1px solid rgba(0, 125, 255, 0.5)`,\n //backgroundColor: theme.palette.common.white,\n //backgroundColor: \" rgba(0, 125, 255, 0.08)\",\n backgroundColor: theme.palette.grey[200],\n //transition: \"box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n transition: theme.transitions.create(['box-shadow', \"backgroundColor\"]),\n boxShadow: \"rgb(145 158 171 / 16%) 0px 1px 2px 0px\",\n //boxShadow: \"none\",\n //boxShadow: \"0px -4px 24px rgba(145, 158, 171, 0.12), 0px 0px 2px rgba(145, 158, 171, 0.2)\",\n //...CardShadow,\n '&:hover': {\n //\"boxShadow\": theme.shadows[3],\n ...CardShadow2,\n //backgroundColor: \"initial\",\n //backgroundColor: theme.palette.grey[50],\n },\n '& .MuiButton-label': {\n flexDirection: \"column\",\n display: \"inline-flex\",\n textAlign: \"center\",\n color: theme.palette.primary.main,\n //color: theme.palette.text.primary,\n },\n '& .MuiButton-startIcon': {\n //color: theme.palette.primary.main,\n margin: 0,\n marginBottom: theme.spacing(1),\n '&>*:first-child': {\n fontSize: \"24px\"\n }\n }\n },\n tileButton2: {\n flexDirection: \"column\",\n width: theme.spacing(20),\n minWidth: theme.spacing(20),\n padding: [theme.spacing(2), theme.spacing(1)],\n justifyContent: \"flex-start\",\n height: \"100%\",\n //backgroundColor: \"aliceblue\",\n //padding: theme.spacing(2),\n textAlign: \"center\",\n borderRadius: 16,\n //color: theme.palette.text.secondary,\n //transition: \"box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n ...theme.typography.button,\n //fontSize: \"0.8125rem\",\n //fontSize: \"0.9375rem\",\n //fontWeight: 400,\n '&:hover': {\n textDecoration: 'none',\n //backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),\n backgroundColor: theme.palette.grey[200],\n ...CardShadow,\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent',\n }\n },\n },\n tileButtonAvatar: {\n width: theme.spacing(8),\n height: theme.spacing(8),\n //marginBottom: theme.spacing(0.75),\n margin: [0, theme.spacing(1), theme.spacing(1), theme.spacing(1)],\n borderRadius: 16,\n fontSize: \"32px\",\n //backgroundColor: theme.palette.grey[400],\n backgroundColor: theme.palette.primary.main,\n background: \"linear-gradient(180deg, rgba(27, 139, 255, 0.8) 0%, rgba(57, 154, 255, 0.8) 80.73%)\"\n },\n footer: {\n flex: \"0 0 auto\",\n backgroundColor: theme.palette.grey[50],\n padding: [theme.spacing(4)]\n },\n footerRow: {\n maxWidth: theme.spacing(144), // 1152px\n margin: \"auto\",\n display: \"flex\",\n justifyContent: \"space-between\",\n padding: [0, theme.spacing(3)]\n },\n footerValue: {\n color: theme.palette.text.hint\n },\n link: {\n textDecoration: \"underline\",\n color: theme.palette.text.secondary,\n '&:hover': {\n color: theme.palette.text.secondary\n }\n },\n}));\n\n// TODO: Rename views folder to pages\n// TODO: Move to components??por\nconst LandingPageView = () => {\n const classes = useStyles();\n const { t } = useTranslation();\n const navigate = useNavigate();\n const language = useContext(ActiveLanguageContext);\n const workspaceKey = useContext(WorkspaceKeyContext);\n const workspace = useSelector(workspaceSelector(workspaceKey));\n\n // TODO: Merge with WorkspaceTile\n const TileButton2 = ({icon, children, href}) => (\n \n \n
\n - \n {availableLanguages.map((lang) => (\n
\n {children}\n
\n \n )\n\n const TileButton = ({startIcon, children, href}) => (\n \n
\n {/*\n {workspace.address && (\n \n \n {t(\"Address\", {lng: language})}{\": \"}\n \n \n {workspace.address}\n \n \n )}\n \n {t(\"privacyPolicy\", {lng: language})}\n \n
\n */}\n {/* }>*/}\n {/* {t(\"bySubmitForm\")}*/}\n {/* */}\n {/* }>*/}\n {/* {t(\"byPhone\")}*/}\n {/* */}\n {/* }>*/}\n {/* {t(\"byEmail\")}*/}\n {/* */}\n {/*
*/}\n \n );\n};\n\nexport default LandingPageView;","import React, {useContext, useEffect, useState} from 'react';\nimport {\n alpha, AppBar,\n Avatar,\n Box, Button, ButtonBase, CircularProgress,\n Container, Divider, Drawer,\n Grid, Link,\n makeStyles, Typography,\n useTheme\n} from '@material-ui/core';\nimport {useNavigate, useParams} from \"react-router-dom\";\nimport {ReactReduxContext, useDispatch, useSelector} from \"react-redux\";\nimport {WorkspaceKeyContext} from \"../../contexts/WorkspaceKeyContext\";\nimport {workspaceSelector} from \"../../state/workspaces/selectors\";\nimport {ActiveLanguageContext} from \"../../contexts/ActiveLanguageContext\";\nimport Page from \"../../components/Page/Page\";\nimport {useTranslation} from \"react-i18next\";\nimport DesktopWindowsOutlinedIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneOutlinedIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';\nimport DesktopWindowsIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailIcon from '@material-ui/icons/EmailOutlined';\nimport {\n BUTTON_BORDER_RADIUS,\n CardShadow,\n CardShadow2,\n PhoneNumbers,\n WHISPERO_PRIVACY_POLICY_URL\n} from \"../../constants\";\nimport {formatPhoneNumber, formatWorkspaceId} from \"../../utils/textFormatter\";\nimport {toId} from \"../../utils/apiUtils\";\nimport clsx from \"clsx\";\nimport UnderlinedLink from \"../../components/UnderlinedLink\";\n\nconst useStyles = makeStyles((theme) => ({\n phoneSubmitViewRoot: {\n },\n body: {\n maxWidth: theme.spacing(63),\n height: '100%',\n margin: \"auto\",\n flexGrow: \"1\",\n display: \"flex\",\n flexDirection: \"column\",\n //alignItems: \"center\",\n justifyContent: \"center\",\n padding: [theme.spacing(2), 0],\n },\n topMargin: {\n marginTop: theme.spacing(4)\n },\n button: {\n borderRadius: BUTTON_BORDER_RADIUS,\n marginBottom: theme.spacing(2),\n '&:hover': {\n color: theme.palette.primary.contrastText\n }\n },\n legal: {\n color: theme.palette.text.hint\n }\n}));\n\nconst PhoneSubmitView = () => {\n const classes = useStyles();\n const { t } = useTranslation();\n const language = useContext(ActiveLanguageContext);\n const workspaceKey = useContext(WorkspaceKeyContext);\n const workspace = useSelector(workspaceSelector(workspaceKey));\n const phoneNumber = formatPhoneNumber(workspace.phone ?? PhoneNumbers.cs)\n\n return (\n \n \n {t(\"submitReportByPhoneHeader\", {lng: language})}\n \n \n {t(\"submitReportByPhoneText\", {lng: language, phone: phoneNumber})}\n \n \n {`${t(\"companyId\", {lng: language})}: `}\n \n {formatWorkspaceId(toId(workspaceKey))}\n \n \n \n {t(\"makeCall\", {lng: language})}\n \n \n {`${t(\"bySubmittingReportYouAgreeWith\", {lng: language})} `}\n \n {t(\"withPrivacyPolicy\", {lng: language})}\n \n \n
\n \n );\n};\n\nexport default PhoneSubmitView;","import React, {useContext, useEffect, useState} from 'react';\nimport {\n alpha, AppBar,\n Avatar,\n Box, Button, ButtonBase, CircularProgress,\n Container, Divider, Drawer,\n Grid, Link,\n makeStyles, Typography,\n useTheme\n} from '@material-ui/core';\nimport {useNavigate, useParams} from \"react-router-dom\";\nimport {ReactReduxContext, useDispatch, useSelector} from \"react-redux\";\nimport {WorkspaceKeyContext} from \"../../contexts/WorkspaceKeyContext\";\nimport {workspaceSelector} from \"../../state/workspaces/selectors\";\nimport {ActiveLanguageContext} from \"../../contexts/ActiveLanguageContext\";\nimport Page from \"../../components/Page/Page\";\nimport {useTranslation} from \"react-i18next\";\nimport DesktopWindowsOutlinedIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneOutlinedIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';\nimport DesktopWindowsIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailIcon from '@material-ui/icons/EmailOutlined';\nimport {\n BUTTON_BORDER_RADIUS,\n CardShadow,\n CardShadow2,\n PhoneNumbers,\n WHISPERO_PRIVACY_POLICY_URL\n} from \"../../constants\";\nimport {formatPhoneNumber, formatWorkspaceId} from \"../../utils/textFormatter\";\nimport {toId} from \"../../utils/apiUtils\";\nimport clsx from \"clsx\";\nimport UnderlinedLink from \"../../components/UnderlinedLink\";\n\nconst useStyles = makeStyles((theme) => ({\n body: {\n maxWidth: theme.spacing(63),\n height: '100%',\n margin: \"auto\",\n flexGrow: \"1\",\n display: \"flex\",\n flexDirection: \"column\",\n //alignItems: \"center\",\n justifyContent: \"center\",\n padding: [theme.spacing(2), 0],\n },\n button: {\n marginTop: theme.spacing(4),\n borderRadius: BUTTON_BORDER_RADIUS,\n marginBottom: theme.spacing(2),\n '&:hover': {\n color: theme.palette.primary.contrastText\n }\n },\n legal: {\n color: theme.palette.text.hint\n }\n}));\n\nconst EmailSubmitView = () => {\n const classes = useStyles();\n const { t } = useTranslation();\n const language = useContext(ActiveLanguageContext);\n const workspaceKey = useContext(WorkspaceKeyContext);\n const workspace = useSelector(workspaceSelector(workspaceKey));\n const email = workspace.email ?? `${toId(workspaceKey)}@whispero.eu`;\n\n return (\n \n \n {t(\"submitReportByEmailHeader\", {lng: language})}\n \n \n {t(\"submitReportByEmailText\", {lng: language, email: email})}\n \n \n {t(\"sendEmail\", {lng: language})}\n \n {/*TODO: Link in german is not at the last place*/}\n \n {`${t(\"bySubmittingReportYouAgreeWith\", {lng: language})} `}\n \n {t(\"withPrivacyPolicy\", {lng: language})}\n \n \n
\n \n );\n};\n\nexport default EmailSubmitView;","import React, {useContext, useEffect, useState} from 'react';\nimport {\n alpha, AppBar,\n Avatar,\n Box, Button, ButtonBase, CircularProgress,\n Container, Divider, Drawer,\n Grid, Link,\n makeStyles, Typography,\n useTheme\n} from '@material-ui/core';\nimport {useNavigate, useParams} from \"react-router-dom\";\nimport {ReactReduxContext, useDispatch, useSelector} from \"react-redux\";\nimport {WorkspaceKeyContext} from \"../../contexts/WorkspaceKeyContext\";\nimport {workspaceSelector} from \"../../state/workspaces/selectors\";\nimport {ActiveLanguageContext} from \"../../contexts/ActiveLanguageContext\";\nimport Page from \"../../components/Page/Page\";\nimport {useTranslation} from \"react-i18next\";\nimport DesktopWindowsOutlinedIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneOutlinedIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';\nimport DesktopWindowsIcon from '@material-ui/icons/DesktopWindowsOutlined';\nimport PhoneIcon from '@material-ui/icons/PhoneOutlined';\nimport EmailIcon from '@material-ui/icons/EmailOutlined';\nimport {\n BUTTON_BORDER_RADIUS,\n CardShadow,\n CardShadow2,\n PhoneNumbers,\n WHISPERO_PRIVACY_POLICY_URL\n} from \"../../constants\";\nimport {formatPhoneNumber, formatWorkspaceId} from \"../../utils/textFormatter\";\nimport {toId} from \"../../utils/apiUtils\";\nimport clsx from \"clsx\";\nimport UnderlinedLink from \"../../components/UnderlinedLink\";\nimport DisclaimerDialog from \"../../components/reportDialogs/DisclaimerDialog\";\nimport SubmitDialog from \"../../components/reportDialogs/SubmitDialog\";\nimport ConfirmationDialog from \"../../components/reportDialogs/ConfirmationDialog\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {newAttachmentsSection, newTextSection} from \"../../utils/formBlockUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n formSubmitViewRoot: {\n },\n body: {\n height: '100%',\n overflow: \"auto\",\n margin: \"auto\",\n flexGrow: \"1\",\n display: \"flex\",\n flexDirection: \"column\",\n //alignItems: \"center\",\n justifyContent: \"center\",\n padding: [theme.spacing(2), 0],\n },\n button: {\n marginTop: theme.spacing(4),\n borderRadius: BUTTON_BORDER_RADIUS,\n marginBottom: theme.spacing(2),\n '&:hover': {\n color: theme.palette.primary.contrastText\n }\n },\n legal: {\n color: theme.palette.text.hint\n },\n dialog: {\n ...CardShadow2,\n borderRadius: 16,\n border: `1px solid ${theme.palette.grey[50]}`\n }\n}));\n\n// TODO: Delete\nconst FormSubmitView = () => {\n const classes = useStyles();\n const api = useContext(ApiContext);\n const language = useContext(ActiveLanguageContext);\n const workspaceKey = useContext(WorkspaceKeyContext);\n const workspace = useSelector(workspaceSelector(workspaceKey));\n const submitData = workspace?.submitLayout ?? {};\n const [accessId, setAccessId] = useState();\n\n const handleOnSubmit = async ({text, formData, attachments}) => {\n const content = [];\n if (Boolean(text)) {\n content.push(newTextSection(\"\", text));\n }\n if (Boolean(attachments) && attachments.length > 0) {\n content.push(newAttachmentsSection(\"\", text));\n }\n const report = await api.mutation.createReport(workspace.pk, content, \"cs\");\n setAccessId(report.accessId);\n }\n\n const renderDialogs = () => {\n if (!accessId) {\n return (\n \n {renderDialogs()}\n
\n \n );\n};\n\nexport default FormSubmitView;","import React, {useContext, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Box,\n Typography,\n makeStyles,Button, Paper\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n backgroundColor: theme.palette.background.default\n },\n image: {\n width: \"25%\",\n maxWidth: theme.spacing(40)\n }\n}));\n\nconst ChatPlaceholder = ({className}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n\n return (\n ![\"Empty](\"/static/images/no_reports.jpg\"/)
\n \n {form && (\n \n )}\n {report?.approval && (\n \n )}\n
\n )\n};\n\nReportTags.propTypes = {\n className: PropTypes.string,\n report: PropTypes.object.isRequired,\n onTagClick: PropTypes.func,\n onTagDelete: PropTypes.func,\n}\n\nReportTags.defaultProps = {\n onTagClick: () => {},\n onTagDelete: () => {},\n};\n\nexport default ReportTags;","import ReportTags from \"./ReportTags\";\n\nexport default ReportTags;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles, Typography,\n useTheme\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\nimport clsx from \"clsx\";\n\nconst useStyles = makeStyles((theme) => ({\n unreadIndicator: {\n width: theme.spacing(1),\n height: theme.spacing(1),\n color: theme.palette.primary.main,\n }\n}));\n\nconst UnreadIndicator = ({}) => {\n const classes = useStyles();\n\n return (\n \n )\n};\n\nUnreadIndicator.propTypes = {\n className: PropTypes.string\n}\n\nUnreadIndicator.defaultProps = {\n};\n\n\nexport default UnreadIndicator;","import UnreadIndicator from \"./UnreadIndicator\";\n\nexport default UnreadIndicator;","import React, {useContext, useEffect, useMemo, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Typography,\n makeStyles,\n ListItem, useTheme, Avatar,\n} from '@material-ui/core';\nimport {getReportName} from \"../../utils/textUtils\";\nimport {formatReportExcerpt, getReportExcerpt, hasUnreadMessages, isClosed, isOpen} from \"../../utils/reportUtils\";\nimport {useTranslation} from \"react-i18next\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {currentUserSelector} from \"../../state/currentUser/selectors\";\nimport {activeMembersSelector, currentUserRoleSelector} from \"../../state/members/selectors\";\nimport ReportStatus from \"../../components/ReportStatus/ReportStatus\";\nimport StatusIndicator from \"../../components/ReportStatus/StatusIndicator\";\nimport ApprovalTag from \"../../components/ReportTags/ApprovalTag\";\nimport {isApprover} from \"../../utils/user\";\nimport Tag from \"../../components/Tag\";\nimport {isFormKey} from \"../../utils/apiUtils\";\nimport ReportTags from \"../../components/ReportTags\";\nimport UnreadIndicator from \"../../components/UnreadIndicator\";\n\nconst useStyles = makeStyles((theme) => ({\n cardRoot: {\n transition: `opacity 75ms ease-in-out`,\n position: \"relative\",\n backgroundColor: theme.palette.background.paper,\n // border: `1px solid ${theme.palette.divider}`,\n // borderRadius: \"4px\",\n // marginBottom: theme.spacing(1),\n // marginLeft: theme.spacing(1),\n // marginRight: theme.spacing(1),\n // ...CardShadow\n },\n listItem: {\n alignItems: \"flex-start\",\n padding: [theme.spacing(2), theme.spacing(4), theme.spacing(2), theme.spacing(4)]\n },\n selected: {\n background: theme.palette.background.paper\n },\n leftGutter: {\n flex: \"0 0 auto\",\n //paddingTop: theme.spacing(0.25),\n width: theme.spacing(4),\n position: \"relative\",\n '& > *': {\n margin: 0,\n position: \"absolute\",\n left: \"50%\",\n transform: \"translate(-50%, 0)\"\n }\n },\n cardContent: {\n flex: \"1 1 auto\",\n minWidth: 0\n },\n title: {\n //paddingRight: theme.spacing(5)\n flex: \"1 1 auto\",\n fontWeight: theme.typography.fontWeightMedium,\n },\n progress: {\n maxWidth: \"66%\",\n //marginBottom: \"0.5em\"\n },\n progressBar: {\n height: \"4px\"\n },\n message: {\n flex: \"1 1 auto\",\n overflow: \"hidden\",\n minWidth: 0,\n },\n timestamp: {\n //color: theme.palette.text.hint,\n flex: \"0 0 auto\"\n },\n cardSection: {\n display: \"flex\",\n alignItems: \"center\",\n '&>*:not(:last-child) ': {\n marginRight: \"0.75em\"\n }\n },\n denseMargin: {\n marginTop: theme.spacing(0.5),\n },\n footer: {\n marginTop: theme.spacing(1),\n },\n progressLabel: {\n color: theme.palette.text.hint,\n lineHeight: \"135%\"\n }\n}));\n\nconst filterTags = (workspace, report) => {\n if (workspace.tags && report.tags) {\n return report.tags.flatMap(id => {\n const tag = workspace.tags.find(w => w.id === id);\n return tag ? tag : [];\n });\n }\n\n return [];\n};\n\nconst ReportCard = ({report, selected, onClick, onDelete, ...rest}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const members = useSelector(activeMembersSelector(report.workspace));\n const currentUser = useSelector(currentUserSelector());\n const currentUserRole = useSelector(currentUserRoleSelector(report.workspace));\n const [unread, setUnread] = useState();\n // TODO: Delete\n const collaborators = useMemo(() => (\n report.assigned?.map(userKey => members.find(member => member.pk === userKey)).filter(user => Boolean(user))\n ), [JSON.stringify(report.assigned ?? [])]);\n\n useEffect(() => {\n if (selected) {\n setUnread(false);\n }\n }, [selected])\n\n useEffect(() => {\n if (!selected) {\n setUnread(hasUnreadMessages(report, currentUser));\n }\n }, [report.excerptUpdatedAt])\n\n const handleOnClick = (event) => {\n onClick();\n }\n\n return (\n \n \n
\n );\n}\n\nReportCard.propTypes = {\n report: PropTypes.object.isRequired\n}\n\nexport default ReportCard;","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Box,\n Typography,\n Toolbar,\n makeStyles,\n lighten,\n Select,\n MenuItem,\n Button, FormControl, AppBar\n} from '@material-ui/core';\nimport CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';\nimport {useTranslation} from \"react-i18next\";\nimport {useParams} from \"react-router-dom\";\nimport {toWorkspaceKey} from \"../../utils/apiUtils\";\nimport {useSelector} from \"react-redux\";\nimport {currentUserRoleSelector} from \"../../state/members/selectors\";\nimport {isApprover} from \"../../utils/user\";\n\nconst useStyles = makeStyles((theme) => ({\n reportListToolbar: {\n flex: \"0 0 auto\",\n minHeight: 0,\n padding: [theme.spacing(3.75), theme.spacing(4)]\n },\n stateSelect: {\n flex: \"1 1 auto\",\n // marginRight: theme.spacing(6),\n backgroundColor: theme.palette.grey[50],\n width: \"100%\"\n },\n select : {\n //padding: [theme.spacing(1.5), theme.spacing(1)],\n '&:focus': {\n backgroundColor: \"inherit\",\n },\n // TODO: Replace padding with sane values\n paddingTop: \"14.5px\",\n paddingBottom: \"14.5px\"\n },\n selectIcon: {\n color: theme.palette.text.secondary,\n width: theme.spacing(2.5),\n height: theme.spacing(2.5)\n },\n selectText : {\n color: theme.palette.text.secondary,\n marginLeft: theme.spacing(1)\n },\n right: {\n color: theme.palette.text.secondary,\n whiteSpace: 'nowrap',\n textTransform: \"none\",\n ...theme.typography.body2\n },\n}));\n\nconst ListToolbar = ({className, state, currentUserRole, onStatusSelected}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n\n const statusLabels = isApprover(currentUserRole) ? {\n all: t(\"allReports\"),\n pending: t(\"approvalPending\"),\n approved: t(\"approvalAccepted\"),\n rejected: t(\"approvalRejected\"),\n } : {\n all: t(\"allReports\"),\n open: t(\"openReports\"),\n solved: t(\"solvedReports\"),\n junk: t(\"junkReports\"),\n }\n\n return (\n \n \n
\n \n \n \n {getReportName(report, t)}\n \n { !isApprover(currentUserRole) && isOpen(report) && unread && (\n
\n {!isApprover(currentUserRole) && (\n \n \n {formatReportExcerpt(report.excerpt, t)}\n \n \n {t(\"{timeAgo}\", {value: new Date(report.excerptUpdatedAt)})}\n \n
\n )}\n \n \n {/**/}\n {/* {collaborators.map(user => (*/}\n {/* */}\n {/*{ filterTags(workspace, report).map(tag => (*/}\n {/* {}}/>*/}\n {/*))}*/}\n
\n \n
\n);\n\n// TODO: Move reports to parent component\nconst ReportList = ({ className, reports, selectedKey, onReportSelected }) => {\n const classes = useStyles();\n const { workspaceId } = useParams();\n const workspaceKey = toWorkspaceKey(workspaceId);\n const currentUserRole = useSelector(currentUserRoleSelector(workspaceKey));\n const [statusFilter, setStatusFilter] = useState(\"all\");\n const filteredReports = (reports ?? []).filter((report) => filterByStatus(report, statusFilter)).sort(getSortingFunction(currentUserRole));\n\n const handleListItemClick = (reportKey) => {\n onReportSelected(reportKey);\n };\n\n return !reports ? (\n skeleton\n ) : (\n \n
\n );\n};\n\nReportList.propTypes = {\n className: PropTypes.string,\n reports: PropTypes.arrayOf(\n PropTypes.shape({\n pk: PropTypes.string,\n excerptUpdatedAt: PropTypes.string,\n })\n ).isRequired,\n selectedKey: PropTypes.string,\n statusFilter: PropTypes.oneOf([\"all\", \"open\", \"solved\", \"junk\"]),\n onReportSelected: PropTypes.func,\n};\n\nReportList.defaultProps = {\n statusFilter: \"all\",\n onSave: () => {},\n};\n\nexport default ReportList;\n","import React, {useContext, useEffect, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles,\n TextField, Typography,\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\nimport RichTextEditor2 from \"../RichTextEditor2/RichTextEditor2\";\nimport {ToolbarFiller} from \"../RichTextEditor2/ToolbarFiller\";\nimport {deserializeEditorState, emptyEditorState, serializeEditorState} from \"../RichTextEditor2/editorState\";\nimport {useParams} from \"react-router\";\nimport {toWorkspaceKey} from \"../../utils/apiUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n settingsField: {\n //display: \"flex\"\n },\n label: {\n //flex: \"0 0 auto\",\n //marginBottom: theme.spacing(0.5)\n },\n field: {\n //display: \"block\",\n marginTop: theme.spacing(0.5),\n '& fieldset': {\n borderRadius: \"6px\"\n }\n },\n editorToolbarVisible: {\n transition: theme.transitions.create('opacity', {\n duration: theme.transitions.duration.shortest,\n easing: theme.transitions.easing.easeInOut,\n }),\n },\n editorToolbarHidden: {\n opacity: 0,\n }\n}));\n\n// TODO: Delete\n// TODO: Stringify value in mutationApi class\nconst SettingsField = ({className, value, label, placeholder, canBeEmpty, richMode, readOnly, TextFieldProps, LabelProps, onChange, onSave}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {workspaceId} = useParams();\n const workspaceKey = toWorkspaceKey(workspaceId);\n const [pendingText, setPendingText] = useState(\"\");\n const [pendingEditorState, setPendingEditorState] = useState(() => emptyEditorState());\n const [focused, setFocused] = useState();\n\n useEffect(() => {\n if (richMode) {\n setPendingEditorState(deserializeEditorState(value));\n } else {\n setPendingText(value ?? \"\");\n }\n }, [value]);\n\n const handleRichEditorChange = (editorState) => {\n setPendingEditorState(editorState);\n if (onChange) {\n onChange(serializeEditorState(editorState));\n }\n }\n\n const handleTextFieldChange = (event) => {\n const value = event.target.value;\n setPendingText(value);\n if (onChange && (canBeEmpty || value !== \"\")) {\n onChange(value);\n }\n }\n\n const handleRichEditorBlur = () => {\n setFocused(false);\n onSave(serializeEditorState(pendingEditorState));\n }\n\n const handleTextFieldBlur = () => {\n onSave(pendingText);\n }\n\n return (\n - \n {filteredReports &&\n filteredReports.map((report) => (\n
\n \n {label}\n \n {richMode ? (\n setFocused(true)}\n onBlur={handleRichEditorBlur}\n />\n ) : (\n readOnly ? (\n \n {value}\n \n ) : (\n
\n );\n}\n\nSettingsField.propTypes = {\n value: PropTypes.any,\n label: PropTypes.string,\n className: PropTypes.string,\n canBeEmpty: PropTypes.bool,\n TextFieldProps: PropTypes.object,\n LabelProps: PropTypes.object,\n richMode: PropTypes.bool,\n onChange: PropTypes.func,\n onSave: PropTypes.func\n}\n\nSettingsField.defaultProps = {\n value: \"\",\n LabelProps: {},\n canBeEmpty: true,\n TextFieldProps: {},\n onSave: () => {}\n};\n\nexport default SettingsField;","import SettingsField from \"./SettingsField\";\n\nexport default SettingsField;","import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Avatar,\n Box,\n Card,\n CardContent,\n Grid,\n Typography,\n colors,\n makeStyles,\n CssBaseline,\n Table,\n TableHead,\n TableRow,\n TableCell,\n Checkbox,\n TableBody,\n TablePagination,\n List,\n ListItem,\n ListItemAvatar,\n useTheme,\n ListItemText,\n Divider,\n ListItemSecondaryAction,\n ListItemIcon,\n ButtonBase,\n Tooltip,\n Toolbar,\n TextField, Container, Fab, Button, MenuItem, Link, Popover, Chip\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\nimport {useSelector} from \"react-redux\";\nimport DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';\nimport AvatarMenuItem from \"./AvatarMenuItem\";\nimport {activeMembersSelector} from \"../state/members/selectors\";\nimport RichTextEditor2 from \"./RichTextEditor2/RichTextEditor2\";\nimport {emptyEditorState, serializeEditorState} from \"./RichTextEditor2/editorState\";\nimport {useParams} from \"react-router\";\nimport {toWorkspaceKey} from \"../utils/apiUtils\";\nimport AlternateEmailIcon from \"@material-ui/icons/AlternateEmail\";\nimport {getAtMentionStrategy} from \"./RichTextEditor2/autocompleteUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n chatInputBox: {\n // display: \"flex\",\n // flexDirection: \"row\",\n //alignItems: \"flex-start\",\n borderRadius: 6,\n // border: `1px solid ${theme.palette.border.default}`,\n padding: [0, theme.spacing(1), theme.spacing(1), theme.spacing(1)]\n // '&:hover': {\n // borderColor: theme.palette.border.hover\n // }\n },\n submitButton: {\n flex: \"0 0 auto\",\n // marginBottom: 0\n },\n messageContainer: {\n // flex: \"1 1 auto\",\n // minWidth: 0,\n // marginTop: props => props.layout === \"row\" ? theme.spacing(1) : 0,\n // marginRight: props => props.layout === \"row\" ? theme.spacing(1.5) : 0,\n // marginLeft: props => props.layout === \"row\" ? theme.spacing(1.5) : 0,\n //marginBottom: theme.spacing(1)\n //margin: [theme.spacing(1), theme.spacing(1.5)]\n },\n textField: {\n padding: \"18.5px 14px\",\n //padding: [theme.spacing(2), theme.spacing(1.75), theme.spacing(0), theme.spacing(1.75)],\n \"&>div\": {\n padding: 0\n }\n },\n attachmentsContainer: {\n marginBottom: theme.spacing(1),\n marginLeft: theme.spacing(1.0)\n },\n standardSubmit: {\n // marginTop: theme.spacing(0.75),\n // marginRight: theme.spacing(0.75),\n },\n toolbar: {\n //marginTop: theme.spacing(2),\n display: \"flex\",\n alignItems: \"center\",\n //paddingLeft: theme.spacing(0.75)\n },\n toolbarLeft: {\n flex: \"0 0 auto\",\n '&>*:not(:last-child) ': {\n //marginRight: theme.spacing(0.25),\n }\n },\n toolbarMiddle: {\n flex: \"1 1 auto\",\n marginRight: theme.spacing(1)\n },\n toolbarButton: {\n padding: theme.spacing(0.5),\n },\n toolbarDivider: {\n height: theme.spacing(2.5),\n marginLeft: theme.spacing(0.5),\n marginRight: theme.spacing(1),\n },\n notificationHint: {\n color: theme.palette.text.hint,\n // whiteSpace: \"nowrap\",\n // textOverflow: \"ellipsis\",\n // overflow: \"hidden\"\n }\n}));\n\nconst userMentionPattern = new RegExp(/\\\"type\\\":\\\"MENTION\\\",\\\"mutability\\\":\\\"IMMUTABLE\\\",\\\"data\\\":{\\\"url\\\":\\\"#\\\",\\\"key\\\":\\\"(user#.{36})/g);\n\nconst RichChatInputBox = ({className, placeholder, onSubmit}) => {\n const classes = useStyles();\n const {t} = useTranslation();\n const {workspaceId} = useParams();\n const workspaceKey = toWorkspaceKey(workspaceId);\n const [editorState, setEditorState] = useState(() => emptyEditorState());\n const [attachments, setAttachments] = useState([]);\n const activeMembers = useSelector(activeMembersSelector(workspaceKey));\n const autocompleteStrategies = useMemo(() => (\n [getAtMentionStrategy(activeMembers, t)]\n ), [activeMembers]);\n\n const handleSave = () => {\n const attachmentKeys = attachments.filter(a => Boolean(a.key)).map(a => a.key);\n const content = serializeEditorState(editorState);\n let mentionedUsers = [];\n for (const entityId of Object.keys(content.entityMap)) {\n const entity = content.entityMap[entityId];\n if (entity.type === \"MENTION\") {\n if (entity.data.key && entity.data.key.startsWith(\"user#\")) {\n mentionedUsers.push(entity.data.key);\n }\n }\n }\n onSubmit({content: content, attachments: attachmentKeys, mentionedUsers: mentionedUsers});\n setEditorState(emptyEditorState());\n setAttachments([]);\n }\n\n return (\n \n \n {t(\"send\")}\n \n )\n },\n {\n name: \"mention\",\n type: \"callback\",\n icon:
\n );\n}\n\nRichChatInputBox.propTypes = {\n className: PropTypes.string,\n placeholder: PropTypes.string,\n onSubmit: PropTypes.func\n}\n\nRichChatInputBox.defaultProps = {\n onSubmit: () => {}\n};\n\nexport default RichChatInputBox;","import React, {useContext, useEffect, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Button,\n makeStyles,\n TextField, Typography,\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\nimport RichTextEditor2 from \"../RichTextEditor2/RichTextEditor2\";\nimport {ToolbarFiller} from \"../RichTextEditor2/ToolbarFiller\";\nimport {deserializeEditorState, emptyEditorState, serializeEditorState} from \"../RichTextEditor2/editorState\";\nimport {useParams} from \"react-router\";\nimport {toWorkspaceKey} from \"../../utils/apiUtils\";\nimport AddIcon from \"@material-ui/icons/Add\";\n\nconst useStyles = makeStyles((theme) => ({\n headerWithAction: {\n display: \"flex\",\n alignItems: \"center\",\n },\n headerAction: {\n marginLeft: \"auto\"\n }\n}));\n\nconst SettingsControl = ({className, labelKey, action, children}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n\n return (\n \n
\n );\n}\n\nSettingsControl.propTypes = {\n className: PropTypes.string,\n labelKey: PropTypes.string.isRequired,\n action: PropTypes.object\n}\n\nSettingsControl.defaultProps = {\n};\n\nexport default SettingsControl;","import SettingsControl from \"./SettingsControl\";\n\nexport default SettingsControl;","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\nimport { currentUserSelector } from \"../../state/currentUser/selectors\";\nimport { useSelector } from \"react-redux\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport {\n MuiPickersUtilsProvider,\n DatePicker\n} from '@material-ui/pickers';\nimport { Button, makeStyles, Typography } from \"@material-ui/core\";\nimport moment from \"moment\";\nimport MomentUtils from \"@date-io/moment\";\nimport ScheduleOutlinedIcon from \"@material-ui/icons/ScheduleOutlined\";\nimport TodayIcon from '@material-ui/icons/Today';\nimport ClearIcon from '@material-ui/icons/Clear';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: 'flex'\n },\n button: {\n color: theme.palette.text.primary,\n textTransform: \"none\",\n flexDirection: 'column'\n },\n icon: {\n color: theme.palette.text.secondary,\n borderRadius: \"50%\",\n borderThickness: \"1px\",\n borderColor: theme.palette.grey[400],\n borderStyle: \"dashed\",\n padding: theme.spacing(0.5),\n width: theme.spacing(4),\n height: theme.spacing(4),\n },\n clearButton: {\n color: theme.palette.text.secondary,\n }\n}));\n\n// TODO: Use dynamic import emailTemplate\nconst DueDatePicker = ({ value, disabled, onChange, ...rest }) => {\n const classes = useStyles();\n const { t, i18n } = useTranslation();\n\n const handleDateChange = (newValue) => {\n onChange(newValue);\n };\n\n return (\n \n \n {t(labelKey)}\n \n {action && (\n
\n {children}\n \n {action}\n
\n )}\n \n \n \n {value && !disabled && (\n onChange(null)}>\n \n )}\n
\n );\n};\n\nDueDatePicker.propTypes = {\n value: PropTypes.instanceOf(Date),\n onChange: PropTypes.func.isRequired,\n};\n\nDueDatePicker.defaultProps = {\n value: null,\n onChange: () => {},\n};\n\nexport default DueDatePicker;\n","import React, {useContext, useEffect, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n Avatar,\n Box,\n Card,\n CardContent,\n Grid,\n Typography,\n colors,\n makeStyles,\n CssBaseline,\n Table,\n TableHead,\n TableRow,\n TableCell,\n Checkbox,\n TableBody,\n TablePagination,\n List,\n ListItem,\n ListItemAvatar,\n useTheme,\n ListItemText,\n Divider,\n ListItemSecondaryAction,\n ListItemIcon,\n ButtonBase,\n Paper,\n TextField,\n ClickAwayListener, InputAdornment, FormControl, InputLabel, Input, Link, Button\n} from '@material-ui/core';\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport UserPicker from \"../../components/UserPicker\";\nimport SettingsField from \"../../components/SettingsField\";\nimport {currentUserSelector} from \"../../state/currentUser/selectors\";\nimport ChatMessage from \"../../components/chat/ChatMessage\";\nimport {commentsSelector} from \"../../state/comments/selectors\";\nimport {useTranslation} from \"react-i18next\";\nimport {currentUserRoleSelector, allMembersSelector, activeMembersSelector} from \"../../state/members/selectors\";\nimport {ChatInputBox} from \"../../components/chat\";\nimport ChatMessageSkeleton from \"../../components/chat/ChatMessageSkeleton\";\nimport {scrollToView} from \"../../utils/ui\";\nimport {getMessageSender} from \"../../utils/redux\";\nimport {getReportName} from \"../../utils/textUtils\";\nimport {addOrUpdateReport} from \"../../state/reports/actions\";\nimport TitleIcon from \"@material-ui/icons/Title\";\nimport RichTextEditor2 from \"../../components/RichTextEditor2/RichTextEditor2\";\nimport RichChatInputBox from \"../../components/RichChatInputBox\";\nimport SettingsControl from \"../../components/SettingsControl\";\nimport DueDatePicker from \"../../components/DueDatePicker\";\nimport { isOpen } from \"../../utils/reportUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n content: {\n flex: \"1 1 auto\",\n display: \"flex\",\n flexDirection: \"column\",\n overflow: \"auto\",\n padding: [0, theme.spacing(4), theme.spacing(3), theme.spacing(4)],\n '&>*:not(:first-child):not(:last-child)': {\n marginTop: theme.spacing(3)\n }\n },\n inputContainer: {\n flex: \"0 0 auto\",\n //padding: theme.spacing(1),\n margin: [0, theme.spacing(3), theme.spacing(3), theme.spacing(3)],\n backgroundColor: theme.palette.background.paper\n },\n userPickerContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginTop: theme.spacing(3.25),\n marginBottom: theme.spacing(3.25)\n },\n userPicker: {\n display: \"inline-block\",\n },\n userPickerLabel: {\n flex: \"0 0 auto\",\n width: theme.spacing(13)\n },\n comments: {\n flex: \"1 1 auto\",\n marginTop: theme.spacing(5),\n '&>div:not(:last-child) ': {\n marginBottom: theme.spacing(3)\n }\n },\n fieldMargin: {\n marginBottom: theme.spacing(0)\n },\n commentContainer: {\n maxWidth: \"100%\"\n },\n comment: {\n maxWidth: \"100%\",\n padding: 0,\n border: 'initial',\n backgroundColor: 'initial',\n color: theme.palette.text.secondary\n },\n assigneeLabel: {\n //display: \"inline-block\",\n //marginRight: theme.spacing(1.5)\n marginBottom: theme.spacing(0.5)\n },\n}));\n\nlet reportKey = null;\n\n// TODO: Don't use readOnly, split components\n// TODO: Reduce number of flexboxes\nconst ReportAttributesPanel = ({className, report, readOnly}) => {\n const classes = useStyles();\n const api = useContext(ApiContext);\n const { t } = useTranslation();\n const currentUser = useSelector(currentUserSelector());\n const currentUserRole = useSelector(currentUserRoleSelector(report.workspace));\n // TODO: Users should not be undefined\n // TODO: Don't call user selector twice\n const allMembers = useSelector(allMembersSelector(report.workspace));\n const comments = useSelector(commentsSelector(report.pk)) ?? null;\n const startRef = useRef(null);\n const endRef = useRef(null);\n const dispatch = useDispatch();\n const nameChanged = useRef(false);\n\n useEffect(() => {\n // Scroll to bottom only if a new comment is added. If the report argument has changed the scroll\n // will be reset to top.\n if (!comments) {\n return;\n }\n if (reportKey !== report.pk) {\n scrollToView(startRef);\n reportKey = report.pk;\n return;\n }\n scrollToView(endRef);\n }, [report.pk, comments?.length]);\n\n const onNameChange = (value) => {\n nameChanged.current = true;\n // TODO: Propagate change to other components as well\n //dispatch(addOrUpdateReport(report.workspace, report.pk,{name: value}));\n }\n\n const handleNameApplied = async (value) => {\n console.log(\"handleNameApplied, value: %o, nameChanged.current: %o\", value, nameChanged.current);\n if (nameChanged.current) {\n dispatch(addOrUpdateReport(report.workspace, report.pk,{name: value}));\n nameChanged.current = false;\n await api.mutation.updateResource(report.pk, report.sk, {name: value});\n }\n }\n\n const handleDescriptionApplied = async (value) => {\n if (value !== report.description) {\n //dispatch(updateReport(report.workspace, report.pk,{description: value}));\n await api.mutation.updateReportDescription(report.pk, report.sk, value);\n }\n }\n\n const handleSolutionApplied = async (value) => {\n if (value !== report.solution) {\n //dispatch(updateReport(report.workspace, report.pk,{solution: value}));\n await api.mutation.updateReportSolution(report.pk, report.sk, value);\n }\n }\n\n const handleCommentSubmit = async ({content, attachments, mentionedUsers}) => {\n await api.mutation.createComment(report.workspace, report.pk, currentUser.pk, content, attachments);\n if (!mentionedUsers) {\n return;\n }\n const newFollowers = [...new Set([...(report.followers ?? []), ...mentionedUsers])];\n await api.mutation.updateResource(report.pk, report.sk, {followers: newFollowers});\n //dispatch(addComment(comment));\n };\n\n const handleAssigneeAdded = async (userId) => {\n //dispatch(updateReport(report.workspace, report.pk,{assigned: assignedNew}));\n await api.mutation.addReportAssignee(report, userId, currentUser.pk);\n }\n\n const handleAssigneeRemoved = async (userId) => {\n //dispatch(updateReport(report.workspace, report.pk,{assigned: assignedNew}));\n await api.mutation.removeReportAssignee(report, userId, currentUser.pk);\n }\n\n const handleDueDateChanged = async (date) => {\n const data = { dueDate: date?.toISOString() ?? null };\n dispatch(addOrUpdateReport(report.pk, report.sk, data));\n await api.mutation.updateResource(report.pk, report.sk, data);\n }\n\n // TODO: Don't use flexbox for fields\n return (\n \n
\n );\n}\n\nReportAttributesPanel.propTypes = {\n className: PropTypes.string,\n readOnly: PropTypes.bool,\n}\n\nexport default ReportAttributesPanel;","export const commentsSelector = (reportKey) => state => state.comments[reportKey];\n","import React, {useContext, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {currentUserSelector} from \"../../state/currentUser/selectors\";\nimport ChatMessage from \"../../components/chat/ChatMessage\";\nimport ChatSkeleton from \"../../components/chat/ChatSkeleton\";\nimport {messagesSelector} from \"../../state/messages/selectors\";\nimport {makeStyles, Typography} from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport VisibilityOffOutlinedIcon from '@material-ui/icons/VisibilityOffOutlined';\nimport {useTranslation} from \"react-i18next\";\nimport {activeMembersSelector, allMembersSelector} from \"../../state/members/selectors\";\nimport {hasUnreadMessages, isClosed, isReportClosed, isSystemMessage} from \"../../utils/reportUtils\";\nimport SystemMessage from \"../../components/chat/SystemMessage\";\nimport {Chat} from \"../../components/chat\";\nimport {useFetchMissingSenders} from \"../../hooks/useFetchMissingSenders\";\nimport ChatMessageSkeleton from \"../../components/chat/ChatMessageSkeleton\";\nimport {newAwsDateTime} from \"../../utils/time\";\nimport {loadOrUpdateCurrentUser} from \"../../state/currentUser/actions\";\nimport {toUserKey} from \"../../utils/apiUtils\";\n\nconst useStyles = makeStyles((theme) => ({\n reportViewChatRoot: {\n height: \"100%\",\n position: \"relative\"\n },\n chat: {\n height: \"100%\"\n }\n}));\n\nconst ReportChat = ({className, report}) => {\n const classes = useStyles();\n const api = useContext(ApiContext);\n const dispatch = useDispatch();\n const { t } = useTranslation();\n const messages = useSelector(messagesSelector(report.pk));\n const currentUser = useSelector(currentUserSelector());\n const reportClosed = isReportClosed(messages);\n\n useEffect(() => {\n if (!messages || messages.length === 0) {\n return;\n }\n\n if (hasUnreadMessages(report, currentUser)) {\n const lastReads = {...currentUser.lastReads};\n const lastWorkspaceReads = {...lastReads[report.workspace]};\n lastWorkspaceReads[report.pk] = newAwsDateTime();\n lastReads[report.workspace] = lastWorkspaceReads;\n dispatch(loadOrUpdateCurrentUser({lastReads: lastReads}));\n api.mutation.updateLastRead(report.workspace, report.pk)\n }\n }, [report.pk, messages?.length])\n\n const handleChatSubmit = async ({content, attachments}) => {\n // TODO: Add message to redux??\n await api.mutation.createMessage(report.workspace, report.pk, content, currentUser.pk, attachments);\n };\n\n return (\n \n \n \n \n \n \n {/*
\n */}\n {/* */}\n {/* {t(\"collaborators\")}*/}\n {/* */}\n {/*
*/}\n \n { comments && comments.map(comment => {\n const sender = getMessageSender(comment, allMembers);\n if (!sender) {\n // Sender can be a user that was deleted from the workspace. We wait until his data are\n // fetched into redux.\n return ()\n }\n return (\n
\n \n \n
\n \n {messages ? (\n
\n )\n}\n\nReportChat.propTypes = {\n className: PropTypes.string,\n report: PropTypes.shape({\n workspace: PropTypes.string.isRequired,\n pk: PropTypes.string.isRequired\n }).isRequired\n}\n\nexport default ReportChat;","import React, {useContext, useEffect, useMemo, useState} from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport {\n makeStyles,\n useTheme,\n Divider,\n Dialog,\n useMediaQuery, DialogTitle, DialogActions, DialogContent, TextField, FormControlLabel, Checkbox, Typography\n} from '@material-ui/core';\nimport {useTranslation} from \"react-i18next\";\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\nimport Button from \"@material-ui/core/Button\";\nimport {newAwsDateTime} from \"../../utils/time\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {currentUserSelector} from \"../../state/currentUser/selectors\";\nimport {\n PendingApproval,\n RejectedApproval\n} from \"../../utils/reportUtils\";\nimport {getReportName} from \"../../utils/textUtils\";\nimport SettingsField from \"../../components/SettingsField\";\nimport {activeMembersSelector} from \"../../state/members/selectors\";\nimport RichTextEditor2 from \"../../components/RichTextEditor2/RichTextEditor2\";\nimport {\n deserializeEditorState,\n emptyEditorState, isEmptyState,\n serializeEditorState\n} from \"../../components/RichTextEditor2/editorState\";\n\nconst useStyles = makeStyles((theme) => ({\n closureDialog: {\n borderRadius: \"8px\"\n },\n title: {\n padding: [theme.spacing(3), theme.spacing(4)]\n },\n content: {\n padding: [theme.spacing(0), theme.spacing(4)]\n },\n text: {\n marginBottom: theme.spacing(3)\n },\n actions: {\n padding: [theme.spacing(4), theme.spacing(4), theme.spacing(3), theme.spacing(4)],\n '&>*:not(:last-child) ': {\n marginRight: theme.spacing(1)\n }\n },\n fieldInput: {\n // height: \"14.275rem\",\n // alignItems: \"initial\",\n '& .DraftEditor-root': {\n height: \"14.275rem\"\n }\n }\n}));\n\nconst getDialogContent = (variant, report, t) => {\n const name = getReportName(report, t);\n if (variant === \"requestedApproval\") {\n return {title: t(\"requestApprovalDialogTitle\", {name}), text: t(\"requestApprovalDialogText\"), confirmButtonText: t(\"requestApproval\")};\n } else if (variant === \"rejectedApproval\") {\n return {title: t(\"rejectApprovalDialogTitle\", {name}), text: t(\"rejectApprovalDialogText\"), confirmButtonText: t(\"send\")};\n } else {\n return {title: t(\"solveDialogTitle\", {name}), text: t(\"solveDialogText\"), confirmButtonText: t(\"solve\")};\n }\n}\n\n// TODO: Solution is delayed when clicking on Solve button directly from the solution setting field\nconst ClosureDialog = ({open, variant, report, onClose}) => {\n const classes = useStyles();\n const theme = useTheme();\n const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));\n const api = useContext(ApiContext);\n const { t } = useTranslation();\n const currentUser = useSelector(currentUserSelector());\n const dialogContent = getDialogContent(variant, report, t);\n const [pendingEditorState, setPendingEditorState] = useState(() => emptyEditorState()); // TODO: Remove state initialization, not needed\n\n useMemo(() => {\n setPendingEditorState(deserializeEditorState(report.solution));\n }, [report.solution])\n\n const sendMessageWithSolution = async () => {\n if (!isEmptyState(pendingEditorState)) {\n //dispatch(addReportMessages(report.workspaceId, report.id, newMessage(report.id, content, currentUser.id, attachments)))\n // TODO: Add message to redux??\n await api.mutation.sendReportSolution(report.pk, report.workspace, serializeEditorState(pendingEditorState));\n }\n }\n\n const handleConfirmButtonClick = async () => {\n const data = {};\n const serialized = JSON.stringify(serializeEditorState(pendingEditorState));\n if (report.solution !== serialized) {\n data.solution = serialized;\n }\n\n if (variant === \"requestedApproval\") {\n data.approval = PendingApproval;\n await api.mutation.updateReportState(report.pk, report.sk, currentUser.pk, \"solved\", data);\n await api.mutation.createSystemMessage(report.pk, report.sk, currentUser.pk, {state: \"solved\", approval: PendingApproval});\n } else if (variant === \"rejectedApproval\") {\n data.approval = RejectedApproval;\n await api.mutation.updateResource(report.pk, report.sk, data);\n await sendMessageWithSolution();\n } else {\n await api.mutation.updateReportState(report.pk, report.sk, currentUser.pk, \"solved\", data);\n await api.mutation.createSystemMessage(report.pk, report.sk, currentUser.pk, {state: \"solved\"});\n await sendMessageWithSolution();\n }\n\n onClose();\n }\n\n return (\n \n {/**/}\n {/* */}\n {/* */}\n {/* */}\n {/* */}\n {/* */}\n \n {t(\"createdAt\", { date: new Date(report.createdAt) })}\n \n {messages && messages.length > 0 && members && statusLabel ? (\n setContextMenuAnchorEl(null)}\n />\n setClosureDialogOpen(false)}\n >\n
\n );\n};\n\nReportToolbar.propTypes = {\n className: PropTypes.string,\n};\n\nexport default ReportToolbar;\n","import React from 'react';\nimport clsx from 'clsx';\nimport {\n makeStyles,\n Divider\n} from '@material-ui/core';\nimport ReportAttributesPanel from \"./ReportAttributesPanel\";\nimport ReportChat from \"./ReportChat\";\nimport ReportToolbar from \"./ReportToolbar\";\nimport PropTypes from \"prop-types\";\n\nconst useStyles = makeStyles((theme) => ({\n reportWithChat: {\n //overflowX: 'auto',//not right here..\n flex: \"1 1 auto\",\n display: \"flex\",\n },\n chatContainer: {\n minWidth: 0,\n [theme.breakpoints.down('sm')]: {\n width: \"100%\"\n },\n [theme.breakpoints.up('md')]: {\n flex: \"1 1 auto\",\n },\n display: \"flex\",\n flexDirection: \"column\",\n },\n chat: {\n flex: \"1 1 auto\",\n minHeight: 0,\n },\n sidePanel: {\n backgroundColor: theme.palette.background.paper,\n flex: \"0 0 auto\",\n maxWidth: '50%',\n [theme.breakpoints.down('sm')]: {\n overflowX: 'auto'\n },\n [theme.breakpoints.up('md')]: {\n width: theme.spacing(45),\n },\n [theme.breakpoints.up('xl')]: {\n width: theme.spacing(60),\n }\n },\n}));\n\nconst ReportWithChat = ({className, report}) => {\n const classes = useStyles();\n\n return (\n \n \n {getReportName(report, t)}\n \n
\n \n {renderToolbarButtons()}\n \n setContextMenuAnchorEl(event.currentTarget)}\n >\n \n
\n \n \n
\n );\n}\n\nReportWithChat.propTypes = {\n className: PropTypes.string,\n report: PropTypes.object\n}\n\nReportWithChat.defaultProps = {\n};\n\n\nexport default ReportWithChat;","import React from 'react';\nimport clsx from 'clsx';\nimport {\n makeStyles,\n Divider, Paper\n} from '@material-ui/core';\nimport ReportAttributesPanel from \"./ReportAttributesPanel\";\nimport ReportToolbar from \"./ReportToolbar\";\nimport PropTypes from \"prop-types\";\n\nconst useStyles = makeStyles((theme) => ({\n reportWithoutChat: {\n display: \"flex\",\n },\n paper: {\n minWidth: 0,\n [theme.breakpoints.down('sm')]: {\n width: \"100%\"\n },\n [theme.breakpoints.up('md')]: {\n flex: \"1 1 auto\",\n },\n display: \"flex\",\n flexDirection: \"column\",\n borderRadius: \"16px\",\n border: `1px solid ${theme.palette.grey[100]}`,\n boxShadow: \"rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px\",\n transition: \"box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n maxWidth: theme.spacing(90),\n marginTop: theme.spacing(2),\n marginLeft: \"auto\",\n marginRight: \"auto\"\n },\n attributePanel: {\n flex: \"1 1 auto\",\n overflow: \"auto\"\n },\n}));\n\nconst ReportWithoutChat = ({className, report}) => {\n const classes = useStyles();\n\n return (\n \n \n \n
\n \n \n \n \n
\n );\n}\n\nReportWithoutChat.propTypes = {\n className: PropTypes.string,\n report: PropTypes.object\n}\n\nReportWithoutChat.defaultProps = {\n};\n\n\nexport default ReportWithoutChat;","import React, { useEffect } from \"react\";\nimport { makeStyles, Divider, Hidden } from \"@material-ui/core\";\nimport ChatPlaceholder from \"./ChatPlaceholder\";\nimport { useSelector } from \"react-redux\";\nimport { workspaceReports } from \"../../state/reports/selectors\";\nimport { useTranslation } from \"react-i18next\";\nimport { useReport } from \"../../hooks/useReport\";\nimport { useNavigate, useParams } from \"react-router-dom\";\nimport { toId, toReportKey, toWorkspaceKey } from \"../../utils/apiUtils\";\nimport ReportList from \"./ReportList\";\nimport { isApprover } from \"../../utils/user\";\nimport { currentUserRoleSelector } from \"../../state/members/selectors\";\nimport ReportWithChat from \"./ReportWithChat\";\nimport ReportWithoutChat from \"./ReportWithoutChat\";\nimport WorkspacePage from \"../../components/WorkspacePage/WorkspacePage\";\n\nconst useStyles = makeStyles((theme) => ({\n reportsView: {\n display: \"flex\",\n // height: \"100%\"\n //height: `calc(100% - ${TopBarHeight}px)`,\n },\n placeholder: {\n flex: \"3 3 auto\",\n minWidth: 0,\n },\n reportsListContainer: {\n flex: \"0 0 auto\",\n //display: \"flex\",\n //flexDirection: \"column\",\n [theme.breakpoints.down(\"sm\")]: {\n width: \"100%\",\n display: (props) => (props.reportSelected ? \"none\" : \"initial\"),\n },\n [theme.breakpoints.up(\"md\")]: {\n width: theme.spacing(45),\n },\n [theme.breakpoints.up(\"xl\")]: {\n width: theme.spacing(52),\n },\n //backgroundColor: theme.palette.background.paper\n },\n reportsList: {\n height: \"100%\",\n //minHeight: 0,\n },\n content: {\n flex: \"1 1 auto\",\n },\n reportContent: {\n flex: \"1 1 auto\",\n minWidth: 0,\n },\n}));\n\nconst statusFilters = [\"all\", \"open\", \"solved\", \"junk\"];\n\n// TODO: Approver should not get report messages\n\n// TODO: Rename to ReportsView\n// TODO: Fix amount of cards rerenderings\n// TODO: Reduce flex boxes\nconst ReportsView = () => {\n // TODO: Merge active report with reportOpen?\n const { t } = useTranslation();\n const navigate = useNavigate();\n const { workspaceId, reportId } = useParams();\n const workspaceKey = toWorkspaceKey(workspaceId);\n const reportKey = reportId ? toReportKey(reportId) : null;\n useReport(reportKey, workspaceKey);\n const reports = useSelector(workspaceReports(workspaceKey));\n const selectedReport = reportKey ? reports?.find((report) => report.pk === reportKey) : null;\n const classes = useStyles({ reportSelected: Boolean(reportId) });\n const currentUserRole = useSelector(currentUserRoleSelector(workspaceKey));\n\n useEffect(() => {\n if (reportId && !selectedReport) {\n // Navigate to /reports if user tried to access not existing report by url\n navigate(`/portal/${workspaceId}/reports`);\n }\n // else if (!reportId && reports && reports.length > 0) {\n // // Navigate to first available report if no report was specified in url\n // navigate(`./${toId(reports[0].pk)}`);\n // }\n }, [reportId]);\n\n const handleReportSelected = (key) => {\n console.log(\"navigating to report %o\", key);\n // TODO: Move urls to constants\n navigate(`/portal/${workspaceId}/reports/${toId(key)}`);\n };\n\n return (\n \n
\n \n {children}\n
\n {/*\n setPendingLabel(e.target.value)}\n onFocus={(e) => e.target.select()}\n onKeyDown={handleTextFieldKeyDown}\n inputProps={{min: 1, style: { textAlign: 'center', height: \"auto\" }}}\n InputProps={{\n disableUnderline: true,\n classes: {\n root: classes.textFieldInput\n }\n }}\n />\n
\n \n {children}\n
\n \n setLabel(e.target.value)}\n onFocus={(e) => e.target.select()}\n onKeyDown={handleTextFieldKeyDown}\n inputProps={{min: 1, style: { textAlign: 'center', height: \"auto\" }}}\n InputProps={{\n disableUnderline: true,\n classes: {\n root: classes.labelTextFieldInput\n }\n }}\n />\n
\n \n \n qr_code_2} />\n \n
\n \n
\n \n \n {t(\"addComponents\")}\n \n \n {(provided) => (\n \n {components.map((component, index) => (\n \n {(provided, snapshot) => (\n <>\n onItemClick(component.type)}\n >\n \n \n {component.icon}\n \n \n \n \n \n {component.icon}\n \n \n \n )}\n \n )}\n \n ))}\n \n \n \n {t(\"componentsDragDropHint\")}\n \n \n
\n );\n};\n\nFormComponentsPanel.propTypes = {\n onItemClick: PropTypes.func\n};\n\nFormComponentsPanel.defaultProps = {\n onItemClick: () => {}\n};\n\nexport default FormComponentsPanel;","import React, { useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n makeStyles,\n Divider,\n Hidden,\n Typography,\n TextField,\n Button,\n Paper,\n AppBar,\n Toolbar,\n IconButton,\n Select,\n Box,\n Drawer,\n Accordion,\n AccordionSummary,\n AccordionDetails,\n List,\n ListItem,\n ListItemText,\n useTheme, useMediaQuery, Container\n} from \"@material-ui/core\";\nimport PropTypes from \"prop-types\";\nimport {useTranslation} from \"react-i18next\";\nimport {FORM_PAGE_WIDTH} from \"../../constants\";\n\nconst useStyles = makeStyles((theme) => ({\n pageSeparator: {\n // margin: [theme.spacing(1), 0],\n display: \"flex\",\n alignItems: \"center\",\n maxWidth: FORM_PAGE_WIDTH,\n },\n divider: {\n flex: \"1 1 auto\",\n },\n content: {\n margin: [0, theme.spacing(1)]\n }\n}));\n\nconst ContentSeparator = ({className, children}) => {\n const classes = useStyles();\n const { t } = useTranslation();\n\n return (\n \n {provided.placeholder}\n
\n \n )}\n \n {children}\n
\n \n setContextMenuOpen(false)}\n >\n
\n {/*\n \n {t(blockType)}\n \n \n setContextMenuOpen(true)}\n >\n \n
\n \n <>\n {/*{pageTemplate.blocks.length === 0 && }*/}\n {pageTemplate.blocks.length === 0 && addBlockSeparator(0)}\n {pageTemplate.blocks.map((block, blockIndex) => (\n \n \n {(provided, snapshot) => (\n onBlockDuplicate(pageIndex, blockIndex)}\n onDelete={() => onBlockDelete(pageIndex, blockIndex)}\n onAddBlockBeforeClick={(e) => handleAddBlockClick(e, blockIndex)}\n onAddBlockAfterClick={(e) => handleAddBlockClick(e, blockIndex + 1)}\n {...provided.draggableProps}\n {...provided.dragHandleProps}\n >\n \n ))}\n {provided.placeholder}\n \n
\n )}\n \n \n {t(\"confirmationPageOverlayText\")}\n \n
\n \n {addPageSeparator(0)}\n {template.pages.map((page, pageIndex) =>\n !isConfirmationPage(pageIndex, template.pages.length) ? (\n \n onBlockAdd(type, pageIndex, blockIndex)}\n />\n {addPageSeparator(pageIndex + 1)}\n \n ) : (\n
\n );\n }\n);\n\nFormEditorPanel.propTypes = {\n template: PropTypes.object.isRequired,\n languagePack: PropTypes.object.isRequired,\n language: PropTypes.string.isRequired,\n workspace: PropTypes.object.isRequired,\n showConfirmationPageOverlay: PropTypes.bool,\n onTemplateChange: PropTypes.func,\n onTextChange: PropTypes.func,\n onTextDelete: PropTypes.func,\n onBlockDelete: PropTypes.func,\n onBlockDuplicate: PropTypes.func,\n onPageAdd: PropTypes.func,\n onPageDelete: PropTypes.func,\n};\n\nFormEditorPanel.defaultProps = {\n classes: {},\n onTemplateChange: () => {},\n onTextChange: () => {},\n onTextDelete: () => {},\n onBlockDelete: () => {},\n onBlockDuplicate: () => {},\n onPageAdd: () => {},\n onPageDelete: () => {},\n};\n\nexport default FormEditorPanel;\n","import React, { useContext, useEffect, useMemo, useState } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport {\n makeStyles,\n useTheme,\n Divider,\n Dialog,\n useMediaQuery,\n DialogTitle,\n DialogActions,\n DialogContent,\n TextField,\n FormControlLabel,\n Checkbox,\n Typography,\n List,\n ListItem,\n ListItemIcon,\n ListItemText, Snackbar,\n} from \"@material-ui/core\";\nimport { useTranslation } from \"react-i18next\";\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\nimport Button from \"@material-ui/core/Button\";\nimport { LANGUAGES } from \"../../constants/languages\";\nimport { SpinnerButton } from \"../../components/ConfirmationButton/SpinnerButton\";\nimport { ApiContext } from \"../../contexts/ApiContext\";\nimport {deminifyLanguagePacks, minifyLanguagePacks} from \"../../utils/formUtils\";\nimport {Alert} from \"@material-ui/lab\";\nimport {Provider} from \"react-redux\";\n\n// TODO: Move dialog component styles to separate components\nconst useStyles = makeStyles((theme) => ({\n paper: {\n maxHeight: theme.spacing(60),\n [theme.breakpoints.up(\"sm\")]: {\n width: theme.spacing(75),\n },\n },\n title: {\n padding: [theme.spacing(3), theme.spacing(4)],\n },\n content: {\n padding: [theme.spacing(0), theme.spacing(4)],\n display: \"flex\",\n flexDirection: \"column\",\n },\n text: {\n marginBottom: theme.spacing(3),\n ...theme.typography.body2,\n },\n actions: {\n padding: [theme.spacing(4), theme.spacing(4), theme.spacing(3), theme.spacing(4)],\n \"&>*:not(:last-child) \": {\n marginRight: theme.spacing(1),\n },\n },\n fieldInput: {\n // height: \"14.275rem\",\n // alignItems: \"initial\",\n \"& .DraftEditor-root\": {\n height: \"14.275rem\",\n },\n },\n languageList: {\n borderRadius: theme.shape.borderRadius,\n border: `1px solid ${theme.palette.border.default}`,\n overflow: \"auto\",\n flex: \"1 1 auto\",\n maxHeight: \"100%\",\n },\n listItemIcon: {\n minWidth: 0,\n marginRight: theme.spacing(1),\n },\n}));\n\nconst AddFormLanguageDialog = ({ open, languagePacks, onClose, onConfirm }) => {\n const classes = useStyles();\n const theme = useTheme();\n const { t } = useTranslation();\n const api = useContext(ApiContext);\n const fullScreen = useMediaQuery(theme.breakpoints.down(\"sm\"));\n const [availableLanguages, setAvailableLanguages] = useState([]);\n const [selectedLanguages, setSelectedLanguages] = useState([]);\n const [isBusy, setIsBusy] = useState(false);\n const usedLanguages = Object.keys(languagePacks);\n\n useEffect(() => {\n const languages = LANGUAGES.filter((lang) => !usedLanguages.includes(lang.code)).map((lang) => lang.code);\n setAvailableLanguages(languages);\n setSelectedLanguages([]);\n }, [JSON.stringify(usedLanguages)]);\n\n const addSelectedLanguage = (value) => {\n setSelectedLanguages((prev) => [...prev, value]);\n };\n\n const removeSelectedLanguage = (value) => {\n setSelectedLanguages((prev) => {\n const index = prev.findIndex((lang) => lang === value);\n const newState = [...prev];\n newState.splice(index, 1);\n return newState;\n });\n };\n\n const handleLanguageSelected = (value) => {\n if (selectedLanguages.includes(value)) {\n removeSelectedLanguage(value);\n } else {\n addSelectedLanguage(value);\n }\n };\n\n const handleLanguageChecked = (event, value) => {\n if (event.target.checked) {\n addSelectedLanguage(value);\n } else {\n removeSelectedLanguage(value);\n }\n };\n\n const handleConfirmButtonClick = async () => {\n if (selectedLanguages.length === 0) {\n onClose();\n return;\n }\n\n setIsBusy(true);\n const languages = Object.keys(languagePacks);\n const sourceLanguage = languages[0];\n const minifiedLanguagePack = minifyLanguagePacks([languagePacks[sourceLanguage]])[0];\n\n // TODO: Cannot do all translations in a single request because it can timeout if too many languages were selected.\n const translatedLanguagePacks = {};\n for (const targetLanguage of selectedLanguages) {\n try {\n const translationResult = await api.query.translateLanguagePacks(\n minifiedLanguagePack,\n sourceLanguage,\n [targetLanguage]\n );\n translatedLanguagePacks[targetLanguage] = translationResult[targetLanguage];\n } catch {\n console.log(\"language %o failed to translate\", targetLanguage);\n translatedLanguagePacks[targetLanguage] = null;\n }\n }\n\n onConfirm(translatedLanguagePacks);\n setIsBusy(false);\n };\n\n const handleDialogClose = (event, reason) => {\n // Don't close the dialog if it is waiting for a translation to complete\n if (!isBusy) {\n onClose();\n }\n }\n\n return (\n - \n {availableLanguages.map((lang) => (\n
\n \n \n {title}\n \n { subtitle && (\n \n {subtitle}\n \n )}\n \n { showSwitch && (\n onSwitchChange(event.target.checked)}\n />\n )}\n
\n );\n}\n\nPropertySectionLabel.propTypes = {\n className: PropTypes.string,\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.string,\n showSwitch: PropTypes.bool,\n switchChecked: PropTypes.bool,\n onSwitchChange: PropTypes.func,\n};\n\nPropertySectionLabel.defaultProps = {\n showSwitch: true\n};\n\nexport default PropertySectionLabel","import * as types from \"./actionTypes\";\n\nexport const addOrUpdateAccessCredentials = (workspaceKey, resourceKey, accessCode) => async (dispatch, getState) => {\n dispatch({ type: types.ACCESS_CREDENTIALS_UPDATED, payload: {workspaceKey, resourceKey, accessCode} });\n}\n\nexport const deleteAccessCredentials = (workspaceKey, resourceKey) => async (dispatch, getState) => {\n dispatch({ type: types.ACCESS_CODE_DELETED, payload: {workspaceKey, resourceKey} });\n}","import React, {useContext, useState, useEffect, useCallback, useRef} from 'react';\nimport {ApiContext} from \"../contexts/ApiContext\";\nimport {ReactReduxContext, useDispatch, useSelector} from \"react-redux\";\nimport {addForm, loadForms} from \"../state/forms/actions\";\nimport {formSelector} from \"../state/forms/selectors\";\nimport {addOrUpdateAccessCredentials} from \"../state/accessCredentials/actions\";\nimport {accessCodeSelector} from \"../state/accessCredentials/selectors\";\n\nexport const useFetchAccessCode = (resource) => {\n const api = useContext(ApiContext);\n const dispatch = useDispatch();\n const accessCodeRedux = useSelector(accessCodeSelector(resource.workspace, resource.pk));\n const [accessCode, setAccessCode] = useState(accessCodeRedux);\n\n const fetchAsync = async () => {\n const credentials = await api.query.getResourceAccessCredentials(resource.pk);\n if (credentials && credentials.accessCode) {\n dispatch(addOrUpdateAccessCredentials(resource.workspace, resource.pk, credentials.accessCode));\n setAccessCode(credentials.accessCode);\n }\n }\n\n useEffect(() => {\n if (!resource) {\n throw new Error(\"Resource cannot be null or undefined\");\n }\n\n if (accessCode) {\n return;\n }\n\n if (resource.passwordProtected) {\n fetchAsync();\n }\n }, [resource.pk]);\n\n return [accessCode, setAccessCode];\n}\n\n","export const accessCodeSelector = (workspaceKey, resourceKey) => state => {\n if (!Boolean(workspaceKey) || !Boolean(resourceKey)) {\n return null;\n }\n\n const credentials = state.accessCredentials[workspaceKey];\n return credentials ? credentials[resourceKey] : null;\n}","import React, {useContext, useEffect, useRef, useState} from 'react';\nimport {\n Avatar,\n Button, Grow, InputAdornment,\n List,\n ListItem,\n ListItemAvatar, ListItemSecondaryAction,\n ListItemText,\n makeStyles,\n Paper, Snackbar, TextField, Tooltip,\n Typography\n} from \"@material-ui/core\";\nimport TextFieldsIcon from '@material-ui/icons/TextFields';\nimport {useTranslation} from \"react-i18next\";\nimport PropTypes from \"prop-types\";\nimport FormEditorPanel from \"./FormEditorPanel\";\nimport AddIcon from \"@material-ui/icons/Add\";\nimport {StyledMenu, StyledMenuItem} from \"../../components/StyledMenu\";\nimport FileCopyOutlinedIcon from \"@material-ui/icons/FileCopyOutlined\";\nimport DeleteOutlinedIcon from \"@material-ui/icons/DeleteOutlined\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport MoreHorizOutlinedIcon from \"@material-ui/icons/MoreHorizOutlined\";\nimport MoreVertOutlinedIcon from \"@material-ui/icons/MoreVertOutlined\";\nimport LanguageIcon from '@material-ui/icons/Language';\nimport FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';\nimport AddFormLanguageDialog from \"./AddFormLanguageDialog\";\nimport {Alert} from \"@material-ui/lab\";\nimport {deminifyLanguagePacks} from \"../../utils/formUtils\";\nimport AvatarPicker from \"../../components/AvatarPicker\";\nimport UserPicker from \"../../components/UserPicker\";\nimport {deleteElementByValue} from \"../../utils/arrayUtils\";\nimport SettingsControl from \"../../components/SettingsControl\";\nimport PropertySectionLabel from \"../PortalSettings/DialogsSettings/PropertySectionLabel\";\nimport clsx from \"clsx\";\nimport {toFormAccessId} from \"../../utils/apiUtils\";\nimport {useFetchAccessCode} from \"../../hooks/useFetchAccessCode\";\nimport {ApiContext} from \"../../contexts/ApiContext\";\nimport {useDispatch} from \"react-redux\";\nimport {loadOrUpdateCurrentUser} from \"../../state/currentUser/actions\";\n\nconst getLanguageListSize = (languageCount, theme) => {\n // Number of rows can be between 3-5\n const rows = Math.max(Math.min(languageCount, 5), 3);\n return `calc((${theme.typography.body2.fontSize} * ${theme.typography.body2.lineHeight} + 16px) * ${rows} + 16px + 2px)`\n}\n\nconst useStyles = makeStyles((theme) => ({\n settingsPanel: {\n height: \"100%\",\n width: theme.spacing(40),\n padding: [theme.spacing(3), theme.spacing(3)],\n overflow: \"auto\"\n },\n controls: {\n '&>*:not(:last-child)': {\n marginBottom: theme.spacing(3)\n }\n },\n languageList: {\n borderRadius: theme.shape.borderRadius,\n border: `1px solid ${theme.palette.border.default}`,\n height: props => getLanguageListSize(props.languageCount, theme),\n // height: `calc((${theme.typography.body2.fontSize} * ${theme.typography.body2.lineHeight} + 16px) * 3 + 16px + 2px)`,\n overflow: \"auto\"\n },\n listItem: {\n '&:hover': {\n backgroundColor: theme.palette.action.hover\n }\n },\n componentAvatar: {\n backgroundColor: theme.palette.grey[200],\n color: theme.palette.text.secondary\n },\n clonedItem: {\n '& ~ *': {\n transform: \"none!important\"\n }\n },\n label: {\n },\n defaultHint: {\n marginLeft: theme.spacing(0.5),\n color: theme.palette.text.hint\n },\n formPasswordField: {\n marginTop: theme.spacing(1)\n },\n collapsed: {\n display: \"none\"\n }\n}));\n\n// TODO: Refactor parameters\nconst FormSettingsPanel = ({form, activeLanguage, languagePacks, defaultSettings, onLanguageChange, onLanguagesAdded, onLanguageDeleted, onSettingChange, onFormAccessCodeChange}) => {\n const languages = Object.keys(languagePacks);\n const classes = useStyles({languageCount: languages.length});\n const { t } = useTranslation();\n const api = useContext(ApiContext);\n const [clickedLanguage, setClickedLanguage] = useState();\n const [languageMenuAnchorEl, setLanguageMenuAnchorEl] = useState(false);\n const [languageDialogOpen, setLanguageDialogOpen] = useState(false);\n const [showSnackbar, setShowSnackbar] = useState(false);\n const [translationFailed, setTranslationFailed] = useState(false);\n const [assignTo, setAssignTo] = useState(defaultSettings?.assignTo ?? []);\n const [passwordProtected, setPasswordProtected] = useState(defaultSettings?.passwordProtected ?? false);\n const [accessCode, setAccessCode] = useFetchAccessCode(form);\n\n const changeSelectedLanguage = (newLanguage) => {\n if (newLanguage !== activeLanguage) {\n onLanguageChange(newLanguage);\n }\n }\n\n const handleAddLanguageButtonClick = () => {\n setTranslationFailed(true);\n setLanguageDialogOpen(true);\n }\n\n const handleLanguageItemMoreButtonClick = (event, language) => {\n setLanguageMenuAnchorEl(event.currentTarget);\n setClickedLanguage(language);\n }\n\n const handleDeleteLanguageButtonClick = () => {\n if (clickedLanguage === activeLanguage) {\n // If the active language is deleted switch active language to the first language\n onLanguageChange(languages.find(lang => lang !== clickedLanguage));\n }\n\n onLanguageDeleted(clickedLanguage);\n setLanguageMenuAnchorEl(null);\n }\n\n const handleLanguageDialogConfirm = (translatedLanguagePacks) => {\n setLanguageDialogOpen(false);\n\n // Show error snackbar if the translation has completely failed, e.g. because of timeout\n if (!translatedLanguagePacks) {\n setTranslationFailed(true);\n setShowSnackbar(true);\n return;\n }\n const translatedLanguages = Object.keys(translatedLanguagePacks);\n // translatedLanguagePacks can be an empty object if the translation has failed for all languages\n if (translatedLanguages.length === 0) {\n setShowSnackbar(true);\n return;\n }\n\n const nonNullLanguagePacks = {};\n let success = true;\n for (const language of translatedLanguages) {\n // Not translated languages will have null value, e.g: {cs: null, sk: {....}}\n if (Boolean(translatedLanguagePacks[language])) {\n nonNullLanguagePacks[language] = deminifyLanguagePacks([translatedLanguagePacks[language]])[0];\n } else {\n success = false;\n }\n }\n\n // Show error snackbar if any of the translations have failed\n if (!success) {\n setShowSnackbar(true);\n }\n\n onLanguagesAdded(nonNullLanguagePacks);\n changeSelectedLanguage(Object.keys(nonNullLanguagePacks)[0]);\n }\n\n const handleSnackbarClose = (event, reason) => {\n if (reason === 'clickaway') {\n return;\n }\n\n setShowSnackbar(false);\n };\n\n const handleUserAdded = (userId) => {\n const newAssignTo = [...assignTo, userId];\n setAssignTo(newAssignTo);\n onSettingChange('assignTo', newAssignTo);\n }\n\n const handleUserRemoved = (userId) => {\n const newAssignTo = deleteElementByValue(assignTo, userId);\n setAssignTo(newAssignTo);\n onSettingChange('assignTo', newAssignTo);\n }\n\n const handleTermDaysChange = (event) => {\n const value = event.target.value;\n // TODO: Don't use string setting names\n onSettingChange('termLength', value !== \"\" ? parseInt(value) : null);\n }\n\n const handleFormPasswordSwitchChange = (value) => {\n setPasswordProtected(value);\n onFormAccessCodeChange(accessCode);\n\n // TODO: REFACTOR!!!!\n if (value) {\n api.mutation.createResourceAccessCredentials(form.workspace, form.pk, accessCode ?? \" \");\n\n }\n onSettingChange('passwordProtected', value);\n }\n\n const handleAccessCodeChanged = (event) => {\n setAccessCode(event.target.value);\n onFormAccessCodeChange(event.target.value);\n }\n\n return (\n \n setLanguageDialogOpen(false)}\n onConfirm={handleLanguageDialogConfirm}\n />\n \n \n {translationFailed ? t(\"translationFailed\") : t(\"notAllLanguagesTranslated\")}\n \n \n
\n );\n};\n\nFormSettingsPanel.propTypes = {\n activeLanguage: PropTypes.string.isRequired,\n languagePacks: PropTypes.object.isRequired,\n defaultSettings: PropTypes.object,\n onSettingChange: PropTypes.func,\n onLanguageChange: PropTypes.func,\n onLanguagesAdded: PropTypes.func,\n onLanguageDeleted: PropTypes.func,\n};\n\nFormSettingsPanel.defaultProps = {\n defaultSettings: {},\n onSettingChange: () => {},\n onLanguageChange: () => {},\n onLanguagesAdded: () => {},\n onLanguageDeleted: () => {},\n onFormAccessCodeChange: () => {},\n};\n\nexport default FormSettingsPanel;","import React from 'react';\nimport {urlB64ToUint8Array} from \"../utils/textUtils\";\n\nexport const NotificationContext = React.createContext({});\n\nexport const newNotificationService = () => {\n // Check if browser supports service worker and push notifications\n return 'serviceWorker' in navigator && 'showNotification' in ServiceWorkerRegistration.prototype ? {\n isEnabled: () => isEnabled(),\n getSubscription: (callback) => getSubscription(callback),\n subscribe: (callback) => subscribe(callback),\n unsubscribe: () => unsubscribe()\n } : {\n isEnabled: () => false,\n getSubscription: (callback) => callback(null),\n subscribe: (callback) => callback(null),\n unsubscribe: () => {}\n }\n}\n\nconst pushKey = \"BPU8g3VMMt4ELcnAl9K83-_oWkKiL2aVyUY1EiZAcIqDzMnpHOAhPt8YvulvTnvGIyJlmONxEwhjWw-r62z1hw8\";\n\nfunction isEnabled() {\n return Notification.permission !== 'denied';\n}\n\nfunction getSubscription(callback) {\n navigator.serviceWorker.getRegistration().then(function (registration) {\n if (!registration) {\n callback(null);\n return;\n }\n\n registration.pushManager.getSubscription().then(callback);\n });\n}\n\nfunction subscribe(callback) {\n navigator.serviceWorker.ready.then(function(reg) {\n reg.pushManager.subscribe({\n userVisibleOnly: true,\n applicationServerKey: urlB64ToUint8Array(pushKey),\n }).then(function(sub) {\n callback(sub);\n }).catch(function(error) {\n console.warn(\"Push subscription ended with error: %o\", error);\n });\n })\n}\n\nfunction unsubscribe() {\n if ('unsubscribe' in PushSubscription.prototype) {\n console.log(\"unsubscribing push subscription\")\n navigator.serviceWorker.ready.then(function(reg) {\n reg.pushManager.getSubscription().then(function(subscription) {\n subscription?.unsubscribe();\n })\n });\n }\n}","import FormPresentationToolbar from \"./FormPresentationToolbar\";\n\nexport default FormPresentationToolbar;","import React, { useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { makeStyles, Divider, Hidden, Typography, TextField, Button, Paper } from \"@material-ui/core\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useTranslation } from \"react-i18next\";\nimport { WorkspaceKeyContext } from \"../../contexts/WorkspaceKeyContext\";\nimport { allFormsSelector, formSelector } from \"../../state/forms/selectors\";\nimport TileButton2 from \"../../components/TileButton2\";\nimport TileButton from \"../../components/TileButton/TileButton\";\nimport AddOutlinedIcon from \"@material-ui/icons/AddOutlined\";\nimport AddCircleOutlinedIcon from \"@material-ui/icons/AddCircleOutlined\";\nimport AddCircleOutlineOutlinedIcon from \"@material-ui/icons/AddCircleOutlineOutlined\";\nimport AddTileButton from \"../../components/AddTileButton\";\nimport { Navigate, useParams } from \"react-router-dom\";\nimport { toFormKey, toId, toUserKey } from \"../../utils/apiUtils\";\nimport { formatFormId } from \"../../utils/textFormatter\";\nimport FormEditorToolbar from \"./FormEditorToolbar\";\nimport FormPage from \"../../components/FormPage/FormPage\";\nimport {\n deleteBlock,\n deminifyLanguagePacks,\n duplicateBlock,\n getFormActionsVariant,\n getFormBlockId,\n hydrateFormTemplate,\n hydrateLanguagePacks,\n isConfirmationPage,\n minifyLanguagePacks,\n} from \"../../utils/formUtils\";\nimport PropTypes from \"prop-types\";\nimport MemoizedFormPage from \"./EditableFormPage\";\nimport FormPageActions from \"../../components/FormPageActions\";\nimport FormPresentationToolbar from \"../../components/FormPresentationToolbar\";\nimport { DEFAULT_FORM_TOP_PADDING_SPACING } from \"../../constants\";\nimport { s4 } from \"../../utils/idGenerator\";\nimport { ApiContext } from \"../../contexts/ApiContext\";\nimport { isDateBlock, isReportEmailBlock } from \"../../utils/formBlockUtils\";\nimport { isValidDate, isValidEmail } from \"../../utils/textUtils\";\nimport { scrollToElement } from \"../../utils/ui\";\nimport FormBlock from \"../../components/formBlocks\";\nimport FormBlockContainer from \"../../components/FormBlockContainer/FormBlockContainer\";\n\nconst useStyles = makeStyles((theme) => ({\n formPreview: {\n width: \"100%\",\n //backgroundColor: theme.palette.grey[50],\n backgroundColor: theme.palette.background.paper,\n position: \"relative\",\n },\n pagesContainer: {\n paddingTop: theme.spacing(DEFAULT_FORM_TOP_PADDING_SPACING), // to accommodate appbar,\n overflow: \"auto\",\n maxHeight: \"100%\",\n },\n page: {\n // pointerEvents: \"none\",\n },\n}));\n\n// TODO: Delete any attachments that were uploaded in preview mode\nconst FormPreviewPanel = ({ className, template, languagePacks, defaultLanguage, workspace, showToolbar }) => {\n const classes = useStyles();\n const api = useContext(ApiContext);\n const languages = Object.keys(languagePacks);\n const [language, setLanguage] = useState(defaultLanguage ?? languages[0]);\n const [pageIndex, setPageIndex] = useState(0);\n const rootRef = useRef();\n // Dummy api prevents file uploads to S3 when attaching files in preview mode\n // downloadObject needs to be real because S3 avatars may need to download logo images from S3\n const dummyApi = useMemo(\n () => ({\n storage: {\n uploadAttachment: () => s4(),\n deleteAttachment: () => {},\n downloadObject: api.storage.downloadObject,\n },\n }),\n []\n );\n\n useEffect(() => {\n rootRef.current?.scrollTo({ top: 0 });\n }, [pageIndex]);\n\n useEffect(() => {\n setLanguage(defaultLanguage);\n }, [defaultLanguage]);\n\n const handlePrimaryButtonClick = () => {\n if (pageIndex === template.pages.length - 1) {\n //confirmReportSubmission();\n } else {\n setPageIndex((prev) => prev + 1);\n }\n };\n\n const handleSecondaryButtonClick = () => {\n setPageIndex((prev) => prev - 1);\n };\n\n return (\n \n }\n onClick={handleAddLanguageButtonClick}\n >\n {t(\"addNew\")}\n \n )}\n >\n \n \n \n \n {t(\"days\")}\n }}\n />\n \n
\n - \n {languages.map(language => (\n
\n
\n \n {showToolbar && (\n
\n );\n};\n\nFormPreviewPanel.propTypes = {\n className: PropTypes.string,\n template: PropTypes.object.isRequired,\n languagePacks: PropTypes.object.isRequired,\n defaultLanguage: PropTypes.string,\n workspace: PropTypes.object.isRequired,\n showToolbar: PropTypes.bool,\n};\n\nFormPreviewPanel.defaultProps = {\n showToolbar: true,\n};\n\nexport default FormPreviewPanel;\n","import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n makeStyles,\n Divider,\n Hidden,\n Typography,\n TextField,\n Button,\n Paper,\n ListItem,\n ListItemAvatar,\n Avatar,\n ListItemText,\n List,\n} from \"@material-ui/core\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useTranslation } from \"react-i18next\";\nimport { WorkspaceKeyContext } from \"../../contexts/WorkspaceKeyContext\";\nimport { allFormsSelector, formSelector } from \"../../state/forms/selectors\";\nimport TileButton2 from \"../../components/TileButton2\";\nimport TileButton from \"../../components/TileButton/TileButton\";\nimport AddOutlinedIcon from \"@material-ui/icons/AddOutlined\";\nimport AddCircleOutlinedIcon from \"@material-ui/icons/AddCircleOutlined\";\nimport AddCircleOutlineOutlinedIcon from \"@material-ui/icons/AddCircleOutlineOutlined\";\nimport AddTileButton from \"../../components/AddTileButton\";\nimport { Navigate, useParams } from \"react-router-dom\";\nimport { toFormKey, toId, toUserKey } from \"../../utils/apiUtils\";\nimport { formatFormId } from \"../../utils/textFormatter\";\nimport FormEditorToolbar from \"./FormEditorToolbar\";\nimport FormPage from \"../../components/FormPage/FormPage\";\nimport {\n deleteBlock,\n deletePage,\n deminifyLanguagePacks,\n duplicateBlock,\n getDefaultFormLanguage,\n getFormBlockId,\n hydrateFormTemplate,\n hydrateLanguagePacks,\n minifyLanguagePacks,\n newPage,\n} from \"../../utils/formUtils\";\nimport { ApiContext } from \"../../contexts/ApiContext\";\nimport { workspaceSelector } from \"../../state/workspaces/selectors\";\nimport { memberSelector } from \"../../state/members/selectors\";\nimport Loader from \"../../components/Loader\";\nimport { s8 } from \"../../utils/idGenerator\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport ElevationScroll from \"../../components/ElevationScroll\";\nimport { DragDropContext, Draggable, Droppable } from \"react-beautiful-dnd\";\nimport FormComponentsPanel from \"./FormComponentsPanel\";\nimport TextFieldsIcon from \"@material-ui/icons/TextFields\";\nimport ShortTextOutlinedIcon from \"@material-ui/icons/ShortTextOutlined\";\nimport FormEditorPanel from \"./FormEditorPanel\";\nimport HomeOutlinedIcon from \"@material-ui/icons/HomeOutlined\";\nimport ArrowDropDownCircleOutlinedIcon from \"@material-ui/icons/ArrowDropDownCircleOutlined\";\nimport AttachFileOutlinedIcon from \"@material-ui/icons/AttachFileOutlined\";\nimport SubjectIcon from \"@material-ui/icons/Subject\";\nimport { newFormBlock } from \"../../utils/formBlockUtils\";\nimport FormSettingsPanel from \"./FormSettingsPanel\";\nimport FormPresentationView from \"../FormPresentationView\";\nimport { NestedDragDropContext } from \"../../contexts/NestedDragDropContext\";\nimport { newNotificationService } from \"../../contexts/NotificationContext\";\nimport FormPreviewPanel from \"./FormPreviewPanel\";\nimport Page from \"../../components/Page/Page\";\nimport WorkspacePage from \"../../components/WorkspacePage/WorkspacePage\";\nimport { scrollToElement } from \"../../utils/ui\";\nimport {addOrUpdateAccessCredentials, deleteAccessCredentials} from \"../../state/accessCredentials/actions\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n content: {\n flex: \"1 1 auto\",\n overflow: \"hidden\",\n display: \"flex\",\n },\n editModeContainer: {\n display: \"flex\",\n width: \"100%\"\n },\n preview: {\n overflow: \"auto\",\n flex: \"1 1 auto\",\n backgroundColor: theme.palette.grey[50],\n // '&>*:not(:last-child) ': {\n // marginBottom: theme.spacing(4)\n // }\n },\n pagePaper: {\n padding: [theme.spacing(2), 0],\n },\n divider: {\n backgroundColor: theme.palette.grey[300],\n },\n hidden: {\n display: \"none\"\n }\n}));\n\n// TODO: Refactor preview and edit panel containers + css\nconst FormEditView = () => {\n const classes = useStyles();\n const { t } = useTranslation();\n const api = useContext(ApiContext);\n const { formId } = useParams();\n const formKey = toFormKey(formId);\n const workspaceKey = useContext(WorkspaceKeyContext);\n const workspace = useSelector(workspaceSelector(workspaceKey));\n const form = useSelector(formSelector(workspaceKey, formKey));\n const [changed, setChanged] = useState(false);\n const [_, setRenderTrigger] = useState(false);\n const [showConfirmationPageOverlay, setShowConfirmationPageOverlay] = useState(false);\n const [mode, setMode] = useState(\"edit\");\n const languageRef = useRef();\n const templateRef = useRef();\n const languagePacksRef = useRef();\n const updatedSettingsRef = useRef();\n const nestedDragDropSubscriptionsRef = useRef({});\n const nestedDragDropContextValue = useMemo(\n () => ({\n subscribe: (blockKey, handler) => {\n nestedDragDropSubscriptionsRef.current[blockKey] = handler;\n },\n }),\n []\n );\n const defaultFormSettings = { ...form, template: undefined, languagePacks: undefined };\n const editorPanelRef = useRef();\n const formAccessCodeRef = useRef();\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (!Boolean(form) || Boolean(templateRef.current)) {\n return;\n }\n\n languageRef.current = getDefaultFormLanguage(form.languagePacks);\n templateRef.current = cloneDeep(form.template);\n languagePacksRef.current = cloneDeep(form.languagePacks);\n updatedSettingsRef.current = {};\n setRenderTrigger((prev) => !prev);\n }, [form]);\n\n // if (!form) {\n // console.log(\"FormEditor - form not found, redirecting back to forms\")\n // return (\n // \n \n \n {template.pages[pageIndex].blocks.map((block) => (\n \n \n ))}\n \n
\n \n {mode === \"preview\" ? (\n
\n \n \n */}\n \n \n {/**/}\n \n
\n )}\n \n \n {t(\"addFormDialogTitle\")}\n \n \n {t(\"addFormDialogText\")}\n \n \n
\n - \n {formTemplateNames.map((name) => (\n