@campxdev/shared 1.8.13 → 1.8.14

package/src/components/Layout/SideNav.tsx

@@ -1,168 +0,0 @@
-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>
-    </>
-  )
-}

package/src/components/Layout/Tickets/HelpWidget/HelpWidget.tsx

@@ -1,273 +0,0 @@
-import { yupResolver } from '@hookform/resolvers/yup'
-import {
-  ArrowBackIosNew,
-  ArrowForwardIos,
-  Close,
-  HelpOutline,
-  NotesSharp,
-} from '@mui/icons-material'
-import {
-  Box,
-  Button,
-  Card,
-  DialogContent,
-  IconButton,
-  Stack,
-  Typography,
-} from '@mui/material'
-import { AxiosRequestConfig } from 'axios'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { useQuery } from 'react-query'
-import { toast } from 'react-toastify'
-import * as yup from 'yup'
-import axios, { axiosErrorToast } from '../../../../config/axios'
-import { queryClient } from '../../../../contexts/QueryClientProvider'
-import { FormSingleSelect, FormTextField } from '../../../HookForm'
-import ImageUpload from '../../../ImageUpload'
-import MediaRow from '../../../MediaRow'
-import Spinner from '../../../Spinner'
-import { Media } from '../../../UploadButton/types'
-import {
-  StyledCard,
-  StyledContactBoxHeader,
-  StyledContactHeader,
-  StyledDialog,
-  StyledDialogCard,
-  StyledDialogHeader,
-  Transition,
-} from './styles'
-
-const schema = yup.object().shape({
-  name: yup.string().required('Name is required'),
-  subject: yup.string().required('Subject is required'),
-  description: yup.string().required('Description is required'),
-  // categoryId: yup.string().required('Category is required'),
-  // serviceId: yup.string().required('Service is required'),
-})
-
-const HelpWidgetButton = () => {
-  const [open, setOpen] = useState(false)
-
-  const onOpen = () => {
-    setOpen(true)
-  }
-  const onClose = () => {
-    setOpen(false)
-  }
-
-  return (
-    <>
-      <IconButton color="secondary">
-        <HelpOutline onClick={onOpen} />
-      </IconButton>
-      <HelpWidget onClose={onClose} open={open} />
-    </>
-  )
-}
-
-export default HelpWidgetButton
-
-const HelpWidget = ({ open, onClose }) => {
-  const [state, setState] = useState(0)
-
-  return (
-    <StyledDialog
-      fullWidth
-      onClose={onClose}
-      open={open}
-      PaperProps={{
-        elevation: 2,
-        sx: { borderRadius: '10px' },
-      }}
-      transitionDuration={200}
-      TransitionComponent={Transition}
-    >
-      {state == 0 ? (
-        <>
-          <StyledDialogHeader>
-            <IconButton onClick={onClose}>
-              <Close sx={{ position: 'absolute', color: 'white', top: 5 }} />
-            </IconButton>
-          </StyledDialogHeader>
-          <DialogContent sx={{ padding: '0' }}>
-            <Box>
-              <StyledCard>
-                <Box
-                  sx={{ display: 'flex', gap: '10px', alignItems: 'center' }}
-                >
-                  <NotesSharp />
-                  <Typography variant="h5" sx={{ fontSize: '14px' }}>
-                    Knowledge Base
-                  </Typography>
-                </Box>
-                <ArrowForwardIos sx={{ width: '15px', color: 'blue' }} />
-              </StyledCard>
-            </Box>
-            <Box sx={{ padding: '15px 20px 20px 20px' }}>
-              <Card
-                sx={{
-                  boxShadow: '0px 3px 15px #0000001A',
-                  padding: '20px 15px',
-                  marginTop: '30px',
-                }}
-              >
-                <Stack gap={1}>
-                  <Typography variant="h3">Want to get in touch?</Typography>
-                  <Typography variant="subtitle2" sx={{ maxWidth: '290px' }}>
-                    We’re standing by to answer all of your questions right now.
-                  </Typography>
-                </Stack>
-                <Button
-                  fullWidth
-                  sx={{
-                    borderRadius: '8px',
-                    marginTop: '15px',
-                    height: '50px',
-                  }}
-                  onClick={() => setState(1)}
-                >
-                  Contact Us
-                </Button>
-              </Card>
-            </Box>
-          </DialogContent>
-        </>
-      ) : (
-        <>
-          <Box>
-            <StyledContactHeader>
-              <StyledContactBoxHeader onClick={() => setState(0)}>
-                <ArrowBackIosNew sx={{ fontSize: 'small', color: 'white' }} />
-                <Typography sx={{ color: 'white' }} variant="h3">
-                  Contact Us
-                </Typography>
-              </StyledContactBoxHeader>
-              <IconButton onClick={onClose}>
-                <Close
-                  sx={{
-                    position: 'absolute',
-                    color: 'white',
-                    top: 5,
-                    right: 2,
-                  }}
-                />
-              </IconButton>
-            </StyledContactHeader>
-            <DialogContent sx={{ height: '500px' }}>
-              <StyledDialogCard>
-                <HelpWidgetForm onClose={onClose} />
-              </StyledDialogCard>
-            </DialogContent>
-          </Box>
-        </>
-      )}
-    </StyledDialog>
-  )
-}
-
-const HelpWidgetForm = ({ onClose }) => {
-  const [uploadMedia, setUploadMedia] = useState<Media[]>([])
-
-  const { control, handleSubmit, watch, reset } = useForm({
-    resolver: yupResolver(schema),
-  })
-  const { data: ticketCategories, isLoading } = useQuery(
-    'ticketCategories',
-    () =>
-      axios.get(`/square/service-tickets/categories`).then((res) => res.data),
-  )
-
-  const handleUploadImageChange = (v) => {
-    setUploadMedia([
-      ...uploadMedia,
-      { type: 'image', url: v.url, key: v.key, id: v.id },
-    ])
-  }
-
-  const handleUploadDeleteImage = (key) => {
-    setUploadMedia((prev) => prev.filter((m) => m.key !== key))
-  }
-
-  const onSubmit = async (formData) => {
-    const config: AxiosRequestConfig = {
-      method: 'POST',
-      url: '/square/service-tickets',
-      data: {
-        issueFiles: [uploadMedia[0]?.key],
-        ...formData,
-      },
-    }
-
-    try {
-      await axios(config)
-      queryClient.invalidateQueries('ticketCategories')
-      toast.success('Ticket Created Successfully')
-      reset()
-      onClose()
-      setUploadMedia([])
-    } catch (error) {
-      axiosErrorToast(error)
-    }
-  }
-
-  if (isLoading) return <Spinner />
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={'20px'}>
-        <FormTextField label={'Your Name'} name={'name'} control={control} />
-        <FormTextField label={'Subject'} name={'subject'} control={control} />
-        <FormTextField
-          label={'Description'}
-          name={'description'}
-          control={control}
-          multiline
-          rows={5}
-          required
-        />
-        {/* <FormSingleSelect
-          label={'Category'}
-          name={'categoryId'}
-          control={control}
-          options={ticketCategories?.map((item) => {
-            return { label: item.name, value: item._id }
-          })}
-          required
-        />
-        <FormSingleSelect
-          label={'Service'}
-          name={'serviceId'}
-          control={control}
-          options={
-            ticketCategories
-              ?.find((item) => item?._id === watch('categoryId'))
-              ?.services?.map((item) => ({
-                label: item.name,
-                value: item._id,
-              })) ?? []
-          }
-          required
-        /> */}
-        {!uploadMedia?.length ? (
-          <ImageUpload
-            onFileUploaded={handleUploadImageChange}
-            postUrl="/square/tickets/upload-issue-file"
-          />
-        ) : (
-          <MediaRow list={uploadMedia} onDelete={handleUploadDeleteImage} />
-        )}
-        <Button
-          type="submit"
-          fullWidth
-          sx={{
-            height: '60px',
-            borderRadius: '10px',
-            fontSize: '18px',
-          }}
-        >
-          Send
-        </Button>
-      </Stack>
-    </form>
-  )
-}

