@campxdev/shared 1.8.5-0.alpha-1 → 1.8.5-0.alpha-2

package/src/components/Layout/Header/AppsMenu.tsx

@@ -1,133 +1,133 @@
-import { Box, Menu, Typography, styled } from '@mui/material'
-import Cookies from 'js-cookie'
-import { useState } from 'react'
-import { applications } from './applications'
-import { AppsIcon } from './icons'
-import {
-  StyledDescription,
-  StyledIconButton,
-  StyledMenuItem,
-  StyledMenuItemContainer,
-  StyledLink,
-  StyledImageBox,
-} from './styles'
-import { PermissionsStore } from '../../../shared-state'
-import AppsOutageIcon from '@mui/icons-material/AppsOutage'
-export const campxTenantKey = Cookies.get('campx_tenant')
-
-const AppsMenu = () => {
-  const permissionState = PermissionsStore.useState((s) => s)
-  const [anchorEl, setAnchorEl] = useState<any>(null)
-  const open = Boolean(anchorEl)
-  const applicationList = applications?.filter((item) =>
-    permissionState.applications.includes(item.key),
-  )
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return (
-    <>
-      <StyledIconButton onClick={handleClick}>
-        <AppsIcon />
-      </StyledIconButton>
-
-      <Menu
-        transitionDuration={150}
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        TransitionProps={{
-          unmountOnExit: false,
-        }}
-        sx={{
-          '& .MuiPaper-root': {
-            left: '0 !important',
-            top: '64px !important',
-            '&>:last-child': {
-              paddingBottom: '0px',
-            },
-          },
-        }}
-      >
-        {applicationList.length != 0 ? (
-          <>
-            <Box sx={{ padding: '0.3rem 1rem' }}>
-              <Typography variant="body2">Switch to</Typography>
-            </Box>
-            <Box>
-              {applicationList.map((item, index) => {
-                return (
-                  <StyledLink
-                    href={item.path + `/${campxTenantKey ?? ''}`}
-                    key={index}
-                  >
-                    <StyledMenuItemContainer
-                      key={index}
-                      onClick={() => {
-                        window.location.href = item.path
-                        handleClose()
-                      }}
-                    >
-                      <MenuItem data={item} />
-                    </StyledMenuItemContainer>
-                  </StyledLink>
-                )
-              })}
-            </Box>
-          </>
-        ) : (
-          <StyledNoAppContainer>
-            <AppsOutageIcon sx={{ width: '40px', height: '40px' }} />
-            <Typography variant="subtitle1">
-              No Application have been assigned
-            </Typography>
-          </StyledNoAppContainer>
-        )}
-      </Menu>
-    </>
-  )
-}
-
-export default AppsMenu
-
-const MenuItem = ({ data }) => {
-  return (
-    <StyledMenuItem>
-      <StyledImageBox>
-        <img src={data.icon} style={{ width: '20px', height: '20px' }} />
-      </StyledImageBox>
-      <Box>
-        <Typography variant="h1" sx={{ marginBottom: '7px' }}>
-          {data?.title}
-        </Typography>
-        <StyledDescription>{data?.description}</StyledDescription>
-      </Box>
-    </StyledMenuItem>
-  )
-}
-
-const StyledNoAppContainer = styled(Box)({
-  width: '300px',
-  height: '300px',
-  display: 'flex',
-  alignItems: 'center',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  gap: '10px',
-})
+import { Box, Menu, Typography, styled } from '@mui/material'
+import Cookies from 'js-cookie'
+import { useState } from 'react'
+import { applications } from './applications'
+import { AppsIcon } from './icons'
+import {
+  StyledDescription,
+  StyledIconButton,
+  StyledMenuItem,
+  StyledMenuItemContainer,
+  StyledLink,
+  StyledImageBox,
+} from './styles'
+import { PermissionsStore } from '../../../shared-state'
+import AppsOutageIcon from '@mui/icons-material/AppsOutage'
+export const campxTenantKey = Cookies.get('campx_tenant')
+
+const AppsMenu = () => {
+  const permissionState = PermissionsStore.useState((s) => s)
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const open = Boolean(anchorEl)
+  const applicationList = applications?.filter((item) =>
+    permissionState.applications.includes(item.key),
+  )
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <StyledIconButton onClick={handleClick}>
+        <AppsIcon />
+      </StyledIconButton>
+
+      <Menu
+        transitionDuration={150}
+        elevation={2}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        TransitionProps={{
+          unmountOnExit: false,
+        }}
+        sx={{
+          '& .MuiPaper-root': {
+            left: '0 !important',
+            top: '64px !important',
+            '&>:last-child': {
+              paddingBottom: '0px',
+            },
+          },
+        }}
+      >
+        {applicationList.length != 0 ? (
+          <>
+            <Box sx={{ padding: '0.3rem 1rem' }}>
+              <Typography variant="body2">Switch to</Typography>
+            </Box>
+            <Box>
+              {applicationList.map((item, index) => {
+                return (
+                  <StyledLink
+                    href={item.path + `/${campxTenantKey ?? ''}`}
+                    key={index}
+                  >
+                    <StyledMenuItemContainer
+                      key={index}
+                      onClick={() => {
+                        window.location.href = item.path
+                        handleClose()
+                      }}
+                    >
+                      <MenuItem data={item} />
+                    </StyledMenuItemContainer>
+                  </StyledLink>
+                )
+              })}
+            </Box>
+          </>
+        ) : (
+          <StyledNoAppContainer>
+            <AppsOutageIcon sx={{ width: '40px', height: '40px' }} />
+            <Typography variant="subtitle1">
+              No Application have been assigned
+            </Typography>
+          </StyledNoAppContainer>
+        )}
+      </Menu>
+    </>
+  )
+}
+
+export default AppsMenu
+
+const MenuItem = ({ data }) => {
+  return (
+    <StyledMenuItem>
+      <StyledImageBox>
+        <img src={data.icon} style={{ width: '20px', height: '20px' }} />
+      </StyledImageBox>
+      <Box>
+        <Typography variant="h1" sx={{ marginBottom: '7px' }}>
+          {data?.title}
+        </Typography>
+        <StyledDescription>{data?.description}</StyledDescription>
+      </Box>
+    </StyledMenuItem>
+  )
+}
+
+const StyledNoAppContainer = styled(Box)({
+  width: '300px',
+  height: '300px',
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: '10px',
+})

