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

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

@@ -1,105 +1,133 @@
-import { Box, Menu, Typography } 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'
-
-export const campxTenantKey = Cookies.get('campx_tenant')
-
-const AppsMenu = () => {
-  const [anchorEl, setAnchorEl] = useState<any>(null)
-  const open = Boolean(anchorEl)
-
-  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',
-            },
-          },
-        }}
-      >
-        <Box sx={{ padding: '0.3rem 1rem' }}>
-          <Typography variant="body2">Switch to</Typography>
-        </Box>
-        <Box>
-          {applications.map((item, index) => (
-            <StyledLink
-              href={item.path + `/${campxTenantKey ?? ''}`}
-              key={index}
-            >
-              <StyledMenuItemContainer
-                key={index}
-                onClick={() => {
-                  window.location.href = item.path
-                  handleClose()
-                }}
-              >
-                <MenuItem data={item} />
-              </StyledMenuItemContainer>
-            </StyledLink>
-          ))}
-        </Box>
-      </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>
-  )
-}
+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

@@ -0,0 +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',
+}))

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

@@ -1,24 +1,53 @@
-import { HelpOutline } from '@mui/icons-material'
-import { Button } from '@mui/material'
-
-export default function FreshDeskHelpButton() {
-  const handleOpenFreshDeskWidget = () => {
-    try {
-      ;(window as any)?.openFreshDeskWidget()
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error launching Freshdesk')
-    }
-  }
-  return (
-    <Button
-      variant="text"
-      color="secondary"
-      startIcon={<HelpOutline />}
-      onClick={handleOpenFreshDeskWidget}
-      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,18 +1,20 @@
-import { Box } from '@mui/material'
-import UserBox from './UserBox'
-import CogWheelMenu from './CogWheelMenu'
-import FreshDeskHelpButton from './FreshDeskHelpButton'
-
-export default function HeaderActions({
-  cogWheelMenu,
-  fullName,
-  userBoxActions,
-}) {
-  return (
-    <>
-      <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} />
+    </>
+  )
+}

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

@@ -1,56 +1,56 @@
-import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
-import logout from '../../../../utils/logout'
-import ChangePassword from '../../../ChangePassword'
-import DropDownButton from '../../../DropDownButton/DropDownButton'
-import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
-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[] | []
-}) {
-  return (
-    <DropDownButton
-      anchor={({ open }) => (
-        <StyledAvatar onClick={open}>
-          {getStartingLetters(fullName)}
-        </StyledAvatar>
-      )}
-      menu={
-        customActions?.length
-          ? customActions
-          : [
-              ...actions,
-              {
-                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 } from '@mui/icons-material'
+import logout from '../../../../utils/logout'
+import ChangePassword from '../../../ChangePassword'
+import DropDownButton from '../../../DropDownButton/DropDownButton'
+import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
+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[] | []
+}) {
+  return (
+    <DropDownButton
+      anchor={({ open }) => (
+        <StyledAvatar onClick={open}>
+          {getStartingLetters(fullName)}
+        </StyledAvatar>
+      )}
+      menu={
+        customActions?.length
+          ? customActions
+          : [
+              ...actions,
+              {
+                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/SchoolSwitch/SchoolSwitch.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import { FormSingleSelect } from '../../../HookForm'
+import { SingleSelect } from '../../../Input'
+
+export default function SchoolSwitch() {
+  const [state, setStatr] = useState()
+
+  return (
+    <SingleSelect
+      containerProps={{
+        sx: {
+          width: '200px',
+        },
+      }}
+      options={[
+        {
+          label: 'School 1',
+          value: 'school1',
+        },
+        {
+          label: 'School 2',
+          value: 'school2',
+        },
+        {
+          label: 'School 3',
+          value: 'school3',
+        },
+      ]}
+      value={state}
+      onChange={(e) => setStatr(e.target.value)}
+    />
+  )
+}