\n \n
\n )\n}\n\nexport default Message\n","import React, { useState, useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport { useTranslation } from \"react-i18next\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Button from \"@material-ui/core/Button\";\nimport List from \"@material-ui/core/List\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport Grid from \"@material-ui/core/Grid\";\nimport EditIcon from \"@material-ui/icons/Edit\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport DeleteIcon from \"@material-ui/icons/Delete\";\nimport RestoreFromTrashIcon from \"@material-ui/icons/RestoreFromTrash\";\nimport { CustomSCStateConditionText } from \"./CustomSCStateConditions\";\nimport Paper from \"@material-ui/core/Paper\";\nimport withAccessControl from \"../HOC/AccessControl\";\nimport { useMutation, useQuery } from \"urql\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport { green } from \"@material-ui/core/colors\";\nimport { MESSAGE_TYPES } from \"../PopupMessages\";\nimport merge from \"deepmerge\";\nimport { navigate } from \"hookrouter\";\nimport { ACL_COMPONENTS } from \"../../config\";\nimport FormatHelper from \"../../lib/FormatHelper\";\nimport moment from \"moment\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\n\nconst useStyles = makeStyles((theme) => ({\n removed: {\n opacity: 0.5,\n },\n undo: {\n color: theme.palette.primary.main,\n textDecoration: \"underline\",\n },\n link: {\n cursor: \"pointer\",\n },\n breakLine: {\n margin: 0,\n whiteSpace: \"pre-line\",\n \"& span\": {\n fontSize: 16,\n },\n },\n paper: {\n margin: 0,\n boxShadow: \"none\",\n },\n buttonProgress: {\n color: green[500],\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n marginTop: -12,\n marginLeft: -12,\n },\n button: {\n marginTop: -30,\n marginBottom: 10,\n color: \"#fff\",\n fontWeight: \"bold\",\n },\n textarea: {\n marginTop: 30,\n marginBottom: 40,\n \"& div\": {\n borderColor: \"#999\",\n },\n },\n input: {\n \"&::placeholder\": {\n color: \"#525252\",\n opacity: \"1\",\n },\n },\n list: {\n marginTop: 20,\n padding: \"8px 16px 24px !important\",\n boxShadow:\n \"0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)\",\n borderRadius: \"4px\",\n },\n item: {\n width: \"100%\",\n padding: \"0 !important\",\n \"& button\": {\n marginTop: 20,\n },\n \"& div\": {\n boxShadow: \"none\",\n border: 0,\n },\n },\n statusText: {\n \"& span\": {\n fontSize: 14,\n },\n },\n statusDate: {\n flex: \"inherit\",\n width: 85,\n },\n statusHolder: {\n marginTop: 20,\n padding: 0,\n },\n}));\n\nconst createFavoriteNoteMutation = `\n mutation CreateFavoriteNoteMutation (\n $favoriteHashID: String,\n $text: String\n ) {\n createFavoriteNote (FavoriteHashID: $favoriteHashID, Text: $text) {\n HashID\n FavoriteHashID\n Text\n Created\n Removed\n } \n }\n`;\n\nconst updateFavoriteNoteMutation = `\n mutation UpdateFavoriteNoteMutation (\n $hashID: String,\n $text: String,\n $removed: Boolean\n ) {\n updateFavoriteNote (HashID: $hashID, Text: $text, Removed: $removed) {\n HashID\n FavoriteHashID\n Text\n Created\n Removed\n }\n }\n`;\n\nconst queryFavorites = `\n query ReadFavorites (\n $userHashID: ID,\n $filterFor: [String]\n ) {\n readFavorites(ID: $userHashID, ConstructionTypeContains: $filterFor) {\n HashID\n ProjectHashID\n Removed\n State\n Canton\n Calculated_distance\n Content\n Final_title\n Import_date\n Date\n Applied\n Construction_site {\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Building_owner {\n Name\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Project_management {\n Name\n Phone\n Email\n Website\n Email_other\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n StateHistory {\n edges {\n node {\n Created\n State\n }\n }\n }\n Notes {\n edges {\n node {\n HashID\n Text\n Created\n Removed\n }\n }\n }\n }\n }\n`;\n\n/**\n * CustomSCDetailAddition\n *\n * @returns {*}\n * @constructor\n */\nconst CustomSCDetailAddition = (props) => {\n const classes = useStyles();\n const {\n setFavoriteData,\n setMessage,\n user,\n unsetUser,\n token,\n unsetToken,\n } = useContext(GlobalContext);\n const { t } = useTranslation();\n const blankNote = {\n id: null,\n text: \"\",\n date: \"\",\n };\n const [newNote, setNewNote] = useState(blankNote);\n const [editNote, setEditNote] = useState(blankNote);\n const [formerResult, setFormerResult] = useState([]);\n\n const [notes, setNotes] = useState([\n {\n node: {\n Created: \"2022-01-27 08:15:22\",\n HashID: \"7R4rrN95ej\",\n Removed: false,\n Text: \"Interessantes Projekt.\",\n User: \"Elvis Padelvis\",\n },\n type: \"note\",\n },\n ]);\n const [stateHistory, setStateHistory] = useState([]);\n\n const [{ fetchingCreateFavoriteNote }] = useMutation(\n createFavoriteNoteMutation\n );\n\n const [{ fetchingUpdateFavoriteNote }, executeUpdateFavoriteNoteMutation] =\n useMutation(updateFavoriteNoteMutation);\n\n // GraphQL query for favorites, gets triggered by calling \"executeFavoritesQuery()\"\n const [result, executeFavoritesQuery] = useQuery({\n query: queryFavorites,\n variables: {\n userHashID: user.getData().hashID,\n filterFor: props.filterFor,\n },\n requestPolicy: \"network-only\",\n pause: true,\n });\n\n // let notes = []\n if (props?.favorite?.Notes?.edges) {\n // notes = props.favorite.Notes.edges\n setNotes(props.favorite.Notes.edges);\n }\n\n // let stateHistory = []\n if (props?.favorite?.StateHistory?.edges) {\n // stateHistory = props.favorite.StateHistory.edges\n setStateHistory(props.favorite.StateHistory.edges);\n }\n\n // GraphQL trigger and result handling\n useEffect(() => {\n if (!result.fetching) {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n // The query did not return any results!\n if (formerResult.length !== 0) {\n setFormerResult([]);\n }\n }\n } else {\n // Query not fetching right now\n if (\n typeof result.data !== \"undefined\" &&\n typeof result.data.readFavorites !== \"undefined\"\n ) {\n // Add the favorites to the global context\n setFavoriteData(result.data.readFavorites);\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [result])\n\n /**\n * save new note change to state\n *\n * @param event\n */\n const handleAddNote = (event) => {\n setNewNote(Object.assign({}, newNote, { text: event.target.value }));\n };\n\n /**\n * save add note-state to context/api\n */\n const handleAddNoteSubmit = () => {\n newNote.node = {\n Created: new Date(),\n HashID: Math.random(),\n Removed: false,\n Text: newNote.text,\n User: user.getData().firstName + \" \" + user.getData().lastName,\n };\n newNote.type = \"note\";\n\n setNotes([...notes, newNote]);\n setNewNote(blankNote);\n };\n\n /**\n * save edited note change to state\n *\n * @param note\n */\n const handleEditNote = (note) => {\n if (editNote.id !== null) {\n if (note.id !== editNote.id) {\n // End text-area-mode\n setEditNote(blankNote);\n // Set current text-area-mode\n setEditNote(note);\n } else {\n // End text-area-mode\n setEditNote(blankNote);\n }\n } else {\n // Start text-area-mode\n setEditNote(note);\n }\n };\n\n /**\n * reset edit mode if a new note is about to be added\n */\n const handleNewNoteFocus = () => {\n setEditNote(blankNote);\n };\n\n /**\n * update edited note to state\n *\n * @param event\n */\n const handleUpdateEditNote = (event) => {\n const mergedNote = merge(editNote, { node: { Text: event.target.value } });\n setEditNote(mergedNote);\n };\n\n /**\n * save edit note-state to context/api\n */\n const handleEditNoteSubmit = () => {\n executeUpdateFavoriteNoteMutation({\n hashID: editNote.node.HashID,\n text: editNote.node.Text,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error edit note on FavoriteDetailAddition\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: JSON.stringify(result.error),\n },\n });\n }\n } else {\n setMessage(\n MESSAGE_TYPES.INFO,\n t(\"favorites.label.details.note.changed\")\n );\n // Reset the note\n setEditNote(blankNote);\n\n executeFavoritesQuery();\n }\n });\n };\n\n /**\n * delete note\n *\n * @param deletedNoteId\n */\n const handleDeleteNote = (deletedNoteId) => {\n executeUpdateFavoriteNoteMutation({\n hashID: deletedNoteId,\n removed: true,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error delete note on FavoriteDetailAddition\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: JSON.stringify(result.error),\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.INFO, t(\"favorites.label.removed\"));\n // Reset the note\n setEditNote(blankNote);\n\n executeFavoritesQuery();\n }\n });\n };\n\n /**\n * restore note\n *\n * @param deletedNoteId\n */\n const handleRestoreNote = (deletedNoteId) => {\n executeUpdateFavoriteNoteMutation({\n hashID: deletedNoteId,\n removed: false,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else if (\n result.error.message.includes(\n `Favorite note with HashID '${deletedNoteId}' not found`\n )\n ) {\n setMessage(MESSAGE_TYPES.INFO, t(\"error.item.already.deleted\"));\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error restore note on FavoriteDetailAddition\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: JSON.stringify(result.error),\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.INFO, t(\"favorites.label.details.note.added\"));\n // Reset the note\n setEditNote(blankNote);\n executeFavoritesQuery();\n }\n });\n };\n\n /**\n * edit mode of a note\n */\n const EditNote = () => {\n return (\n <>\n - {historyListItems}
\n \n
\n
\n \n \n \n = Math.ceil(count / rowsPerPage) - 1}\n aria-label='next page'\n color='primary'\n >\n
\n )\n}\n\nexport default TablePaginationActions\n","export default Object.freeze({\n FREE: 'free',\n SMART: 'smart',\n PRO: 'pro',\n PROADMIN: 'proadmin'\n})\n","import React, { useContext, useEffect } from \"react\";\nimport { makeStyles } from \"@material-ui/core\";\nimport GlobalContext from \"../lib/GlobalContext\";\nimport { useTranslation } from \"react-i18next\";\nimport AppBar from \"@material-ui/core/AppBar\";\nimport ToggleButton from \"@material-ui/lab/ToggleButton\";\nimport ToggleButtonGroup from \"@material-ui/lab/ToggleButtonGroup\";\nimport UserTypes from \"./Onboarding/UserTypes\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\n\n/**\n * useStyles\n */\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: \"100%\",\n maxWidth: \"calc(100% - 250px)\",\n backgroundColor: theme.palette.background.paper,\n },\n tabs: {\n color: \"#525252\",\n fontSize: 14,\n height: \"100%\",\n width: \"100%\",\n },\n tab: {\n height: 64,\n width: \"100%\",\n maxWidth: 188,\n fontWeight: \"bold\",\n textAlign: \"center\",\n },\n tableTabsHeader: {\n background: \"#F7F9FA\",\n boxShadow: \"none\",\n },\n buttonColor: {\n color: theme.palette.text.primary,\n \"&.Mui-selected\": {\n backgroundColor: theme.palette.primary.main,\n color: \"white\",\n },\n \"&.Mui-selected:hover\": {\n backgroundColor: theme.palette.primary.main,\n },\n },\n newMarker: {\n width: 5,\n height: 5,\n display: \"inline-block\",\n position: \"relative\",\n top: \"-10px\",\n right: \"-3px\",\n borderRadius: \"50%\",\n },\n}));\n\nexport const BUILDING_APPLICATION_TYPE = {\n PROJECT: \"Baugesuch\",\n PUBLICATION: \"Baupublikation\",\n SUBMISSION: \"Submission\",\n};\n\n/**\n * BuildingApplicationTypeTabs\n *\n * @param props\n * @returns {*}\n * @constructor\n */\nconst BuildingApplicationTypeTabs = (props) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {\n user,\n selectedBuildingApplicationTypeTabValue,\n setSelectedBuildingApplicationTypeTabValue,\n } = useContext(GlobalContext);\n\n /**\n * set selected tab value useEffect\n */\n useEffect(() => {\n if (!selectedBuildingApplicationTypeTabValue) {\n setSelectedBuildingApplicationTypeTabValue(\n BUILDING_APPLICATION_TYPE.PROJECT\n );\n }\n }, [\n selectedBuildingApplicationTypeTabValue,\n setSelectedBuildingApplicationTypeTabValue,\n ]);\n\n /**\n * return\n */\n return (\n \n \n \n \n {t(\"projects.label\")}\n {props.hasNewApplications && (\n \n )}\n \n {user.getData().mode !== UserTypes.PRO && (\n \n \n \n {t(\"submissions.label\")}\n {props.hasNewSubmissions && (\n \n )}\n \n \n \n )}\n {user.getData().mode === UserTypes.PRO && (\n \n {t(\"submissions.label\")}\n {props.hasNewSubmissions && (\n \n )}\n \n )}\n \n \n
\n );\n};\n\nexport default BuildingApplicationTypeTabs;\n","import Joi from '@hapi/joi'\n/**\n * ProjectManagementAddressDataValidator\n *\n * @returns {{isValid: (function(*): boolean)}}\n * @constructor\n */\nconst ProjectManagementAddressDataValidator = () => {\n /**\n * Joi validation schema tokenData\n */\n const schemaAddressData = Joi.object({\n Street: Joi.string().allow(''),\n Number: Joi.string().allow(''),\n Zip: Joi.string().required(),\n City: Joi.string().allow(''),\n Geo: Joi.object(),\n __typename: Joi.string().allow('')\n })\n\n /**\n * isValid\n *\n * @param addressData\n * @returns {boolean}\n */\n const isValid = addressData => {\n // Check if address data is well-formed\n let { error } = schemaAddressData.validate(addressData, {\n abortEarly: false\n })\n\n if (addressData.Zip === '') {\n error = true\n }\n\n // Check how many properties are empty\n let emptyPropertiesCount = 0\n for (const property in addressData) {\n if (addressData[property] === '') {\n emptyPropertiesCount++\n }\n }\n\n // when only the zip is given, we do not want to get an output\n if (emptyPropertiesCount === 3) {\n error = true\n }\n\n return !error\n }\n\n /**\n * return\n */\n return {\n isValid\n }\n}\n\nexport default ProjectManagementAddressDataValidator()\n","import React, { useState, useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport Menu from \"@material-ui/core/Menu\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport ExpandLess from \"@material-ui/icons/ExpandLess\";\nimport ExpandMore from \"@material-ui/icons/ExpandMore\";\nimport StarBorder from \"@material-ui/icons/StarBorder\";\nimport Star from \"@material-ui/icons/Star\";\nimport MoreHoriz from \"@material-ui/icons/MoreHoriz\";\nimport Info from \"@material-ui/icons/Info\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport { useTranslation } from \"react-i18next\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport { MESSAGE_TYPES } from \"../PopupMessages\";\nimport GoogleMapComponent from \"../../lib/GoogleMapComponent\";\nimport withAccessControl from \"../HOC/AccessControl\";\nimport GetSafe from \"../../lib/GetSafe\";\nimport FormatHelper from \"../../lib/FormatHelper\";\nimport PHE from \"print-html-element\";\nimport { BUILDING_APPLICATION_TYPE } from \"../BuildingApplicationTypeTabs\";\nimport { renderToString } from \"react-dom/server\";\nimport {\n ClickAwayListener,\n Button,\n Table,\n TableBody,\n TableHead,\n} from \"@material-ui/core\";\nimport { useMutation } from \"urql\";\nimport LinearProgress from \"@material-ui/core/LinearProgress\";\nimport { A, navigate } from \"hookrouter\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { ACL_COMPONENTS, DEFAULT_LOGO_PATH } from \"../../config\";\nimport Grid from \"@material-ui/core/Grid\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\nimport ProjectManagementAddressDataValidator from \"../../lib/ProjectManagementAddressDataValidator\";\n\nconst useStyles = makeStyles((theme) => ({\n airDistance: {\n // backgroundColor: '#e3e3e3',\n padding: 5,\n },\n icon: {\n padding: 8,\n fontSize: 25,\n },\n tableCellColumnsbody: {\n width: \"calc(100% * 1 / 5)\",\n minWidth: 100,\n padding: 14,\n \"&:nth-child(1)\": {\n minWidth: 215,\n },\n \"&:nth-child(2)\": {\n minWidth: 520,\n },\n \"&:nth-child(3)\": {\n minWidth: 130,\n },\n \"@media (max-width:640px)\": {\n \"&:first-of-type\": {\n minWidth: \"auto\",\n },\n \"&:nth-child(2)\": {\n minWidth: 320,\n },\n },\n },\n toggleTableRow: {\n borderTop: \"2px solid #fff\",\n },\n toggleTableCell: {\n paddingTop: 0,\n verticalAlign: \"top\",\n },\n toggleTableCellMap: {\n paddingLeft: 205,\n \"@media (max-width:640px)\": {\n paddingLeft: 20,\n },\n },\n toggleTitle: {\n color: \"#999\",\n fontWeight: \"bold\",\n },\n newLabel: {\n color: \"#BD3A00\",\n fontWeight: \"bold\",\n },\n tooltipItem: {\n width: \"100%\",\n maxWidth: 350,\n borderRadius: 5,\n background: \"#006A7A\",\n fontSize: 16,\n textAlign: \"center\",\n \"& div\": {\n margin: 0,\n color: \"#fff\",\n },\n },\n applyTooltipItem: {\n width: \"100%\",\n maxWidth: 350,\n borderRadius: 5,\n background: \"#006A7A\",\n fontSize: 16,\n textAlign: \"left\",\n \"& div\": {\n margin: 0,\n color: \"#fff\",\n },\n },\n tooltipInfo: {\n maxWidth: \"100%\",\n background: theme.palette.background.default,\n \"& div\": {\n maxWidth: \"100%\",\n color: theme.palette.text.primary,\n fontSize: 12,\n lineHeight: \"20px\",\n },\n \"@media (min-width:768px)\": {\n maxWidth: 450,\n },\n },\n tooltipApprovalDate: {\n \"@media (min-width:768px)\": {\n maxWidth: 250,\n },\n },\n tooltipTitle: {\n display: \"flex\",\n alignItems: \"center\",\n },\n pointer: {\n cursor: \"pointer\",\n },\n headerWrapper: {\n width: \"100%\",\n maxWidth: 1320,\n paddingRight: 20,\n paddingLeft: 20,\n backgroundColor: \"#4ab3cf\",\n \"-webkit-print-color-adjust\": \"exact\",\n },\n logo: {\n paddingLeft: 0,\n },\n button: {\n color: \"#ffffff\",\n width: \"60%\",\n marginTop: \"20px\",\n marginBottom: \"40px\",\n },\n}));\n\nconst createFavoriteMutation = `\n mutation CreateFavorite (\n $projectHashID: String\n ) {\n createFavorite (ProjectHashID: $projectHashID) {\n HashID\n ProjectHashID\n }\n }\n`;\n\nconst updateFavoriteMutation = `\n mutation UpdateFavorite (\n $hashID: String,\n $removed: Boolean\n ) {\n updateFavorite (HashID: $hashID, Removed: $removed) {\n HashID\n }\n }\n`;\n\n/**\n * ProjectsFreeTableRow\n *\n * @returns {*}\n * @constructor\n */\nconst ProjectsTableRow = (props) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {\n upgradeToPremiumOpen,\n setUpgradeToPremiumOpen,\n setMessage,\n token,\n unsetUser,\n unsetToken,\n setFavoriteData,\n user,\n } = useContext(GlobalContext);\n const { row } = props;\n const [open, setOpen] = useState(false);\n const [anchorEl, setAnchorEl] = useState(null);\n const [isFavorite, setIsFavorite] = useState(false);\n const [favoriteID, setFavoriteID] = useState(null);\n const [applyTooltipOpen, setApplyTooltipOpen] = useState(false);\n\n const [{ fetchingCreateFavorite }, executeCreateFavoriteMutation] =\n useMutation(createFavoriteMutation);\n const [{ fetchingUpdateFavorite }, executeUpdateFavoriteMutation] =\n useMutation(updateFavoriteMutation);\n\n /**\n * mark favorites useEffect\n */\n useEffect(() => {\n if (props.favorites !== null) {\n const result = props.favorites.filter((item) => {\n return item.ProjectHashID === row.HashID;\n });\n\n if (result.length) {\n setFavoriteID(result[0].HashID);\n if (!result[0].Removed) {\n setIsFavorite(true);\n }\n }\n }\n }, [props.favorites, setIsFavorite, row.HashID]);\n\n /**\n * open context menu\n *\n * @param event\n */\n const handleClick = (event) => {\n event.stopPropagation();\n setAnchorEl(event.currentTarget);\n };\n\n /**\n * close context menu\n */\n const handleClose = (event) => {\n event.stopPropagation();\n setAnchorEl(null);\n };\n\n /**\n * handleTooltipClose\n */\n const handleTooltipClose = () => {\n setApplyTooltipOpen(false);\n };\n\n /**\n * handleTooltipOpen\n */\n const handleTooltipOpen = () => {\n setApplyTooltipOpen(true);\n };\n\n /**\n * updateFavoriteExecution\n *\n * @param removed\n */\n const updateFavoriteExecution = (removed = true) => {\n executeUpdateFavoriteMutation({\n hashID: favoriteID,\n removed: removed,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error update favorite on ProjectsTableRow\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.INFO, t(\"projects.favorites.updated\"));\n setIsFavorite(!removed);\n }\n });\n };\n\n /**\n * handleMakeFavorite\n */\n const handleMakeFavorite = (event) => {\n event.stopPropagation();\n setFavoriteData([]);\n executeCreateFavoriteMutation({\n projectHashID: row.HashID,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n if (result.error.message.includes(\"already exists\")) {\n updateFavoriteExecution(false);\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error save new favorite on ProjectsTableRow\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n }\n } else {\n setMessage(MESSAGE_TYPES.INFO, t(\"projects.add.to.favorites\"));\n setIsFavorite(true);\n setFavoriteID(result.data.createFavorite[0].HashID);\n }\n });\n };\n\n /**\n * handleRemoveFavorite\n */\n const handleRemoveFavorite = (event) => {\n event.stopPropagation();\n setFavoriteData([]);\n updateFavoriteExecution(true);\n };\n\n /**\n * handlePrint\n */\n const handlePrint = (event) => {\n event.stopPropagation();\n PHE.printHtml(renderToString(renderPrintAndShare()));\n };\n\n /**\n * handleShare\n */\n // const handleShare = () => {\n // const body = `${t('location.label.address')}%3A %0D%0A${GetSafe(\n // () => row.Construction_site.Address.Street || '',\n // ''\n // )} ${GetSafe(\n // () => row.Construction_site.Address.Number || '',\n // ''\n // )}%0D%0A${GetSafe(\n // () => row.Construction_site.Address.Zip || '',\n // ''\n // )} ${GetSafe(\n // () => row.Construction_site.Address.City || '',\n // ''\n // )}%0D%0A%0D%0A${t('projects.label.owner')}%3A%0D%0A${GetSafe(\n // () => row.Building_owner.Name || '',\n // ''\n // )}%0D%0A${GetSafe(\n // () => row.Building_owner.Address.Street || '',\n // ''\n // )} ${GetSafe(\n // () => row.Building_owner.Address.Number || '',\n // ''\n // )}%0D%0A${GetSafe(\n // () => row.Building_owner.Address.Zip || '',\n // ''\n // )} ${GetSafe(\n // () => row.Building_owner.Address.City || '',\n // ''\n // )}%0D%0A%0D%0A${t('projects.label.architect')}%3A%0D%0A${GetSafe(\n // () => row.Project_management.Name || '',\n // ''\n // )}%0D%0A${GetSafe(\n // () => row.Project_management.Address.Street || '',\n // ''\n // )} ${GetSafe(\n // () => row.Project_management.Address.Number || '',\n // ''\n // )}%0D%0A${GetSafe(\n // () => row.Project_management.Address.Zip || '',\n // ''\n // )} ${GetSafe(() => row.Project_management.Address.City || '', '')}\n // `\n //\n // window.location.href = `mailto:?to=&body=${body}&subject=${GetSafe(\n // () => row.Final_title,\n // ''\n // )}`\n // }\n\n /**\n * showDistance\n *\n * @returns {*}\n */\n const showDistance = () => {\n if (row.Distance_calculated_from === \"Air_distance\") {\n return (\n \n {user.isPro() && (\n \n \n {t(\"projects.label.expected.date\")}\n \n {row.Approval_date}\n \n )}\n {!user.isPro() && (\n \n \n {t(\"projects.label.expected.date\")}\n \n
\n {user.isPro() && (\n \n \n {t(\"projects.label.construction.sum\")}\n \n \n {row.Construction_sum}\n \n \n )}\n {!user.isPro() && (\n \n \n {t(\"projects.label.construction.sum\")}\n \n
\n {t(\"projects.label.fastest.route\")}\n
\n{t(\"projects.label.owner\")}
\n\n {GetSafe(() => row.Building_owner.Name, \"\")}\n
\n {GetSafe(() => row.Building_owner.Address.Street, \"\")}{\" \"}\n {GetSafe(() => row.Building_owner.Address.Number, \"\")}\n
\n {GetSafe(() => row.Building_owner.Address.Zip, \"\")}{\" \"}\n {GetSafe(() => row.Building_owner.Address.City, \"\")}\n
\n {t(\"projects.label.architect\")}\n
\n\n {GetSafe(() => row.Project_management.Name, \"\")}\n
\n {GetSafe(\n () => row.Project_management.Address.Street,\n \"\"\n )}{\" \"}\n {GetSafe(() => row.Project_management.Address.Number, \"\")}\n
\n {GetSafe(() => row.Project_management.Address.Zip, \"\")}{\" \"}\n {GetSafe(() => row.Project_management.Address.City, \"\")}\n
\n {isProcessable(\n GetSafe(() => row.Project_management.Phone, \"\")\n ) && (\n
\n {isProcessable(\n GetSafe(() => row.Project_management.Email, \"\")\n ) && (\n
\n \n \n {getApplyButtonText()}\n \n \n
\n \n props.autoSuggestError, false)}\n helperText={GetSafe(\n () =>\n props.autoSuggestError ? t('error.no.address.results') : '',\n ''\n )}\n />\n {loading && (\n
\n )}\n \n )\n}\n\nexport default withAccessControl(\n GooglePlacesAutosuggestAddress,\n ACL_COMPONENTS.GOOGLE_PLACES_AUTOSUGGEST_FIELD\n)\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Button from \"@material-ui/core/Button\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport { DialogTitle } from \"@material-ui/core\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport List from \"@material-ui/core/List\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport ListItemIcon from \"@material-ui/core/ListItemIcon\";\nimport DialogActions from \"@material-ui/core/DialogActions\";\nimport TextField from \"@material-ui/core/TextField\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport Typography from \"@material-ui/core/Typography\";\nimport AddIcon from \"@material-ui/icons/Add\";\nimport DragIndicatorIcon from \"@material-ui/icons/DragIndicator\";\nimport HomeIcon from \"@material-ui/icons/HomeOutlined\";\nimport EditIcon from \"@material-ui/icons/Edit\";\nimport DeleteIcon from \"@material-ui/icons/Delete\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport { DragDropContext, Draggable, Droppable } from \"react-beautiful-dnd\";\nimport { useTranslation } from \"react-i18next\";\nimport GooglePlacesAutosuggestAddress from \"../GooglePlacesAutosuggestFields/GooglePlacesAutosuggestAddress\";\nimport { useMutation, useQuery } from \"urql\";\nimport { MESSAGE_TYPES } from \"../PopupMessages\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport { green } from \"@material-ui/core/colors\";\nimport Joi from \"@hapi/joi\";\nimport GetSafe from \"../../lib/GetSafe\";\nimport withAccessControl from \"../HOC/AccessControl\";\nimport { navigate } from \"hookrouter\";\nimport { ACL_COMPONENTS } from \"../../config\";\nimport { CHANGE_TYPES } from \"../../pages/Projects\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\nimport FormGroup from \"@material-ui/core/FormGroup\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport FormLabel from \"@material-ui/core/FormLabel\";\n\nconst useStyles = makeStyles((theme) => ({\n changeLocation: {\n color: theme.palette.primary.main,\n width: \"auto\",\n height: \"100%\",\n fontWeight: \"bold\",\n },\n dialogTitleCloseIcon: {\n marginLeft: \"auto\",\n padding: 0,\n paddingRight: 23,\n paddingTop: 10,\n },\n root: {\n width: \"100%\",\n maxWidth: 444,\n },\n addButtonText: {\n paddingTop: 3,\n paddingRight: 15,\n paddingBottom: 3,\n paddingLeft: 15,\n fontWeight: \"bold\",\n },\n editIcon: {\n paddingRight: 5,\n },\n icon: {\n color: theme.palette.primary.main,\n fontSize: 24,\n [theme.breakpoints.up(\"sm\")]: {\n fontSize: 30,\n },\n },\n iconDisabled: {\n fontSize: 30,\n },\n iconLonely: {\n marginRight: 0,\n [theme.breakpoints.up(\"sm\")]: {\n marginRight: 35,\n },\n },\n listItem: {\n padding: 0,\n },\n dialogContent: {\n minWidth: \"100%\",\n padding: \"0 20px\",\n [theme.breakpoints.up(\"sm\")]: {\n paddingTop: 0,\n paddingRight: 32,\n paddingBottom: 24,\n paddingLeft: 32,\n },\n },\n dialogActions: {\n justifyContent: \"flex-start\",\n padding: \"0 20px\",\n [theme.breakpoints.up(\"sm\")]: {\n paddingTop: 0,\n paddingRight: 32,\n paddingBottom: 24,\n paddingLeft: 32,\n },\n },\n location: {\n paddingRight: 50,\n color: \"#525252\",\n },\n locationText: {\n fontSize: theme.typography.fontSize,\n },\n textField: {\n width: \"100%\",\n marginRight: 0,\n marginLeft: 0,\n },\n menu: {\n width: 200,\n },\n autocompleteResultWrapper: {\n position: \"relative\",\n textAlign: \"center\",\n zIndex: 2,\n },\n autocompleteResult: {\n position: \"absolute\",\n padding: theme.spacing(3),\n width: \"100%\",\n },\n buttonProgress: {\n color: green[500],\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n marginTop: -12,\n marginLeft: -12,\n },\n undo: {\n color: theme.palette.primary.main,\n textDecoration: \"underline\",\n fontSize: 14,\n },\n link: {\n cursor: \"pointer\",\n },\n removed: {\n opacity: 0.5,\n },\n bold: {\n display: \"block\",\n paddingTop: 12,\n paddingBottom: 12,\n color: \"#525252\",\n fontWeight: \"bold\",\n },\n homeIcon: {\n color: \"#999999\",\n fontSize: 30,\n },\n companyHeader: {\n color: \"#A6A6A6\",\n fontSize: 14,\n marginLeft: 12,\n marginTop: 20,\n },\n companyAddress: {\n color: \"#525252\",\n fontSize: 16,\n marginLeft: 12,\n marginBottom: 30,\n },\n}));\n\nconst createLocationMutation = `\n mutation createLocation(\n $title: String!\n $street: String\n $zip: String\n $city: String\n $long: Float\n $lat: Float\n $radius: Int\n $version: Int\n $userHashID: String!\n $constructionSums: [String]\n ) {\n createLocation(\n Title: $title,\n Street: $street,\n Zip: $zip,\n City: $city,\n Longitude: $long,\n Latitude: $lat,\n Radius: $radius,\n Version: $version,\n UserHashID: $userHashID,\n ConstructionSums: $constructionSums\n ) {\n HashID\n Title\n Street\n Zip\n City\n Radius\n Longitude\n Latitude\n Version\n UserHashID\n ConstructionSumList {\n edges {\n node {\n Code\n }\n }\n }\n }\n }\n`;\n\nconst updateLocationMutation = `\n mutation UpdateUser(\n $hashId: String!,\n $email: String!,\n $locations:[LocationInput]\n ) {\n updateUser(\n HashID: $hashId,\n Email: $email,\n Locations: $locations\n ) {\n HashID\n }\n }\n`;\n\nconst querySmartconextConf = `\n {\n readSmartconextConf {\n air_distance_radius_list\n construction_sums {\n ID,\n Code,\n MinRange,\n MaxRange,\n Title\n }\n }\n }\n`;\n\nconst updateCompanyMutation = `\n mutation UpdateCompany (\n $hashID: String!,\n $distance: Int,\n $constructionSums: [String]\n ) {\n updateCompany (\n HashID: $hashID, \n Distance: $distance,\n ConstructionSums: $constructionSums\n ) {\n Name\n Canton\n Distance\n ConstructionSumList {\n edges {\n node {\n Code\n }\n }\n }\n }\n }\n`;\n// Parse the gql result edge-node list to an location-construction-sum array\nexport const parseConstructionSumList = (gqlEdges = []) => {\n const constructionSums = [];\n\n gqlEdges.forEach((gqlEdge) => {\n constructionSums.push(gqlEdge.node.Code);\n });\n\n return constructionSums;\n};\n\n// Parse the location-construction-sum array to gql result edge-node list\nexport const reverseParseConstructionSumList = (constructionSumCodes) => {\n const constructionSumEdges = [];\n\n constructionSumCodes.forEach((constructionSumCode) => {\n constructionSumEdges.push({ node: { Code: constructionSumCode } });\n });\n\n return { edges: constructionSumEdges };\n};\n\n/**\n * ProjectsLocationsHandler\n *\n * @returns {*}\n * @constructor\n */\nconst ProjectsLocationsHandler = (props) => {\n const classes = useStyles();\n const {\n user,\n setUser,\n token,\n setToken,\n setMessage,\n selectedLocationTabValue,\n setSelectedLocationTabValue,\n unsetUser,\n unsetToken,\n setMarkAsReadByLocation,\n upgradeToPremiumOpen,\n setUpgradeToPremiumOpen,\n } = useContext(GlobalContext);\n const { t } = useTranslation();\n const [openDialog, setOpenDialog] = useState(false);\n const [listData, setListData] = useState([]);\n const [isEditable, setIsEditable] = useState(false);\n const [autoSuggestError, setAutoSuggestError] = useState(false);\n const [radiusSelectError, setRadiusSelectError] = useState(false);\n const [saveInProgress, setSaveInProgress] = useState(false);\n const [editableElement, setEditableElement] = useState({\n HashID: null,\n Title: \"\",\n Street: \"\",\n Radius: \"\",\n Latitude: \"\",\n Longitude: \"\",\n Sort: null,\n ConstructionSums: null,\n });\n const [airDistanceResultList, setAirDistanceResultList] = useState([]);\n const [constructionSumsResultList, setConstructionSumsResultList] = useState(\n []\n );\n const [editCompanyLocation, setEditCompanyLocation] = useState(false);\n const [{ fetchingCreateLocation }, executeCreateLocationMutation] =\n useMutation(createLocationMutation);\n const [{ fetchingUpdateLocation }, executeUpdateLocationMutation] =\n useMutation(updateLocationMutation);\n const [{ fetchingUpdateCompany }, executeUpdateCompanyMutation] = useMutation(\n updateCompanyMutation\n );\n const [result, executeQuerySmartconextConf] = useQuery({\n query: querySmartconextConf,\n pause: true,\n });\n\n /**\n * Joi validation schema\n */\n const schema = Joi.object({\n HashID: Joi.string().allow(null),\n Title: Joi.string().required(),\n Street: Joi.string(),\n Radius: Joi.number().required(),\n Latitude: Joi.number(),\n Longitude: Joi.number(),\n Sort: Joi.number().allow(null),\n ConstructionSums: Joi.array().allow(null),\n });\n\n /**\n * Joi valiation schema for company change\n */\n const editCompanySchema = Joi.object({\n Radius: Joi.number().required(),\n ConstructionSumList: Joi.object().allow(null, {}),\n });\n\n /**\n * useEffect\n */\n useEffect(() => {\n setListData(user.getData().locations);\n executeQuerySmartconextConf();\n }, [\n listData,\n editableElement,\n setEditableElement,\n user,\n executeQuerySmartconextConf,\n token,\n setToken,\n ]);\n\n /**\n * GraphQL trigger and result handling\n */\n useEffect(() => {\n if (!result.fetching && token.isSet()) {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n // Something went very wrong\n ExternalErrorLogger.log({\n text: \"Error fetching smartconext conf on ProjectsLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.general\"));\n }\n } else {\n // Query not fetching right now\n if (\n typeof result.data !== \"undefined\" &&\n typeof result.data.readSmartconextConf !== \"undefined\"\n ) {\n if (airDistanceResultList.length === 0) {\n setAirDistanceResultList(\n result.data.readSmartconextConf[0].air_distance_radius_list\n );\n }\n if (constructionSumsResultList.length === 0) {\n setConstructionSumsResultList(\n result.data.readSmartconextConf[0].construction_sums\n );\n }\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [result, token]);\n\n /**\n * handleClickManageLocations\n */\n const handleClickManageLocations = () => {\n setOpenDialog(true);\n };\n\n /**\n * handleCloseManageLocations\n */\n const handleCloseManageLocations = () => {\n setOpenDialog(false);\n setIsEditable(false);\n };\n\n /**\n * handleDeleteLocation\n */\n const handleDeleteLocation = (elementId) => {\n let removedItem = null;\n const data = listData.map((item) => {\n if (item.HashID === elementId) {\n item.Removed = true;\n removedItem = item;\n }\n return item;\n });\n user.setData({\n locations: data,\n });\n\n executeUpdateLocationMutation({\n hashId: user.getData().hashID,\n email: user.getData().email,\n locations: [\n {\n HashID: removedItem.HashID,\n Removed: removedItem.Removed,\n },\n ],\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.delete\"));\n ExternalErrorLogger.log({\n text: \"Error delete location on ProjectsLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.SUCCESS, t(\"general.label.delete.success\"));\n }\n });\n\n setUser(user);\n if (elementId === selectedLocationTabValue) {\n setSelectedLocationTabValue(false);\n }\n };\n\n /**\n * handleUndoDeleteLocation\n *\n * @param elementId\n */\n const handleUndoDeleteLocation = (elementId) => {\n let removedItem = null;\n const data = listData.map((item) => {\n if (item.HashID === elementId) {\n removedItem = item;\n }\n return item;\n });\n user.setData({\n locations: data,\n });\n\n executeUpdateLocationMutation({\n hashId: user.getData().hashID,\n email: user.getData().email,\n locations: [\n {\n HashID: removedItem.HashID,\n Removed: false,\n },\n ],\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else if (\n result.error.message.includes(\n ` User with HashID '${user.getData().hashID}' not found`\n )\n ) {\n setMessage(MESSAGE_TYPES.INFO, t(\"error.item.already.deleted\"));\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error undo delete location on ProjectsLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.SUCCESS, t(\"general.label.save.success\"));\n const data = listData.map((item) => {\n if (item.HashID === elementId) {\n item.Removed = false;\n removedItem = item;\n }\n return item;\n });\n user.setData({\n locations: data,\n });\n\n setUser(user);\n }\n });\n };\n\n /**\n * handleEditCompanyLocation\n */\n const handleEditCompanyLocation = () => {\n setEditableElement({\n Radius: user.getData().company.distance,\n ConstructionSums: parseConstructionSumList(\n GetSafe(() => user.getData().company.constructionSums.edges, [])\n ),\n });\n setEditCompanyLocation(true);\n };\n\n /**\n * handleEditLocation\n *\n * @param element\n */\n const handleEditLocation = (element) => {\n setEditableElement(element);\n setIsEditable(true);\n };\n\n /**\n * handleCloseEditLocations\n */\n const handleCloseEditLocations = () => {\n setIsEditable(false);\n setEditCompanyLocation(false);\n };\n\n /**\n * handleAddressChange\n *\n * @param autosuggestResult\n */\n const handleAddressChange = (autosuggestResult) => {\n setAutoSuggestError(false);\n const addressArray = autosuggestResult.address.split(\",\");\n const name = addressArray[addressArray.length - 2];\n const newElement = {\n HashID: editableElement.HashID,\n Title: name.trim(),\n Street: addressArray.join(\", \").trim(),\n Radius: editableElement.range,\n Latitude: autosuggestResult.latLng.lat,\n Longitude: autosuggestResult.latLng.lng,\n Sort: editableElement.Sort,\n ConstructionSums: editableElement.ConstructionSums,\n };\n setEditableElement(newElement);\n };\n\n /**\n * handleRangeChenge\n *\n * @param event\n */\n const handleRangeChange = (event) => {\n setRadiusSelectError(false);\n const newRange = event.target.value;\n const newElement = {\n HashID: editableElement.HashID,\n Title: editableElement.Title,\n Street: editableElement.Street,\n Radius: newRange,\n Latitude: editableElement.Latitude,\n Longitude: editableElement.Longitude,\n Sort: editableElement.Sort,\n ConstructionSums: editableElement.ConstructionSums,\n };\n setEditableElement(newElement);\n };\n\n /**\n * handleSaveEditLocations\n */\n const handleSaveEditLocations = () => {\n setSaveInProgress(true);\n\n // Validate editableElement data\n const { error } = schema.validate(editableElement, { abortEarly: false });\n if (error) {\n error.details.map((item) => {\n if (item.context.label === \"Radius\") {\n setRadiusSelectError(true);\n }\n if (item.context.label === \"Title\") {\n setAutoSuggestError(true);\n }\n setSaveInProgress(false);\n return item;\n });\n return;\n }\n\n let newListData = [];\n\n // If it is a new location HashID will be null\n if (editableElement.HashID === null) {\n listData.forEach((element) => {\n newListData.push(element);\n });\n\n executeCreateLocationMutation({\n title: editableElement.Title,\n street: editableElement.Street,\n zip: \"\",\n city: \"\",\n long: editableElement.Longitude,\n lat: editableElement.Latitude,\n radius: editableElement.Radius,\n version: 1,\n userHashID: user.getData().hashID,\n constructionSums: editableElement.ConstructionSums,\n }).then((result) => {\n setSaveInProgress(false);\n\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error save location on ProjectsLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.SUCCESS, t(\"general.label.save.success\"));\n const data = result.data.createLocation[0];\n\n const newElement = {\n HashID: data.HashID,\n Title: data.Title,\n Street: data.Street,\n Radius: data.Radius,\n Latitude: data.Latitude,\n Longitude: data.Longitude,\n ConstructionSums: parseConstructionSumList(\n data.ConstructionSumList.edges\n ),\n };\n\n newListData.push(newElement);\n\n user.setData({\n locations: newListData,\n });\n\n setUser(user);\n\n // setOpenDialog(false)\n setIsEditable(false);\n\n // reset pagination\n props.setPage(0);\n props.setChangeType(CHANGE_TYPES.INIT);\n }\n });\n // Otherwise it is an existing location\n } else {\n listData.forEach((element, indexInListData) => {\n if (element.HashID === editableElement.HashID) {\n executeUpdateLocationMutation({\n hashId: user.getData().hashID,\n email: user.getData().email,\n locations: [\n {\n HashID: editableElement.HashID,\n Title: editableElement.Title,\n Street: editableElement.Street,\n Radius: editableElement.Radius,\n Latitude: editableElement.Latitude,\n Longitude: editableElement.Longitude,\n ConstructionSums: editableElement.ConstructionSums,\n Sort: editableElement.Sort,\n },\n ],\n }).then((result) => {\n setSaveInProgress(false);\n\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error update location on ProjectsLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(\n MESSAGE_TYPES.SUCCESS,\n t(\"general.label.save.success\")\n );\n\n setMarkAsReadByLocation({\n hashID: editableElement.HashID,\n });\n\n newListData = user.getData().locations;\n newListData[indexInListData] = editableElement;\n\n user.setData({\n locations: newListData,\n });\n\n setUser(user);\n setIsEditable(false);\n\n // Reset pagination\n props.setPage(0);\n props.setChangeType(CHANGE_TYPES.INIT);\n }\n });\n } else {\n newListData.push(element);\n }\n });\n }\n };\n\n /**\n * handleSaveEditCompanyLocation\n */\n const handleSaveEditCompanyLocation = () => {\n setSaveInProgress(true);\n\n const { error } = editCompanySchema.validate(editableElement, {\n abortEarly: false,\n stripUnknown: true,\n });\n\n if (error) {\n error.details.map((item) => {\n if (item.context.label === \"Radius\") {\n setRadiusSelectError(true);\n }\n setSaveInProgress(false);\n return item;\n });\n return;\n }\n\n executeUpdateCompanyMutation({\n hashID: user.getData().company.hashID,\n distance: editableElement.Radius,\n constructionSums: editableElement.ConstructionSums,\n }).then((result) => {\n setSaveInProgress(false);\n\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error update company location on ProjectsLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.SUCCESS, t(\"general.label.save.success\"));\n\n setMarkAsReadByLocation({\n hashID: user.getData().company.hashID,\n });\n\n user.setData({\n company: {\n distance: editableElement.Radius,\n constructionSums: reverseParseConstructionSumList(\n editableElement.ConstructionSums\n ),\n },\n });\n\n setUser(user);\n setIsEditable(false);\n setEditCompanyLocation(false);\n }\n });\n };\n\n /**\n * handleAddLocation\n */\n const handleAddLocation = () => {\n setEditableElement({\n HashID: null,\n Title: \"\",\n Street: \"\",\n Radius: \"\",\n Latitude: \"\",\n Longitude: \"\",\n ConstructionSum: null,\n });\n setIsEditable(true);\n };\n\n /**\n * reorder\n *\n * @param list\n * @param startIndex\n * @param endIndex\n * @returns {unknown[]}\n */\n const reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n };\n\n /**\n * onDragEnd\n *\n * @param result\n */\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n if (result.destination.index === result.source.index) {\n return;\n }\n\n const reorderedListData = reorder(\n listData,\n result.source.index,\n result.destination.index\n );\n\n reorderedListData.map((item, index) => {\n item.Sort = index;\n delete item.__typename;\n delete item.ConstructionSumList;\n return item;\n });\n\n user.setData({\n locations: reorderedListData,\n });\n setUser(user);\n\n executeUpdateLocationMutation({\n hashId: user.getData().hashID,\n email: user.getData().email,\n locations: reorderedListData,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error save location order on ProjectsLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.SUCCESS, t(\"general.label.save.success\"));\n\n user.setData({\n locations: reorderedListData,\n });\n setUser(user);\n }\n });\n };\n\n /**\n * LocationDataListDialog\n */\n const LocationDataListDialog = (\n <>\n \n \n \n
\n )}\n {!loading && suggestions.length > 0 && (\n - \n
\n \n \n
\n )}\n - \n {suggestions.map((suggestion, index) => (\n
- \n
- \n {/* eslint-disable-next-line react/jsx-handler-names */}\n
\n {listData.map((item, index) => {\n if (item.Removed) {\n return (\n \n \n \n \n handleUndoDeleteLocation(item.HashID)\n } // eslint-disable-line\n >\n {t(\"general.label.undo\")}\n \n }\n />\n \n );\n } else {\n return (\n \n {(provided) => (\n \n \n \n \n {\" \"}\n {`${item.Street}, ${item.Radius} ${t(\n \"location.label.kmRadius\"\n )}`}\n \n }\n />\n handleEditLocation(item)}\n >\n \n handleDeleteLocation(item.HashID)\n } // eslint-disable-line\n >\n
\n )}\n \n \n \n {!user.hasZipSearchAreas() && (\n props.company.constructionSums.edges, [])\n )}\n value={props.company.hashID}\n handleTabChange={props.handleTabChange}\n setHasNewApplications={props.setHasNewApplications}\n setHasNewSubmissions={props.setHasNewSubmissions}\n selectedLocationTabValue={selectedLocationTabValue}\n />\n )}\n {props.locations.map((location) => {\n if (!location.Removed) {\n return user.hasZipSearchAreas() ? (\n
\n );\n};\n\nexport default withAccessControl(LocationTabs, ACL_COMPONENTS.LOCATION_TABS);\n","import Joi from \"@hapi/joi\";\nimport UserTypes from \"../components/Onboarding/UserTypes\";\nimport hash from \"object-hash\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\nimport Cookies from \"universal-cookie\";\nimport { MASQ_COOKIE_NAME, cookieDomain } from \"../config\";\n\n/**\n * User\n * @returns {{unsetData: *, getSchemaUserData: *, writeLocalStorage: *, getHash: *, deleteLocalStorage: *, setData: *, isSet: *, getLocalStorage: *, getSchemaCompanyData: *, getData: *}}\n * @constructor\n */\nconst User = () => {\n const initialData = {\n id: \"\",\n hashID: \"\",\n locale: \"\",\n salutation: 1,\n appAdmin: 0,\n isMasquerade: 0,\n email: \"\",\n firstName: \"\",\n lastName: \"\",\n mode: \"free\",\n stripePublicKey: \"\",\n locations: [],\n searchAreas: [],\n company: {\n id: \"\",\n hashID: \"\",\n distance: 0,\n chid: \"\",\n name: \"\",\n contactPerson: \"\",\n street: \"\",\n zip: \"\",\n city: \"\",\n phone: \"\",\n mobile: \"\",\n fax: \"\",\n email: \"\",\n website: \"\",\n employeeCount: \"\",\n legalForm: \"\",\n foundingYear: \"\",\n masterOperation: \"\",\n canton: \"\",\n branchCategory: 0,\n branchSubs: [],\n otherBusinessActivities: [],\n otherBusinessSpecialities: [],\n trialPossible: false,\n micrositeColorScheme: \"\",\n micrositeDescription: \"\",\n micrositeEmailApplicationText: \"\",\n micrositeImages: [],\n micrositeLogo: {},\n additionalMemberships: \"\",\n micrositeReferences: [],\n micrositeCertified: false,\n micrositeCertifiedUntil: \"\",\n zipSearchAreas: false,\n zipSearchStatistic: false,\n applicationFollowUpTimeInDays: 0\n },\n dossierTemplates: [],\n permissions: [],\n fulltextSearchRequests: [],\n };\n\n let data = initialData;\n\n /**\n * Joi validation schema companyData\n */\n const schemaCompanyData = Joi.object({\n id: Joi.number(),\n hashID: Joi.string().required(),\n adminUserID: Joi.number(),\n chid: Joi.string().allow(\"\"),\n name: Joi.string().required(),\n urlSegment: Joi.string().allow(\"\", null),\n contactPerson: Joi.string().allow(\"\"),\n street: Joi.string().allow(\"\"),\n zip: Joi.string().allow(\"\"),\n city: Joi.string().allow(\"\"),\n phone: Joi.string().allow(\"\"),\n mobile: Joi.string().allow(\"\"),\n website: Joi.string()\n .regex(\n /https?:\\/\\/(www\\.)?[-a-zA-ZöäüÖÄÜ0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/\n )\n .allow(\"\"),\n fax: Joi.string().allow(\"\"),\n email: Joi.string().email({ tlds: false }).allow(\"\"),\n employeeCount: Joi.number().integer().allow(0).allow(\"\"),\n legalForm: Joi.number().min(0).allow(\"\"),\n foundingYear: Joi.string().allow(\"\"),\n masterOperation: Joi.string().allow(\"\"),\n trainingCompany: Joi.string().allow(\"\"),\n canton: Joi.string().allow(\"\"),\n distance: Joi.number().allow(\"\"),\n latitude: Joi.number().allow(null),\n longitude: Joi.number().allow(null),\n branchCategory: Joi.number().min(0).allow(\"\"),\n branchSubs: Joi.array().items(Joi.number()),\n otherBusinessActivities: Joi.array().items(Joi.number()),\n otherBusinessSpecialities: Joi.array().items(Joi.number()),\n users: Joi.array(),\n stripeIsTrialing: Joi.boolean().allow(null),\n stripeTrialingDays: Joi.number().allow(null),\n stripePlanId: Joi.string().allow(null),\n stripeValidThrough: Joi.string().allow(null),\n stripeProductId: Joi.string().allow(null),\n stripeCancelAt: Joi.number(),\n stripeFuturePlans: Joi.array().allow(null),\n trialPossible: Joi.boolean().allow(null),\n memberships: Joi.array(),\n allMemberships: Joi.array(),\n micrositeColorScheme: Joi.string().allow(null, \"\"),\n micrositeDescription: Joi.string().allow(null, \"\"),\n micrositeEmailApplicationText: Joi.string().allow(null, \"\"),\n micrositeImages: Joi.array().allow(null),\n micrositeLogo: Joi.object().allow(null, {}),\n additionalMemberships: Joi.string().allow(null, \"\"),\n micrositeReferences: Joi.array().allow(null),\n micrositeCertified: Joi.boolean().allow(null),\n micrositeCertifiedUntil: Joi.string().allow(null, \"\"),\n hasExternalApply: Joi.boolean().allow(null),\n zipSearchAreas: Joi.boolean().allow(null),\n zipSearchStatistic: Joi.boolean().allow(null),\n applicationFollowUpTimeInDays: Joi.number().allow(null),\n constructionSums: Joi.object().allow(null, {}),\n __typename: Joi.string().allow(\"\"), // For API-Caching-Reasons this is required\n });\n\n /**\n * Joi validation schema userData\n */\n const schemaUserData = Joi.object({\n id: Joi.number(),\n hashID: Joi.string().required(),\n locale: Joi.string().allow(\"\"),\n salutation: Joi.number().allow(\"\"),\n appAdmin: Joi.number(),\n isMasquerade: Joi.number(),\n email: Joi.string().email({ tlds: false }).required(),\n firstName: Joi.string().allow(\"\"),\n lastName: Joi.string().allow(\"\"),\n mode: Joi.string()\n .valid(null, UserTypes.FREE, UserTypes.SMART, UserTypes.PRO)\n .required(),\n stripePublicKey: Joi.string().allow(\"\"),\n creditCard: Joi.object().allow({}),\n company: schemaCompanyData,\n dossierTemplates: Joi.array(),\n locations: Joi.array(),\n permissions: Joi.array(),\n fulltextSearchRequests: Joi.array(),\n searchAreas: Joi.array().allow(null),\n __typename: Joi.string().allow(\"\"), // For API-Caching-Reasons this is required\n });\n\n /**\n * getHash\n * Builds and returns a hash based on data\n * return String\n */\n const getHash = () => {\n return hash(data);\n };\n\n /**\n * getData\n * @returns {{mode: string, firstName: string, lastName: string, stripePublicKey: string, permissions: [], fulltextSearchRequests: [], locations: [], company: {zip: string, website: string, city: string, foundingYear: string, branchCategory: number, trialPossible: boolean, masterOperation: string, hashID: string, employeeCount: string, legalForm: string, chid: string, branchSubs: [], phone: string, street: string, name: string, canton: string, id: string, fax: string, email: string}, id: string, salutation: number, locale: string, hashID: string, email: string}}\n */\n const getData = () => {\n return data;\n };\n\n /**\n * setData\n * Sets and validates data\n * @param userData\n * @returns {boolean}\n */\n const setData = (userData) => {\n if (isValid(userData)) {\n data = _mergeIntoData(userData);\n _writeLocalStorage();\n return true;\n }\n return false;\n };\n\n /**\n * _mergeIntoData\n * Merges provided data into the current data\n * @param userData\n * @returns {{mode, firstName, lastName, company, id, salutation, email}}\n * @private\n */\n const _mergeIntoData = (userData) => {\n if (typeof userData.company === \"undefined\") {\n userData.company = {};\n }\n userData.company = {\n ...initialData.company,\n ...data.company,\n ...userData.company,\n };\n return { ...initialData, ...data, ...userData };\n };\n\n /**\n * isSet\n * Checks if data has been set\n * @returns {boolean}\n */\n const isSet = () => {\n return data.hashID !== \"\" && data.hashID.length > 0;\n };\n\n /**\n * isFree\n * Checks if the user is a free user\n * @returns {boolean}\n */\n const isFree = () => {\n return isSet() && data.mode === UserTypes.FREE;\n };\n\n /**\n * isPro\n * Checks if the user is a pro or proadmin user\n * @returns {boolean|boolean}\n */\n const isPro = () => {\n return (\n isSet() &&\n (data.mode === UserTypes.PRO || data.mode === UserTypes.PROADMIN)\n );\n };\n\n /**\n * isAbleToUpgrade\n * Checks if the user is able to see the upgrade dialog\n * @returns {boolean|boolean}\n */\n const isAbleToUpgrade = () => {\n return isSet() && (data.mode === UserTypes.FREE || data.mode === null);\n };\n\n /**\n * isAppAdmin\n * Checks if the user is app administrator (set in cms user form)\n * @returns {boolean|boolean}\n */\n const isAppAdmin = () => {\n return isSet() && (data.appAdmin === 1);\n };\n\n /**\n * isMasquerade\n * Checks if the user is a masquerade\n * @returns {boolean|boolean}\n */\n const isMasquerade = () => {\n return isSet() && (data.isMasquerade === 1);\n };\n\n /**\n * hasAddress\n *\n * @returns {boolean}\n */\n const hasAddress = () => {\n return (\n isSet() &&\n data.company.name !== \"\" &&\n data.company.street !== \"\" &&\n data.company.zip !== \"\" &&\n data.company.city !== \"\"\n );\n };\n\n const hasZipSearchAreas = () => {\n return isSet() && data.company.zipSearchAreas === true;\n };\n\n const hasZipSearchStatistic = () => {\n return isSet() && data.company.zipSearchStatistic === true;\n };\n\n const hasApplicationFollowUpTimInDays = () => {\n return isSet() && data.company.applicationFollowUpTimeInDays > 0;\n };\n\n /**\n * unsetData\n * Unsets the current data and localStore\n */\n const unsetData = () => {\n data = initialData;\n deleteLocalStorage();\n };\n\n /**\n * getSchemaUserData\n */\n const getSchemaUserData = () => {\n return schemaUserData;\n };\n\n /**\n * getSchemaCompanyData\n */\n const getSchemaCompanyData = () => {\n return schemaCompanyData;\n };\n\n /**\n * getLocalStorage\n * Fetch the data in the localStore\n * @returns {boolean|*|Url|{ext, root, name, dir, base}|null}\n */\n const getLocalStorage = () => {\n const localStoreUserData = window.localStorage.getItem(\"user\");\n if (localStoreUserData && localStoreUserData.length > 0) {\n return JSON.parse(localStoreUserData);\n }\n return false;\n };\n\n /**\n * _writeLocalStorage\n * @private\n */\n const _writeLocalStorage = () => {\n window.localStorage.setItem(\"user\", JSON.stringify(data));\n };\n\n /**\n * writeLocalStorage\n * Writes the provided data to the current data, also writes to the localStore\n * @param userData\n */\n const writeLocalStorage = (userData) => {\n if (setData(userData)) {\n _writeLocalStorage();\n }\n };\n\n /**\n * deleteLocalStorage\n * Removes the user-data from the browsers store, also removes the mask-cookie if present\n */\n const deleteLocalStorage = () => {\n _deleteAppAdminMaskCookie();\n window.localStorage.removeItem(\"user\");\n };\n\n /**\n * _deleteAppAdminMaskCookie\n * Removes the masquerade cookie\n */\n const _deleteAppAdminMaskCookie = () => {\n if (isMasquerade()) {\n const cookies = new Cookies();\n \n if (typeof cookies.get(MASQ_COOKIE_NAME) !== 'undefined') {\n cookies.remove(MASQ_COOKIE_NAME, {\n path: \"/\",\n domain: cookieDomain,\n });\n }\n }\n }\n\n /**\n * isValid\n * @param userData\n * @returns {boolean}\n */\n const isValid = (userData) => {\n const mergedData = _mergeIntoData(userData);\n const { error } = schemaUserData.validate(mergedData, {\n abortEarly: false,\n });\n if (error) {\n ExternalErrorLogger.log({\n text: \"Error user validity\",\n data: {\n error: error,\n userData: userData,\n mergedData: mergedData,\n },\n });\n return false;\n }\n return true;\n };\n\n /**\n * Methods accessible from outside\n */\n return {\n getHash,\n getData,\n setData,\n unsetData,\n isSet,\n isFree,\n isPro,\n isAbleToUpgrade,\n isAppAdmin,\n isMasquerade,\n hasAddress,\n hasZipSearchAreas,\n hasZipSearchStatistic,\n hasApplicationFollowUpTimInDays,\n getSchemaUserData,\n getSchemaCompanyData,\n getLocalStorage: getLocalStorage,\n writeLocalStorage: writeLocalStorage,\n deleteLocalStorage: deleteLocalStorage,\n };\n};\n\n/**\n * Exports the user instance\n */\nexport default User();\n","import React, { useContext } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { isNotLive } from \"../../config\";\nimport { Typography } from \"@material-ui/core\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport User from \"../../lib/User\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: \"100%\",\n maxWidth: 1280,\n },\n debugHolder: {\n marginTop: 7,\n paddingTop: 10,\n paddingBottom: 10,\n paddingRight: 20,\n paddingLeft: 20,\n background: \"rgba(255, 255, 255, 0.5)\",\n borderRadius: 3,\n border: \"1px solid #edcc4a\",\n },\n debugListWrapper: {\n paddingTop: 10,\n paddingBottom: 10,\n paddingRight: 20,\n paddingLeft: 20,\n background: \"#fff4db\",\n },\n debugListTitle: {\n fontSize: 20,\n fontWeight: \"bold\",\n marginBottom: 5,\n },\n debugDataList: {\n display: \"block\",\n alignItems: \"center\",\n },\n debugTitle: {\n marginRight: 10,\n },\n}));\n\nconst DebugImportantDataFragment = () => {\n const classes = useStyles();\n\n const { user, selectedLocationTabValue } = useContext(GlobalContext);\n\n /**\n * return\n */\n return (!User.isMasquerade() && (isNotLive || User.isAppAdmin())) ? (\n \n Important data: \n
\n ) : null;\n};\n\nexport default DebugImportantDataFragment;\n","import React, { useEffect, useState } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { useMutation } from \"urql\";\nimport withAccessControl from \"../../components/HOC/AccessControl\";\nimport { ACL_COMPONENTS, MASQ_COOKIE_NAME, cookieDomain, isNotLive } from \"../../config\";\nimport { Grid, LinearProgress, TextField, Typography } from \"@material-ui/core\";\nimport Link from \"@material-ui/core/Link\";\nimport DebugImportantDataFragment from \"./DebugImportantDataFragment\";\nimport User from \"../../lib/User\";\nimport Cookies from \"universal-cookie\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: \"100%\",\n maxWidth: 1280,\n },\n debugHolder: {\n marginTop: 7,\n paddingTop: 10,\n paddingBottom: 10,\n paddingRight: 20,\n paddingLeft: 20,\n background: 'rgba(255, 255, 255, 0.5)',\n borderRadius: 3,\n border: '1px solid #edcc4a'\n },\n debugListWrapper: {\n paddingTop: 10,\n paddingBottom: 10,\n paddingRight: 20,\n paddingLeft: 20,\n background: \"#fff4db\",\n },\n debugListTitle: {\n fontSize: 20,\n fontWeight: \"bold\",\n marginBottom: 5,\n },\n debugList: {\n display: \"flex\",\n flexWrap: 'wrap',\n alignItems: 'center'\n },\n debugTitle: {\n marginRight: 10,\n },\n debugLink: {\n display: \"inline-block\",\n marginRight: 10,\n paddingTop: 3,\n paddingBottom: 3,\n paddingLeft: 10,\n paddingRight: 10,\n background: \"#ffffff\",\n border: \"1px solid #00b3cf;\",\n borderRadius: 3,\n cursor: \"pointer\",\n },\n debugInfo: {\n display: 'block',\n fontWeight: 'bold',\n color: '#FF0000',\n fontSize: 12\n }\n}));\n\nconst mutationAddElasticBuildingApplicationsNewStatus = `\n mutation ($Amount: Int) {\n debugAddElasticBuildingApplicationsNewStatus(\n Amount: $Amount\n ){\n Success\n }\n }\n`;\n\nconst mutationReindexElasticIndividualIndicesOfCompany = `\n mutation {\n debugReindexElasticIndividualIndicesOfCompany {\n Success\n }\n }\n`;\n\n/**\n * DebugProjects\n *\n * @returns {*}\n * @constructor\n */\nconst DebugProjects = () => {\n const classes = useStyles();\n\n const [masqueradeId, setMasqueradeId] = useState(\"\");\n const [amount, setAmount] = useState(false);\n const [isMutating, setIsMutating] = useState(false);\n\n const [\n handleMutationAddElasticBuildingApplicationsNewStatus,\n executeMutationAddElasticBuildingApplicationsNewStatus,\n ] = useMutation(mutationAddElasticBuildingApplicationsNewStatus);\n\n const [\n handleMutationReindexElasticIndividualIndicesOfCompany,\n executeMutationReindexElasticIndividualIndicesOfCompany,\n ] = useMutation(mutationReindexElasticIndividualIndicesOfCompany);\n\n useEffect(() => {\n setIsMutating(\n (handleMutationAddElasticBuildingApplicationsNewStatus.fetching ||\n handleMutationReindexElasticIndividualIndicesOfCompany.fetching) ??\n false\n );\n }, [\n handleMutationAddElasticBuildingApplicationsNewStatus,\n handleMutationReindexElasticIndividualIndicesOfCompany,\n ]);\n\n useEffect(() => {\n if (Number.isInteger(amount)) {\n executeMutationAddElasticBuildingApplicationsNewStatus({\n Amount: amount,\n }).then(() => {\n window.location.reload();\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [amount]);\n\n const handleReindex = () => {\n executeMutationReindexElasticIndividualIndicesOfCompany().then(() => {\n window.location.reload();\n });\n };\n\n const handleMasquerade = () => {\n if (parseInt(masqueradeId) !== '' && parseInt(masqueradeId) !== 0) {\n const cookies = new Cookies();\n\n const cookieLifetimeDate = new Date();\n cookieLifetimeDate.setDate(\n cookieLifetimeDate.getDate() + 1\n );\n\n cookies.set(MASQ_COOKIE_NAME, masqueradeId, {\n path: \"/\",\n domain: cookieDomain,\n expires: cookieLifetimeDate,\n SameSite: true,\n });\n\n User.deleteLocalStorage()\n window.location.reload();\n }\n }\n\n return (!User.isMasquerade() && (isNotLive || User.isAppAdmin())) ? (\n \n
\n \n Current User IDs: {user.getData().id} / {user.getData().hashID}\n
\n \n Current Company IDs:{\" \"}\n {user.getData().company.id} / {user.getData().company.hashID}\n
\n \n Current Tab Location-HashID:{\" \"}\n {selectedLocationTabValue || 'No Tab'}\n
\n \n \n \n Debugging-Tools (Projects-Page){\" \"}\n \n \n
\n ) : null;\n};\n\nexport default withAccessControl(DebugProjects, ACL_COMPONENTS.PROJECTS);\n","import React, { useContext, useState, useEffect, useRef } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { useMutation, useQuery } from \"urql\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableFooter from \"@material-ui/core/TableFooter\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Paper from \"@material-ui/core/Paper\";\nimport LinearProgress from \"@material-ui/core/LinearProgress\";\nimport TablePaginationActions from \"../components/Table/TablePaginationActions\";\nimport ProjectsTableRow from \"../components/Projects/ProjectsTableRow\";\nimport GlobalContext from \"../lib/GlobalContext\";\nimport ProjectsLocationsHandler, {\n parseConstructionSumList,\n} from \"../components/Projects/ProjectsLocationsHandler\";\nimport { useTranslation } from \"react-i18next\";\nimport LocationTabs from \"../components/LocationTabs\";\nimport withAccessControl from \"../components/HOC/AccessControl\";\nimport { MESSAGE_TYPES } from \"../components/PopupMessages\";\nimport { navigate } from \"hookrouter\";\nimport { ACL_COMPONENTS, isNotLive } from \"../config\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport clsx from \"clsx\";\nimport { Chip, Grid } from \"@material-ui/core\";\nimport DoneIcon from \"@material-ui/icons/Done\";\nimport BuildingApplicationTypeTabs, {\n BUILDING_APPLICATION_TYPE,\n} from \"../components/BuildingApplicationTypeTabs\";\nimport GetSafe from \"../lib/GetSafe\";\nimport DebugProjects from \"../components/Debug/DebugProjects\";\nimport User from \"../lib/User\";\n\nlet keyIndex = 0;\nlet currentPageRowsDataChunkCache = [];\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: \"100%\",\n maxWidth: 1280,\n },\n table: {\n minWidth: \"100%\",\n },\n tableWrapper: {\n overflowX: \"auto\",\n },\n tableHead: {\n width: \"100%\",\n height: 64,\n background: \"#F7F9FA\",\n },\n tableCellHeader: {\n position: \"relative\",\n height: 64,\n fontWeight: \"bold\",\n },\n tableCellHeaderInner: {\n display: \"flex\",\n maxWidth: 1280,\n },\n tableColumnsHead: {\n height: 96,\n },\n tableCellColumnsHeader: {\n padding: \"40px 14px 16px 14px\",\n fontSize: theme.typography.fontSize,\n color: \"#999999\",\n fontWeight: \"bold\",\n \"&:first-of-type\": {\n paddingLeft: 24,\n },\n \"@media (max-width:640px)\": {\n \"&:first-of-type\": {\n paddingLeft: 14,\n },\n },\n },\n tableCellColumnsBody: {\n padding: \"20px 14px\",\n },\n tableCell: {\n height: 64,\n },\n tableRows: {\n paddingLeft: 36,\n },\n locationHead: {\n fontWeight: \"bold\",\n },\n locationHandler: {\n width: \"auto\",\n whiteSpace: \"nowrap\",\n zIndex: \"2\",\n },\n icon: {\n padding: 8,\n },\n listContent: {\n paddingLeft: 36,\n },\n paginationInput: {\n height: 28,\n width: 25,\n },\n paginationSelectIcon: {\n color: theme.palette.primary.main,\n },\n dashed: {\n borderBottom: \"1px dashed #999999\",\n },\n searchFilterGroup: {\n justifyContent: \"flex-end\",\n [theme.breakpoints.down(\"xs\")]: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n width: \"auto\",\n maxWidth: 200,\n },\n },\n searchFilterItem: {\n [theme.breakpoints.down(\"xs\")]: {\n display: \"flex\",\n flexDirection: \"column\",\n flexWrap: \"wrap\",\n },\n \"@media (max-width:810px)\": {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n },\n searchFilterButtonGroup: {\n display: \"inline-block\",\n marginRight: theme.spacing(1),\n marginLeft: theme.spacing(3),\n [theme.breakpoints.down(\"xs\")]: {\n marginLeft: theme.spacing(1),\n },\n },\n searchFilterButton: {\n marginRight: 4,\n marginLeft: 4,\n fontSize: 14,\n fontWeight: \"normal\",\n [theme.breakpoints.down(\"xs\")]: {\n marginTop: 4,\n marginBottom: 4,\n },\n \"&.MuiChip-colorPrimary\": {\n color: \"#fff\",\n },\n \"&.active\": {\n background: theme.palette.primary.main,\n color: \"#fff\",\n },\n },\n}));\n\nconst queryProjects = `\n query ReadElasticProjects (\n $locationID: ID,\n $isMainLocation: Boolean,\n $radius: Int,\n $lat: Float,\n $long: Float,\n $limit: Int,\n $offset: Int,\n $filterFor: [String],\n $types: [String],\n $constructionSums: [String]\n ) {\n readElasticProjects (\n IsMainLocation: $isMainLocation,\n sortBy: [{field: Date, direction: DESC}, {field: Sc_score, direction: DESC}, {field: Calculated_distance, direction: ASC}],\n Filter: {LocationID: $locationID, Radius: $radius, Lat: $lat, Long: $long, Types: $types},\n limit: $limit,\n offset: $offset,\n ConstructionTypeContains: $filterFor\n ConstructionSums: $constructionSums\n ){\n HashID\n Final_title\n Notice_number\n Type\n Date\n Canton\n Content\n Calculated_distance\n Distance_calculated_from\n Read\n Approval_date\n Construction_sum\n Construction_site {\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Building_owner {\n Name\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Project_management {\n Name\n Phone\n Email\n Website\n Email_other\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n }\n }\n`;\n\nconst queryZipSearchAreas = `\n query ReadElasticProjectsByZipSearchArea (\n $searchArea: String,\n $filterFor: [String],\n $types: [String],\n $limit: Int,\n $offset: Int\n ) {\n readElasticProjectsByZipSearchArea(\n Filter: {\n CompanySearchAreaID: $searchArea,\n Types: $types\n },\n ConstructionTypeContains: $filterFor,\n sortBy: [\n {\n field: Date,\n direction: DESC\n }\n ],\n limit: $limit,\n offset: $offset\n )\n {\n HashID\n Final_title\n Import_date\n Canton\n Calculated_distance\n Calculated_duration\n Distance_calculated_from\n Date\n Content\n Read\n Approval_date\n Construction_sum\n Construction_site {\n Address {\n City\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Building_owner {\n Name\n Address {\n City\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Project_management {\n Name\n Phone\n Email\n Website\n Email_other\n Address {\n City\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n }\n}\n`;\n\nconst queryFavorites = `\n query ReadFavorites (\n $userHashID: ID\n ) {\n readFavorites(ID: $userHashID) {\n HashID\n ProjectHashID\n Removed\n }\n }\n`;\n\nconst mutationUpdateElasticBuildingApplicationsNewStatus = `\n mutation (\n $Locations: [InputElasticNewBuildingApplicationLocation]!,\n $LocationHashIDsToMarkAsRead: [String],\n $ProjectIDsToMarkAsRead: [String]\n ) {\n updateElasticBuildingApplicationsNewStatus(\n Locations: $Locations,\n LocationHashIDsToMarkAsRead: $LocationHashIDsToMarkAsRead,\n ProjectIDsToMarkAsRead: $ProjectIDsToMarkAsRead\n ) {\n NewCountPerLocation {\n HashID\n NewCount\n NewCountBaugesuch\n NewCountBaupublikation\n NewCountSubmission\n NewCountBaugesuche\n }\n Projects {\n HashID\n Read\n }\n }\n }\n`;\n\nconst mutationUpdateSearchAreaBuildingApplicationsNewStatus = `\n mutation (\n $SearchAreaHashIDs: [String]!,\n $SearchAreaHashIDsToMarkAsRead: [String],\n $ProjectIDsToMarkAsRead: [String]\n ) {\n updateSearchAreaBuildingApplicationsNewStatus(\n SearchAreaHashIDs: $SearchAreaHashIDs,\n SearchAreaHashIDsToMarkAsRead: $SearchAreaHashIDsToMarkAsRead,\n ProjectIDsToMarkAsRead: $ProjectIDsToMarkAsRead\n ) {\n NewCountPerSearchArea {\n HashID\n NewCount\n NewCountBaugesuch\n NewCountBaupublikation\n NewCountSubmission\n NewCountBaugesuche\n }\n Projects {\n HashID\n Read\n }\n }\n }\n`;\n\n/**\n * Projects\n *\n * @returns {*}\n * @constructor\n */\nconst Projects = () => {\n let shownProjects = [];\n const classes = useStyles();\n const {\n projectData,\n setProjectData,\n token,\n setToken,\n user,\n selectedLocationTabValue,\n setVisibleProjects,\n visibleProjects,\n setMessage,\n unsetUser,\n unsetToken,\n setSelectedLocationTabValue,\n selectedBuildingApplicationTypeTabValue,\n setSelectedBuildingApplicationTypeTabValue,\n debugToolsEnabled,\n } = useContext(GlobalContext);\n const { t } = useTranslation();\n const [page, setPage] = useState(0);\n const [rowsPerPage, setRowsPerPage] = useState(10);\n const [queryVariables, setQueryVariables] = useState({});\n const [localSelectedLocationTabValue, setLocalSelectedLocationTabValue] =\n useState(user.getData().company.hashID);\n const [showNoResultMessage, setShowNoResultMessage] = useState(false);\n const [changeType, setChangeType] = useState(CHANGE_TYPES.INIT);\n const [querySearchFilter, setQuerySearchFilter] = useState([]);\n const [hasNewApplications, setHasNewApplications] = useState(false);\n const [hasNewSubmissions, setHasNewSubmissions] = useState(false);\n\n // GraphQL query for projects, gets triggered by calling \"executeProjectsQuery()\"\n const [queryElasticProjectsResult] = useQuery({\n query: user.hasZipSearchAreas() ? queryZipSearchAreas : queryProjects,\n variables: queryVariables,\n });\n\n // GraphQL query for favorites, gets triggered by calling \"executeFavoritesQuery()\"\n const [favoritesResult, executeFavoritesQuery] = useQuery({\n query: queryFavorites,\n variables: user.getData().hashID,\n pause: true,\n });\n\n const [, executeMutationUpdateElasticBuildingApplicationsNewStatus] =\n useMutation(mutationUpdateElasticBuildingApplicationsNewStatus);\n\n const [, executemutationUpdateSearchAreaBuildingApplicationsNewStatus] =\n useMutation(mutationUpdateSearchAreaBuildingApplicationsNewStatus);\n\n const emptyShownProjects = () => {\n shownProjects = [];\n };\n\n const prevQuerySearchFilter = useRef(querySearchFilter);\n\n /* eslint-disable */\n useEffect(() => {\n if (prevQuerySearchFilter.current !== querySearchFilter) {\n const queryVariablesHandler = () => {\n setPage(0);\n setVisibleProjects([]);\n emptyShownProjects();\n setQueryVariables({ ...queryVariables, filterFor: querySearchFilter });\n prevQuerySearchFilter.current = querySearchFilter;\n };\n\n if (!querySearchFilter.includes(\"unread\")) {\n markVisibleProjectsRead(queryVariablesHandler);\n } else {\n queryVariablesHandler();\n }\n }\n }, [querySearchFilter]);\n\n /**\n * setup building application switch and query variables useEffect\n */\n useEffect(() => {\n if (\n selectedBuildingApplicationTypeTabValue ===\n BUILDING_APPLICATION_TYPE.SUBMISSION\n ) {\n setQueryVariables({\n ...queryVariables,\n types: [BUILDING_APPLICATION_TYPE.SUBMISSION],\n });\n } else {\n setQueryVariables({\n ...queryVariables,\n types: [\n BUILDING_APPLICATION_TYPE.PROJECT,\n BUILDING_APPLICATION_TYPE.PUBLICATION,\n ],\n });\n }\n }, [selectedBuildingApplicationTypeTabValue]);\n\n /**\n * Handle tab and pagination changes\n */\n useEffect(() => {\n if (selectedLocationTabValue) {\n if (selectedLocationTabValue !== localSelectedLocationTabValue) {\n setPage(0);\n }\n\n setLocalSelectedLocationTabValue(selectedLocationTabValue);\n\n let currentApplicationTabValue = selectedBuildingApplicationTypeTabValue;\n if (currentApplicationTabValue === BUILDING_APPLICATION_TYPE.PROJECT) {\n currentApplicationTabValue = [\n BUILDING_APPLICATION_TYPE.PROJECT,\n BUILDING_APPLICATION_TYPE.PUBLICATION,\n ];\n }\n\n let lat = user.getData().company.latitude;\n let long = user.getData().company.longitude;\n let radius = user.getData().company.distance;\n let constructionSums = [];\n\n const limit = rowsPerPage * 4;\n const offset = rowsPerPage * (page % 3 == 0 ? page : page - (page % 3));\n\n if (selectedLocationTabValue === user.getData().company.hashID) {\n setQueryVariables({\n locationID: user.getData().company.hashID,\n isMainLocation: true,\n radius: radius,\n lat: lat,\n long: long,\n limit: limit,\n offset: offset,\n filterFor: querySearchFilter,\n types: currentApplicationTabValue,\n searchArea: user.hasZipSearchAreas()\n ? selectedLocationTabValue\n : null,\n constructionSums: parseConstructionSumList(\n GetSafe(() => user.getData().company.constructionSums.edges, [])\n ),\n });\n } else {\n user.getData().locations.map((item) => {\n if (item.HashID === selectedLocationTabValue) {\n radius = item.Radius;\n lat = item.Latitude;\n long = item.Longitude;\n constructionSums = item?.ConstructionSums;\n }\n return item;\n });\n\n setQueryVariables({\n locationID: user.getData().company.hashID,\n radius: radius,\n lat: lat,\n long: long,\n limit: limit,\n offset: offset,\n filterFor: querySearchFilter,\n types: currentApplicationTabValue,\n searchArea: user.hasZipSearchAreas()\n ? selectedLocationTabValue\n : null,\n constructionSums: constructionSums,\n });\n }\n }\n }, [\n selectedLocationTabValue,\n user,\n rowsPerPage,\n page,\n localSelectedLocationTabValue,\n ]);\n /* eslint-enable */\n\n useEffect(() => {\n if (page % 3 === 0 && Object.keys(queryVariables).length !== 0) {\n executeFavoritesQuery();\n }\n }, [executeFavoritesQuery, queryVariables, setToken, token.api, page]);\n\n /**\n * setVisibleProjects useEffect\n */\n useEffect(() => {\n if (shownProjects.length && !visibleProjects.length) {\n setVisibleProjects(shownProjects);\n }\n }, [setVisibleProjects, shownProjects, visibleProjects]);\n\n /**\n * Mark all projects within shownProjects read that are currently not marked read\n */\n const markVisibleProjectsRead = (callback = null) => {\n const currentPageRowsDataChunk = getProjectRowsChunkForCurrentPage();\n\n if (currentPageRowsDataChunk.length > 0) {\n const toMarkRead = [];\n\n const userHashID = user.getData().hashID;\n const userCompanyHashID = user.getData().company.hashID;\n\n const indexCurrentPageRowsDataChunk = currentPageRowsDataChunk.reduce(\n (prev, curr) => `${prev}${curr.HashID}`,\n \"\"\n );\n const indexCurrentPageRowsDataChunkCache =\n currentPageRowsDataChunkCache.reduce(\n (prev, curr) => `${prev}${curr.HashID}`,\n \"\"\n );\n\n currentPageRowsDataChunkCache = currentPageRowsDataChunk;\n\n if (\n indexCurrentPageRowsDataChunk !== indexCurrentPageRowsDataChunkCache\n ) {\n currentPageRowsDataChunk.forEach((currentPageProject) => {\n if (!currentPageProject.Read) {\n toMarkRead.push(\n `${userCompanyHashID}-${userHashID}-${currentPageProject.HashID}`\n );\n }\n });\n\n if (toMarkRead.length) {\n const locations = [];\n\n if (!user.hasZipSearchAreas()) {\n locations.push({\n IsCompanyLocation: true,\n HashID: user.getData().company.hashID,\n Radius: user.getData().company.distance,\n Lat: user.getData().company.latitude,\n Lon: user.getData().company.longitude,\n ConstructionSums: parseConstructionSumList(\n GetSafe(() => user.getData().company.constructionSums.edges, [])\n ),\n });\n\n user.getData().locations.map((item) => {\n locations.push({\n IsCompanyLocation: false,\n HashID: item.HashID,\n Radius: item.Radius,\n Lat: item.Latitude,\n Lon: item.Longitude,\n ConstructionSums: item?.ConstructionSums,\n });\n return true;\n });\n\n // Mark applications as read\n executeMutationUpdateElasticBuildingApplicationsNewStatus({\n Locations: locations,\n ProjectIDsToMarkAsRead: toMarkRead,\n }).then(() => {\n if (callback) {\n callback();\n }\n });\n } else {\n const searchAreaHashIDs = [];\n\n user.getData().searchAreas.map((item) => {\n searchAreaHashIDs.push(item.HashID);\n return true;\n });\n\n // Mark applications as read based on zip search-areas\n executemutationUpdateSearchAreaBuildingApplicationsNewStatus({\n SearchAreaHashIDs: searchAreaHashIDs,\n ProjectIDsToMarkAsRead: toMarkRead,\n }).then(() => {\n if (callback) {\n callback();\n }\n });\n }\n } else {\n if (callback) {\n callback();\n }\n }\n } else {\n if (callback) {\n callback();\n }\n }\n } else {\n if (callback) {\n callback();\n }\n }\n };\n\n /**\n * table column heads\n */\n const columns = [\n { id: \"actions\", label: t(\"general.label.actions\"), minWidth: 200 },\n {\n id: \"projects\",\n label: t(\"general.label.projects\"),\n minWidth: 100,\n fontSize: 16,\n },\n {\n id: \"city\",\n label: t(\"general.label.address\"),\n minWidth: 120,\n align: \"left\",\n },\n !user.hasZipSearchAreas()\n ? {\n id: \"route\",\n label: t(\"general.label.distance\"),\n minWidth: 120,\n align: \"left\",\n }\n : {},\n {\n id: \"date\",\n label: t(\"general.label.date\"),\n minWidth: 120,\n align: \"left\",\n },\n ];\n\n // Unmount effect\n useEffect(\n () => () => {\n markVisibleProjectsRead();\n setSelectedLocationTabValue(false)\n setSelectedBuildingApplicationTypeTabValue(false)\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n useEffect(() => {\n // Handling project data coming in via graphql\n if (!queryElasticProjectsResult.fetching) {\n if (queryElasticProjectsResult.error) {\n // Check if the user need to be logged out\n if (\n queryElasticProjectsResult.error.message.indexOf(\n \"User forced logout\"\n ) !== -1\n ) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n // The query did not return any results!\n if (!showNoResultMessage) {\n setShowNoResultMessage(true);\n }\n }\n } else {\n if (\n typeof queryElasticProjectsResult.data !== \"undefined\" &&\n (typeof queryElasticProjectsResult.data.readElasticProjects !==\n \"undefined\" ||\n typeof queryElasticProjectsResult.data\n .readElasticProjectsByZipSearchArea !== \"undefined\")\n ) {\n // Add the projects to the global context, either we have project results within the readElasticProjects or readElasticProjectsByZipSearchArea property\n const actualResult =\n typeof queryElasticProjectsResult.data.readElasticProjects !==\n \"undefined\"\n ? queryElasticProjectsResult.data.readElasticProjects\n : queryElasticProjectsResult.data\n .readElasticProjectsByZipSearchArea;\n\n if (changeType === CHANGE_TYPES.PAGE) {\n // Prevent duplicates by taking previous data into account\n setProjectData((prev) => {\n const updatedProjectData = prev.map((project) => {\n const existingProject = actualResult.find(\n (newProject) => newProject.HashID === project.HashID\n );\n return existingProject ?? project;\n });\n\n const filteredNewProjects = actualResult.filter((project) => {\n return (\n updatedProjectData.findIndex(\n (updatedProject) => updatedProject.HashID === project.HashID\n ) < 0\n );\n });\n\n return [...updatedProjectData, ...filteredNewProjects];\n });\n } else {\n setProjectData(actualResult);\n }\n\n setShowNoResultMessage(false);\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n queryElasticProjectsResult,\n changeType,\n user,\n token,\n showNoResultMessage,\n ]);\n\n const handleChangePage = (event, newPage) => {\n markVisibleProjectsRead();\n\n if (shownProjects.length) {\n setVisibleProjects(shownProjects);\n shownProjects = [];\n }\n\n setChangeType(CHANGE_TYPES.PAGE);\n window.scrollTo(0, 0);\n setPage(newPage);\n };\n\n /**\n * handleChangeRowsPerPage\n *\n * @param event\n */\n const handleChangeRowsPerPage = (event) => {\n markVisibleProjectsRead();\n\n setChangeType(CHANGE_TYPES.PAGE);\n setRowsPerPage(parseInt(event.target.value, 10));\n\n // Reset the current project-page data\n shownProjects = [];\n setPage(0);\n setProjectData([]);\n setChangeType(CHANGE_TYPES.TAB);\n setVisibleProjects([]);\n emptyShownProjects();\n setQueryVariables({ ...queryVariables, filterFor: querySearchFilter });\n };\n\n /**\n * handleTabChange\n *\n * @param event\n * @param newValue\n */\n const handleTabChange = (event, newValue) => {\n if (selectedLocationTabValue !== newValue) {\n markVisibleProjectsRead();\n\n setSelectedLocationTabValue(newValue);\n setChangeType(CHANGE_TYPES.TAB);\n\n // Reset the current project-page data\n shownProjects = [];\n setPage(0);\n setProjectData([]);\n setChangeType(CHANGE_TYPES.TAB);\n setVisibleProjects([]);\n emptyShownProjects();\n setQueryVariables({ ...queryVariables, filterFor: querySearchFilter });\n }\n };\n\n const handleApplicationTypeTabChange = (event, newValue) => {\n markVisibleProjectsRead();\n\n if (newValue === null) {\n newValue = selectedBuildingApplicationTypeTabValue;\n }\n\n if (selectedBuildingApplicationTypeTabValue !== newValue) {\n setSelectedBuildingApplicationTypeTabValue(newValue);\n setChangeType(CHANGE_TYPES.TAB);\n\n // Reset the current project-page data\n shownProjects = [];\n setPage(0);\n setProjectData([]);\n setChangeType(CHANGE_TYPES.TAB);\n setVisibleProjects([]);\n emptyShownProjects();\n setQueryVariables({ ...queryVariables, filterFor: querySearchFilter });\n }\n };\n\n const addRowToVisibleProjects = (project) => {\n if (project.Read === null) {\n shownProjects.push(project);\n }\n };\n\n const toggleQuerySearchFilterValue = (filterValue) => {\n let newQuerySearchFilter = [];\n const currentQuerySearchFilter = [];\n\n for (let index = 0; index < querySearchFilter.length; index++) {\n currentQuerySearchFilter.push(querySearchFilter[index]);\n }\n\n if (currentQuerySearchFilter.includes(filterValue)) {\n newQuerySearchFilter = currentQuerySearchFilter.filter(\n (element) => element !== filterValue\n );\n } else {\n currentQuerySearchFilter.push(filterValue);\n newQuerySearchFilter = currentQuerySearchFilter;\n }\n\n setQuerySearchFilter(newQuerySearchFilter);\n };\n\n const getProjectRowsChunkForCurrentPage = () => {\n if (!projectData) {\n return [];\n }\n\n return projectData.slice(\n page * rowsPerPage,\n page * rowsPerPage + rowsPerPage\n );\n };\n\n const getRenderedProjectRowsChunkForCurrentPage = () => {\n const projectRows = [];\n const slicedProjectData = getProjectRowsChunkForCurrentPage();\n\n slicedProjectData.map((projectRowData) => {\n addRowToVisibleProjects(projectRowData);\n const favoritesData = favoritesResult.data\n ? favoritesResult.data.readFavorites\n : null;\n\n projectRows.push(\n \n \n Set new/unread amount:{\" \"}\n \n {!isMutating && (\n
\n \n setAmount(0)}>\n {\"None\"}\n \n setAmount(100)}\n >\n {\"Tiny\"}\n \n setAmount(200)}\n >\n {\"Small\"}\n \n setAmount(400)}\n >\n {\"Some\"}\n \n setAmount(800)}\n >\n {\"Many\"}\n \n setAmount(1600)}\n >\n {\"Huge\"}\n \n setAmount(3200)}\n >\n {\"Bulk\"}\n \n setAmount(6400)}\n >\n {\"Collosal\"}\n \n setAmount(12800)}\n >\n {\"Gigantic\"}\n \n setAmount(25600)}\n >\n {\"Titanic\"}\n \n setAmount(51200)}\n >\n {\"Galactic\"}\n \n setAmount(999999)}\n >\n {\"All\"}\n \n
\n )}\n {isMutating && (\n \n
\n )}\n \n \n Re-Index IDX1 to IDX2 for all users of this company:{\" \"}\n \n {!isMutating && (\n
\n \n handleReindex()}>\n {\"Start Re-Index\"}\n \n (ATTENTION: This may take some time, be patient!)\n
\n )}\n {isMutating && (\n \n
\n )}\n \n \n Masquerade as another user:{\" \"}\n \n
\n \n setMasqueradeId(e.target.value)}\n placeholder=\"UserID\"\n />\n \n handleMasquerade()}>\n {\"Masquerade now\"}\n \n
\n \n \n
\n
\n {(!User.isMasquerade() && (isNotLive || User.isAppAdmin())) && debugToolsEnabled && \n {user.isPro() && (\n \n \n {t(\"projects.label.expected.date\")}\n \n {row.Approval_date}\n \n )}\n {!user.isPro() && (\n \n \n {t(\"projects.label.expected.date\")}\n \n
\n {user.isPro() && (\n \n \n {t(\"projects.label.construction.sum\")}\n \n \n {row.Construction_sum}\n \n \n )}\n {!user.isPro() && (\n \n \n {t(\"projects.label.construction.sum\")}\n \n
\n {t(\"projects.label.fastest.route\")}\n
\n{t(\"projects.label.owner\")}
\n\n {GetSafe(() => row.Building_owner.Name, \"\")}\n
\n {GetSafe(() => row.Building_owner.Address.Street, \"\")}{\" \"}\n {GetSafe(() => row.Building_owner.Address.Number, \"\")}\n
\n {GetSafe(() => row.Building_owner.Address.Zip, \"\")}{\" \"}\n {GetSafe(() => row.Building_owner.Address.City, \"\")}\n
*/}\n {/*
\n {t(\"projects.label.architect\")}\n
\n\n {GetSafe(() => row.Project_management.Name, \"\")}\n
\n {GetSafe(() => row.Project_management.Address.Street, \"\")}{\" \"}\n {GetSafe(() => row.Project_management.Address.Number, \"\")}\n
\n {GetSafe(() => row.Project_management.Address.Zip, \"\")}{\" \"}\n {GetSafe(() => row.Project_management.Address.City, \"\")}\n
\n {isProcessable(\n GetSafe(() => row.Project_management.Phone, \"\")\n ) && (\n
\n {isProcessable(\n GetSafe(() => row.Project_management.Email, \"\")\n ) && (\n
\n \n {t(\"favorite.submission.id.label\")}\n \n
\n {row.Notice_number}\n
\n \n
\n
\n \n {GetSafe(() => row.Construction_site.Address.Street, '')}{' '}\n {GetSafe(() => row.Construction_site.Address.Number, '')}\n
- \n {zefixCompanies.length > 0 &&\n zefixCompanies.map(company => (\n
\n \n {renderList()}\n {resultSuggest.fetching && (\n \n
\n )}\n \n )\n}\n\nexport default ZefixCompanyAutocompleteField\n","import React, { useContext, useState } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Button from \"@material-ui/core/Button\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport { useTranslation } from \"react-i18next\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport { ACL_COMPONENTS, CANTON_LIST } from \"../../config\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport { DialogTitle } from \"@material-ui/core\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Typography from \"@material-ui/core/Typography\";\nimport TextField from \"@material-ui/core/TextField\";\nimport { useMutation } from \"urql\";\nimport { MESSAGE_TYPES } from \"../PopupMessages\";\nimport withAccessControl from \"../HOC/AccessControl\";\nimport GooglePlacesAPIHelper from \"../../lib/GooglePlacesAPIHelper\";\nimport { navigate } from \"hookrouter\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\n\nconst useStyles = makeStyles((theme) => ({\n changeLocation: {\n color: theme.palette.primary.main,\n width: 200,\n height: \"100%\",\n fontWeight: \"bold\",\n },\n dialogTitleCloseIcon: {\n marginLeft: \"auto\",\n padding: 0,\n paddingRight: 23,\n paddingTop: 10,\n },\n root: {\n width: \"100%\",\n maxWidth: 444,\n },\n rootNotice: {\n position: \"relative\",\n marginTop: 20,\n marginBottom: 20,\n padding: \"35px 25px\",\n background: theme.palette.info.main,\n color: theme.palette.text.primary,\n \"&::before\": {\n position: \"absolute\",\n top: \"-7px\",\n left: \"50%\",\n width: 14,\n height: 14,\n background: theme.palette.info.main,\n transform: \"translate(-50%, 0) rotate(45deg)\",\n content: '\"\"',\n },\n [theme.breakpoints.down(\"sm\")]: {\n padding: 20,\n },\n },\n addButtonText: {\n paddingTop: 3,\n paddingRight: 15,\n paddingBottom: 3,\n paddingLeft: 15,\n fontWeight: \"bold\",\n },\n icon: {\n color: theme.palette.primary.main,\n fontSize: 24,\n [theme.breakpoints.up(\"sm\")]: {\n fontSize: 30,\n },\n },\n listItem: {\n padding: 0,\n },\n dialogContent: {\n minWidth: \"100%\",\n padding: \"0 20px\",\n [theme.breakpoints.up(\"sm\")]: {\n paddingTop: 0,\n paddingRight: 32,\n paddingBottom: 24,\n paddingLeft: 32,\n },\n },\n dialogActions: {\n justifyContent: \"flex-start\",\n padding: \"0 20px\",\n [theme.breakpoints.up(\"sm\")]: {\n paddingTop: 0,\n paddingRight: 32,\n paddingBottom: 24,\n paddingLeft: 32,\n },\n },\n location: {\n paddingRight: 50,\n color: \"#525252\",\n },\n textField: {\n width: \"100%\",\n marginRight: 0,\n marginLeft: 0,\n },\n menu: {\n width: 200,\n },\n}));\n\n/**\n * updateCompanyMutation\n *\n * @type {string}\n */\nconst updateCompanyMutation = `\n mutation UpdateCompany(\n $hashId: String!,\n $canton: String,\n $latitude: Float,\n $longitude: Float\n ) {\n updateCompany(\n HashID: $hashId, \n Canton: $canton,\n Latitude: $latitude,\n Longitude: $longitude\n ) {\n Name\n Street\n Zip\n City\n Canton\n Phone\n Fax\n Website\n Email\n BusinessActivityID\n BusinessSpecialities{\n edges{\n node{\n ID\n Title\n }\n }\n }\n }\n }\n`;\n\n/**\n * ProjectsFreeLocationsHandler\n *\n * @returns {*}\n * @constructor\n */\nconst ProjectsFreeLocationsHandler = () => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {\n user,\n setUser,\n canton,\n setCanton,\n token,\n setMessage,\n setProjectData,\n unsetUser,\n unsetToken,\n } = useContext(GlobalContext);\n const [openDialog, setOpenDialog] = useState(false);\n const [{ fetching }, executeMutation] = useMutation(updateCompanyMutation);\n\n /**\n * handleClickManageLocations\n */\n const handleClickManageLocations = () => {\n setOpenDialog(true);\n };\n\n /**\n * handleCloseManageLocations\n */\n const handleCloseManageLocations = () => {\n setOpenDialog(false);\n };\n\n /**\n * handleChangeCanton\n */\n const handleChangeCanton = (event) => {\n GooglePlacesAPIHelper.getCoordsByAddress(\n CANTON_LIST[event.target.value]\n ).then((result) => {\n const lat = result.results[0].geometry.location.lat;\n const lon = result.results[0].geometry.location.lng;\n\n executeMutation({\n hashId: user.getData().company.hashID,\n canton: CANTON_LIST[event.target.value],\n latitude: lat,\n longitude: lon,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n ExternalErrorLogger.log({\n text: \"Error change canton on ProjectsFreeLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error change canton on ProjectsFreeLocationsHandler\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setCanton(event.target.value);\n user.setData({\n company: {\n canton: CANTON_LIST[event.target.value],\n latitude: lat,\n longitude: lon,\n },\n });\n setUser(user);\n if (!fetching) {\n setMessage(\n MESSAGE_TYPES.SUCCESS,\n t(\"general.label.save.success\")\n );\n handleCloseManageLocations();\n setProjectData([]);\n }\n }\n }\n });\n });\n };\n\n /**\n * menuItems\n *\n * @returns {[]}\n */\n const menuItems = () => {\n const menuItemArray = [];\n Object.keys(CANTON_LIST).forEach((index) => {\n menuItemArray.push(\n \n );\n });\n return menuItemArray;\n };\n\n /**\n * LocationDataEditDialog\n */\n const locationDataEditDialog = () => (\n <>\n \n \n
\n
\n - {historyListItems}
\n {t('company.label.email.application')}\n
\n{t('company.label.email.application.intro')}
\n\n {t(\"company.label.print.application\")}\n
\n{t(\"company.label.print.application.intro\")}
\n\n {user.isPro() && (\n \n \n {t(\"projects.label.expected.date\")}\n \n \n {props.favorite.Approval_date}\n \n \n )}\n {!user.isPro() && (\n \n \n {t(\"projects.label.expected.date\")}\n \n
\n {user.isPro() && (\n \n \n {t(\"projects.label.construction.sum\")}\n \n \n {props.favorite.Construction_sum}\n \n \n )}\n {!user.isPro() && (\n \n \n {t(\"projects.label.construction.sum\")}\n \n
\n {t(\"favorites.label.fastest.route\")}\n
\n{t(\"projects.label.owner\")}
\n\n {GetSafe(() => props.favorite.Building_owner.Name, \"\")}\n
\n {GetSafe(\n () => props.favorite.Building_owner.Address.Street,\n \"\"\n )}{\" \"}\n {GetSafe(() => props.favorite.Building_owner.Address.Number, \"\")}\n
\n {GetSafe(() => props.favorite.Building_owner.Address.Zip, \"\")}{\" \"}\n {GetSafe(() => props.favorite.Building_owner.Address.City, \"\")}\n
\n \n {t(\"favorite.submission.id.label\")}\n \n
\n {props.favorite.Notice_number}\n
{t(\"projects.label.architect\")}
\n {ProjectManagementAddressDataValidator.isValid(\n props.favorite.Project_management.Address\n ) && (\n\n {GetSafe(() => props.favorite.Project_management.Name, \"\")}\n
\n {GetSafe(\n () => props.favorite.Project_management.Address.Street,\n \"\"\n )}{\" \"}\n {GetSafe(\n () => props.favorite.Project_management.Address.Number,\n \"\"\n )}\n
\n {GetSafe(\n () => props.favorite.Project_management.Address.Zip,\n \"\"\n )}{\" \"}\n {GetSafe(\n () => props.favorite.Project_management.Address.City,\n \"\"\n )}\n
\n {isProcessable(\n GetSafe(() => props.favorite.Project_management.Phone, \"\")\n ) && (\n
\n {isProcessable(\n GetSafe(() => props.favorite.Project_management.Email, \"\")\n ) && (\n
\n {t(\"company.label.microsite.explanation.header\")}\n
\n{t(\"company.label.microsite.explanation\")}
\n\n {showDoubleOptInContent\n ? t(\"company.label.microsite.are.you.sure\")\n : t(\"company.label.microsite\")}\n
\n\n {showDoubleOptInContent ? (\n t(\"company.label.microsite.double.opt.in.intro\")\n ) : (\n
\n \n \n Debugging-Tools (Favorites-Page){\" \"}\n \n \n
\n ) : null;\n};\n\nexport default withAccessControl(DebugFavorites, ACL_COMPONENTS.FAVORITES);\n","import React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport { useQuery } from \"urql\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableFooter from \"@material-ui/core/TableFooter\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Paper from \"@material-ui/core/Paper\";\nimport LinearProgress from \"@material-ui/core/LinearProgress\";\nimport TablePaginationActions from \"../components/Table/TablePaginationActions\";\nimport FavoritesTableRow from \"../components/Favorites/FavoritesTableRow\";\nimport GlobalContext from \"../lib/GlobalContext\";\nimport { useTranslation } from \"react-i18next\";\nimport withAccessControl from \"../components/HOC/AccessControl\";\nimport { MESSAGE_TYPES } from \"../components/PopupMessages\";\nimport { navigate } from \"hookrouter\";\nimport { ACL_COMPONENTS, isNotLive } from \"../config\";\nimport { Chip, Grid, Typography } from \"@material-ui/core\";\nimport DoneIcon from \"@material-ui/icons/Done\";\nimport clsx from \"clsx\";\nimport Link from \"@material-ui/core/Link\";\nimport CloudDownloadIcon from \"@material-ui/icons/CloudDownload\";\nimport CompanyDirectoryNameDialog from \"../components/Company/CompanyDirectoryNameDialog\";\nimport DebugFavorites from \"../components/Debug/DebugFavorites\";\nimport User from \"../lib/User\";\n\n/**\n * useStyles\n */\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n width: \"100%\",\n maxWidth: 1280,\n },\n table: {\n minWidth: \"100%\",\n },\n tableWrapper: {\n overflowX: \"auto\",\n [theme.breakpoints.up(\"lg\")]: {\n overflowX: \"hidden\",\n },\n },\n tableColumnsHead: {\n height: 96,\n },\n tableCellColumnsHeader: {\n padding: \"40px 14px 16px 14px\",\n fontSize: theme.typography.fontSize,\n color: \"#999999\",\n fontWeight: \"bold\",\n \"&:first-of-type\": {\n paddingLeft: 24,\n },\n \"@media (max-width:640px)\": {\n \"&:first-of-type\": {\n paddingLeft: 14,\n },\n },\n },\n tableCellColumnsBody: {\n padding: \"20px 14px\",\n },\n tableCell: {\n height: 64,\n },\n tableRows: {\n paddingLeft: 36,\n },\n locationHead: {\n fontWeight: \"bold\",\n },\n icon: {\n padding: 8,\n },\n listContent: {\n paddingLeft: 36,\n },\n paginationInput: {\n height: 28,\n width: 25,\n },\n paginationSelectIcon: {\n color: theme.palette.primary.main,\n },\n searchFilterGroup: {\n justifyContent: \"flex-end\",\n [theme.breakpoints.down(\"xs\")]: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n width: \"auto\",\n maxWidth: 200,\n },\n },\n searchFilterItem: {\n [theme.breakpoints.down(\"xs\")]: {\n display: \"flex\",\n flexDirection: \"column\",\n flexWrap: \"wrap\",\n },\n \"@media (max-width:810px)\": {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n },\n searchFilterButtonGroup: {\n display: \"inline-block\",\n marginRight: theme.spacing(1),\n marginLeft: theme.spacing(3),\n [theme.breakpoints.down(\"xs\")]: {\n marginLeft: theme.spacing(1),\n },\n },\n searchFilterButton: {\n marginRight: 4,\n marginLeft: 4,\n fontSize: 14,\n fontWeight: \"normal\",\n [theme.breakpoints.down(\"xs\")]: {\n marginTop: 4,\n marginBottom: 4,\n },\n \"&.MuiChip-colorPrimary\": {\n color: \"#fff\",\n },\n \"&.active\": {\n background: theme.palette.primary.main,\n color: \"#fff\",\n },\n },\n noBottomBorder: {\n borderBottom: 0,\n paddingBottom: 0,\n },\n export: {\n cursor: \"pointer\",\n },\n exportHolder: {\n display: \"flex\",\n alignItems: \"center\",\n paddingLeft: theme.spacing(1),\n },\n exportLink: {\n fontWeight: \"bold\",\n marginLeft: 10,\n fontSize: 14,\n textTransform: \"uppercase\",\n },\n}));\n\nconst queryFavorites = `\n query ReadFavorites (\n $userHashID: ID,\n $filterFor: [String]\n ) {\n readFavorites(\n ID: $userHashID,\n sortBy: [{field: Date, direction: DESC}],\n ConstructionTypeContains: $filterFor\n ) {\n HashID\n ProjectHashID\n Type\n Removed\n State\n Canton\n Calculated_distance\n Content\n Final_title\n Date\n Applied\n Type_of_construction\n Type_of_building\n Notice_number\n URL,\n Approval_date\n Construction_sum\n Construction_site {\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Building_owner {\n Name\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n Project_management {\n Name\n Phone\n Email\n Website\n Email_other\n Address {\n Street\n Number\n Zip\n City\n Geo {\n lat\n lon\n }\n }\n }\n StateHistory {\n edges {\n node {\n Created\n State\n }\n }\n }\n Notes {\n edges {\n node {\n HashID\n Text\n Created\n Removed\n }\n }\n }\n }\n }\n`;\n\nconst queryFavoritesCsvLink = `\n {\n readFavoritesCsvLink {\n Title\n AbsoluteLink\n Position\n }\n }\n`;\n\n/**\n * Favorites\n *\n * @returns {*}\n * @constructor\n */\nconst Favorites = () => {\n const classes = useStyles();\n const {\n favoriteData,\n setFavoriteData,\n token,\n setToken,\n user,\n setMessage,\n unsetUser,\n unsetToken,\n debugToolsEnabled,\n } = useContext(GlobalContext);\n \n const { t } = useTranslation();\n const [page, setPage] = useState(0);\n const [rowsPerPage, setRowsPerPage] = useState(10);\n const [querySearchFilter, setQuerySearchFilter] = useState([]);\n const [queryVariables, setQueryVariables] = useState({\n userHashID: user.getData().hashID,\n filterFor: [],\n });\n const [verifyDialogOpen, setVerifyDialogOpen] = useState(true);\n const [showNoResultMessage, setShowNoResultMessage] = useState(false);\n \n const columns = [\n { id: \"actions\", label: t(\"general.label.actions\"), minWidth: 200 },\n { id: \"projects\", label: t(\"general.label.projects\"), minWidth: 100 },\n {\n id: \"city\",\n label: t(\"general.label.address\"),\n minWidth: 120,\n align: \"left\",\n },\n !user.hasZipSearchAreas()\n ? {\n id: \"route\",\n label: t(\"general.label.distance\"),\n minWidth: 120,\n align: \"left\",\n }\n : {},\n {\n id: \"date\",\n label: t(\"general.label.date\"),\n minWidth: 120,\n align: \"left\",\n },\n ];\n\n // GraphQL query for favorites, gets triggered by calling \"executeFavoritesQuery()\"\n const [result, executeFavoritesQuery] = useQuery({\n query: queryFavorites,\n variables: queryVariables,\n requestPolicy: \"network-only\",\n pause: true,\n });\n\n // GraphQL query for favorites csv link, gets triggered by calling \"executeFavoritesCsvLinkQuery()\"\n const [resultCsvLink, executeFavoritesCsvLinkQuery] = useQuery({\n query: queryFavoritesCsvLink,\n variables: {},\n requestPolicy: \"network-only\",\n pause: true,\n });\n\n const prevQuerySearchFilter = useRef(querySearchFilter);\n\n /* eslint-disable */\n useEffect(() => {\n if (prevQuerySearchFilter.current !== querySearchFilter) {\n setQueryVariables({ ...queryVariables, filterFor: querySearchFilter });\n prevQuerySearchFilter.current = querySearchFilter;\n }\n }, [querySearchFilter]);\n\n /**\n * useEffect\n */\n useEffect(() => {\n executeFavoritesQuery();\n }, [queryVariables, user, token, setToken]);\n /* eslint-enable */\n\n useEffect(() => {\n handleFavoritesResult()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [result])\n\n useEffect(() => {\n handleCSVResult()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [resultCsvLink])\n\n const handleFavoritesResult = () => {\n // GraphQL trigger and result handling\n if (!result.fetching) {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else if (\n result.error.message.indexOf(\"Your query did not return any results\")\n ) {\n if (!showNoResultMessage) {\n setShowNoResultMessage(true);\n }\n setFavoriteData([]);\n } else {\n console.error(\"Something went very wrong...\");\n }\n } else {\n if (\n typeof result.data !== \"undefined\" &&\n typeof result.data.readFavorites !== \"undefined\"\n ) {\n // Add the favorites to the global context\n setFavoriteData(result.data.readFavorites);\n setShowNoResultMessage(false);\n }\n }\n } \n }\n\n const handleCSVResult = () => {\n // GraphQL trigger and result handling\n if (!resultCsvLink.fetching) {\n if (resultCsvLink.error) {\n // Check if the user need to be logged out\n if (resultCsvLink.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n }\n } else {\n if (\n typeof resultCsvLink.data !== \"undefined\" &&\n typeof resultCsvLink.data.readFavoritesCsvLink !== \"undefined\"\n ) {\n // Initiate Download\n window.location.href =\n resultCsvLink.data.readFavoritesCsvLink.AbsoluteLink;\n }\n }\n }\n }\n\n /**\n * handleChangePage\n *\n * @param event\n * @param newPage\n */\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n /**\n * handleChangeRowsPerPage\n *\n * @param event\n */\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n /**\n * toggleQuerySearchFilterValue\n *\n * @param {*} filterValue\n */\n const toggleQuerySearchFilterValue = (filterValue) => {\n let newQuerySearchFilter = [];\n const currentQuerySearchFilter = [];\n\n for (let index = 0; index < querySearchFilter.length; index++) {\n currentQuerySearchFilter.push(querySearchFilter[index]);\n }\n\n if (currentQuerySearchFilter.includes(filterValue)) {\n newQuerySearchFilter = currentQuerySearchFilter.filter(\n (element) => element !== filterValue\n );\n } else {\n currentQuerySearchFilter.push(filterValue);\n newQuerySearchFilter = currentQuerySearchFilter;\n }\n\n setQuerySearchFilter(newQuerySearchFilter);\n };\n\n /**\n * handleFavoritesDownload\n */\n const handleFavoritesDownload = () => {\n executeFavoritesCsvLinkQuery();\n };\n\n /**\n * return\n */\n return (\n <>\n \n \n
\n
\n {(!User.isMasquerade() && (isNotLive || User.isAppAdmin())) && debugToolsEnabled && NOT FOUND
\n}\n\nexport default NotFoundPage\n","export const externalLinkTitles = {\n IMPRINT: 'Impressum',\n DATAPROTECTION: 'Datenschutz',\n PRODUCT_OVERVIEW: 'Produktübersicht',\n FUNCTIONS: 'Funktionen',\n PRICES: 'Preise',\n BLOG: 'Blog',\n SUPPORT: 'Support',\n ABOUT: 'Über uns',\n CONDITIONS: 'AGB',\n REGISTER: 'Registrieren',\n TERMS: 'Nutzungsbedingungen',\n REFERRALPROGRAM: 'Empfehlungsprogramm'\n}\n\n/**\n * getAbsoluteLink\n *\n * When title is omitted, the first link within the category will be taken,\n * this is useful if only a single link within the category is expected.\n *\n * @param cmsLinks\n * @param category\n * @param title\n * @returns {string}\n */\nexport const getAbsoluteLink = (cmsLinks, category, title = null) => {\n if (cmsLinks !== undefined && cmsLinks !== null) {\n let match = ''\n for (let j = 0; j < cmsLinks.length; j++) {\n if (\n typeof cmsLinks[j].Title !== 'undefined' &&\n cmsLinks[j].Title === category\n ) {\n if (title === null) {\n if (!cmsLinks[j].Links) {\n match = ''\n } else {\n match = cmsLinks[j].Links[0].AbsoluteLink\n }\n break\n } else {\n if (!cmsLinks[j].Links) {\n match = ''\n } else {\n for (\n let i = 0, length = cmsLinks[j].Links.length;\n i < length;\n i++\n ) {\n if (cmsLinks[j].Links[i].Title === title) {\n match = cmsLinks[j].Links[i].AbsoluteLink\n break\n }\n }\n }\n }\n }\n }\n return match\n } else {\n return ''\n }\n}\n","import React, { useContext, useEffect, useState } from \"react\";\nimport clsx from \"clsx\";\nimport TextField from \"@material-ui/core/TextField\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Visibility from \"@material-ui/icons/Visibility\";\nimport VisibilityOff from \"@material-ui/icons/VisibilityOff\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport Button from \"@material-ui/core/Button\";\nimport Grid from \"@material-ui/core/Grid\";\nimport { makeStyles } from \"@material-ui/core\";\nimport { useTranslation } from \"react-i18next\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport { navigate } from \"hookrouter\";\nimport Joi from \"@hapi/joi\";\nimport FormValueErrorsBuilder from \"../../lib/FormValueErrorsBuilder\";\nimport GetSafe from \"../../lib/GetSafe\";\nimport CantonShortener from \"../../lib/CantonShortener\";\nimport { useMutation, useQuery } from \"urql\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport { green } from \"@material-ui/core/colors\";\nimport { MESSAGE_TYPES } from \"../PopupMessages\";\nimport { ACL_COMPONENTS, CANTON_LIST, STRIPE_PLAN_IDS } from \"../../config\";\nimport withAccessControl, { parsePermissions } from \"../HOC/AccessControl\";\nimport GooglePlacesAPIHelper from \"../../lib/GooglePlacesAPIHelper\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport Link from \"@material-ui/core/Link\";\nimport { externalLinkTitles, getAbsoluteLink } from \"../../lib/CmsLinkHandler\";\nimport FormHelperText from \"@material-ui/core/FormHelperText\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\nimport FormatHelper from \"../../lib/FormatHelper\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n startButton: {\n width: \"100%\",\n maxWidth: 330,\n color: \"#fff\",\n fontWeight: \"bold\",\n },\n textField: {\n width: \"100%\",\n },\n textFieldSmall: {\n width: 160,\n \"&:first-of-type\": {\n marginRight: 5,\n },\n \"&:last-of-type\": {\n marginLeft: 5,\n },\n [theme.breakpoints.down(\"sm\")]: {\n width: \"100%\",\n \"&:first-of-type\": {\n marginRight: 0,\n marginBottom: 20,\n },\n \"&:last-of-type\": {\n marginLeft: 0,\n },\n },\n },\n title: {\n margin: 0,\n fontSize: 24,\n lineHeight: \"30px\",\n textAlign: \"center\",\n [theme.breakpoints.down(\"sm\")]: {\n textAlign: \"left\",\n },\n },\n item: {\n width: \"100%\",\n maxWidth: 330,\n paddingTop: 20,\n paddingBottom: 20,\n },\n itemHeader: {\n maxWidth: 400,\n paddingTop: 44,\n paddingBottom: 24,\n [theme.breakpoints.down(\"sm\")]: {\n paddingTop: 20,\n paddingBottom: 20,\n },\n },\n itemPassword: {\n paddingTop: 0,\n [theme.breakpoints.down(\"sm\")]: {\n paddingBottom: 0,\n },\n },\n itemCanton: {\n [theme.breakpoints.down(\"sm\")]: {\n paddingTop: 0,\n paddingBottom: 0,\n },\n },\n buttonProgress: {\n color: green[500],\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n marginTop: -12,\n marginLeft: -12,\n },\n}));\n\n/**\n * updateMyselfMutation\n *\n * @type {string}\n */\nconst updateMyselfMutation = `\n mutation UpdateMyself(\n $email: String!,\n $password: String,\n $firstName: String, \n $lastName: String\n ) {\n updateMyself(\n Email: $email,\n Password: $password,\n Firstname: $firstName,\n Surname: $lastName\n RegistrationHash: \"\"\n ) {\n Email\n Firstname\n Surname\n }\n }\n`;\n\n/**\n * updateCompanyMutation\n *\n * @type {string}\n */\nconst updateCompanyMutation = `\n mutation UpdateCompany(\n $hashId: String!,\n $canton: String,\n $latitude: Float,\n $longitude: Float,\n $futurePlanID: String\n ) {\n updateCompany(\n HashID: $hashId, \n Canton: $canton,\n Latitude: $latitude,\n Longitude: $longitude,\n FuturePlanID: $futurePlanID\n ) {\n Name\n FeatureSet\n Street\n Zip\n City\n Canton\n Phone\n Mobile\n Fax\n Website\n Email\n BusinessActivityID\n BusinessSpecialities{\n edges{\n node{\n ID\n Title\n }\n }\n }\n }\n }\n`;\n\nconst queryMyself = `\n{\n readMyself {\n ID\n HashID\n Locale\n Email\n Firstname\n Surname\n Salutation\n StripePublicKey\n CreditCard {\n id\n name\n last4\n expired\n }\n Locations {\n edges {\n node {\n HashID\n Title\n Street\n Zip\n City\n Longitude\n Latitude\n Radius\n Version\n Sort\n Removed\n }\n }\n }\n Company {\n ID\n AdminUserID\n HashID\n FeatureSet\n ZipSearchAreas\n ZipSearchStatistic\n ApplicationFollowUpTimeInDays\n StripeIsTrialing\n StripeTrialingDays\n StripePlanID\n StripeValidThrough\n StripeProductID\n StripeCancelAt\n Name\n URLSegment\n ContactPerson\n Street\n Zip\n City\n Canton\n Distance\n Latitude\n Longitude\n Phone\n Mobile\n Fax\n Website\n Email\n NumberOfEmployees\n LegalForm\n FoundingYear\n MasterBusiness\n TrainingCompany\n BusinessActivityID\n BusinessSpecialities{\n edges {\n node {\n ID\n Title\n NogaCode\n SCCodeCompetence\n BoostScore\n }\n }\n }\n OtherBusinessActivities {\n edges {\n node {\n ID\n }\n }\n }\n OtherBusinessSpecialities {\n edges {\n node {\n ID\n }\n }\n }\n User{\n edges {\n node {\n HashID\n Email\n Firstname\n Surname\n Removed\n SearchAreas {\n HashID\n Title\n ZipList\n }\n }\n }\n }\n Memberships {\n edges {\n node {\n ID\n Title\n LogoUrl\n }\n }\n }\n AllMemberships {\n edges {\n node {\n ID\n Title\n LogoUrl\n IsBadge\n }\n }\n }\n MicrositeCertified\n MicrositeCertifiedUntil\n AdditionalMemberships\n MicrositeColorScheme\n MicrositeDescription\n MicrositeEmailApplicationText\n MicrositeImages {\n edges {\n node {\n Src\n Title\n Alt\n }\n }\n }\n MicrositeLogo {\n Src\n Title\n Alt\n }\n MicrositeReferences {\n edges {\n node {\n Sort\n Title\n Content\n Location\n Year\n Month\n ButtonLink\n ButtonTitle\n MicrositeReferencesImages {\n edges { \n node {\n Src\n Title\n Alt\n }\n }\n }\n }\n }\n }\n ApiAccess {\n edges {\n node {\n RequestUrl\n }\n } \n } \n }\n DossierTemplates {\n edges {\n node {\n HashID\n TemplateName\n }\n }\n }\n Permissions {\n Name\n RequireAdminStatus\n }\n FulltextSearchRequests {\n ID\n Title\n }\n SearchAreas {\n HashID\n Title\n ZipList\n }\n }\n readProduct {\n plans {\n id\n trial_possible\n }\n }\n}\n`;\n\n/**\n * OnboardingFreeUserWelcomeDialog\n *\n * @returns {*}\n * @constructor\n */\nconst OnboardingFreeUserWelcomeDialog = () => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {\n setOpenWelcomeDialog,\n user,\n setUser,\n token,\n setMessage,\n unsetUser,\n unsetToken,\n setUpgradeToPremiumOpen,\n cmsLinks,\n } = useContext(GlobalContext);\n const [formValues, setFormValues] = useState({\n password: \"\",\n showPassword: false,\n firstName: \"\",\n lastName: \"\",\n canton: CantonShortener(user.getData().company.canton),\n termsPolicy: false,\n });\n const [formValueErrors, setFormValueErrors] = useState({\n password: { hasError: false, message: \"\" },\n firstName: { hasError: false, message: \"\" },\n lastName: { hasError: false, message: \"\" },\n termsPolicy: { hasError: false, message: \"\" },\n });\n const [disableButton, setDisableButton] = useState(false);\n\n const [{ fetching }, executeMutation] = useMutation(updateMyselfMutation);\n const [{ fetchingUpdateCompany }, executeUpdateCompanyMutation] = useMutation(\n updateCompanyMutation\n );\n\n /**\n * GraphQL query for user-data (myself), gets triggered by calling \"executeMyselfQuery()\"\n */\n const [resultMyself, executeMyselfQuery] = useQuery({\n query: queryMyself,\n variables: {},\n requestPolicy: \"network-only\",\n pause: true,\n });\n\n /**\n * useEffect\n */\n useEffect(() => {\n setFormValues({\n password: \"\",\n showPassword: false,\n firstName: user.getData().firstName,\n lastName: user.getData().lastName,\n canton: CantonShortener(user.getData().company.canton),\n termsPolicy: false,\n });\n }, [user]);\n\n /**\n * Joi validation schema\n */\n const schema = Joi.object({\n password: Joi.string().required(),\n firstName: Joi.string().required(),\n lastName: Joi.string().required(),\n showPassword: Joi.boolean(),\n canton: Joi.string().required(),\n termsPolicy: Joi.boolean().invalid(false),\n });\n\n /**\n * GraphQL trigger and result handling\n */\n useEffect(() => {\n if (!resultMyself.fetching && token.isSet()) {\n if (resultMyself.error) {\n // Check if the user need to be logged out\n if (resultMyself.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n // The query did not return any results!\n ExternalErrorLogger.log({\n text: \"Error fetching user data on OnboardingFreeUserWelcomeDialog\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: resultMyself.error.message,\n },\n });\n }\n } else {\n // Query not fetching right now\n if (\n typeof resultMyself.data !== \"undefined\" &&\n typeof resultMyself.data.readMyself !== \"undefined\"\n ) {\n const branchSubsData = [];\n resultMyself.data.readMyself[0].Company.BusinessSpecialities.edges.map(\n (item) => {\n branchSubsData.push(parseInt(item.node.ID));\n return branchSubsData;\n }\n );\n\n const memberships = [];\n resultMyself.data.readMyself[0].Company.Memberships.edges.map(\n (item) => {\n memberships.push(item.node);\n return memberships;\n }\n );\n\n const allMemberships = [];\n resultMyself.data.readMyself[0].Company.AllMemberships.edges.map(\n (item) => {\n allMemberships.push(item.node);\n return allMemberships;\n }\n );\n\n const locationData = [];\n resultMyself.data.readMyself[0].Locations.edges.map((item) => {\n const constructionSums = [];\n item.node.ConstructionSumList.edges.map((constructionSum) => {\n constructionSums.push(constructionSum.node.Code);\n return constructionSums;\n });\n\n item.node.ConstructionSums = constructionSums;\n\n locationData.push(item.node);\n return locationData;\n });\n\n locationData.sort((a, b) => {\n return a.Sort - b.Sort;\n });\n\n const companyUsersData = [];\n resultMyself.data.readMyself[0].Company.User.edges.map((item) => {\n if (item.node.HashID !== resultMyself.data.readMyself[0].HashID) {\n companyUsersData.push(item.node);\n }\n return companyUsersData;\n });\n\n const dossierTemplatesData = [];\n resultMyself.data.readMyself[0].DossierTemplates.edges.map((item) => {\n dossierTemplatesData.push(item.node);\n return dossierTemplatesData;\n });\n\n companyUsersData.sort((a, b) => {\n if (a.Firstname.toLowerCase() < b.Firstname.toLowerCase()) {\n return -1;\n }\n if (a.Firstname.toLowerCase() > b.Firstname.toLowerCase()) {\n return 1;\n }\n return 0;\n });\n\n let trialPossible = false;\n\n resultMyself.data.readProduct.map((productItem) => {\n productItem.plans.map((item) => {\n if (item.id.includes(STRIPE_PLAN_IDS.SMART.YEARLY)) {\n trialPossible = item.trial_possible;\n }\n return item;\n });\n return productItem;\n });\n\n // Map the user-data\n user.setData({\n id: resultMyself.data.readMyself[0].ID,\n hashID: resultMyself.data.readMyself[0].HashID,\n locale: resultMyself.data.readMyself[0].Locale || \"\",\n email: resultMyself.data.readMyself[0].Email,\n firstName: resultMyself.data.readMyself[0].Firstname,\n lastName: resultMyself.data.readMyself[0].Surname,\n salutation: resultMyself.data.readMyself[0].Salutation || \"\",\n mode:\n resultMyself.data.readMyself[0].Company.FeatureSet === null\n ? \"FREE\"\n : resultMyself.data.readMyself[0].Company.FeatureSet.toLowerCase(),\n stripePublicKey:\n resultMyself.data.readMyself[0].StripePublicKey || \"\",\n creditCard: resultMyself.data.readMyself[0].CreditCard,\n locations: locationData || [],\n company: {\n id: resultMyself.data.readMyself[0].Company.ID,\n hashID: resultMyself.data.readMyself[0].Company.HashID,\n name:\n resultMyself.data.readMyself[0].Company.Name ||\n \"TODO COMPANY-NAME\", // TODO: Remove fallback company name for production (requires consistent data)\n street: resultMyself.data.readMyself[0].Company.Street || \"\",\n zip: resultMyself.data.readMyself[0].Company.Zip || \"\",\n city: resultMyself.data.readMyself[0].Company.City || \"\",\n canton: resultMyself.data.readMyself[0].Company.Canton || \"\",\n distance: resultMyself.data.readMyself[0].Company.Distance || 50,\n latitude: resultMyself.data.readMyself[0].Company.Latitude || null,\n longitude:\n resultMyself.data.readMyself[0].Company.Longitude || null,\n phone: resultMyself.data.readMyself[0].Company.Phone || \"\",\n mobile: resultMyself.data.readMyself[0].Company.Mobile || \"\",\n fax: resultMyself.data.readMyself[0].Company.Fax || \"\",\n email: resultMyself.data.readMyself[0].Company.Email || \"\",\n website: resultMyself.data.readMyself[0].Company.Website || \"\",\n employeeCount:\n resultMyself.data.readMyself[0].Company.NumberOfEmployees || \"\",\n legalForm: resultMyself.data.readMyself[0].Company.LegalForm || \"\",\n foundingYear:\n resultMyself.data.readMyself[0].Company.FoundingYear || \"\",\n masterOperation:\n FormatHelper.boolToString(\n resultMyself.data.readMyself[0].Company.MasterBusiness\n ) || \"\",\n trainingCompany:\n FormatHelper.boolToString(\n resultMyself.data.readMyself[0].Company.TrainingCompany\n ) || \"\",\n branchCategory:\n resultMyself.data.readMyself[0].Company.BusinessActivityID || \"\",\n branchSubs: branchSubsData || [],\n users: companyUsersData || [],\n stripeIsTrialing:\n resultMyself.data.readMyself[0].Company.StripeIsTrialing,\n stripeTrialingDays:\n resultMyself.data.readMyself[0].Company.StripeTrialingDays,\n stripePlanId: resultMyself.data.readMyself[0].Company.StripePlanID,\n stripeValidThrough:\n resultMyself.data.readMyself[0].Company.StripeValidThrough,\n stripeProductId:\n resultMyself.data.readMyself[0].Company.StripeProductID,\n stripeCancelAt:\n resultMyself.data.readMyself[0].Company.StripeCancelAt,\n stripeFuturePlans:\n resultMyself.data.readMyself[0].Company.StripeFuturePlans,\n trialPossible: trialPossible,\n memberships: memberships,\n allMemberships: allMemberships,\n zipSearchAreas:\n resultMyself.data.readMyself[0].Company.ZipSearchAreas,\n zipSearchStatistic:\n resultMyself.data.readMyself[0].Company.ZipSearchStatistic,\n applicationFollowUpTimeInDays:\n resultMyself.data.readMyself[0].Company.ApplicationFollowUpTimeInDays\n },\n dossierTemplates: dossierTemplatesData,\n permissions: parsePermissions(\n resultMyself.data.readMyself[0].Permissions\n ),\n fulltextSearchRequests:\n resultMyself.data.readMyself[0].FulltextSearchRequests,\n searchAreas: resultMyself.data.readMyself[0].SearchAreas,\n });\n\n // Add the user to global context\n setUser(user);\n\n // Close upgrade process\n setUpgradeToPremiumOpen(false);\n\n // Close the welcome dialog\n setOpenWelcomeDialog(false);\n\n // Redirect\n navigate(\"/projects-free\");\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [resultMyself, token]);\n\n /**\n * handleFormSubmit\n */\n const handleFormSubmit = () => {\n setDisableButton(true);\n const { error } = schema.validate(formValues, { abortEarly: false });\n if (error) {\n const formErrors = FormValueErrorsBuilder(error, t);\n setFormValueErrors({ ...formErrors });\n setDisableButton(false);\n } else {\n executeMutation({\n email: user.getData().email,\n password: formValues.password,\n firstName: formValues.firstName,\n lastName: formValues.lastName,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error submit user data on OnboardingFreeUserWelcomeDialog\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n GooglePlacesAPIHelper.getCoordsByAddress(\n CANTON_LIST[formValues.canton]\n ).then((result) => {\n const lat = result.results[0].geometry.location.lat;\n const lon = result.results[0].geometry.location.lng;\n\n executeUpdateCompanyMutation({\n hashId: user.getData().company.hashID,\n canton: CANTON_LIST[formValues.canton],\n latitude: lat,\n longitude: lon,\n futurePlanID: \"plan_gratis\",\n }).then((updateCompanyMutationResult) => {\n if (updateCompanyMutationResult.error) {\n // Check if the user need to be logged out\n if (\n updateCompanyMutationResult.error.message.indexOf(\n \"User forced logout\"\n ) !== -1\n ) {\n setMessage(\n MESSAGE_TYPES.ERROR,\n t(\"error.user.forced.logout\")\n );\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error update company data on OnboardingFreeUserWelcomeDialog\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: updateCompanyMutationResult.error,\n },\n });\n }\n } else {\n executeMyselfQuery();\n }\n });\n });\n }\n });\n }\n };\n\n /**\n * handlePasswordChange\n *\n * @param event\n */\n const handlePasswordChange = (event) => {\n setFormValues({ ...formValues, password: event.target.value });\n };\n\n /**\n * handleFirstNameChange\n *\n * @param event\n */\n const handleFirstNameChange = (event) => {\n setFormValues({ ...formValues, firstName: event.target.value });\n };\n\n /**\n * handleLastNameChange\n *\n * @param event\n */\n const handleLastNameChange = (event) => {\n setFormValues({ ...formValues, lastName: event.target.value });\n };\n\n /**\n * handleCantonChange\n *\n * @param event\n */\n const handleCantonChange = (event) => {\n setFormValues({ ...formValues, canton: event.target.value });\n };\n\n /**\n * handleClickShowPassword\n */\n const handleClickShowPassword = () => {\n setFormValues({ ...formValues, showPassword: !formValues.showPassword });\n };\n\n /**\n * handleCheckTermsPolicyChange\n */\n const handleCheckTermsPolicyChange = () => {\n setFormValues({ ...formValues, termsPolicy: !formValues.termsPolicy });\n };\n\n /**\n * menuItems\n *\n * @returns {[]}\n */\n const menuItems = () => {\n const menuItemArray = [];\n Object.keys(CANTON_LIST).forEach((index) => {\n menuItemArray.push(\n \n );\n });\n return menuItemArray;\n };\n\n /**\n * return\n */\n return (\n <>\n {t(\"general.greeting\")}
\n{t(\"onboarding.intro\")}
\n\n {t(\"form.label.i.accept\")}{\" \"}\n \n {t(\"form.label.terms.of.use\")}\n {\" \"}\n {t(\"general.label.and\")}{\" \"}\n \n {t(\"form.label.privacyPolicy\")}.\n \n
\n }\n />\n {GetSafe(() => formValueErrors.termsPolicy.hasError, false) && (\n {t(\"general.greeting\")}
\n{t(\"onboarding.intro\")}
\n{t(\"error.fetching.user\")}
\n {t(\"error.general\")}
;\n }\n };\n\n /**\n * return\n */\n return (\n <>\n \n {t('onboarding.marketing.free.start')}\n
\n\n {!props.isRegistered && (\n{t('onboarding.intro')}
\n )}\n {props.isRegistered && (\n\n {t('onboarding.intro.activated')}\n
\n )}\n\n {t('onboarding.marketing.your.data')}\n
\n\n {t('form.label.i.accept')}{' '}\n \n {t('form.label.terms.of.use')}\n {' '}\n {t('general.label.and')}{' '}\n \n {t('form.label.privacyPolicy')}.\n \n
\n }\n />\n {GetSafe(() => formValueErrors.termsPolicy.hasError, false) && (\n - \n
- \n
{t(\"error.fetching.user\")}
\n {t(\"error.fetching.user\")}
\n {t(\"general.label.set.new.password\")}
\n{t(\"form.label.password.forgot\")}
\n\n \n \n
\n )}\n \n )\n}\n\nexport default withAccessControl(\n LayoutHeaderSearchfield,\n ACL_COMPONENTS.LAYOUT_HEADER_SEARCHFIELD\n)\n","import React, { useContext, useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport { makeStyles } from '@material-ui/core'\nimport ArrowDropDown from '@material-ui/icons/ArrowDropDown'\nimport Avatar from '@material-ui/core/Avatar'\nimport Box from '@material-ui/core/Box'\nimport Typography from '@material-ui/core/Typography'\nimport Menu from '@material-ui/core/Menu'\nimport MenuItem from '@material-ui/core/MenuItem'\nimport { useTranslation } from 'react-i18next'\nimport GlobalContext from '../../lib/GlobalContext'\nimport { navigate } from 'hookrouter'\nimport withAccessControl from '../HOC/AccessControl'\nimport { ACL_COMPONENTS } from '../../config'\n\nconst useStyles = makeStyles(theme => ({\n userNameHolder: {\n [theme.breakpoints.down('xs')]: {\n display: 'none'\n }\n },\n avatar: {\n width: 42,\n height: 42,\n marginRight: 7,\n paddingBottom: 2,\n backgroundColor: '#006A7A',\n color: '#ffffff',\n fontSize: 16\n },\n headerAccount: {\n [theme.breakpoints.down('sm')]: {\n position: 'absolute',\n top: theme.spacing(4),\n right: theme.spacing(2)\n }\n }\n}))\n\n/**\n * LayoutHeaderAccount\n *\n * @returns {*}\n * @constructor\n */\nconst LayoutHeaderAccount = () => {\n const classes = useStyles()\n const { t } = useTranslation()\n const { user, unsetUser, unsetToken } = useContext(GlobalContext)\n const [anchorEl, setAnchorEl] = useState(null)\n const initialAccountData = {\n initials: 'NN',\n firstName: t('general.label.please'),\n lastName: t('general.label.login')\n }\n const [componentAccountData, setComponentAccountData] = useState(\n initialAccountData\n )\n\n /**\n * useEffect\n */\n useEffect(() => {\n if (user.isSet()) {\n const userData = user.getData()\n setComponentAccountData({\n initials: userData.firstName.charAt(0) + userData.lastName.charAt(0),\n firstName: userData.firstName,\n lastName: userData.lastName\n })\n }\n }, [user])\n\n /**\n * handleClick\n *\n * @param event\n */\n const handleClick = event => setAnchorEl(event.currentTarget)\n\n /**\n * handleClose\n */\n const handleClose = () => setAnchorEl(null)\n\n /**\n * handleClickLogout\n */\n const handleClickLogout = () => {\n setAnchorEl(null)\n unsetUser()\n unsetToken()\n setComponentAccountData(initialAccountData)\n navigate('/')\n }\n\n /**\n * handleClickAccount\n */\n const handleClickAccount = () => {\n setAnchorEl(null)\n navigate('/account')\n }\n\n /**\n * handleClickCompany\n */\n const handleClickCompany = () => {\n setAnchorEl(null)\n navigate('/company')\n }\n\n const hoveredStyle = {\n cursor: 'pointer'\n }\n\n /**\n * return\n */\n return (\n <>\n - \n
\n MASQUERADED AS {User.getData().email} / ID: {User.getData().id} | END MASQ.\n
\n );\n};\n\nexport default LayoutHeaderDebugNotice;\n","import React, { useState, useEffect, useContext } from 'react'\nimport { makeStyles, withStyles } from '@material-ui/core'\nimport AppBar from '@material-ui/core/AppBar'\nimport Container from '@material-ui/core/Container'\nimport Grid from '@material-ui/core/Grid'\nimport Tabs from '@material-ui/core/Tabs'\nimport Tab from '@material-ui/core/Tab'\nimport { apiTld, companyDirectoryPath, DEFAULT_LOGO_PATH } from '../../config'\nimport LayoutHeaderSearchfield from './LayoutHeaderSearchfield'\nimport LayoutHeaderAccount from './LayoutHeaderAccount'\nimport LayoutHeaderAccountFree from './LayoutHeaderAccountFree'\nimport { A, navigate, usePath } from 'hookrouter'\nimport { useTranslation } from 'react-i18next'\nimport GlobalContext from '../../lib/GlobalContext'\nimport UserTypes from '../Onboarding/UserTypes'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport LayoutHeaderDebugNotice from './LayoutHeaderDebugNotice'\n\nconst NavTabs = withStyles(theme => ({\n root: {\n minHeight: 0,\n marginBottom: 0,\n paddingTop: 6,\n borderBottom: 0,\n backgroundColor: 'transparent'\n },\n indicator: {\n backgroundColor: '#fff'\n }\n}))(Tabs)\n\nconst NavTab = withStyles(theme => ({\n root: {\n paddingTop: 9,\n paddingBottom: 9,\n color: '#ffffff',\n fontWeight: 'bold'\n },\n selected: {}\n}))(Tab)\n\nconst useStyles = makeStyles(theme => ({\n header: {\n zIndex: 1200\n },\n headerWrapper: {\n width: '100%',\n maxWidth: 1320,\n paddingRight: 20,\n paddingLeft: 20,\n paddingTop: 20\n },\n logoItem: {\n [theme.breakpoints.down('sm')]: {\n flexBasis: 'auto',\n paddingTop: 10\n }\n },\n logoImage: {\n [theme.breakpoints.down('sm')]: {\n width: 180\n }\n },\n logo: {\n paddingLeft: 0\n },\n accountItem: {\n [theme.breakpoints.down('md')]: {\n display: 'flex',\n justifyContent: 'flex-end',\n flexBasis: 'auto',\n flexWrap: 'wrap',\n paddingTop: 10\n }\n },\n navList: {},\n statusBar: {\n paddingTop: 10,\n paddingBottom: 10,\n fontWeight: 'bold',\n textAlign: 'center',\n color: '#ffffff',\n backgroundColor: '#006A7A'\n },\n renewLink: {\n paddingLeft: 10,\n color: '#ffffff',\n [theme.breakpoints.down('sm')]: {\n display: 'block',\n paddingLeft: 0\n },\n textDecoration: 'underline',\n cursor: 'pointer'\n },\n menuItem: {\n fontWeight: 'bold'\n },\n micrositeLink: {\n fontWeight: 'bold',\n color: '#ffffff',\n opacity: 0.7,\n padding: '12px 33px 0'\n }\n}))\n\n/**\n * LayoutHeader\n *\n * @returns {*}\n * @constructor\n */\nconst LayoutHeader = () => {\n const classes = useStyles()\n const { t } = useTranslation()\n const [value, setValue] = useState(0)\n const [showStatusBar, setShowStatusBar] = useState(false)\n const [showTrialPossibleBar, setShowTrialPossibleBar] = useState(false)\n const path = usePath()\n const { user, upgradeToPremiumOpen, setUpgradeToPremiumOpen } = useContext(\n GlobalContext\n )\n\n /**\n * useEffect\n */\n useEffect(() => {\n // Determine if the trial-remaining-days-bar shall be shown\n if (\n user.isSet() &&\n user.getData().company.stripeIsTrialing &&\n user.getData().company.stripeTrialingDays <= 7 &&\n user.getData().company.stripeTrialingDays > 0 &&\n user.getData().mode === UserTypes.SMART\n ) {\n setShowStatusBar(true)\n } else {\n if (showStatusBar !== false) {\n setShowStatusBar(false)\n }\n }\n\n // Determine if the trial-possible-bar shall be shown\n if (\n user.isSet() &&\n user.getData().company.trialPossible &&\n user.getData().mode === UserTypes.FREE\n ) {\n setShowTrialPossibleBar(true)\n } else {\n if (showTrialPossibleBar !== false) {\n setShowTrialPossibleBar(false)\n }\n }\n\n switch (path) {\n case '/projects':\n case '/projects-free':\n setValue(0)\n break\n case '/favorites':\n setValue(1)\n break\n case '/custom_sc':\n setValue(2)\n break\n case '/dossier-management':\n setValue(3)\n break\n case '/statistics':\n setValue(4)\n break\n default:\n if (value !== false) {\n setValue(false)\n }\n }\n }, [value, path, user, showStatusBar, showTrialPossibleBar])\n\n /**\n * handleChange\n *\n * @param event\n * @param newValue\n */\n const handleChange = (event, newValue) => {\n if (user.getData().mode !== UserTypes.FREE) {\n setValue(newValue)\n\n switch (newValue) {\n case 5:\n handleToMicrositeButton()\n break\n case 4:\n navigate('/statistics')\n break\n case 3:\n navigate('/dossier-management')\n break\n case 2:\n navigate('/custom_sc')\n break\n case 1:\n navigate('/favorites')\n break\n case 0:\n default:\n navigate('/projects')\n break\n }\n } else {\n if (newValue === 0) {\n navigate('/projects-free')\n } else {\n setUpgradeToPremiumOpen(!upgradeToPremiumOpen)\n }\n }\n }\n\n /**\n * handleUpgradeToPremium\n */\n const handleUpgradeToPremium = () => {\n setUpgradeToPremiumOpen(!upgradeToPremiumOpen)\n }\n\n /**\n * handleToMicrositeButton\n */\n const handleToMicrositeButton = () => {\n if (user.getData().company.urlSegment) {\n window.open(\n apiTld + companyDirectoryPath + user.getData().company.urlSegment,\n '_blank'\n )\n } else {\n navigate('/company/info')\n }\n }\n /**\n * return\n */\n return (\n <>\n {showStatusBar && (\n \n {t('account.label.trial.expires', {\n count: user.getData().company.stripeTrialingDays\n })}{' '}\n \n {t('account.label.renew.now')}\n \n
\n )}\n {showTrialPossibleBar && (\n \n {t('account.label.trial.possible')}{' '}\n \n {t('account.label.start.trial')}\n \n
\n )}\n \n
\n )\n}\n\nexport default Layout\n","import React, { useContext, useState, useEffect } from 'react'\nimport Grid from '@material-ui/core/Grid'\nimport { makeStyles, TextField, Typography } from '@material-ui/core'\nimport Button from '@material-ui/core/Button'\nimport { useTranslation } from 'react-i18next'\nimport GlobalContext from '../../lib/GlobalContext'\nimport Link from '@material-ui/core/Link'\nimport MenuItem from '@material-ui/core/MenuItem'\nimport Joi from '@hapi/joi'\nimport FormValueErrorsBuilder from '../../lib/FormValueErrorsBuilder'\nimport GetSafe from '../../lib/GetSafe'\nimport { useMutation } from 'urql'\nimport CircularProgress from '@material-ui/core/CircularProgress'\nimport { green } from '@material-ui/core/colors'\nimport InputAdornment from '@material-ui/core/InputAdornment'\nimport IconButton from '@material-ui/core/IconButton'\nimport VisibilityOff from '@material-ui/icons/VisibilityOff'\nimport Visibility from '@material-ui/icons/Visibility'\nimport { MESSAGE_TYPES } from '../PopupMessages'\nimport withAccessControl from '../HOC/AccessControl'\nimport { navigate } from 'hookrouter'\nimport { ACL_COMPONENTS } from '../../config'\nimport ExternalErrorLogger from '@ennit/react-external-errorlogger'\n\nconst useStyles = makeStyles(theme => ({\n gridContainer: {\n width: '100%',\n maxWidth: 1280,\n margin: 0,\n padding: '16px 24px'\n },\n gridItem: {\n width: '50%',\n padding: '8px 0',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n }\n },\n button: {\n color: '#ffffff',\n width: '100%',\n marginBottom: '40px'\n },\n updatePasswordLink: {\n fontWeight: 'bold',\n fontSize: '14px',\n color: theme.palette.primary.main,\n paddingLeft: '10px',\n cursor: 'pointer'\n },\n buttonProgress: {\n color: green[500],\n position: 'absolute',\n top: '50%',\n left: '50%',\n marginTop: -12,\n marginLeft: -12\n },\n textField: {\n width: '100%'\n },\n languageToggle: {\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'center',\n paddingTop: 10,\n paddingBottom: 24\n },\n languageToggleBox: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n color: '#fff'\n },\n languageToggleBoxItem: {\n paddingLeft: 6\n },\n languageStatus: {\n display: 'none',\n appearance: 'none'\n }\n}))\n\nconst initialFormValueErrorsState = {\n firstName: { hasError: false, message: '' },\n lastName: { hasError: false, message: '' },\n email: { hasError: false, message: '' },\n currentPassword: { hasError: false, message: '' },\n password: { hasError: false, message: '' },\n passwordRepeat: { hasError: false, message: '' }\n}\n\nconst updateMyselfMutation = `\n mutation UpdateMyself(\n $locale: String,\n $salutation: String, \n $firstName: String, \n $lastName: String, \n $email: String!\n ) {\n updateMyself(\n Locale: $locale,\n Salutation: $salutation,\n Firstname: $firstName,\n Surname: $lastName \n Email: $email\n ) {\n HashID\n Locale\n Salutation\n Firstname\n Surname\n Email\n }\n }\n`\n\nconst updateMyselfWithPasswordMutation = `\n mutation UpdateMyself(\n $locale: String,\n $salutation: String, \n $firstName: String, \n $lastName: String, \n $email: String!,\n $password: String!\n $currentPassword: String!\n ) {\n updateMyself(\n Locale: $locale,\n Salutation: $salutation,\n Firstname: $firstName,\n Surname: $lastName ,\n Email: $email,\n Password: $password\n CurrentPassword: $currentPassword\n ) {\n HashID\n Locale\n Salutation\n Firstname\n Surname\n Email\n }\n }\n`\n\n/**\n * AccountProfile\n *\n * @returns {*}\n * @constructor\n */\nconst AccountProfile = () => {\n const classes = useStyles()\n const { t /* , i18n */ } = useTranslation()\n const {\n user,\n setUser,\n token,\n setMessage,\n unsetUser,\n unsetToken\n } = useContext(GlobalContext)\n const [formValues, setFormValues] = useState({\n salutation: 0,\n firstName: '',\n lastName: '',\n email: '',\n locale: 'de',\n currentPassword: '',\n password: '',\n passwordRepeat: '',\n showCurrentPassword: false,\n showPassword: false,\n showPasswordRepeat: false\n })\n const [formValueErrors, setFormValueErrors] = useState(\n initialFormValueErrorsState\n )\n const [showPasswordField, setShowPasswordField] = useState(false)\n const [{ fetching }, executeMutation] = useMutation(updateMyselfMutation)\n const [\n { fetching: fetchingWithPassword },\n executeWithPasswordMutation\n ] = useMutation(updateMyselfWithPasswordMutation)\n\n /**\n * Joi validation schema\n */\n const schema = Joi.object({\n currentPassword: Joi.string().allow(''),\n password: Joi.string().allow(''),\n passwordRepeat: Joi.string().allow(''),\n salutation: Joi.number(),\n locale: Joi.string(),\n firstName: Joi.string().required(),\n lastName: Joi.string().required(),\n email: Joi.string()\n .email({ tlds: false })\n .required(),\n showCurrentPassword: Joi.boolean().allow(''),\n showPassword: Joi.boolean().allow(''),\n showPasswordRepeat: Joi.boolean().allow('')\n })\n\n /**\n * Joi password validation schema\n */\n const passwordValidationSchema = Joi.object({\n currentPassword: Joi.string().required(),\n password: Joi.string().required(),\n passwordRepeat: Joi.string()\n .valid(Joi.ref('password'))\n .required()\n })\n\n /**\n * useEffect\n */\n useEffect(() => {\n const userData = user.getData()\n setFormValues({\n salutation: userData.salutation || 0,\n firstName: userData.firstName,\n lastName: userData.lastName,\n email: userData.email,\n locale: userData.locale || 'de'\n })\n }, [user])\n\n /**\n * handleSalutationChange\n *\n * @param event\n */\n const handleSalutationChange = event => {\n setFormValues({ ...formValues, salutation: event.target.value })\n }\n\n /**\n * handleFirstNameChange\n *\n * @param event\n */\n const handleFirstNameChange = event => {\n setFormValues({ ...formValues, firstName: event.target.value })\n }\n\n /**\n * handleLastNameChange\n *\n * @param event\n */\n const handleLastNameChange = event => {\n setFormValues({ ...formValues, lastName: event.target.value })\n }\n\n /**\n * handleEmailChange\n *\n * @param event\n */\n const handleEmailChange = event => {\n setFormValues({ ...formValues, email: event.target.value })\n }\n\n /**\n * handleCurrentPasswordChange\n *\n * @param event\n */\n const handleCurrentPasswordChange = event => {\n setFormValues({ ...formValues, currentPassword: event.target.value })\n }\n\n /**\n * handlePasswordChange\n *\n * @param event\n */\n const handlePasswordChange = event => {\n setFormValues({ ...formValues, password: event.target.value })\n }\n\n /**\n * handlePasswordRepeatChange\n *\n * @param event\n */\n const handlePasswordRepeatChange = event => {\n setFormValues({ ...formValues, passwordRepeat: event.target.value })\n }\n\n /**\n * handleClickShowCurrentPassword\n */\n const handleClickShowCurrentPassword = () => {\n setFormValues({\n ...formValues,\n showCurrentPassword: !formValues.showCurrentPassword\n })\n }\n\n /**\n * handleClickShowPassword\n */\n const handleClickShowPassword = () => {\n setFormValues({ ...formValues, showPassword: !formValues.showPassword })\n }\n\n /**\n * handleClickShowPasswordRepeat\n */\n const handleClickShowPasswordRepeat = () => {\n setFormValues({\n ...formValues,\n showPasswordRepeat: !formValues.showPasswordRepeat\n })\n }\n\n /**\n * handleShowPasswordField\n */\n const handleShowPasswordField = () => {\n setShowPasswordField(true)\n }\n\n /**\n * handleHidePasswordField\n */\n const handleHidePasswordField = () => {\n setFormValues({ ...formValues, password: '' })\n setShowPasswordField(false)\n }\n\n /**\n * handleMutationResult\n *\n * @param result\n */\n const handleMutationResult = result => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf('User forced logout') !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t('error.user.forced.logout'))\n unsetUser()\n unsetToken()\n navigate('/')\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t('error.save'))\n ExternalErrorLogger.log({\n text: 'Error saving changes on AccountProfile',\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message\n }\n })\n }\n } else {\n setMessage(MESSAGE_TYPES.SUCCESS, t('general.label.save.success'))\n const modifiedUserData = {\n salutation: formValues.salutation,\n firstName: formValues.firstName,\n lastName: formValues.lastName,\n email: formValues.email\n }\n user.setData(modifiedUserData)\n setUser(user)\n }\n }\n\n /**\n * handleFormSubmit\n */\n const handleFormSubmit = () => {\n const { error } = schema.validate(formValues, { abortEarly: false })\n if (error) {\n const formErrors = FormValueErrorsBuilder(error, t)\n setFormValueErrors({ ...formErrors })\n } else {\n if (GetSafe(() => formValues.password, false)) {\n const { error } = passwordValidationSchema.validate(\n {\n currentPassword: formValues.currentPassword,\n password: formValues.password,\n passwordRepeat: formValues.passwordRepeat\n },\n { abortEarly: false }\n )\n\n if (error) {\n const formErrors = FormValueErrorsBuilder(error, t)\n setFormValueErrors({ ...formErrors })\n } else {\n executeWithPasswordMutation({\n locale: formValues.locale,\n email: formValues.email,\n firstName: formValues.firstName,\n lastName: formValues.lastName,\n salutation: formValues.salutation,\n password: formValues.password,\n currentPassword: formValues.currentPassword\n }).then(result => {\n if (result.error) {\n if (\n result.error.message.indexOf('Password change denied') !==\n -1\n ) {\n // Set custom error\n const myCustomError = {\n details: [\n {\n type: 'any.notConfirmed',\n path: ['currentPassword']\n }\n ]\n }\n const formErrors = FormValueErrorsBuilder(myCustomError, t)\n setFormValueErrors({ ...formErrors })\n } else {\n // Something went very wrong\n ExternalErrorLogger.log({\n text: 'Error submitting changes on AccountProfile',\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message\n }\n })\n return \n {message &&
\n {t('error.general')}
\n }\n } else {\n handleMutationResult(result)\n }\n })\n }\n } else {\n executeMutation({\n locale: formValues.locale,\n email: formValues.email,\n firstName: formValues.firstName,\n lastName: formValues.lastName,\n salutation: formValues.salutation\n }).then(result => {\n handleMutationResult(result)\n })\n }\n }\n }\n\n /**\n * changeLocale\n *\n * @param event\n */\n // const changeLocale = event => {\n // const userData = user.getData()\n // userData.locale = event.target.value\n // user.setData(userData)\n // i18n.changeLanguage(event.target.value)\n // }\n\n /**\n * return\n */\n return (\n \n {showRemainingDays()}\n
- {getInvoiceList()}
\n {matches && (\n \n {steps.map((label, index) => (\n index}>\n \n {label}\n \n \n ))}\n \n )}\n {!matches && (\n \n {steps.map(label => (\n \n \n {label}\n \n \n ))}\n \n )}\n
\n )\n}\n\nexport default MicrositeDetailsWizardStepper\n","import React, { useEffect } from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport List from '@material-ui/core/List'\nimport ListItem from '@material-ui/core/ListItem'\nimport TextField from '@material-ui/core/TextField'\nimport { useTranslation } from 'react-i18next'\nimport Paper from '@material-ui/core/Paper'\nimport PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'\nimport withAccessControl from '../HOC/AccessControl'\nimport { ACL_COMPONENTS } from '../../config'\nimport ExternalErrorLogger from '@ennit/react-external-errorlogger'\n\nconst useStyles = makeStyles(theme => ({\n textField: {\n width: '100%',\n marginRight: 0,\n marginLeft: 0\n },\n autocompleteResultWrapper: {\n position: 'relative',\n textAlign: 'center',\n zIndex: 2\n },\n autocompleteResult: {\n position: 'relative', // Could be 'absolute' for hovering autosuggest-result-list\n padding: theme.spacing(3),\n width: '100%'\n },\n textFieldSmall: {\n width: '50%',\n '&:first-of-type': {\n width: 'calc(50% - 24px)',\n marginRight: 24\n },\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n '&:first-of-type': {\n width: '100%'\n }\n }\n }\n}))\n\n// Google search options\nconst searchOptions = {\n componentRestrictions: { country: 'ch' },\n types: ['(cities)']\n}\n\nconst addressObject = {\n city: ''\n}\n\n/**\n * GooglePlacesAutosuggestCity\n *\n * @returns {*}\n * @constructor\n */\nconst GooglePlacesAutosuggestCity = props => {\n const classes = useStyles()\n const { t } = useTranslation()\n const { formValue, formValueSetter, presetValue } = props\n\n // Check for valid callback\n if (typeof props.onSuggestionSelect === 'undefined') {\n throw Error('No onSuggestionSelect defined')\n }\n\n /**\n * useEffect\n */\n useEffect(() => {\n if (typeof presetValue !== 'undefined' && presetValue !== '') {\n formValueSetter(presetValue)\n }\n }, [presetValue, formValueSetter])\n\n /**\n * handleAddressSelect\n *\n * @param address\n */\n const handleAddressSelect = address => {\n formValueSetter(address)\n geocodeByAddress(address)\n .then(results => {\n results[0].address_components.map(item => {\n if (item.types[0] === 'locality') {\n addressObject.city = item.long_name\n }\n return item\n })\n\n props.onSuggestionSelect({ addressObject })\n })\n .catch(error => {\n ExternalErrorLogger.log({\n text: 'Error handle address select on GooglePlacesAutosuggestCity',\n data: {\n address: JSON.stringify(address),\n error: JSON.stringify(error)\n }\n })\n })\n }\n\n /**\n * handleChange\n *\n * @param value\n */\n const handleChange = value => {\n if (value === '') {\n props.onSuggestionSelect({\n addressObject\n })\n }\n formValueSetter(value)\n }\n\n /**\n * return\n */\n return (\n \n \n \n
\n )}\n {!loading && suggestions.length > 0 && (\n - \n
\n \n \n
\n )}\n \n )}\n \n )\n}\n\nexport default withAccessControl(\n GooglePlacesAutosuggestCity,\n ACL_COMPONENTS.GOOGLE_PLACES_AUTOSUGGEST_FIELD\n)\n","import React, { useEffect } from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport List from '@material-ui/core/List'\nimport ListItem from '@material-ui/core/ListItem'\nimport TextField from '@material-ui/core/TextField'\nimport { useTranslation } from 'react-i18next'\nimport Paper from '@material-ui/core/Paper'\nimport PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'\nimport withAccessControl from '../HOC/AccessControl'\nimport { ACL_COMPONENTS } from '../../config'\nimport ExternalErrorLogger from '@ennit/react-external-errorlogger'\n\nconst useStyles = makeStyles(theme => ({\n textField: {\n width: '100%',\n marginRight: 0,\n marginLeft: 0\n },\n autocompleteResultWrapper: {\n position: 'relative',\n textAlign: 'center',\n zIndex: 2\n },\n autocompleteResult: {\n position: 'relative', // Could be 'absolute' for hovering autosuggest-result-list\n padding: theme.spacing(3),\n width: '100%'\n }\n}))\n\n// Google search options\nconst searchOptions = {\n componentRestrictions: { country: 'ch' },\n types: [['address']]\n}\n\nconst addressObject = {\n street: '',\n number: '',\n zip: '',\n city: ''\n}\n\n/**\n * GooglePlacesAutosuggestStreet\n *\n * @returns {*}\n * @constructor\n */\nconst GooglePlacesAutosuggestStreet = props => {\n const classes = useStyles()\n const { t } = useTranslation()\n const { formValue, formValueSetter, presetValue } = props\n\n // Check for valid callback\n if (typeof props.onSuggestionSelect === 'undefined') {\n throw Error('No onSuggestionSelect defined')\n }\n\n /**\n * useEffect\n */\n useEffect(() => {\n if (typeof presetValue !== 'undefined' && presetValue !== '') {\n formValueSetter(presetValue)\n }\n }, [presetValue, formValueSetter])\n\n /**\n * handleAddressSelect\n *\n * @param address\n */\n const handleAddressSelect = address => {\n formValueSetter(address)\n geocodeByAddress(address)\n .then(results => {\n results[0].address_components.map(item => {\n if (item.types[0] === 'street_number') {\n addressObject.number = item.long_name\n }\n\n if (item.types[0] === 'route') {\n addressObject.street = item.long_name\n }\n\n if (item.types[0] === 'postal_code') {\n addressObject.zip = item.long_name\n }\n\n if (item.types[0] === 'locality') {\n addressObject.city = item.long_name\n }\n return item\n })\n\n props.onSuggestionSelect({ addressObject })\n })\n .catch(error => {\n ExternalErrorLogger.log({\n text: 'Error handle address select on GooglePlacesAutosuggestStreet',\n data: {\n address: JSON.stringify(address),\n error: JSON.stringify(error)\n }\n })\n })\n }\n\n /**\n * handleChange\n *\n * @param value\n */\n const handleChange = value => {\n if (value === '') {\n props.onSuggestionSelect({\n addressObject\n })\n }\n formValueSetter(value)\n }\n\n /**\n * return\n */\n return (\n - \n {suggestions.map((suggestion, index) => (\n
\n
\n )}\n \n )\n}\n\nexport default withAccessControl(\n GooglePlacesAutosuggestStreet,\n ACL_COMPONENTS.GOOGLE_PLACES_AUTOSUGGEST_FIELD\n)\n","import React, { useEffect } from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport List from '@material-ui/core/List'\nimport ListItem from '@material-ui/core/ListItem'\nimport TextField from '@material-ui/core/TextField'\nimport { useTranslation } from 'react-i18next'\nimport Paper from '@material-ui/core/Paper'\nimport PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'\nimport withAccessControl from '../HOC/AccessControl'\nimport { ACL_COMPONENTS } from '../../config'\nimport ExternalErrorLogger from '@ennit/react-external-errorlogger'\n\nconst useStyles = makeStyles(theme => ({\n textField: {\n width: '100%',\n marginRight: 0,\n marginLeft: 0\n },\n autocompleteResultWrapper: {\n position: 'relative',\n textAlign: 'center',\n zIndex: 2\n },\n autocompleteResult: {\n position: 'relative', // Could be 'absolute' for hovering autosuggest-result-list\n padding: theme.spacing(3),\n width: '100%'\n },\n textFieldSmall: {\n width: '50%',\n '&:first-of-type': {\n width: 'calc(50% - 24px)',\n marginRight: 24\n },\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n '&:first-of-type': {\n width: '100%'\n }\n }\n }\n}))\n\n// Google search options\nconst searchOptions = {\n componentRestrictions: { country: 'ch' },\n types: ['(regions)']\n}\n\nconst addressObject = {\n zip: '',\n city: ''\n}\n\n/**\n * GooglePlacesAutosuggestZip\n *\n * @returns {*}\n * @constructor\n */\nconst GooglePlacesAutosuggestZip = props => {\n const classes = useStyles()\n const { t } = useTranslation()\n const { formValue, formValueSetter, presetValue } = props\n\n // Check for valid callback\n if (typeof props.onSuggestionSelect === 'undefined') {\n throw Error('No onSuggestionSelect defined')\n }\n\n /**\n * useEffect\n */\n useEffect(() => {\n if (typeof presetValue !== 'undefined') {\n formValueSetter(presetValue)\n }\n }, [presetValue, formValueSetter])\n\n /**\n * handleAddressSelect\n *\n * @param address\n */\n const handleAddressSelect = address => {\n formValueSetter(address)\n geocodeByAddress(address)\n .then(results => {\n results[0].address_components.map(item => {\n if (item.types[0] === 'postal_code') {\n addressObject.zip = item.long_name\n }\n\n if (item.types[0] === 'locality') {\n addressObject.city = item.long_name\n }\n return item\n })\n\n props.onSuggestionSelect({ addressObject })\n })\n .catch(error => {\n ExternalErrorLogger.log({\n text: 'Error handle address select on GooglePlacesAutosuggestZip',\n data: {\n address: JSON.stringify(address),\n error: JSON.stringify(error)\n }\n })\n })\n }\n\n /**\n * handleChange\n *\n * @param value\n */\n const handleChange = value => {\n // TODO: Here we need a detection if the zip is empty because of no match or the user has enetered none\n formValueSetter(value)\n }\n\n /**\n * return\n */\n return (\n \n \n \n
\n )}\n {!loading && suggestions.length > 0 && (\n - \n
\n \n \n
\n )}\n - \n {suggestions.map((suggestion, index) => (\n
\n \n \n
\n )}\n {!loading && suggestions.length > 0 && (\n - \n
\n \n \n
\n )}\n \n )}\n \n )\n}\n\nexport default withAccessControl(\n GooglePlacesAutosuggestZip,\n ACL_COMPONENTS.GOOGLE_PLACES_AUTOSUGGEST_FIELD\n)\n","import React, { useEffect, useState } from 'react'\nimport TextField from '@material-ui/core/TextField'\nimport { AsYouType } from 'libphonenumber-js'\nimport Box from '@material-ui/core/Box'\nimport { makeStyles } from '@material-ui/core'\nimport ReactCustomFlagSelect from 'react-custom-flag-select'\nimport 'react-custom-flag-select/lib/react-custom-flag-select.min.css'\nimport { PHONE_COUNTRIES } from '../config'\n\nconst useStyles = makeStyles(theme => ({\n item: {\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n width: '100%'\n // maxWidth: 330\n },\n itemImage: {\n position: 'absolute',\n top: '50%',\n left: 0,\n width: 60,\n padding: 0,\n transform: 'translateY(-20%)',\n zIndex: 1\n },\n itemField: {\n width: '100%',\n // maxWidth: 270,\n padding: 0\n },\n itemTextField: {\n width: '100%'\n },\n flagSelect: {\n '&::focus': {\n outline: 'none'\n }\n },\n flagListContainer: {\n position: 'absolute'\n },\n flagListItem: {\n '&:hover': {\n background: '#f2f3f4',\n color: theme.palette.text.primary\n },\n '& div': {\n flex: '1 1 50%',\n justifyContent: 'flex-start',\n padding: '0 7px',\n textAlign: 'left'\n },\n '& img': {\n borderRadius: 3\n }\n },\n // NOTICE:\n // General country-flag styling must be made via custom attributes\n // on the ReactCustomFlagSelect-element in the render-return-function\n flagArrow: {\n display: 'inline-block',\n '&::after': {\n display: 'block',\n position: 'absolute',\n top: '50%',\n right: 4,\n width: 0,\n borderColor: '#e3e3e3 transparent',\n borderStyle: 'solid',\n borderWidth: '5px 5px 0',\n transform: 'translateY(-50%)',\n content: '\"\"'\n }\n }\n}))\n\n/**\n * PhoneField\n *\n * @returns {*}\n * @constructor\n */\nconst PhoneField = props => {\n const classes = useStyles()\n\n const { defaultCountry, ...textFieldProps } = props\n\n const [countryState, setCountryState] = useState(defaultCountry || '')\n const [value, setValue] = useState('')\n\n /**\n * useEffect\n */\n useEffect(() => {\n preSelectCountry(props.value)\n }, [props.value])\n\n /**\n * useEffect\n */\n useEffect(() => {\n setValue(\n /* Phone-number lib: https://www.npmjs.com/package/libphonenumber-js */\n new AsYouType().input(\n `${getCountryByCode(countryState).phonePrefix}${filterOutCountryPrefix(\n props.value\n )}`\n )\n )\n }, [props.value, countryState])\n\n /**\n * getCountryByCode\n * Returns phone-settings for country\n */\n const getCountryByCode = code => {\n for (let i = 0; i < PHONE_COUNTRIES.length; i++) {\n if (PHONE_COUNTRIES[i].name === code) {\n return PHONE_COUNTRIES[i]\n }\n }\n return false\n }\n\n /**\n * getCountryById\n * Returns phone-settings for country\n */\n const getCountryById = id => {\n for (let i = 0; i < PHONE_COUNTRIES.length; i++) {\n if (PHONE_COUNTRIES[i].id === id) {\n return PHONE_COUNTRIES[i]\n }\n }\n return false\n }\n\n /**\n * onCountryChange\n * Handles country-change\n */\n const onCountryChange = countryId => {\n setCountryState(getCountryById(countryId).name)\n }\n\n /**\n * preSelectCountry\n * Pre-selection of country by matching country-phone-prefix\n */\n const preSelectCountry = phoneNumber => {\n if (phoneNumber.indexOf('+') !== -1) {\n for (let i = 0; i < PHONE_COUNTRIES.length; i++) {\n if (phoneNumber.indexOf(PHONE_COUNTRIES[i].phonePrefix) !== -1) {\n setCountryState(PHONE_COUNTRIES[i].name)\n break\n }\n }\n }\n }\n\n /**\n * filterOutCountryPrefix\n * Removes the country-phone-prefix from a phone-number\n */\n const filterOutCountryPrefix = phoneNumber => {\n if (phoneNumber.indexOf('+') !== -1) {\n for (let i = 0; i < PHONE_COUNTRIES.length; i++) {\n if (phoneNumber.indexOf(PHONE_COUNTRIES[i].phonePrefix) !== -1) {\n return phoneNumber.replace(PHONE_COUNTRIES[i].phonePrefix, '')\n }\n }\n return ''\n }\n return phoneNumber\n }\n\n /**\n * return\n */\n return (\n - \n {suggestions.map((suggestion, index) => (\n
\n \n \n {/* See for additional style-attributes and doc: https://github.com/edwardfhsiao/react-custom-flag-select */}\n \n \n \n \n \n
\n )\n}\n\nexport default PhoneField\n","import { Grid, TextField } from '@material-ui/core'\nimport clsx from 'clsx'\nimport GooglePlacesAutosuggestCity from '../GooglePlacesAutosuggestFields/GooglePlacesAutosuggestCity'\nimport GooglePlacesAutosuggestStreet from '../GooglePlacesAutosuggestFields/GooglePlacesAutosuggestStreet'\nimport GooglePlacesAutosuggestZip from '../GooglePlacesAutosuggestFields/GooglePlacesAutosuggestZip'\nimport { useTranslation } from 'react-i18next'\nimport GetSafe from '../../lib/GetSafe'\nimport React, { useState } from 'react'\nimport PhoneField from '../PhoneField'\n\nconst CompanyBasicSettingsForm = ({\n classes,\n formValues,\n formValueErrors,\n setFormValues,\n streetFormValue,\n setStreetFormValue,\n zipFormValue,\n setZipFormValue,\n cityFormValue,\n setCityFormValue,\n readOnly = false\n}) => {\n const { t } = useTranslation()\n const [activePhone, setActivePhone] = useState('state-phoneField-closed')\n const [activeMobile, setActiveMobile] = useState('state-mobileField-closed')\n const [activeFax, setActiveFax] = useState('state-faxField-closed')\n\n /**\n * handleStreetChange\n *\n * @param autosuggestResult\n */\n const handleStreetChange = autosuggestResult => {\n setFormValues({\n ...formValues,\n street:\n autosuggestResult.addressObject.street +\n ' ' +\n autosuggestResult.addressObject.number,\n zip: autosuggestResult.addressObject.zip,\n city:\n autosuggestResult.addressObject.city === ''\n ? formValues.city\n : autosuggestResult.addressObject.city\n })\n }\n\n /**\n * handleZipChange\n *\n * @param autosuggestResult\n */\n const handleZipChange = autosuggestResult => {\n setFormValues({\n ...formValues,\n zip: autosuggestResult.addressObject.zip,\n city:\n autosuggestResult.addressObject.city === ''\n ? formValues.city\n : autosuggestResult.addressObject.city\n })\n }\n\n /**\n * handleCityChange\n *\n * @param autosuggestResult\n */\n const handleCityChange = autosuggestResult => {\n setFormValues({ ...formValues, city: autosuggestResult.addressObject.city })\n }\n\n /**\n * handlePhoneChange\n *\n * @param event\n */\n const handlePhoneChange = event => {\n setFormValues({ ...formValues, phone: event.target.value })\n }\n\n\n /**\n * handleMobileChange\n *\n * @param event\n */\n const handleMobileChange = event => {\n setFormValues({ ...formValues, mobile: event.target.value })\n }\n\n /**\n * handleFaxChange\n *\n * @param event\n */\n const handleFaxChange = event => {\n setFormValues({ ...formValues, fax: event.target.value })\n }\n\n /**\n * handleWebsiteChange\n *\n * @param event\n */\n const handleWebsiteChange = event => {\n setFormValues({ ...formValues, website: event.target.value })\n }\n\n /**\n * handleEmailChange\n *\n * @param event\n */\n const handleEmailChange = event => {\n setFormValues({ ...formValues, email: event.target.value })\n }\n\n /**\n * handleContactPersonChange\n *\n * @param event\n */\n const handleContactPersonChange = event => {\n setFormValues({ ...formValues, contactPerson: event.target.value })\n }\n\n return (\n <>\n \n
\n )\n}\n\nexport default LoadingOverlay\n","import React, { useState, useContext, useEffect } from \"react\";\nimport {\n makeStyles,\n Grid,\n Button,\n Card,\n CircularProgress,\n} from \"@material-ui/core\";\nimport { green } from \"@material-ui/core/colors\";\nimport clsx from \"clsx\";\nimport { useTranslation } from \"react-i18next\";\nimport MicrositeDetailsWizardStepper from \"./MicrositeDetailsWizardStepper\";\nimport InfoOutlinedIcon from \"@material-ui/icons/InfoOutlined\";\nimport CompanyBasicSettingsForm from \"../Company/CompanyBasicSettingsForm\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport Joi from \"@hapi/joi\";\nimport FormValueErrorsBuilder from \"../../lib/FormValueErrorsBuilder\";\nimport GooglePlacesAPIHelper from \"../../lib/GooglePlacesAPIHelper\";\nimport { useMutation } from \"urql\";\nimport { MESSAGE_TYPES } from \"../PopupMessages\";\nimport { navigate } from \"hookrouter\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\nimport LoadingOverlay from \"../LoadingOverlay\";\n\n/**\n * useStyles\n */\nconst useStyles = makeStyles((theme) => ({\n intro: {\n margin: 20,\n fontSize: 16,\n lineHeight: \"24px\",\n textAlign: \"left\",\n border: \"none\",\n boxShadow: \"none\",\n backgroundColor: \"#e0f6fa\",\n },\n introItem: {\n padding: 10,\n },\n icon: {\n color: theme.palette.primary.main,\n },\n introContainer: {\n flexWrap: \"nowrap\",\n },\n item: {\n position: \"relative\",\n width: \"100%\",\n maxWidth: 500,\n margin: \"0 auto\",\n },\n itemStepper: {\n maxWidth: 600,\n },\n itemHeader: {\n maxWidth: 444,\n paddingTop: 44,\n paddingBottom: 24,\n textAlign: \"center\",\n [theme.breakpoints.down(\"sm\")]: {\n paddingTop: 20,\n paddingBottom: 20,\n textAlign: \"left\",\n },\n },\n title: {\n margin: 0,\n fontSize: 24,\n lineHeight: \"30px\",\n },\n buttonNext: {\n width: \"100%\",\n color: \"#fff\",\n marginRight: \"auto\",\n fontWeight: \"bold\",\n [theme.breakpoints.down(\"sm\")]: {\n width: \"100%\",\n },\n },\n buttonContainer: {\n marginTop: theme.spacing(4),\n },\n gridItem: {\n width: \"100%\",\n padding: \"8px 0\",\n [theme.breakpoints.down(\"sm\")]: {\n width: \"100%\",\n },\n },\n itemPhone: {\n height: 80,\n overflow: \"hidden\",\n \"&.state-phoneField-open\": {\n height: \"auto\",\n overflow: \"visible\",\n zIndex: 3,\n },\n },\n itemMobile: {\n height: 80,\n overflow: \"hidden\",\n \"&.state-mobileField-open\": {\n height: \"auto\",\n overflow: \"visible\",\n zIndex: 3,\n },\n },\n itemFax: {\n height: 80,\n overflow: \"hidden\",\n \"&.state-faxField-open\": {\n height: \"auto\",\n overflow: \"visible\",\n zIndex: 3,\n },\n },\n input: {\n marginLeft: 60,\n },\n buttonProgress: {\n color: green[500],\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n marginTop: -12,\n marginLeft: -12,\n },\n}));\n\nconst updateCompanyMutation = `\n mutation UpdateCompany(\n $hashId: String!,\n $name: String!,\n $contactPerson: String!,\n $street: String!,\n $zip: String!,\n $city: String!,\n $lat: Float,\n $lon: Float,\n $phone: String!,\n $mobile: String!,\n $fax: String!,\n $website: String!,\n $email: String!\n ) {\n updateCompany(\n HashID: $hashId, \n Name: $name,\n ContactPerson: $contactPerson,\n Street: $street,\n Zip: $zip,\n City: $city,\n Latitude: $lat,\n Longitude: $lon,\n Phone: $phone,\n Mobile: $mobile,\n Fax: $fax,\n Website: $website,\n Email: $email\n ) {\n Name\n ContactPerson\n Street\n Zip\n City\n Latitude\n Longitude\n Phone\n Mobile\n Fax\n Website\n Email\n NumberOfEmployees\n LegalForm\n }\n }\n`;\n\nconst initialFormValuesState = {\n id: \"\",\n name: \"\",\n contactPerson: \"\",\n street: \"\",\n zip: \"\",\n city: \"\",\n phone: \"\",\n mobile: \"\",\n fax: \"\",\n website: \"\",\n email: \"\",\n};\n\nconst initialFormValueErrorsState = {\n id: { hasError: false, message: \"\" },\n name: { hasError: false, message: \"\" },\n contactPerson: { hasError: false, message: \"\" },\n street: { hasError: false, message: \"\" },\n zip: { hasError: false, message: \"\" },\n city: { hasError: false, message: \"\" },\n phone: { hasError: false, message: \"\" },\n mobile: { hasError: false, message: \"\" },\n fax: { hasError: false, message: \"\" },\n website: { hasError: false, message: \"\" },\n email: { hasError: false, message: \"\" },\n};\n\nconst LOADING_OVERLAY_TIMEOUT = 5000;\n\n/**\n * CompanyProfileStep\n *\n * @param {*} param0\n */\nconst CompanyProfileStep = ({ step, setStep }) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {\n googleMapsIsLoaded,\n user,\n token,\n setMessage,\n unsetUser,\n unsetToken,\n } = useContext(GlobalContext);\n const [formValues, setFormValues] = useState(initialFormValuesState);\n const [formValueErrors, setFormValueErrors] = useState(\n initialFormValueErrorsState\n );\n const [streetFormValue, setStreetFormValue] = useState(\"\");\n const [zipFormValue, setZipFormValue] = useState(\"\");\n const [cityFormValue, setCityFormValue] = useState(\"\");\n const [loadingOverlayOpen, setLoadingOverlayOpen] = useState(false);\n const [{ fetching: companyIsUpdating }, executeCompanyUpdateMutation] =\n useMutation(updateCompanyMutation);\n\n /**\n * Joi validation schema\n */\n const schema = Joi.object({\n id: Joi.number(),\n hashID: Joi.string().required(),\n name: Joi.string().required(),\n contactPerson: Joi.string().required(),\n street: Joi.string().trim().required(),\n zip: Joi.string().trim().required(),\n city: Joi.string().trim().required(),\n phone: Joi.string().allow(\"\"),\n mobile: Joi.string().allow(\"\"),\n website: Joi.string()\n .regex(\n /https?:\\/\\/(www\\.)?[-a-zA-ZöäüÖÄÜ0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/\n )\n .allow(\"\"),\n fax: Joi.string().allow(\"\"),\n email: Joi.string().email({ tlds: false }).allow(\"\"),\n });\n\n /**\n * useEffect\n */\n useEffect(() => {\n const userData = user.getData();\n setFormValues({\n id: userData.company.hashID,\n name: userData.company.name || initialFormValuesState.name,\n contactPerson:\n userData.company.contactPerson !== \"\"\n ? userData.company.contactPerson\n : userData.firstName + \" \" + userData.lastName,\n street: userData.company.street || initialFormValuesState.street,\n zip: userData.company.zip || initialFormValuesState.zip,\n city: userData.company.city || initialFormValuesState.city,\n phone: userData.company.phone || initialFormValuesState.phone,\n mobile: userData.company.mobile || initialFormValuesState.mobile,\n fax: userData.company.fax || initialFormValuesState.fax,\n website: userData.company.website || initialFormValuesState.website,\n email: userData.company.email || initialFormValuesState.email,\n });\n }, [user]);\n\n /**\n * determineCountry\n *\n * checks if googlePlacesResult is in CH.\n *\n * @param googlePlacesResult\n * @returns {number}\n */\n const determineCountry = (googlePlacesResult) => {\n let isInCH = [];\n googlePlacesResult.results.map((item) => {\n isInCH = item.address_components.filter((addressComponent) => {\n return addressComponent.short_name === \"CH\";\n });\n return item;\n });\n return isInCH.length;\n };\n\n /**\n * determineZip\n *\n * @param googlePlacesResult\n * @returns {*}\n */\n const determineZip = (googlePlacesResult) => {\n let zip = formValues.zip;\n googlePlacesResult.results.map((item) => {\n item.address_components.map((comp) => {\n if (comp.types[0] === \"postal_code\") {\n zip = comp.long_name;\n }\n return zip;\n });\n return zip;\n });\n return zip;\n };\n\n /**\n * handleButtonNext\n */\n const handleButtonNext = () => {\n if (\n formValues.street.trim() === \"\" ||\n formValues.street !== streetFormValue\n ) {\n formValues.street = streetFormValue;\n }\n if (formValues.zip !== zipFormValue) {\n formValues.zip = zipFormValue;\n }\n if (formValues.city.trim() === \"\" || formValues.city !== cityFormValue) {\n formValues.city = cityFormValue;\n }\n\n if (\n formValues.website !== \"\" &&\n !formValues.website.includes(\"http://\") &&\n !formValues.website.includes(\"https://\")\n ) {\n formValues.website = \"https://\" + formValues.website;\n }\n\n const formData = {\n hashID: user.getData().company.hashID,\n name: formValues.name,\n contactPerson: formValues.contactPerson,\n street: formValues.street,\n zip: formValues.zip,\n city: formValues.city,\n phone: formValues.phone,\n mobile: formValues.mobile,\n fax: formValues.fax,\n website: formValues.website,\n email: formValues.email,\n };\n const { error } = schema.validate(formData, { abortEarly: false });\n if (error) {\n console.log(error);\n const formErrors = FormValueErrorsBuilder(error, t);\n setFormValueErrors({ ...formErrors });\n window.scrollTo(0, 0);\n } else {\n user.setData({ company: { ...formData } });\n setFormValueErrors(initialFormValueErrorsState);\n const addressString = `${formValues.street}+${\n typeof formValues.number !== \"undefined\" ? formValues.number + \"+\" : \"\"\n }${formValues.zip}+${formValues.city}`;\n\n GooglePlacesAPIHelper.getCoordsByAddress(addressString).then((result) => {\n if (result.status === \"OK\" && determineCountry(result)) {\n const lat = result.results[0].geometry.location.lat;\n const lon = result.results[0].geometry.location.lng;\n\n user.setData({ company: { latitude: lat, longitude: lon } });\n\n const showLoadingOverlayTimeout = setTimeout(\n () => setLoadingOverlayOpen(true),\n LOADING_OVERLAY_TIMEOUT\n );\n\n const foundZip = determineZip(result);\n\n executeCompanyUpdateMutation({\n hashId: user.getData().company.hashID,\n name: formValues.name,\n contactPerson: formValues.contactPerson,\n street: formValues.street,\n zip: foundZip,\n city: formValues.city,\n lat: lat,\n lon: lon,\n phone: formValues.phone,\n mobile: formValues.mobile,\n fax: formValues.fax,\n website: formValues.website,\n email: formValues.email,\n }).then((result) => {\n clearTimeout(showLoadingOverlayTimeout);\n setLoadingOverlayOpen(false);\n\n if (result.error) {\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error submitting data on CompanyBasicSettings\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setStep((prevActiveStep) => prevActiveStep + 1);\n }\n });\n } else if (result.status === \"OK\" && !determineCountry(result)) {\n setFormValueErrors({\n street: {\n hasError: true,\n message: t(\"error.form.address.not.ch\"),\n },\n zip: {\n hasError: true,\n message: t(\"error.form.address.not.ch\"),\n },\n city: {\n hasError: true,\n message: t(\"error.form.address.not.ch\"),\n },\n });\n window.scrollTo(0, 0);\n } else if (result.status === \"ZERO_RESULTS\") {\n setFormValueErrors({\n street: {\n hasError: true,\n message: t(\"error.form.invalid.address\"),\n },\n zip: {\n hasError: true,\n message: t(\"error.form.invalid.address\"),\n },\n city: {\n hasError: true,\n message: t(\"error.form.invalid.address\"),\n },\n });\n window.scrollTo(0, 0);\n } else {\n let errorMessage = \"\";\n if (result.error_message !== undefined) {\n errorMessage =\n \"{props.text}
\n )}\n \" +\n '' +\n t(\"general.label.error.message\") +\n \"\" +\n \" \" +\n result.error_message;\n }\n setMessage(\n MESSAGE_TYPES.ERROR,\n t(\"error.general.short\") +\n \"
\" +\n \"
\" +\n '' +\n t(\"general.label.status.code\") +\n \"\" +\n \" \" +\n result.status +\n errorMessage +\n \"
\" +\n \"
\" +\n t(\"general.label.contact.smartconext\")\n );\n ExternalErrorLogger.log({\n text: \"Error fetching Geocoords on CompanyBasicSettings\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error_message,\n },\n });\n }\n });\n }\n };\n\n /**\n * return\n */\n return (\n <>\n {googleMapsIsLoaded && (\n <>\n
\n {t(\"microsite.details.wizard.step.1.title\")}\n
\n- \n {/* eslint-disable-next-line react/jsx-handler-names */}\n
\n {formValues.micrositeImages.map((item, index) => {\n const internalID = index + 1\n return (\n \n \n {provided => (\n \n \n \n {\n const clearedArray = formValues.micrositeImages.filter(\n element => element.Src !== item.Src\n )\n setFormValues({\n ...formValues,\n micrositeImages: clearedArray\n })\n }} // eslint-disable-line\n >\n \n \n )\n })}\n {provided.placeholder}\n
\n )}\n \n {t(\"microsite.details.wizard.step.2.title\")}\n
\n\n {t(\"microsite.details.wizard.step.3.title\")}\n
\n\n {t(\"company.label.references\")}\n
\n{introText}
\n- \n {/* eslint-disable-next-line react/jsx-handler-names */}\n
\n {formValueErrors.Images.message}\n
\n )}\n - \n {/* eslint-disable-next-line react/jsx-handler-names */}\n {references !== null && (\n
\n {references.map((item, index) => {\n const internalID = item.Sort + 1;\n return (\n \n \n {(provided) => (\n \n \n \n \n \n {item.Content}\n \n
\n \n {item.Location}{\" \"}\n {item.Month\n ? item.Month.toString().length === 1\n ? 0 + item.Month.toString() + \".\"\n : item.Month + \".\"\n : \"\"}\n {item.Year}\n \n
\n {item.MicrositeReferencesImages !==\n undefined &&\n item.MicrositeReferencesImages.map(\n (image) => {\n return image.Src && image.Src.length > 0 ? (\n handleEditReference(item)}\n >\n handleDeleteReference(item)}\n >\n \n \n );\n })}\n {provided.placeholder}\n
\n )}\n \n \n {item.Location}{\" \"}\n {item.Month\n ? item.Month.toString().length === 1\n ? 0 + item.Month.toString() + \".\"\n : item.Month + \".\"\n : \"\"}\n {item.Year}\n \n
\n {item.MicrositeReferencesImages !==\n undefined &&\n item.MicrositeReferencesImages.map(\n (image) => {\n return image.Src && image.Src.length > 0 ? (\n
\n {t('microsite.details.wizard.step.4.title')}\n
\n{t('microsite.details.wizard.title')}
\n\n {t('microsite.details.wizard.step.5.intro')}\n
\n\" +\n '' +\n t(\"general.label.error.message\") +\n \"\" +\n \" \" +\n result.error_message;\n }\n setMessage(\n MESSAGE_TYPES.ERROR,\n t(\"error.general.short\") +\n \"
\" +\n \"
\" +\n '' +\n t(\"general.label.status.code\") +\n \"\" +\n \" \" +\n result.status +\n errorMessage +\n \"
\" +\n \"
\" +\n t(\"general.label.contact.smartconext\")\n );\n ExternalErrorLogger.log({\n text: \"Error fetching Geocoords on CompanyBasicSettings\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error_message,\n },\n });\n }\n });\n }\n };\n\n /**\n * return\n */\n return (\n googleMapsIsLoaded && (\n
{t(\"error.general\")}
;\n }\n } else {\n // Query not fetching right now\n if (\n typeof result.data !== \"undefined\" &&\n typeof result.data.readSmartconextConf !== \"undefined\"\n ) {\n if (colorSchemes.length === 0) {\n setColorSchemes(\n result.data.readSmartconextConf[0].microsite_color_schemes\n );\n setFormValues({\n ...formValues,\n colorScheme: user.getData().company.micrositeColorScheme || \"3\", // Default colorScheme = \"Schweiz\"\n });\n }\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [result])\n\n /**\n * handleFormSubmit\n */\n const handleFormSubmit = async () => {\n formValues.memberships.map((item) => {\n delete item.__typename;\n return item;\n });\n\n formValues.micrositeImages.map((item) => {\n delete item.__typename;\n return item;\n });\n\n const formattedImagesArray = formatImagesArray(formValues);\n\n const fileObjs = await Promise.all(\n formattedImagesArray.map(async (initialFile) => {\n let file;\n if (typeof initialFile.Src === \"string\") {\n file = await createFileFromUrl(initialFile.Src);\n } else {\n file = initialFile.Src;\n }\n const data = await readFile(file);\n\n return {\n file,\n data,\n };\n })\n );\n\n const convertedImagesArray = [];\n fileObjs.map((item) => {\n if (item.data) {\n convertedImagesArray.push({\n Src: item.data,\n Title: item.file.name,\n Alt: item.file.name,\n });\n } else {\n convertedImagesArray.push(item);\n }\n return item;\n });\n\n const logoData = { Src: \"\", Alt: \"\", Title: \"\" };\n\n if (currentFileObjects[0]) {\n logoData.Src = currentFileObjects[0].data;\n logoData.Alt = currentFileObjects[0].file.name;\n logoData.Title = currentFileObjects[0].file.name;\n } else if (\n formValues.micrositeLogo.Src !== null &&\n formValues.micrositeLogo.Src !== \"\" &&\n formValues.micrositeLogo.Src !== undefined\n ) {\n const logoArray = [formValues.micrositeLogo];\n const logoFile = await Promise.all(\n logoArray.map(async (initialFile) => {\n let file;\n if (typeof initialFile.Src === \"string\") {\n file = await createFileFromUrl(initialFile.Src);\n } else {\n file = initialFile.Src;\n }\n const data = await readFile(file);\n\n return {\n file,\n data,\n };\n })\n );\n const convertedLogoArray = [];\n logoFile.map((item) => {\n if (item.data) {\n convertedLogoArray.push({\n Src: item.data,\n Title: item.file.name,\n Alt: item.file.name,\n });\n } else {\n convertedLogoArray.push(item);\n }\n return item;\n });\n logoData.Src = convertedLogoArray[0].Src;\n logoData.Alt = convertedLogoArray[0].Alt;\n logoData.Title = convertedLogoArray[0].Title;\n } else {\n console.log(\"DELETE_LOGO\");\n }\n\n const formData = {\n hashID: user.getData().company.hashID,\n employeeCount: formValues.employeeCount,\n legalForm: formValues.legalForm,\n foundingYear: formValues.foundingYear,\n masterOperation: formValues.masterOperation,\n micrositeDescription: formValues.micrositeDescription,\n memberships: formValues.memberships,\n trainingCompany: formValues.trainingCompany,\n micrositeImages: convertedImagesArray,\n micrositeLogo: logoData,\n additionalMemberships: formValues.additionalMemberships,\n micrositeEmailApplicationText: formValues.micrositeEmailApplicationText,\n micrositeColorScheme: formValues.colorScheme,\n };\n const { error } = schema.validate(formData, { abortEarly: false });\n if (error) {\n console.log(error);\n const formErrors = FormValueErrorsBuilder(error, t);\n setFormValueErrors({ ...formErrors });\n window.scrollTo(0, 0);\n } else {\n setFormValueErrors(initialFormValueErrorsState);\n\n setLoadingOverlayOpen(true);\n\n executeCompanyUpdateMutation({\n hashId: user.getData().company.hashID,\n numberOfEmployees: formValues.employeeCount,\n legalForm: formValues.legalForm,\n foundingYear: formValues.foundingYear,\n masterBusiness: formValues.masterOperation,\n trainingCompany: formValues.trainingCompany,\n description: formValues.micrositeDescription,\n memberships: formValues.memberships,\n colorScheme: formValues.colorScheme,\n images: convertedImagesArray,\n logo: logoData,\n additionalMemberships: formValues.additionalMemberships,\n emailApplicationText: formValues.micrositeEmailApplicationText,\n }).then((result) => {\n if (result.error) {\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.save\"));\n ExternalErrorLogger.log({\n text: \"Error submitting data on CompanyInfo\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n }\n } else {\n setMessage(MESSAGE_TYPES.SUCCESS, t(\"general.label.save.success\"));\n user.setData({ company: { ...formData } });\n const micrositeImages = [];\n result.data.updateCompany[0].MicrositeImages.edges.map((item) => {\n micrositeImages.push(item.node);\n return micrositeImages;\n });\n user.setData({ company: { micrositeImages: micrositeImages } });\n setUser(user);\n }\n });\n }\n };\n\n /**\n * return\n */\n return (\n <>\n Something went wrong!
\n\n \n {t(\"general.label.days.of.testing\", {\n days: yearlyPlanData.trial_period_days,\n })}\n \n
\n )}\n {t(\"general.label.premium.upgrade\")}
\n {result.fetching && (\n\n {matches && (\n \n {steps.map(label => (\n \n \n {label}\n \n \n ))}\n \n )}\n {!matches && (\n \n {steps.map(label => (\n \n \n {label}\n \n \n ))}\n \n )}\n
\n )\n}\n\nexport default FreeToPremiumStepper\n","import React, { useContext, useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport { makeStyles } from '@material-ui/core/styles'\nimport TextField from '@material-ui/core/TextField'\nimport Button from '@material-ui/core/Button'\nimport Grid from '@material-ui/core/Grid'\nimport { useTranslation } from 'react-i18next'\nimport Joi from '@hapi/joi'\nimport FreeToPremiumStepper from './FreeToPremiumStepper'\nimport FormValueErrorsBuilder from '../../lib/FormValueErrorsBuilder'\nimport GetSafe from '../../lib/GetSafe'\nimport withAccessControl from '../HOC/AccessControl'\nimport GooglePlacesAPIHelper from '../../lib/GooglePlacesAPIHelper'\nimport PhoneField from '../PhoneField'\nimport ZefixCompanyAutocompleteField from '../ZefixCompanyAutocompleteField'\nimport { ACL_COMPONENTS } from '../../config'\nimport GooglePlacesAutosuggestStreet from '../GooglePlacesAutosuggestFields/GooglePlacesAutosuggestStreet'\nimport GooglePlacesAutosuggestZip from '../GooglePlacesAutosuggestFields/GooglePlacesAutosuggestZip'\nimport GooglePlacesAutosuggestCity from '../GooglePlacesAutosuggestFields/GooglePlacesAutosuggestCity'\nimport { MESSAGE_TYPES } from '../PopupMessages'\nimport GlobalContext from '../../lib/GlobalContext'\nimport ExternalErrorLogger from '@ennit/react-external-errorlogger'\n\nconst useStyles = makeStyles(theme => ({\n textField: {\n width: 160,\n '&:first-of-type': {\n marginRight: 5\n },\n '&:last-of-type': {\n marginLeft: 5\n },\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n '&:first-of-type': {\n marginRight: 0\n },\n '&:last-of-type': {\n marginLeft: 0\n }\n }\n },\n textFieldLong: {\n width: '100%',\n maxWidth: 330,\n '&:first-of-type': {\n marginRight: '0'\n },\n '&:last-of-type': {\n marginLeft: '0'\n }\n },\n title: {\n margin: 0,\n fontSize: 24,\n lineHeight: '30px'\n },\n intro: {\n fontSize: 16,\n lineHeight: '24px',\n textAlign: 'left'\n },\n item: {\n position: 'relative',\n width: '100%',\n maxWidth: 330,\n margin: '0 auto'\n },\n itemStepper: {\n maxWidth: 600\n },\n itemHeader: {\n maxWidth: 444,\n paddingTop: 44,\n paddingBottom: 24,\n textAlign: 'center',\n [theme.breakpoints.down('sm')]: {\n paddingTop: 20,\n paddingBottom: 20,\n textAlign: 'left'\n }\n },\n input: {\n marginLeft: 60\n },\n itemPhone: {\n height: 80,\n overflow: 'hidden',\n '&.state-phoneField-open': {\n height: 'auto',\n overflow: 'visible',\n zIndex: 3\n }\n },\n itemMobile: {\n height: 80,\n overflow: 'hidden',\n '&.state-mobileField-open': {\n height: 'auto',\n overflow: 'visible',\n zIndex: 3\n }\n },\n itemFax: {\n height: 80,\n overflow: 'hidden',\n '&.state-faxField-open': {\n height: 'auto',\n overflow: 'visible',\n zIndex: 3\n }\n },\n buttonBack: {\n width: 147,\n color: theme.palette.primary.main,\n marginLeft: 'auto',\n fontWeight: 'bold',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n }\n },\n buttonNext: {\n width: 147,\n color: '#fff',\n marginRight: 'auto',\n fontWeight: 'bold',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n }\n },\n buttonContainer: {\n marginTop: theme.spacing(4)\n }\n}))\n\n/**\n * FreeToPremiumDialogueStep1\n *\n * @returns {*}\n * @constructor\n */\nconst FreeToPremiumDialogueStep1 = props => {\n const classes = useStyles()\n const { t } = useTranslation()\n const { setMessage, token, user } = useContext(GlobalContext)\n const [formValues, setFormValues] = useState({\n company: '',\n street: '',\n zip: '',\n city: '',\n phone: '',\n mobile: '',\n fax: '',\n website: '',\n email: ''\n })\n const [formValueErrors, setFormValueErrors] = useState({\n company: { hasError: false, message: '' },\n street: { hasError: false, message: '' },\n zip: { hasError: false, message: '' },\n city: { hasError: false, message: '' },\n phone: { hasError: false, message: '' },\n mobile: { hasError: false, message: '' },\n fax: { hasError: false, message: '' },\n website: { hasError: false, message: '' },\n email: { hasError: false, message: '' }\n })\n const [autoCompleteCompanyData, setAutoCompleteCompanyData] = useState({})\n const [activePhone, setActivePhone] = useState('state-phoneField-closed')\n const [activeMobile, setActiveMobile] = useState('state-mobileField-closed')\n const [activeFax, setActiveFax] = useState('state-faxField-closed')\n const [streetFormValue, setStreetFormValue] = useState('')\n const [zipFormValue, setZipFormValue] = useState('')\n const [cityFormValue, setCityFormValue] = useState('')\n\n /**\n * useEffect\n */\n useEffect(() => {\n setFormValues(props.formData.step1)\n }, [props.formData.step1])\n\n /**\n * Joi validation schema\n */\n const schema = Joi.object({\n company: Joi.string().required(),\n street: Joi.string()\n .trim()\n .required(),\n zip: Joi.string()\n .trim()\n .required(),\n city: Joi.string()\n .trim()\n .required(),\n lat: Joi.any(),\n lon: Joi.any(),\n phone: Joi.string().allow(''),\n mobile: Joi.string().allow(''),\n fax: Joi.string().allow(''),\n website: Joi.string()\n .regex(\n /https?:\\/\\/(www\\.)?[-a-zA-ZöäüÖÄÜ0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/\n )\n .allow(''),\n email: Joi.string()\n .email({ tlds: false })\n .allow('')\n })\n\n /**\n * determineCountry\n *\n * checks if googlePlacesResult is in CH.\n *\n * @param googlePlacesResult\n * @returns {number}\n */\n const determineCountry = googlePlacesResult => {\n let isInCH = []\n googlePlacesResult.results.map(item => {\n isInCH = item.address_components.filter(addressComponent => {\n return addressComponent.short_name === 'CH'\n })\n return item\n })\n return isInCH.length\n }\n\n /**\n * handleFormBack\n */\n const handleFormBack = () => {\n props.setStep(0)\n }\n\n /**\n * handleFromNext\n */\n const handleFormNext = () => {\n if (formValues.street.trim() === '') {\n formValues.street = streetFormValue\n }\n if (formValues.zip.trim() === '') {\n formValues.zip = zipFormValue\n }\n if (formValues.city.trim() === '') {\n formValues.city = cityFormValue\n }\n\n if (\n formValues.website !== '' &&\n !formValues.website.includes('http://') &&\n !formValues.website.includes('https://')\n ) {\n formValues.website = 'https://' + formValues.website\n }\n\n const { error } = schema.validate(formValues, { abortEarly: false })\n\n if (error) {\n const formErrors = FormValueErrorsBuilder(error, t)\n setFormValueErrors({ ...formErrors })\n } else {\n const addressString = `${formValues.street}+${formValues.zip}+${formValues.city}`\n\n GooglePlacesAPIHelper.getCoordsByAddress(addressString).then(result => {\n if (result.status === 'OK' && determineCountry(result)) {\n formValues.lat = result.results[0].geometry.location.lat\n formValues.lon = result.results[0].geometry.location.lng\n\n props.setFormData(\n Object.assign({}, props.formData, { step1: formValues })\n )\n\n props.setStep(2)\n } else if (result.status === 'OK' && !determineCountry(result)) {\n setFormValueErrors({\n street: {\n hasError: true,\n message: t('error.form.address.not.ch')\n },\n zip: { hasError: true, message: t('error.form.address.not.ch') },\n city: { hasError: true, message: t('error.form.address.not.ch') }\n })\n } else if (result.status === 'ZERO_RESULTS') {\n setFormValueErrors({\n street: {\n hasError: true,\n message: t('error.form.invalid.address')\n },\n zip: { hasError: true, message: t('error.form.invalid.address') },\n city: { hasError: true, message: t('error.form.invalid.address') }\n })\n } else {\n let errorMessage = ''\n if (result.error_message !== undefined) {\n ExternalErrorLogger.log({\n text: 'Error get coords by address on FreeToPremiumDialogueStep1',\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n address: JSON.stringify(addressString),\n errorMessage: result.error_message\n }\n })\n errorMessage =\n '' +\n '' +\n t('general.label.error.message') +\n '' +\n ' ' +\n result.error_message\n }\n setMessage(\n MESSAGE_TYPES.ERROR,\n t('error.general.short') +\n '
' +\n '
' +\n '' +\n t('general.label.status.code') +\n '' +\n ' ' +\n result.status +\n errorMessage +\n '
' +\n '
' +\n t('general.label.contact.smartconext')\n )\n }\n })\n }\n }\n\n /**\n * handleCompanyChange\n *\n * @param event\n */\n const handleCompanyChange = event => {\n setFormValues({ ...formValues, company: event.target.value })\n }\n\n /**\n * handleStreetChange\n *\n * @param autosuggestResult\n */\n const handleStreetChange = autosuggestResult => {\n setFormValues({\n ...formValues,\n street:\n autosuggestResult.addressObject.street +\n ' ' +\n autosuggestResult.addressObject.number,\n zip: autosuggestResult.addressObject.zip,\n city:\n autosuggestResult.addressObject.city === ''\n ? formValues.city\n : autosuggestResult.addressObject.city\n })\n }\n\n /**\n * handleZipChange\n *\n * @param autosuggestResult\n */\n const handleZipChange = autosuggestResult => {\n setFormValues({\n ...formValues,\n zip: autosuggestResult.addressObject.zip,\n city:\n autosuggestResult.addressObject.city === ''\n ? formValues.city\n : autosuggestResult.addressObject.city\n })\n }\n\n /**\n * handleCityChange\n *\n * @param autosuggestResult\n */\n const handleCityChange = autosuggestResult => {\n setFormValues({ ...formValues, city: autosuggestResult.addressObject.city })\n }\n\n /**\n * handlePhoneChange\n *\n * @param event\n */\n const handlePhoneChange = event => {\n setFormValues({ ...formValues, phone: event.target.value })\n }\n\n /**\n * handleMobileChange\n *\n * @param event\n */\n const handleMobileChange = event => {\n setFormValues({ ...formValues, mobile: event.target.value })\n }\n\n /**\n * handleFaxChange\n *\n * @param event\n */\n const handleFaxChange = event => {\n setFormValues({ ...formValues, fax: event.target.value })\n }\n\n /**\n * handleWebsiteChange\n *\n * @param event\n */\n const handleWebsiteChange = event => {\n setFormValues({ ...formValues, website: event.target.value })\n }\n\n /**\n * handleEmailChange\n *\n * @param event\n */\n const handleEmailChange = event => {\n setFormValues({ ...formValues, email: event.target.value })\n }\n\n /**\n * onAutocompleteSelect\n * Handle the result of the autocomplete\n * @param company\n */\n const onAutocompleteSelect = company => {\n if (company !== autoCompleteCompanyData) {\n setAutoCompleteCompanyData(company)\n\n setFormValues({\n company: company.Name,\n street: company.Address.AddressInformation.Street,\n zip: company.Address.AddressInformation.SwissZipCode,\n city: company.Address.AddressInformation.Town,\n phone: '',\n mobile: '',\n fax: '',\n website: '',\n email: ''\n })\n }\n }\n\n /**\n * return\n */\n return (\n <>\n
{t('general.label.premium.upgrade')}
\n{t('onboarding.intro')}
\n{t(\"general.label.premium.upgrade\")}
\n{t(\"onboarding.intro\")}
\n{branchCategorySubs()}
\n \n \n {t(\"general.label.days.of.testing\", {\n days: props.formData.step0.plans[formValues.chosenPlan]\n .trial_period_days,\n })}\n \n
\n {t(\"general.label.premium.upgrade\")}
\n{t(\"onboarding.intro\")}
\n\n {t(\"form.label.i.accept\")}{\" \"}\n \n {t(\"footer.label.conditions\")}\n \n
\n }\n />\n {GetSafe(() => formValueErrors.terms.hasError, false) && (\n \n {t(\"form.label.cardHolder\")}\n
\n {user.getData().creditCard.name}
\n\n {t(\"form.label.cardDetails\")}\n
\n \n ) : (\n <>\n **** **** **** {user.getData().creditCard.last4}
\n\n \n \n
\n \n {plan === YEARLY_PLAN && (\n \n \n \n
\n \n )}\n \n )\n}\n\nexport default Payment\n","import React, { useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport Grid from \"@material-ui/core/Grid\";\nimport { useTranslation } from \"react-i18next\";\nimport FreeToPremiumStepper from \"./FreeToPremiumStepper\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Lock from \"@material-ui/icons/Lock\";\nimport GlobalContext from \"../../lib/GlobalContext\";\nimport { useMutation } from \"urql\";\nimport withAccessControl from \"../HOC/AccessControl\";\nimport { MESSAGE_TYPES } from \"../PopupMessages\";\nimport { navigate } from \"hookrouter\";\nimport { ACL_COMPONENTS } from \"../../config\";\nimport ExternalErrorLogger from \"@ennit/react-external-errorlogger\";\nimport Payment from \"../Payment/Payment\";\n\nconst useStyles = makeStyles((theme) => ({\n paper: {\n padding: theme.spacing(4, 4),\n marginBottom: theme.spacing(3),\n // backgroundColor: '#eee'\n },\n paymentCardImage: {\n display: \"inline-block\",\n transition: \"all .4s ease-out\",\n cursor: \"pointer\",\n \"&:hover\": {\n transform: \"scale(1.05)\",\n },\n },\n paymentCardContainer: {\n width: \"100%\",\n maxWidth: 330,\n margin: \"0 auto\",\n },\n paymentLabelTop: {\n fontSize: 14,\n fontWeight: \"bold\",\n },\n title: {\n margin: 0,\n fontSize: 24,\n lineHeight: \"30px\",\n },\n intro: {\n fontSize: 16,\n lineHeight: \"24px\",\n textAlign: \"left\",\n },\n item: {\n width: \"100%\",\n maxWidth: 330,\n margin: \"0 auto\",\n },\n itemStepper: {\n maxWidth: 600,\n },\n itemHeader: {\n maxWidth: 444,\n paddingTop: 44,\n paddingBottom: 24,\n textAlign: \"center\",\n [theme.breakpoints.down(\"sm\")]: {\n paddingTop: 20,\n paddingBottom: 20,\n textAlign: \"left\",\n },\n },\n formFieldContainer: {\n width: \"100%\",\n },\n paperContainer: {\n width: \"100%\",\n maxWidth: 590,\n paddingTop: 40,\n paddingRight: 120,\n paddingBottom: 40,\n paddingLeft: 120,\n borderRadius: 5,\n backgroundColor: \"#efeff1\",\n [theme.breakpoints.down(\"sm\")]: {\n padding: 20,\n },\n },\n buttonContainer: {\n marginTop: theme.spacing(2),\n flexBasis: \"100%\",\n },\n preciseTag: {\n alignSelf: \"flex-start\",\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(1),\n },\n iconButton: {\n padding: 0,\n },\n paperHeadLeft: {\n textAlign: \"left\",\n },\n paperHeadRight: {\n textAlign: \"right\",\n },\n paperFooter: {\n position: \"relative\",\n color: \"#aaa\",\n },\n lock: {\n display: \"block\",\n position: \"relative\",\n width: 75,\n margin: \"auto\",\n paddingLeft: 25,\n paddingRight: 25,\n backgroundColor: \"#efeff1\",\n zIndex: \"2\",\n },\n line: {\n position: \"absolute\",\n top: \"50%\",\n width: \"100%\",\n height: \"1px\",\n backgroundColor: \"#aaa\",\n transform: \"translateY(-50%)\",\n },\n secureText: {\n color: \"#666\",\n marginTop: theme.spacing(2),\n },\n textPremiumSecure: {\n display: \"block\",\n fontSize: 12,\n textAlign: \"center\",\n },\n priceTag: {\n textAlign: \"right\",\n backgroundColor: \"#E2E2E4\",\n padding: theme.spacing(1),\n borderRadius: \"4px\",\n marginBottom: theme.spacing(1),\n },\n}));\n\nconst updateCompanyMutation = `\n mutation UpdateCompany(\n $hashId: String!,\n $name: String,\n $street: String,\n $zip: String,\n $city: String,\n $lat: Float,\n $lon: Float,\n $phone: String,\n $mobile: String,\n $fax: String,\n $website: String,\n $email: String,\n $businessActivityID: ID,\n $businessSpecialties: [BusinessSpecialityInput]\n $futurePlanID: String,\n $paymentMethodID: String!\n ) {\n updateCompany(\n HashID: $hashId, \n Name: $name,\n Street: $street,\n Zip: $zip,\n City: $city,\n Latitude: $lat,\n Longitude: $lon,\n Phone: $phone,\n Mobile: $mobile,\n Fax: $fax,\n Website: $website,\n Email: $email,\n BusinessActivityID: $businessActivityID\n BusinessSpecialities: $businessSpecialties\n FuturePlanID: $futurePlanID,\n PaymentMethodID: $paymentMethodID\n ) {\n Name\n Street\n Zip\n City\n Latitude\n Longitude\n Phone\n Mobile\n Fax\n Website\n Email\n BusinessActivityID\n }\n }\n`;\n\n/**\n * FreeToPremiumDialogueStep4\n *\n * @returns {*}\n * @constructor\n */\nconst FreeToPremiumDialogueStep4 = (props) => {\n const classes = useStyles();\n const { t } = useTranslation();\n const {\n user,\n token,\n setToken,\n paymentMethodId,\n setMessage,\n unsetUser,\n unsetToken,\n } = useContext(GlobalContext);\n\n const [{ fetching }, executeUpdateCompanyMutation] = useMutation(updateCompanyMutation);\n\n useEffect(() => {\n if (paymentMethodId !== null) {\n let branchSubsRefined = [];\n\n if (props.formData.step2.branchSubs) {\n props.formData.step2.branchSubs.map((item) => {\n branchSubsRefined.push({\n ID: item,\n });\n return item;\n });\n }\n\n if (!branchSubsRefined.length) {\n branchSubsRefined = null;\n }\n\n executeUpdateCompanyMutation({\n hashId: user.getData().company.hashID,\n name: props.formData.step1.company || user.getData().company.name,\n street: props.formData.step1.street || user.getData().company.street,\n zip: props.formData.step1.zip || user.getData().company.zip,\n city: props.formData.step1.city || user.getData().company.city,\n lat: props.formData.step1.lat || user.getData().company.latitude,\n lon: props.formData.step1.lon || user.getData().company.longitude,\n phone: props.formData.step1.phone || user.getData().company.phone,\n mobile: props.formData.step1.mobile || user.getData().company.mobile,\n fax: props.formData.step1.fax || user.getData().company.fax,\n website: props.formData.step1.website || user.getData().company.website,\n email: props.formData.step1.email || user.getData().company.email,\n futurePlanID:\n props.formData.step0.plans[props.formData.step3.chosenPlan].id,\n paymentMethodID: paymentMethodId,\n businessActivityID:\n props.formData.step2.branchCategory ||\n user.getData().company.branchCategory,\n businessSpecialties: branchSubsRefined,\n }).then((result) => {\n if (result.error) {\n // Check if the user need to be logged out\n if (result.error.message.indexOf(\"User forced logout\") !== -1) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.user.forced.logout\"));\n unsetUser();\n unsetToken();\n navigate(\"/\");\n } else {\n ExternalErrorLogger.log({\n text: \"Error save myself on FreeToPremiumDialogueStep4\",\n data: {\n token: JSON.stringify(token.getData()),\n user: JSON.stringify(user.getData()),\n errorMessage: result.error.message,\n },\n });\n if (\n result.error.message.indexOf(\n \"The selected plan has already been subscribed\"\n ) !== -1\n ) {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.subsription.exists\"));\n } else {\n setMessage(MESSAGE_TYPES.ERROR, t(\"error.general\"));\n }\n props.setStep(3);\n }\n } else {\n props.setStep(5)\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n paymentMethodId,\n executeUpdateCompanyMutation,\n props,\n setToken,\n token,\n user,\n setMessage,\n unsetUser,\n unsetToken,\n t,\n ]);\n\n const showPriceWithTax = () => {\n let amount = parseInt(\n props.formData.step0.plans[props.formData.step3.chosenPlan].amount\n );\n\n // TODO: tax value has to come from api!\n amount += amount * 0.081\n\n return (amount.toFixed(2) / 100).toFixed(2);\n };\n\n /**\n * return\n */\n return (\n <>\n {t(\"general.label.premium.upgrade\")}
\n{t(\"onboarding.intro\")}
\n\n {props.formData.step0.plans[\n props.formData.step3.chosenPlan\n ].currency.toUpperCase()}{\" \"}\n {showPriceWithTax()}{\" \"}\n
\n {t(\"general.label.premium.upgrade\")}
\n{t(\"onboarding.intro\")}
\n{t(\"general.label.premium.done\")}
\n{t('error.fetching.user')}
\n \n {t('favorites.label.fastest.route')}\n
\n{t('projects.label.owner')}
\n\n {GetSafe(() => props.data.Building_owner.Name, '')}\n
\n {GetSafe(() => props.data.Building_owner.Address.Street, '')}{' '}\n {GetSafe(() => props.data.Building_owner.Address.Number, '')}\n
\n {GetSafe(() => props.data.Building_owner.Address.Zip, '')}{' '}\n {GetSafe(() => props.data.Building_owner.Address.City, '')}\n
{t('projects.label.architect')}
\n\n {GetSafe(() => props.data.Project_management.Name, '')}\n
\n {GetSafe(\n () => props.data.Project_management.Address.Street,\n ''\n )}{' '}\n {GetSafe(() => props.data.Project_management.Address.Number, '')}\n
\n {GetSafe(() => props.data.Project_management.Address.Zip, '')}{' '}\n {GetSafe(() => props.data.Project_management.Address.City, '')}\n
\n {isProcessable(\n GetSafe(() => props.data.Project_management.Phone, '')\n ) && (\n
\n {isProcessable(\n GetSafe(() => props.data.Project_management.Email, '')\n ) && (\n
\n Deeplink View\n
\n \n
\n
\n \n \n
\n
\n \n {t(\"statistics.selector.applications\")}: Keine Daten\n
\n );\n }\n\n return user.getData().company.adminUserID === user.getData().id ? (\n \n {t(\"statistics.selector.submissions\")}: Keine Daten\n
\n );\n }\n\n return user.getData().company.adminUserID === user.getData().id ? (\n \n {t(\"statistics.selector.apply.download\")}: Keine Daten\n
\n );\n }\n\n return user.getData().company.adminUserID === user.getData().id ? (\n \n {t(\"statistics.selector.apply.email\")}: Keine Daten\n
\n );\n }\n\n return user.getData().company.adminUserID === user.getData().id ? (\n \n \n
\n
\n