package/src/components/Layout/Header/HeaderActions/CogWheelMenu.tsx

@@ -1,33 +1,33 @@
-import { SettingsOutlined } from '@mui/icons-material'
-import { IconButton } from '@mui/material'
-import { useHistory } from '../../../../hooks/useRouter'
-import DropDownButton from '../../../DropDownButton/DropDownButton'
-
-const CogWheelMenu = ({ menu }) => {
-  const history = useHistory()
-
-  return (
-    <DropDownButton
-      anchor={({ open }) => (
-        <IconButton color="secondary" onClick={open}>
-          <SettingsOutlined />
-        </IconButton>
-      )}
-      menu={menu?.map((item) => ({
-        label: item?.label,
-        onClick: () => {
-          history.push(item?.path)
-        },
-      }))}
-      menuProps={{
-        PaperProps: { sx: { top: '56px !important' } },
-        transformOrigin: {
-          horizontal: 'center',
-          vertical: 'top',
-        },
-      }}
-    />
-  )
-}
-
-export default CogWheelMenu
+import { SettingsOutlined } from '@mui/icons-material'
+import { IconButton } from '@mui/material'
+import { useHistory } from '../../../../hooks/useRouter'
+import DropDownButton from '../../../DropDownButton/DropDownButton'
+
+const CogWheelMenu = ({ menu }) => {
+  const history = useHistory()
+
+  return (
+    <DropDownButton
+      anchor={({ open }) => (
+        <IconButton color="secondary" onClick={open}>
+          <SettingsOutlined />
+        </IconButton>
+      )}
+      menu={menu?.map((item) => ({
+        label: item?.label,
+        onClick: () => {
+          history.push(item?.path)
+        },
+      }))}
+      menuProps={{
+        PaperProps: { sx: { top: '56px !important' } },
+        transformOrigin: {
+          horizontal: 'center',
+          vertical: 'top',
+        },
+      }}
+    />
+  )
+}
+
+export default CogWheelMenu

