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

package/src/components/ModalButtons/PopoverButton.tsx

@@ -0,0 +1,99 @@
+import { Grow, Popover, PopoverProps } from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { ReactNode, forwardRef, useState } from 'react'
+
+export const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Grow timeout={1000} ref={ref} {...props} />
+})
+
+interface PopoverButtonProps {
+  anchor: (props: { open: (e: any) => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
+  popoverProps?: Omit<PopoverProps, 'open'>
+  onDialogClose?: () => void
+}
+
+export default function PopoverButton({
+  content,
+  popoverProps,
+  onDialogClose,
+  anchor,
+}: PopoverButtonProps) {
+  const [popperAnchor, setPopperAnchor] = useState(null)
+
+  const onClose = () => {
+    onDialogClose && onDialogClose()
+    setPopperAnchor(null)
+  }
+
+  const onOpen = (e) => {
+    setPopperAnchor(e.currentTarget)
+  }
+
+  return (
+    <>
+      {anchor({
+        open: onOpen,
+      })}
+      <CustomPopover
+        open={Boolean(popperAnchor)}
+        content={content}
+        popoverProps={popoverProps}
+        onClose={onClose}
+        popperAnchor={popperAnchor}
+      />
+    </>
+  )
+}
+
+interface CustomDialogProps {
+  content: (props: { close: () => void }) => ReactNode
+  onClose: () => void
+  open: boolean
+  popoverProps?: Omit<PopoverProps, 'open'>
+  popperAnchor: any
+}
+
+export const CustomPopover = ({
+  onClose,
+  popoverProps,
+  content,
+  open,
+  popperAnchor,
+}: CustomDialogProps) => {
+  return (
+    <>
+      <Popover
+        onClose={onClose}
+        open={open}
+        transitionDuration={140}
+        TransitionComponent={Transition}
+        PaperProps={{
+          ...popoverProps?.PaperProps,
+          elevation: 2,
+          sx: {
+            borderRadius: '10px',
+            border: '1px solid #1212121A',
+            boxShadow: '0px 4px 16px #0000000F',
+          },
+        }}
+        anchorEl={popperAnchor}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        sx={{
+          ...popoverProps?.sx,
+        }}
+        {...popoverProps}
+      >
+        {content({ close: onClose })}
+      </Popover>
+    </>
+  )
+}

package/src/components/Tabs/TabsContainer.tsx

@@ -10,17 +10,20 @@ export interface TabsContainerProps {
   }[]
   size?: 'small' | 'medium'
   conatinerVariant?: 'box' | 'page'
+  onTabChange?: (tabKey: string) => void
 }
 
 export default function TabsContainer({
   tabs,
   size = 'small',
   conatinerVariant = 'box',
+  onTabChange,
 }: TabsContainerProps) {
   const [currentTab, setCurrentTab] = useState(tabs[0].key)
 
   const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
     setCurrentTab(value)
+    onTabChange && onTabChange(value)
   }
   useEffect(() => {
     setCurrentTab(tabs[0].key)

package/src/components/index.ts

@@ -35,6 +35,8 @@ import { CustomDialog } from './ModalButtons/DialogButton'
 import { CustomDrawer } from './ModalButtons/DrawerButton'
 import ExcelJsonUpload from './ExcelToJsonInput/ExcelJsonUpload'
 import ExcelToJsonInput from './ExcelToJsonInput'
+import ApplicationProfile from './ApplicationProfile'
+import PopoverButton from './ModalButtons/PopoverButton'
 export { default as Image } from './Image'
 export { default as PageHeader } from './PageHeader'
 export { PageContent } from './PageContent'
@@ -98,6 +100,8 @@ export {
   UserBox,
   ExcelJsonUpload,
   ExcelToJsonInput,
+  ApplicationProfile,
+  PopoverButton,
 }
 
 export * from './UploadButton/types'

package/src/config/axios.ts

@@ -1,9 +1,10 @@
-import Axios from 'axios'
+import Axios, { AxiosRequestConfig } from 'axios'
 import _ from 'lodash'
 import { toast } from 'react-toastify'
 import Cookies from 'js-cookie'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import { isDevelopment } from '../constants'
+import { UserStore } from '../shared-state'
 
 const sessionKey = Cookies.get('campx_session_key')
 const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
@@ -30,7 +31,12 @@ let axios = Axios.create({
 })
 
 axios.interceptors.request.use(
-  function (config) {
+  function (config: AxiosRequestConfig) {
+    const userState = UserStore.getRawState()
+    if (userState?.username) {
+      config.headers.test = userState.username
+    }
+
     const params = formatParams(config?.params)
     NetworkStore.update((s) => {
       s.loading = true

package/src/constants/UIConstants.ts

@@ -95,3 +95,30 @@ export function getRandomColor(name) {
     character: firstAlphabet?.toUpperCase(),
   }
 }
+
+export const ProfileApplicationType = [
+  {
+    label: 'Square',
+    value: 'square',
+  },
+  {
+    label: 'Exams',
+    value: 'exams',
+  },
+  {
+    label: 'Payments',
+    value: 'payments',
+  },
+  {
+    label: 'EnrollX',
+    value: 'enroll_x',
+  },
+  {
+    label: 'Hostels',
+    value: 'hostels',
+  },
+  {
+    label: 'Commute',
+    value: 'commute',
+  },
+]

package/src/contexts/LoginFormProvider.tsx

@@ -8,19 +8,14 @@ const LoginContext = createContext<{
   openLoginForm: (loginUrl: string) => {},
 })
 
-export default function LoginFormProvider({ children, showSuperAdminForm }) {
+export default function LoginFormProvider({ children }) {
   const modal = useModal()
 
   const onLogin = (loginUrl: string) => {
     modal({
       title: 'Developer Login',
       content({ close }) {
-        return (
-          <LoginForm
-            loginUrl={loginUrl}
-            showSuperAdminForm={showSuperAdminForm}
-          />
-        )
+        return <LoginForm loginUrl={loginUrl} />
       },
     })
   }

package/src/contexts/Providers.tsx

@@ -9,6 +9,7 @@ import { ToastContainer } from '../components'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import LoginFormProvider from './LoginFormProvider'
+import FreshChatButton from '../components/Layout/Header/HeaderActions/FreshChatButton'
 
 export const campxTenantKey = Cookies.get('campx_tenant')
 export const urlTenantKey = window.location.pathname.split('/')[1]
@@ -36,9 +37,10 @@ export default function Providers({
         <MuiThemeProvider>
           <ConfirmContextProvider>
             <DialogProvider>
-              <LoginFormProvider showSuperAdminForm={showSuperAdminLoginForm}>
+              <LoginFormProvider>
                 {children}
                 <GlobalNetworkLoadingIndicator />
+                <FreshChatButton />
               </LoginFormProvider>
               <ToastContainer />
             </DialogProvider>

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export { default as useFetch } from './useFetch'
 export * from './useRouter'
 export { default as useAuth } from './useAuth'
 export { default as useFilter } from './useFilters'
+export { default as useExternalScript } from './useExternalScript'

package/src/hooks/useAuth.ts

@@ -4,7 +4,6 @@ import { toast } from 'react-toastify'
 import axios from '../config/axios'
 import { isDevelopment } from '../constants'
 import { useLoginForm } from '../contexts/LoginFormProvider'
-import { campxTenantKey, urlTenantKey } from '../contexts/Providers'
 import { PermissionsStore, AssetsStore, UserStore } from '../shared-state'
 
 const url = window.location.origin
@@ -28,6 +27,41 @@ type AuthResponse = {
   }
 }
 
+const ApplicationObj = {
+  enroll: 'enroll_x',
+  ums: 'square',
+  payments: 'payments',
+  exams: 'exams',
+}
+
+const checkIsAdmin = (user) => {
+  let subDomain = window.location.host.split('.')?.slice(-3)[0]
+  const localSubDomain = process.env.REACT_APP_SUBDOMAIN
+
+  if (user?.isSuperuser) return 1
+
+  if (process.env.NODE_ENV === 'development') {
+    subDomain = localSubDomain
+
+    if (!localSubDomain) {
+      toast.warn('missing REACT_APP_SUBDOMAIN in .env')
+    }
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(
+    'Current App ->',
+    ApplicationObj[subDomain],
+    '; subdomain env ->',
+    subDomain,
+  )
+
+  const profile = user?.profiles?.find(
+    (item) => item.application == ApplicationObj[subDomain],
+  )
+  return profile ? (profile.isAdmin == true ? 1 : 0) : 0
+}
+
 function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
   const { openLoginForm } = useLoginForm()
   const [loading, setLoading] = useState<boolean>(false)
@@ -38,13 +72,32 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
     axios
       .get(permissionsEndpoint)
       .then((res) => {
+        const origin = window.location.origin
+        const originSubdomain =
+          window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
+
+        const isStaging = origin.split('campx')[1] === '.dev'
+
+        if (isDevelopment == false && isStaging == false) {
+          if (
+            !res.data.applications.includes(ApplicationObj[originSubdomain])
+          ) {
+            window.location.replace(
+              `https://www.id.campx.in/apps?redirect_to=${url}`,
+            )
+          }
+        }
+
         setLoading(false)
         setData(res.data)
         UserStore.update((s) => {
-          s.username = res.data?.username
+          s.username = res.data?.user?.username
           s.user = res.data?.user
           s.roles = res.data?.roles
         })
+        const isAdmin = checkIsAdmin(res.data.user)
+        // eslint-disable-next-line no-console
+        console.log('Is Admin -> ', isAdmin)
 
         PermissionsStore.update((s) => {
           s.permissions = {
@@ -52,7 +105,10 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
             can_settings_view: 1,
             can_dashboard_view: 1,
             can_individual_pages_view: 1,
+            can_analatics_view: isAdmin,
+            can_admin_view: isAdmin,
           } as any
+          s.applications = res.data?.applications ?? []
         })
         AssetsStore.update((s) => {
           s.logo = res.data?.assets.logo

package/src/hooks/useExternalScript.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+const useExternalScript = (url) => {
+  let [state, setState] = useState(url ? 'loading' : 'idle')
+
+  useEffect(() => {
+    if (!url) {
+      setState('idle')
+      return
+    }
+    let script: any = document.querySelector(`script[src="${url}"]`)
+
+    const handleScript = (e) => {
+      setState(e.type === 'load' ? 'ready' : 'error')
+    }
+    if (!script) {
+      script = document.createElement('script')
+      script.type = 'application/javascript'
+      script.src = url
+      script.async = true
+      document.body.appendChild(script)
+      script.addEventListener('load', handleScript)
+      script.addEventListener('error', handleScript)
+    }
+
+    script.addEventListener('load', handleScript)
+    script.addEventListener('error', handleScript)
+
+    return () => {
+      script.removeEventListener('load', handleScript)
+      script.removeEventListener('error', handleScript)
+      document.body.removeChild(script)
+    }
+  }, [url])
+
+  return state
+}
+
+export default useExternalScript

package/src/hooks/useFilters.ts

@@ -13,10 +13,10 @@ export default function useFilters(initialState, key?: any) {
   }, [])
 
   function onFilterChange(modified) {
-    setFilters({
-      ...filters,
+    setFilters((prev) => ({
+      ...prev,
       ...modified,
-    })
+    }))
 
     const filterData = {
       ...filters,
@@ -36,6 +36,9 @@ export default function useFilters(initialState, key?: any) {
     if (filteredSessionArray?.length > 0) {
       sessionStorage.setItem(key, JSON.stringify(filteredSessionArray))
       setFiltersApplied(true)
+    } else {
+      sessionStorage.removeItem(key)
+      setFiltersApplied(false)
     }
   }