package/src/components/Layout/Tickets/HelpWidget/styles.tsx

@@ -1,94 +0,0 @@
-import { alpha, Box, Card, Dialog, Slide, styled } from '@mui/material'
-import { TransitionProps } from '@mui/material/transitions'
-import { forwardRef } from 'react'
-import { background, contactBg } from '../../Header/assets'
-
-export const StyledDialogHeader = styled(Box)(({ theme }) => ({
-  height: '180px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  backgroundImage: `url(${background})`,
-  backgroundSize: 'cover',
-  display: 'flex',
-  alignItems: 'start',
-  justifyContent: 'flex-end',
-  padding: '0.6rem 1rem',
-}))
-
-export const StyledDialog = styled(Dialog)(() => ({
-  zIndex: 500,
-  transition: 'max-height 0.3s ease-in-out',
-  '& .MuiDialog-container': {
-    justifyContent: 'flex-end',
-    alignItems: 'end',
-
-    '& .MuiPaper-root': {
-      maxWidth: '380px',
-    },
-  },
-}))
-
-export const StyledCard = styled(Card)(() => ({
-  display: 'flex',
-  position: 'absolute',
-  width: '340px',
-  justifyContent: 'space-between',
-  margin: '-30px 20px 0 20px',
-  padding: '20px 15px',
-  cursor: 'pointer',
-  boxShadow: '0px 3px 15px #0000001A',
-}))
-
-export const StyledContactHeader = styled(Box)(({ theme }) => ({
-  height: '170px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  backgroundImage: `url(${contactBg})`,
-  backgroundSize: 'cover',
-  display: 'flex',
-  alignItems: 'start',
-  justifyContent: 'space-between',
-  padding: '0.6rem 1rem',
-}))
-
-export const StyledContactCard = styled(Card)(() => ({
-  minHeight: '50px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '10px',
-  cursor: 'pointer',
-  border: '1px solid #0000001A',
-  backgroundColor: '#cfbdbd1a',
-}))
-
-export const StyledDialogCard = styled(Card)(() => ({
-  padding: '20px',
-  boxShadow: '0px 5px 10px #0000001A',
-  width: '350px',
-  margin: 'auto',
-  maxHeight: '550px',
-  overflowY: 'auto',
-  '&::-webkit-scrollbar': {
-    width: '0px',
-    height: '0px',
-  },
-  marginTop: '-90px',
-  marginLeft: '-4px',
-  position: 'absolute',
-}))
-
-export const StyledContactBoxHeader = styled(Box)(() => ({
-  marginTop: '40px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '5px',
-  cursor: 'pointer',
-}))
-
-export const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Slide direction="up" ref={ref} {...props} />
-})

