@campxdev/shared 1.8.39 → 1.8.42

package/src/components/Layout/Helmet.tsx

@@ -1,106 +1,108 @@
-import { ReactNode } from 'react'
-import { Helmet as ReactHelmet } from 'react-helmet'
-
-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
-  user: any
-  extraMetaTags?: ReactNode
-}
-
-export default function Helmet({
-  appTitle,
-  favicon,
-  description,
-  user,
-  extraMetaTags,
-}: IHelmetProps) {
-  return (
-    <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
-        />
-      )}
-      <script defer>{getInnerHtml(user)}</script>
-      <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>
-  )
-}
+import { ReactNode } from 'react'
+import { Helmet as ReactHelmet } from 'react-helmet'
+
+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
+  user: any
+  extraMetaTags?: ReactNode
+}
+
+export default function Helmet({
+  appTitle,
+  favicon,
+  description,
+  user,
+  extraMetaTags,
+}: IHelmetProps) {
+  return (
+    <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>
+  )
+}

package/src/components/Layout/LayoutWrapper.tsx

@@ -1,28 +1,28 @@
-import {
-  StyledLeftNavContainer,
-  StyledMainContentContainer,
-} from '../../layouts/Components/styles'
-import ErrorBoundary from '../ErrorBoundary'
-import SideNav from './SideNav'
-interface Props {
-  children?: React.ReactNode
-  menu: any[]
-  sideMenuHeader?: React.ReactNode
-}
-
-export default function LayoutWrapper({
-  children,
-  menu,
-  sideMenuHeader,
-}: Props) {
-  return (
-    <ErrorBoundary>
-      <StyledLeftNavContainer>
-        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
-      </StyledLeftNavContainer>
-      <StyledMainContentContainer>
-        <ErrorBoundary>{children}</ErrorBoundary>
-      </StyledMainContentContainer>
-    </ErrorBoundary>
-  )
-}
+import {
+  StyledLeftNavContainer,
+  StyledMainContentContainer,
+} from '../../layouts/Components/styles'
+import ErrorBoundary from '../ErrorBoundary'
+import SideNav from './SideNav'
+interface Props {
+  children?: React.ReactNode
+  menu: any[]
+  sideMenuHeader?: React.ReactNode
+}
+
+export default function LayoutWrapper({
+  children,
+  menu,
+  sideMenuHeader,
+}: Props) {
+  return (
+    <ErrorBoundary>
+      <StyledLeftNavContainer>
+        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+      </StyledLeftNavContainer>
+      <StyledMainContentContainer>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </StyledMainContentContainer>
+    </ErrorBoundary>
+  )
+}

package/src/components/Layout/SideMenuHeader.tsx

@@ -1,29 +1,29 @@
-import { KeyboardBackspace } from '@mui/icons-material'
-import { Box, styled as styledMui, Typography } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
-
-const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
-  height: '60px',
-  display: 'flex',
-  gap: '8px',
-  alignItems: 'center',
-  cursor: 'pointer',
-  background: '#1d1d1d',
-}))
-
-export const SideMenuHeader = ({ title, path }) => {
-  const navigate = useNavigate()
-
-  return (
-    <StyledSideMenuHeader
-      onClick={() => {
-        navigate(path)
-      }}
-    >
-      <KeyboardBackspace />
-      <Typography variant="h3" color={'white'}>
-        {title}
-      </Typography>
-    </StyledSideMenuHeader>
-  )
-}
+import { KeyboardBackspace } from '@mui/icons-material'
+import { Box, styled as styledMui, Typography } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+
+const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
+  height: '60px',
+  display: 'flex',
+  gap: '8px',
+  alignItems: 'center',
+  cursor: 'pointer',
+  background: '#1d1d1d',
+}))
+
+export const SideMenuHeader = ({ title, path }) => {
+  const navigate = useNavigate()
+
+  return (
+    <StyledSideMenuHeader
+      onClick={() => {
+        navigate(path)
+      }}
+    >
+      <KeyboardBackspace />
+      <Typography variant="h3" color={'white'}>
+        {title}
+      </Typography>
+    </StyledSideMenuHeader>
+  )
+}

package/src/components/Layout/SideNav.tsx

