\n \n Public profile \n \n \n \n\n {authUser?.type === 'organization' && (\n \n \n Organization name\n \n setOrganizationName(e.target.value)}\n variant=\"outlined\"\n className={sectionClasses.textField}\n inputProps={{ className: sectionClasses.textFieldInput }}\n value={organizationName}\n />\n \n save changes\n \n \n )}\n\n
\n \n \n \n Profile picture\n \n
\n \n {link} \n
\n \n \n OAuth Apps \n \n
\n );\n }\n\n if (!history.location.state?.password) {\n history.push('/login?userId=' + user.id, { from: path, update: 'developer settings' });\n }\n\n return (\n \n No OAuth applications \n \n To register an OAuth client you need to configure an Ellipsis Drive password first.\n \n {\n const body = { email: user.email };\n ApiManager.post('/v3/account/security/password/reset', body).then((r) => {\n history.push(`/notification?type=setPasswordRequest&userId=${user.id}`);\n });\n }}\n >\n Set up Ellipsis Drive password\n \n
\n \n \n OAuth Apps \n \n {!user.client?.clientId ? (\n setRemoveDialogOpen(false)}\n title=\"Are you sure you want to remove this OAuth client?\"\n legend={`All services associated with this clientId will stop working once the client is removed. Please be certain.`}\n agreeText=\"Remove\"\n onClick={handleRemoveClient}\n />\n setNewURLDialogOpen(false)}\n value={newURL}\n handleValueChange={handleNewURLChange}\n title=\"New redirect URL\"\n legend=\"This is a link you can ask Ellipsis Drive to redirect to when the OAuth flow is completed.\"\n onClick={handleAddRedirectURL}\n agreeText=\"Add\"\n />\n
\n );\n};\n\nexport default Developers;\n","import React, { useState } from 'react';\n\nimport { Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport PropTypes from 'prop-types';\n\nimport { AvatarWithInfo, LoadingButton } from '../../../ReusableComponents';\n\nconst useApplicationListItemStyles = makeStyles()((theme) => ({\n container: {\n padding: '16px',\n display: 'grid',\n gridTemplateColumns: '28px 1fr 170px',\n gridGap: '20px',\n alignItems: 'center',\n borderBottom: `1px solid ${theme.palette.divider}`,\n '&:last-child': {\n borderBottom: 'none',\n },\n },\n title: {\n gridColumn: 2,\n },\n button: {\n padding: 0,\n gridColumn: 3,\n },\n}));\n\nconst ApplicationListItem = ({ user, handleDelete }) => {\n const { classes } = useApplicationListItemStyles();\n\n const [loading, setLoading] = useState(false);\n\n const handleClick = async () => {\n setLoading(true);\n await handleDelete();\n };\n\n return (\n \n No OAuth applications \n \n OAuth applications are used to access the Ellipsis Drive API.\n \n \n history.push('/account-settings/developers/new-oauth-app', { password: history.location.state?.password })\n }\n >\n Register a new application\n \n
\n ) : (\n \n \n \n \n \n\n \n \n Danger zone\n \n setRemoveDialogOpen(true)} className={classes.secretButton}>\n Remove client\n \n \n
\n )}\n \n \n Secret\n \n \n
\n {newSecret && \n \n Your redirect URLs\n \n setNewURLDialogOpen(true)}\n disabled={user.client?.redirectUri?.length >= 3}\n >\n Add redirect URL\n \n
\n \n {user.client.redirectUri.map((url) => (\n
\n \n {url} \n {user.client.redirectUri?.length > 1 && (\n handleRemoveRedirectURL(url)}\n size=\"large\"\n >\n
\n ))}\n \n {user?.username} \n \n Revoke authorization\n \n
\n );\n};\n\nApplicationListItem.propTypes = {\n user: PropTypes.shape({\n id: PropTypes.string.isRequired,\n }).isRequired,\n handleDelete: PropTypes.func.isRequired,\n};\nexport default ApplicationListItem;\n","import React, { useState, useEffect, useCallback } from 'react';\n\nimport { Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport ApiManager from '../../../ApiManager';\nimport { SectionTitle, useMainContext } from '../../../ReusableComponents';\nimport { useMinimalAuth } from '../../AuthContext';\nimport ApplicationListItem from './ApplicationListItem';\n\nconst useStyles = makeStyles()((theme) => ({\n caption: {\n marginBottom: '6px',\n marginTop: '-8px',\n hyphens: 'none',\n },\n emptyContainer: {\n width: '100%',\n boxSizing: 'border-box',\n padding: '20px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n authorizedAppsContainer: {\n border: `1px solid ${theme.palette.divider}`,\n borderRadius: '6px',\n width: '100%',\n },\n appsTitle: {\n marginBottom: '10px',\n marginRight: 'auto',\n marginTop: '30px',\n },\n}));\n\nconst Applications = () => {\n const { classes } = useStyles();\n const user = useMinimalAuth();\n const { onOpenSnackbar } = useMainContext();\n\n const [authorizedApps, setAuthorizedApps] = useState(null);\n\n const fetchClients = useCallback(async () => {\n const clients = await ApiManager.get('/v3/oauth/myClients', null, user);\n setAuthorizedApps(clients);\n }, [user]);\n\n useEffect(() => {\n fetchClients();\n }, [user, fetchClients]);\n\n const handleRevokeApp = async (userId) => {\n const res = await ApiManager.post('/oauth/revoke', { clientId: userId }, user);\n\n if (!!res) {\n await fetchClients();\n onOpenSnackbar({\n level: 'success',\n content: 'Authorization successfully revoked.',\n });\n }\n };\n\n return (\n \n \n Authorized OAuth Apps \n \n \n You can connect your Ellipsis Drive account to third party applications using OAuth. When authorizing an OAuth\n App, you should ensure you trust the application and review that you are fine with the permissions you grant the\n application.\n \n {authorizedApps?.length > 0 ? (\n <>\n These third parties have access to your drive: \n
\n );\n};\n\nexport default Applications;\n","import React, { useState } from 'react';\n\nimport { Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport PropTypes from 'prop-types';\n\nimport { AvatarWithInfo, LoadingButton } from '../../../ReusableComponents';\n\nconst useApplicationListItemStyles = makeStyles()((theme) => ({\n container: {\n padding: '16px',\n display: 'grid',\n gridTemplateColumns: 'min-content 1fr max-content',\n gridGap: '20px',\n alignItems: 'center',\n borderBottom: `1px solid ${theme.palette.divider}`,\n '&:last-child': {\n borderBottom: 'none',\n },\n },\n title: {\n gridColumn: 2,\n },\n button: {\n gridColumn: 3,\n },\n}));\n\nconst ApplicationListItem = ({ user, handleDelete }) => {\n const { classes } = useApplicationListItemStyles();\n\n const [loading, setLoading] = useState(false);\n\n const handleClick = async () => {\n setLoading(true);\n await handleDelete();\n };\n\n return (\n \n {authorizedApps.map((app) => (\n handleRevokeApp(app.userId)}\n {...app}\n />\n ))}\n
\n \n ) : (\n \n No authorized OAuth Apps. \n
\n )}\n \n {user && {user?.username} \n \n {user ? 'Revoke authorization' : 'Add new key'}\n \n
\n );\n};\n\nApplicationListItem.propTypes = {\n user: PropTypes.shape({\n id: PropTypes.string.isRequired,\n }).isRequired,\n handleDelete: PropTypes.func.isRequired,\n};\nexport default ApplicationListItem;\n","import React, { useState, useEffect, useCallback } from 'react';\n\nimport { Typography /* , Button */ } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\n// import ApiManager from '../../../ApiManager';\nimport { SectionTitle /* , useMainContext */ } from '../../../ReusableComponents';\nimport { useMinimalAuth } from '../../AuthContext';\nimport ApplicationListItem from './ApplicationListItem';\n\nconst useStyles = makeStyles()((theme) => ({\n emptyContainer: {\n width: '100%',\n boxSizing: 'border-box',\n padding: '20px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n authorizedAppsContainer: {\n border: `1px solid ${theme.palette.divider}`,\n borderRadius: '6px',\n width: '100%',\n },\n}));\n\nconst ConnectionKeys = () => {\n const { classes } = useStyles();\n const user = useMinimalAuth();\n // const { onOpenSnackbar } = useMainContext();\n\n const [authorizedApps, setAuthorizedApps] = useState(null);\n\n const fetchClients = useCallback(async () => {\n const clients = [{ name: 'Google BigQuery testset' }, { name: 'AWS S3' }, { name: 'Github' }];\n setAuthorizedApps(clients);\n }, [user]);\n\n useEffect(() => {\n fetchClients();\n }, [user, fetchClients]);\n\n return (\n <>\n \n \n External connection keys \n \n \n Ellipsis Drive can read data from sources such as S3 buckets or bigQuery tables. When making use of this you\n need to provide access keys here.\n \n {authorizedApps?.length > 0 ? (\n <>\n Ellipsis Drive has the following keys: \n
\n \n );\n};\n\nexport default ConnectionKeys;\n","import React, { useState, useEffect, useCallback } from 'react';\n\nimport ApiManager from 'ApiManager';\n\nimport { AvatarWithInfo, SectionTitle, useMainContext, UserSelect } from '../../../ReusableComponents';\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n Tooltip,\n List,\n ListItem,\n ListItemText,\n IconButton,\n ListItemAvatar,\n} from '@mui/material';\nimport { useMinimalAuth } from '../../AuthContext';\n\nimport { Add, Delete } from '@mui/icons-material';\nimport DialogTitle from 'ReusableComponents/DialogTitle/DialogTitle';\n\nconst Admins = () => {\n const user = useMinimalAuth();\n\n const [admins, setAdmins] = useState([]);\n const { onOpenSnackbar } = useMainContext();\n\n const [open, setOpen] = useState(false);\n const [selectedUser, setSelectedUser] = useState();\n\n const addAdmin = useCallback(() => {\n ApiManager.post(`/v3/organization/admin`, { userId: selectedUser.id }, user)\n .then((r) => {\n onOpenSnackbar({ status: 'success', content: 'User added as organization admin' });\n setOpen(false);\n setAdmins([...admins, selectedUser]);\n setSelectedUser(null);\n })\n .catch((e) => {\n console.error(e);\n onOpenSnackbar({\n level: 'error',\n content: e.message,\n });\n });\n }, [admins, onOpenSnackbar, selectedUser, user]);\n\n const removeAdmin = useCallback(\n (u) => {\n ApiManager.delete(`/v3/organization/admin/${u.id}`, {}, user)\n .then((res) => {\n setAdmins(admins.filter((x) => x.id !== u.id));\n onOpenSnackbar({ status: 'success', content: 'User removed as organization admin' });\n })\n .catch((e) => {\n console.error(e);\n onOpenSnackbar({ level: 'error', content: e.message });\n });\n },\n [admins, onOpenSnackbar, user]\n );\n\n useEffect(() => {\n ApiManager.get(`/v3/organization/admin`, {}, user)\n .then((r) => {\n setAdmins(r);\n })\n .catch((err) => {\n console.error(err);\n onOpenSnackbar({\n level: 'error',\n content: 'Error fetching admins',\n });\n });\n }, [onOpenSnackbar, user]);\n\n return (\n \n {authorizedApps.map((app) => (\n {}}\n {...app}\n />\n ))}\n {}} />\n
\n \n ) : (\n \n No authorized OAuth Apps. \n
\n )}\n \n \n Organization admins \n \n {admins?.length > 0 && (\n
\n );\n};\n\nexport default Admins;\n","import React, { useState, useEffect, useCallback } from 'react';\n\nimport ApiManager from 'ApiManager';\n\nimport { AvatarWithInfo, SectionTitle, useMainContext, UserSelect } from '../../../ReusableComponents';\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n List,\n ListItem,\n ListItemText,\n IconButton,\n ListItemAvatar,\n TextField,\n DialogContentText,\n Popover,\n MenuList,\n ListItemIcon,\n Typography,\n ListItemSecondaryAction,\n ListItemButton,\n Divider,\n Box,\n Stack,\n} from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { useMinimalAuth } from '../../AuthContext';\n\nimport { AccountBox, Add, Delete, Edit, Group, MoreVert } from '@mui/icons-material';\nimport DialogTitle from 'ReusableComponents/DialogTitle/DialogTitle';\nimport ProfilePictureDialog from '../Profile/ProfilePictureDialog';\nimport VersionUtility from 'VersionUtility';\n\nconst useStyles = makeStyles()((theme) => ({\n container: {\n width: 'min(95vw, 360px)',\n maxHeight: 'min(80vh, 700px)',\n overflowY: 'auto',\n boxSizing: 'border-box',\n zIndex: 2000,\n marginTop: theme.spacing(1),\n },\n popper: {},\n}));\n\nconst UserGroups = () => {\n const { classes } = useStyles();\n\n const user = useMinimalAuth();\n\n const [groups, setGroups] = useState([]);\n const [groupName, setGroupName] = useState('');\n const [newPicture, setNewPicture] = useState(null);\n\n const { onOpenSnackbar } = useMainContext();\n\n const [openRename, setOpenRename] = useState(false);\n\n const [openAddGroup, setOpenAddGroup] = useState(false);\n const [openSureRemove, setOpenSureRemove] = useState(false);\n const [openPopOver, setOpenPopOver] = useState(false);\n const [openProfile, setOpenProfile] = useState(false);\n\n const [openAddUser, setOpenAddUser] = useState(false);\n\n const addGroup = useCallback(() => {\n ApiManager.post(`/v3/organization/group`, { username: groupName }, user)\n .then((r) => {\n onOpenSnackbar({ status: 'success', content: 'Group has been added' });\n setOpenAddGroup(false);\n setGroups([...groups, { username: groupName, id: r.id, type: 'userGroup' }]);\n })\n .catch((e) => {\n console.error(e);\n onOpenSnackbar({\n level: 'error',\n content: e.message,\n });\n });\n }, [groups, onOpenSnackbar, user, groupName]);\n\n const removeGroup = useCallback(\n (u) => {\n ApiManager.delete(`/v3/organization/group/${u.id}`, {}, user)\n .then((res) => {\n setGroups(groups.filter((x) => x.id !== u.id));\n onOpenSnackbar({ status: 'success', content: 'User group removed' });\n setOpenSureRemove(false);\n })\n .catch((e) => {\n console.error(e);\n onOpenSnackbar({ level: 'error', content: e.message });\n });\n },\n [groups, onOpenSnackbar, user]\n );\n\n const submitNewName = (organization) => {\n ApiManager.put(`/v3/organization/group/${organization.id}/username`, { username: groupName }, user)\n .then((r) => {\n setOpenRename(false);\n setGroups((prev) => {\n return prev.map((o) => {\n if (organization.id === o.id) {\n const newO = { ...o };\n newO.username = groupName;\n return newO;\n } else {\n return o;\n }\n });\n });\n })\n .catch((err) => {\n console.error(err);\n onOpenSnackbar({\n level: 'error',\n content: 'Error fetching user groups',\n });\n });\n };\n\n useEffect(() => {\n ApiManager.get(`/v3/organization/${user.id}/group`, {}, user)\n .then((r) => {\n r = r.map((a) => VersionUtility.convertAccount(a));\n setGroups(r);\n })\n .catch((err) => {\n console.error(err);\n onOpenSnackbar({\n level: 'error',\n content: 'Error fetching user groups',\n });\n });\n }, [onOpenSnackbar, user]);\n\n const handlePictureSubmit = async (picture) => {\n ApiManager.patch(`/v3/organization/group/${openProfile.id}/profile`, { picture }, user)\n .then((r) => {\n setNewPicture(null);\n setOpenProfile(false);\n setGroups((prev) =>\n prev.map((g) => {\n if (g.id === openProfile.id) {\n return { ...g, picture };\n } else {\n return g;\n }\n })\n );\n })\n .catch((e) => {\n console.log(e);\n });\n };\n\n return (\n - \n {admins?.map((o) => (\n
\n {\n setOpenPopOver(false);\n }}\n className={classes.popper}\n BackdropProps={{ invisible: false }}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n >\n \n {\n setOpenPopOver(false);\n setOpenAddUser(openPopOver?.organization);\n }}\n >\n \n \n {\n setOpenPopOver(false);\n setGroupName(openPopOver?.organization.username);\n setOpenRename(openPopOver?.organization);\n }}\n >\n \n \n {\n setOpenPopOver(false);\n setOpenProfile(openPopOver?.organization);\n }}\n >\n \n \n {\n setOpenPopOver(false);\n\n setOpenSureRemove(openPopOver?.organization);\n }}\n >\n \n \n \n \n \n Organization groups \n \n {groups?.length > 0 && (\n setOpenProfile(false)}\n setOpen={() => {}}\n newPicture={newPicture}\n setNewPicture={setNewPicture}\n onSubmit={handlePictureSubmit}\n />\n
\n );\n};\n\nexport const GroupDialog = ({ openAddUser, setOpenAddUser, onDeleteSelf, isOrg }) => {\n const user = useMinimalAuth();\n\n const [selectedUser, setSelectedUser] = useState();\n const [groupUsers, setGroupUsers] = useState([]);\n const { onOpenSnackbar } = useMainContext();\n\n useEffect(() => {\n if (openAddUser) {\n ApiManager.get(`/v3/organization/group/${openAddUser.id}/user`, {}, user)\n .then((r) => {\n setGroupUsers(r);\n })\n .catch((e) => {\n console.error(e);\n onOpenSnackbar({\n level: 'error',\n content: e.message,\n });\n });\n } else {\n setGroupUsers([]);\n }\n }, [openAddUser, onOpenSnackbar, user]);\n\n const addUser = (organization, isAdmin) => {\n ApiManager.post(\n `/v3/organization/group/${organization.id}/user`,\n { userId: selectedUser.id, isGroupAdmin: isAdmin },\n user\n )\n .then((r) => {\n setGroupUsers((prev) => [...prev, selectedUser]);\n onOpenSnackbar({ status: 'success', content: 'User was added to the group' });\n\n setSelectedUser(null);\n })\n .catch((e) => {\n console.error(e);\n onOpenSnackbar({\n level: 'error',\n content: e.message,\n });\n });\n };\n\n const removeUserFromGroup = (u) => {\n ApiManager.delete(`/v3/organization/group/${openAddUser.id}/user/${u.id}`, {}, user)\n .then((r) => {\n setGroupUsers((prev) => prev.filter((x) => x.id !== u.id));\n\n if (u.id === user.id) {\n onDeleteSelf && onDeleteSelf();\n setOpenAddUser(false);\n }\n })\n .catch((err) => {\n console.error(err);\n onOpenSnackbar({\n level: 'error',\n content: 'Error fetching user groups',\n });\n });\n };\n\n return (\n \n );\n};\n\nexport default UserGroups;\n","import React, { useState, useEffect, useCallback } from 'react';\n\nimport {\n List,\n ListItem,\n Tooltip,\n ListItemIcon,\n ListItemText,\n ListItemSecondaryAction,\n IconButton,\n CircularProgress,\n} from '@mui/material';\nimport { Delete, CheckCircle, Cancel } from '@mui/icons-material';\nimport { useMainContext } from '../../../ReusableComponents';\n\nimport ApiManager from 'ApiManager';\nimport { SectionTitle } from '../../../ReusableComponents';\n\nimport { useMinimalAuth } from '../../AuthContext';\n\nconst PersonalAccessTokens = () => {\n const user = useMinimalAuth();\n const [tokens, setTokens] = useState([]);\n const [loading, setLoading] = useState(true);\n const { onOpenSnackbar } = useMainContext();\n\n const onDelete = (token) => {\n ApiManager.delete(`/v3/account/security/accessToken/${token.id}`, null, user)\n .then((r) => {\n setTokens((tokens) => tokens.filter((t) => t.id !== token.id));\n onOpenSnackbar({ level: 'success', content: 'Token revoked' });\n })\n .catch((e) => {\n onOpenSnackbar({ level: 'error', content: e.message });\n });\n };\n\n const getPage = useCallback(\n (nextPageStart) => {\n ApiManager.get('/v3/account/security/accessToken', { pageStart: nextPageStart }, user)\n .then((r) => {\n setTokens((tokens) => [...tokens, ...r.result]);\n if (r.nextPageStart) {\n getPage(r.nextPageStart);\n } else {\n setLoading(false);\n }\n })\n .catch((e) => {\n onOpenSnackbar({ level: 'error', content: e.message });\n });\n },\n [user, onOpenSnackbar]\n );\n\n useEffect(() => {\n getPage(null);\n }, [getPage]);\n\n return (\n <>\n - \n {groups?.map((o) => (\n
- \n {tokens.map((t) => (\n
\n \n \n \n OAuth Apps\n \n {' > '}\n OAuth Apps\n \n Register OAuth app \n \n \n Application callback URL: \n \n
\n );\n};\n\nexport default NewOAuthApp;\n","import React, { useCallback, useState } from 'react';\n\nimport { useHistory } from 'react-router-dom';\nimport ApiManager from 'ApiManager';\n\nimport { SectionTitle, useMainContext } from 'ReusableComponents';\n\nimport {\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n TextField,\n Tooltip,\n List,\n ListItem,\n ListItemText,\n ListItemAvatar,\n} from '@mui/material';\nimport { useAuth, useAuthFuncs } from '../../AuthContext';\n\nimport { Add, Login } from '@mui/icons-material';\nimport DialogTitle from 'ReusableComponents/DialogTitle/DialogTitle';\nimport CustomAvatar from 'ReusableComponents/CustomAvatar';\n\nconst Organizations = () => {\n const history = useHistory();\n const user = useAuth();\n\n const [organizationName, setOrganizationName] = useState('');\n const [open, setOpen] = useState(false);\n const [openEnter, setOpenEnter] = useState(false);\n\n const { onOpenSnackbar } = useMainContext();\n const { fetchUserInfo } = useAuthFuncs();\n\n const addOrganization = useCallback(() => {\n ApiManager.post(`/v3/organization`, { username: organizationName }, user)\n .then(() => {\n fetchUserInfo();\n })\n .catch((e) => {\n console.error(e);\n onOpenSnackbar({\n content: e.message,\n level: 'error',\n });\n });\n\n setOpen(false);\n }, [fetchUserInfo, onOpenSnackbar, organizationName, user]);\n\n const handleLogin = useCallback(() => {\n ApiManager.post(`/v3/organization/logIn`, { organizationId: openEnter.id }, user)\n .then((res) => {\n fetchUserInfo({ token: res.token }, null, false, true);\n setOpen(false);\n history.push('/');\n })\n .catch((err) => {\n console.error(err);\n onOpenSnackbar({\n content: err.message,\n level: 'error',\n });\n });\n }, [fetchUserInfo, history, onOpenSnackbar, openEnter.id, user]);\n\n return (\n \n \n My organizations \n \n {user.organizations?.length > 0 && (\n
\n );\n};\n\nexport default Organizations;\n","import React, { useState, useMemo } from 'react';\n\nimport { AvatarWithInfo, SectionTitle } from '../../../ReusableComponents';\nimport { List, ListItem, ListItemText, IconButton, ListItemAvatar, Tooltip, Typography } from '@mui/material';\n\nimport { useAuth, useAuthFuncs } from '../../AuthContext';\n\nimport { Group } from '@mui/icons-material';\nimport { GroupDialog } from '../UserGroups/UserGroups';\n\nconst MyGroups = () => {\n const [openAddUser, setOpenAddUser] = useState(false);\n const { fetchUserInfo } = useAuthFuncs();\n const user = useAuth();\n\n const onDeleteSelf = () => {\n fetchUserInfo();\n };\n\n const groups = useMemo(() => user?.organizations?.flatMap((o) => o?.groups) ?? [], [user?.organizations]);\n\n return (\n - \n {user.organizations?.map((o) => (\n
\n \n My Groups \n \n {groups?.length > 0 ? (\n You are not in a group yet \n )}\n
\n );\n};\n\nexport default MyGroups;\n","import React, { useMemo } from 'react';\n\nimport { Grid } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport { Switch, Redirect } from 'react-router-dom';\nimport { Helmet } from 'react-helmet';\nimport capitalize from 'lodash/capitalize';\n\nimport Sidebar from '../../ReusableComponents/SettingsSidebar';\nimport { useAuth } from '../AuthContext';\n\nimport AccountSecurity from './AccountSecurity';\nimport Profile from './Profile';\nimport Developers from './Developers';\nimport Applications from './Applications';\nimport ConnectionKeys from './ConnectionKeys';\nimport Admins from './Admins';\nimport UserGroups from './UserGroups';\n\nimport PersonalAccessTokens from './PersonalAccessTokens';\nimport NewOAuthApp from './NewOAuthApp';\nimport { useHistory } from 'react-router-dom';\nimport SentryRoute from 'ReusableComponents/SentryRoute/SentryRoute';\nimport ApiManager from 'ApiManager';\nimport Organizations from './Organizations';\nimport MyGroups from './MyGroups';\nimport { Lock } from '@mui/icons-material';\n// import ChangeHostLocation from './ChangeHostLocation/ChangeHostLocation';\n\nconst ROOT_PATH = '/account-settings';\n\nconst useStyles = makeStyles()((theme) => ({\n gridRoot: {\n maxWidth: '1024px',\n\n margin: 'auto',\n [theme.breakpoints.down('md')]: {\n width: '90%',\n },\n },\n}));\n\nconst AccountManagement = () => {\n const { classes } = useStyles();\n const user = useAuth();\n const history = useHistory();\n\n const tabs = useMemo(\n () => [\n ...[\n { type: 'subheading', title: 'Account' },\n {\n name: 'Profile',\n path: 'profile',\n component: Profile,\n type: 'tab',\n },\n {\n name: 'Account Security',\n path: 'security',\n component: AccountSecurity,\n type: 'tab',\n },\n ],\n ...[\n { type: 'subheading', title: 'Organization' },\n ...(user?.type !== 'organization'\n ? [\n {\n name: 'Organizations',\n path: 'organizations',\n component: Organizations,\n type: 'tab',\n },\n\n {\n name: 'My Groups',\n path: 'my-groups',\n component: MyGroups,\n type: 'tab',\n },\n ]\n : [\n {\n name: 'Organization admins',\n path: 'admins',\n component: Admins,\n type: 'tab',\n },\n {\n name: 'Organization User groups',\n path: 'user-groups',\n component: UserGroups,\n type: 'tab',\n },\n ]),\n ],\n ...[\n ...(user?.type !== 'organization' && user?.username === 'admin'\n ? [{ type: 'subheading', title: 'Development' }]\n : []),\n ...(user?.type !== 'organization'\n ? [\n {\n name: 'Applications',\n path: 'applications',\n component: Applications,\n type: 'tab',\n },\n {\n name: 'Personal access tokens',\n path: 'personal-access-tokens',\n component: PersonalAccessTokens,\n type: 'tab',\n },\n ...(user?.commercial\n ? [\n {\n name: 'OAuth',\n path: 'OAuth',\n component: Developers,\n type: 'tab',\n endIcon: Lock,\n },\n ]\n : []),\n ]\n : []),\n ...(user?.username === 'admin'\n ? [\n {\n name: 'External connection keys',\n path: 'connection-keys',\n component: ConnectionKeys,\n type: 'tab',\n },\n ]\n : []),\n ],\n ],\n [user?.commercial, user?.type, user?.username]\n );\n\n const filteredTabs = useMemo(() => tabs?.filter((t) => t.type === 'tab'), [tabs]);\n\n if (!user) {\n let url = `${window.location.pathname}${window.location.search}`;\n if (url.includes('account-settings')) {\n history.push('/login', { from: url });\n }\n return null;\n }\n\n return (\n - \n {groups?.map((o) => (\n
\n \n \n \n \n \n \n \n {tabs.map((tab, i) => (\n path} />\n ))}\n \n \n \n\n \n \n {filteredTabs.map((tab, i) => (\n \n \n \n {capitalize(tab.name)} settings - {ApiManager?.displayName ?? 'Ellipsis Drive'}\n \n \n \n ))}\n\n \n \n\n \n \n \n \n \n
\n );\n};\n\nexport default AccountManagement;\n","import React, { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport isEqual from 'lodash/isEqual';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { useLocalStorage, useQueryParams } from '../hooks';\nimport ApiManager from '../ApiManager';\nimport VersionUtility from 'VersionUtility';\n\nconst LOCAL_STORE_USER_KEY = 'user';\nconst LOCAL_STORE_ACCOUNTS_KEY = 'accounts';\n\nconst authContext = createContext();\nconst authAccountsContext = createContext();\nconst authMinimalContext = createContext();\nconst authFuncsContext = createContext();\n\nconst UserProvider = ({ children }) => {\n const [user, setUser] = useLocalStorage(LOCAL_STORE_USER_KEY, null);\n const [accounts, setAccounts] = useLocalStorage(LOCAL_STORE_ACCOUNTS_KEY, []);\n const { token } = useQueryParams();\n\n // callback ref pattern\n // see https://epicreact.dev/the-latest-ref-pattern-in-react/\n const setUserRef = useRef(setUser);\n const setAccountsRef = useRef(setAccounts);\n React.useLayoutEffect(() => {\n setUserRef.current = setUser;\n setAccountsRef.current = setAccounts;\n });\n\n // syncs all tabs wrt the logged user\n useEffect(() => {\n const handleStorageChange = (e) => {\n // if the change was on the right key and is different from what we have\n if (e.key === LOCAL_STORE_USER_KEY) {\n if (!isEqual(e.oldValue, e.newValue)) {\n setUserRef.current(JSON.parse(e.newValue));\n }\n }\n };\n\n window.addEventListener('storage', handleStorageChange);\n\n return () => {\n window.removeEventListener('storage', handleStorageChange);\n };\n }, []);\n\n // returns the user if it exists in the array, else returns false\n const isUserAccountRegistered = (accounts, user) => {\n return accounts.find((account) => account.id === user.id) ?? false;\n };\n\n const signout = useCallback((cb) => {\n console.log('sign out');\n setUserRef.current(null);\n cb && cb();\n }, []);\n\n const removeAccount = useCallback(\n (userToDelete, cb) => {\n const index = accounts.findIndex((account) => account.id === userToDelete.id);\n if (index > -1) {\n accounts.splice(index, 1);\n setAccountsRef.current(accounts);\n try {\n localStorage.setItem(LOCAL_STORE_ACCOUNTS_KEY, JSON.stringify(accounts));\n } catch (e) {\n console.warn(e);\n }\n }\n cb && cb();\n },\n [accounts]\n );\n\n const minimalUser = useMemo(\n () => (user?.token ? { id: user.id, token: user.token, username: user.username } : null),\n [user?.id, user?.token, user?.username]\n );\n\n const fetchUserInfo = useCallback(\n async (customUser = null, cb = null, fetchPaymentMethod = false, isOrganization = false) => {\n const authUser = customUser ?? user;\n if (!authUser) {\n return;\n }\n\n let info;\n let history;\n let paymentMethod;\n let organizations;\n\n if (authUser?.token.includes('epat_') && window.location.pathname.includes('/view')) {\n info = {};\n history = null;\n } else {\n try {\n if (fetchPaymentMethod) {\n if (isOrganization || authUser?.type === 'organization') {\n [info, history, paymentMethod] = await Promise.all([\n ApiManager.get('/v3/account', null, authUser),\n ApiManager.get('/v3/account/history', null, authUser),\n ApiManager.get('/v3/account/stripe/paymentMethod', null, authUser),\n ]);\n organizations = [];\n } else {\n [info, history, paymentMethod, organizations] = await Promise.all([\n ApiManager.get('/v3/account', null, authUser),\n ApiManager.get('/v3/account/history', null, authUser),\n ApiManager.get('/v3/account/stripe/paymentMethod', null, authUser),\n ApiManager.get('/v3/account/organization', null, authUser),\n ]);\n }\n\n info = VersionUtility.convertAccount(info);\n info.paymentMethod = paymentMethod;\n } else {\n if (isOrganization || authUser?.type === 'organization') {\n [info, history] = await Promise.all([\n ApiManager.get('/v3/account', null, authUser),\n ApiManager.get('/v3/account/history', null, authUser),\n ]);\n organizations = [];\n } else {\n [info, history, organizations] = await Promise.all([\n ApiManager.get('/v3/account', null, authUser),\n ApiManager.get('/v3/account/history', null, authUser),\n ApiManager.get('/v3/account/organization', null, authUser),\n ]);\n }\n\n info = VersionUtility.convertAccount(info);\n }\n } catch (error) {\n console.warn(error);\n if (error.status === 401 || error.status === 403) {\n signout(cb);\n }\n return false;\n }\n }\n let newUser = { ...authUser, ...info };\n\n newUser.token = authUser.token;\n newUser.history = history;\n newUser.organizations = organizations;\n\n setUserRef.current((prevUser) => {\n return newUser;\n });\n cb && cb({ ...authUser, ...newUser });\n\n return newUser;\n },\n [minimalUser, signout]\n );\n\n const signin = useCallback(\n (user, cb) => {\n const newcb = (user) => {\n console.log('signing in', user);\n if (user) {\n if (!isUserAccountRegistered(accounts, user)) {\n setAccountsRef.current([...accounts, user]);\n } else {\n // if the user is in the accounts array, we should remove the old object and put the new one with the new token\n const invalidUserIndex = accounts.findIndex((account) => account.id === user.id);\n accounts.splice(invalidUserIndex, 1);\n setAccountsRef.current([...accounts, user]);\n }\n }\n\n cb && cb();\n };\n\n fetchUserInfo(user, newcb);\n },\n [accounts, fetchUserInfo]\n );\n\n const [pollNumber /* , setPollNumber */] = useState(0);\n\n const currentUserId = useRef(null);\n useEffect(() => {\n if (currentUserId.current !== user?.id) {\n currentUserId.current = user?.id;\n } else if (user?.id) {\n fetchUserInfo();\n }\n }, [pollNumber, fetchUserInfo, user?.id]);\n\n useEffect(() => {\n const interval = setInterval(() => {\n //setPollNumber((k) => k + 1);\n }, 60000);\n\n return () => clearInterval(interval);\n }, []);\n\n const location = useLocation();\n const history = useHistory();\n\n const firstTime = useRef(true);\n\n const firstToken = useRef(true);\n useEffect(() => {\n if (token && firstToken.current) {\n firstToken.current = false;\n firstTime.current = false;\n signin({ token: token });\n\n const queryParams = new URLSearchParams(location.search);\n queryParams.delete('token');\n history.replace({\n search: queryParams.toString(),\n });\n }\n }, [token, history, location.search, signin]);\n\n useEffect(() => {\n if (firstTime.current && !token) {\n firstTime.current = false;\n fetchUserInfo();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [fetchUserInfo]);\n\n const memoizedContextUser = useMemo(\n () => ({\n user: user,\n }),\n [user]\n );\n const memoizedContextMinimalUser = useMemo(\n () => ({\n minimalUser: minimalUser,\n }),\n [minimalUser]\n );\n\n return (\n \n {errors.submit} \n
\n )}\n\n {success && (\n \n \n Thanks! An email was sent to your address with a link to verify that you own this account. You'll be\n able to reset your password with that link.\n \n
\n )}\n\n \n \n Terms of Service \n\n Privacy Policy \n\n Help Center \n
\n )}\n \n );\n};\n\nFullScreenLayout.propTypes = {\n className: PropTypes.string,\n style: PropTypes.object,\n paperClassName: PropTypes.string,\n paperStyle: PropTypes.object,\n};\n\nexport default FullScreenLayout;\n\nconst FullScreenLink = ({ href, children }) => (\n \n \n {\" By login in you give the webpage '\" +\n referer +\n \"' full access to your account. \\n Please make sure you trust this website.\"}\n \n
\n )}\n {errors.submit && (\n \n {errors.submit} \n
\n )}\n \n \n
\n );\n};\n\nexport default RegisterPage;\n","import { makeStyles } from 'tss-react/mui';\n\nconst useStyles = makeStyles()((theme) => ({\n formSide: {\n width: '100%',\n height: '100%',\n backgroundColor: theme.palette.primary.dark,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n },\n paperContainer: {\n width: '80%',\n maxWidth: '430px',\n marginTop: '5vh',\n height: 'fit-content',\n padding: '32px',\n boxSizing: 'border-box',\n [theme.breakpoints.down('lg')]: {\n marginTop: '5vh',\n },\n [theme.breakpoints.down('md')]: {\n marginTop: '50px',\n },\n [theme.breakpoints.down('sm')]: {\n marginTop: '20px',\n },\n },\n title: {\n marginBottom: '20px',\n marginTop: '10px',\n fontWeight: '600',\n [theme.breakpoints.down('sm')]: {\n marginBottom: '12px',\n },\n },\n textFieldContainer: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n margin: theme.spacing(2.5, 0),\n [theme.breakpoints.down('md')]: {\n margin: theme.spacing(2, 0),\n },\n },\n textFieldLabel: {\n marginBottom: '6px',\n },\n textField: {\n width: '100%',\n },\n formHelperText: {\n margin: '0 14px',\n },\n submitButton: {\n margin: theme.spacing(1, 0),\n width: '100%',\n },\n backButton: {\n width: '100%',\n marginTop: '-10px',\n },\n checkboxLabel: {},\n termsErrorText: {\n color: theme.palette.error.main,\n marginLeft: '32px',\n },\n loginLinkContainer: {\n color: theme.palette.background.paper,\n display: 'flex',\n alignItems: 'baseline',\n justifyContent: 'center',\n margin: theme.spacing(2, 0),\n gap: theme.spacing(1),\n },\n link: {},\n checkboxLink: {},\n errorContainer: {\n width: '100%',\n borderRadius: '6px',\n border: `1px solid ${theme.palette.error.dark}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '10px',\n marginTop: '10px ',\n marginBottom: '10px ',\n boxSizing: 'border-box',\n },\n errorText: {\n color: theme.palette.error.dark,\n },\n popoverMenu: {\n zIndex: '10000 !important',\n },\n}));\n\nexport default useStyles;\n","import React from 'react';\n\nimport { Paper, Typography, useMediaQuery } from '@mui/material';\nimport { Link } from 'react-router-dom';\n\nimport FullScreenLayout from '../../FullScreenLayout';\nimport useStyles from './useFormSideStyles';\nimport { LinkStyleButton } from 'ReusableComponents';\n\nconst Container = ({ children }) => {\n const { classes, theme } = useStyles();\n const isSm = useMediaQuery(theme.breakpoints.down('md'));\n\n const linkContainer = (\n \n 
\n
\n \n 
\n
\n \n \n Get started for{' '}\n \n free\n \n \n\n
\n\n - \n
\n Already a user? \n \n Log in\n \n
\n );\n\n return isSm ? (\n \n
\n\n {!validationToken && (\n \n
\n )}\n \n \n setShowPassword((prev) => !prev)}\n onMouseDown={(e) => e.preventDefault()}\n size=\"large\"\n >\n {showPassword ?
\n {ApiManager.cloud === 'ellipsis' && (\n \n \n Agree to \n \n Terms of Service\n \n\n and \n \n Privacy Policy\n \n \n }\n />\n {errors.terms && (\n Agreement is required for sign up. \n )}\n
\n )}\n \n );\n};\n\nexport default FirstFormTab;\n","import React, { useState, useEffect, useRef } from 'react';\n\nimport { Typography } from '@mui/material';\nimport { useHistory } from 'react-router-dom';\n\nimport { useQueryParams, useAuthFuncs, useInput, useDebounce } from 'hooks';\nimport { checkUsername, checkEmail, checkPassword } from '../../utils';\n\nimport ApiManager from 'ApiManager';\nimport { LoadingButton, useMainContext } from 'ReusableComponents';\nimport useStyles from './useFormSideStyles';\nimport Container from './Container';\nimport HiddenHubspotFields from './HiddenHubspotFields';\nimport FirstFormTab from './FirstFormTab';\n\nimport { COOKIE_TYPES, useConsentValue, usePushToDataLayer } from 'ConsentContext';\nimport { CLOUDS } from 'ApiUrls';\n\nconst FormSide = () => {\n const { classes } = useStyles();\n const history = useHistory();\n const { signin } = useAuthFuncs();\n\n const { validationToken, userId, invitedByUserId } = useQueryParams();\n const { hubspotUrlInfo } = useMainContext();\n const [username, handleUsernameChange] = useInput();\n const debouncedUsername = useDebounce(username, 500);\n const [email, handleEmailChange] = useInput();\n\n const [password, handlePasswordChange] = useInput();\n const [termsChecked, setTermsChecked] = useState(false);\n\n const [loading, setLoading] = useState(false);\n\n const consent = useConsentValue();\n const pushToDataLayer = usePushToDataLayer();\n\n const [errors, setErrors] = useState({\n username: '',\n email: '',\n password: '',\n terms: false,\n submit: '',\n });\n\n const itemsRef = useRef([]);\n\n const handleTermsChange = (event) => {\n if (event.target.checked) setErrors((prev) => ({ ...prev, terms: false }));\n\n setTermsChecked(event.target.checked);\n };\n\n useEffect(() => {\n if (debouncedUsername !== '') checkUsername(debouncedUsername, setErrors);\n }, [debouncedUsername]);\n\n useEffect(() => {\n if (email !== '') checkEmail(email, setErrors);\n }, [email]);\n\n useEffect(() => {\n if (password !== '') checkPassword(password, setErrors);\n }, [password]);\n\n const onSubmit = async (e) => {\n e.preventDefault();\n\n if (ApiManager.cloud === 'ellipsis') {\n const validUsername = await checkUsername(username.trim(), setErrors);\n const validEmail = validationToken || checkEmail(email.trim(), setErrors);\n const validPassword = checkPassword(password.trim(), setErrors);\n console.log(validUsername);\n if (!validUsername || !validEmail || !validPassword || !termsChecked) {\n return;\n }\n }\n\n const hubspotInfo = Object.fromEntries(itemsRef?.current?.map((input) => [input.name, input.value]));\n\n let body = {\n username: username.trim(),\n password: password.trim(),\n hubspotInfo: {\n cookie_consent_on_registration: consent,\n ...(consent?.[COOKIE_TYPES?.ANALYTICAL] ? { ...hubspotInfo } : {}),\n submission_url: hubspotUrlInfo,\n },\n };\n\n if (validationToken) {\n body.validationToken = validationToken;\n body.userId = userId;\n } else {\n body.email = email.trim();\n }\n\n if (invitedByUserId) {\n body.invitedByUserId = invitedByUserId;\n }\n\n setLoading(true);\n try {\n await ApiManager.post('/v3/account', body);\n pushToDataLayer({\n dataLayer: {\n event: 'register-form-send',\n },\n });\n\n setErrors({\n username: '',\n password: '',\n submit: '',\n });\n if (validationToken) {\n try {\n let token = await ApiManager.post(\n '/v3/account/login',\n { username: body.username, password: body.password },\n null\n );\n\n signin(token, () => {\n if (invitedByUserId) {\n history.push('/drive/me');\n } else {\n history.push('/drive/me?notification=true');\n }\n });\n } catch {\n history.push('/drive/me');\n }\n } else {\n history.push('/verify');\n }\n } catch (error) {\n setErrors((prev) => ({ ...prev, submit: error.message }));\n }\n setLoading(false);\n };\n\n return (\n \n {errors.submit} \n
\n )}\n\n \n \n \n Sign up - {ApiManager?.displayName ?? 'Ellipsis Drive'} \n \n {ApiManager.cloud === CLOUDS.ellipsis &&
\n );\n};\n\nexport default RegisterPage;\n","var _g, _defs;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgErrorAstronaut(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 1504,\n height: 1752,\n viewBox: \"0 0 1504 1752\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n clipPath: \"url(#clip0)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1156.3 834.15V1260.41C1156.3 1284.71 1146.64 1308.02 1129.46 1325.2C1112.28 1342.38 1088.97 1352.04 1064.67 1352.04H470.58C446.277 1352.04 422.97 1342.39 405.784 1325.2C388.599 1308.02 378.943 1284.71 378.94 1260.41V834.15C378.94 810.954 387.741 788.621 403.565 771.661C419.39 754.701 441.059 744.376 464.2 742.77C466.29 742.58 468.42 742.51 470.58 742.51H1064.67C1088.97 742.521 1112.27 752.179 1129.45 769.363C1146.64 786.547 1156.29 809.85 1156.3 834.15Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1064.66 1364H470.59C443.123 1363.97 416.788 1353.05 397.367 1333.63C377.945 1314.2 367.024 1287.87 367 1260.4V834.15C367.032 806.689 377.957 780.362 397.378 760.947C416.799 741.531 443.129 730.614 470.59 730.59H1064.66C1092.12 730.622 1118.44 741.543 1137.85 760.957C1157.27 780.372 1168.19 806.694 1168.22 834.15V1260.4C1168.2 1287.86 1157.28 1314.2 1137.87 1333.62C1118.45 1353.04 1092.12 1363.97 1064.66 1364ZM470.59 754.46C449.462 754.484 429.207 762.887 414.267 777.827C399.327 792.767 390.924 813.022 390.9 834.15V1260.4C390.921 1281.53 399.324 1301.79 414.263 1316.73C429.203 1331.67 449.46 1340.08 470.59 1340.1H1064.66C1085.79 1340.08 1106.05 1331.67 1120.99 1316.73C1135.93 1301.79 1144.33 1281.53 1144.35 1260.4V834.15C1144.33 813.022 1135.92 792.767 1120.98 777.827C1106.04 762.887 1085.79 754.484 1064.66 754.46H470.59Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1218.4 1034.88C1216.76 1057.22 1210.06 1079.78 1197.23 1102.25H332.72C319.89 1079.78 313.15 1057.25 311.51 1034.88C307.51 981.35 332.88 929 373.85 881.3C405.47 844.46 446.43 810.39 490.49 780.77C510.93 767 532 754.21 553.18 742.51C634.24 697.68 715.85 669.22 762.52 666.29H767.42C814.09 669.22 895.67 697.68 976.73 742.51C1011.53 761.617 1044.87 783.284 1076.46 807.33C1104.11 828.54 1129.64 851.49 1151.2 875.66C1195 924.85 1222.53 979.25 1218.4 1034.88Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1199.77 1115.14C1197.51 1115.14 1195.3 1114.55 1193.34 1113.42C1191.38 1112.29 1189.76 1110.67 1188.63 1108.72C1187.49 1106.77 1186.89 1104.55 1186.88 1102.3C1186.88 1100.04 1187.46 1097.82 1188.58 1095.86C1215.88 1047.97 1215 996.41 1185.97 942.62C1110.82 803.4 864.65 685.44 769.56 679.16H765.49C670.39 685.44 424.22 803.4 349.08 942.62C320.08 996.41 319.16 1047.97 346.46 1095.86C347.298 1097.33 347.839 1098.95 348.051 1100.63C348.263 1102.31 348.142 1104.02 347.694 1105.65C347.247 1107.28 346.483 1108.81 345.445 1110.15C344.407 1111.49 343.116 1112.61 341.645 1113.45C340.174 1114.28 338.553 1114.82 336.873 1115.04C335.193 1115.25 333.488 1115.13 331.855 1114.68C330.222 1114.23 328.693 1113.47 327.356 1112.43C326.018 1111.39 324.898 1110.1 324.06 1108.63C292.06 1052.49 292.84 992.52 326.39 930.37C406.89 781.22 662.07 659.84 764.26 653.37H765.07H770.78C872.97 659.81 1128.15 781.19 1208.66 930.37C1242.2 992.52 1242.98 1052.49 1210.99 1108.63C1209.86 1110.61 1208.23 1112.25 1206.26 1113.4C1204.29 1114.54 1202.05 1115.14 1199.77 1115.14Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1144.67 581.54C1142.63 581.669 1140.62 580.982 1139.08 579.63C1137.55 578.278 1136.61 576.372 1136.48 574.33L1122.29 352.33C1122.22 351.318 1122.36 350.303 1122.68 349.342C1123.01 348.382 1123.52 347.496 1124.19 346.734C1124.86 345.972 1125.68 345.35 1126.59 344.903C1127.5 344.456 1128.49 344.194 1129.5 344.13C1140.12 343.452 1150.76 344.871 1160.83 348.308C1170.9 351.744 1180.19 357.13 1188.18 364.158C1196.16 371.185 1202.68 379.717 1207.37 389.266C1212.06 398.815 1214.82 409.194 1215.5 419.81L1220.34 495.51C1221.02 506.128 1219.61 516.776 1216.17 526.847C1212.74 536.917 1207.35 546.212 1200.33 554.201C1193.3 562.19 1184.77 568.717 1175.22 573.408C1165.67 578.098 1155.29 580.862 1144.67 581.54Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1144.18 583.09C1141.83 583.085 1139.57 582.187 1137.85 580.578C1136.13 578.968 1135.09 576.767 1134.94 574.42L1120.75 352.42C1120.6 349.97 1121.42 347.56 1123.04 345.717C1124.66 343.874 1126.95 342.75 1129.4 342.59C1151.24 341.217 1172.74 348.566 1189.17 363.024C1205.61 377.482 1215.63 397.869 1217.05 419.71L1221.89 495.4C1222.58 506.219 1221.14 517.069 1217.63 527.329C1214.13 537.589 1208.65 547.059 1201.48 555.198C1194.32 563.337 1185.63 569.986 1175.9 574.765C1166.17 579.544 1155.59 582.359 1144.77 583.05L1144.18 583.09ZM1134.78 345.54C1133.06 345.54 1131.33 345.59 1129.6 345.7C1127.96 345.806 1126.43 346.557 1125.35 347.789C1124.27 349.021 1123.72 350.633 1123.82 352.27L1138.01 574.27C1138.06 575.082 1138.27 575.876 1138.63 576.606C1138.98 577.337 1139.48 577.989 1140.09 578.526C1140.7 579.063 1141.41 579.475 1142.18 579.736C1142.95 579.998 1143.77 580.104 1144.58 580.05C1165.62 578.703 1185.26 569.056 1199.18 553.231C1213.1 537.405 1220.17 516.697 1218.83 495.66L1213.99 419.96C1212.7 399.819 1203.8 380.923 1189.09 367.104C1174.38 353.286 1154.96 345.58 1134.78 345.55V345.54Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M1218.09 460L1220.37 495.5C1221.72 516.94 1214.51 538.04 1200.32 554.165C1186.12 570.291 1166.11 580.122 1144.67 581.5C1142.63 581.623 1140.61 580.932 1139.08 579.577C1137.54 578.222 1136.6 576.314 1136.47 574.27L1132.68 515.27C1133.37 516.586 1134.43 517.675 1135.72 518.405C1137.02 519.136 1138.5 519.478 1139.98 519.39L1145.25 519.04C1162.01 517.967 1178.03 511.709 1191.08 501.131C1204.13 490.553 1213.57 476.179 1218.09 460Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1144.17 595.87C1138.57 595.864 1133.18 593.73 1129.1 589.899C1125.01 586.068 1122.54 580.828 1122.17 575.24L1107.98 353.24C1107.61 347.408 1109.57 341.668 1113.44 337.281C1117.3 332.894 1122.74 330.218 1128.57 329.84C1153.8 328.232 1178.64 336.71 1197.62 353.412C1216.6 370.113 1228.17 393.669 1229.79 418.9L1234.62 494.6C1236.23 519.831 1227.76 544.67 1211.06 563.653C1194.36 582.635 1170.8 594.206 1145.57 595.82C1145.11 595.86 1144.64 595.87 1144.17 595.87ZM1137 358.33L1150.31 566.51C1166.63 563.808 1181.37 555.146 1191.67 542.201C1201.97 529.256 1207.09 512.95 1206.06 496.44L1201.22 420.74C1200.16 404.225 1193.01 388.692 1181.14 377.158C1169.27 365.624 1153.54 358.914 1137 358.33Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M396.77 391C397.783 390.935 398.798 391.07 399.759 391.398C400.719 391.726 401.605 392.239 402.367 392.91C403.129 393.581 403.75 394.395 404.197 395.306C404.644 396.217 404.906 397.207 404.97 398.22L419.16 620.22C419.227 621.232 419.093 622.247 418.766 623.208C418.439 624.168 417.927 625.055 417.257 625.816C416.587 626.578 415.773 627.2 414.863 627.647C413.952 628.094 412.962 628.356 411.95 628.42C401.334 629.098 390.688 627.679 380.621 624.242C370.553 620.806 361.261 615.42 353.275 608.393C345.289 601.365 338.766 592.833 334.077 583.284C329.389 573.735 326.627 563.356 325.95 552.74L321.09 477C320.412 466.384 321.831 455.738 325.268 445.671C328.704 435.603 334.09 426.311 341.117 418.325C348.145 410.339 356.677 403.816 366.226 399.127C375.775 394.439 386.154 391.677 396.77 391Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M406.67 630.08C385.707 630.054 365.54 622.053 350.261 607.701C334.982 593.348 325.736 573.72 324.4 552.8L319.56 477.1C318.868 466.281 320.314 455.432 323.816 445.171C327.317 434.911 332.805 425.441 339.966 417.302C347.128 409.163 355.822 402.514 365.553 397.735C375.284 392.956 385.861 390.141 396.68 389.45C399.129 389.299 401.539 390.125 403.381 391.746C405.223 393.367 406.348 395.652 406.51 398.1L420.7 620.1C420.779 621.314 420.617 622.531 420.225 623.682C419.833 624.833 419.217 625.896 418.414 626.809C417.61 627.722 416.635 628.468 415.543 629.003C414.451 629.539 413.264 629.854 412.05 629.93C410.25 630 408.45 630.08 406.67 630.08ZM396.87 392.51C375.834 393.857 356.194 403.504 342.27 419.33C328.346 435.155 321.278 455.864 322.62 476.9L327.46 552.6C328.807 573.636 338.454 593.276 354.28 607.2C370.105 621.124 390.814 628.192 411.85 626.85C412.661 626.799 413.454 626.588 414.184 626.229C414.913 625.87 415.564 625.371 416.1 624.76C416.641 624.153 417.055 623.444 417.318 622.675C417.581 621.905 417.687 621.091 417.63 620.28L403.44 398.28C403.389 397.469 403.179 396.676 402.821 395.946C402.463 395.216 401.965 394.564 401.354 394.027C400.744 393.49 400.034 393.079 399.264 392.817C398.495 392.555 397.681 392.447 396.87 392.5V392.51Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M415.25 558.6L419.18 620.18C419.303 622.227 418.61 624.239 417.254 625.775C415.897 627.312 413.986 628.249 411.94 628.38C390.501 629.75 369.396 622.547 353.268 608.356C337.14 594.165 327.31 574.149 325.94 552.71L323.94 520.81C331.257 534.559 342.383 545.907 355.985 553.495C369.586 561.082 385.087 564.587 400.63 563.59L408.73 563.07C410.116 562.972 411.451 562.507 412.597 561.721C413.743 560.935 414.659 559.858 415.25 558.6Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M406.72 642.87C382.507 642.822 359.217 633.577 341.564 617.004C323.911 600.432 313.215 577.772 311.64 553.61L306.8 477.91C305.192 452.678 313.67 427.841 330.372 408.859C347.073 389.878 370.629 378.307 395.86 376.69C398.75 376.5 401.648 376.883 404.39 377.816C407.131 378.748 409.661 380.213 411.835 382.126C414.009 384.039 415.784 386.363 417.058 388.963C418.332 391.563 419.081 394.39 419.26 397.28L433.45 619.28C433.64 622.17 433.257 625.068 432.324 627.81C431.392 630.551 429.927 633.081 428.014 635.255C426.101 637.429 423.777 639.204 421.177 640.478C418.577 641.752 415.75 642.501 412.86 642.68C410.8 642.807 408.753 642.87 406.72 642.87ZM391.13 406C374.809 408.704 360.072 417.368 349.773 430.315C339.474 443.261 334.345 459.569 335.38 476.08L340.22 551.77C341.276 568.285 348.434 583.818 360.302 595.352C372.17 606.886 387.901 613.596 404.44 614.18L391.13 406Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1043.18 767.438C1193.63 616.989 1193.63 373.062 1043.18 222.612C892.732 72.163 648.805 72.163 498.356 222.612C347.906 373.062 347.906 616.989 498.356 767.438C648.805 917.888 892.732 917.888 1043.18 767.438Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M770.82 866.85H768.05C558.2 865.35 388.69 693.4 390.19 483.55C391.69 274.63 562.19 105.68 770.73 105.68H773.49C823.471 106.035 872.893 116.231 918.932 135.688C964.972 155.144 1006.73 183.479 1041.82 219.074C1076.91 254.669 1104.64 296.828 1123.43 343.142C1142.23 389.456 1151.71 439.019 1151.35 489C1149.86 697.9 979.39 866.85 770.82 866.85ZM770.69 108.74C696.261 108.756 623.496 130.772 561.543 172.022C499.59 213.272 451.212 271.915 422.491 340.579C393.769 409.244 385.986 484.867 400.118 557.942C414.251 631.018 449.668 698.285 501.92 751.29C572.234 822.483 667.936 862.849 767.997 863.518C868.057 864.187 964.29 825.103 1035.55 754.856C1106.81 684.609 1147.27 588.945 1148.03 488.886C1148.79 388.826 1109.8 292.556 1039.62 221.23C1004.9 185.813 963.498 157.634 917.813 138.327C872.128 119.02 823.067 108.967 773.47 108.75L770.69 108.74Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M767.18 874.87H764.26C658.12 874.14 558.63 833.31 484.11 759.87C409.59 686.43 369 589.31 369.73 486.25C370.46 383.19 412.54 286.57 488.13 214.25C563.72 141.93 663.87 102.37 769.94 103.15C876.01 103.93 975.57 144.71 1050.09 218.15C1124.61 291.59 1165.23 388.74 1164.47 491.8C1163.71 594.86 1121.66 691.48 1046.07 763.8C971.18 835.49 872.23 874.87 767.18 874.87ZM767 131.23C669.6 131.23 577.86 167.74 508.41 234.23C438.33 301.32 399.34 390.89 398.64 486.46C397.94 582.03 435.64 672.13 504.64 740.19C573.64 808.25 665.98 846.1 764.39 846.79C862.8 847.48 955.61 810.9 1025.69 743.79C1095.77 676.68 1134.77 587.12 1135.47 491.56C1136.17 396 1098.47 305.88 1029.47 237.82C960.47 169.76 868.15 131.92 769.73 131.24L767 131.23Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1143.24 486.6C1143.83 560.77 1120.3 629.82 1079.58 687.13C1049 730.09 922.73 805.85 766 808.51C620.71 810.97 487.89 734.51 456.68 692.08C415.04 635.43 390.42 566.76 389.83 492.59C388.27 296.31 556.26 213.59 764.31 211.94C972.36 210.29 1141.68 290.31 1143.24 486.6Z\",\n fill: \"#29ABE2\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.7\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.7,\n d: \"M474.64 620.78C474.64 620.78 412.3 427.63 516.05 349.64C619.8 271.65 769.93 270.76 766.49 280.42C766.49 280.42 600.6 321.98 536.61 453.9C487.27 555.63 474.64 620.78 474.64 620.78Z\",\n fill: \"white\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M873.59 1006.41C904.932 1006.41 930.34 981.002 930.34 949.66C930.34 918.318 904.932 892.91 873.59 892.91C842.248 892.91 816.84 918.318 816.84 949.66C816.84 981.002 842.248 1006.41 873.59 1006.41Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M873.59 1002.89C902.988 1002.89 926.82 979.058 926.82 949.66C926.82 920.262 902.988 896.43 873.59 896.43C844.192 896.43 820.36 920.262 820.36 949.66C820.36 979.058 844.192 1002.89 873.59 1002.89Z\",\n fill: \"#0D2E4C\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M873.59 978.44C866.669 978.439 859.98 975.943 854.749 971.41C849.518 966.877 846.096 960.611 845.11 953.76H873.59V945.57H845.11C845.82 940.628 847.804 935.956 850.866 932.013C853.929 928.07 857.965 924.992 862.577 923.081C867.189 921.17 872.22 920.493 877.173 921.115C882.127 921.737 886.834 923.638 890.83 926.63L896.83 920.63C891.635 916.467 885.417 913.775 878.826 912.837C872.235 911.898 865.513 912.747 859.362 915.295C853.212 917.842 847.858 921.995 843.861 927.319C839.864 932.643 837.37 938.943 836.64 945.56C836.333 948.281 836.333 951.029 836.64 953.75C837.375 960.365 839.872 966.661 843.87 971.982C847.868 977.303 853.221 981.452 859.37 983.998C865.52 986.544 872.24 987.393 878.829 986.456C885.418 985.518 891.635 982.83 896.83 978.67L890.83 972.67C885.858 976.401 879.807 978.416 873.59 978.41\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M902.36 949.66C902.369 955.848 900.372 961.872 896.67 966.83C896.655 966.85 896.647 966.875 896.647 966.9C896.647 966.925 896.655 966.95 896.67 966.97L902.51 972.81C902.52 972.821 902.533 972.83 902.546 972.836C902.56 972.842 902.575 972.845 902.59 972.845C902.605 972.845 902.62 972.842 902.634 972.836C902.647 972.83 902.66 972.821 902.67 972.81C907.909 966.237 910.761 958.08 910.761 949.675C910.761 941.27 907.909 933.113 902.67 926.54C902.661 926.528 902.649 926.518 902.635 926.511C902.621 926.504 902.606 926.5 902.59 926.5C902.575 926.5 902.559 926.504 902.545 926.511C902.531 926.518 902.519 926.528 902.51 926.54L896.67 932.37C896.655 932.39 896.647 932.415 896.647 932.44C896.647 932.465 896.655 932.49 896.67 932.51C900.369 937.47 902.365 943.493 902.36 949.68\",\n fill: \"#3D5870\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M765.25 1575C1095.38 1575 1363 1554.41 1363 1529.02C1363 1503.63 1095.38 1483.04 765.25 1483.04C435.122 1483.04 167.5 1503.63 167.5 1529.02C167.5 1554.41 435.122 1575 765.25 1575Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M1123.71 1409.53H373.27C373.27 1409.53 372.45 1332.64 387.27 1218.47C389.91 1197.98 393.06 1176.27 396.84 1153.57C403.97 1110.5 413.26 1063.87 425.35 1015.34C464.55 1140.91 590.83 1236.51 745.51 1236.51H752.23C906.5 1236.51 1032.42 1141.41 1072.01 1016.32C1084.01 1064.5 1093.17 1110.77 1100.24 1153.55C1104.02 1176.32 1107.17 1198.11 1109.83 1218.67C1124.53 1332.74 1123.71 1409.53 1123.71 1409.53Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1325.26 1208.27C1325.26 1208.27 1263.35 1503.64 1243.18 1510.21C1214.29 1519.6 1144.84 1509.72 1144.84 1509.72C1144.84 1509.72 1000.44 1490.17 871.14 1481.3C833.2 1478.69 796.55 1476.99 765.25 1476.99C729.35 1476.99 686.42 1479.2 642.56 1482.5C517.88 1491.82 385.67 1509.72 385.67 1509.72C385.67 1509.72 316.21 1519.6 287.31 1510.21C267.12 1503.64 205.21 1208.27 205.21 1208.27C242.04 1155.01 327.15 1160.65 367.71 1254.64C368.71 1252.97 369.85 1251.32 370.96 1249.64C386.59 1226.72 408.81 1206.39 440.45 1194.97C445.31 1193.21 450.17 1191.72 454.99 1190.47C521.99 1172.95 583.11 1202.71 626.18 1235.17C630.12 1238.11 633.85 1241.1 637.44 1244.04C637.82 1244.35 638.17 1244.64 638.53 1244.96C641.383 1247.32 644.127 1249.65 646.76 1251.96C659.677 1263.27 674.105 1272.73 689.63 1280.07C691.83 1281.07 694.04 1282.07 696.34 1283.02C718.142 1292.25 741.575 1297.01 765.25 1297.02C808.894 1296.92 851.007 1280.92 883.71 1252.02C920.1 1220.02 976.37 1183.16 1040.71 1185.39C1057.58 1185.98 1074.25 1189.22 1090.11 1194.99C1113.63 1203.44 1134.43 1218.08 1150.33 1237.37C1154.89 1242.83 1159.07 1248.59 1162.86 1254.61C1203.36 1160.65 1288.43 1155 1325.26 1208.27Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M1325.26 1208.27C1325.26 1208.27 1263.35 1503.64 1243.18 1510.19C1214.29 1519.62 1144.82 1509.72 1144.82 1509.72C1144.82 1509.72 1000.44 1490.17 871.16 1481.3C866.413 1480.96 861.693 1480.65 857 1480.36C854.06 1480.18 851.14 1479.98 848.22 1479.83C842.4 1479.47 836.633 1479.14 830.92 1478.83L822.43 1478.43C820.18 1478.31 817.95 1478.22 815.72 1478.14C813.49 1478.06 811.26 1477.94 809.07 1477.87C806.88 1477.8 804.68 1477.69 802.52 1477.62L796.05 1477.42C791.77 1477.31 787.56 1477.2 783.41 1477.13C777.19 1477.02 771.13 1476.95 765.27 1476.95C762.68 1476.95 760.07 1476.95 757.42 1476.95C753.42 1476.95 749.42 1477.04 745.22 1477.1C744.94 1477.11 744.66 1477.11 744.38 1477.1C741.06 1477.16 737.71 1477.25 734.32 1477.34C730.93 1477.43 727.5 1477.57 724.02 1477.68C710.89 1478.14 697.2 1478.81 683.25 1479.68C680.57 1479.83 677.9 1479.99 675.2 1480.17C669.83 1480.5 664.41 1480.86 658.97 1481.24C653.53 1481.62 648.07 1482 642.58 1482.42C517.92 1491.74 385.67 1509.64 385.67 1509.64C385.67 1509.64 316.23 1519.54 287.33 1510.11C267.16 1503.56 205.25 1208.19 205.25 1208.19C211.043 1199.74 218.407 1192.48 226.94 1186.81C246.78 1273.4 274.94 1386.47 287.33 1390.5C316.23 1399.89 385.67 1389.99 385.67 1389.99C385.67 1389.99 398.2 1386.6 419.19 1381.35C446.19 1374.6 455.42 1340.8 435.49 1321.35C412.379 1298.95 390.826 1274.99 370.98 1249.65C386.61 1226.73 408.83 1206.4 440.47 1194.98C445.33 1193.22 450.19 1191.73 455.01 1190.48C522.01 1172.96 583.13 1202.72 626.2 1235.18C630.14 1238.12 633.87 1241.11 637.46 1244.05C637.84 1244.36 638.19 1244.65 638.55 1244.97C641.403 1247.33 644.147 1249.66 646.78 1251.97C659.697 1263.28 674.125 1272.74 689.65 1280.08C691.85 1281.08 694.06 1282.08 696.36 1283.03C718.162 1292.26 741.595 1297.02 765.27 1297.03C808.914 1296.93 851.027 1280.93 883.73 1252.03C920.12 1220.03 976.39 1183.17 1040.73 1185.4C1057.6 1185.99 1074.27 1189.23 1090.13 1195C1113.65 1203.45 1134.45 1218.09 1150.35 1237.38C1129.91 1264.87 1105.96 1291.54 1080.17 1316.97L1079.69 1317.44C1059.69 1337.09 1068.89 1371 1096.11 1377.64C1126.11 1384.97 1144.89 1390.05 1144.89 1390.05C1144.89 1390.05 1214.36 1399.95 1243.25 1390.56C1255.64 1386.56 1283.8 1273.46 1303.66 1186.87C1312.17 1192.55 1319.5 1199.82 1325.26 1208.27Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M324.54 1523.16C309.54 1523.16 294.85 1522.04 284.54 1518.68C277.22 1516.3 267.19 1513.03 230.03 1358.87C212.2 1284.94 196.65 1210.87 196.5 1210.11L195.71 1206.36L197.89 1203.21C216.14 1176.81 245.79 1162.89 277.17 1166.01C314.3 1169.69 347.22 1195.28 369.17 1237.01C387.24 1213.44 410.17 1196.54 437.4 1186.68C492.79 1166.63 551.01 1175.68 610.46 1213.5C611.533 1214.09 612.474 1214.89 613.225 1215.85C613.976 1216.82 614.52 1217.93 614.824 1219.11C615.128 1220.3 615.185 1221.53 614.992 1222.74C614.799 1223.94 614.36 1225.1 613.702 1226.13C613.044 1227.16 612.181 1228.04 611.166 1228.73C610.152 1229.41 609.008 1229.88 607.806 1230.1C606.603 1230.32 605.368 1230.29 604.177 1230.02C602.985 1229.74 601.863 1229.23 600.88 1228.5C546.35 1193.78 493.39 1185.34 443.47 1203.41C415.27 1213.61 392.32 1232.41 375.26 1259.41L366.26 1273.68L359.57 1258.17C340.64 1214.3 309.99 1187.17 275.48 1183.77C251.84 1181.42 229.48 1191.31 214.82 1210.34C242.82 1343.42 278.57 1486.64 291.35 1502.11C314.11 1508.73 366.04 1503.52 384.46 1500.9C386.94 1500.56 628.31 1468.1 765.3 1468.1C902.29 1468.1 1143.66 1500.56 1146.08 1500.89C1164.56 1503.52 1216.48 1508.73 1239.24 1502.11C1252.03 1486.64 1287.77 1343.42 1315.78 1210.34C1301.16 1191.34 1278.78 1181.43 1255.12 1183.77C1220.61 1187.18 1189.95 1214.3 1171.02 1258.17L1164.33 1273.68L1155.33 1259.41C1138.27 1232.41 1115.33 1213.62 1087.12 1203.41C1036.76 1185.18 983.35 1193.92 928.35 1229.41C926.361 1230.69 923.944 1231.13 921.632 1230.63C919.32 1230.13 917.301 1228.73 916.02 1226.74C914.739 1224.75 914.301 1222.33 914.801 1220.02C915.302 1217.71 916.701 1215.69 918.69 1214.41C977.77 1176.33 1038.11 1166.73 1093.19 1186.67C1120.46 1196.53 1143.35 1213.43 1161.42 1237C1183.35 1195.32 1216.27 1169.72 1253.42 1166C1284.81 1162.88 1314.42 1176.8 1332.71 1203.2L1334.89 1206.35L1334.1 1210.1C1333.95 1210.84 1318.39 1284.93 1300.57 1358.86C1263.3 1513 1253.27 1516.3 1246 1518.68C1215.48 1528.68 1146.55 1518.96 1143.63 1518.55C1141.28 1518.23 901.08 1485.92 765.3 1485.92C629.52 1485.92 389.3 1518.23 386.91 1518.55C385 1518.82 354.06 1523.16 324.54 1523.16Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1225.24 1510.2H1243.24C1253.55 1510.21 1263.64 1507.23 1272.29 1501.62C1280.94 1496.02 1287.78 1488.02 1291.98 1478.61C1318.85 1418.45 1367.82 1286.29 1321.98 1205.61C1320.64 1203.26 1319.22 1200.99 1317.7 1198.82C1317.7 1198.82 1273.7 1158.76 1242.02 1215.43C1212.38 1268.39 1150.35 1494.74 1225.24 1510.2Z\",\n fill: \"#AFAFB2\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.7\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.7,\n d: \"M1225.74 1253.18C1226.53 1251.91 1227.32 1250.71 1228.09 1249.6C1266.99 1192.93 1321.15 1232.99 1321.15 1232.99C1323.01 1235.16 1324.77 1237.43 1326.4 1239.78C1331.75 1247.44 1336.17 1255.7 1339.57 1264.4C1337.38 1243.22 1331.9 1223.19 1321.9 1205.63C1320.56 1203.28 1319.14 1201.01 1317.62 1198.84C1317.62 1198.84 1273.62 1158.78 1241.94 1215.45C1237.14 1224 1231.51 1237.13 1225.74 1253.18Z\",\n fill: \"white\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1339.33 1271.06C1338.83 1271.06 1338.34 1271.02 1337.85 1270.94L1227.78 1252.56C1226.6 1252.4 1225.46 1252 1224.43 1251.39C1223.41 1250.78 1222.51 1249.97 1221.81 1249.01C1221.1 1248.05 1220.59 1246.96 1220.31 1245.8C1220.03 1244.64 1219.99 1243.43 1220.19 1242.26C1220.38 1241.08 1220.81 1239.95 1221.45 1238.95C1222.09 1237.94 1222.93 1237.07 1223.91 1236.39C1224.89 1235.71 1226 1235.23 1227.17 1234.99C1228.33 1234.75 1229.54 1234.74 1230.71 1234.97L1340.79 1253.35C1342.99 1253.73 1344.96 1254.92 1346.33 1256.68C1347.69 1258.44 1348.35 1260.65 1348.16 1262.87C1347.98 1265.09 1346.97 1267.17 1345.34 1268.68C1343.7 1270.2 1341.56 1271.05 1339.33 1271.06Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1338.63 1330.53C1338.23 1330.53 1337.83 1330.51 1337.43 1330.45L1208.66 1313.14C1207.49 1312.99 1206.37 1312.61 1205.34 1312.03C1204.32 1311.44 1203.43 1310.66 1202.71 1309.73C1201.99 1308.79 1201.47 1307.73 1201.16 1306.59C1200.86 1305.45 1200.78 1304.27 1200.94 1303.1C1201.1 1301.93 1201.49 1300.81 1202.08 1299.79C1202.67 1298.78 1203.46 1297.89 1204.4 1297.18C1205.34 1296.47 1206.41 1295.95 1207.55 1295.66C1208.69 1295.36 1209.87 1295.29 1211.04 1295.46L1339.81 1312.78C1342.06 1313.06 1344.13 1314.2 1345.57 1315.95C1347.02 1317.7 1347.74 1319.94 1347.59 1322.21C1347.44 1324.48 1346.43 1326.6 1344.76 1328.15C1343.1 1329.7 1340.9 1330.55 1338.63 1330.53Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1327.27 1388.79C1326.91 1388.79 1326.54 1388.76 1326.18 1388.72L1195.46 1372.72C1194.27 1372.61 1193.12 1372.26 1192.07 1371.7C1191.02 1371.13 1190.09 1370.36 1189.34 1369.43C1188.59 1368.5 1188.04 1367.43 1187.71 1366.29C1187.38 1365.14 1187.29 1363.94 1187.43 1362.75C1187.58 1361.57 1187.96 1360.43 1188.56 1359.39C1189.15 1358.36 1189.95 1357.45 1190.9 1356.73C1191.85 1356.01 1192.93 1355.49 1194.09 1355.19C1195.25 1354.9 1196.45 1354.84 1197.63 1355.02L1328.34 1371.02C1330.59 1371.3 1332.64 1372.43 1334.09 1374.17C1335.54 1375.92 1336.27 1378.15 1336.13 1380.41C1335.99 1382.67 1335 1384.79 1333.36 1386.35C1331.71 1387.91 1329.54 1388.78 1327.27 1388.79Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1306.54 1452.31H1305.73L1188.86 1441.76C1187.67 1441.69 1186.5 1441.38 1185.43 1440.85C1184.36 1440.32 1183.41 1439.58 1182.63 1438.67C1181.85 1437.77 1181.26 1436.72 1180.9 1435.58C1180.53 1434.44 1180.4 1433.24 1180.51 1432.06C1180.62 1430.87 1180.96 1429.71 1181.52 1428.66C1182.08 1427.6 1182.85 1426.67 1183.78 1425.92C1184.71 1425.17 1185.78 1424.61 1186.93 1424.28C1188.07 1423.95 1189.27 1423.86 1190.46 1424L1307.33 1434.54C1309.61 1434.76 1311.72 1435.84 1313.22 1437.57C1314.72 1439.29 1315.5 1441.53 1315.4 1443.82C1315.3 1446.1 1314.32 1448.26 1312.67 1449.85C1311.02 1451.43 1308.83 1452.33 1306.54 1452.34V1452.31Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M1225.24 1510.2H1243.24C1253.55 1510.21 1263.64 1507.23 1272.29 1501.62C1280.94 1496.02 1287.78 1488.02 1291.98 1478.61C1298.98 1463.02 1307.37 1442.61 1315.27 1419.52C1304.5 1437.4 1282.61 1448.74 1258.58 1448.74H1237.19C1206.75 1443.46 1195.3 1413.61 1194.85 1374.48C1184.5 1440.52 1187.33 1502.37 1225.24 1510.2Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1243.18 1519.12H1224.33L1223.44 1518.93C1208.73 1515.93 1197.63 1506.38 1190.44 1490.63C1159.73 1423.48 1209.93 1254.53 1234.17 1211.11C1245.37 1191.05 1259.5 1179.5 1276.17 1176.78C1301.71 1172.62 1322.77 1191.44 1323.65 1192.24L1324.39 1192.92L1324.96 1193.74C1326.63 1196.13 1328.22 1198.65 1329.68 1201.23C1376.43 1283.42 1331.22 1412.58 1300.1 1482.23C1295.19 1493.22 1287.2 1502.55 1277.1 1509.1C1267 1515.64 1255.22 1519.12 1243.18 1519.12ZM1226.18 1501.28H1243.18C1251.76 1501.28 1260.17 1498.8 1267.37 1494.13C1274.58 1489.47 1280.28 1482.81 1283.79 1474.98C1307.73 1421.36 1358.61 1288.23 1314.15 1210.04C1313.15 1208.26 1312.06 1206.53 1310.94 1204.87C1307.77 1202.29 1293.87 1191.87 1278.94 1194.4C1267.94 1196.24 1258.14 1204.78 1249.76 1219.8C1224.41 1265.19 1180.61 1426.23 1206.67 1483.22C1211.27 1493.33 1217.68 1499.25 1226.21 1501.28H1226.18Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M305.26 1510.2H287.31C277.002 1510.21 266.912 1507.23 258.262 1501.62C249.612 1496.02 242.772 1488.02 238.57 1478.61C211.7 1418.45 162.73 1286.29 208.57 1205.61C209.91 1203.26 211.33 1200.99 212.85 1198.82C212.85 1198.82 256.85 1158.76 288.53 1215.43C318.11 1268.39 380.15 1494.74 305.26 1510.2Z\",\n fill: \"#AFAFB2\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.7\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.7,\n d: \"M304.76 1253.18C303.97 1251.91 303.18 1250.71 302.41 1249.6C263.5 1192.93 209.35 1232.99 209.35 1232.99C207.486 1235.16 205.733 1237.43 204.1 1239.78C198.753 1247.44 194.333 1255.7 190.93 1264.4C193.12 1243.22 198.6 1223.19 208.6 1205.63C209.94 1203.28 211.36 1201.01 212.88 1198.84C212.88 1198.84 256.88 1158.78 288.56 1215.45C293.36 1224 299 1237.13 304.76 1253.18Z\",\n fill: \"white\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M191.16 1271.06C188.931 1271.05 186.788 1270.2 185.153 1268.68C183.518 1267.17 182.51 1265.09 182.327 1262.87C182.143 1260.65 182.799 1258.44 184.163 1256.68C185.528 1254.92 187.503 1253.73 189.7 1253.35L299.79 1235C302.089 1234.69 304.42 1235.28 306.289 1236.66C308.157 1238.03 309.415 1240.08 309.796 1242.37C310.178 1244.66 309.652 1247.01 308.331 1248.92C307.01 1250.82 304.997 1252.14 302.72 1252.59L192.64 1270.97C192.15 1271.04 191.655 1271.07 191.16 1271.06Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M191.87 1330.53C189.598 1330.55 187.405 1329.7 185.739 1328.15C184.074 1326.6 183.063 1324.48 182.912 1322.21C182.761 1319.94 183.483 1317.7 184.929 1315.95C186.374 1314.2 188.435 1313.06 190.69 1312.78L319.46 1295.46C321.795 1295.16 324.153 1295.8 326.019 1297.24C327.885 1298.67 329.108 1300.79 329.422 1303.12C329.736 1305.45 329.116 1307.81 327.695 1309.69C326.275 1311.57 324.17 1312.81 321.84 1313.14L193.07 1330.45C192.672 1330.51 192.271 1330.53 191.87 1330.53Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M203.23 1388.79C200.965 1388.78 198.789 1387.91 197.143 1386.35C195.498 1384.79 194.507 1382.67 194.371 1380.41C194.234 1378.15 194.964 1375.92 196.41 1374.17C197.857 1372.43 199.913 1371.3 202.16 1371.02L332.87 1355.02C334.05 1354.84 335.253 1354.9 336.41 1355.19C337.566 1355.49 338.651 1356.01 339.602 1356.73C340.553 1357.45 341.349 1358.36 341.944 1359.39C342.539 1360.43 342.92 1361.57 343.065 1362.75C343.21 1363.94 343.116 1365.14 342.789 1366.29C342.462 1367.43 341.907 1368.5 341.159 1369.43C340.411 1370.36 339.484 1371.13 338.433 1371.7C337.382 1372.26 336.228 1372.61 335.04 1372.72L204.32 1388.72C203.958 1388.76 203.594 1388.79 203.23 1388.79Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M224 1452.31C221.712 1452.3 219.516 1451.4 217.867 1449.82C216.218 1448.23 215.242 1446.07 215.141 1443.79C215.039 1441.5 215.82 1439.26 217.322 1437.54C218.824 1435.81 220.932 1434.73 223.21 1434.51L340 1424C341.185 1423.86 342.387 1423.95 343.535 1424.28C344.682 1424.61 345.751 1425.17 346.679 1425.92C347.608 1426.67 348.375 1427.6 348.937 1428.66C349.499 1429.71 349.844 1430.87 349.951 1432.06C350.058 1433.24 349.926 1434.44 349.561 1435.58C349.196 1436.72 348.607 1437.77 347.828 1438.67C347.049 1439.58 346.097 1440.32 345.027 1440.85C343.957 1441.38 342.792 1441.69 341.6 1441.76L224.74 1452.31H224Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M305.26 1510.2H287.31C277.002 1510.21 266.912 1507.23 258.262 1501.62C249.612 1496.02 242.772 1488.02 238.57 1478.61C231.62 1463.02 223.18 1442.61 215.28 1419.52C226.05 1437.4 247.93 1448.74 271.97 1448.74H293.36C323.79 1443.46 335.25 1413.61 335.7 1374.48C346 1440.52 343.17 1502.37 305.26 1510.2Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M306.17 1519.12H287.31C275.28 1519.12 263.508 1515.63 253.413 1509.09C243.319 1502.55 235.333 1493.22 230.42 1482.24C199.31 1412.58 154.1 1283.42 200.85 1201.24C202.3 1198.68 203.85 1196.16 205.56 1193.76L206.14 1192.94L206.88 1192.26C207.76 1191.46 228.88 1172.62 254.36 1176.81C271.02 1179.52 285.15 1191.07 296.36 1211.13C320.61 1254.55 370.81 1423.5 340.09 1490.66C332.89 1506.4 321.79 1515.92 307.09 1518.95L306.17 1519.12ZM219.55 1204.87C218.43 1206.54 217.36 1208.27 216.36 1210.03C171.88 1288.23 222.77 1421.36 246.71 1474.97C250.215 1482.81 255.913 1489.46 263.118 1494.13C270.323 1498.8 278.725 1501.28 287.31 1501.28H304.31C312.84 1499.28 319.25 1493.28 323.87 1483.22C349.94 1426.22 306.14 1265.22 280.79 1219.8C272.41 1204.8 262.59 1196.24 251.61 1194.4C236.66 1191.91 222.78 1202.26 219.55 1204.87Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M507.82 1501.75C506.669 1501.75 505.537 1501.46 504.534 1500.89C503.531 1500.33 502.691 1499.51 502.096 1498.53C501.5 1497.54 501.169 1496.42 501.135 1495.27C501.1 1494.12 501.364 1492.98 501.9 1491.96C533.58 1431.42 534.05 1363.36 503.3 1289.67C480.13 1234.17 446.97 1196.21 446.64 1195.83C445.594 1194.49 445.099 1192.8 445.256 1191.1C445.413 1189.41 446.209 1187.84 447.484 1186.71C448.758 1185.58 450.415 1184.98 452.116 1185.03C453.817 1185.08 455.435 1185.78 456.64 1186.98C458.05 1188.57 491.4 1226.71 515.45 1284.14C547.52 1360.72 546.92 1434.73 513.72 1498.14C513.158 1499.22 512.311 1500.13 511.272 1500.77C510.232 1501.4 509.039 1501.74 507.82 1501.75Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1025.75 1501.75C1024.53 1501.75 1023.33 1501.42 1022.28 1500.78C1021.24 1500.15 1020.39 1499.24 1019.82 1498.16C986.62 1434.73 986.02 1360.72 1018.08 1284.16C1042.13 1226.73 1075.49 1188.59 1076.89 1187C1078.1 1185.8 1079.71 1185.1 1081.41 1185.05C1083.12 1185 1084.77 1185.6 1086.05 1186.73C1087.32 1187.86 1088.12 1189.43 1088.27 1191.12C1088.43 1192.82 1087.94 1194.51 1086.89 1195.85C1086.56 1196.23 1053.4 1234.19 1030.24 1289.69C999.49 1363.38 999.96 1431.44 1031.64 1491.98C1032.17 1493 1032.43 1494.14 1032.4 1495.29C1032.36 1496.44 1032.03 1497.56 1031.44 1498.54C1030.84 1499.53 1030 1500.34 1029 1500.91C1028 1501.47 1026.87 1501.77 1025.72 1501.77L1025.75 1501.75Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M774.17 1152.79C776.91 1156.99 779.577 1161.11 782.17 1165.15C779.54 1161.11 776.88 1157 774.17 1152.79Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M619.74 1155.1C579.19 1171.51 516.45 1168.1 473.67 1162.9C467.582 1162.16 461.704 1160.21 456.383 1157.16C451.062 1154.11 446.405 1150.02 442.688 1145.14C438.971 1140.26 436.269 1134.69 434.741 1128.75C433.212 1122.81 432.889 1116.63 433.79 1110.56C435.444 1099.3 441.225 1089.05 450.01 1081.81C458.795 1074.56 469.957 1070.84 481.33 1071.37C521.33 1073.24 581.33 1074.12 619.33 1065.69\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M619.75 1155.09C579.19 1171.53 516.45 1168.09 473.68 1162.92C467.591 1162.18 461.712 1160.23 456.39 1157.17C451.068 1154.12 446.411 1150.04 442.694 1145.16C438.977 1140.28 436.275 1134.71 434.747 1128.76C433.22 1122.82 432.898 1116.64 433.8 1110.57C434.537 1105.48 436.133 1100.55 438.52 1095.99C441.966 1102.59 446.968 1108.25 453.095 1112.49C459.221 1116.72 466.286 1119.4 473.68 1120.29C516.38 1125.47 579.01 1128.9 619.57 1112.57L619.75 1155.09Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M539.17 1176.1C516.914 1175.97 494.685 1174.51 472.6 1171.75C458.533 1170 445.686 1162.88 436.752 1151.88C427.818 1140.87 423.489 1126.84 424.671 1112.71C425.854 1098.58 432.457 1085.46 443.097 1076.1C453.737 1066.73 467.588 1061.84 481.75 1062.46C523.55 1064.46 581.03 1065.06 617.43 1056.98C622.6 1055.84 635.48 1055.89 643.33 1081.16C651.58 1107.67 650.84 1152.16 623.08 1163.36C599.55 1172.89 569.27 1176.1 539.17 1176.1ZM479.17 1080.23C469.594 1080.01 460.306 1083.52 453.261 1090C446.215 1096.49 441.961 1105.46 441.392 1115.02C440.824 1124.59 443.985 1134 450.212 1141.27C456.439 1148.55 465.246 1153.13 474.78 1154.05C518.26 1159.31 578.14 1162.33 616.42 1146.83C627.42 1142.4 629.51 1124.56 629.93 1117.09C631.12 1095.38 624.19 1077.72 620.39 1074.6C582.05 1082.89 523.48 1082.27 480.94 1080.27C480.32 1080.25 479.72 1080.23 479.14 1080.23H479.17Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1075.9 1162.9C1052.99 1165.78 1029.91 1167.2 1006.82 1167.15C1005.13 1167.15 1003.47 1167.15 1001.82 1167.07C1000.17 1166.99 998.26 1166.99 996.49 1166.92C995.29 1166.92 994.11 1166.84 992.96 1166.79L988.79 1166.56C987.02 1166.46 985.26 1166.33 983.51 1166.2H983.39C981.65 1166.07 979.88 1165.92 978.14 1165.74C976.99 1165.64 975.84 1165.51 974.71 1165.38C973.71 1165.3 972.76 1165.18 971.82 1165.07C970.31 1164.89 968.82 1164.69 967.34 1164.48C965.86 1164.27 964.55 1164.08 963.19 1163.84C962.913 1163.83 962.639 1163.79 962.37 1163.72C960.76 1163.49 959.17 1163.2 957.61 1162.9C956.05 1162.6 954.46 1162.31 952.93 1161.98L952.54 1161.9C951.67 1161.69 950.8 1161.52 949.96 1161.31C949.12 1161.1 948.06 1160.88 947.12 1160.62C944.23 1159.9 941.39 1159.08 938.62 1158.21C937.14 1157.75 935.62 1157.21 934.19 1156.73C932.76 1156.25 931.3 1155.65 929.92 1155.09L930.1 1112.17L930.3 1065.68C941.127 1067.97 952.09 1069.57 963.12 1070.47C997.73 1073.62 1038.55 1072.75 1068.32 1071.36C1069.04 1071.36 1069.76 1071.36 1070.5 1071.36C1082.12 1071.52 1093.24 1076.07 1101.64 1084.09C1110.04 1092.11 1115.1 1103.02 1115.79 1114.61C1116.48 1126.21 1112.76 1137.64 1105.38 1146.6C1097.99 1155.57 1087.48 1161.41 1075.97 1162.95L1075.9 1162.9Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M1075.91 1162.9C1052.99 1165.78 1029.92 1167.2 1006.82 1167.15C1005.13 1167.15 1003.47 1167.15 1001.82 1167.07C1000.17 1166.99 998.26 1166.99 996.5 1166.92C995.29 1166.92 994.11 1166.84 992.96 1166.79L988.79 1166.56C987.02 1166.46 985.26 1166.33 983.52 1166.2H983.39C981.65 1166.07 979.88 1165.92 978.14 1165.74C976.99 1165.64 975.84 1165.51 974.71 1165.38C973.71 1165.3 972.77 1165.18 971.82 1165.07C970.31 1164.89 968.82 1164.69 967.34 1164.48C965.86 1164.27 964.55 1164.07 963.19 1163.84C962.913 1163.83 962.639 1163.79 962.37 1163.72C960.76 1163.49 959.17 1163.2 957.61 1162.9C956.05 1162.6 954.47 1162.31 952.93 1161.98L952.55 1161.9C951.68 1161.69 950.8 1161.52 949.96 1161.31C949.12 1161.1 948.07 1160.88 947.12 1160.62C944.23 1159.9 941.39 1159.08 938.63 1158.21C937.14 1157.75 935.63 1157.21 934.2 1156.73C932.77 1156.25 931.3 1155.65 929.92 1155.09L930.1 1112.16V1109.07C931.4 1109.6 932.78 1110.14 934.17 1110.63C935.56 1111.12 937.11 1111.63 938.6 1112.11C941.36 1112.98 944.2 1113.8 947.09 1114.52C948.04 1114.78 948.98 1115.01 949.93 1115.21C950.88 1115.41 951.65 1115.59 952.52 1115.8L952.9 1115.88C954.44 1116.21 956 1116.52 957.58 1116.8C959.16 1117.08 960.73 1117.39 962.34 1117.62C962.609 1117.69 962.883 1117.73 963.16 1117.74C964.52 1117.97 965.9 1118.18 967.31 1118.38C968.72 1118.58 970.31 1118.79 971.79 1118.97C972.79 1119.08 973.71 1119.2 974.68 1119.28C975.81 1119.41 976.96 1119.54 978.11 1119.64C979.85 1119.82 981.62 1119.97 983.36 1120.1H983.49C985.23 1120.23 986.99 1120.36 988.76 1120.46L992.93 1120.69C994.08 1120.69 995.26 1120.79 996.47 1120.82C998.23 1120.89 1000.02 1120.94 1001.79 1120.97C1003.56 1121 1005.14 1121.05 1006.79 1121.05C1029.89 1121.1 1052.96 1119.68 1075.88 1116.8C1082.94 1115.95 1089.71 1113.47 1095.65 1109.55C1101.59 1105.63 1106.53 1100.38 1110.08 1094.22C1113.88 1100.8 1116 1108.22 1116.23 1115.81C1116.47 1123.41 1114.82 1130.95 1111.43 1137.75C1108.05 1144.55 1103.03 1150.41 1096.82 1154.8C1090.62 1159.19 1083.42 1161.97 1075.88 1162.9H1075.91Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1010.41 1176.1C980.31 1176.1 950.04 1172.89 926.5 1163.36C898.74 1152.13 898 1107.67 906.25 1081.16C914.1 1055.9 926.98 1055.83 932.15 1056.98C968.55 1065.06 1026.03 1064.42 1067.84 1062.46C1082.04 1061.78 1095.95 1066.63 1106.64 1076C1117.34 1085.37 1123.97 1098.53 1125.16 1112.69C1126.34 1126.86 1121.98 1140.94 1113 1151.95C1104.01 1162.97 1091.1 1170.07 1076.98 1171.75C1054.9 1174.51 1032.67 1175.97 1010.41 1176.1ZM929.22 1074.6C925.42 1077.72 918.49 1095.39 919.69 1117.1C920.1 1124.56 922.24 1142.4 933.19 1146.83C971.47 1162.33 1031.35 1159.31 1074.84 1154.05C1079.68 1153.64 1084.4 1152.29 1088.72 1150.06C1093.04 1147.83 1096.88 1144.78 1100.02 1141.06C1103.16 1137.35 1105.54 1133.06 1107.02 1128.43C1108.5 1123.8 1109.05 1118.92 1108.64 1114.08C1108.24 1109.23 1106.88 1104.51 1104.66 1100.19C1102.43 1095.87 1099.37 1092.03 1095.66 1088.89C1091.95 1085.75 1087.65 1083.38 1083.02 1081.9C1078.39 1080.42 1073.51 1079.86 1068.67 1080.27C1026.12 1082.27 967.55 1082.88 929.22 1074.6Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M945.51 1036.14V1179.42C945.473 1192.23 940.369 1204.51 931.311 1213.56C922.254 1222.62 909.98 1227.73 897.17 1227.77H633.29C620.489 1227.72 608.227 1222.6 599.181 1213.55C590.134 1204.49 585.037 1192.22 585 1179.42V1036.14C585.04 1023.34 590.142 1011.07 599.193 1002.02C608.245 992.972 620.51 987.87 633.31 987.83H897.17C909.977 987.856 922.253 992.954 931.312 1002.01C940.371 1011.06 945.476 1023.33 945.51 1036.14Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M945.51 1036.14V1179.43C945.47 1192.24 940.363 1204.51 931.304 1213.57C922.244 1222.62 909.969 1227.73 897.16 1227.76H633.28C620.482 1227.72 608.22 1222.62 599.17 1213.57C590.121 1204.52 585.02 1192.26 584.98 1179.46V1125.83C613.25 1180.83 709.3 1202.41 788.33 1194.41C805.98 1192.62 818.61 1175.85 814.39 1158.61C813.103 1153.29 812.455 1147.84 812.46 1142.37C812.46 1111.12 833.17 1085.77 858.72 1085.77C883.42 1085.77 903.64 1109.48 904.94 1139.32C936.61 1097.93 938.32 1042.54 935.66 1006.99C942.053 1015.36 945.514 1025.61 945.51 1036.14Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M897.19 1236.68H633.3C618.125 1236.66 603.576 1230.62 592.846 1219.89C582.115 1209.16 576.079 1194.62 576.06 1179.44V1036.14C576.079 1020.96 582.115 1006.42 592.846 995.686C603.576 984.955 618.125 978.919 633.3 978.9H897.19C912.364 978.919 926.912 984.955 937.641 995.686C948.37 1006.42 954.404 1020.97 954.42 1036.14V1179.44C954.404 1194.61 948.37 1209.16 937.641 1219.89C926.912 1230.62 912.364 1236.66 897.19 1236.68ZM633.3 996.74C622.854 996.751 612.838 1000.91 605.452 1008.29C598.065 1015.68 593.911 1025.69 593.9 1036.14V1179.44C593.911 1189.89 598.065 1199.9 605.452 1207.29C612.838 1214.67 622.854 1218.83 633.3 1218.84H897.19C907.636 1218.83 917.652 1214.67 925.038 1207.29C932.425 1199.9 936.579 1189.89 936.59 1179.44V1036.14C936.579 1025.69 932.425 1015.68 925.038 1008.29C917.652 1000.91 907.636 996.751 897.19 996.74H633.3Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M874.672 1146.29C895.934 1137.48 906.031 1113.11 897.224 1091.85C888.417 1070.58 864.041 1060.49 842.779 1069.29C821.517 1078.1 811.421 1102.48 820.228 1123.74C829.035 1145 853.41 1155.1 874.672 1146.29Z\",\n fill: \"#22A7F0\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M900.4 1107.8C900.408 1110.02 900.227 1112.25 899.86 1114.44C898.279 1104.67 893.272 1095.78 885.735 1089.36C878.197 1082.95 868.623 1079.43 858.725 1079.43C848.827 1079.43 839.252 1082.95 831.715 1089.36C824.178 1095.78 819.171 1104.67 817.59 1114.44C817.222 1112.25 817.042 1110.02 817.05 1107.8C816.964 1102.27 817.979 1096.78 820.035 1091.65C822.091 1086.52 825.147 1081.85 829.025 1077.91C832.904 1073.97 837.527 1070.84 842.626 1068.71C847.724 1066.57 853.197 1065.47 858.725 1065.47C864.253 1065.47 869.725 1066.57 874.824 1068.71C879.923 1070.84 884.546 1073.97 888.424 1077.91C892.303 1081.85 895.359 1086.52 897.415 1091.65C899.471 1096.78 900.486 1102.27 900.4 1107.8Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M900.38 1107.78C900.38 1118.83 895.991 1129.43 888.178 1137.24C880.365 1145.05 869.769 1149.44 858.72 1149.44C847.671 1149.44 837.075 1145.05 829.262 1137.24C821.449 1129.43 817.06 1118.83 817.06 1107.78C817.048 1102.62 818.019 1097.5 819.92 1092.7C822.959 1100.52 828.29 1107.24 835.214 1111.98C842.139 1116.72 850.334 1119.26 858.725 1119.26C867.116 1119.26 875.311 1116.72 882.236 1111.98C889.161 1107.24 894.492 1100.52 897.53 1092.7C899.423 1097.5 900.39 1102.62 900.38 1107.78Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M858.73 1156.15C849.165 1156.15 839.816 1153.31 831.863 1148C823.91 1142.69 817.712 1135.13 814.051 1126.3C810.391 1117.46 809.433 1107.74 811.299 1098.36C813.165 1088.97 817.771 1080.36 824.534 1073.59C831.298 1066.83 839.915 1062.23 849.296 1060.36C858.676 1058.49 868.4 1059.45 877.237 1063.11C886.073 1066.77 893.626 1072.97 898.94 1080.92C904.254 1088.88 907.09 1098.23 907.09 1107.79C907.077 1120.61 901.978 1132.9 892.911 1141.97C883.845 1151.04 871.552 1156.14 858.73 1156.15ZM858.73 1072.81C851.808 1072.81 845.041 1074.86 839.285 1078.71C833.529 1082.55 829.043 1088.02 826.394 1094.42C823.745 1100.81 823.052 1107.85 824.403 1114.64C825.753 1121.43 829.087 1127.66 833.981 1132.56C838.876 1137.45 845.113 1140.79 851.902 1142.14C858.691 1143.49 865.729 1142.79 872.124 1140.15C878.519 1137.5 883.986 1133.01 887.832 1127.26C891.677 1121.5 893.73 1114.73 893.73 1107.81C893.73 1103.21 892.825 1098.66 891.066 1094.42C889.307 1090.17 886.729 1086.31 883.479 1083.06C880.229 1079.81 876.37 1077.23 872.124 1075.47C867.878 1073.72 863.326 1072.81 858.73 1072.81Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M740.64 1234.45C739.761 1234.45 738.891 1234.28 738.078 1233.94C737.266 1233.61 736.528 1233.12 735.907 1232.49C735.285 1231.87 734.792 1231.13 734.457 1230.32C734.121 1229.51 733.949 1228.64 733.95 1227.76V1128.92L683.84 1091.2C683.013 1090.58 682.341 1089.77 681.88 1088.84C681.418 1087.92 681.178 1086.9 681.18 1085.86V987.86C681.145 986.96 681.292 986.063 681.613 985.222C681.933 984.38 682.42 983.612 683.044 982.963C683.668 982.314 684.417 981.798 685.245 981.446C686.074 981.093 686.965 980.911 687.865 980.911C688.765 980.911 689.656 981.093 690.485 981.446C691.313 981.798 692.062 982.314 692.686 982.963C693.31 983.612 693.797 984.38 694.117 985.222C694.438 986.063 694.585 986.96 694.55 987.86V1082.56L744.66 1120.28C745.489 1120.9 746.162 1121.71 746.625 1122.64C747.088 1123.57 747.33 1124.59 747.33 1125.63V1227.8C747.32 1229.57 746.61 1231.26 745.356 1232.5C744.103 1233.75 742.407 1234.45 740.64 1234.45Z\",\n fill: \"#371A45\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.3\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.3,\n d: \"M817.68 1412C817.37 1412.2 817.05 1412.4 816.74 1412.58H713.45L712.45 1412H817.68Z\",\n fill: \"#390075\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M967.25 823.05H555.58C442.257 823.05 350.39 914.917 350.39 1028.24V1317.56C350.39 1430.88 442.257 1522.75 555.58 1522.75H967.25C1080.57 1522.75 1172.44 1430.88 1172.44 1317.56V1028.24C1172.44 914.917 1080.57 823.05 967.25 823.05Z\",\n fill: \"#D32F2F\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1060.55 801.74C1060.55 801.74 1265.26 892.19 1235.04 1068.87C1206.24 1237.28 1017.38 1199.95 1010.11 1096.94C1003.11 998.21 1044.84 984.82 1096.66 970.29C1135.06 959.52 1151.29 928.35 1147.5 904.89C1139.8 857.23 1060.55 801.74 1060.55 801.74Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M1010.11 1096.93C1017.37 1199.93 1206.25 1237.27 1235.05 1068.86C1238.69 1048.01 1239.03 1026.72 1236.05 1005.77C1235.74 1008.02 1235.38 1010.28 1235.05 1012.55C1207.05 1176.19 1027.94 1145.55 1011.15 1049.2C1009.21 1062.42 1008.77 1078.14 1010.11 1096.93Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1117.15 1193.63C1115.04 1193.63 1112.94 1193.58 1110.86 1193.48C1052.01 1190.57 1004.86 1149.33 1001.21 1097.57C993.61 989.93 1044.77 975.57 1094.21 961.7C1127.38 952.4 1141.87 926.22 1138.65 906.31C1131.65 862.94 1056.16 809.58 1055.4 809.05C1053.59 807.779 1052.31 805.88 1051.82 803.721C1051.33 801.562 1051.66 799.298 1052.75 797.369C1053.83 795.44 1055.6 793.984 1057.7 793.284C1059.8 792.583 1062.08 792.689 1064.11 793.58C1066.26 794.53 1117.24 817.34 1165.21 862.58C1229.5 923.21 1256.67 995.07 1243.79 1070.39C1228.25 1161.5 1169.34 1193.63 1117.15 1193.63ZM1135.21 859.88C1145.76 873.88 1153.95 888.88 1156.3 903.46C1160.74 930.99 1142.2 966.78 1099.06 978.88C1050.66 992.45 1012.42 1003.18 1019 1096.31C1022.44 1145.04 1069.35 1173.57 1111.74 1175.66C1157.74 1177.99 1212.01 1150.66 1226.25 1067.36C1238.25 997.36 1213.7 932.94 1153.37 875.88C1147.35 870.19 1141.26 864.86 1135.21 859.88Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1229.84 984.19C1228.61 984.191 1227.41 983.856 1226.36 983.221C1225.31 982.586 1224.46 981.676 1223.89 980.59C1197.23 929.26 1145.1 908.59 1144.58 908.43C1142.99 907.75 1141.72 906.479 1141.04 904.883C1140.37 903.287 1140.34 901.492 1140.96 899.875C1141.58 898.258 1142.81 896.946 1144.38 896.214C1145.95 895.482 1147.74 895.387 1149.38 895.95C1151.7 896.84 1206.7 918.46 1235.77 974.42C1236.3 975.439 1236.56 976.577 1236.52 977.724C1236.48 978.872 1236.15 979.99 1235.55 980.971C1234.95 981.953 1234.12 982.764 1233.12 983.328C1232.12 983.892 1230.99 984.189 1229.84 984.19Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M468.65 801.74C468.65 801.74 263.94 892.19 294.15 1068.87C323 1237.28 511.82 1200 519.09 1096.94C526.09 998.21 484.36 984.82 432.54 970.29C394.13 959.52 377.91 928.35 381.7 904.89C389.4 857.23 468.65 801.74 468.65 801.74Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n opacity: 0.35\n }, /*#__PURE__*/React.createElement(\"path\", {\n opacity: 0.35,\n d: \"M519.09 1096.93C511.82 1199.93 322.95 1237.27 294.15 1068.86C290.504 1048.01 290.167 1026.72 293.15 1005.77C293.46 1008.02 293.82 1010.28 294.15 1012.55C322.15 1176.19 501.26 1145.55 518.04 1049.2C520 1062.42 520.43 1078.14 519.09 1096.93Z\",\n fill: \"#371A45\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M285.36 1070.37C272.48 995.05 299.66 923.19 363.95 862.56C411.95 817.34 462.9 794.56 465.04 793.56C467.068 792.66 469.357 792.549 471.463 793.246C473.569 793.944 475.339 795.401 476.428 797.334C477.517 799.266 477.847 801.535 477.354 803.697C476.861 805.86 475.579 807.761 473.76 809.03C473 809.56 397.51 862.92 390.51 906.29C387.29 926.2 401.77 952.38 434.95 961.68C484.43 975.56 535.59 989.91 527.95 1097.55C524.29 1149.31 477.15 1190.55 418.3 1193.46C416.22 1193.56 414.123 1193.61 412.01 1193.61C359.86 1193.63 301 1161.5 285.36 1070.37ZM375.83 875.88C315.5 932.94 291 997.37 302.94 1067.36C317.19 1150.68 371.41 1177.99 417.46 1175.66C459.85 1173.57 506.76 1145.04 510.2 1096.31C516.78 1003.18 478.54 992.45 430.13 978.88C387 966.78 368.45 931 372.9 903.46C375.25 888.9 383.43 873.91 393.99 859.88C387.94 864.86 381.85 870.19 375.83 875.88Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M299.36 984.19C300.585 984.192 301.787 983.858 302.835 983.223C303.882 982.588 304.735 981.677 305.3 980.59C331.97 929.26 384.1 908.59 384.62 908.43C385.47 908.138 386.253 907.677 386.921 907.076C387.589 906.475 388.129 905.745 388.509 904.93C388.889 904.116 389.101 903.233 389.132 902.334C389.163 901.436 389.013 900.541 388.69 899.702C388.367 898.863 387.879 898.097 387.254 897.451C386.629 896.805 385.88 896.292 385.052 895.942C384.224 895.592 383.334 895.412 382.435 895.413C381.536 895.415 380.647 895.597 379.82 895.95C377.49 896.84 322.5 918.46 293.43 974.42C292.898 975.439 292.639 976.577 292.676 977.726C292.713 978.874 293.046 979.994 293.642 980.976C294.238 981.958 295.078 982.77 296.079 983.333C297.081 983.896 298.211 984.191 299.36 984.19Z\",\n fill: \"#CCCCCC\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M780 989H740.46V1146.23H780V989Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M780 1173.6H740.46V1215.06H780V1173.6Z\",\n fill: \"white\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M632.395 1353.29H598.645V1376.14H638.255V1390.26H581.067V1304.95H638.137V1319.19H598.645V1339.52H632.395V1353.29ZM680.149 1359.03H666.145V1390.26H648.567V1304.95H680.266C690.344 1304.95 698.118 1307.19 703.587 1311.69C709.055 1316.18 711.79 1322.53 711.79 1330.73C711.79 1336.55 710.52 1341.41 707.981 1345.32C705.481 1349.19 701.673 1352.27 696.555 1354.58L715.012 1389.44V1390.26H696.145L680.149 1359.03ZM666.145 1344.79H680.325C684.739 1344.79 688.157 1343.68 690.579 1341.45C693.001 1339.19 694.212 1336.08 694.212 1332.14C694.212 1328.11 693.059 1324.95 690.755 1322.64C688.489 1320.34 684.993 1319.19 680.266 1319.19H666.145V1344.79ZM756.79 1359.03H742.786V1390.26H725.208V1304.95H756.907C766.985 1304.95 774.759 1307.19 780.227 1311.69C785.696 1316.18 788.43 1322.53 788.43 1330.73C788.43 1336.55 787.161 1341.41 784.622 1345.32C782.122 1349.19 778.313 1352.27 773.196 1354.58L791.653 1389.44V1390.26H772.786L756.79 1359.03ZM742.786 1344.79H756.966C761.38 1344.79 764.798 1343.68 767.219 1341.45C769.641 1339.19 770.852 1336.08 770.852 1332.14C770.852 1328.11 769.7 1324.95 767.395 1322.64C765.13 1320.34 761.634 1319.19 756.907 1319.19H742.786V1344.79ZM871.927 1349.54C871.927 1357.94 870.442 1365.3 867.473 1371.63C864.505 1377.96 860.247 1382.84 854.7 1386.28C849.192 1389.71 842.864 1391.43 835.716 1391.43C828.645 1391.43 822.337 1389.73 816.79 1386.33C811.243 1382.94 806.946 1378.09 803.899 1371.8C800.852 1365.47 799.309 1358.21 799.27 1350.01V1345.79C799.27 1337.39 800.774 1330.01 803.782 1323.64C806.829 1317.23 811.106 1312.33 816.614 1308.93C822.161 1305.49 828.489 1303.78 835.598 1303.78C842.708 1303.78 849.016 1305.49 854.524 1308.93C860.071 1312.33 864.348 1317.23 867.356 1323.64C870.403 1330.01 871.927 1337.37 871.927 1345.73V1349.54ZM854.114 1345.67C854.114 1336.72 852.512 1329.93 849.309 1325.28C846.106 1320.63 841.536 1318.31 835.598 1318.31C829.7 1318.31 825.149 1320.61 821.946 1325.22C818.743 1329.79 817.122 1336.51 817.083 1345.38V1349.54C817.083 1358.25 818.684 1365.01 821.887 1369.81C825.091 1374.62 829.7 1377.02 835.716 1377.02C841.614 1377.02 846.145 1374.71 849.309 1370.1C852.473 1365.46 854.075 1358.7 854.114 1349.83V1345.67ZM916.282 1359.03H902.278V1390.26H884.7V1304.95H916.399C926.477 1304.95 934.251 1307.19 939.719 1311.69C945.188 1316.18 947.923 1322.53 947.923 1330.73C947.923 1336.55 946.653 1341.41 944.114 1345.32C941.614 1349.19 937.805 1352.27 932.688 1354.58L951.145 1389.44V1390.26H932.278L916.282 1359.03ZM902.278 1344.79H916.458C920.872 1344.79 924.29 1343.68 926.712 1341.45C929.134 1339.19 930.344 1336.08 930.344 1332.14C930.344 1328.11 929.192 1324.95 926.887 1322.64C924.622 1320.34 921.126 1319.19 916.399 1319.19H902.278V1344.79Z\",\n fill: \"white\"\n }))), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip0\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n width: 1504,\n height: 1752,\n fill: \"white\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgErrorAstronaut);\nexport default __webpack_public_path__ + \"static/media/errorAstronaut.86297fdf345f0838c9451cf8803027f5.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState, useEffect, useCallback, useRef } from 'react';\n\nimport { Typography, Button, CircularProgress } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport { Link } from 'react-router-dom';\nimport { Helmet } from 'react-helmet';\n\nimport FullScreenLayout from '../FullScreenLayout';\nimport SuccessAstronaut from './successAstronaut.png';\nimport ErrorAstronaut from './errorAstronaut.svg';\nimport { useMinimalAuth, useQueryParams, useAuthFuncs } from '../../hooks';\nimport ApiManager from '../../ApiManager';\nimport { useLocalStorage } from 'hooks';\nimport { useHistory } from 'react-router-dom';\n\nconst LOCAL_STORE_ACCOUNTS_KEY = 'accounts';\n\nconst useStyles = makeStyles()((theme) => ({\n paperContainer: {\n alignItems: 'center',\n },\n successAstronaut: {\n height: '300px',\n },\n errorAstronaut: {\n height: '250px',\n margin: '20px 0',\n },\n title: { marginTop: theme.spacing(2) },\n subtitle: {},\n needHelpContainer: {\n marginTop: '2rem',\n display: 'flex',\n alignItems: 'center',\n },\n needHelpText: {},\n link: {\n textDecoration: 'none',\n color: theme.palette.primary.main,\n paddingLeft: '5px',\n },\n buttonLink: {},\n spinner: {\n padding: '50px',\n },\n}));\n\nconst typeMapping = {\n invite: {\n url: null,\n noButton: false,\n userIdRequired: true,\n withNotifications: true,\n successMessageWithUser:\n 'See the notifications in the top navigation bar of the Drive to review and accept the invite',\n successMessageWithoutUser: 'Login to accept the invite',\n },\n transfer: {\n url: null,\n noButton: false,\n userIdRequired: true,\n withNotifications: true,\n successMessageWithUser:\n 'See the notifications in the top navigation bar of the Drive to review and accept the transfer',\n successMessageWithoutUser: 'Login to accept the transfer',\n },\n emailUpdated: {\n url: null,\n noButton: true,\n withNotifications: false,\n userIdRequired: true,\n successMessageWithUser: 'please go to your inbox to verify your email',\n },\n passwordUpdated: {\n url: null,\n noButton: false,\n withNotifications: false,\n userIdRequired: true,\n successMessageWithUser: 'Your password was updated',\n successMessageWithoutUser: 'You can now login with your new password',\n },\n usernameUpdated: {\n noButton: false,\n url: null,\n withNotifications: false,\n userIdRequired: true,\n successMessageWithUser: 'Your username was updated',\n },\n changeEmail: {\n url: '/v3/account/security/email/validate',\n noButton: false,\n withNotifications: false,\n userIdRequired: true,\n successMessageWithUser: 'You successfully updated your email!',\n successMessageWithoutUser: 'You successfully updated your email!',\n },\n resetPasswordRequest: {\n url: null,\n withNotifications: false,\n noButton: true,\n userIdRequired: false,\n successMessageWithUser: 'We have sent you an email with a link to reset your password',\n successMessageWithoutUser: 'We have sent you an email with a link to reset your password',\n },\n setPasswordRequest: {\n url: null,\n withNotifications: false,\n noButton: true,\n userIdRequired: false,\n successMessageWithUser: 'We have sent you an email with a link to set your password',\n successMessageWithoutUser: 'We have sent you an email with a link to set your password',\n },\n resetPassword: {\n url: '/v3/account/security/password/validate',\n noButton: false,\n withNotifications: false,\n userIdRequired: true,\n successMessageWithUser:\n 'You successfully updated your password! You can update your password by clicking your user avatar in the top right and choosing manage account.',\n successMessageWithoutUser: 'You successfully updated your password. You can now login with your new password.',\n },\n registration: {\n url: '/v3/account/security/email/validate',\n userIdRequired: true,\n noButton: false,\n withNotifications: false,\n successMessageWithUser: 'Your registration was successful! You can now login to your account',\n successMessageWithoutUser: 'Your registration was successful! You can now start using Ellipsis Drive.',\n },\n registrationInvite: {\n url: null,\n userIdRequired: true,\n withNotifications: false,\n noButton: false,\n successMessageWithoutExistingUser: `Looks like your first time around here! Let's get you setup!`,\n successMessageWithUser:\n 'See the notifications in the top navigation bar of the Drive to review and accept the invite',\n successMessageWithoutUser: `Login to accept the invite`,\n },\n transferInvite: {\n url: null,\n userIdRequired: true,\n noButton: false,\n withNotifications: true,\n successMessageWithoutExistingUser: `Looks like your first time around here! Let's get you setup!`,\n successMessageWithUser:\n 'See the notifications in the top navigation bar of the Drive to review and accept the transfer',\n successMessageWithoutUser: `Login to accept the invite`,\n },\n registrationReferral: {\n url: null,\n userIdRequired: true,\n noButton: false,\n withNotifications: false,\n successMessageWithoutExistingUser: `Welcome to Ellipsis drive. Let's get you setup!`,\n successMessageWithUser: 'You are already an Ellipsis Drive member',\n successMessageWithoutUser: `You are already an Ellipsis Drive member`,\n },\n};\n\nconst RegistrationPage = () => {\n const { classes } = useStyles();\n const { type, validationToken, userId, invitedByUserId } = useQueryParams();\n const user = useMinimalAuth();\n const { signout, signin, fetchUserInfo } = useAuthFuncs();\n const [accounts /* , setAccounts */] = useLocalStorage(LOCAL_STORE_ACCOUNTS_KEY, []);\n const [userNotExists, setUserNotExists] = useState(false);\n\n const [error, setError] = useState(null);\n const [loadingValidation, setLoadingValidation] = useState(true);\n const [loadingUser, setLoadingUser] = useState(true);\n const [loadingCheckUser, setLoadingCheckUser] = useState(true);\n\n const history = useHistory();\n console.log('registration user', user);\n const manageUser = useCallback(() => {\n console.log('managing user');\n\n let cb = () => {\n setLoadingUser(false);\n };\n\n if (!userId) {\n cb();\n }\n\n if (user && user.id === userId) {\n console.log('current user is correct');\n fetchUserInfo(user, cb);\n } else {\n let potentialAccount = accounts ? accounts.find((a) => a.id === userId) : null;\n\n if (potentialAccount) {\n console.log('good user found in cache trying to login');\n signin(potentialAccount, cb);\n } else {\n if (user) {\n console.log('user not found so login out');\n signout(cb);\n } else {\n cb();\n console.log('desired user not found and not logged in');\n }\n }\n }\n }, [signin, userId, accounts, user, signout, fetchUserInfo]);\n\n const checkUserExits = useCallback(async () => {\n console.log('check user exists');\n if (!userId) {\n setLoadingCheckUser(false);\n return;\n }\n\n try {\n /* let res = */ await ApiManager.get('/v3/user/' + userId);\n console.log('user exits');\n } catch (e) {\n console.log('user does not exist');\n setUserNotExists(true);\n }\n setLoadingCheckUser(false);\n }, [userId]);\n\n const validateWithBackend = useCallback(\n async (type, token) => {\n try {\n if (typeMapping[type].url) {\n await ApiManager.post(`${typeMapping[type].url}`, { token: token });\n }\n } catch (error) {\n console.log('type', type);\n if (type === 'registration') {\n try {\n await ApiManager.get(`/v3/user/${userId}`);\n } catch {\n setError(error.message);\n }\n } else {\n setError(error.message);\n }\n }\n checkUserExits();\n manageUser();\n setLoadingValidation(false);\n },\n [checkUserExits, manageUser, userId]\n );\n\n const firstTime = useRef(true);\n useEffect(() => {\n console.log('try using effect');\n if (!firstTime.current) {\n //return;\n }\n firstTime.current = false;\n\n if (\n !type ||\n !Object.keys(typeMapping).includes(type) ||\n (!validationToken && typeMapping[type].url) ||\n (!userId && typeMapping[type].userIdRequired)\n ) {\n setError('Invalid link');\n setLoadingCheckUser(false);\n setLoadingUser(false);\n setLoadingValidation(false);\n } else {\n validateWithBackend(type, validationToken);\n }\n }, [validationToken, type, userId, manageUser, checkUserExits, validateWithBackend]);\n\n const loading = loadingCheckUser || loadingValidation || loadingUser;\n\n return (\n \n {errors.submit} \n
\n )}\n\n \n \n Need help? \n \n Contact us\n \n
\n \n \n \n {!this.props.modalContent.isImage ? (\n \n \n ) : (\n \n \n )}\n\n {showMakeDefaultButton && this.props.modalContent.isImage ? (\n \n \n ) : null}\n
\n );\n }\n}\n\nexport default ModalView;\n","import React from 'react';\n\nimport { withRouter } from 'react-router-dom';\n\nclass NavigationHelper extends React.Component {\n componentDidUpdate = (prevProps) => {\n if (this.props.location) {\n let hideNav = new URLSearchParams(prevProps.location.search).get('hideNavbar');\n let newHideNav = new URLSearchParams(this.props.location.search).get('hideNavbar');\n\n if (this.props.location.pathname !== prevProps.location.pathname) {\n this.props.onOpenSidebar(false);\n\n this.props.redirect(null);\n }\n\n if (hideNav !== newHideNav) {\n this.props.checkNavbar({ value: newHideNav === 'true' });\n }\n }\n };\n\n render() {\n return this.props.children;\n }\n}\n\nexport default withRouter(NavigationHelper);\n","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getSnackbarContentUtilityClass(slot) {\n return generateUtilityClass('MuiSnackbarContent', slot);\n}\nconst snackbarContentClasses = generateUtilityClasses('MuiSnackbarContent', ['root', 'message', 'action']);\nexport default snackbarContentClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"action\", \"className\", \"message\", \"role\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { emphasize } from '@mui/system/colorManipulator';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Paper from '../Paper';\nimport { getSnackbarContentUtilityClass } from './snackbarContentClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes\n } = ownerState;\n const slots = {\n root: ['root'],\n action: ['action'],\n message: ['message']\n };\n return composeClasses(slots, getSnackbarContentUtilityClass, classes);\n};\nconst SnackbarContentRoot = styled(Paper, {\n name: 'MuiSnackbarContent',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})(({\n theme\n}) => {\n const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;\n const backgroundColor = emphasize(theme.palette.background.default, emphasis);\n return _extends({}, theme.typography.body2, {\n color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),\n backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n padding: '6px 16px',\n borderRadius: (theme.vars || theme).shape.borderRadius,\n flexGrow: 1,\n [theme.breakpoints.up('sm')]: {\n flexGrow: 'initial',\n minWidth: 288\n }\n });\n});\nconst SnackbarContentMessage = styled('div', {\n name: 'MuiSnackbarContent',\n slot: 'Message',\n overridesResolver: (props, styles) => styles.message\n})({\n padding: '8px 0'\n});\nconst SnackbarContentAction = styled('div', {\n name: 'MuiSnackbarContent',\n slot: 'Action',\n overridesResolver: (props, styles) => styles.action\n})({\n display: 'flex',\n alignItems: 'center',\n marginLeft: 'auto',\n paddingLeft: 16,\n marginRight: -8\n});\nconst SnackbarContent = /*#__PURE__*/React.forwardRef(function SnackbarContent(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiSnackbarContent'\n });\n const {\n action,\n className,\n message,\n role = 'alert'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = props;\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsxs(SnackbarContentRoot, _extends({\n role: role,\n square: true,\n elevation: 6,\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref\n }, other, {\n children: [/*#__PURE__*/_jsx(SnackbarContentMessage, {\n className: classes.message,\n ownerState: ownerState,\n children: message\n }), action ? /*#__PURE__*/_jsx(SnackbarContentAction, {\n className: classes.action,\n ownerState: ownerState,\n children: action\n }) : null]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? SnackbarContent.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * The action to display. It renders after the message, at the end of the snackbar.\n */\n action: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The message to display.\n */\n message: PropTypes.node,\n /**\n * The ARIA role attribute of the element.\n * @default 'alert'\n */\n role: PropTypes /* @typescript-to-proptypes-ignore */.string,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default SnackbarContent;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getSnackbarUtilityClass(slot) {\n return generateUtilityClass('MuiSnackbar', slot);\n}\nconst snackbarClasses = generateUtilityClasses('MuiSnackbar', ['root', 'anchorOriginTopCenter', 'anchorOriginBottomCenter', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft']);\nexport default snackbarClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"onEnter\", \"onExited\"],\n _excluded2 = [\"action\", \"anchorOrigin\", \"autoHideDuration\", \"children\", \"className\", \"ClickAwayListenerProps\", \"ContentProps\", \"disableWindowBlurListener\", \"message\", \"onBlur\", \"onClose\", \"onFocus\", \"onMouseEnter\", \"onMouseLeave\", \"open\", \"resumeHideDuration\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { useSlotProps } from '@mui/base/utils';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { ClickAwayListener } from '@mui/base/ClickAwayListener';\nimport { useSnackbar } from '@mui/base/useSnackbar';\nimport styled from '../styles/styled';\nimport useTheme from '../styles/useTheme';\nimport useThemeProps from '../styles/useThemeProps';\nimport capitalize from '../utils/capitalize';\nimport Grow from '../Grow';\nimport SnackbarContent from '../SnackbarContent';\nimport { getSnackbarUtilityClass } from './snackbarClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n anchorOrigin\n } = ownerState;\n const slots = {\n root: ['root', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`]\n };\n return composeClasses(slots, getSnackbarUtilityClass, classes);\n};\nconst SnackbarRoot = styled('div', {\n name: 'MuiSnackbar',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}`]];\n }\n})(({\n theme,\n ownerState\n}) => {\n const center = {\n left: '50%',\n right: 'auto',\n transform: 'translateX(-50%)'\n };\n return _extends({\n zIndex: (theme.vars || theme).zIndex.snackbar,\n position: 'fixed',\n display: 'flex',\n left: 8,\n right: 8,\n justifyContent: 'center',\n alignItems: 'center'\n }, ownerState.anchorOrigin.vertical === 'top' ? {\n top: 8\n } : {\n bottom: 8\n }, ownerState.anchorOrigin.horizontal === 'left' && {\n justifyContent: 'flex-start'\n }, ownerState.anchorOrigin.horizontal === 'right' && {\n justifyContent: 'flex-end'\n }, {\n [theme.breakpoints.up('sm')]: _extends({}, ownerState.anchorOrigin.vertical === 'top' ? {\n top: 24\n } : {\n bottom: 24\n }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {\n left: 24,\n right: 'auto'\n }, ownerState.anchorOrigin.horizontal === 'right' && {\n right: 24,\n left: 'auto'\n })\n });\n});\nconst Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiSnackbar'\n });\n const theme = useTheme();\n const defaultTransitionDuration = {\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen\n };\n const {\n action,\n anchorOrigin: {\n vertical,\n horizontal\n } = {\n vertical: 'bottom',\n horizontal: 'left'\n },\n autoHideDuration = null,\n children,\n className,\n ClickAwayListenerProps,\n ContentProps,\n disableWindowBlurListener = false,\n message,\n open,\n TransitionComponent = Grow,\n transitionDuration = defaultTransitionDuration,\n TransitionProps: {\n onEnter,\n onExited\n } = {}\n } = props,\n TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),\n other = _objectWithoutPropertiesLoose(props, _excluded2);\n const ownerState = _extends({}, props, {\n anchorOrigin: {\n vertical,\n horizontal\n },\n autoHideDuration,\n disableWindowBlurListener,\n TransitionComponent,\n transitionDuration\n });\n const classes = useUtilityClasses(ownerState);\n const {\n getRootProps,\n onClickAway\n } = useSnackbar(_extends({}, ownerState));\n const [exited, setExited] = React.useState(true);\n const rootProps = useSlotProps({\n elementType: SnackbarRoot,\n getSlotProps: getRootProps,\n externalForwardedProps: other,\n ownerState,\n additionalProps: {\n ref\n },\n className: [classes.root, className]\n });\n const handleExited = node => {\n setExited(true);\n if (onExited) {\n onExited(node);\n }\n };\n const handleEnter = (node, isAppearing) => {\n setExited(false);\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n };\n\n // So we only render active snackbars.\n if (!open && exited) {\n return null;\n }\n return /*#__PURE__*/_jsx(ClickAwayListener, _extends({\n onClickAway: onClickAway\n }, ClickAwayListenerProps, {\n children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({}, rootProps, {\n children: /*#__PURE__*/_jsx(TransitionComponent, _extends({\n appear: true,\n in: open,\n timeout: transitionDuration,\n direction: vertical === 'top' ? 'down' : 'up',\n onEnter: handleEnter,\n onExited: handleExited\n }, TransitionProps, {\n children: children || /*#__PURE__*/_jsx(SnackbarContent, _extends({\n message: message,\n action: action\n }, ContentProps))\n }))\n }))\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Snackbar.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * The action to display. It renders after the message, at the end of the snackbar.\n */\n action: PropTypes.node,\n /**\n * The anchor of the `Snackbar`.\n * On smaller screens, the component grows to occupy all the available width,\n * the horizontal alignment is ignored.\n * @default { vertical: 'bottom', horizontal: 'left' }\n */\n anchorOrigin: PropTypes.shape({\n horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired,\n vertical: PropTypes.oneOf(['bottom', 'top']).isRequired\n }),\n /**\n * The number of milliseconds to wait before automatically calling the\n * `onClose` function. `onClose` should then set the state of the `open`\n * prop to hide the Snackbar. This behavior is disabled by default with\n * the `null` value.\n * @default null\n */\n autoHideDuration: PropTypes.number,\n /**\n * Replace the `SnackbarContent` component.\n */\n children: PropTypes.element,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * Props applied to the `ClickAwayListener` element.\n */\n ClickAwayListenerProps: PropTypes.object,\n /**\n * Props applied to the [`SnackbarContent`](/material-ui/api/snackbar-content/) element.\n */\n ContentProps: PropTypes.object,\n /**\n * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.\n * @default false\n */\n disableWindowBlurListener: PropTypes.bool,\n /**\n * When displaying multiple consecutive snackbars using a single parent-rendered\n * `\n \n \n
\n \n \n
\n ) : this.state.mode360 ? (\n \n \n \n
\n ) : (\n \n
\n )}\n {modalContent.isImage ? (\n \n 
\n
\n \n \n {this.state.mode360 ? \n
\n \n {\n window.open(modalContent.content);\n }}\n size=\"large\"\n >\n
\n \n \n {this.getCorrectIcon()}\n \n
\n \n
\n );\n};\n\nProjectNameStep.propTypes = {\n user: PropTypes.shape({\n id: PropTypes.string,\n }).isRequired,\n projectName: PropTypes.string.isRequired,\n handleProjectNameChange: PropTypes.func.isRequired,\n projectNameError: PropTypes.string,\n};\n\nexport default ProjectNameStep;\n","import React from 'react';\n\nimport { Paper, ButtonBase, Typography /* , Divider */ } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport PropTypes from 'prop-types';\n\nimport ProjectTypeIcon from '../../../ReusableComponents/ProjectTypeIcon';\n\nconst useStyles = makeStyles({ name: 'ProjectTypeStep' })((theme, _params, classes) => ({\n buttonContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'stretch',\n width: '100%',\n gap: 2,\n borderRadius: theme.spacing(1),\n },\n button: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n backgroundColor: theme.palette.background.paper,\n padding: theme.spacing(3),\n minWidth: 32,\n boxSizing: 'content-box',\n gap: theme.spacing(1),\n [`&:first-of-type`]: { borderRadius: theme.spacing(1, 0, 0, 1) },\n [`&:last-of-type`]: { borderRadius: theme.spacing(0, 1, 1, 0) },\n [`&.${classes.selected}`]: { boxShadow: `inset 0 0 0 1px ${theme.palette.primary.main}` },\n },\n buttonIcon: {\n width: '100%',\n minWidth: 24,\n maxWidth: 64,\n aspectRatio: 1,\n },\n buttonLabel: {\n textAlign: 'center',\n },\n}));\n\nconst ProjectTypeStep = ({ selectedType, setSelectedType }) => {\n const { classes, cx } = useStyles();\n\n return (\n \n {loading ? (\n \n \n \n \n )}\n
\n );\n};\n\nFinishedStep.propTypes = {\n loading: PropTypes.bool.isRequired,\n};\n\nexport default FinishedStep;\n","import React, { useCallback, useState } from 'react';\n\nimport PropTypes from 'prop-types';\nimport { useHistory } from 'react-router-dom';\n\nimport { makeStyles } from 'tss-react/mui';\nimport { CircularProgress, Stepper, Step, StepLabel, StepContent, Button, Paper, Typography } from '@mui/material';\n\nimport ProjectNameStep from './ProjectNameStep';\nimport ProjectTypeStep from './ProjectTypeStep';\nimport FinishedStep from './FinishedStep';\nimport ApiManager from '../../ApiManager';\nimport { useCurrentFolder } from 'Drive/CurrentFolderContext';\nimport { useAuthFuncs, useMinimalAuth } from 'Account/AuthContext';\nimport { useMainContext } from 'ReusableComponents';\nimport { usePushToDataLayer } from 'ConsentContext';\n\nconst MAX_LENGTH = 64;\nconst INITIAL_ERROR_STATE = { error: null, errorName: '' };\n\nconst useStyles = makeStyles({ name: 'NewProjectStepper' })((theme) => ({\n root: {\n width: '100%',\n },\n stepperContainer: {\n // padding: 24,\n paddingBottom: '20px',\n },\n button: {\n marginTop: theme.spacing(1),\n marginRight: theme.spacing(1),\n },\n actionsContainer: {\n marginTop: theme.spacing(2),\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: theme.spacing(1, 2),\n flexWrap: 'wrap-reverse',\n },\n resetContainer: {\n padding: theme.spacing(3),\n },\n}));\n\n/* const nameToDataSource = (name) => {\n if (name === 'Sentinel-2') return 'sentinel2';\n return 'sentinel1VVVH';\n}; */\n\nfunction getSteps() {\n return ['Select a type', 'Choose a name', 'Upload your data!'];\n}\n\nconst NewProjectStepper = ({ activeStep, setActiveStep, handleCloseNewProjectDialog, demoMode, className }) => {\n const { classes, cx } = useStyles();\n const steps = getSteps();\n\n const history = useHistory();\n const { currentFolderInfo, mainMode } = useCurrentFolder();\n const { addPath } = useMainContext();\n const [loading, setLoading] = useState(false);\n const [projectName, setProjectName] = useState('');\n const [projectNameError, setProjectNameError] = useState(INITIAL_ERROR_STATE);\n const [selectedType, setSelectedType] = useState(null);\n const [mapId, setMapId] = useState(null);\n const { fetchUserInfo } = useAuthFuncs();\n\n const user = useMinimalAuth();\n\n const pushToDataLayer = usePushToDataLayer();\n\n const handleProjectNameChange = (e) => {\n if (e.target.value?.length === 0 || e.target.value?.length > MAX_LENGTH) {\n setProjectNameError({ error: true, errorName: '' });\n } else {\n setProjectNameError(INITIAL_ERROR_STATE);\n }\n\n setProjectName(e.target.value);\n };\n\n const handleNext = (e) => {\n e.preventDefault();\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const handleReset = () => {\n setActiveStep(0);\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setLoading(true);\n let body = {\n name: projectName.trim(),\n };\n\n if (currentFolderInfo) {\n body['parentId'] = currentFolderInfo.id;\n }\n\n body.type = selectedType === 'shape' ? 'vector' : selectedType === 'pointCloud' ? 'pointCloud' : 'raster';\n let res;\n try {\n res = await ApiManager.post(`/v3/path/${body.type}`, body, user);\n } catch (e) {\n setLoading(false);\n setProjectNameError({ error: e.message, name: projectName, exists: true });\n return;\n }\n\n var today = new Date();\n var dd = String(today.getDate()).padStart(2, '0');\n var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!\n var yyyy = today.getFullYear();\n\n today = yyyy + '-' + mm + '-' + dd;\n ApiManager.post(\n '/v3/path/' +\n res.id +\n `/${selectedType === 'shape' ? 'vector' : selectedType === 'pointCloud' ? 'pointCloud' : 'raster'}/timestamp`,\n { date: { from: today, to: today } },\n user\n ).then((r) => {\n addPath({ id: res.id, parentId: currentFolderInfo?.id, mainMode: mainMode });\n\n fetchUserInfo();\n setLoading(false);\n\n if (!!res) {\n pushToDataLayer({\n dataLayer: {\n event: 'new-project-added',\n },\n });\n\n setMapId(res.id);\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n }\n });\n };\n\n const handleGoToSettings = (e) => {\n e.preventDefault();\n\n setActiveStep(0);\n handleCloseNewProjectDialog();\n history.push(`${mainMode}?pathId=${mapId}`);\n };\n\n const getStepContent = useCallback(\n (step) => {\n switch (step) {\n case 0:\n return \n {user || demoMode ? (\n <>\n \n {steps.map((label, index) => (\n \n {label} \n \n \n \n \n ))}\n \n {activeStep === steps.length && (\n \n All steps completed - you're finished \n \n \n )}\n \n ) : (\n
\n );\n};\n\nNewProjectStepper.propTypes = {\n activeStep: PropTypes.number.isRequired,\n setActiveStep: PropTypes.func.isRequired,\n handleCloseNewProjectDialog: PropTypes.func.isRequired,\n};\n\nexport default NewProjectStepper;\n","import React from 'react';\nimport { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';\n\nimport { useHistory } from 'react-router';\n\nconst RedirectDialog = ({ open, handleClose }) => {\n const history = useHistory();\n\n return (\n \n To create a layer, please log in or register first. \n
\n )}\n \n \n Log in\n \n \n Register\n \n
\n \n {action?.media?.type === 'img' ? (\n
\n {action?.media?.src}
\n )}\n ![\"Cookie](\"/images/astronautCookie.webp\")
\n \n \n We value your privacy\n \n \n We respect your privacy and are committed to protecting your personal information. This cookie policy\n explains how we use cookies on our website. By using our website, you consent to the use of cookies as\n described in this policy.\n \n
\n - \n {TYPES?.map((t) => (\n
- \n {accountsFiltered.map(\n (account) =>\n account.id !== user.id && (\n
\n \n \n {ApiManager.displayName}\n \n \n ) : null}\n
\n \n )}\n\n \n\n {mainMode === '/view' && \n
\n \n )}\n \n {\n const canCreateHere =\n tourOpen ||\n (mainMode === '/drive/me' && (!currentFolderInfo || currentFolderInfo.type === 'folder')) ||\n (mainMode === '/drive/shared' &&\n currentFolderInfo &&\n currentFolderInfo.type === 'folder' &&\n currentFolderInfo.yourAccess.accessLevel >= ApiManager.newAccessLevel['admin']);\n\n if (!canCreateHere || !user) {\n props.handleOpenNewProjectDialog();\n } else {\n props.setNewCaptureKey(e);\n props.onOpenSidebar(false);\n }\n }}\n />\n
\n\n - \n
- \n
- \n
- \n
\n \n {user?.stripe3dSecureInfo?.url\n ? 'You need to approve your payment'\n : 'Your content is temporarily blocked'}\n \n \n \n
\n - \n
- \n
- \n {items.slice(0, MAX_NUMBER_ITEM).map((map) => {\n return (\n
\n
\n );\n};\n\nconst DragPreview = memo(({ currentOffset, isDragging, itemType, item }) => {\n const { classes, cx } = useStyles();\n const renderItem = (type, item) => {\n switch (type) {\n case ItemTypes.GRID_ITEM:\n return \n
\n );\n});\nDragPreview.displayName = 'DragPreview';\n\nItemsDragLayer.propTypes = {};\n\nexport default ItemsDragLayer;\n","import { useState, useCallback, useEffect, useRef, useMemo } from 'react';\n\nimport ApiManager from 'ApiManager';\nimport VersionUtility from 'VersionUtility';\nimport { useMainContext } from 'ReusableComponents';\n\nimport { useLocalStorage } from 'hooks';\nimport { useCurrentFolder } from './CurrentFolderContext';\n\nconst CACHE_SIZE = 50;\nconst MAP_PAGE_RENDER_SIZE = 12;\n\nconst INITIAL_DATA_STATE = {\n data: [],\n loaded: [],\n page: 1,\n hasMore: true,\n nextPageStart: null,\n initial: true,\n};\n\nconst MAINMODE_NAMES = {\n '/drive/me': 'myDrive',\n '/drive/shared': 'sharedWithMe',\n '/drive/favorites': 'favorites',\n '/drive/trash': 'trash',\n};\n\nconst fetchData = async ({ type, pageStart, user, mainMode, pathId = null, search: inputSearch = {} }) => {\n // general data fetching function for the Drive\n if (mainMode === '/drive/search') {\n const { type: searchType, ...search } = { ...inputSearch };\n const filteredSearchType = searchType?.filter((st) =>\n type === 'map'\n ? st === 'vector' ||\n st === 'raster' ||\n st === 'pointCloud' ||\n st === 'file' ||\n st === 'bookmark' ||\n st === 'process'\n : type === st\n );\n\n return (!!searchType && filteredSearchType?.length > 0) || !searchType\n ? ApiManager.get(\n '/v3/path',\n {\n root: ['myDrive', 'sharedWithMe', 'favorites'],\n pageSize: CACHE_SIZE,\n pageStart: pageStart,\n ...(!!searchType && filteredSearchType?.length > 0\n ? { type: searchType }\n : {\n type:\n type === 'map'\n ? ApiManager?.cloud === 'esa'\n ? ['raster', 'vector', 'pointCloud', 'bookmark', 'process', 'file']\n : ['raster', 'vector', 'pointCloud', 'bookmark', 'file']\n : [type],\n }),\n ...search,\n },\n user\n )\n .then((res) => VersionUtility.convertListRoot(res))\n .catch((error) => console.error(error))\n : new Promise((resolve) => resolve({ result: [], nextPageStart: null }));\n } else {\n const url = !!pathId ? `/v3/path/${pathId}/list` : `/v3/account/root/${MAINMODE_NAMES[mainMode]}`;\n return ApiManager.get(\n url,\n {\n type:\n type === 'map'\n ? ApiManager?.cloud === 'esa'\n ? ['raster', 'vector', 'pointCloud', 'bookmark', 'process', 'file']\n : ['raster', 'vector', 'pointCloud', 'bookmark', 'file']\n : [type],\n pageStart,\n pageSize: CACHE_SIZE,\n includeTrashed: false,\n },\n user\n )\n .then((res) => {\n let newRes = VersionUtility.convertListRoot(res);\n if (mainMode !== '/drive/trash') {\n newRes['result'] = newRes['result'].filter((x) => !x.deleted);\n }\n return newRes;\n })\n .catch((error) => {\n console.log('in catch');\n console.error(error);\n });\n }\n};\n\nconst useDataProvider = () => {\n const [view, setView] = useLocalStorage('driveViewPreference', 'grid');\n const { onOpenSnackbar, addedPath, addPath, driveContentKey } = useMainContext();\n const { currentFolderInfo, mainMode, searchValue, getSearchValue, user } = useCurrentFolder();\n\n const search = getSearchValue();\n\n const pathId = currentFolderInfo?.id;\n const isFiles = useMemo(\n () => currentFolderInfo && currentFolderInfo.type !== 'folder' && mainMode !== '/drive/search',\n [currentFolderInfo, mainMode]\n );\n\n // `data` is `null` when initialized, `[]` when there's nothing\n // `nextPageStart` is `null` when initialized, not `null` when there's more stuff to be retrieved\n const [items, setItems] = useState({\n maps: INITIAL_DATA_STATE,\n folders: INITIAL_DATA_STATE,\n resetNumber: 0,\n page: 1,\n parentId: currentFolderInfo?.id,\n mainMode: currentFolderInfo?.mainMode,\n });\n\n const folders = items.folders;\n const maps = items.maps;\n\n const [error, setError] = useState(null);\n\n const resetRef = useRef(0);\n\n const reset = useCallback((mainMode, parentId) => {\n setItems((prev) => {\n const newNumber = prev.resetNumber + 1;\n resetRef.current = newNumber;\n return {\n mainMode,\n parentId,\n maps: INITIAL_DATA_STATE,\n folders: INITIAL_DATA_STATE,\n page: 1,\n resetNumber: newNumber,\n };\n });\n }, []);\n\n const hasMore = useMemo(\n () => (folders.hasMore ? 'folders' : maps.hasMore || maps?.loaded?.length > maps?.data?.length ? 'maps' : false),\n [folders.hasMore, maps.hasMore, maps?.loaded?.length, maps?.data?.length]\n );\n\n const handleFolderSet = useCallback(({ result, nextPageStart }) => {\n setItems((prevItems) => ({\n ...prevItems,\n page: prevItems.page + 1,\n folders: {\n hasMore: !!nextPageStart,\n data: !!prevItems.folders.data ? [...prevItems.folders.data, ...result] : [...result],\n nextPageStart,\n },\n }));\n\n setError(null);\n }, []);\n\n const handleMapsSet = useCallback(({ type, result, nextPageStart }) => {\n if (type) {\n if (type === 'fetch') {\n setItems((prevItems) => {\n const newLoaded = [...prevItems.maps.loaded, ...result];\n\n return {\n ...prevItems,\n page: prevItems.page + 1,\n maps: {\n ...prevItems.maps,\n hasMore: nextPageStart,\n page: prevItems.maps.page + 1,\n loaded: [...newLoaded],\n data: [...[...newLoaded].splice(0, prevItems.maps.page * MAP_PAGE_RENDER_SIZE)],\n nextPageStart,\n },\n };\n });\n } else if (type === 'loaded') {\n setItems((prevItems) => {\n return {\n ...prevItems,\n page: prevItems.page + 1,\n maps: {\n ...prevItems.maps,\n page: prevItems.maps.page + 1,\n data: [...prevItems.maps.loaded].splice(0, prevItems.maps.page * MAP_PAGE_RENDER_SIZE),\n },\n };\n });\n }\n\n setError(null);\n }\n }, []);\n\n //current pathId en userId need to be in a ref\n //currently loading must also be in a ref\n\n const collectedPages = useRef({});\n const loadMore = useCallback(\n (page) => {\n if (items.resetNumber !== resetRef.current) {\n // console.log('can this actualy even happen?');\n return;\n }\n //to prevent racing grid to list view cause loadMore can be called multiple times in this case\n if (collectedPages.current[resetRef.current] && collectedPages.current[resetRef.current].includes(page)) {\n // console.log('page already being retrieved');\n return;\n }\n collectedPages.current[resetRef.current] = collectedPages.current[resetRef.current]\n ? [...collectedPages.current[resetRef.current], page]\n : [page];\n\n // called when infinite scroller wants to load more stuff\n // first tries to load all folders and then the maps\n if (!error) {\n if (hasMore === 'folders') {\n fetchData({ type: 'folder', pageStart: folders.nextPageStart, user, mainMode, pathId, search })\n .then((r) => {\n const { result, nextPageStart } = r;\n if (items.resetNumber === resetRef.current) {\n handleFolderSet({ result, nextPageStart });\n }\n })\n .catch((error) => {\n setError(error);\n console.error(error);\n });\n } else if (hasMore === 'maps') {\n if (maps.loaded.length > 0 && maps.loaded.length > maps.data.length) {\n handleMapsSet({ type: 'loaded' });\n } else {\n fetchData({ type: 'map', pageStart: maps.nextPageStart, user, mainMode, pathId, search })\n .then(({ result, nextPageStart }) => {\n if (items.resetNumber === resetRef.current) {\n handleMapsSet({ type: 'fetch', result, nextPageStart });\n }\n })\n .catch((error) => {\n setError(error);\n console.error(error);\n });\n }\n }\n }\n },\n [\n error,\n folders?.nextPageStart,\n handleFolderSet,\n items,\n handleMapsSet,\n hasMore,\n maps?.data?.length,\n maps?.loaded?.length,\n maps.nextPageStart,\n pathId,\n mainMode,\n search,\n user,\n ]\n );\n\n const identity = (value) => value;\n const handleOptimisticUpdate = useCallback(\n async ({\n updateMaps = identity,\n updateFolders = identity,\n revertMapsUpdate = identity,\n revertFoldersUpdate = identity,\n apiCall,\n onSuccess = null,\n onError = null,\n isSubscribed = true,\n }) => {\n // function to optimistically update the state and revert it if the call doesn't go through\n // type is either 'folder' or 'map'\n\n // do the optimistic update\n if (isSubscribed) {\n setItems((prevItems) => {\n return {\n ...prevItems,\n folders: {\n ...prevItems.folders,\n data: updateFolders(prevItems.folders.data ? prevItems.folders.data : []),\n },\n maps: {\n ...prevItems.maps,\n data: updateMaps(prevItems.maps.data ? prevItems.maps.data : []),\n loaded: updateMaps(prevItems.maps.loaded ? prevItems.maps.loaded : []),\n },\n };\n });\n }\n if (!apiCall) {\n return;\n }\n\n try {\n // validate the change with the backend\n const res = await apiCall;\n onSuccess && onSuccess(res);\n } catch (error) {\n console.log('error: ', error);\n // revert the optimistic update if the call failed\n if (isSubscribed) {\n setItems((prevItems) => {\n return {\n ...prevItems,\n folders: {\n ...prevItems.folders,\n data: revertFoldersUpdate(prevItems.folders.data ? prevItems.folders.data : []),\n },\n maps: {\n ...prevItems.maps,\n data: revertMapsUpdate(prevItems.maps.data ? prevItems.maps.data : []),\n loaded: revertMapsUpdate(prevItems.maps.loaded ? prevItems.maps.loaded : []),\n },\n };\n });\n }\n console.error(error);\n onError && onError(error);\n }\n },\n []\n );\n\n const handleUpdate = useCallback((path) => {\n setItems((prevItems) => ({\n ...prevItems,\n ...(path?.type === 'folder'\n ? { folders: { ...prevItems.folders, data: prevItems.folders.data.map((f) => (path?.id === f.id ? path : f)) } }\n : { maps: { ...prevItems.maps, data: prevItems.maps.data.map((f) => (path?.id === f.id ? path : f)) } }),\n }));\n }, []);\n\n const getPath = useCallback(\n (id) => [...items?.maps?.data, ...items?.folders?.data].find((p) => p?.id === id),\n [items?.folders, items?.maps]\n );\n\n const addNewFolder = useCallback(\n (newFolder) =>\n setItems((prevItems) => ({\n ...prevItems,\n folders: {\n ...prevItems.folders,\n data: [...prevItems.folders?.data, newFolder],\n },\n })),\n []\n );\n\n const handleAddNewFolder = async (name) => {\n try {\n const body = { name: name, type: 'folder' };\n if (pathId) {\n body.parentId = pathId;\n }\n\n const res = await ApiManager.post('/v3/path', body, user);\n const folderInfo = VersionUtility.convertPathInfo(await ApiManager.get(`/v3/path/${res.id}`, null, user));\n\n addNewFolder(folderInfo);\n onOpenSnackbar({\n content: 'Folder successfully added.',\n level: 'success',\n });\n } catch (error) {\n onOpenSnackbar({\n content: error.message ?? 'Folder creation failed.',\n level: 'error',\n });\n }\n };\n\n const noResult = useMemo(\n () => folders.data?.length === 0 && maps.data?.length === 0 && !folders.hasMore && !maps.hasMore && [folders, maps]\n );\n\n const fetchPathInfo = useCallback(\n ({ id, parentId, mainMode }) => {\n ApiManager.get(`/v3/path/${id}`, null, user)\n .then((r) => {\n r = VersionUtility.convertPathInfo(r);\n addPath({ id, parentId, mainMode, path: r });\n })\n .catch((e) => {\n console.log(e);\n });\n },\n [addPath, user]\n );\n\n const added = useRef([]);\n useEffect(() => {\n if (!addedPath.id) {\n return;\n }\n\n if (!added.current.includes(addedPath.id)) {\n if (!addedPath.path) {\n fetchPathInfo(addedPath);\n return;\n }\n added.current = [addedPath.id, ...added.current];\n\n if (addedPath.parentId === currentFolderInfo?.id && addedPath.mainMode === mainMode) {\n const result = addedPath.path;\n if (result.type === 'folder') {\n setItems((prevItems) => {\n if (prevItems.folders.data.map((x) => x.id).includes(addedPath.id)) {\n return prevItems;\n }\n return {\n ...prevItems,\n folders: {\n ...prevItems.folders,\n data: [result, ...prevItems.folders.data],\n },\n };\n });\n } else {\n setItems((prevItems) => {\n if (prevItems.maps.loaded.map((x) => x.id).includes(addedPath.id)) {\n return prevItems;\n }\n return {\n ...prevItems,\n maps: {\n ...prevItems.maps,\n data: [result, ...prevItems.maps.data],\n loaded: [result, ...prevItems.maps.loaded],\n },\n };\n });\n }\n }\n }\n }, [addedPath, mainMode, pathId, maps, user, currentFolderInfo?.id, fetchPathInfo]);\n\n useEffect(() => {\n if (!isFiles) {\n reset(mainMode, currentFolderInfo?.id);\n }\n }, [\n reset,\n mainMode,\n isFiles,\n currentFolderInfo?.id,\n user?.id,\n searchValue,\n currentFolderInfo?.publicAccess.publicAccessLevel,\n currentFolderInfo?.publicAccess.hidden,\n currentFolderInfo?.yourAccess.accessLevel,\n driveContentKey,\n ]);\n\n return {\n folders,\n getPath,\n handleAddNewFolder: handleAddNewFolder,\n handleOptimisticUpdate,\n handleUpdate,\n hasMore,\n initialLoaded: !maps.initial && !folders.initial,\n isFiles,\n items: items,\n loadMore,\n MAP_PAGE_RENDER_SIZE,\n maps,\n noResult,\n reset,\n setView,\n view,\n error,\n };\n};\n\nexport default useDataProvider;\n","import React, { useCallback, useState } from 'react';\nimport {\n Box,\n Button,\n Collapse,\n Divider,\n IconButton,\n ListItemButton,\n ListItemText,\n Popover,\n Typography,\n useMediaQuery,\n} from '@mui/material';\n\nimport { Cancel, ExpandMore } from '@mui/icons-material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport TypeChip from 'ReusableComponents/TypeChip';\nimport DialogTitle from 'ReusableComponents/DialogTitle/DialogTitle';\nimport { GENERAL_INPUTS, INITIAL_SEARCH_VALS, SPATIAL_INPUTS } from './SearchInput';\n\nconst useStyles = makeStyles({ name: 'AdvancedSearch' })((theme, _params, classes) => ({\n root: {\n transition: theme.transitions.create('backdrop-filter'),\n backdropFilter: 'blur(0px)',\n [`&.${classes.open}`]: { backdropFilter: 'blur(1px)' },\n },\n paper: {\n boxSizing: 'border-box',\n maxWidth: 'min(750px, calc(100vw - 32px))',\n overflow: 'hidden',\n width: '100%',\n display: 'grid',\n gridTemplateRows: '1fr auto',\n transition: theme.transitions.create(['box-shadow', 'left'], { duration: theme.transitions.duration.shortest }),\n [theme.breakpoints.down('sm')]: { gridTemplateRows: 'auto auto 1fr auto' },\n },\n\n content: {\n overflow: 'auto',\n padding: theme.spacing(1, 3),\n paddingTop: theme.spacing(2),\n [theme.breakpoints.down('sm')]: { padding: theme.spacing(1, 2) },\n },\n grid: {\n display: 'grid',\n gridTemplateColumns: '150px 1fr',\n alignItems: 'center',\n gap: theme.spacing(1.5, 2),\n [theme.breakpoints.down('sm')]: { gridTemplateColumns: '1fr', gap: theme.spacing(0.5) },\n },\n\n listItem: { padding: theme.spacing(0, 2), margin: theme.spacing(0, -2), borderRadius: theme.spacing(1) },\n\n bottomContainer: {\n padding: theme.spacing(1, 3),\n paddingBottom: theme.spacing(2),\n [theme.breakpoints.down('sm')]: { padding: theme.spacing(1, 2), paddingBottom: theme.spacing(2) },\n },\n buttonContainer: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: theme.spacing(2) },\n\n chevron: {\n transition: theme.transitions.create('transform'),\n [`&.${classes.open}`]: { transform: 'rotate(180deg)' },\n },\n disabledHelpContainer: { display: 'flex', gap: theme.spacing(1), alignItems: 'center' },\n typeContainer: { display: 'inline-flex', gap: theme.spacing(1) },\n overrideDisable: { pointerEvents: 'all' },\n chip: { [theme.breakpoints.down('sm')]: { gap: theme.spacing(0.5), '& .MuiChip-label': { display: 'none' } } },\n disabled: {\n pointerEvents: 'none',\n cursor: 'default',\n '&:hover': { backgroundColor: 'initial' },\n '& .MuiTypography-root': { opacity: 0.38 },\n [`& .MuiButtonBase-root:not(.${classes.overrideDisable})`]: { opacity: 0.38 },\n },\n\n open: {},\n}));\n\nconst AdvancedSearch = ({\n open,\n searchRef,\n onClose,\n handleSearch,\n searchVals,\n setSearchVals,\n clearSearch,\n spatialDisabled,\n}) => {\n const { classes: styles, cx, theme } = useStyles();\n const [spatialSearch, setSpatialSearch] = useState(true);\n\n const isSm = useMediaQuery(theme.breakpoints.down('sm'));\n\n const boundingRect = searchRef.current?.getBoundingClientRect() || {};\n const { top = 0, left = 0, width = 0 } = { ...JSON.parse(JSON.stringify(boundingRect)) };\n\n const deleteType = useCallback(\n (typeKey) => {\n setSearchVals((old) => ({ ...old, type: old?.type?.map((k) => (k !== typeKey ? k : false)).filter((x) => !!x) }));\n },\n [setSearchVals]\n );\n\n const handleSearchSubmit = useCallback(() => {\n handleSearch();\n onClose();\n }, [handleSearch, onClose]);\n\n return (\n {renderItem(itemType, item)}
\n \n setSpatialSearch((old) => !old) : undefined}\n className={cx(styles.listItem, spatialDisabled && styles.disabled)}\n {...(spatialDisabled ? { focusRipple: false, disableRipple: true, tabIndex: -1 } : {})}\n >\n Spatial Search}\n secondary={\n spatialDisabled ? (\n Note: only available for vector and raster \n )\n }\n disableTypography\n />\n \n \n \n \n \n {SPATIAL_INPUTS?.map(({ key, ...i }) => (\n \n \n
\n \n {GENERAL_INPUTS?.map(({ key, ...i }) => (\n
\n \n Disabled by: \n
\n ) : (\n \n {searchVals?.type?.length === 0 ? (\n No type selected \n ) : (\n searchVals?.type?.map(\n (t) =>\n (t === 'folder' || t === 'file' || t === 'bookmark' || t === 'process') && (\n deleteType(t)}\n />\n )\n )\n )}\n
\n \n
\n \n );\n};\n\nconst useInputRowStyles = makeStyles({ name: 'InputRow' })((theme) => ({\n root: { display: 'flex', gap: theme.spacing(2), alignItems: 'center', minHeight: theme.spacing(6) },\n title: { alignSelf: 'flex-start', marginTop: theme.spacing(1) },\n}));\n\nconst InputRow = ({ input, searchVals, setSearchVals }) => {\n const { key, label, component: Component, reset } = { ...input };\n const { classes: styles } = useInputRowStyles();\n\n const resetFunc = useCallback(\n () => setSearchVals((old) => ({ ...old, [key]: INITIAL_SEARCH_VALS[key] })),\n [key, setSearchVals]\n );\n\n const setSearchVal = useCallback(\n (newVal) => {\n if (typeof newVal === 'function') {\n setSearchVals((old) => ({ ...old, [key]: newVal(old[key]) }));\n } else {\n setSearchVals((old) => ({ ...old, [key]: newVal }));\n }\n },\n [key, setSearchVals]\n );\n\n return (\n <>\n \n \n \n
\n \n \n
\n )}\n \n );\n};\n\nexport default AdvancedSearch;\n","import React from 'react';\n\nimport { Pause, PlayArrow } from '@mui/icons-material';\n\nimport { MultiSelectComponent } from '../Helpers';\n\nconst Active = ({ searchVal, setSearchVal }) => {\n const handleChange = (e) => {\n const {\n target: { value },\n } = e;\n\n setSearchVal(value);\n };\n\n const TYPES = [\n { key: 'active', label: 'Active', icon: PlayArrow, color: 'success' },\n { key: 'passive', label: 'Passive', icon: Pause, color: 'warning' },\n ];\n\n return - \n
\n
\n ) : (\n \n
\n );\n};\n\nexport default SearchAndFilters;\n","import React, { useEffect, useCallback, useRef } from 'react';\n\nimport PropTypes from 'prop-types';\nimport { useDrop } from 'react-dnd';\n\nimport { ListItem, ListItemSecondaryAction, ListItemIcon, ListItemText } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport ProjectTypeIcon from 'ReusableComponents/ProjectTypeIcon/ProjectTypeIcon';\nimport { ItemTypes } from 'Drive/ItemTypes';\nimport ApiManager from 'ApiManager';\nimport { useCurrentFolder } from 'Drive/CurrentFolderContext';\nimport { DriveMenuButton } from 'Drive/DriveMenu/DriveMenu';\nimport { AvatarWithInfo, FileIcon, FileNameComponent } from 'ReusableComponents';\n\nconst useStyles = makeStyles({ name: 'BreadCrumbLink' })((theme, _params, classes) => ({\n buttonBreadcrumb: {\n textTransform: 'none',\n minWidth: 'auto',\n color: theme.palette.text.secondary,\n border: '1px solid transparent',\n borderRadius: '8px',\n [`&.${classes.active}`]: { color: theme.palette.text.primary },\n },\n icon: { minWidth: theme.spacing(4) },\n link: {\n textDecoration: 'none',\n border: '1px solid transparent',\n },\n separator: {\n margin: '0px 2px',\n },\n active: {},\n canDrop: {\n border: `1px solid ${theme.palette.primary.main}`,\n margin: 0,\n },\n droppable: {\n background: theme.palette.primary.main + '20',\n border: `1px solid ${theme.palette.primary.main}`,\n },\n avatar: { marginLeft: theme.spacing(-1) },\n isRoot: { padding: theme.spacing(0.5, 2), paddingLeft: theme.spacing(1.5) },\n}));\n\nconst BreadcrumbLink = React.forwardRef(({ folder, content, active = false, disabled, owner }, ref) => {\n const { classes, cx } = useStyles();\n\n const isRoot = !folder;\n const { onBreadcrumbClick, root, currentFolderInfo, mainMode } = useCurrentFolder();\n\n // needed because useDrop doesn't do well with changing props\n const currentRoot = useRef(root);\n useEffect(() => {\n let canUpdate = true;\n if (!!canUpdate) {\n currentRoot.current = root;\n }\n\n return () => {\n canUpdate = false;\n };\n }, [root]);\n\n const canDropFunc = useCallback(\n (item) => {\n // if in shared, check that owner === targetOwner and that accessLevel >= 1000\n const condition =\n (mainMode === '/drive/me' && !folder && !!currentFolderInfo) ||\n (folder?.id !== currentFolderInfo?.id &&\n (mainMode === '/drive/me' || mainMode === '/drive/shared') &&\n folder?.info?.yourAccess?.accessLevel >= ApiManager.newAccessLevel['edit+']);\n\n return condition;\n },\n [folder, mainMode, currentFolderInfo]\n );\n\n const [{ canDrop, isOver }, drop] = useDrop(\n () => ({\n accept: ItemTypes.GRID_ITEM,\n drop: () => ({ name: folder?.name, id: folder?.id }),\n canDrop: canDropFunc,\n collect: (monitor) => ({\n isOver: monitor.isOver(),\n canDrop: monitor.canDrop(),\n }),\n }),\n [canDropFunc]\n );\n\n const handleClick = () => {\n if ((folder && currentFolderInfo && folder.id === currentFolderInfo.id) || (!folder && !currentFolderInfo)) {\n return;\n }\n onBreadcrumbClick(isRoot ? null : folder.id);\n };\n\n return (\n \n {!!user ? (\n } variant=\"outlined\" color=\"primary\" onClick={toggleFavorite}>\n Add to drive\n \n ) : (\n \n This is an external path. {!!user ? 'Favorite this path' : 'Log in'} to add it to your drive.\n \n
\n );\n\n const isRoot = !path || path?.length === 0;\n const isValidCurrentMap = isValidMap(currentFolder);\n const errorComp = getErrorComp(isValidCurrentMap?.reason);\n\n const hasShareAccess = currentFolder?.yourAccess.accessLevel >= ApiManager.newAccessLevel['share'];\n const hasEditPlusAccess = currentFolder?.yourAccess.accessLevel >= ApiManager.newAccessLevel['edit+'];\n\n return (\n \n {external}\n {((root === 'favorites' && !!isRoot) ||\n (root === 'shared' && !!isRoot) ||\n (currentFolder?.yourAccess?.accessLevel < ApiManager.newAccessLevel['edit+'] && root !== 'external')) && (\n \n View only - You cannot create items in this location\n \n )}\n
\n );\n};\n\nDriveBreadcrumbs.propTypes = {\n pathId: PropTypes.string,\n};\n\nexport default DriveBreadcrumbs;\n","import React, { useState } from 'react';\n\nimport { CircularProgress, Dialog, DialogTitle, Typography } from '@mui/material';\nimport PlansSection from 'ReusableComponents/PlansSection/PlansSection';\nimport { CenteredBox } from '../../CenteredBox';\nimport { BuyNowButton, LoginButton } from '../DriveButtons';\nimport { makeStyles } from 'tss-react/mui';\nimport { useLocation } from 'react-router';\nimport { useCurrentFolder } from 'Drive/CurrentFolderContext';\nimport { useAuth, useAuthFuncs } from 'hooks';\nimport Pay from 'ReusableComponents/Pay';\nimport ApiManager from 'ApiManager';\nimport VersionUtility from 'VersionUtility';\n\nconst useStyles = makeStyles({ name: 'BuyItem' })((theme) => ({\n root: {\n display: 'flex',\n flex: '1 0 100%',\n flexDirection: 'column',\n height: '100%',\n },\n img: { maxWidth: '33vw', maxHeight: '33vh', marginTop: '1rem', marginBottom: '1.5rem' },\n buttonContainer: {\n display: 'flex',\n maxWidth: '50vw',\n gap: 12,\n flexWrap: 'wrap',\n justifyContent: 'center',\n },\n}));\n\nexport const BuyItem = () => {\n const location = useLocation();\n const { classes: styles } = useStyles();\n const { fetchUserInfo } = useAuthFuncs();\n const { currentFolderInfo, putInShared } = useCurrentFolder();\n const user = useAuth();\n const [dialogOpen, setDialogOpen] = useState(false);\n const [open, setOpen] = useState(false);\n const [loading, setLoading] = useState(false);\n\n const handleSubscribe = (plan) => {\n setOpen({ open: true, plan: plan });\n };\n\n const onPaid = async () => {\n setLoading(true);\n setOpen(false);\n await ApiManager.post(`/v3/path/${currentFolderInfo.id}/plan/${open.plan.id}/subscribe`, null, user);\n const res = VersionUtility.convertPathInfo(await ApiManager.get(`/v3/path/${currentFolderInfo.id}`, null, user));\n putInShared(res);\n setLoading(false);\n fetchUserInfo();\n };\n\n const justOnePlan = currentFolderInfo?.plans.length === 1;\n return (\n <>\n \n {open?.open && (\n \n
\n\n \n SMALL_SIZE ? 100 : 2}\n itemsBeforeCollapse={0}\n itemsAfterCollapse={2}\n className={classes.container}\n classes={{ separator: classes.separator }}\n >\n
\n \n
\n \n {!isRoot && windowWidth > SMALL_SIZE && (\n
\n\n \n
\n )}\n \n \n \n \n \n \n \n )}\n
\n \n {((!isRoot && hasShareAccess && windowWidth > SMALL_SIZE) || tourOpen) && (\n \n \n setSharingOpen(true)}\n disabled={!hasShareAccess}\n size=\"large\"\n >\n \n \n )}\n
\n {((!isRoot && windowWidth > SMALL_SIZE) || tourOpen) && (\n \n \n {!isRoot &&\n ['map', 'shape'].includes(currentFolder.type) &&\n hasEditPlusAccess &&\n windowWidth > SMALL_SIZE && (\n \n \n changeMainMode('/settings/general')}\n size=\"large\"\n >\n \n \n )}\n\n {((!isRoot && windowWidth > SMALL_SIZE) || tourOpen) &&\n currentFolder?.type &&\n ['map', 'shape', 'pointCloud'].includes(currentFolder.type) && (\n \n \n \n )}\n
\n \n changeMainMode('/view')}\n startIcon={
\n \n \n \n \n Get access to the{' '}\n {['raster', 'vector', 'pointCloud', 'map', 'shape'].includes(currentFolderInfo.type)\n ? 'layer'\n : currentFolderInfo.type}\n {' \"'}\n {currentFolderInfo.name}\n {'\"'}\n \n ![\"Not](\"/images/drive/Astronaut)
\n \n
\n \n );\n};\n","import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { POLLING_RATE, useCurrentFolder } from 'Drive/CurrentFolderContext';\nimport { useMinimalAuth } from 'hooks';\nimport ApiManager from 'ApiManager';\nimport {\n Box,\n CircularProgress,\n Collapse,\n Container,\n IconButton,\n List,\n ListItem,\n ListItemButton,\n ListItemIcon,\n ListItemText,\n ListSubheader,\n Stack,\n Typography,\n} from '@mui/material';\nimport { Cancel, CheckCircle } from '@mui/icons-material';\nimport moment from 'moment';\nimport NewJobButton from 'ReusableComponents/Process/NewJobButton';\nimport MarkdownWrapper from 'ReusableComponents/MarkdownEditor/MarkdownWrapper';\nimport RotatableArrow from 'ReusableComponents/RotatableArrow/RotatableArrow';\n\nconst ProcessComponent = forwardRef(({ onContextMenu }, ref) => {\n const { currentFolderInfo } = useCurrentFolder();\n\n const [jobsOpen, setJobsOpen] = useState(false);\n const [openJob, setOpenJob] = useState(false);\n\n const user = useMinimalAuth();\n\n const [jobs, setJobs] = useState([]);\n\n const getJobs = useCallback(() => {\n let url;\n const fullAccess = currentFolderInfo.yourAccess.accessLevel >= ApiManager.newAccessLevel['edit+'];\n\n if (fullAccess) {\n url = `/v3/path/${currentFolderInfo.id}/process/job`;\n } else {\n url = `/v3/path/process/job`;\n }\n\n ApiManager.get(url, {}, user)\n .then((res) => {\n res = res.filter((x) => x.path.id === currentFolderInfo.id);\n\n setJobs(res);\n })\n .catch((e) => {\n console.log(e);\n });\n }, [currentFolderInfo, user]);\n\n const jobsInterval = useRef();\n useEffect(() => {\n getJobs();\n\n jobsInterval.current = setInterval(getJobs, POLLING_RATE);\n return () => {\n clearInterval(jobsInterval.current);\n jobsInterval.current = null;\n };\n }, [getJobs]);\n\n return (\n \n \n {loading ? (\n {\n if (justOnePlan) {\n setOpen({ open: true, plan: currentFolderInfo?.plans[0] });\n } else {\n setDialogOpen(true);\n }\n }}\n label={\n justOnePlan\n ? 'Buy Access for ' +\n currentFolderInfo?.plans[0].monthlyFee.toLocaleString(undefined, {\n style: 'currency',\n currency: 'EUR',\n })\n : 'Buy Access'\n }\n />\n ) : (\n
\n - \n
- \n
\n
\n {hideDialog && !queryBreak && (!currentFolderInfo || currentFolderInfo.type === 'folder') && (\n \n {\n setDialogOpen(true);\n }}\n disabled={disabled}\n {...buttonProps}\n >\n
\n )}\n {
}\n {!!openNew && {
}\n {children}\n \n );\n }\n);\n\nexport default CombinedMenuItem;\nCombinedMenuItem.displayName = 'CombinedMenuItem';\n","import React from 'react';\n\nimport { DialogContent } from '@mui/material';\n\nimport Links from 'MapManagement/GeneralSettings/Links';\n\nconst Integrate = ({ path, layerInfo }) => {\n return (\n - \n
\n
\n \n {files?.length > 0 ? `${files.length} file${files.length === 1 ? '' : 's'}` : ''} \n
\n {files.length > 0 ? (\n \n ) : null}\n - \n
- \n {features?.length > 0 ? (\n features?.map((f) => (\n
- \n {parameters.map(\n (p, i) =>\n paramEdit === -1 && (\n
\n \n \n You are currently not logged in.\n \n \n \n
\n );\n};\n\nexport default UserNotAuthorized;\n","import React, { useEffect, useRef } from 'react';\n\nimport MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport DrawRectangle from 'mapbox-gl-draw-rectangle-mode';\n\nimport maplibregl from 'maplibre-gl';\nimport 'maplibre-gl/dist/maplibre-gl.css';\n\nimport { useMainContext } from 'ReusableComponents';\nimport { makeStyles } from 'tss-react/mui';\nimport bbox from '@turf/bbox';\nimport bboxPolygon from '@turf/bbox-polygon';\n\nconst MAP_ZOOM = 24;\n\nconst useStyles = makeStyles({ name: 'MapWrapper' })((theme, _params, classes) => ({\n root: {\n width: '100%',\n height: 200,\n position: 'relative',\n [`&.${classes.active}`]: { '& canvas:hover': { cursor: 'crosshair' } },\n },\n active: {},\n}));\n\nconst MapWrapper = ({ active, searchVal, handleChange }) => {\n const map = useRef(null);\n const { classes: styles, cx } = useStyles();\n const mapContainer = useRef(null);\n const mapboxDraw = useRef(null);\n const { onOpenSnackbar } = useMainContext();\n\n useEffect(() => {\n if (map.current) return; //stops map from intializing more than once\n\n map.current = new maplibregl.Map({\n renderWorldCopies: false,\n container: mapContainer.current,\n style: {\n version: 8,\n glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',\n sources: {\n osm: {\n type: 'raster',\n tiles: ['https://www.google.com/maps/vt?lyrs=y@189&x={x}&y={y}&z={z}'],\n tileSize: 256,\n maxzoom: 18,\n },\n search: {\n type: 'geojson',\n data: !!searchVal ? createFeatureCollection(searchVal) : { type: 'FeatureCollection', features: [] },\n },\n },\n layers: [\n {\n id: 'osm',\n type: 'raster',\n source: 'osm',\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n },\n {\n id: 'search-fill',\n type: 'fill',\n paint: { 'fill-opacity': 0.4, 'fill-color': 'yellow' },\n layout: { visibility: 'visible' },\n source: 'search',\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n },\n {\n id: 'search-line',\n type: 'line',\n paint: { 'line-opacity': 1, 'line-color': 'yellow', 'line-width': 2 },\n layout: { visibility: 'visible' },\n source: 'search',\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n },\n ],\n },\n center: [0, 0],\n zoom: 0.1,\n maxZoom: MAP_ZOOM,\n maxPitch: 0,\n dragRotate: false,\n });\n\n map.current.addControl(new maplibregl.NavigationControl({ showCompass: false }));\n\n const modes = MapboxDraw.modes;\n modes.draw_rectangle = DrawRectangle;\n mapboxDraw.current = new MapboxDraw({\n modes: modes,\n displayControlsDefault: false,\n controls: { line_string: false, polygon: false, point: false, trash: false },\n });\n\n map.current.addControl(mapboxDraw.current);\n\n function onCreated(e) {\n let feature = bbox(e.features[0]);\n\n handleChange(createBbox(feature));\n mapboxDraw.current.deleteAll();\n }\n\n map.current.on('draw.create', onCreated);\n }, [active, handleChange]);\n\n useEffect(() => {\n return () => {\n map?.current?.remove();\n };\n }, []);\n\n useEffect(() => {\n if (!map.current || !active) return;\n if (active) {\n mapboxDraw.current.changeMode('draw_rectangle');\n onOpenSnackbar({ content: 'Draw rectangle on the map', level: 'success' });\n } else {\n handleChange(null);\n }\n }, [active, handleChange, onOpenSnackbar]);\n\n useEffect(() => {\n if (!map.current?.getSource('search')) return;\n\n if (!!map?.current?.getSource('search') && !searchVal) {\n map.current.getSource('search').setData({ type: 'FeatureCollection', features: [] });\n } else if (!!searchVal) {\n map.current.getSource('search').setData(createFeatureCollection(searchVal));\n }\n }, [searchVal]);\n\n return ;\n};\n\nexport default MapWrapper;\n\nexport const createFeatureCollection = (coordinates) => {\n return {\n type: 'FeatureCollection',\n features: [\n coordinates ? bboxPolygon([coordinates?.xMin, coordinates?.yMin, coordinates?.xMax, coordinates?.yMax]) : [],\n ],\n };\n};\n\nexport const createBbox = (feature) => {\n const round = (coord) => Math.round(coord * 1000000) / 1000000;\n\n return {\n xMin: round(feature[0]),\n yMin: round(feature[1]),\n xMax: round(feature[2]),\n yMax: round(feature[3]),\n };\n};\n","import React from 'react';\n\nimport { Box, Checkbox, Chip, ListItemText, MenuItem, Radio, Select, Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport TypeChip from 'ReusableComponents/TypeChip/TypeChip';\nimport useChipStyles from 'ReusableComponents/TypeChip/useChipStyles';\n\nconst useStyles = makeStyles({ name: 'MultiSelectComponent' })((theme, _params, classes) => ({\n root: { height: theme.spacing(6), '& .MuiInputBase-input': { padding: theme.spacing(1) } },\n item: {\n padding: theme.spacing(0, 1.5),\n gap: theme.spacing(1),\n '&.Mui-selected': { backgroundColor: 'unset' },\n },\n text: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flexWrap: 'wrap',\n gap: theme.spacing(1),\n margin: 0,\n [`& .${classes.label}`]: { fontWeight: 600 },\n },\n chip: {\n '& .MuiChip-deleteIcon': { zIndex: 1301 },\n [theme.breakpoints.down('sm')]: { gap: theme.spacing(0.5), '& .MuiChip-label': { display: 'none' } },\n },\n renderContainer: { display: 'flex', flexWrap: 'wrap', gap: 0.5 },\n label: {},\n iconContainer: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '100%',\n padding: theme.spacing(0.5),\n boxSizing: 'border-box',\n height: 24,\n width: 24,\n '&>svg': { width: 'unset', height: 'unset', flexShrink: 1 },\n },\n}));\n\nconst MultiSelectComponent = ({\n className,\n items,\n value,\n handleChange,\n minWidth,\n chipType = 'default',\n multiple = true,\n}) => {\n const { classes: styles, cx } = useStyles();\n const { classes: chipStyles } = useChipStyles();\n\n return (\n \n \n
\n \n {selected?.length === 0\n ? 'Any'\n : selected.map((selected) => {\n const selectedItem = items.find((i) => i?.key === selected);\n const onDelete = () => handleChange({ target: { value: value.filter((x) => x !== selected) } });\n const onMouseDown = (e) => {\n e?.stopPropagation();\n e?.preventDefault();\n };\n\n const Icon = selectedItem?.icon;\n\n return chipType === 'TypeChip' ? (\n
\n )}\n >\n {items.map(({ key: itemKey, label: itemLabel, icon: Icon, color, secondary }) => (\n \n ))}\n \n );\n};\n\nexport default MultiSelectComponent;\n","import ApiManager from 'ApiManager';\nimport VersionUtility from 'VersionUtility';\n\nimport { currentName } from '../Drive';\n\nconst toggleFavorite = ({\n path,\n user,\n onOpenSnackbar,\n handleOptimisticUpdate,\n mainMode,\n breadcrumbPath,\n resetSelectedItems,\n}) => {\n const currentFavorite = path.favorite;\n\n const updateFunc =\n mainMode === '/drive/favorites' && breadcrumbPath?.length === 0\n ? (items) => items.filter((item) => item.id !== path.id)\n : (items) => items?.map((item) => (item.id === path.id ? { ...item, favorite: !currentFavorite } : item));\n const revertFunc =\n mainMode === '/drive/favorites' && breadcrumbPath?.length === 0\n ? (items) => [...items, path]\n : (items) => items?.map((item) => (item.id === path.id ? { ...item, favorite: currentFavorite } : item));\n\n const apiCall = ApiManager.put(`/v3/path/${path.id}/favorite`, { favorite: !currentFavorite }, user);\n\n const onSuccess = () => {\n if (mainMode === '/drive/favorites') {\n resetSelectedItems();\n }\n onOpenSnackbar({\n level: 'success',\n content: currentFavorite\n ? `Path \"${path.name}\" successfully removed from favorites`\n : `Path \"${path.name}\" successfully added to favorites`,\n });\n };\n const onError = (e) => {\n const message = currentFavorite\n ? `There was an error while removing ${\n path.type === 'map' ? 'raster' : path.type === 'shape' ? 'vector' : path.type\n } \"${path.name}\" from favorites`\n : `There was an error while adding ${\n path.type === 'map' ? 'raster' : path.type === 'shape' ? 'vector' : path.type\n } \"${path.name}\" to favorites`;\n onOpenSnackbar({\n level: 'error',\n content: e?.message ? message + `: ${e.message}` : message,\n });\n };\n\n let updateBody = { apiCall, onSuccess, onError };\n if (path.type === 'folder') {\n updateBody = { updateFolders: updateFunc, revertFoldersUpdate: revertFunc, ...updateBody };\n } else {\n updateBody = { updateMaps: updateFunc, revertMapsUpdate: revertFunc, ...updateBody };\n }\n\n handleOptimisticUpdate(updateBody);\n};\n\nconst downloadFile = (fileId, user) => {\n let url = `${process.env.REACT_APP_API_URL}/v3/path/${fileId}/file/data`;\n if (user) {\n url = url + '?token=' + user.token;\n }\n window.open(url);\n};\n\nconst handleRemoveAccess = ({ path, user, onOpenSnackbar, handleOptimisticUpdate }) => {\n const updateFunc = (items) => items.filter((item) => item.id !== path.id);\n const revertFunc = (items) => [...items, path];\n const apiCall = ApiManager.delete(`/v3/path/${path.id}/member/${user.id}`, null, user);\n\n const onSuccess = () => {\n onOpenSnackbar({\n level: 'success',\n content: `Access to \"${path.name}\" has successfully been removed`,\n });\n };\n\n const onError = (e) => {\n const message = `There was an error while removing access from \"${path.name}\"`;\n onOpenSnackbar({\n level: 'error',\n content: e?.message ? message + `: ${e.message}` : message,\n });\n };\n\n let updateBody = { apiCall, onSuccess, onError };\n if (path.type === 'folder') {\n updateBody = { updateFolders: updateFunc, revertFoldersUpdate: revertFunc, ...updateBody };\n } else {\n updateBody = { updateMaps: updateFunc, revertMapsUpdate: revertFunc, ...updateBody };\n }\n\n handleOptimisticUpdate(updateBody);\n};\n\nconst handleRename = ({ trimmedName, path, onOpenSnackbar, handleOptimisticUpdate, user }) => {\n const updateFunc = (maps) => maps.map((item) => (item.id === path.id ? { ...item, name: trimmedName } : item));\n const revertFunc = (maps) => maps.map((item) => (item.id === path.id ? { ...item, name: path.name } : item));\n\n const apiCall = ApiManager.put(`/v3/path/${path.id}/name`, { name: trimmedName }, user);\n const onSuccess = () => {\n onOpenSnackbar({\n level: 'success',\n content: `Path \"${path.name}\" successfully renamed to \"${trimmedName}\"`,\n });\n };\n\n const onError = () =>\n onOpenSnackbar({\n level: 'error',\n content: `There was an error while renaming path \"${path.name}\"`,\n });\n\n let updateBody = { apiCall, onSuccess, onError };\n if (path.type === 'folder') {\n updateBody = { updateFolders: updateFunc, revertFoldersUpdate: revertFunc, ...updateBody };\n } else {\n updateBody = { updateMaps: updateFunc, revertMapsUpdate: revertFunc, ...updateBody };\n }\n\n handleOptimisticUpdate(updateBody);\n};\n\nconst handleDescription = ({ description, path, onOpenSnackbar, handleOptimisticUpdate, user }) => {\n const updateFunc = (maps) => maps.map((item) => (item.id === path.id ? { ...item, description: description } : item));\n const revertFunc = (maps) => maps.map((item) => (item.id === path.id ? { ...item, name: path.description } : item));\n\n const apiCall = ApiManager.patch(`/v3/path/${path.id}/metadata`, { description: description }, user);\n const onSuccess = () => {\n onOpenSnackbar({\n level: 'success',\n content: `Description successfully updated`,\n });\n };\n\n const onError = () =>\n onOpenSnackbar({\n level: 'error',\n content: `There was an error while updating the description`,\n });\n\n let updateBody = { apiCall, onSuccess, onError };\n if (path.type === 'folder') {\n updateBody = { updateFolders: updateFunc, revertFoldersUpdate: revertFunc, ...updateBody };\n } else {\n updateBody = { updateMaps: updateFunc, revertMapsUpdate: revertFunc, ...updateBody };\n }\n\n handleOptimisticUpdate(updateBody);\n};\n\nconst handleProcessEdit = ({ process, path, onOpenSnackbar, handleOptimisticUpdate, user, onSuccessCb, onErrorCb }) => {\n const updateFunc = (maps) => maps.map((item) => (item.id === path.id ? { ...item, process } : item));\n const revertFunc = (maps) => maps.map((item) => (item.id === path.id ? { ...item, name: path.process } : item));\n\n const apiCall = ApiManager.patch(`/v3/path/${path?.id}/process`, process, user);\n const onSuccess = () => {\n typeof onSuccessCb === 'function'\n ? onSuccessCb()\n : onOpenSnackbar({\n level: 'success',\n content: `${path?.name} successfully updated`,\n });\n };\n\n const onError = (e) =>\n typeof onErrorCb === 'function'\n ? onErrorCb(e)\n : onOpenSnackbar({\n level: 'error',\n content: `There was an error while updating ${path?.name}`,\n });\n\n let updateBody = { apiCall, onSuccess, onError };\n if (path.type === 'folder') {\n updateBody = { updateFolders: updateFunc, revertFoldersUpdate: revertFunc, ...updateBody };\n } else {\n updateBody = { updateMaps: updateFunc, revertMapsUpdate: revertFunc, ...updateBody };\n }\n\n handleOptimisticUpdate(updateBody);\n};\n\n// getStorage here is used to fetch map/folder size\nconst getStorage = async (storage, path, user, isMap, setTotalStorage) => {\n if (isMap) {\n try {\n storage = VersionUtility.convertPathInfo(await ApiManager.get(`/v3/path/${path.id}`, null, user));\n storage = storage.storageSize;\n } catch {\n console.log('error occured');\n }\n } else {\n let cont;\n let pageStart;\n let allFolders = [];\n cont = true;\n while (cont) {\n let maps = [];\n try {\n maps = await ApiManager.get(\n `/v3/path/${path.id}/list`,\n {\n type:\n ApiManager?.cloud === 'esa'\n ? ['raster', 'vector', 'pointCloud', 'bookmark', 'process', 'file']\n : ['raster', 'vector', 'pointCloud', 'bookmark', 'file'],\n includeTrashed: false,\n pageStart: pageStart,\n },\n user\n );\n maps = VersionUtility.convertListRoot(maps);\n maps.result = maps.result.filter((m) => !m.deleted);\n } catch {\n console.log('error occured');\n }\n pageStart = maps.nextPageStart;\n\n for (let i = 0; i < maps.result.length; i++) {\n storage = storage + maps.result[i].storageSize;\n }\n setTotalStorage(storage);\n\n if (!pageStart) {\n cont = false;\n }\n }\n cont = true;\n while (cont) {\n let folders = [];\n try {\n folders = await ApiManager.get(\n `/v3/path/${path.id}/list`,\n { type: ['folder'], includeTrashed: false, pageStart: pageStart },\n user\n );\n folders = VersionUtility.convertListRoot(folders);\n folders.result = folders.result.filter((f) => !f.deleted);\n } catch {\n console.log('error occured');\n }\n pageStart = folders.nextPageStart;\n allFolders = allFolders.concat(folders.result);\n if (!pageStart) {\n cont = false;\n }\n }\n\n for (let i = 0; i < allFolders.length; i++) {\n storage = await getStorage(storage, allFolders[i], user, false, setTotalStorage);\n }\n }\n\n return storage;\n};\n\nconst listAll = async (folderId, user, isFolder) => {\n let folderMaps = null;\n let pageStartFolderMaps = null;\n\n while (pageStartFolderMaps !== null || folderMaps === null) {\n let res = await ApiManager.get(\n `/v3/path/${folderId}/list`,\n {\n type: isFolder\n ? ['folder']\n : ApiManager?.cloud === 'esa'\n ? ['raster', 'vector', 'pointCloud', 'bookmark', 'process', 'file']\n : ['raster', 'vector', 'pointCloud', 'bookmark', 'file'],\n includeTrashed: true,\n pageStart: pageStartFolderMaps,\n },\n user\n );\n res = VersionUtility.convertListRoot(res);\n folderMaps = folderMaps ? [...folderMaps, res.result].flat() : res.result;\n pageStartFolderMaps = res.nextPageStart;\n }\n return folderMaps;\n};\n\nconst removeFolder = async (folderId, user) => {\n await ApiManager.delete(`/v3/path/${folderId}`, null, user);\n return;\n /* let folderMaps = await listAll(folderId, user, false);\n\n // delete all maps in folder\n for (let j = 0; j < folderMaps.length; j++) {\n await ApiManager.delete(`/v3/path/${folderMaps[j].id}`, null, user);\n }\n\n let subFolders = await listAll(folderId, user, true);\n\n for (let i = 0; i < subFolders.length; i++) {\n //recurse through subfolders\n await removeFolder(subFolders[i].id, user);\n }\n\n //delete folder itself\n await ApiManager.delete(`/v3/path/${folderId}`, null, user); */\n};\n\nconst handleDeleteItems = ({\n deleteItems,\n onOpenSnackbar,\n handleOptimisticUpdate,\n user,\n resetSelectedItems,\n hard = false,\n cb,\n}) => {\n const pathIds = deleteItems.map((item) => item.id);\n const deleteMaps = deleteItems.filter((item) => item.type !== 'folder');\n const deleteFolders = deleteItems.filter((item) => item.type === 'folder');\n\n const revert = deleteItems[0].deleted && !hard;\n\n const updateMapsFunc = (maps) => {\n return maps.filter((item) => !pathIds.includes(item.id));\n };\n\n const updateFoldersFunc = (folders) => {\n return folders.filter((item) => !pathIds.includes(item.id));\n };\n\n const revertMapsFunc = (maps) => [...maps, ...deleteMaps];\n\n const revertFoldersFunc = (folders) => [...folders, ...deleteFolders];\n\n let apiCall;\n\n if (hard) {\n apiCall = Promise.all(pathIds.map((pathId) => ApiManager.delete(`/v3/path/${pathId}`, null, user)));\n } else {\n apiCall = Promise.all(\n pathIds.map((pathId) => ApiManager.put(`/v3/path/${pathId}/trashed`, { trashed: !revert }, user))\n );\n }\n\n const onSuccess = () => {\n resetSelectedItems && resetSelectedItems();\n cb && cb();\n onOpenSnackbar({\n level: 'success',\n content: revert\n ? `${pathIds.length} item${pathIds.length > 1 ? 's' : ''} successfully restored to Drive`\n : hard\n ? `${pathIds.length} item${pathIds.length > 1 ? 's' : ''} successfully permanently deleted`\n : `${pathIds.length} item${pathIds.length > 1 ? 's' : ''} successfully moved to trash`,\n });\n };\n\n const onError = (e) => {\n const message = revert\n ? `There was an error while moving ${pathIds.length} item${pathIds.length > 1 ? 's' : ''} back to Drive`\n : hard\n ? `There was an error while permanently deleting ${pathIds.length} item${pathIds.length > 1 ? 's' : ''}`\n : `There was an error while moving ${pathIds.length} item${pathIds.length > 1 ? 's' : ''} to trash`;\n onOpenSnackbar({\n level: 'error',\n content: e?.message ? message + `: ${e.message}` : message,\n });\n };\n\n let updateBody = { apiCall, onSuccess, onError };\n\n updateBody = {\n updateMaps: updateMapsFunc,\n updateFolders: updateFoldersFunc,\n revertMapsUpdate: revertMapsFunc,\n revertFoldersUpdate: revertFoldersFunc,\n ...updateBody,\n };\n\n handleOptimisticUpdate(updateBody);\n};\n\nfunction sliceIntoChunks(arr, chunkSize) {\n const res = [];\n for (let i = 0; i < arr.length; i += chunkSize) {\n const chunk = arr.slice(i, i + chunkSize);\n res.push(chunk);\n }\n return res;\n}\n\nconst handleFolderMove = ({\n movedItems,\n folder,\n user,\n resetSelectedItems,\n onOpenSnackbar,\n handleOptimisticUpdate,\n isBreadcrumb,\n cb,\n}) => {\n let toMoveFolders = movedItems.filter((i) => i.type === 'folder');\n let toMoveLayers = movedItems.filter((i) => i.type !== 'folder');\n\n const pathIds = toMoveFolders.map((item) => item.id);\n const isCurrent = folder?.type === currentName;\n const layerPathIds = toMoveLayers.map((item) => item.id);\n\n const optimisticMoveFolders = (folders) => folders?.filter((folder) => !pathIds.includes(folder?.id)) ?? [];\n const optimisticMoveLayers = (layers) => layers?.filter((layer) => !layerPathIds.includes(layer?.id)) ?? [];\n\n // if it's to the current folder there's nothing to cancel\n\n const cancelMoveFolders = (folders) => (folders?.length > 0 ? [...toMoveFolders, ...folders] : toMoveFolders);\n const cancelMoveLayers = (layers) => (layers?.length > 0 ? [...toMoveLayers, ...layers] : toMoveLayers);\n\n // we can move max 10 items per API call\n const moveLayers = async (toMove, destination) => {\n if (toMove.length === 0) {\n return;\n }\n if (toMove.length <= 10) {\n await ApiManager.put('/v3/path/parentId', { pathIds: toMove.map((x) => x.id), parentId: destination }, user);\n } else {\n const res = sliceIntoChunks(toMove, 10);\n for (let k = 0; k < res.length; k++) {\n await ApiManager.put(\n '/v3/path/parentId',\n { pathIds: res[k].map((map) => map.id), parentId: destination },\n user\n );\n }\n }\n };\n\n const moveFolder = async (movedFolder, destinationId) => {\n //create folder\n let folderId = await ApiManager.post(\n '/v3/path',\n { parentId: destinationId, name: movedFolder.name, type: 'folder' },\n user\n );\n\n folderId = folderId.id;\n\n //get all layers\n let layers = await listAll(movedFolder.id, user, false);\n //get all folders\n let subFolders = await listAll(movedFolder.id, user, true);\n //do move on all layers\n layers.length > 0 && (await moveLayers(layers, folderId));\n //do move on all folders\n for (let n = 0; n < subFolders.length; n++) {\n await moveFolder(subFolders[n], folderId);\n }\n\n //remove the folder\n await ApiManager.put(`/v3/path/${movedFolder.id}/trashed`, { trashed: true }, user);\n await ApiManager.delete(`/v3/path/${movedFolder.id}`, null, user);\n };\n\n const fullFunction = async () => {\n await moveLayers([...toMoveLayers], folder?.id);\n for (let n = 0; n < toMoveFolders.length; n++) {\n await moveFolder(toMoveFolders[n], folder?.id);\n }\n };\n\n const apiCall = fullFunction();\n\n const onSuccess = () => {\n resetSelectedItems && resetSelectedItems();\n typeof cb === 'function' && cb();\n onOpenSnackbar({\n level: 'success',\n content: `Successfully moved ${movedItems.length} item${movedItems.length > 1 ? 's' : ''} into ${\n isCurrent ? 'the current folder' : folder?.name ? `folder \"${folder.name}\"` : '\"My Drive\"'\n }.`,\n });\n };\n\n const onError = (e) => {\n typeof cb === 'function' && cb();\n\n const message = 'Name already exists in the destination folder';\n onOpenSnackbar({\n level: 'error',\n content: e?.message ? e.message : message,\n });\n };\n\n let params = {\n apiCall,\n onSuccess,\n onError,\n updateFolders: optimisticMoveFolders,\n revertFoldersUpdate: cancelMoveFolders,\n updateMaps: optimisticMoveLayers,\n revertMapsUpdate: cancelMoveLayers,\n };\n handleOptimisticUpdate(params);\n};\n\nconst handleItemMove = ({\n movedItems,\n folder,\n user,\n resetSelectedItems,\n onOpenSnackbar,\n handleOptimisticUpdate,\n isBreadcrumb,\n cb,\n}) => {\n if (movedItems.length === 0) {\n return;\n }\n\n const pathIds = movedItems.map((item) => item.id);\n const newParentId = folder?.id;\n const isCurrent = folder?.type === currentName;\n const movedMaps = movedItems.filter((item) => item.type === 'map' || item.type === 'shape');\n const movedFolders = movedItems.filter((item) => item.type === 'folder');\n\n const moveMaps = (maps) =>\n isCurrent\n ? maps?.length > 0\n ? [...maps, ...movedMaps]\n : movedMaps\n : // remove maps that are being moved\n maps?.filter((map) => !pathIds.includes(map.id)) ?? [];\n const moveFolders = (folders) =>\n isCurrent\n ? folders?.length > 0\n ? [...folders, ...movedFolders]\n : movedFolders\n : // remove folders that are being moved\n folders?.filter((folder) => !pathIds.includes(folder?.id)) ?? [];\n\n // if it's to the current folder there's nothing to cancel\n const cancelMoveMaps = (maps) =>\n !isCurrent\n ? maps?.length > 0\n ? [...movedMaps, ...maps]\n : movedMaps\n : // remove maps that are being moved\n maps?.filter((map) => !pathIds.includes(map.id)) ?? [];\n const cancelMoveFolders = (folders) =>\n !isCurrent\n ? folders?.length > 0\n ? [...movedFolders, ...folders]\n : movedFolders\n : // remove folders that are being moved\n folders?.filter((folder) => !pathIds.includes(folder?.id)) ?? [];\n\n let apiCall;\n // we can move max 10 items per API call\n if (movedItems.length <= 10) {\n apiCall = ApiManager.put('/v3/path/parentId', { pathIds, parentId: newParentId }, user);\n } else {\n apiCall = Promise.all(\n sliceIntoChunks(movedItems, 10).map((chunk) =>\n ApiManager.put('/v3/path/parentId', { pathIds: chunk.map((map) => map.id), parentId: newParentId }, user)\n )\n );\n }\n const onSuccess = () => {\n resetSelectedItems && resetSelectedItems();\n typeof cb === 'function' && cb();\n onOpenSnackbar({\n level: 'success',\n content: `Successfully moved ${movedItems.length} item${movedItems.length > 1 ? 's' : ''} into ${\n isCurrent ? 'the current folder' : folder?.name ? `folder \"${folder.name}\"` : '\"My Drive\"'\n }.`,\n });\n };\n\n const onError = (e) => {\n onOpenSnackbar({\n level: 'error',\n content: e?.message,\n });\n };\n\n let params = {\n type: 'map',\n apiCall,\n onSuccess,\n onError,\n updateMaps: moveMaps,\n updateFolders: moveFolders,\n revertMapsUpdate: cancelMoveMaps,\n revertFoldersUpdate: cancelMoveFolders,\n };\n\n handleOptimisticUpdate(params);\n};\n\nconst getErrorComp = (error, map, user) => {\n let errorComp = { case: error };\n\n switch (error) {\n case 'init':\n errorComp.disabled = true;\n errorComp.loading = true;\n break;\n case 'Layer trashed':\n errorComp.disabled = true;\n errorComp.title = 'Trashed';\n break;\n case 'Relocating layer':\n errorComp.title = 'Relocating Data Host';\n errorComp.disabled = true;\n errorComp.loading = true;\n break;\n case 'Reindexing layer':\n errorComp.title = 'Reindexing layer';\n errorComp.disabled = true;\n errorComp.loading = true;\n break;\n case 'Activating files':\n errorComp.title = 'Activating files';\n errorComp.disabled = true;\n errorComp.loading = true;\n break;\n case 'Pausing files':\n errorComp.title = 'Pausing files';\n errorComp.disabled = true;\n errorComp.loading = true;\n break;\n\n case 'Layer disabled':\n errorComp.title = map?.user?.id === user?.id ? 'Disabled because negative balance' : 'Disabled';\n errorComp.url = map?.user?.id === user?.id ? '/storage' : undefined;\n errorComp.actionText = map?.user?.id === user?.id ? 'Change Balance' : 'Contact owner';\n errorComp.disabled = true;\n errorComp.contact = map?.user?.id !== user?.id;\n break;\n\n case 'No uploads':\n errorComp.title = 'No uploads';\n errorComp.actionText =\n map?.yourAccess.accessLevel >= ApiManager.newAccessLevel['edit+'] ? 'Upload files' : 'Contact owner';\n errorComp.contact = map?.yourAccess.accessLevel < ApiManager.newAccessLevel['edit+'];\n errorComp.disabled = true;\n break;\n\n case 'No access':\n errorComp.title = 'No Access';\n errorComp.actionText = 'Contact owner';\n errorComp.contact = true;\n errorComp.disabled = true;\n break;\n case 'No active timestamps':\n errorComp.title = 'No Active timestamp';\n errorComp.actionText =\n map?.yourAccess.accessLevel >= ApiManager.newAccessLevel['edit+'] ? 'Activate' : 'Contact owner';\n errorComp.contact = map?.yourAccess.accessLevel < ApiManager.newAccessLevel['edit+'];\n errorComp.disabled = true;\n break;\n case 'No timestamps':\n errorComp.title = 'No Timestamps';\n errorComp.actionText =\n map?.yourAccess.accessLevel >= ApiManager.newAccessLevel['edit+'] ? 'Add timestamp' : 'Contact owner';\n errorComp.contact = map?.yourAccess.accessLevel < ApiManager.newAccessLevel['edit+'];\n errorComp.disabled = true;\n break;\n case 'No features':\n errorComp.title = 'No features';\n break;\n case 'No styles':\n errorComp.title = 'No styles';\n errorComp.url = '/settings/styles?pathId=' + map?.id;\n errorComp.actionText = 'Add style';\n errorComp.disabled = true;\n break;\n case 'Too large to Thumbnail':\n errorComp.title = 'Too large to Thumbnail';\n errorComp.disabled = false;\n break;\n default:\n errorComp = null;\n }\n\n return errorComp;\n};\n\nconst rootNameMapping = {\n myMaps: 'My Drive',\n shared: 'Shared with me',\n favorites: 'Favorites',\n external: 'External',\n};\n\nconst ICON_HEIGHT = 40;\n\nexport {\n downloadFile,\n getErrorComp,\n getStorage,\n handleDeleteItems,\n handleDescription,\n handleProcessEdit,\n handleFolderMove,\n handleItemMove,\n handleRemoveAccess,\n handleRename,\n removeFolder,\n rootNameMapping,\n toggleFavorite,\n ICON_HEIGHT,\n};\n","import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';\n\nconst SelectedItemContext = createContext();\n\nconst SelectedItemProvider = ({ root, pathId, children }) => {\n const [selectedItems, setSelectedItems] = useState([]);\n const [lastSelectedIndex, setLastSelectedIndex] = useState(-1);\n const addSelectedItems = useCallback((newItems) => {\n setSelectedItems((items) => [...items, ...newItems]);\n }, []);\n\n const removeSelectedItems = useCallback((removeItems) => {\n setSelectedItems((items) => items.filter((item) => !removeItems.includes(item)));\n }, []);\n\n const resetSelectedItems = useCallback(() => setSelectedItems([]), []);\n\n // reset selection when root or pathId changes\n useEffect(() => {\n resetSelectedItems();\n }, [root, pathId, resetSelectedItems]);\n\n return (\n \n removeFile(file.name)}\n lastChild={index === files.length - 1}\n uploadFormats={uploadFormats}\n />\n
\n );\n };\n\n return (\n \n \n {({ height, width }) => (\n \n
\n );\n};\n\nconst useFileCardStyles = makeStyles()((theme, { lastChild }) => ({\n container: {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto 53px',\n alignItems: 'center',\n padding: '5px 12px',\n width: '100%',\n gridGap: '14px',\n height: '80px',\n boxSizing: 'border-box',\n borderBottom: lastChild ? '' : `1px solid ${theme.palette.divider}`,\n },\n fileName: {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n '&:hover': {\n overflow: 'visible',\n backgroundColor: 'white',\n boxShadow: theme.shadows[1],\n borderRadius: '1px',\n whiteSpace: 'normal',\n wordBreak: 'break-all',\n },\n },\n indexText: {\n minWidth: '25px',\n },\n fileNameContainer: {\n display: 'flex',\n flexDirection: 'column',\n },\n errorText: {\n fontSize: '0.9rem',\n color: theme.palette.error.main,\n },\n}));\n\nconst FileCard = ({ fileName, fileSize, index, onClick, lastChild, uploadFormats }) => {\n const { classes } = useFileCardStyles({ lastChild });\n\n const { error } = validateFileFormat(fileName.split('.').at(-1), uploadFormats);\n\n return (\n \n {index} \n {fileSize} \n \n \n
\n );\n};\n\nFileCard.propTypes = {\n fileName: PropTypes.string.isRequired,\n fileSize: PropTypes.node.isRequired,\n index: PropTypes.number.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nexport default UploadPreview;\n","import React from 'react';\nimport { Typography, Radio, TextField } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport PropTypes from 'prop-types';\n\nimport { InfoTooltip } from '../../core';\n\nconst useStyles = makeStyles()((theme, _params, classes) => ({\n formControl: {\n width: '330px',\n },\n section: { marginTop: theme.spacing(3) },\n sectionTitle: {\n display: 'flex',\n alignItems: 'center',\n },\n infoTooltip: {\n marginLeft: '6px',\n },\n link: {\n textDecoration: 'none',\n color: theme.palette.primary.light,\n cursor: 'pointer',\n '&:hover': {\n textDecoration: 'underline',\n },\n },\n radioGroup: {\n display: 'flex',\n flexWrap: 'wrap',\n flexDirection: 'column',\n },\n radioContainer: {\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n [`&.${classes.disabled}`]: {\n cursor: 'auto',\n },\n },\n disabled: {\n color: theme.palette.text.disabled,\n },\n}));\n\nconst MainSettings = ({\n uploadedFileFormats,\n formatsForceEspg,\n autoDetectEspg,\n handleAutoDetectEspgChange,\n noDataValue,\n handleNoDataValue,\n type,\n}) => {\n const { classes } = useStyles();\n\n return (\n <>\n \n {fileName} \n {error ? {error} : null}\n
\n \n Get EPSG from: {' '}\n \n \n The EPSG code tells us what coordinate system your file is using. See{' '}\n \n https://epsg.io/\n \n , for more information.\n \n \n }\n />\n
\n\n \n formatsForceEspg.includes(format)) ? classes.disabled : ''\n }`}\n onClick={() => {\n if (uploadedFileFormats.find((format) => formatsForceEspg.includes(format))) {\n return;\n }\n handleAutoDetectEspgChange({ active: false, epsg: null });\n }}\n >\n formatsForceEspg.includes(format))}\n />\n formatsForceEspg.includes(format)) ? classes.disabled : ''\n }`}\n >\n Auto detect from file\n \n
\n \n Set no data value: {' '}\n \n \n Raster pixels with the no data value will be interpreted as transparent.\n \n \n }\n />\n
\n\n \n formatsForceEspg.includes(format)) ? classes.disabled : ''\n }`}\n onClick={() => {\n handleNoDataValue(null);\n }}\n >\n formatsForceEspg.includes(format))}\n />\n formatsForceEspg.includes(format)) ? classes.disabled : ''\n }`}\n >\n Detect from file\n \n
\n !noDataValue && handleNoDataValue(0)}>\n Specify: \n handleNoDataValue(e.target.value)}\n type=\"number\"\n />\n
\n \n \n
\n - \n
\n {[...datePattern].map((element, index) =>\n element === '%' ? null : Object.keys(possibleDates).includes(element) ? (\n \n \n {Object.keys(possibleDates).map((date, idx) => (\n \n ))}\n \n ) : (\n \n {possibleSeparators.map((separator) => (\n \n ))}\n \n )\n )}\n {(datePattern === null || datePattern === '' || datePattern?.match(/.{1,3}/g)?.length < 7) &&\n (!Object.keys(possibleDates).includes(datePattern[datePattern.length - 1]) ? (\n \n {Object.keys(possibleDates).map((date, idx) => (\n \n ))}\n \n ) : (\n \n {possibleSeparators.map((separator) => (\n \n ))}\n \n ))}\n
\n {!!datePattern && (\n \n
\n \n \n Date column name:{' '}\n \n
\n );\n};\n\nDateColumn.propTypes = {\n dateColumn: PropTypes.string,\n handleDateColumnChange: PropTypes.func.isRequired,\n datePattern: PropTypes.string,\n handleDatePatternChange: PropTypes.func.isRequired,\n handleDelete: PropTypes.func.isRequired,\n disableDelete: PropTypes.bool.isRequired,\n};\n\nexport default DateColumnSettings;\n","/* import React from 'react';\nimport { Typography, Paper } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nconst useStyles = makeStyles()((theme, _params, classes) => ({\n section: {\n marginTop: '0.5rem',\n marginBottom: '1rem',\n },\n interpText: {\n color: theme.palette.text.secondary,\n fontSize: '1.1rem',\n marginBottom: '10px',\n },\n cardContainer: {\n display: 'flex',\n alignItems: 'stretch',\n justifyContent: 'start',\n flexWrap: 'wrap',\n gap: '20px',\n },\n card: {\n width: '300px',\n cursor: 'pointer',\n padding: '16px',\n boxSizing: 'border-box',\n borderWidth: '1px',\n [`&.${classes.selected}`]: {\n borderColor: theme.palette.primary.main,\n backgroundColor: `${theme.palette.primary.main}09`,\n },\n '&:hover': {\n backgroundColor: `${theme.palette.primary.main}04`,\n },\n },\n cardTitle: {\n fontSize: '1.3rem',\n lineHeight: '1.334',\n },\n cardSubtitle: {\n textAlign: 'left',\n },\n\n selected: {},\n})); */\n\nconst FastUpload = ({ fastUpload, setFastUpload }) => {\n // const { classes, cx } = useStyles();\n return null;\n /* return (\n \n setFastUpload(true)}\n >\n Fast upload \n \n Recommended for files containing over 100.000 features. While data is being added layer will be temporarily\n disabled.\n \n \n setFastUpload(false)}\n >\n Streaming upload \n \n Recommended for files containing under 100.000 features. Layer will remain fully operational.\n \n \n
\n \n setDownsample(true)}\n >\n Simplify \n \n Recommended if you need your vectors at different levels of detail.\n \n \n setDownsample(false)}\n >\n full \n \n Recommended if you do not need your vectors at different levels of detail.\n \n \n
\n \n
\n );\n};\n\nUploadSettings.propTypes = {\n formatsForceEspg: PropTypes.arrayOf(PropTypes.string).isRequired,\n autoDetectEspg: PropTypes.object,\n handleAutoDetectEspgChange: PropTypes.func.isRequired,\n type: PropTypes.string.isRequired,\n dateColumns: PropTypes.arrayOf(PropTypes.string),\n setDateColumns: PropTypes.func.isRequired,\n datePatterns: PropTypes.arrayOf(PropTypes.string),\n setDatePatterns: PropTypes.func.isRequired,\n};\n\nexport default UploadSettings;\n","import React, { useContext, useCallback } from 'react';\n\nimport { Button, Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport PropTypes from 'prop-types';\n\nimport MapManagementContext from '../../FilesManagementContext';\nimport DropZoneArea from '../../../ReusableComponents/DropZoneArea';\nimport UploadPreview from './UploadPreview';\nimport { validateFileFormat } from '../UploadPage';\nimport { useAuthFuncs } from 'Account/AuthContext';\nimport { UseUploadingTimestamps, useUploadLogic } from 'UploadDialog';\nimport { useCurrentFolder } from 'Drive/CurrentFolderContext';\n\nconst useDropZoneStyles = makeStyles({ name: 'UploadDropZone' })((theme) => ({\n dropZone: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n marginTop: theme.spacing(3),\n },\n text: {},\n uploadButton: {\n width: '180px',\n alignSelf: 'center',\n },\n titleContainer: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: '100%',\n marginTop: '1.5rem',\n gap: theme.spacing(1),\n },\n fileNumberContainer: {\n display: 'flex',\n gap: theme.spacing(1),\n alignItems: 'center',\n flexGrow: 1,\n },\n deleteAllButton: {},\n}));\n\nconst UploadDropZone = ({\n autoDetectEspg,\n noDataValue,\n setUploadOpen,\n setAutoProcessOpen,\n type,\n uploads,\n captureId,\n files,\n setFiles,\n fastUpload,\n downsample,\n dateColumns,\n datePatterns,\n uploadFormats,\n}) => {\n const { classes } = useDropZoneStyles();\n\n const { map, user, openNotification } = useContext(MapManagementContext);\n const { handleStartUpload } = useUploadLogic();\n const { addUploading, setUploadCounter } = UseUploadingTimestamps();\n const { fetchUserInfo } = useAuthFuncs();\n const { poll } = useCurrentFolder();\n const handleFilesUpload = () => {\n setUploadOpen(false);\n setAutoProcessOpen(captureId);\n\n let skippedFiles = [];\n // let count = 0;\n files.forEach((file, index) => {\n const { error, uploadAs } = validateFileFormat(file.name.split('.').at(-1), uploadFormats);\n if (!error) {\n const body = {\n mapId: map.id,\n name: file.name,\n format: uploadAs,\n };\n if (autoDetectEspg.active) {\n body['epsg'] = Number(autoDetectEspg.epsg);\n }\n if (!!noDataValue || noDataValue === 0) {\n body['noDataValue'] = Number(noDataValue);\n }\n\n if (type === 'geometry') {\n body['fastUpload'] = fastUpload;\n body['method'] = downsample || fastUpload ? 'simplify' : 'full';\n\n body['datePatterns'] = JSON.stringify(\n // replace dummy $ that corresponds to empty string\n datePatterns.map((pattern) => pattern.replace(/\\$/g, ''))\n );\n body['dateColumns'] = JSON.stringify(dateColumns);\n }\n\n body['timestampId'] = captureId;\n\n const onUploadSuccess = () => {\n setUploadCounter();\n poll();\n fetchUserInfo();\n };\n\n const onUploadError = () => {\n setUploadCounter();\n };\n\n let shouldSkip =\n (uploads &&\n uploads.reduce(\n (acc, curr) => (curr.status === 'completed' && curr.name === file.name && !curr.trashed ? true : acc),\n false\n )) ||\n files.findIndex((f) => f.name === file.name) !== index;\n if (shouldSkip) {\n skippedFiles.push(file.name);\n }\n addUploading(captureId);\n\n handleStartUpload(file, body, user, type, captureId, onUploadSuccess, onUploadError, shouldSkip, map);\n\n let cb = async () => {\n await new Promise((r) => setTimeout(r, 1000));\n };\n cb();\n }\n });\n\n if (skippedFiles.length > 0) {\n openNotification({\n type: 'info',\n text: `The following file${skippedFiles > 1 ? 's' : ''} seem${\n skippedFiles > 1 ? '' : 's'\n } to be already present in the server (same filename) so ${skippedFiles > 1 ? 'their' : 'its'} upload${\n skippedFiles > 1 ? 's' : ''\n } ${skippedFiles > 1 ? 'were' : 'was'} skipped: ${skippedFiles.slice(0, 15).join(', ')}.`,\n duration: 0,\n });\n }\n\n setFiles([]);\n };\n\n const removeFile = (fileName) => setFiles((files) => files.filter((file) => file.name !== fileName));\n\n const handleFileChange = useCallback((files) => setFiles((prevFiles) => [...prevFiles, ...files]), [setFiles]);\n\n return (\n \n
\n );\n};\n\nUploadDropZone.propTypes = {\n handleStartUpload: PropTypes.func,\n type: PropTypes.string.isRequired,\n uploads: PropTypes.arrayOf(\n PropTypes.shape({\n fileName: PropTypes.string.isRequired,\n })\n ),\n files: PropTypes.array.isRequired,\n setFiles: PropTypes.func.isRequired,\n setCurrentTab: PropTypes.func,\n};\n\nexport default UploadDropZone;\n","import React, { useState, useEffect, useContext, useMemo, useCallback } from 'react';\nimport { Container /* , Typography */ } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport PropTypes from 'prop-types';\n\nimport UploadSettings from './UploadSettings/UploadSettings';\nimport UploadDropZone from './UploadDropzone';\nimport FilesManagementContext from '../FilesManagementContext';\nimport ApiManager from 'ApiManager';\n\nconst useUploadStyles = makeStyles({ name: 'UploadPage' })((theme) => ({\n uploadPageContainer: {},\n link: {\n textDecoration: 'none',\n color: theme.palette.primary.main,\n '&:hover': {\n textDecoration: 'underline',\n },\n },\n /*notificationContent: {\n textAlign: 'center',\n },\n notificationLink: {\n textDecoration: 'underline',\n color: 'inherit',\n }, */\n}));\n\nconst formatsForceEspg = ['csv', 'las', 'mesh', 'obj', 'laz', 'xyz', 'mesh', 'connection', 'jpg', 'jgw'];\n\n// validate that the format is allowed and if so what it should be uploaded as\nexport const validateFileFormat = (format, fileFormats) => {\n let error = null;\n let uploadAs = null;\n\n // file out error or uploadAs according to `fileFormats`\n fileFormats.forEach((category) => {\n if (category.formats.includes(format)) {\n if (category.type === 'error') {\n error = category.errorMessage;\n return;\n }\n\n uploadAs = !!category.uploadAs ? category.uploadAs : format;\n return;\n }\n });\n\n // if both are still `null`, it means the format wasn't recognized\n if (error === null && uploadAs === null) {\n const possibleFormats = fileFormats\n .flatMap((category) => (category.type === 'success' ? category.formats : []))\n .map((format) => `.${format}`);\n\n error = `Extension .${format} not supported, allowed formats are: ${possibleFormats\n .slice(0, -1)\n .join(', ')} and ${possibleFormats.at(-1)}`;\n }\n\n return { error, uploadAs };\n};\n\nconst UploadPage = ({ type, uploadFormats, captureId, setUploadOpen, setAutoProcessOpen }) => {\n const { classes } = useUploadStyles();\n\n const { map, user } = useContext(FilesManagementContext);\n // const mapId = map.id;\n const [uploads, setUploads] = useState(null);\n const [files, setFiles] = useState([]);\n\n const getAllUploads = useMemo(\n () => async () => {\n let nextPage = null;\n let first = true;\n let newFiles = [];\n if (!captureId) {\n return;\n }\n while (first || !!nextPage) {\n first = false;\n let res;\n try {\n res = await ApiManager.get(\n `/v3/path/${map.id}/${\n map.type === 'map' ? 'raster' : map.type === 'pointCloud' ? 'pointCloud' : 'vector'\n }/timestamp/${captureId}/file`,\n { pageStart: nextPage },\n user\n );\n } catch {\n res = { result: [] };\n }\n\n newFiles = [...newFiles, ...res.result];\n setUploads(newFiles);\n nextPage = res.nextPageStart;\n }\n },\n [map.id, user, map.type, captureId]\n );\n\n useEffect(() => {\n getAllUploads();\n }, [getAllUploads]);\n\n // ok so 2 issues with this:\n // 1. it's epsg, not espg\n // 2. this varialbe is doing the opposite of what the name would suggest it does\n const [autoDetectEspg, setAutoDetectEspg] = useState({ active: false, epsg: null });\n const [noDataValue, handleNoDataValue] = useState(null);\n\n const [fastUpload, setFastUpload] = useState(true);\n const [downsample, setDownsample] = useState(true);\n const [dateColumns, setDateColumns] = useState(['']);\n const [datePatterns, setDatePatterns] = useState(['']);\n\n const uploadedFileFormats = useMemo(() => files.map((file) => file.name.split('.').at(-1)), [files]);\n\n const handleAutoDetectEspgChange = useCallback(\n (value) => {\n if (uploadedFileFormats.find((format) => formatsForceEspg.includes(format)) && value === null) return;\n setAutoDetectEspg({ ...autoDetectEspg, ...value });\n },\n [uploadedFileFormats, autoDetectEspg]\n );\n\n //TODO prevent racing and set upload to null when refreshing to prevent needing to wait a long time to see an effect when for example deleting everything\n //danielvandermaas committed on Jul 12\n\n useEffect(() => {\n if (uploadedFileFormats.find((format) => format === 'csv') && !autoDetectEspg.epsg && !autoDetectEspg.csvForce) {\n console.log('THE ERROR IS HERE');\n console.log('x');\n handleAutoDetectEspgChange({ active: true, epsg: 4326, csvForce: true });\n } else {\n if (uploadedFileFormats.find((format) => formatsForceEspg.includes(format)) && !autoDetectEspg.active) {\n handleAutoDetectEspgChange({ active: true, csvForce: false });\n }\n }\n }, [handleAutoDetectEspgChange, uploadedFileFormats, autoDetectEspg]);\n\n /* const EPSGNotification = useMemo(\n () => (\n \n !validateFileFormat(f.name.split('.').at(-1), uploadFormats).error).length === 0\n }\n onClick={handleFilesUpload}\n >\n Upload\n \n
\n \n {files?.length > 0 ? `${files.length} file${files.length === 1 ? '' : 's'}` : ''} \n
\n {files.length > 0 ? (\n \n ) : null}\n \n
\n \n \n \n {titleText}\n \n \n {legendText}\n \n
\n \n \n {menuItems.map((item) => (\n {\n handleMenuItemClick(item);\n handleClose();\n }}\n selected={item === currentValue}\n >\n {item}\n \n ))}\n \n
\n );\n};\n\nexport default MenuButton;\n","import React from 'react';\n\nimport { Box } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport PropTypes from 'prop-types';\n\nimport moment from 'moment';\nimport { MobileDatePicker } from '@mui/x-date-pickers';\n\nconst useStyles = makeStyles({ name: 'DateRangePicker' })((theme) => ({\n datePickerContainer: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n },\n datePickerInput: {\n textAlign: 'center',\n cursor: 'pointer',\n '&.Mui-disabled': { padding: 0 },\n },\n divider: { height: '1px' },\n datePickerInputRoot: {\n '&:before': {\n opacity: '0',\n },\n '&:after': {\n opacity: '0',\n },\n },\n}));\n\nconst DateRangePicker = ({\n startDate,\n handleStartDateChange,\n endDate,\n handleEndDateChange,\n disabled = false,\n disableFuture = true,\n className = '',\n editMode,\n}) => {\n const { classes, cx } = useStyles({ disabled });\n\n return (\n \n \n \n \n \n
\n );\n};\n\nDateRangePicker.propTypes = {\n startDate: PropTypes.string.isRequired,\n handleStartDateChange: PropTypes.func,\n endDate: PropTypes.string.isRequired,\n handleEndDateChange: PropTypes.func,\n disabled: PropTypes.bool,\n disableFuture: PropTypes.bool,\n className: PropTypes.string,\n};\n\nexport default DateRangePicker;\n","import React from 'react';\n\nimport { Tooltip, Zoom } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport { Info } from '@mui/icons-material';\n\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles()((theme) => ({\n infoButton: {},\n tooltip: {\n maxWidth: '500px',\n },\n}));\n\nconst InfoTooltip = ({ title, placement = 'left', interactive = false, className = '', style = {} }) => {\n const { classes, cx } = useStyles();\n return (\n \n
\n );\n};\n\nCustomLinearProgress.propTypes = {\n showLabel: PropTypes.bool,\n variant: PropTypes.oneOf(['determinate', 'indeterminate']),\n value: PropTypes.number,\n className: PropTypes.string,\n style: PropTypes.object,\n};\n\nexport default CustomLinearProgress;\n","import React, { useEffect } from 'react';\n\nimport { Collapse, Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { Close } from '@mui/icons-material';\nimport PropTypes from 'prop-types';\n\nimport LoadingIconButtonWithTooltip from 'ReusableComponents/LoadingIconButtonWithTooltip/LoadingIconButtonWithTooltip';\n\nconst useStyles = makeStyles()((theme) => ({\n container: {\n width: '100%',\n maxWidth: '660px',\n [theme.breakpoints.down('sm')]: {\n maxWidth: '100%',\n },\n borderRadius: '4px',\n marginBottom: '12px',\n display: 'grid',\n gridTemplateColumns: '1fr 40px',\n alignItems: 'center',\n justifyContent: 'center',\n padding: '4px 10px',\n boxSizing: 'border-box',\n },\n content: {\n textAlign: 'center',\n },\n closeButton: {\n padding: '5px',\n marginLeft: 'auto',\n },\n}));\n\nconst colorFromType = (type, theme) => {\n if (type === 'info') return theme.palette.info.dark;\n if (type === 'success') return theme.palette.success.dark;\n if (type === 'warning') return 'hsl(30, 100%, 40%)';\n if (type === 'error') return theme.palette.error.dark;\n return theme.palette.common.white;\n};\n\nconst NotificationBar = ({ show, closeNotification, type, text, duration = 5000 }) => {\n const { classes, theme } = useStyles();\n\n useEffect(() => {\n let timeout = null;\n if (duration && show) {\n timeout = setTimeout(() => {\n closeNotification();\n }, duration);\n }\n return () => {\n clearTimeout(timeout);\n };\n }, [duration, closeNotification, show]);\n\n return (\n \n
\n \n
\n {!!showLabel && (\n \n {`${Math.round(props.value)}%`} \n
\n )}\n \n \n \n setDangerDialogOpen({\n open: true,\n type: 'findMember',\n title: 'Transfer ownership of the layer',\n legend: `Enter the name of the user you want to transfer this layer to. Once that user has accepted the transfer, you can't go back. Please be certain.`,\n agreeText: 'Transfer',\n })\n }\n >\n Transfer ownership\n \n \n \n \n setDangerDialogOpen({\n open: true,\n type: 'delete',\n title: 'Delete layer',\n legend: `Are you sure you want to delete this layer?`,\n agreeText: 'Delete',\n })\n }\n >\n Delete layer\n \n \n
\n \n \n Transfer ownership\n \n \n Once you transfer the ownership of a layer, there is no going back. Please be certain.\n \n
\n \n \n Trash layer\n \n \n A trashed layer can be recovered later on. Only once the layer has been permanently deleted it can no\n longer be restored and will no longer take up any space.\n \n
\n \n {link} \n
\n \n Embed the viewer on your website \n
\n \n Create an access token to this content \n setCreateToken(true)}\n className={classes.copyButton}\n startIcon={
\n \n {res?.text} \n
\n \n {disableTypography ? (\n children\n ) : (\n \n {children}\n \n )}\n {secondaryButton && secondaryButton}\n
\n );\n};\n\nSectionTitleText.propTypes = {\n style: PropTypes.object,\n className: PropTypes.string,\n secondaryButton: PropTypes.node,\n children: PropTypes.node,\n};\n\nconst useSectionTitleActionStyles = makeStyles({\n name: 'SectionTitleAction',\n})((theme) => ({\n button: {\n height: '34px',\n minWidth: '100px',\n textTransform: 'none',\n maxWidth: 'fit-content',\n },\n}));\n\nconst SectionTitleAction = ({ className, children, ...otherProps }) => {\n const { classes, cx } = useSectionTitleActionStyles();\n\n return (\n \n {legend} \n {!isEmpty(infoTooltipProps) &&
\n {!!value ? \n \n \n \n \n
\n );\n};\n\nDateRangePicker.propTypes = {\n startDate: PropTypes.string.isRequired,\n handleStartDateChange: PropTypes.func,\n endDate: PropTypes.string.isRequired,\n handleEndDateChange: PropTypes.func,\n disabled: PropTypes.bool,\n disableFuture: PropTypes.bool,\n className: PropTypes.string,\n};\n\nexport default DateRangePicker;\n","import React from 'react';\n\nimport { Menu, MenuItem, Button } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport { ExpandMore } from '@mui/icons-material';\n\nconst useMenuButtonStyles = makeStyles({ name: 'MenuButton' })((theme, { disabled, width }) => ({\n propertyButton: {\n width,\n flexShrink: 0,\n flexGrow: 1,\n padding: '8px 12px',\n paddingRight: '26px',\n borderRadius: '4px',\n backgroundColor: 'rgba(0,0,0,0.05)',\n cursor: disabled ? 'default' : 'pointer',\n },\n buttonLabel: {\n display: 'flex',\n justifyContent: 'space-between',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n}));\n\nconst MenuButton = ({ currentValue, menuItems, disabled = false, width, menuWidth, handleMenuItemClick }) => {\n const { classes } = useMenuButtonStyles({ width, disabled });\n\n const [anchorEl, setAnchorEl] = React.useState(null);\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n return (\n <>\n \n
\n \n \n \n {titleText}\n \n \n {legendText}\n \n
\n - \n {obj?.map((p, i) => {\n const isHeading = ['optionHeading', 'heading'].includes(p?.type);\n const isOption = ['optionHeading', 'option'].includes(p?.type);\n const checked = !!search?.has(p?.parameter);\n\n return p?.type === 'heading' ? (\n
{recursiveRender(PARAMETERS)}
;\n};\n\nexport default CustomBookmarkConfiguration;\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport {\n Badge,\n Box,\n Button,\n Dialog,\n DialogActions,\n DialogContent,\n List,\n ListItem,\n ListItemButton,\n ListItemIcon,\n ListItemText,\n Step,\n StepContent,\n StepLabel,\n Stepper,\n TextField,\n Typography,\n useMediaQuery,\n} from '@mui/material';\nimport DialogTitle from 'ReusableComponents/DialogTitle/DialogTitle';\nimport { Bookmark, DashboardCustomize, Preview } from '@mui/icons-material';\nimport CustomBookmarkConfiguration from '../CustomBookmarkConfiguration';\nimport { MarkdownEditor } from 'ReusableComponents/MarkdownEditor';\nimport MoveToAction from 'ReusableComponents/MoveTo/MoveTo';\n\nconst TYPE_KEYS = { default: 'default', presentationMode: 'presentationMode', advanced: 'advanced' };\nconst TYPES = [\n {\n key: TYPE_KEYS['default'],\n icon: Bookmark,\n label: 'Default Bookmark',\n description: 'Save current view for later use in the viewer.',\n },\n {\n key: TYPE_KEYS['presentationMode'],\n icon: Preview,\n label: 'Presentation Mode',\n description: 'Create a bookmark of the current view optimised for data delivery and presentation.',\n shortDescription: 'Optimised for data delivery and presentation.',\n },\n {\n key: TYPE_KEYS['advanced'],\n icon: DashboardCustomize,\n label: 'Custom Configuration',\n description: 'Have full control over which elements are present in the viewer.',\n shortDescription: 'Full control over viewer elements.',\n },\n];\n\nconst DEFAULT_STATE = { type: TYPE_KEYS['default'], name: '', configuration: {}, description: '' };\n\nexport const getTypeFromViewerConfig = (viewerConfig) => {\n const key = !!viewerConfig?.presentationMode\n ? TYPE_KEYS['presentationMode']\n : Object.keys(viewerConfig)?.length > 0\n ? TYPE_KEYS['advanced']\n : TYPE_KEYS['default'];\n\n return TYPES.find((T) => T.key === key);\n};\n\nconst SaveDialog = ({ open, handleCreateShareLink, handleClose, viewerConfig, selectedMap, isUpdate }) => {\n const [activeStep, setActiveStep] = useState(0);\n const [bookmarkData, setBookmarkData] = useState(DEFAULT_STATE);\n const [parentId, setParentId] = useState(null);\n const [disabled, setDisabled] = useState(false);\n const type = useMemo(() => bookmarkData?.['type'] ?? 'default', [bookmarkData]);\n\n const setType = useCallback(\n (type) =>\n setBookmarkData((current) => {\n if (type === TYPE_KEYS['default'] || type === TYPE_KEYS['advanced']) {\n return { ...current, type, configuration: {} };\n } else {\n return { ...current, type, configuration: { hideNavbar: true } };\n }\n }),\n []\n );\n\n const name = useMemo(() => bookmarkData?.['name'] ?? '', [bookmarkData]);\n const setName = useCallback((name) => setBookmarkData((old) => ({ ...old, name })), []);\n\n const configuration = useMemo(() => bookmarkData?.['configuration'], [bookmarkData]);\n\n const description = useMemo(() => bookmarkData?.['description'] ?? '', [bookmarkData]);\n const setDescription = useCallback((description) => setBookmarkData((old) => ({ ...old, description })), []);\n\n const setConfiguration = useCallback((parameter) => {\n setBookmarkData((old) => {\n const oldConf = { ...old.configuration };\n if (oldConf[parameter]) {\n delete oldConf[parameter];\n } else {\n oldConf[parameter] = true;\n }\n return { ...old, configuration: oldConf };\n });\n }, []);\n\n const steps = useMemo(\n () => [\n {\n label: 'Select Bookmark Type',\n description: `Below you can select the type of bookmark that fits your situation best.`,\n component: TypeComponent,\n value: TYPES.find((x) => x.key === type)?.label,\n },\n {\n label: 'Customise viewer Elements',\n secondary: 'only for custom configuration',\n disabled: type !== TYPE_KEYS['advanced'],\n description: 'Check boxes below to hide elements from the viewer and save it to a bookmark.',\n component: CustomBookmarkConfiguration,\n hasBadge: true,\n },\n {\n label: 'Give your bookmark a name.',\n component: NameComponent,\n nextDisabled: name?.trim()?.length === 0,\n value: name,\n },\n {\n label: 'Add a description.',\n secondary: 'Optional',\n component: DescriptionComponent,\n },\n ...(isUpdate\n ? []\n : [\n {\n label: 'Pick a folder.',\n secondary: 'Optional',\n component: MoveComponent,\n },\n ]),\n ],\n [name, type, isUpdate]\n );\n\n const handleNext = useCallback(\n (e) => {\n e?.preventDefault();\n setActiveStep((prevActiveStep) =>\n !steps[prevActiveStep + 1]?.disabled ? prevActiveStep + 1 : prevActiveStep + 2\n );\n },\n [steps]\n );\n\n const handleBack = useCallback(\n (e) => {\n e?.preventDefault();\n setActiveStep((prevActiveStep) =>\n !steps[prevActiveStep - 1]?.disabled ? prevActiveStep - 1 : prevActiveStep - 2\n );\n },\n [steps]\n );\n\n const reset = useCallback(() => {\n handleClose();\n setActiveStep(0);\n //setBookmarkData(DEFAULT_STATE);\n }, [handleClose]);\n\n const close = useCallback(() => {\n //delete bookmark\n reset();\n handleClose();\n }, [handleClose, reset]);\n\n const handleSubmit = useCallback(\n (e) => {\n e.preventDefault();\n\n handleCreateShareLink({\n persistent: true,\n isUpdate,\n parentId,\n name,\n description,\n viewerConfig: {\n ...configuration,\n ...(type === TYPE_KEYS['presentationMode'] ? { presentationMode: true } : {}),\n },\n });\n\n reset();\n },\n [handleCreateShareLink, isUpdate, name, description, type, configuration, parentId, reset]\n );\n\n useEffect(() => {\n setName(isUpdate && selectedMap?.name ? selectedMap?.name : '');\n setDescription(isUpdate && selectedMap?.description ? selectedMap?.description : '');\n }, [open, setName, selectedMap?.name, isUpdate, selectedMap?.description]);\n\n useEffect(() => {\n setType(getTypeFromViewerConfig(viewerConfig)?.key);\n setBookmarkData((old) => ({\n ...old,\n configuration: viewerConfig,\n }));\n }, [setType, viewerConfig]);\n\n const onSubmit = activeStep === steps.length - 1 ? handleSubmit : handleNext;\n\n return (\n - \n {TYPES?.map(({ key, icon: Icon, label, description, shortDescription }) => (\n
\n {title} \n {children}\n
\n );\n};\n\nSection.propTypes = {\n children: PropTypes.node.isRequired,\n title: PropTypes.string.isRequired,\n};\n\nexport default Section;\n","import React, { useState } from 'react';\n\nimport { CircularProgress, Fab, ListItem, ListItemIcon, ListItemText, SvgIcon, Typography } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport { GetApp, Error } from '@mui/icons-material';\nimport PropTypes from 'prop-types';\n\nimport ProjectTypeIcon from 'ReusableComponents/ProjectTypeIcon';\n\nconst DownloadDoneIcon = (props) => {\n return (\n \n \n Pending\n \n
\n );\n } else if (status === 'processing' || status === 'downloading') {\n return (\n \n \n {status}\n \n
\n );\n } else if (status === 'downloaded' || newStatus !== null) {\n return (\n \n {\n console.log('DOWNLOADING');\n console.log('projecttype', projectType);\n window.open(\n `${process.env.REACT_APP_API_URL}/v3/path/${\n projectType === 'file'\n ? `order`\n : projectType === 'map'\n ? 'raster/timestamp/order'\n : projectType === 'pointCloud'\n ? 'pointCloud/timestamp/order'\n : 'vector/timestamp/order'\n }/${downloadId}/data`\n );\n }}\n >\n
\n );\n } else if (status === 'completed') {\n return (\n \n {\n window.open(\n `${process.env.REACT_APP_API_URL}/v3/path/${\n projectType === 'file'\n ? 'order'\n : projectType === 'map'\n ? 'raster/timestamp/order'\n : projectType === 'pointCloud'\n ? 'pointCloud/timestamp/order'\n : 'vector/timestamp/order'\n }/${downloadId}/data`\n );\n setNewStatus('downloaded');\n }}\n >\n
\n );\n } else {\n // error\n return (\n \n \n error\n \n
\n );\n }\n};\n\nItemIcon.propTypes = {\n status: PropTypes.string.isRequired,\n downloadId: PropTypes.string,\n projectType: PropTypes.string.isRequired,\n};\n\nexport default SectionMenuItemDownload;\n","import React, { useState, useRef } from 'react';\n\nimport { Typography, Button } from '@mui/material';\nimport { makeStyles } from 'tss-react/mui';\nimport { Check, Close, OpenInNew } from '@mui/icons-material';\nimport PropTypes from 'prop-types';\nimport { useHistory } from 'react-router-dom';\n\nimport ProjectTypeIcon from '../../../../ReusableComponents/ProjectTypeIcon';\nimport { ConfirmationDialog } from '../../../../MapManagement/core';\nimport { useCurrentFolder } from 'Drive/CurrentFolderContext';\n// import VersionUtility from 'VersionUtility';\nimport { parseSize } from 'Storage/BalanceUtility';\nimport { useAuthFuncs, useAuth } from 'hooks';\nimport { downloadFile } from 'Drive/itemUtils';\nimport ApiManager from 'ApiManager';\nimport { useMainContext } from 'ReusableComponents';\nimport CustomAvatar from 'ReusableComponents/CustomAvatar';\n\nconst useStyles = makeStyles()((theme, { type }) => ({\n container: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n borderRadius: '4px',\n width: '100%',\n boxSizing: 'border-box',\n padding: '5px 16px',\n },\n\n projectTypeIcon: {\n height: '40px',\n width: '40px',\n },\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'center',\n width: '100%',\n marginLeft: '18px',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n paddingRight: '6px',\n },\n title: {\n fontSize: '1rem',\n maxWidth: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n legend: {\n color: type === 'download' ? theme.palette.success.main : theme.palette.text.secondary,\n fontSize: '0.8rem',\n textTransform: type === 'download' ? 'capitalize' : 'none',\n },\n value: {\n whiteSpace: 'nowrap',\n fontSize: '0.975rem',\n },\n ownerContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n marginTop: '4px',\n },\n buttonContainer: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n marginBottom: '8px',\n padding: '0 3px',\n },\n button: {\n padding: '0 12px',\n '&:first-child': {\n marginRight: '12px',\n },\n },\n declineButton: {\n color: theme.palette.text.secondary,\n },\n}));\n\nconst SectionMenuItemInvite = ({ projectType, title, invitedByUser, value, map, handleClose }) => {\n const { classes, cx } = useStyles({ type: 'invite' });\n const history = useHistory();\n const user = useAuth();\n const { /* addPath, */ setViewerKey, setDriveContentKey } = useMainContext();\n const { handleAccept } = useCurrentFolder();\n // const { currentFolderInfo, onToLocationClick, getPathInfo } = useCurrentFolder();\n\n const [storageExceeded, setStorageExceeded] = useState(false);\n\n const [inviteStatus, setInviteStatus] = useState('pending');\n const [doubleName, setDoubleName] = useState(false);\n\n const [dialog, setDialog] = useState({ open: false });\n const { fetchUserInfo } = useAuthFuncs();\n const hassubmitted = useRef(false);\n const onSubmit = async (accept) => {\n if (hassubmitted.current) return;\n\n hassubmitted.current = true;\n\n console.log('submittin');\n setDialog({ open: false });\n\n if (accept) {\n if (user.plan.maxStorage < user.storage + map.storageSize) {\n setStorageExceeded(true);\n return;\n }\n }\n\n let res;\n try {\n res = await ApiManager.post(`/v3/path/${map.id}/transfer/accept`, { accept }, user);\n } catch (e) {\n setDoubleName(true);\n }\n\n if (!!res) {\n if (accept) {\n handleAccept();\n setViewerKey();\n setDriveContentKey();\n setInviteStatus(res.id);\n fetchUserInfo();\n } else {\n setInviteStatus('declined');\n }\n }\n };\n\n const handleButtonClick = () => {\n let redirectLocation;\n if (projectType === 'bookmark') {\n redirectLocation = `/view?pathId=${inviteStatus}`;\n } else {\n redirectLocation = `/drive/me?pathId=${inviteStatus}`;\n }\n\n const currentLocation = `${history.location.pathname}${history.location.search}`;\n if (redirectLocation && currentLocation !== redirectLocation) {\n history.push(redirectLocation);\n }\n\n handleClose();\n };\n\n const noBalance = dialog.type === 'accept' && user.maxNegative < user.coins - dialog.amount;\n\n return (\n <>\n \n {parseSize({ value: map.storageSize })} \n
\n \n {map.name} \n
\n \n Invited by: \n\n \n {invitedByUser.username}\n \n
\n \n {inviteStatus === 'pending' ? (\n <>\n setDialog({ open: true, type: 'accept', amount: value }) : () => onSubmit(true)\n }\n startIcon={You declined the invite \n ) : (\n
\n\n \n {inviteStatus === 'pending' ? (\n <>\n setPaying(true) : () => onSubmit(true)}\n startIcon={You declined the invite \n ) : (\n
\n {paying && (\n \n )}\n \n \n {status === 'created' ? 'pending' : status}\n \n
\n );\n } else {\n // error\n return (\n \n \n error\n \n
\n );\n }\n};\n\nexport default SectionMenuItemImports;\n","import React from 'react';\n\nimport SectionMenuItemDownload from './SectionMenuItemDownload';\nimport SectionMenuItemInvite from './SectionMenuItemInvite';\nimport SectionMenuItemShare from './SectionMenuItemShare';\nimport SectionMenuItemEngagement from './SectionMenuItemEngagement';\nimport SectionMenuItemImports from './SectionMenuItemImports';\n\nfunction SectionMenuItem({ type, ...otherProps }) {\n if (type === 'download') {\n return \n {\n setMenuOpen(false);\n }}\n />\n {(i < 1 || showAll?.shares) && i < notifications?.shares?.length - 1 && (\n
\n ))}\n {showAll?.shares || notifications?.shares?.length < 3 ? (\n <>\n {notifications?.shares?.slice(2)?.map((share, i) => (\n \n setMenuOpen(false)}\n />\n {i < notifications?.shares?.length - 3 &&
\n ))}\n \n ) : (\n \n setMenuOpen(false)}\n />\n {(i < 1 || showAll?.invites) && i < notifications?.invites?.length - 1 && (\n
\n ))}\n {showAll?.invites || notifications?.invites?.length < 3 ? (\n <>\n {notifications?.invites?.slice(2).map((invite, i) => (\n \n setMenuOpen(false)}\n />\n {i < notifications?.invites?.length - 3 &&
\n ))}\n \n ) : (\n \n setMenuOpen(false)}\n />\n {(i < 1 || showAll?.imports) && i < notifications?.imports?.result?.length - 1 && (\n
\n ))}\n {showAll?.imports || notifications?.imports?.result?.length < 3 ? (\n <>\n {notifications?.imports?.result?.slice(2)?.map((n, i) => (\n \n setMenuOpen(false)}\n />\n {i < notifications?.imports?.result?.length - 3 &&
\n ))}\n \n ) : (\n \n
\n ))}\n {showAll?.downloads || notifications?.downloads?.length < 3 ? (\n <>\n {notifications?.downloads?.slice(2)?.map((download, i) => (\n \n
\n ))}\n \n ) : (\n \n
\n ))}\n {showAll?.engagement || notifications?.engagement?.length < 3 ? (\n <>\n {notifications?.engagement?.slice(2)?.map((n, i) => (\n \n
\n ))}\n \n ) : (\n \n \n \n
\n \n \n {accessLevelObj.tooltip}\n {disabled &&
}\n {!disabled ? null : hasGeofence ? 'Disabled due to geofence' : ' Disabled by inherited AccessLevel'}\n \n }\n >\n
\n );\n};\n","import React, { useState } from 'react';\n\nimport { Button } from '@mui/material';\nimport { ArrowDropDown } from '@mui/icons-material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport AccessLevelComponent from './AccessLevelComponent';\nimport AccessLevelMenu from './AccessLevelMenu';\n\nconst INIT_STATE_VALUE = {\n id: null,\n\n accessLevel: null,\n canShare: null,\n displayEdit: null,\n getMembers: null,\n max: null,\n min: null,\n minPublicAccessLevel: null,\n noNone: null,\n onChange: null,\n path: null,\n targetEl: null,\n targetUser: null,\n};\n\nconst useStyles = makeStyles({ name: 'AccessLevelButton' })((theme) => ({\n root: {\n background: 'white',\n gap: theme.spacing(1.25),\n '& .MuiButton-endIcon': {\n marginLeft: 0,\n paddingLeft: theme.spacing(0.5),\n borderLeft: `1px ${theme.palette.divider} solid`,\n },\n },\n}));\n\nconst AccessLevelButton = ({\n accessLevel,\n canShare,\n deleteUser,\n disabled,\n hasGeofence,\n displayEdit,\n max,\n min,\n noNone,\n onChange = () => {},\n path,\n skeleton,\n targetUser,\n}) => {\n const { classes: styles } = useStyles();\n\n const [menuOptions, setMenuOptions] = useState(INIT_STATE_VALUE);\n\n const handleMenuSet = (props) => {\n if (typeof props === 'string' && props === 'reset') {\n setMenuOptions(INIT_STATE_VALUE);\n } else {\n setMenuOptions(props);\n }\n };\n\n const handleClick = (e) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n handleMenuSet({\n accessLevel,\n canShare,\n deleteUser,\n displayEdit,\n max,\n min,\n noNone,\n onChange,\n path,\n targetEl: e.currentTarget,\n targetUser,\n hasGeofence,\n });\n };\n\n return (\n <>\n }\n {!disabled ? null : hasGeofence ? 'Disabled due to geofence' : ' Disabled by inherited AccessLevel'}\n \n }\n >\n
\n \n {actionsPerMinuteObj.tooltip}\n {disabled &&
}\n {disabled && 'Disabled by inherited Processing Units'}\n \n }\n >\n
\n );\n};\n","import React, { useState } from 'react';\n\nimport { makeStyles } from 'tss-react/mui';\nimport { Button } from '@mui/material';\nimport { ArrowDropDown } from '@mui/icons-material';\n\nimport ActionsPerMinuteComponent from './ActionsPerMinuteComponent';\nimport ActionsPerMinuteMenu from './ActionsPerMinuteMenu';\n\nconst INIT_STATE_VALUE = {\n targetEl: null,\n actionsPerMinute: null,\n onChange: null,\n minPublicActionsMonth: null,\n minPublicActionsUser: null,\n path: null,\n};\n\nconst useStyles = makeStyles({ name: 'ActionsPerMinuteButton' })((theme) => ({\n button: {\n background: 'white',\n gap: theme.spacing(1.25),\n '& .MuiButton-endIcon': {\n marginLeft: 0,\n paddingLeft: theme.spacing(0.5),\n borderLeft: `1px ${theme.palette.divider} solid`,\n },\n },\n label: { flexGrow: 1 },\n}));\n\nconst ActionsPerMinuteButton = ({\n actionsPerMinute,\n skeleton,\n disabled,\n onChange = () => {},\n minUserActionsMonth,\n ...ComponentProps\n}) => {\n const { classes: styles } = useStyles();\n\n const [menuOptions, setMenuOptions] = useState(INIT_STATE_VALUE);\n\n const handleMenuSet = (props) => {\n if (typeof props === 'string' && props === 'reset') {\n setMenuOptions(INIT_STATE_VALUE);\n } else {\n setMenuOptions(props);\n }\n };\n\n const handleClick = (e) => {\n e?.stopPropagation();\n\n handleMenuSet({\n targetEl: e.currentTarget,\n actionsPerMinute,\n onChange,\n minUserActionsMonth,\n });\n };\n\n return (\n <>\n }\n {disabled && 'Disabled by inherited Processing Units'}\n \n }\n >\n
\n {contentObj?.label ? (\n \n {contentObj.label} {disabled && !suppressInherit ? ' (inherited)' : null}\n \n ) : (\n
\n - \n
\n \n
\n )}\n \n );\n },\n dialogTitleStyles\n);\n\nexport default DialogTitle;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n Button,\n CircularProgress,\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n // DialogTitle,\n} from '@mui/material';\nimport DialogTitle from 'ReusableComponents/DialogTitle/DialogTitle';\n\nconst ConfirmationDialog = ({\n open,\n handleClose,\n title,\n legend,\n onClick,\n loading,\n cancelText = 'cancel',\n agreeText = 'confirm',\n style = {},\n}) => {\n return (\n \n * \n *
\n * )}\n * Drag 'n' drop some files here, or click to select files
\n *\n * \n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {string|string[]} [props.accept] Set accepted file types.\n * See https://github.com/okonet/attr-accept for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all.\n * See: https://github.com/react-dropzone/react-dropzone/issues/276\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.\n * If `multiple` is set to false and additional files are droppped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n *\n * @returns {DropzoneState}\n */\n\nexport function useDropzone() {\n var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n accept = _ref2.accept,\n _ref2$disabled = _ref2.disabled,\n disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,\n _ref2$getFilesFromEve = _ref2.getFilesFromEvent,\n getFilesFromEvent = _ref2$getFilesFromEve === void 0 ? fromEvent : _ref2$getFilesFromEve,\n _ref2$maxSize = _ref2.maxSize,\n maxSize = _ref2$maxSize === void 0 ? Infinity : _ref2$maxSize,\n _ref2$minSize = _ref2.minSize,\n minSize = _ref2$minSize === void 0 ? 0 : _ref2$minSize,\n _ref2$multiple = _ref2.multiple,\n multiple = _ref2$multiple === void 0 ? true : _ref2$multiple,\n onDragEnter = _ref2.onDragEnter,\n onDragLeave = _ref2.onDragLeave,\n onDragOver = _ref2.onDragOver,\n onDrop = _ref2.onDrop,\n onDropAccepted = _ref2.onDropAccepted,\n onDropRejected = _ref2.onDropRejected,\n onFileDialogCancel = _ref2.onFileDialogCancel,\n _ref2$preventDropOnDo = _ref2.preventDropOnDocument,\n preventDropOnDocument = _ref2$preventDropOnDo === void 0 ? true : _ref2$preventDropOnDo,\n _ref2$noClick = _ref2.noClick,\n noClick = _ref2$noClick === void 0 ? false : _ref2$noClick,\n _ref2$noKeyboard = _ref2.noKeyboard,\n noKeyboard = _ref2$noKeyboard === void 0 ? false : _ref2$noKeyboard,\n _ref2$noDrag = _ref2.noDrag,\n noDrag = _ref2$noDrag === void 0 ? false : _ref2$noDrag,\n _ref2$noDragEventsBub = _ref2.noDragEventsBubbling,\n noDragEventsBubbling = _ref2$noDragEventsBub === void 0 ? false : _ref2$noDragEventsBub;\n\n var rootRef = useRef(null);\n var inputRef = useRef(null);\n\n var _useReducer = useReducer(reducer, initialState),\n _useReducer2 = _slicedToArray(_useReducer, 2),\n state = _useReducer2[0],\n dispatch = _useReducer2[1];\n\n var isFocused = state.isFocused,\n isFileDialogActive = state.isFileDialogActive,\n draggedFiles = state.draggedFiles; // Fn for opening the file dialog programmatically\n\n var openFileDialog = useCallback(function () {\n if (inputRef.current) {\n dispatch({\n type: 'openDialog'\n });\n inputRef.current.value = null;\n inputRef.current.click();\n }\n }, [dispatch]); // Update file dialog active state when the window is focused on\n\n var onWindowFocus = function onWindowFocus() {\n // Execute the timeout only if the file dialog is opened in the browser\n if (isFileDialogActive) {\n setTimeout(function () {\n if (inputRef.current) {\n var files = inputRef.current.files;\n\n if (!files.length) {\n dispatch({\n type: 'closeDialog'\n });\n\n if (typeof onFileDialogCancel === 'function') {\n onFileDialogCancel();\n }\n }\n }\n }, 300);\n }\n };\n\n useEffect(function () {\n window.addEventListener('focus', onWindowFocus, false);\n return function () {\n window.removeEventListener('focus', onWindowFocus, false);\n };\n }, [inputRef, isFileDialogActive, onFileDialogCancel]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone\n\n var onKeyDownCb = useCallback(function (event) {\n // Ignore keyboard events bubbling up the DOM tree\n if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {\n return;\n }\n\n if (event.keyCode === 32 || event.keyCode === 13) {\n event.preventDefault();\n openFileDialog();\n }\n }, [rootRef, inputRef]); // Update focus state for the dropzone\n\n var onFocusCb = useCallback(function () {\n dispatch({\n type: 'focus'\n });\n }, []);\n var onBlurCb = useCallback(function () {\n dispatch({\n type: 'blur'\n });\n }, []); // Cb to open the file dialog when click occurs on the dropzone\n\n var onClickCb = useCallback(function () {\n if (noClick) {\n return;\n } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()\n // to ensure React can handle state changes\n // See: https://github.com/react-dropzone/react-dropzone/issues/450\n\n\n if (isIeOrEdge()) {\n setTimeout(openFileDialog, 0);\n } else {\n openFileDialog();\n }\n }, [inputRef, noClick]);\n var dragTargetsRef = useRef([]);\n\n var onDocumentDrop = function onDocumentDrop(event) {\n if (rootRef.current && rootRef.current.contains(event.target)) {\n // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler\n return;\n }\n\n event.preventDefault();\n dragTargetsRef.current = [];\n };\n\n useEffect(function () {\n if (preventDropOnDocument) {\n document.addEventListener('dragover', onDocumentDragOver, false);\n document.addEventListener('drop', onDocumentDrop, false);\n }\n\n return function () {\n if (preventDropOnDocument) {\n document.removeEventListener('dragover', onDocumentDragOver);\n document.removeEventListener('drop', onDocumentDrop);\n }\n };\n }, [rootRef, preventDropOnDocument]);\n var onDragEnterCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event); // Count the dropzone and any children that are entered.\n\n if (dragTargetsRef.current.indexOf(event.target) === -1) {\n dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);\n }\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n dispatch({\n draggedFiles: draggedFiles,\n isDragActive: true,\n type: 'setDraggedFiles'\n });\n\n if (onDragEnter) {\n onDragEnter(event);\n }\n });\n }\n }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);\n var onDragOverCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event);\n\n if (event.dataTransfer) {\n try {\n event.dataTransfer.dropEffect = 'copy';\n } catch (_unused) {}\n /* eslint-disable-line no-empty */\n\n }\n\n if (isEvtWithFiles(event) && onDragOver) {\n onDragOver(event);\n }\n\n return false;\n }, [onDragOver, noDragEventsBubbling]);\n var onDragLeaveCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event); // Only deactivate once the dropzone and all children have been left\n\n var targets = dragTargetsRef.current.filter(function (target) {\n return target !== event.target && rootRef.current && rootRef.current.contains(target);\n });\n dragTargetsRef.current = targets;\n\n if (targets.length > 0) {\n return;\n }\n\n dispatch({\n isDragActive: false,\n type: 'setDraggedFiles',\n draggedFiles: []\n });\n\n if (isEvtWithFiles(event) && onDragLeave) {\n onDragLeave(event);\n }\n }, [rootRef, onDragLeave, noDragEventsBubbling]);\n var onDropCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [];\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (files) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n var acceptedFiles = [];\n var rejectedFiles = [];\n files.forEach(function (file) {\n if (fileAccepted(file, accept) && fileMatchSize(file, minSize, maxSize)) {\n acceptedFiles.push(file);\n } else {\n rejectedFiles.push(file);\n }\n });\n\n if (!multiple && acceptedFiles.length > 1) {\n rejectedFiles.push.apply(rejectedFiles, _toConsumableArray(acceptedFiles.splice(0))); // Reject everything and empty accepted files\n }\n\n dispatch({\n acceptedFiles: acceptedFiles,\n rejectedFiles: rejectedFiles,\n type: 'setFiles'\n });\n\n if (onDrop) {\n onDrop(acceptedFiles, rejectedFiles, event);\n }\n\n if (rejectedFiles.length > 0 && onDropRejected) {\n onDropRejected(rejectedFiles, event);\n }\n\n if (acceptedFiles.length > 0 && onDropAccepted) {\n onDropAccepted(acceptedFiles, event);\n }\n });\n }\n\n dispatch({\n type: 'reset'\n });\n }, [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected, noDragEventsBubbling]);\n\n var composeHandler = function composeHandler(fn) {\n return disabled ? null : fn;\n };\n\n var composeKeyboardHandler = function composeKeyboardHandler(fn) {\n return noKeyboard ? null : composeHandler(fn);\n };\n\n var composeDragHandler = function composeDragHandler(fn) {\n return noDrag ? null : composeHandler(fn);\n };\n\n var stopPropagation = function stopPropagation(event) {\n if (noDragEventsBubbling) {\n event.stopPropagation();\n }\n };\n\n var getRootProps = useMemo(function () {\n return function () {\n var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref3$refKey = _ref3.refKey,\n refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,\n onKeyDown = _ref3.onKeyDown,\n onFocus = _ref3.onFocus,\n onBlur = _ref3.onBlur,\n onClick = _ref3.onClick,\n onDragEnter = _ref3.onDragEnter,\n onDragOver = _ref3.onDragOver,\n onDragLeave = _ref3.onDragLeave,\n onDrop = _ref3.onDrop,\n rest = _objectWithoutProperties(_ref3, [\"refKey\", \"onKeyDown\", \"onFocus\", \"onBlur\", \"onClick\", \"onDragEnter\", \"onDragOver\", \"onDragLeave\", \"onDrop\"]);\n\n return _objectSpread(_defineProperty({\n onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),\n onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),\n onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),\n onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),\n onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),\n onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),\n onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb))\n }, refKey, rootRef), !disabled && !noKeyboard ? {\n tabIndex: 0\n } : {}, {}, rest);\n };\n }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);\n var onInputElementClick = useCallback(function (event) {\n event.stopPropagation();\n }, []);\n var getInputProps = useMemo(function () {\n return function () {\n var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref4$refKey = _ref4.refKey,\n refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,\n onChange = _ref4.onChange,\n onClick = _ref4.onClick,\n rest = _objectWithoutProperties(_ref4, [\"refKey\", \"onChange\", \"onClick\"]);\n\n var inputProps = _defineProperty({\n accept: accept,\n multiple: multiple,\n type: 'file',\n style: {\n display: 'none'\n },\n onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),\n autoComplete: 'off',\n tabIndex: -1\n }, refKey, inputRef);\n\n return _objectSpread({}, inputProps, {}, rest);\n };\n }, [inputRef, accept, multiple, onDropCb, disabled]);\n var fileCount = draggedFiles.length;\n var isDragAccept = fileCount > 0 && allFilesAccepted({\n files: draggedFiles,\n accept: accept,\n minSize: minSize,\n maxSize: maxSize,\n multiple: multiple\n });\n var isDragReject = fileCount > 0 && !isDragAccept;\n return _objectSpread({}, state, {\n isDragAccept: isDragAccept,\n isDragReject: isDragReject,\n isFocused: isFocused && !disabled,\n getRootProps: getRootProps,\n getInputProps: getInputProps,\n rootRef: rootRef,\n inputRef: inputRef,\n open: composeHandler(openFileDialog)\n });\n}\n\nfunction reducer(state, action) {\n /* istanbul ignore next */\n switch (action.type) {\n case 'focus':\n return _objectSpread({}, state, {\n isFocused: true\n });\n\n case 'blur':\n return _objectSpread({}, state, {\n isFocused: false\n });\n\n case 'openDialog':\n return _objectSpread({}, state, {\n isFileDialogActive: true\n });\n\n case 'closeDialog':\n return _objectSpread({}, state, {\n isFileDialogActive: false\n });\n\n case 'setDraggedFiles':\n /* eslint no-case-declarations: 0 */\n var isDragActive = action.isDragActive,\n draggedFiles = action.draggedFiles;\n return _objectSpread({}, state, {\n draggedFiles: draggedFiles,\n isDragActive: isDragActive\n });\n\n case 'setFiles':\n return _objectSpread({}, state, {\n acceptedFiles: action.acceptedFiles,\n rejectedFiles: action.rejectedFiles\n });\n\n case 'reset':\n return _objectSpread({}, state, {\n isFileDialogActive: false,\n isDragActive: false,\n draggedFiles: [],\n acceptedFiles: [],\n rejectedFiles: []\n });\n\n default:\n return state;\n }\n}","import React, { useMemo, useCallback } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport PropTypes from 'prop-types';\nimport { useMediaQuery } from '@mui/material';\n\n// different styling method (no makeStyles) because copy paste and I'm a lazy bastard\nconst baseStyle = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: '20px',\n borderWidth: 2,\n borderRadius: 2,\n borderColor: '#ABABAB',\n borderStyle: 'dashed',\n backgroundColor: '#F0F0F0',\n color: '#919191',\n outline: 'none',\n transition: 'border .24s ease-in-out',\n width: 'auto',\n boxSizing: 'border-box',\n marginBottom: '14px',\n cursor: 'pointer',\n};\n\nconst activeStyle = {\n borderColor: '#2196f3',\n};\n\nconst acceptStyle = {\n borderColor: '#00e676',\n};\n\nconst rejectStyle = {\n borderColor: '#ff1744',\n};\n\nconst DropZoneArea = ({ onChange, className = '', style: userStyles = {} }) => {\n const onDrop = useCallback(onChange, [onChange]);\n const isMobile = useMediaQuery(`(max-width: 1000px)`);\n\n const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({\n onDrop,\n });\n\n const style = useMemo(\n () => ({\n ...baseStyle,\n ...userStyles,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {}),\n }),\n [userStyles, isDragActive, isDragAccept, isDragReject]\n );\n return (\n Drag and drop some files here, or click to select files
\n *\n \n {!isMobile ?
\n );\n};\n\nDropZoneArea.propTypes = {\n onChange: PropTypes.func.isRequired,\n className: PropTypes.string,\n style: PropTypes.object,\n};\n\nexport default DropZoneArea;\n","import React, { useEffect } from 'react';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { getColor, parseExtension } from 'Drive/FileItem/FilesUtils';\nimport { Skeleton, Typography } from '@mui/material';\n\nimport useFileImage, { STATUSES } from './useFileImage';\n\nconst STANDARD_HEIGHT = 64;\nconst MAX_SIZE = 5000;\n\nconst isImage = (file) => {\n const b = file?.name?.includes('.png') || file?.name?.includes('.jpeg') || file?.name?.includes('.jpg');\n\n return b;\n};\n\nconst useFileIconStyle = makeStyles({ name: 'FileIcon' })((theme, { length, size }, classes) => ({\n root: {\n height: size || STANDARD_HEIGHT,\n width: size || STANDARD_HEIGHT,\n },\n text: {\n ...theme.typography.button,\n fontSize: length < 6 ? 10 : length < 8 ? 8 : 6,\n maxWidth: 12,\n },\n round: {\n ...theme.typography.button,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n aspectRatio: 1,\n borderRadius: '100%',\n color: 'white',\n fontSize: 10,\n overflowWrap: 'anywhere',\n padding: theme.spacing(0.5),\n boxSizing: 'border-box',\n lineHeight: '100%',\n [`&.${classes.smallerText}`]: { fontSize: 8 },\n },\n smallerText: {},\n container: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, height: '100%', width: '100%' },\n skeleton: {},\n img: { objectFit: 'cover', height: '100%', width: '100%' },\n}));\n\nexport const FileIcon = ({ file, type = 'full', size = 0, className, error, setError, useMaxSize = false }) => {\n const { fileExtension } = parseExtension(file?.name);\n const mayThumbnail = !error && isImage(file) && (useMaxSize ? file?.file?.totalSize < MAX_SIZE : true);\n\n const { classes: styles, cx } = useFileIconStyle({ length: fileExtension?.length, size });\n const color = getColor(fileExtension);\n\n const thumbnail = useFileImage({ id: mayThumbnail && file?.id });\n\n useEffect(() => {\n if (!mayThumbnail) {\n typeof setError === 'function' && setError('Too large to Thumbnail');\n }\n }, [mayThumbnail, setError]);\n\n if (type === 'round') {\n const cn = cx(styles.root, styles.round, fileExtension?.length > 8 && styles.smallerText, className);\n\n return (\n Drag and drop some files here, or click to select files
:Click to select files
}\n{button}
\n \n \n {children}\n \n
\n \n \n {timestamps.length === 0 && (\n \n \n \n No active timestamps to visualise \n \n )}\n {timestamps.length > 0 && (\n \n
\n );\n};\n\nconst ButtonControlsWrapper = ({ setChosenTiles, chosenTiles, mapType, setMaxZoom, maxZoom }) => {\n return (\n \n
\n {timestamps.length > 1 && (\n Currently selected
\n \n {convertDate(timestamps[timestampIndex].dateFrom)} - {convertDate(timestamps[timestampIndex].dateTo)}\n
\n \n \n Clear all tiles\n \n {mapType === 'map' ? (\n \n ) : null}\n
\n );\n};\n\nconst UserInfoBox = ({ maxZoom, currentZoom }) => {\n const theme = useTheme();\n\n let text = '';\n let isWarn = false;\n if (maxZoom && currentZoom > maxZoom) {\n text = 'User will not be able to zoom this high';\n isWarn = true;\n } else {\n text = maxZoom ? 'User will be able to zoom this high' : '';\n }\n const backgroundColor = isWarn ? theme.palette.error.main : theme.palette.info.dark;\n return (\n text && (\n \n
\n )\n );\n};\n\nexport { MapControls, ButtonControlsWrapper, UserInfoBox };\n","const tileToFeature = (x, y, zoom) => {\n let pi = Math.PI;\n\n let comp4 = Math.pow(2, zoom);\n let comp5 = pi / 2;\n let comp6 = 360 / (2 * pi);\n\n let xMin = (x * 360) / comp4 - 180;\n let xMax = ((x + 1) * 360) / comp4 - 180;\n let yMin = comp6 * (2 * Math.atan(Math.exp((-2 * (pi * (y + 1))) / comp4 + pi)) - comp5);\n let yMax = comp6 * (2 * Math.atan(Math.exp((-2 * (pi * y)) / comp4 + pi)) - comp5);\n\n let coords = [\n [\n [xMin, yMin],\n [xMax, yMin],\n [xMax, yMax],\n [xMin, yMax],\n [xMin, yMin],\n ],\n ];\n\n return {\n type: 'Feature',\n properties: {\n tileX: x,\n tileY: y,\n zoom: zoom,\n },\n geometry: {\n type: 'Polygon',\n coordinates: coords,\n },\n };\n};\n\nconst getBoundsToTiles = (bounds, zoom) => {\n zoom = zoom + 1;\n zoom = Math.max(0, zoom);\n\n let xMin = Math.max(bounds.xMin, -180);\n let xMax = Math.min(bounds.xMax, 180);\n let yMin = Math.max(bounds.yMin, -85);\n let yMax = Math.min(bounds.yMax, 85);\n\n let zoomComp = Math.pow(2, zoom);\n let comp1 = zoomComp / 360;\n let pi = Math.PI;\n let comp2 = 2 * pi;\n let comp3 = pi / 4;\n\n let tileXMin = Math.floor((xMin + 180) * comp1);\n let tileXMax = Math.floor((xMax + 180) * comp1);\n let tileYMin = Math.floor((zoomComp / comp2) * (pi - Math.log(Math.tan(comp3 + (yMax / 360) * pi))));\n let tileYMax = Math.floor((zoomComp / comp2) * (pi - Math.log(Math.tan(comp3 + (yMin / 360) * pi))));\n\n let tiles = [];\n let x = Math.max(0, tileXMin - 1);\n while (x <= Math.min(2 ** zoom - 1, tileXMax + 1)) {\n let y = Math.max(0, tileYMin - 1);\n while (y <= Math.min(2 ** zoom - 1, tileYMax + 1)) {\n let feature = tileToFeature(x, y, zoom);\n tiles.push(feature);\n y = y + 1;\n }\n x = x + 1;\n }\n\n return tiles;\n};\n\nexport { tileToFeature, getBoundsToTiles };\n","import React, { Component, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Clear } from '@mui/icons-material';\nimport { Button, Dialog, DialogActions, DialogTitle, IconButton, DialogContent, Typography } from '@mui/material';\nimport maplibregl from 'maplibre-gl';\nimport 'maplibre-gl/dist/maplibre-gl.css';\n\nimport { ButtonControlsWrapper, MapControls, UserInfoBox } from './GeofenceBlocks';\nimport { getBoundsToTiles, tileToFeature } from './GeofenceBlocks/map-helper';\nimport { isValidTimestamp } from 'ReusableComponents/ValidLayer';\n\nimport { withMainContext } from 'ReusableComponents/MainContext';\nimport { useMinimalAuth } from 'hooks';\n\nimport ApiManager from 'ApiManager';\nimport './Geofence.css';\nimport { useTheme } from '@mui/system';\nimport { glbToGeojson, loadImages } from 'Viewer/ViewerUtility';\n\nconst MAP_ZOOM = 24;\n\nconst MapComponent = ({ setTiles, setZoom, timestamp, selectedMap, addToChosen, fenceTiles, chosenTiles }) => {\n const theme = useTheme();\n const user = useMinimalAuth();\n const map = useRef(null);\n const mapContainer = useRef(null);\n const [styleSheet, setStyleSheet] = useState(null);\n\n const [mapLoaded, setMapLoaded] = useState(false);\n useEffect(() => {\n const interval = setInterval(() => {\n if (map.current && map.current.isStyleLoaded()) {\n setMapLoaded(true);\n }\n }, 1000);\n\n return () => clearInterval(interval);\n }, []);\n\n useEffect(() => {\n if (map.current) return; //stops map from intializing more than once\n\n map.current = new maplibregl.Map({\n renderWorldCopies: false,\n container: mapContainer.current,\n style: {\n version: 8,\n glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',\n sources: {\n osm: {\n type: 'raster',\n tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],\n maxzoom: 18,\n tileSize: 256,\n },\n tiles: {\n type: 'geojson',\n data: { type: 'FeatureCollection', features: [] },\n },\n selectedTiles: {\n type: 'geojson',\n data: { type: 'FeatureCollection', features: [] },\n },\n },\n layers: [\n {\n id: 'osm',\n type: 'raster',\n source: 'osm',\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n },\n {\n id: 'tiles-fill',\n type: 'fill',\n paint: { 'fill-opacity': 0, 'fill-color': 'blue' },\n layout: {\n visibility: 'visible',\n },\n source: 'tiles',\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n },\n\n {\n id: 'tiles',\n type: 'line',\n paint: { 'line-width': 2, 'line-opacity': 1, 'line-color': theme.palette.common.gray3 },\n layout: {\n visibility: 'visible',\n },\n source: 'tiles',\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n },\n {\n id: 'selectedTiles',\n type: 'fill',\n paint: { 'fill-opacity': 0.5, 'fill-color': theme.palette.common.gray1 },\n layout: {\n visibility: 'visible',\n },\n source: 'selectedTiles',\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n },\n ],\n },\n center: [139.753, 35.6844],\n zoom: 14,\n maxZoom: MAP_ZOOM,\n maxPitch: 0,\n });\n\n map.current.on('click', 'tiles-fill', function (e) {\n addToChosen(e.features[0]['_vectorTileFeature']);\n });\n\n map.current.on('mouseenter', 'tiles-fill', () => {\n map.current.getCanvas().style.cursor = 'pointer';\n });\n map.current.on('mouseleave', 'tiles-fill', () => {\n map.current.getCanvas().style.cursor = 'default';\n });\n map.current.scrollZoom.disable();\n map.current.addControl(new maplibregl.NavigationControl());\n }, [addToChosen]);\n\n useEffect(() => {\n return () => {\n map?.current?.remove();\n };\n }, []);\n\n //fly to\n const prevTimestampId = useRef(-1);\n useEffect(() => {\n if (!timestamp) return;\n if (prevTimestampId.current !== timestamp?.id) {\n prevTimestampId.current = timestamp?.id;\n const bounds = timestamp.extent ? timestamp.extent : { xMin: -180, xMax: 180, yMin: -85, yMax: 85 };\n map.current.fitBounds(\n [\n [bounds.xMin, bounds.yMin],\n [bounds.xMax, bounds.yMax],\n ],\n { duration: 0.01 }\n );\n }\n }, [map, timestamp]);\n\n const cachedImages = useRef({});\n const getStyleSheet = useCallback(() => {\n const style = selectedMap.styles.find((s) => s.default);\n\n let url = `/v3/ogc/mvt/${selectedMap.id}/styleSheet?style=${style.id}&zoom=${\n timestamp.zoom ? timestamp.zoom : 16\n }×tampId=${timestamp.id}`;\n\n if (user) {\n url = url + '&token=' + user.token;\n }\n\n ApiManager.get(url).then((res) => {\n loadImages(res, map, cachedImages);\n\n setStyleSheet(res);\n });\n }, [user, selectedMap, timestamp]);\n\n const addRaster = useCallback(\n (sourceId) => {\n const style = selectedMap.styles.find((s) => s.default);\n\n let url = `${ApiManager.apiUrl}/v3/path/${selectedMap.id}/raster/timestamp/${timestamp.id}/tile/{z}/{x}/{y}?style=${style.id}`;\n if (user) {\n url = url + '&token=' + user.token;\n }\n if (!map.current.getSource(sourceId)) {\n map.current.addSource(sourceId, {\n type: 'raster',\n tiles: [url],\n maxzoom: MAP_ZOOM,\n });\n }\n if (currentLoad.current) {\n map.current.removeLayer(currentLoad.current);\n }\n\n map.current.addLayer({\n id: sourceId,\n type: 'raster',\n source: sourceId,\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n });\n\n map.current.moveLayer(sourceId, 'selectedTiles');\n map.current.moveLayer(sourceId, 'tiles');\n map.current.moveLayer(sourceId, 'tiles-fill');\n\n currentLoad.current = sourceId;\n },\n [selectedMap, timestamp]\n );\n\n const addedLayers = useRef([]);\n\n const onlyOnce = useRef(false);\n const addPointCloud = useCallback(\n (sourceId) => {\n if (onlyOnce.current) {\n return;\n }\n\n onlyOnce.current = true;\n const url = `/v3/path/${selectedMap.id}/pointCloud/timestamp/${timestamp.id}/tile/0/0/0`;\n ApiManager.get(url, null, user).then((res) => {\n const style = selectedMap.styles.find((s) => s.default);\n\n const cb = (finalResult) => {\n map.current.addSource(sourceId, {\n type: 'geojson',\n data: finalResult,\n });\n\n map.current.addLayer({\n source: sourceId,\n id: timestamp.id,\n type: 'circle',\n paint: {\n 'circle-radius': style.parameters.pointRadius * 2,\n 'circle-color': ['get', 'color'],\n },\n minzoom: 0,\n maxzoom: MAP_ZOOM,\n });\n };\n\n glbToGeojson(res, cb, 6000, true, { zoom: 0, tileX: 0, tileY: 0 }, style);\n });\n },\n [selectedMap, timestamp.id, user]\n );\n\n const addVector = useCallback(\n (sourceId) => {\n const zoom = timestamp.zoom;\n const style = selectedMap.styles.find((s) => s.default);\n\n let url = `${ApiManager.apiUrl}/v3/ogc/mvt/${selectedMap.id}/{z}/{x}/{y}?style=${style.id}×tampId=${timestamp.id}`;\n\n if (user) {\n url = url + '&token=' + user.token;\n }\n\n if (!map.current.getSource(sourceId)) {\n map.current.addSource(sourceId, {\n type: 'vector',\n tiles: [url],\n maxzoom: zoom,\n });\n }\n\n for (let i = 0; i < addedLayers.current.length; i++) {\n map.current.removeLayer(addedLayers.current[i]);\n }\n addedLayers.current = [];\n\n for (let i = 0; i < styleSheet.layers.length; i++) {\n const load = styleSheet.layers[i];\n map.current.addLayer({\n ...load,\n id: sourceId + '_' + load.id,\n source: sourceId,\n maxzoom: MAP_ZOOM,\n });\n map.current.moveLayer(sourceId + '_' + load.id, 'selectedTiles');\n map.current.moveLayer(sourceId + '_' + load.id, 'tiles');\n map.current.moveLayer(sourceId + '_' + load.id, 'tiles-fill');\n addedLayers.current.push(sourceId + '_' + load.id);\n }\n },\n [selectedMap, timestamp, user, styleSheet]\n );\n\n //add layer\n const currentLoad = useRef(null);\n useEffect(() => {\n if (!timestamp) return;\n const sourceId = selectedMap.id + '_' + timestamp.id;\n\n if (!mapLoaded) return;\n\n if (currentLoad.current === sourceId) return;\n\n if (selectedMap.type === 'map') {\n addRaster(sourceId);\n } else if (selectedMap.type === 'shape') {\n if (styleSheet) {\n addVector(sourceId);\n } else {\n getStyleSheet();\n }\n } else if (selectedMap.type === 'pointCloud') {\n addPointCloud(sourceId);\n }\n }, [selectedMap, user, timestamp, mapLoaded, addRaster, addVector, addPointCloud, getStyleSheet, styleSheet]);\n\n const getFenceTiles = useCallback(\n (bounds, zoom) => {\n let tiles = getBoundsToTiles(bounds, zoom + 1);\n setTiles(tiles);\n },\n [setTiles]\n );\n\n useEffect(() => {\n if (!mapLoaded) return;\n //click\n map.current.getSource('tiles').setData({\n type: 'FeatureCollection',\n features: fenceTiles,\n });\n }, [fenceTiles, mapLoaded]);\n\n useEffect(() => {\n if (!mapLoaded) return;\n //click\n map.current.getSource('selectedTiles').setData({\n type: 'FeatureCollection',\n features: chosenTiles,\n });\n }, [chosenTiles, mapLoaded]);\n\n const prevBounds = useRef(null);\n const onViewportChanged = useCallback(\n async (bounds, zoom) => {\n if (prevBounds.current !== JSON.stringify(bounds)) {\n prevBounds.current = JSON.stringify(bounds);\n getFenceTiles(bounds, zoom);\n setZoom(zoom);\n }\n },\n [getFenceTiles, setZoom]\n );\n\n useEffect(() => {\n const interval = setInterval(() => {\n if (mapLoaded) {\n const canvas = map.current.getCanvas();\n const clientHeight = canvas.clientHeight;\n const clientWidth = canvas.clientWidth;\n\n const cUL = map.current.unproject([0, 0]).toArray();\n const cUR = map.current.unproject([clientWidth, 0]).toArray();\n const cLR = map.current.unproject([clientWidth, clientHeight]).toArray();\n const cLL = map.current.unproject([0, clientHeight]).toArray();\n const xs = [cUL[0], cUR[0], cLR[0], cLL[0]];\n const ys = [cUL[1], cUR[1], cLR[1], cLL[1]];\n const bounds = { xMin: Math.min(...xs), xMax: Math.max(...xs), yMin: Math.min(...ys), yMax: Math.max(...ys) };\n const zoom = Math.round(map.current.getZoom());\n\n onViewportChanged(bounds, zoom);\n }\n }, 300);\n\n return () => clearInterval(interval);\n }, [onViewportChanged, mapLoaded]);\n\n return (\n \n \n
\n \n );\n};\n\nclass Geofence extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n selectedTimestamp: this.props.map.timestamps.filter((t) => isValidTimestamp(t).available).length - 1,\n selectedStyleId: this.props.map.styles ? this.props.map.styles[0]?.id : null,\n chosenTiles: this.props.tiles,\n fenceTiles: [],\n getVectorChagned: 0,\n maxZoom: this.props.maxZoom,\n canSubmit: false,\n currentZoom: 0,\n };\n this.setNewViewportTimer = null;\n\n this.geometryLayer = { tiles: {} };\n }\n\n componentDidMount() {\n const tiles = this.props.tiles;\n const maxZoom = this.props.maxZoom;\n const chosenTiles = tiles?.map((t) => tileToFeature(t.tileX, t.tileY, t.zoom)) ?? [];\n this.setState({ chosenTiles, maxZoom });\n\n if (this.props.map.type === 'map' && this.props.map.timestamps.filter((t) => t.status === 'finished').length > 0) {\n this.setState({ selectedTimestamp: 0 });\n }\n }\n\n updateTimestamp = (e, val) => {\n this.setState({ selectedTimestamp: val });\n };\n\n setTiles = (tiles) => {\n this.setState({ fenceTiles: tiles });\n };\n\n setZoom = (zoom) => {\n this.setState({ currentZoom: zoom });\n };\n\n addToChosen = (tile) => {\n this.setState({ canSubmit: true });\n let tiles = [...this.state.chosenTiles];\n\n let found = tiles.find(\n (t) =>\n t.properties.tileX === tile.properties.tileX &&\n t.properties.tileY === tile.properties.tileY &&\n t.properties.zoom === tile.properties.zoom\n );\n\n if (found) {\n tiles = tiles.filter(\n (t) =>\n !(\n t.properties.tileX === tile.properties.tileX &&\n t.properties.tileY === tile.properties.tileY &&\n t.properties.zoom === tile.properties.zoom\n )\n );\n } else {\n if (tiles.length >= 8) {\n this.props.onOpenSnackbar({\n level: 'error',\n content: 'You can use at most 8 tiles',\n });\n } else {\n tiles = tiles.filter((t) => {\n if (t.properties.zoom > tile.properties.zoom) {\n let zoomDifference = t.properties.zoom - tile.properties.zoom;\n if (\n Math.floor(t.properties.tileX / 2 ** zoomDifference) === tile.properties.tileX &&\n Math.floor(t.properties.tileY / 2 ** zoomDifference) === tile.properties.tileY\n ) {\n return false;\n } else {\n return true;\n }\n } else {\n return true;\n }\n });\n tiles.push(tile);\n }\n }\n\n tiles = tiles.map((t) => {\n return tileToFeature(t.properties.tileX, t.properties.tileY, t.properties.zoom);\n });\n this.setState({ chosenTiles: tiles });\n };\n\n onSubmit = (fenceZoom, fenceTiles) => {\n fenceTiles = fenceTiles.map((t) => {\n return { tileX: t.properties.tileX, tileY: t.properties.tileY, zoom: t.properties.zoom };\n });\n\n if (this.props.isSearch) {\n if (fenceZoom && this.props.map.type === 'map') {\n this.props.updateMaxZoom(fenceZoom);\n } else {\n this.props.updateMaxZoom(null);\n }\n if (fenceTiles.length > 0) {\n this.props.updateTiles(fenceTiles);\n } else {\n this.props.updateTiles(null);\n }\n } else {\n let body = {\n /* pathId: this.props.map.id */\n };\n\n if (!this.props.isPublic) {\n body.userId = this.props.targetUser.user.id;\n }\n if (fenceTiles.length === 0) {\n body.removeTiles = true;\n } else {\n body.tiles = fenceTiles;\n }\n\n if (fenceZoom && this.props.map.type === 'map') {\n body.maxZoom = fenceZoom;\n } else if (this.props.map.type === 'map') {\n body.removeMaxZoom = true;\n }\n\n if (this.props.isPublic) {\n this.props.updatePublic(body);\n } else {\n this.props.updateUser(body);\n }\n }\n\n this.props.onCancel();\n };\n\n setChecked = (id) => {\n this.setState({ selectedStyleId: id });\n };\n\n render() {\n return (\n \n Geofence \n \n \n
\n \n isValidTimestamp(t).available)[this.state.selectedTimestamp]\n }\n />\n
\n\n \n (\n \n {children}\n \n ),\n a: ({ children, ...props }) => (\n \n {children}\n \n ),\n }}\n >\n {children}\n \n \n
\n );\n});\n\nMarkdownWrapper.displayName = 'MarkdownWrapper';\n\nexport default MarkdownWrapper;\n\nconst StyledP = forwardRef(({ node, children, textProps: inputTextProps, ...props }, ref) => {\n const { classes: styles } = useStyles();\n const { sx, ...textProps } = { ...inputTextProps };\n\n return (\n \n \n \n !(tooLong || isSame) && onSubmit(el?.current?.mdValue) }}\n />\n \n
\n {!disableButtons && (\n \n {title} \n {!!setOverrideValue ? overrideValue : value} \n
\n \n \n \n
\n )}\n \n );\n }\n);\n\nexport default Editor;\n\nEditor.displayName = 'Editor';\n","import React, { useRef } from 'react';\n\nimport { Dialog, DialogContent } from '@mui/material';\nimport DialogTitle from 'ReusableComponents/DialogTitle/DialogTitle';\nimport MarkdownEditor from './MarkdownEditor';\nimport { useCallback } from 'react';\n\nexport default function MarkdownDialog({ open, close, submit, title, ...MarkdownProps }) {\n const elementRef = useRef();\n\n const cb = useCallback(\n (res) => {\n typeof submit === 'function' && submit(res);\n typeof close === 'function' && close();\n },\n [close, submit]\n );\n\n return (\n \n );\n}\n","import React, { useState, useEffect, useCallback } from 'react';\n\nimport {\n Alert,\n Box,\n Breadcrumbs,\n Button,\n CircularProgress,\n DialogActions,\n DialogContent,\n ListItemText,\n Skeleton,\n Typography,\n} from '@mui/material';\nimport { Folder, FolderRounded, InsertDriveFile } from '@mui/icons-material';\nimport { makeStyles } from 'tss-react/mui';\n\nimport { useMinimalAuth } from 'hooks';\n\nimport SharingComponent from 'ReusableComponents/SharingComponent';\n\nimport VersionUtility from 'VersionUtility';\nimport ApiManager from 'ApiManager';\nimport { FileIcon } from 'ReusableComponents/FileIcon';\n\nconst useStyles = makeStyles()((theme, _, classes) => ({\n content: {\n gap: theme.spacing(1),\n display: 'grid',\n maxWidth: '100%',\n minWidth: 0,\n alignItems: 'center',\n alignContent: 'flex-start',\n gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',\n\n '& $folderContainer+.MuiAlert-root': {\n marginTop: 12,\n },\n color: theme.palette.action.active,\n },\n subgrid: {\n display: 'grid',\n gridTemplateColumns: 'subgrid',\n gridColumn: '1 / -1',\n },\n folderButton: {\n textTransform: 'none',\n overflowWrap: 'anywhere',\n textAlign: 'left',\n justifyContent: 'flex-start',\n gap: theme.spacing(0.5),\n },\n folder: {\n boxShadow: 'unset',\n borderRadius: theme.spacing(1.5),\n backgroundColor: theme.palette.primary.surface,\n border: '1px solid transparent',\n borderColor: theme.palette.primary.mainOpaque,\n\n '& .MuiButton-startIcon': { color: theme.palette.action.active },\n '& .MuiTypography-root': { color: theme.palette.text.primary },\n '&:hover': {\n backgroundColor: theme.palette.primary.surface,\n boxShadow: 'unset',\n borderColor: theme.palette.primary.main,\n },\n },\n file: {\n alignSelf: 'stretch',\n flexDirection: 'column',\n '&>.MuiBox-root': { height: 'calc(100% + 5px)', width: 'calc(100% + 30px)' },\n },\n media: {\n height: 0,\n position: 'relative',\n flexGrow: 1,\n paddingTop: 'calc(56.25% + 30px)',\n marginTop: -5,\n [`&&>.${classes.container}`]: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n height: '100%',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n },\n },\n buttonText: { color: theme.palette.text.primary },\n breadcrumbContainer: {\n display: 'flex',\n alignItems: 'flex-start',\n padding: theme.spacing(2, 3),\n paddingTop: 0,\n },\n breadcrumbIcon: {\n color: theme.palette.action.active,\n marginRight: '1rem',\n marginTop: 6,\n },\n emptyText: {\n color: theme.palette.text.secondary,\n padding: '16px',\n gridColumn: '1 / -1',\n },\n container: {},\n}));\n\nconst rootNameMapping = {\n myMaps: 'My Drive',\n shared: 'Shared with me',\n sharedWithMe: 'Shared with me',\n favorites: 'Favorites',\n};\n\nconst MoveTo = ({\n handleMove,\n setCurrentPathId,\n closeDialog,\n selectedItems,\n type,\n buttonText,\n fileTypes,\n blockSubmit,\n bookmark,\n setDisabled,\n handleSelect,\n currentRoot,\n loadingSubmit,\n hideAccept,\n fileSubType,\n fileTest,\n currentAccess,\n}) => {\n const { classes } = useStyles();\n const user = useMinimalAuth();\n\n const [folders, setFolders] = useState(null);\n const [files, setFiles] = useState([]);\n\n const [loading, setLoading] = useState(false);\n const [root, setRoot] = useState(currentRoot);\n\n useEffect(() => {\n if (bookmark) {\n setCurrentPathId(root.path.length > 0 ? root.path[root.path.length - 1].id : null);\n }\n }, [root, bookmark, setCurrentPathId]);\n\n const [selectedPath, setSelectedPath] = useState(null);\n\n const fetchFiles = useCallback(\n (pathId = null, nextPageStart = null) => {\n ApiManager.get(\n pathId\n ? `/v3/path/${pathId}/list`\n : `/v3/account/root/${ApiManager.rootNames[root.root] ? ApiManager.rootNames[root.root] : root.root}`,\n {\n type: fileTypes,\n pageSize: 50,\n pageStart: nextPageStart,\n },\n user\n )\n .then((res) => {\n setFiles(\n res.result\n .map((f) => VersionUtility.convertPathInfo(f))\n .filter((f) => {\n return f.name.includes(fileSubType);\n })\n );\n })\n .catch((error) => {\n console.error(error);\n setLoading(false);\n\n setFiles([]);\n });\n },\n [root, fileTypes, user, fileSubType]\n );\n\n const fetchFolders = useCallback(\n async (pathId = null, nextPageStart = null) => {\n if (!root.root && !pathId) {\n return;\n }\n try {\n if (pathId) {\n let res = VersionUtility.convertPathInfo(await ApiManager.get(`/v3/path/${pathId}`, null, user));\n setSelectedPath(res);\n } else {\n setSelectedPath(null);\n }\n\n setLoading(true);\n let res = await ApiManager.get(\n pathId\n ? `/v3/path/${pathId}/list`\n : `/v3/account/root/${ApiManager.rootNames[root.root] ? ApiManager.rootNames[root.root] : root.root}`,\n {\n type: ['folder'],\n pageSize: 50,\n pageStart: nextPageStart,\n },\n user\n );\n\n res = VersionUtility.convertListRoot(res);\n res.result = res.result?.filter((folder) => !folder?.deleted);\n setFolders((folders) => (!!nextPageStart ? [...folders, ...res.result] : res.result));\n\n if (!!res?.nextPageStart) {\n fetchFolders(pathId, res.nextPageStart);\n } else {\n setLoading(false);\n }\n } catch (error) {\n console.error(error);\n setLoading(false);\n\n setFolders({ result: null, nextPageStart: null });\n }\n },\n [root, user]\n );\n\n const handleMoveFolder = (id, name) => {\n setRoot((prev) => {\n return { ...prev, path: [...prev.path, { id, name }] };\n });\n };\n\n const handleBreadCrumbClick = (index) => {\n if (index === root.path.length - 1) {\n return;\n }\n\n setRoot((prev) => {\n if (index || index === 0) {\n let x = [...prev.path];\n x = x.slice(0, index + 1);\n\n return { ...prev, path: x };\n } else {\n return { ...prev, path: [] };\n }\n });\n };\n\n useEffect(() => {\n fetchFolders(root.path[root.path.length - 1]?.id);\n if (fileTypes) {\n fetchFiles(root.path[root.path.length - 1]?.id);\n }\n }, [fetchFiles, fetchFolders, fileTypes, root.path]);\n\n const access = selectedPath ? selectedPath.yourAccess.accessLevel >= ApiManager.newAccessLevel['edit+'] : false;\n\n const owner = selectedPath?.user;\n const originPath = currentRoot.path.length > 0 ? currentRoot.path[currentRoot.path.length - 1] : null;\n\n const moveOwner = selectedPath\n ? selectedPath.yourAccess.accessLevel >= ApiManager.newAccessLevel['admin'] &&\n currentAccess >= ApiManager.newAccessLevel['admin']\n : currentAccess >= ApiManager.newAccessLevel['admin'];\n\n const alert = fileSubType\n ? null\n : !root.root\n ? 'Cannot place an item here'\n : root.root === 'shared' && root.path?.length === 0\n ? 'You cannot place items in shared with me'\n : root.root === 'favorites' && root.path?.length === 0\n ? 'You cannot place items in favorites'\n : !access && root.path.length > 0\n ? 'No permission to place items here, you need to have at least edit+'\n : (selectedItems[0]?.user.id !== owner?.id || (!owner && selectedItems[0]?.user.id !== user.id)) &&\n type !== 'create' &&\n !moveOwner\n ? 'You need to have admin access to both folders, when moving an element to a folder with of a different owner'\n : root.length > 0 && root.path[root.path.length - 1].id === selectedItems[0]?.id && type !== 'create'\n ? 'Not allowed to move path to the same location'\n : type !== 'create' && (selectedPath?.id === originPath?.id || (!selectedPath && !originPath))\n ? 'Cannot move to the original folder'\n : null;\n\n useEffect(() => {\n if (bookmark) {\n if (alert) {\n setDisabled(true);\n } else {\n setDisabled(false);\n }\n }\n }, [alert, bookmark]);\n\n const pathIds = selectedItems?.map((i) => i.id);\n\n return (\n <>\n \n \n \n\n {!!rootNameMapping?.[root?.root] && (\n \n )}\n {root.path\n ? [...root.path]?.map(({ id, name }, i) => (\n handleBreadCrumbClick(i)}\n >\n {name}\n \n ))\n : null}\n \n
\n {alert && \n \n \n \n \n {message}\n \n \n \n \n \n\n ![\"rocket-astronaut\"](\"/svgs/rocket_astronaut.svg\")
\n \n
\n );\n};\n\nPageRedirect.propTypes = {\n reason: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nexport default PageRedirect;\n","/*!\n * react-paypal-js v8.8.2 (2025-02-06T19:12:00.138Z)\n * Copyright 2020-present, PayPal, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { createContext, useContext, useRef, useState, useEffect, useReducer } from 'react';\n\n/**\n * Enum for the SDK script resolve status,\n *\n * @enum {string}\n */\nvar SCRIPT_LOADING_STATE;\n(function (SCRIPT_LOADING_STATE) {\n SCRIPT_LOADING_STATE[\"INITIAL\"] = \"initial\";\n SCRIPT_LOADING_STATE[\"PENDING\"] = \"pending\";\n SCRIPT_LOADING_STATE[\"REJECTED\"] = \"rejected\";\n SCRIPT_LOADING_STATE[\"RESOLVED\"] = \"resolved\";\n})(SCRIPT_LOADING_STATE || (SCRIPT_LOADING_STATE = {}));\n/**\n * Enum for the PayPalScriptProvider context dispatch actions\n *\n * @enum {string}\n */\nvar DISPATCH_ACTION;\n(function (DISPATCH_ACTION) {\n DISPATCH_ACTION[\"LOADING_STATUS\"] = \"setLoadingStatus\";\n DISPATCH_ACTION[\"RESET_OPTIONS\"] = \"resetOptions\";\n DISPATCH_ACTION[\"SET_BRAINTREE_INSTANCE\"] = \"braintreeInstance\";\n})(DISPATCH_ACTION || (DISPATCH_ACTION = {}));\n/**\n * Enum for all the available hosted fields\n *\n * @enum {string}\n */\nvar PAYPAL_HOSTED_FIELDS_TYPES;\n(function (PAYPAL_HOSTED_FIELDS_TYPES) {\n PAYPAL_HOSTED_FIELDS_TYPES[\"NUMBER\"] = \"number\";\n PAYPAL_HOSTED_FIELDS_TYPES[\"CVV\"] = \"cvv\";\n PAYPAL_HOSTED_FIELDS_TYPES[\"EXPIRATION_DATE\"] = \"expirationDate\";\n PAYPAL_HOSTED_FIELDS_TYPES[\"EXPIRATION_MONTH\"] = \"expirationMonth\";\n PAYPAL_HOSTED_FIELDS_TYPES[\"EXPIRATION_YEAR\"] = \"expirationYear\";\n PAYPAL_HOSTED_FIELDS_TYPES[\"POSTAL_CODE\"] = \"postalCode\";\n})(PAYPAL_HOSTED_FIELDS_TYPES || (PAYPAL_HOSTED_FIELDS_TYPES = {}));\nvar __assign = function () {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nfunction __rest$1(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n}\nfunction __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\ntypeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\n/*********************************************\n * Common reference to the script identifier *\n *********************************************/\n// keep this script id value in kebab-case format\nvar SCRIPT_ID = \"data-react-paypal-script-id\";\nvar SDK_SETTINGS = {\n DATA_CLIENT_TOKEN: \"dataClientToken\",\n DATA_JS_SDK_LIBRARY: \"dataJsSdkLibrary\",\n DATA_LIBRARY_VALUE: \"react-paypal-js\",\n DATA_NAMESPACE: \"dataNamespace\",\n DATA_SDK_INTEGRATION_SOURCE: \"dataSdkIntegrationSource\",\n DATA_USER_ID_TOKEN: \"dataUserIdToken\"\n};\nvar LOAD_SCRIPT_ERROR = \"Failed to load the PayPal JS SDK script.\";\n/****************************\n * Braintree error messages *\n ****************************/\nvar EMPTY_BRAINTREE_AUTHORIZATION_ERROR_MESSAGE = \"Invalid authorization data. Use dataClientToken or dataUserIdToken to authorize.\";\nvar braintreeVersion = \"3.84.0\";\nvar BRAINTREE_SOURCE = \"https://js.braintreegateway.com/web/\".concat(braintreeVersion, \"/js/client.min.js\");\nvar BRAINTREE_PAYPAL_CHECKOUT_SOURCE = \"https://js.braintreegateway.com/web/\".concat(braintreeVersion, \"/js/paypal-checkout.min.js\");\n/*********************\n * PayPal namespaces *\n *********************/\nvar DEFAULT_PAYPAL_NAMESPACE = \"paypal\";\nvar DEFAULT_BRAINTREE_NAMESPACE = \"braintree\";\n/*****************\n * Hosted Fields *\n *****************/\nvar HOSTED_FIELDS_CHILDREN_ERROR = \"To use HostedFields you must use it with at least 3 children with types: [number, cvv, expirationDate] includes\";\nvar HOSTED_FIELDS_DUPLICATE_CHILDREN_ERROR = \"Cannot use duplicate HostedFields as children\";\n/*******************\n * Script Provider *\n *******************/\nvar SCRIPT_PROVIDER_REDUCER_ERROR = \"usePayPalScriptReducer must be used within a PayPalScriptProvider\";\nvar CARD_FIELDS_DUPLICATE_CHILDREN_ERROR = \"Cannot use duplicate CardFields as children\";\nvar CARD_FIELDS_CONTEXT_ERROR = \"Individual CardFields must be rendered inside the PayPalCardFieldsProvider\";\n\n/**\n * Get the namespace from the window in the browser\n * this is useful to get the paypal object from window\n * after load PayPal SDK script\n *\n * @param namespace the name space to return\n * @returns the namespace if exists or undefined otherwise\n */\nfunction getPayPalWindowNamespace$1(namespace) {\n if (namespace === void 0) {\n namespace = DEFAULT_PAYPAL_NAMESPACE;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return window[namespace];\n}\n/**\n * Get a namespace from the window in the browser\n * this is useful to get the braintree from window\n * after load Braintree script\n *\n * @param namespace the name space to return\n * @returns the namespace if exists or undefined otherwise\n */\nfunction getBraintreeWindowNamespace(namespace) {\n if (namespace === void 0) {\n namespace = DEFAULT_BRAINTREE_NAMESPACE;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return window[namespace];\n}\n/**\n * Creates a string hash code based on the string argument\n *\n * @param str the source input string to hash\n * @returns string hash code\n */\nfunction hashStr(str) {\n var hash = \"\";\n for (var i = 0; i < str.length; i++) {\n var total = str[i].charCodeAt(0) * i;\n if (str[i + 1]) {\n total += str[i + 1].charCodeAt(0) * (i - 1);\n }\n hash += String.fromCharCode(97 + Math.abs(total) % 26);\n }\n return hash;\n}\nfunction generateErrorMessage(_a) {\n var reactComponentName = _a.reactComponentName,\n sdkComponentKey = _a.sdkComponentKey,\n _b = _a.sdkRequestedComponents,\n sdkRequestedComponents = _b === void 0 ? \"\" : _b,\n _c = _a.sdkDataNamespace,\n sdkDataNamespace = _c === void 0 ? DEFAULT_PAYPAL_NAMESPACE : _c;\n var requiredOptionCapitalized = sdkComponentKey.charAt(0).toUpperCase().concat(sdkComponentKey.substring(1));\n var errorMessage = \"Unable to render <\".concat(reactComponentName, \" /> because window.\").concat(sdkDataNamespace, \".\").concat(requiredOptionCapitalized, \" is undefined.\");\n // The JS SDK only loads the buttons component by default.\n // All other components like messages and marks must be requested using the \"components\" query parameter\n var requestedComponents = typeof sdkRequestedComponents === \"string\" ? sdkRequestedComponents : sdkRequestedComponents.join(\",\");\n if (!requestedComponents.includes(sdkComponentKey)) {\n var expectedComponents = [requestedComponents, sdkComponentKey].filter(Boolean).join();\n errorMessage += \"\\nTo fix the issue, add '\".concat(sdkComponentKey, \"' to the list of components passed to the parent PayPalScriptProvider:\") + \"\\n`\n ![\"ellipsis-logo\"](\"/ellipsis-logo.svg\")
\n
\n \n \n \n \n
\n \n