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

package/src/components/HookForm/MultiSelect.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import { MultiSelect } from '../Input'
 import { IOption } from '../Input/types'
+import { AutocompleteInputChangeReason } from '@mui/material'
 
 interface MultiSelectProps {
   control: any
@@ -10,6 +11,11 @@ interface MultiSelectProps {
   options: IOption[]
   placeholder?: string
   loading?: boolean
+  onInputChange?: (
+    event: React.SyntheticEvent,
+    value: string,
+    reason: AutocompleteInputChangeReason,
+  ) => void
   required?: boolean
   value?: IOption[] | IOption
   onChange?: (value: IOption[] | IOption) => void
@@ -24,6 +30,7 @@ export default function FormMultiSelect({
   loading,
   required,
   multiple = true,
+  onInputChange,
   ...props
 }: MultiSelectProps) {
   return (
@@ -39,6 +46,7 @@ export default function FormMultiSelect({
             onChange={(value) => {
               field.onChange(value)
             }}
+            onInputChange={onInputChange}
             loading={loading}
             options={options || []}
             error={!!error}

package/src/components/Input/DatePicker.tsx

@@ -3,6 +3,7 @@ import { InputAdornment, TextFieldProps } from '@mui/material'
 import 'flatpickr/dist/flatpickr.css'
 import { ReactNode } from 'react'
 import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import TextField from './TextField'
 
 export interface IDatePicker {
@@ -17,8 +18,17 @@ export interface IDatePicker {
   placeholder?: string
   inputProps?: TextFieldProps
   size?: 'medium' | 'small'
+  monthSelect?: boolean
 }
 
+const plugins = [
+  monthSelectPlugin({
+    shorthand: true, //defaults to false
+    dateFormat: 'm.y', //defaults to "F Y"
+    altFormat: 'F Y', //defaults to "F Y"
+  }),
+]
+
 export default function FormDatePicker({
   name,
   label,
@@ -29,6 +39,7 @@ export default function FormDatePicker({
   placeholder,
   size = 'medium',
   required = false,
+  monthSelect,
   ...rest
 }: IDatePicker) {
   return (

package/src/components/Input/MultiSelect.tsx

@@ -2,6 +2,7 @@ import { Close, KeyboardArrowDown } from '@mui/icons-material'
 import {
   alpha,
   Autocomplete,
+  AutocompleteInputChangeReason,
   Checkbox,
   CircularProgress,
   Popper,
@@ -76,10 +77,16 @@ interface MultiSelectProps {
   loading?: boolean
   value: IOption[] | IOption
   onChange: (value: IOption[] | IOption) => void
+  onInputChange?: (
+    event: React.SyntheticEvent,
+    value: string,
+    reason: AutocompleteInputChangeReason,
+  ) => void
   required?: boolean
   error?: boolean
   helperText?: string
   multiple?: boolean
+  limitTags?: number
 }
 
 export default function MultiSelect({
@@ -89,10 +96,12 @@ export default function MultiSelect({
   loading,
   value,
   onChange,
+  onInputChange,
   required,
   error,
   helperText,
   multiple = true,
+  limitTags = -1,
   ...props
 }: MultiSelectProps) {
   return (
@@ -107,6 +116,8 @@ export default function MultiSelect({
         if (!onChange) return
         onChange(value)
       }}
+      onInputChange={onInputChange}
+      limitTags={limitTags}
       isOptionEqualToValue={(option: any, value: any) =>
         option?.value === value?.value
       }

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

@@ -79,7 +79,8 @@ export default function AppHeader({
 const AppLogo = ({ clientLogo }) => {
   const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
   const currentApp =
-    applications.find((item) => item.key === originSubdomain)?.key ?? 'campx'
+    applications.find((item) => item.domainName === originSubdomain)
+      ?.domainName ?? 'campx'
 
   return (
     <StyledRouterLink to={'/'}>

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

@@ -1,4 +1,4 @@
-import { Box, Menu, Typography } from '@mui/material'
+import { Box, Menu, Typography, styled } from '@mui/material'
 import Cookies from 'js-cookie'
 import { useState } from 'react'
 import { applications } from './applications'
@@ -11,12 +11,17 @@ import {
   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)
@@ -60,27 +65,40 @@ const AppsMenu = () => {
           },
         }}
       >
-        <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>
+        {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>
     </>
   )
@@ -103,3 +121,13 @@ const MenuItem = ({ data }) => {
     </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/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,21 +1,50 @@
 import { HelpOutline } from '@mui/icons-material'
 import { Button } from '@mui/material'
+import { UserStore } from '../../../../shared-state'
 
 export default function FreshDeskHelpButton() {
-  const handleOpenFreshDeskWidget = () => {
-    try {
-      ;(window as any)?.openFreshDeskWidget()
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error launching Freshdesk')
+  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 />}
-      onClick={handleOpenFreshDeskWidget}
       sx={{ padding: '20px' }}
     >
       Help

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

@@ -2,6 +2,7 @@ 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,
@@ -10,6 +11,7 @@ export default function HeaderActions({
 }) {
   return (
     <>
+      {/* <SchoolSwitch /> */}
       <FreshDeskHelpButton />
       {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
       <UserBox fullName={fullName} actions={userBoxActions} />

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)}
+    />
+  )
+}

package/src/components/Layout/Header/applications.ts

@@ -45,12 +45,14 @@ export const applications = [
     title: 'CollegeX',
     path: isDevelopment ? origins.ums.dev : origins.ums.prod,
     icon: campxSquareSmall,
-    key: 'ums',
+    key: 'square',
+    domainName: 'ums',
     description: 'Manage Complete Campus Activities',
   },
   {
     title: 'ExamX',
     key: 'exams',
+    domainName: 'exams',
     path: isDevelopment ? origins.exams.dev : origins.exams.prod,
     icon: examsSmall,
     description: 'Manage all Examinations in the Campus',
@@ -58,20 +60,23 @@ export const applications = [
   {
     title: 'PayX',
     key: 'payments',
+    domainName: 'payments',
     path: isDevelopment ? origins.payments.dev : origins.payments.prod,
     icon: paySmall,
     description: 'Manage Payments in the Campus',
   },
   {
     title: 'EnrollX',
-    key: 'enroll',
+    key: 'enroll_x',
+    domainName: 'enroll',
     path: isDevelopment ? origins.enroll.dev : origins.enroll.prod,
     icon: enrollSmall,
     description: 'Manage Admissions in the Campus',
   },
   {
     title: 'HostelX',
-    key: 'hostel',
+    key: 'hostels',
+    domainName: 'hostel',
     path: isDevelopment ? origins.hostel.dev : origins.hostel.prod,
     icon: hostelSmall,
     description: 'Manage Hostels in the Campus',
@@ -94,10 +99,4 @@ export const applications = [
         },
       ]
     : []),
-  // {
-  // 	title: 'EnrollX',
-  // 	path: '/hostel',
-  // 	icon:  enrollHeaderLogo,
-  // 	// description: 'Manage Admissions in the Campus',
-  // },
 ]

package/src/components/Layout/Header/assets/index.ts

@@ -14,6 +14,7 @@ import commuteSmall from './commutexSmall.svg'
 import commutex from './commutex.png'
 import hostelx from './hostelx.png'
 import enrollSmall from './enroll_logo.svg'
+import chatWithUs from './chat_with_us.png'
 
 export {
   collegex,
@@ -32,4 +33,5 @@ export {
   commutex,
   commuteSmall,
   enrollSmall,
+  chatWithUs,
 }

package/src/components/Layout/Helmet.tsx

@@ -1,49 +1,108 @@
+import { ReactNode } from 'react'
 import { Helmet as ReactHelmet } from 'react-helmet'
 
-type MetaProps = JSX.IntrinsicElements['meta']
-type LinkProps = JSX.IntrinsicElements['link']
+const isLocalHost = process.env.NODE_ENV === 'development'
+
+const freshDeskInnerHtml = `
+          window.fwSettings = {
+            widget_id: 85000000149,
+         }
+          !(function () {
+            window.openFreshDeskWidget = function openFreshDeskWidget() {
+            FreshworksWidget('open', 'ticketForm')
+          }
+         if ('function' != typeof window.FreshworksWidget) {
+          var n = function () {
+            n.q.push(arguments)
+          }
+          ;(n.q = []), (window.FreshworksWidget = n)
+         }
+          FreshworksWidget('hide', 'launcher')
+        })()
+
+`
+
+const getInnerHtml = (user: any) => {
+  if (isLocalHost) {
+    return ''
+  }
+  const fcWidgetMessengerConfig = {
+    config: {
+      headerProperty: {
+        hideChatButton: true,
+      },
+    },
+  }
+
+  const phone = user?.mobile?.substring(user?.mobile?.length - 10)
+
+  return `
+    window.fcWidgetMessengerConfig = ${JSON.stringify(fcWidgetMessengerConfig)}
+    window.fcSettings = {
+        onInit: function() {
+          console.log('Fresh Chat Init')
+          window.fcWidget.setExternalId('${user?.email}')
+          window.fcWidget.user.setFirstName('${user?.fullName}')
+          window.fcWidget.user.setEmail('${user?.email}')
+          window.fcWidget.user.setPhone('${phone}')
+        }
+      }
+      
+      `
+}
 
 interface IHelmetProps {
   appTitle: string
   favicon: string
   description?: string
-  meta?: MetaProps[] | undefined
-  link?: LinkProps[] | undefined
+  user: any
+  extraMetaTags?: ReactNode
 }
 
 export default function Helmet({
   appTitle,
   favicon,
   description,
-  meta = [],
-  link = [],
+  user,
+  extraMetaTags,
 }: IHelmetProps) {
   return (
-    <ReactHelmet
-      htmlAttributes={{ lang: 'en' }}
-      title={appTitle}
-      meta={[
-        {
-          charSet: 'utf-8',
-        },
-        {
-          name: 'description',
-          content: description,
-        },
-        {
-          name: 'viewport',
-          content: 'width=device-width, initial-scale=1',
-        },
-        ...meta,
-      ]}
-      link={[
-        { rel: 'icon', href: favicon },
-        {
-          rel: 'apple-touch-icon',
-          href: favicon,
-        },
-        ...link,
-      ]}
-    />
+    <ReactHelmet htmlAttributes={{ lang: 'en' }}>
+      <title>{appTitle}</title>
+      <meta charSet="utf-8" />
+      <meta name="description" content={description} />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      {extraMetaTags}
+      <link rel="icon" href={favicon} />
+      <link rel="apple-touch-icon" href={favicon} />
+      {!isLocalHost && (
+        <script
+          type="text/javascript"
+          src="//in.fw-cdn.com/30814322/430238.js"
+          defer
+        />
+      )}
+      {!isLocalHost && <script defer>{getInnerHtml(user)}</script>}
+      {/* {!isLocalHost && (
+        <script async defer>
+          {freshDeskInnerHtml}
+        </script>
+      )} */}
+      {/* {!isLocalHost && (
+        <script
+          type="text/javascript"
+          src="https://ind-widget.freshworks.com/widgets/85000000149.js"
+          defer
+        ></script>
+      )} */}
+      <style type="text/css">
+        {`
+            #fc_frame {
+              bottom: 0 !important;
+              right: 0 !important;
+            }
+          `}
+      </style>
+    </ReactHelmet>
   )
 }