@campxdev/shared 1.10.40 → 1.10.42

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

@@ -1,109 +1,109 @@
-import { Box, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-import { isDevelopment } from '../../../constants/isDevelopment'
-import AppsMenu from './AppsMenu'
-import { applications } from './applications'
-import {
-  collegex,
-  commutex,
-  enrollx,
-  examx,
-  hostelx,
-  payx,
-  peoplex,
-} from './assets'
-
-import HeaderActions from './HeaderActions/HeaderActions'
-import {
-  StyledHeader,
-  StyledImageWrapper,
-  StyledLogosWrapper,
-  StyledRouterLink,
-} from './styles'
-
-const imageMap = {
-  ums: collegex,
-  enroll: enrollx,
-  exams: examx,
-  payments: payx,
-  people: peoplex,
-  campx: collegex,
-  commute: commutex,
-  hostel: hostelx,
-}
-
-interface AppHeaderProps {
-  clientLogo: string
-  fullName: string
-  userBoxActions: {
-    label: ReactNode
-    icon?: ReactNode
-    onClick: any
-  }[]
-  customHeaderActions?: ReactNode
-  cogWheelMenu?: { label: string; path: string }[]
-}
-
-export default function AppHeader({
-  clientLogo = imageMap.campx,
-  fullName,
-  userBoxActions = [],
-  cogWheelMenu = [],
-  customHeaderActions,
-}: AppHeaderProps) {
-  return (
-    <StyledHeader>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <AppsMenu />
-        <AppLogo clientLogo={clientLogo} />
-      </Box>
-      <Box className="actions">
-        {customHeaderActions ? (
-          customHeaderActions
-        ) : (
-          <HeaderActions
-            cogWheelMenu={cogWheelMenu}
-            fullName={fullName}
-            userBoxActions={userBoxActions}
-          />
-        )}
-      </Box>
-    </StyledHeader>
-  )
-}
-
-const AppLogo = ({ clientLogo }) => {
-  const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
-  const currentApp =
-    applications.find((item) => item.domainName === originSubdomain)
-      ?.domainName ?? 'campx'
-
-  return (
-    <StyledRouterLink to={'/'}>
-      <StyledLogosWrapper>
-        <StyledImageWrapper>
-          <img src={imageMap[currentApp]} />
-        </StyledImageWrapper>
-        <Box
-          sx={{
-            height: '26px',
-            width: '2px',
-            background: 'gray',
-          }}
-        ></Box>
-        <StyledImageWrapper>
-          {isDevelopment ? (
-            <Typography variant="h1">Developer</Typography>
-          ) : (
-            <img
-              src={clientLogo}
-              onError={(e: any) => {
-                e.target.src = imageMap.campx
-              }}
-            />
-          )}
-        </StyledImageWrapper>
-      </StyledLogosWrapper>
-    </StyledRouterLink>
-  )
-}
+import { Box, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+import { isDevelopment } from '../../../constants/isDevelopment'
+import AppsMenu from './AppsMenu'
+import { applications } from './applications'
+import {
+  collegex,
+  commutex,
+  enrollx,
+  examx,
+  hostelx,
+  payx,
+  peoplex,
+} from './assets'
+
+import HeaderActions from './HeaderActions/HeaderActions'
+import {
+  StyledHeader,
+  StyledImageWrapper,
+  StyledLogosWrapper,
+  StyledRouterLink,
+} from './styles'
+
+const imageMap = {
+  ums: collegex,
+  enroll: enrollx,
+  exams: examx,
+  payments: payx,
+  people: peoplex,
+  campx: collegex,
+  commute: commutex,
+  hostel: hostelx,
+}
+
+interface AppHeaderProps {
+  clientLogo: string
+  fullName: string
+  userBoxActions: {
+    label: ReactNode
+    icon?: ReactNode
+    onClick: any
+  }[]
+  customHeaderActions?: ReactNode
+  cogWheelMenu?: { label: string; path: string }[]
+}
+
+export default function AppHeader({
+  clientLogo = imageMap.campx,
+  fullName,
+  userBoxActions = [],
+  cogWheelMenu = [],
+  customHeaderActions,
+}: AppHeaderProps) {
+  return (
+    <StyledHeader>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <AppsMenu />
+        <AppLogo clientLogo={clientLogo} />
+      </Box>
+      <Box className="actions">
+        {customHeaderActions ? (
+          customHeaderActions
+        ) : (
+          <HeaderActions
+            cogWheelMenu={cogWheelMenu}
+            fullName={fullName}
+            userBoxActions={userBoxActions}
+          />
+        )}
+      </Box>
+    </StyledHeader>
+  )
+}
+
+const AppLogo = ({ clientLogo }) => {
+  const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
+  const currentApp =
+    applications.find((item) => item.domainName === originSubdomain)
+      ?.domainName ?? 'campx'
+
+  return (
+    <StyledRouterLink to={'/'}>
+      <StyledLogosWrapper>
+        <StyledImageWrapper>
+          <img src={imageMap[currentApp]} />
+        </StyledImageWrapper>
+        <Box
+          sx={{
+            height: '26px',
+            width: '2px',
+            background: 'gray',
+          }}
+        ></Box>
+        <StyledImageWrapper>
+          {isDevelopment ? (
+            <Typography variant="h1">Developer</Typography>
+          ) : (
+            <img
+              src={clientLogo}
+              onError={(e: any) => {
+                e.target.src = imageMap.campx
+              }}
+            />
+          )}
+        </StyledImageWrapper>
+      </StyledLogosWrapper>
+    </StyledRouterLink>
+  )
+}

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

@@ -1,132 +1,132 @@
-import AppsOutageIcon from '@mui/icons-material/AppsOutage'
-import { Box, Menu, Typography, styled } from '@mui/material'
-import { useState } from 'react'
-import { campxTenantKey, instituitionKey } from '../../../contexts/Providers'
-import { PermissionsStore } from '../../../shared-state'
-import { applications } from './applications'
-import { AppsIcon } from './icons'
-import {
-  StyledDescription,
-  StyledIconButton,
-  StyledImageBox,
-  StyledLink,
-  StyledMenuItem,
-  StyledMenuItemContainer,
-} from './styles'
-
-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}/${instituitionKey}`}
-                    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 AppsOutageIcon from '@mui/icons-material/AppsOutage'
+import { Box, Menu, Typography, styled } from '@mui/material'
+import { useState } from 'react'
+import { campxTenantKey, instituitionKey } from '../../../contexts/Providers'
+import { PermissionsStore } from '../../../shared-state'
+import { applications } from './applications'
+import { AppsIcon } from './icons'
+import {
+  StyledDescription,
+  StyledIconButton,
+  StyledImageBox,
+  StyledLink,
+  StyledMenuItem,
+  StyledMenuItemContainer,
+} from './styles'
+
+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}/${instituitionKey}`}
+                    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',
+}))