@campxdev/shared 1.10.37 → 1.10.38

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,29 +1,29 @@
-import { Box, styled } from '@mui/material'
-import UserBox from './UserBox'
-import CogWheelMenu from './CogWheelMenu'
-import FreshDeskHelpButton from './FreshDeskHelpButton'
-import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
-import SearchButton from '../Search/SearchButton'
-import { NotificationsNoneOutlined } from '@mui/icons-material'
-import { useEffect } from 'react'
-
-const StyledBeamerBox = styled(Box)(() => ({
-  width: '60px',
-}))
-
-export default function HeaderActions({
-  cogWheelMenu,
-  fullName,
-  userBoxActions,
-}) {
-  return (
-    <>
-      <InstitutionsDropDown />
-      {/* <SearchButton /> */}
-      {/* <FreshDeskHelpButton /> */}
-      <StyledBeamerBox></StyledBeamerBox>
-      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-      <UserBox fullName={fullName} actions={userBoxActions} />
-    </>
-  )
-}
+import { Box, styled } from '@mui/material'
+import UserBox from './UserBox'
+import CogWheelMenu from './CogWheelMenu'
+import FreshDeskHelpButton from './FreshDeskHelpButton'
+import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
+import SearchButton from '../Search/SearchButton'
+import { NotificationsNoneOutlined } from '@mui/icons-material'
+import { useEffect } from 'react'
+
+const StyledBeamerBox = styled(Box)(() => ({
+  width: '60px',
+}))
+
+export default function HeaderActions({
+  cogWheelMenu,
+  fullName,
+  userBoxActions,
+}) {
+  return (
+    <>
+      <InstitutionsDropDown />
+      {/* <SearchButton /> */}
+      {/* <FreshDeskHelpButton /> */}
+      <StyledBeamerBox></StyledBeamerBox>
+      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+      <UserBox fullName={fullName} actions={userBoxActions} />
+    </>
+  )
+}

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

@@ -1,74 +1,74 @@
-import { ExitToAppOutlined, HttpsOutlined, Person } from '@mui/icons-material'
-import { useNavigate } from 'react-router-dom'
-import logout from '../../../../utils/logout'
-import ChangePassword from '../../../ChangePassword'
-import DropDownButton from '../../../DropDownButton/DropDownButton'
-import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
-import MyProfile from '../../../MyProfile/MyProfile'
-import { StyledAvatar } from '../styles'
-
-const getStartingLetters = (text: string) => {
-  if (!text) return ''
-  return text
-    .split(' ')
-    ?.map((w) => w[0])
-    ?.join('')
-}
-
-export default function UserBox({
-  fullName,
-  actions,
-  customActions = [],
-}: {
-  fullName: string
-  actions: IMenuItemProps[] | []
-  customActions?: IMenuItemProps[] | []
-}) {
-  const navigate = useNavigate()
-  return (
-    <DropDownButton
-      anchor={({ open }) => (
-        <StyledAvatar onClick={open}>
-          {getStartingLetters(fullName)}
-        </StyledAvatar>
-      )}
-      menu={
-        customActions?.length
-          ? customActions
-          : [
-              ...actions,
-              {
-                label: 'My Profile',
-                actionType: 'dialog',
-                icon: <Person />,
-                content: ({ close }) => <MyProfile close={close} />,
-                dialogProps: {
-                  maxWidth: 'xl',
-                  PaperProps: {
-                    sx: {
-                      padding: 0,
-                    },
-                  },
-                },
-              },
-
-              {
-                label: 'Change Password',
-                actionType: 'dialog',
-                icon: <HttpsOutlined />,
-                content: ({ close }) => <ChangePassword close={close} />,
-                contentTitle: 'Change Password',
-              },
-              {
-                label: 'Logout',
-                icon: <ExitToAppOutlined />,
-                onClick: logout,
-              },
-            ]
-      }
-      menuProps={{
-        PaperProps: { sx: { top: '56px !important' } },
-      }}
-    />
-  )
-}
+import { ExitToAppOutlined, HttpsOutlined, Person } from '@mui/icons-material'
+import { useNavigate } from 'react-router-dom'
+import logout from '../../../../utils/logout'
+import ChangePassword from '../../../ChangePassword'
+import DropDownButton from '../../../DropDownButton/DropDownButton'
+import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
+import MyProfile from '../../../MyProfile/MyProfile'
+import { StyledAvatar } from '../styles'
+
+const getStartingLetters = (text: string) => {
+  if (!text) return ''
+  return text
+    .split(' ')
+    ?.map((w) => w[0])
+    ?.join('')
+}
+
+export default function UserBox({
+  fullName,
+  actions,
+  customActions = [],
+}: {
+  fullName: string
+  actions: IMenuItemProps[] | []
+  customActions?: IMenuItemProps[] | []
+}) {
+  const navigate = useNavigate()
+  return (
+    <DropDownButton
+      anchor={({ open }) => (
+        <StyledAvatar onClick={open}>
+          {getStartingLetters(fullName)}
+        </StyledAvatar>
+      )}
+      menu={
+        customActions?.length
+          ? customActions
+          : [
+              ...actions,
+              {
+                label: 'My Profile',
+                actionType: 'dialog',
+                icon: <Person />,
+                content: ({ close }) => <MyProfile close={close} />,
+                dialogProps: {
+                  maxWidth: 'xl',
+                  PaperProps: {
+                    sx: {
+                      padding: 0,
+                    },
+                  },
+                },
+              },
+
+              {
+                label: 'Change Password',
+                actionType: 'dialog',
+                icon: <HttpsOutlined />,
+                content: ({ close }) => <ChangePassword close={close} />,
+                contentTitle: 'Change Password',
+              },
+              {
+                label: 'Logout',
+                icon: <ExitToAppOutlined />,
+                onClick: logout,
+              },
+            ]
+      }
+      menuProps={{
+        PaperProps: { sx: { top: '56px !important' } },
+      }}
+    />
+  )
+}

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