@@ -1,168 +1,168 @@
-import {
-  Box,
-  Collapse,
-  List,
-  ListItemIcon,
-  ListItemText,
-  styled,
-} from '@mui/material'
-import { Store } from 'pullstate'
-import { memo, ReactNode } from 'react'
-import { Link, useMatch, useResolvedPath } from 'react-router-dom'
-import { PermissionsStore } from '../../shared-state'
-import {
-  ListItemButton,
-  StyledChevronIcon,
-  StyledListItemButton,
-} from '../ListItemButton'
-
-const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
-
-const sideNavStore = new Store({
-  activeKey: '',
-})
-
-const StyledLink = styled(Link)({
-  textDecoration: 'none',
-})
-
-const SideNav = ({
-  menuItems,
-  header,
-}: {
-  menuItems: any[]
-  header?: ReactNode
-}) => {
-  return (
-    <Box
-      sx={{
-        background: (theme) => theme.palette.secondary.main,
-      }}
-    >
-      {header ? header : null}
-      <Box sx={{ ':first-child': { marginTop: '25px' } }}>
-        {menuItems.map((item, index) => (
-          <RenderMenuItem key={index} menuItem={item} />
-        ))}
-      </Box>
-    </Box>
-  )
-}
-
-export default memo(SideNav)
-
-const RenderMenuItem = ({ menuItem }) => {
-  const { path, children, title, icon, permissionKey } = menuItem
-  let resolved = useResolvedPath(path)
-  let match = useMatch({ path: resolved.pathname, end: false })
-
-  const permissions = PermissionsStore.useState((s) => s).permissions
-  const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
-
-  if (children?.length)
-    return (
-      <Box sx={{ position: 'relative' }}>
-        <DropDownMenu
-          icon={icon}
-          menuItems={children}
-          path={path}
-          title={title}
-        />
-      </Box>
-    )
-
-  return (
-    <>
-      {hasAccess ? (
-        <>
-          <StyledLink to={path}>
-            <ListItemButton
-              hasChildren={false}
-              label={title}
-              isActive={!!match}
-              icon={icon}
-            />
-          </StyledLink>
-          {menuItem?.sectionEnd && (
-            <Box
-              sx={{
-                backgroundColor: '#1D1D1D',
-                height: '5px',
-              }}
-            ></Box>
-          )}
-        </>
-      ) : null}
-    </>
-  )
-}
-
-const DropDownMenu = ({ path, title, icon, menuItems }) => {
-  const { activeKey } = sideNavStore.useState((s) => s)
-  const permissions = PermissionsStore.useState((s) => s).permissions
-
-  const validateDropdownAccess = () => {
-    if (process.env.NODE_ENV === 'development' && !permissions) return true
-
-    return menuItems?.some((item) =>
-      item?.permissionKey ? permissions[item.permissionKey] : accessIfNoKey,
-    )
-  }
-
-  if (!validateDropdownAccess()) return null
-  return (
-    <Box sx={{ position: 'relative' }}>
-      <MenuDropDownButton
-        isActive={activeKey === path}
-        onClick={() => {
-          sideNavStore.update((s) => {
-            s.activeKey = activeKey === path ? '' : path
-          })
-        }}
-        label={title}
-        icon={icon}
-      />
-      <Collapse timeout={200} in={activeKey === path}>
-        <List>
-          {menuItems?.map((child) => (
-            <RenderMenuItem
-              key={child.path}
-              menuItem={{
-                ...child,
-                path: path + child.path,
-              }}
-            />
-          ))}
-        </List>
-      </Collapse>
-      {menuItems?.sectionEnd && (
-        <Box
-          sx={{
-            backgroundColor: '#1D1D1D',
-            height: '5px',
-          }}
-        ></Box>
-      )}
-    </Box>
-  )
-}
-
-const MenuDropDownButton = ({ icon: Icon, label, onClick, isActive }) => {
-  return (
-    <>
-      <StyledListItemButton
-        dropDown={true}
-        onClick={onClick}
-        isActive={isActive}
-      >
-        {Icon ? (
-          <ListItemIcon>{<Icon />}</ListItemIcon>
-        ) : (
-          <Box minWidth={16}></Box>
-        )}
-        <ListItemText primary={label} />
-        <StyledChevronIcon open={isActive} />
-      </StyledListItemButton>
-    </>
-  )
-}
+import {
+  Box,
+  Collapse,
+  List,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from '@mui/material'
+import { Store } from 'pullstate'
+import { memo, ReactNode } from 'react'
+import { Link, useMatch, useResolvedPath } from 'react-router-dom'
+import { PermissionsStore } from '../../shared-state'
+import {
+  ListItemButton,
+  StyledChevronIcon,
+  StyledListItemButton,
+} from '../ListItemButton'
+
+const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
+
+const sideNavStore = new Store({
+  activeKey: '',
+})
+
+const StyledLink = styled(Link)({
+  textDecoration: 'none',
+})
+
+const SideNav = ({
+  menuItems,
+  header,
+}: {
+  menuItems: any[]
+  header?: ReactNode
+}) => {
+  return (
+    <Box
+      sx={{
+        background: (theme) => theme.palette.secondary.main,
+      }}
+    >
+      {header ? header : null}
+      <Box sx={{ ':first-child': { marginTop: '25px' } }}>
+        {menuItems.map((item, index) => (
+          <RenderMenuItem key={index} menuItem={item} />
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+export default memo(SideNav)
+
+const RenderMenuItem = ({ menuItem }) => {
+  const { path, children, title, icon, permissionKey } = menuItem
+  let resolved = useResolvedPath(path)
+  let match = useMatch({ path: resolved.pathname, end: false })
+
+  const permissions = PermissionsStore.useState((s) => s).permissions
+  const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
+
+  if (children?.length)
+    return (
+      <Box sx={{ position: 'relative' }}>
+        <DropDownMenu
+          icon={icon}
+          menuItems={children}
+          path={path}
+          title={title}
+        />
+      </Box>
+    )
+
+  return (
+    <>
+      {hasAccess ? (
+        <>
+          <StyledLink to={path}>
+            <ListItemButton
+              hasChildren={false}
+              label={title}
+              isActive={!!match}
+              icon={icon}
+            />
+          </StyledLink>
+          {menuItem?.sectionEnd && (
+            <Box
+              sx={{
+                backgroundColor: '#1D1D1D',
+                height: '5px',
+              }}
+            ></Box>
+          )}
+        </>
+      ) : null}
+    </>
+  )
+}
+
+const DropDownMenu = ({ path, title, icon, menuItems }) => {
+  const { activeKey } = sideNavStore.useState((s) => s)
+  const permissions = PermissionsStore.useState((s) => s).permissions
+
+  const validateDropdownAccess = () => {
+    if (process.env.NODE_ENV === 'development' && !permissions) return true
+
+    return menuItems?.some((item) =>
+      item?.permissionKey ? permissions[item.permissionKey] : accessIfNoKey,
+    )
+  }
+
+  if (!validateDropdownAccess()) return null
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <MenuDropDownButton
+        isActive={activeKey === path}
+        onClick={() => {
+          sideNavStore.update((s) => {
+            s.activeKey = activeKey === path ? '' : path
+          })
+        }}
+        label={title}
+        icon={icon}
+      />
+      <Collapse timeout={200} in={activeKey === path}>
+        <List>
+          {menuItems?.map((child) => (
+            <RenderMenuItem
+              key={child.path}
+              menuItem={{
+                ...child,
+                path: path + child.path,
+              }}
+            />
+          ))}
+        </List>
+      </Collapse>
+      {menuItems?.sectionEnd && (
+        <Box
+          sx={{
+            backgroundColor: '#1D1D1D',
+            height: '5px',
+          }}
+        ></Box>
+      )}
+    </Box>
+  )
+}
+
+const MenuDropDownButton = ({ icon: Icon, label, onClick, isActive }) => {
+  return (
+    <>
+      <StyledListItemButton
+        dropDown={true}
+        onClick={onClick}
+        isActive={isActive}
+      >
+        {Icon ? (
+          <ListItemIcon>{<Icon />}</ListItemIcon>
+        ) : (
+          <Box minWidth={16}></Box>
+        )}
+        <ListItemText primary={label} />
+        <StyledChevronIcon open={isActive} />
+      </StyledListItemButton>
+    </>
+  )
+}