package/src/components/Layout/Header/HeaderActions/FreshChatButton.tsx

@@ -1,61 +1,61 @@
-/* eslint-disable no-console */
-import { useState } from 'react'
-import { UserStore } from '../../../../shared-state'
-import { chatWithUs } from '../assets'
-import { Box, styled } from '@mui/material'
-
-export default function FreshChatButton() {
-  const _window = window as any
-  const { user } = UserStore.useState()
-
-  var openWidget = function () {
-    const el = document.getElementById('fc_frame')
-    if (el) {
-      el.style.visibility = 'visible'
-    }
-    _window.fcWidget.open()
-    initEvents()
-  }
-  var initEvents = function () {
-    const el = document.getElementById('custom_fc_button')
-    _window.fcWidget.on('widget:opened', function (resp) {
-      if (el) {
-        el.style.visibility = 'hidden'
-      }
-    })
-    _window.fcWidget.on('widget:closed', function (resp) {
-      if (el) {
-        el.style.visibility = 'visible'
-      }
-    })
-  }
-
-  if (!user) return null
-  return (
-    <Box
-      id="custom_fc_button"
-      sx={{
-        position: 'fixed',
-        right: 0,
-        bottom: '18px',
-        cursor: 'pointer',
-        '@media print': {
-          display: 'none',
-        },
-      }}
-    >
-      <a id="open_fc_widget" onClick={openWidget} style={{ cursor: 'pointer' }}>
-        <StyledImg src={chatWithUs} />
-      </a>
-    </Box>
-  )
-}
-
-const StyledImg = styled('img')(({ theme }) => ({
-  width: '35px',
-  height: 'auto',
-  '&:hover': {
-    width: '50px',
-  },
-  transition: 'width 0.3s',
-}))
+/* eslint-disable no-console */
+import { useState } from 'react'
+import { UserStore } from '../../../../shared-state'
+import { chatWithUs } from '../assets'
+import { Box, styled } from '@mui/material'
+
+export default function FreshChatButton() {
+  const _window = window as any
+  const { user } = UserStore.useState()
+
+  var openWidget = function () {
+    const el = document.getElementById('fc_frame')
+    if (el) {
+      el.style.visibility = 'visible'
+    }
+    _window.fcWidget.open()
+    initEvents()
+  }
+  var initEvents = function () {
+    const el = document.getElementById('custom_fc_button')
+    _window.fcWidget.on('widget:opened', function (resp) {
+      if (el) {
+        el.style.visibility = 'hidden'
+      }
+    })
+    _window.fcWidget.on('widget:closed', function (resp) {
+      if (el) {
+        el.style.visibility = 'visible'
+      }
+    })
+  }
+
+  if (!user) return null
+  return (
+    <Box
+      id="custom_fc_button"
+      sx={{
+        position: 'fixed',
+        right: 0,
+        bottom: '18px',
+        cursor: 'pointer',
+        '@media print': {
+          display: 'none',
+        },
+      }}
+    >
+      <a id="open_fc_widget" onClick={openWidget} style={{ cursor: 'pointer' }}>
+        <StyledImg src={chatWithUs} />
+      </a>
+    </Box>
+  )
+}
+
+const StyledImg = styled('img')(({ theme }) => ({
+  width: '35px',
+  height: 'auto',
+  '&:hover': {
+    width: '50px',
+  },
+  transition: 'width 0.3s',
+}))

package/src/components/Layout/Header/HeaderActions/FreshDeskHelpButton.tsx