@@ -1,13 +1,13 @@
-import { IconButton } from '@mui/material'
-import { NotificationIcon } from './icons'
-
-function Notification() {
-  return (
-    <>
-      <IconButton>
-        <NotificationIcon />
-      </IconButton>
-    </>
-  )
-}
-export default Notification
+import { IconButton } from '@mui/material'
+import { NotificationIcon } from './icons'
+
+function Notification() {
+  return (
+    <>
+      <IconButton>
+        <NotificationIcon />
+      </IconButton>
+    </>
+  )
+}
+export default Notification

package/src/components/Layout/Header/Search/SearchButton.tsx

@@ -1,69 +1,69 @@
-import { Box, Button, Typography, alpha, styled } from '@mui/material'
-import { useEffect, useState } from 'react'
-import { CustomDialog } from '../../../ModalButtons/DialogButton'
-import SearchDialog from './SearchDialog'
-import { Search } from '@mui/icons-material'
-
-const StyledSearchBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: '10px',
-  border: theme.borders.grayLight,
-  borderRadius: '6px',
-  height: '40px',
-  padding: '0 14px',
-  alignItems: 'center',
-  cursor: 'pointer',
-  '&:hover': { backgroundColor: theme.palette.secondary.light },
-  '& .MuiTypography-paragraph': {
-    fontWeight: '500',
-  },
-  '& .MuiSvgIcon-root': {
-    fill: alpha(theme.palette.secondary.main, 0.4),
-  },
-}))
-
-export default function SearchButton() {
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    document.addEventListener('keydown', (e) => {
-      if (e.ctrlKey && e.key === 'k') {
-        e.preventDefault()
-        setOpen(true)
-      }
-    })
-    return () => {
-      document.removeEventListener('keydown', () => {})
-    }
-  }, [])
-
-  return (
-    <div>
-      <StyledSearchBox
-        onClick={() => {
-          setOpen(true)
-        }}
-      >
-        <Search />
-        <Typography paragraph>Search</Typography>
-        <Typography variant="subtitle2">(Ctrl+k)</Typography>
-      </StyledSearchBox>
-      <CustomDialog
-        content={() => <SearchDialog />}
-        onClose={() => {
-          setOpen(false)
-        }}
-        open={open}
-        dialogProps={{
-          sx: {
-            '& .MuiDialog-container': {
-              alignItems: 'baseline',
-              paddingTop: '80px',
-            },
-          },
-          maxWidth: 'md',
-        }}
-      />
-    </div>
-  )
-}
+import { Box, Button, Typography, alpha, styled } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { CustomDialog } from '../../../ModalButtons/DialogButton'
+import SearchDialog from './SearchDialog'
+import { Search } from '@mui/icons-material'
+
+const StyledSearchBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: '10px',
+  border: theme.borders.grayLight,
+  borderRadius: '6px',
+  height: '40px',
+  padding: '0 14px',
+  alignItems: 'center',
+  cursor: 'pointer',
+  '&:hover': { backgroundColor: theme.palette.secondary.light },
+  '& .MuiTypography-paragraph': {
+    fontWeight: '500',
+  },
+  '& .MuiSvgIcon-root': {
+    fill: alpha(theme.palette.secondary.main, 0.4),
+  },
+}))
+
+export default function SearchButton() {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    document.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.key === 'k') {
+        e.preventDefault()
+        setOpen(true)
+      }
+    })
+    return () => {
+      document.removeEventListener('keydown', () => {})
+    }
+  }, [])
+
+  return (
+    <div>
+      <StyledSearchBox
+        onClick={() => {
+          setOpen(true)
+        }}
+      >
+        <Search />
+        <Typography paragraph>Search</Typography>
+        <Typography variant="subtitle2">(Ctrl+k)</Typography>
+      </StyledSearchBox>
+      <CustomDialog
+        content={() => <SearchDialog />}
+        onClose={() => {
+          setOpen(false)
+        }}
+        open={open}
+        dialogProps={{
+          sx: {
+            '& .MuiDialog-container': {
+              alignItems: 'baseline',
+              paddingTop: '80px',
+            },
+          },
+          maxWidth: 'md',
+        }}
+      />
+    </div>
+  )
+}