package/src/components/Layout/Tickets/MyTickets.tsx

@@ -1,72 +0,0 @@
-import { Box, Typography } from '@mui/material'
-import moment from 'moment'
-import { useState } from 'react'
-import { useQuery } from 'react-query'
-import ErrorBoundary from '../../ErrorBoundary'
-import Spinner from '../../Spinner'
-import { fetchTickets } from './services'
-import { StyledCardData, StyledLeftContainer, StyledListItem } from './styles'
-import TicketDetails from './TicketDetails'
-
-function MyTickets({ close }) {
-  const [currentTicket, setCurrentTicket] = useState(null)
-
-  const { data, isLoading } = useQuery<any>('tickets', fetchTickets)
-
-  if (isLoading) return <Spinner />
-  return (
-    <ErrorBoundary>
-      <Box sx={{ display: 'flex', gap: '20px' }}>
-        <Box sx={{ margin: '10px', borderRadius: '10px' }}>
-          <StyledLeftContainer>
-            {data?.result?.map((item) => (
-              <TicketListItem
-                key={item}
-                data={item}
-                setCurrentTicket={setCurrentTicket}
-                currentTicket={currentTicket}
-              />
-            ))}
-          </StyledLeftContainer>
-        </Box>
-        {currentTicket?._id && (
-          <TicketDetails data={currentTicket} id={currentTicket._id} />
-        )}
-      </Box>
-    </ErrorBoundary>
-  )
-}
-
-export default MyTickets
-
-const TicketListItem = ({ data, setCurrentTicket, currentTicket }) => {
-  return (
-    <StyledListItem
-      isActive={currentTicket?._id === data?._id ? true : false}
-      onClick={() => {
-        setCurrentTicket(data)
-      }}
-    >
-      <Box
-        sx={{
-          width: '400px',
-          display: 'flex',
-        }}
-      >
-        <Box className="left">
-          <Typography variant="body2">{data?.name}</Typography>
-          <Typography variant="subtitle2">
-            {moment(data?.createdAt).format('DD MMMM, YYYY  hh:mm: a')}
-          </Typography>
-        </Box>
-        <Box className="right">
-          <StyledCardData>
-            <Typography variant="h5" sx={{ fontSize: '9px' }}>
-              {data?.status.replace('_', ' ')}
-            </Typography>
-          </StyledCardData>
-        </Box>
-      </Box>
-    </StyledListItem>
-  )
-}