@@ -1,53 +1,53 @@
-import { HelpOutline } from '@mui/icons-material'
-import { Button } from '@mui/material'
-import { UserStore } from '../../../../shared-state'
-
-export default function FreshDeskHelpButton() {
-  const { user } = UserStore.useState()
-
-  // const handleOpenFreshDeskWidget = () => {
-  //   try {
-  //     ;(window as any)?.openFreshDeskWidget()
-  //   } catch (error) {
-  //     // eslint-disable-next-line no-console
-  //     console.error('Error launching Freshdesk')
-  //   }
-  // }
-
-  const _window = window as any
-
-  var openWidget = function () {
-    const el = document.getElementById('fc_frame')
-    if (el) {
-      el.style.visibility = 'visible'
-    }
-    _window.fcWidget.open()
-    initEvents()
-  }
-  var initEvents = function () {
-    const el = document.getElementById('custom_fc_button')
-    _window.fcWidget.on('widget:opened', function (resp) {
-      if (el) {
-        el.style.visibility = 'hidden'
-      }
-    })
-    _window.fcWidget.on('widget:closed', function (resp) {
-      if (el) {
-        el.style.visibility = 'visible'
-      }
-    })
-  }
-
-  if (!user) return null
-  return (
-    <Button
-      variant="text"
-      color="secondary"
-      onClick={openWidget}
-      startIcon={<HelpOutline />}
-      sx={{ padding: '20px' }}
-    >
-      Help
-    </Button>
-  )
-}
+import { HelpOutline } from '@mui/icons-material'
+import { Button } from '@mui/material'
+import { UserStore } from '../../../../shared-state'
+
+export default function FreshDeskHelpButton() {
+  const { user } = UserStore.useState()
+
+  // const handleOpenFreshDeskWidget = () => {
+  //   try {
+  //     ;(window as any)?.openFreshDeskWidget()
+  //   } catch (error) {
+  //     // eslint-disable-next-line no-console
+  //     console.error('Error launching Freshdesk')
+  //   }
+  // }
+
+  const _window = window as any
+
+  var openWidget = function () {
+    const el = document.getElementById('fc_frame')
+    if (el) {
+      el.style.visibility = 'visible'
+    }
+    _window.fcWidget.open()
+    initEvents()
+  }
+  var initEvents = function () {
+    const el = document.getElementById('custom_fc_button')
+    _window.fcWidget.on('widget:opened', function (resp) {
+      if (el) {
+        el.style.visibility = 'hidden'
+      }
+    })
+    _window.fcWidget.on('widget:closed', function (resp) {
+      if (el) {
+        el.style.visibility = 'visible'
+      }
+    })
+  }
+
+  if (!user) return null
+  return (
+    <Button
+      variant="text"
+      color="secondary"
+      onClick={openWidget}
+      startIcon={<HelpOutline />}
+      sx={{ padding: '20px' }}
+    >
+      Help
+    </Button>
+  )
+}

package/src/components/Layout/Header/HeaderActions/HeaderActions.tsx

@@ -1,20 +1,20 @@
-import { Box } from '@mui/material'
-import UserBox from './UserBox'
-import CogWheelMenu from './CogWheelMenu'
-import FreshDeskHelpButton from './FreshDeskHelpButton'
-import SchoolSwitch from '../SchoolSwitch/SchoolSwitch'
-
-export default function HeaderActions({
-  cogWheelMenu,
-  fullName,
-  userBoxActions,
-}) {
-  return (
-    <>
-      {/* <SchoolSwitch /> */}
-      <FreshDeskHelpButton />
-      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-      <UserBox fullName={fullName} actions={userBoxActions} />
-    </>
-  )
-}
+import { Box } from '@mui/material'
+import UserBox from './UserBox'
+import CogWheelMenu from './CogWheelMenu'
+import FreshDeskHelpButton from './FreshDeskHelpButton'
+import SchoolSwitch from '../SchoolSwitch/SchoolSwitch'
+
+export default function HeaderActions({
+  cogWheelMenu,
+  fullName,
+  userBoxActions,
+}) {
+  return (
+    <>
+      {/* <SchoolSwitch /> */}
+      <FreshDeskHelpButton />
+      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+      <UserBox fullName={fullName} actions={userBoxActions} />
+    </>
+  )
+}