@campxdev/shared 0.5.19 → 0.5.21

package/src/components/Layout/ChangePassword.tsx

@@ -1,49 +1,49 @@
-import { Button, Stack } from '@mui/material'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-toastify'
-import { FormTextField } from '..'
-import axios, { axiosErrorToast } from '../../config/axios'
-
-export default function ChangePassword({ close }) {
-  const { handleSubmit, control } = useForm()
-
-  const onSubmit = async (formData) => {
-    try {
-      await axios.post('/auth/change-password', formData)
-      toast.success('Password Changed Successfully')
-    } catch (error) {
-      axiosErrorToast(error)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={2}>
-        <FormTextField
-          label="Old Password"
-          control={control}
-          name="oldPassword"
-          required
-        />
-        <FormTextField
-          label="New Password"
-          control={control}
-          name="newPassword"
-          required
-        />
-        <FormTextField
-          label="Confirm Password"
-          control={control}
-          name="password"
-          required
-        />
-        <Stack>
-          <Button variant="outlined" onClick={close}>
-            Cancel
-          </Button>
-          <Button type="submit">Submit</Button>
-        </Stack>
-      </Stack>
-    </form>
-  )
-}
+import { Button, Stack } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { FormTextField } from '..'
+import axios, { axiosErrorToast } from '../../config/axios'
+
+export default function ChangePassword({ close }) {
+  const { handleSubmit, control } = useForm()
+
+  const onSubmit = async (formData) => {
+    try {
+      await axios.post('/auth/change-password', formData)
+      toast.success('Password Changed Successfully')
+    } catch (error) {
+      axiosErrorToast(error)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2}>
+        <FormTextField
+          label="Old Password"
+          control={control}
+          name="oldPassword"
+          required
+        />
+        <FormTextField
+          label="New Password"
+          control={control}
+          name="newPassword"
+          required
+        />
+        <FormTextField
+          label="Confirm Password"
+          control={control}
+          name="password"
+          required
+        />
+        <Stack>
+          <Button variant="outlined" onClick={close}>
+            Cancel
+          </Button>
+          <Button type="submit">Submit</Button>
+        </Stack>
+      </Stack>
+    </form>
+  )
+}

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

@@ -1,113 +1,113 @@
-import {Box, styled, Typography} from '@mui/material'
-import {ReactNode} from 'react'
-import {Link} from 'react-router-dom'
-import {isDevelopment} from '../../../constants/isDevelopment'
-import {applications} from './applications'
-import AppsMenu from './AppsMenu'
-import {collegex, enrollx, examx, payx, peoplex} from './assets'
-import CogWheelMenu from './CogWheelMenu'
-import FreshDeskHelpButton from './FreshDeskHelpButton'
-import Notification from './Notification'
-import {StyledHeader, StyledImageWrapper} from './styles'
-import UserBox from './UserBox'
-
-const StyledLogosWrapper = styled(Box)(() => ({
-	display: 'flex',
-	alignItems: 'center',
-	gap: '10px',
-	padding: '10px',
-	transition: 'background ease 0.3s',
-	borderRadius: '5px',
-	'&:hover': {
-		background: 'rgba(0, 0, 0, 0.05)',
-	},
-}))
-
-const StyledLink = styled(Link)(() => ({
-	textDecoration: 'none',
-}))
-
-const imageMap = {
-	ums: collegex,
-	enroll: enrollx,
-	exams: examx,
-	payments: payx,
-	peoplex: peoplex,
-	campx: collegex,
-}
-
-interface AppHeaderProps {
-	clientLogo: string
-	username: string
-	profileIcon: string
-	permissions?: any
-	userBoxActions: {
-		label: ReactNode
-		icon?: ReactNode
-		onClick: any
-	}[]
-	cogWheelMenu?: {label: string; path: string}[]
-}
-
-export default function AppHeader({
-	clientLogo = imageMap.campx,
-	username,
-	profileIcon,
-	permissions,
-	userBoxActions = [],
-	cogWheelMenu = [],
-}: AppHeaderProps) {
-	return (
-		<StyledHeader>
-			<Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
-				<AppsMenu />
-				<AppLogo clientLogo={clientLogo} />
-			</Box>
-			<Box className='actions'>
-				<FreshDeskHelpButton />
-				{/* <Notification /> */}
-				{cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-				<UserBox
-					username={username}
-					profileIcon={profileIcon}
-					actions={userBoxActions}
-				/>
-			</Box>
-		</StyledHeader>
-	)
-}
-
-const AppLogo = ({clientLogo}) => {
-	const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
-	const currentApp =
-		applications.find((item) => item.key === originSubdomain)?.key ?? 'campx'
-
-	return (
-		<StyledLink 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>
-		</StyledLink>
-	)
-}
+import {Box, styled, Typography} from '@mui/material'
+import {ReactNode} from 'react'
+import {Link} from 'react-router-dom'
+import {isDevelopment} from '../../../constants/isDevelopment'
+import {applications} from './applications'
+import AppsMenu from './AppsMenu'
+import {collegex, enrollx, examx, payx, peoplex} from './assets'
+import CogWheelMenu from './CogWheelMenu'
+import FreshDeskHelpButton from './FreshDeskHelpButton'
+import Notification from './Notification'
+import {StyledHeader, StyledImageWrapper} from './styles'
+import UserBox from './UserBox'
+
+const StyledLogosWrapper = styled(Box)(() => ({
+	display: 'flex',
+	alignItems: 'center',
+	gap: '10px',
+	padding: '10px',
+	transition: 'background ease 0.3s',
+	borderRadius: '5px',
+	'&:hover': {
+		background: 'rgba(0, 0, 0, 0.05)',
+	},
+}))
+
+const StyledLink = styled(Link)(() => ({
+	textDecoration: 'none',
+}))
+
+const imageMap = {
+	ums: collegex,
+	enroll: enrollx,
+	exams: examx,
+	payments: payx,
+	peoplex: peoplex,
+	campx: collegex,
+}
+
+interface AppHeaderProps {
+	clientLogo: string
+	username: string
+	profileIcon: string
+	permissions?: any
+	userBoxActions: {
+		label: ReactNode
+		icon?: ReactNode
+		onClick: any
+	}[]
+	cogWheelMenu?: {label: string; path: string}[]
+}
+
+export default function AppHeader({
+	clientLogo = imageMap.campx,
+	username,
+	profileIcon,
+	permissions,
+	userBoxActions = [],
+	cogWheelMenu = [],
+}: AppHeaderProps) {
+	return (
+		<StyledHeader>
+			<Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
+				<AppsMenu />
+				<AppLogo clientLogo={clientLogo} />
+			</Box>
+			<Box className='actions'>
+				<FreshDeskHelpButton />
+				{/* <Notification /> */}
+				{cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+				<UserBox
+					username={username}
+					profileIcon={profileIcon}
+					actions={userBoxActions}
+				/>
+			</Box>
+		</StyledHeader>
+	)
+}
+
+const AppLogo = ({clientLogo}) => {
+	const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
+	const currentApp =
+		applications.find((item) => item.key === originSubdomain)?.key ?? 'campx'
+
+	return (
+		<StyledLink 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>
+		</StyledLink>
+	)
+}

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

@@ -1,92 +1,92 @@
-import {Box, Menu, Typography} from '@mui/material'
-import {useState} from 'react'
-import {applications} from './applications'
-import {AppsIcon} from './icons'
-import {
-	StyledDescription,
-	StyledIconButton,
-	StyledMenuItem,
-	StyledMenuItemContainer,
-	StyledLink,
-} from './styles'
-
-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={3}
-				id='basic-menu'
-				anchorEl={anchorEl}
-				open={open}
-				onClose={handleClose}
-				anchorOrigin={{
-					vertical: 'bottom',
-					horizontal: 'left',
-				}}
-				transformOrigin={{
-					vertical: 'top',
-					horizontal: 'left',
-				}}
-				sx={{
-					'& .MuiPaper-root': {
-						left: '0 !important',
-						top: '64px !important',
-					},
-				}}
-			>
-				<Box sx={{padding: '0.3rem 1rem'}}>
-					<Typography variant='body2'>Switch to</Typography>
-				</Box>
-				<Box>
-					{applications.map((item, index) => (
-						<StyledLink href={item.path}>
-							<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>
-			<Box>
-				<img src={data.icon} style={{width: '32px', height: '32px'}} />
-			</Box>
-			<Box>
-				<Typography variant='h1' sx={{marginBottom: '7px'}}>
-					{data?.title}
-				</Typography>
-				<StyledDescription>{data?.description}</StyledDescription>
-			</Box>
-		</StyledMenuItem>
-	)
-}
+import {Box, Menu, Typography} from '@mui/material'
+import {useState} from 'react'
+import {applications} from './applications'
+import {AppsIcon} from './icons'
+import {
+	StyledDescription,
+	StyledIconButton,
+	StyledMenuItem,
+	StyledMenuItemContainer,
+	StyledLink,
+} from './styles'
+
+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={3}
+				id='basic-menu'
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				anchorOrigin={{
+					vertical: 'bottom',
+					horizontal: 'left',
+				}}
+				transformOrigin={{
+					vertical: 'top',
+					horizontal: 'left',
+				}}
+				sx={{
+					'& .MuiPaper-root': {
+						left: '0 !important',
+						top: '64px !important',
+					},
+				}}
+			>
+				<Box sx={{padding: '0.3rem 1rem'}}>
+					<Typography variant='body2'>Switch to</Typography>
+				</Box>
+				<Box>
+					{applications.map((item, index) => (
+						<StyledLink href={item.path}>
+							<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>
+			<Box>
+				<img src={data.icon} style={{width: '32px', height: '32px'}} />
+			</Box>
+			<Box>
+				<Typography variant='h1' sx={{marginBottom: '7px'}}>
+					{data?.title}
+				</Typography>
+				<StyledDescription>{data?.description}</StyledDescription>
+			</Box>
+		</StyledMenuItem>
+	)
+}

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

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

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

@@ -1,19 +1,19 @@
-import { HelpOutline } from '@mui/icons-material'
-import { Button, IconButton } 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 (
-    <IconButton color="secondary" onClick={handleOpenFreshDeskWidget}>
-      <HelpOutline />
-    </IconButton>
-  )
-}
+import { HelpOutline } from '@mui/icons-material'
+import { Button, IconButton } 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 (
+    <IconButton color="secondary" onClick={handleOpenFreshDeskWidget}>
+      <HelpOutline />
+    </IconButton>
+  )
+}

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