package/src/components/Layout/Tickets/TicketDetails.tsx

@@ -1,65 +0,0 @@
-import { Box, Card, Stack, Typography } from '@mui/material'
-import moment from 'moment'
-import { useQuery } from 'react-query'
-import { getImage } from './services'
-import { StyledBoxDetails, StyledCardData } from './styles'
-import StyledTimeLine from './TimeLine'
-
-function TicketDetails({ data, id }) {
-  const { data: imageData } = useQuery(['imageData', id], () => getImage(id))
-  return (
-    <Box>
-      {data ? (
-        <Card
-          sx={{
-            marginTop: '20px',
-          }}
-        >
-          <StyledBoxDetails>
-            <Box>
-              <Typography variant="h5">{data?.name}</Typography>
-              <Typography variant="subtitle2" sx={{ marginTop: '5px' }}>
-                {moment(data?.createdAt).format('DD MMMM, YYYY  hh:mm: a') ??
-                  ' '}
-              </Typography>
-              <Typography
-                sx={{ marginTop: '20px', maxWidth: '500px', fontSize: '14px' }}
-              >
-                {data?.description}
-              </Typography>
-              <Stack direction={'column'} gap="20px" sx={{ marginTop: '10px' }}>
-                {imageData?.issueFiles?.map((item, index) => (
-                  <img
-                    src={item?.url}
-                    height={'100px'}
-                    width={'200px'}
-                    key={index}
-                  />
-                ))}
-              </Stack>
-            </Box>
-            <StyledCardData
-              sx={{
-                marginRight: '10px',
-              }}
-            >
-              <Typography variant="h5" sx={{ fontSize: '10px' }}>
-                {data.status.replace('_', ' ')}
-              </Typography>
-            </StyledCardData>
-          </StyledBoxDetails>
-        </Card>
-      ) : (
-        ''
-      )}
-      <Box sx={{ marginTop: '30px', marginBottom: '30px' }}>
-        <Typography variant="h1" sx={{ marginBottom: '10px' }}>
-          {data?.timelineLogs ? 'Ticket Timeline' : ''}
-        </Typography>
-        <StyledTimeLine data={data?.timelineLogs} />
-      </Box>
-    </Box>
-  )
-}
-
-export default TicketDetails