@campxdev/shared 1.8.14 → 1.8.16

package/src/components/Layout/SideNav.tsx

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

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

@@ -0,0 +1,273 @@
+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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,65 @@
+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