@campxdev/shared 1.4.19 → 1.4.21

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

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

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

@@ -1,64 +1,64 @@
-/* eslint-disable react/jsx-key */
-import moment from 'moment'
-import { Typography } from '@mui/material'
-import {
-  TimelineSeparator,
-  TimelineConnector,
-  TimelineDot,
-  TimelineContent,
-} from '@mui/lab'
-import { StyledTimelineBox, StyledTimeLineItem } from './styles'
-
-interface TimelineComponentProps {
-  data: any
-}
-
-function StyledTimeLine({ data }: TimelineComponentProps) {
-  return data?.map((item, index) => (
-    <StyledTimeLineItem key={index}>
-      <TimelineSeparator>
-        <TimelineDot
-          variant="outlined"
-          sx={{ width: '20px', height: '20px' }}
-        />
-        {!(index === data.length - 1) ? <TimelineConnector /> : ''}
-      </TimelineSeparator>
-      <TimelineContent>
-        <Typography variant="h6">{item?.message}</Typography>
-        <Typography sx={{ marginTop: '10px' }}>
-          {moment(item?.createdAt).format(' h:mmA Do MMMM YYYY,  ')}
-        </Typography>
-        <RenderContent timeLog={item} />
-      </TimelineContent>
-    </StyledTimeLineItem>
-  ))
-}
-export default StyledTimeLine
-
-const RenderContent = ({ timeLog }) => {
-  if (timeLog?.files) {
-    return (
-      <StyledTimelineBox>
-        <Typography sx={{ marginBottom: '3px' }}>{timeLog?.notes}</Typography>
-        {/* {timeLog?.files?.map((item) => (
-          <img src={item?.url} height={'100px'} width={'200px'} />
-        ))} */}
-      </StyledTimelineBox>
-    )
-  }
-
-  if (timeLog?.notes) {
-    return (
-      <StyledTimelineBox
-        sx={{
-          maxWidth: '400px',
-        }}
-      >
-        <Typography sx={{ wordWrap: 'break-word' }}>
-          {timeLog?.notes}
-        </Typography>
-      </StyledTimelineBox>
-    )
-  }
-  return <></>
-}
+/* eslint-disable react/jsx-key */
+import moment from 'moment'
+import { Typography } from '@mui/material'
+import {
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineDot,
+  TimelineContent,
+} from '@mui/lab'
+import { StyledTimelineBox, StyledTimeLineItem } from './styles'
+
+interface TimelineComponentProps {
+  data: any
+}
+
+function StyledTimeLine({ data }: TimelineComponentProps) {
+  return data?.map((item, index) => (
+    <StyledTimeLineItem key={index}>
+      <TimelineSeparator>
+        <TimelineDot
+          variant="outlined"
+          sx={{ width: '20px', height: '20px' }}
+        />
+        {!(index === data.length - 1) ? <TimelineConnector /> : ''}
+      </TimelineSeparator>
+      <TimelineContent>
+        <Typography variant="h6">{item?.message}</Typography>
+        <Typography sx={{ marginTop: '10px' }}>
+          {moment(item?.createdAt).format(' h:mmA Do MMMM YYYY,  ')}
+        </Typography>
+        <RenderContent timeLog={item} />
+      </TimelineContent>
+    </StyledTimeLineItem>
+  ))
+}
+export default StyledTimeLine
+
+const RenderContent = ({ timeLog }) => {
+  if (timeLog?.files) {
+    return (
+      <StyledTimelineBox>
+        <Typography sx={{ marginBottom: '3px' }}>{timeLog?.notes}</Typography>
+        {/* {timeLog?.files?.map((item) => (
+          <img src={item?.url} height={'100px'} width={'200px'} />
+        ))} */}
+      </StyledTimelineBox>
+    )
+  }
+
+  if (timeLog?.notes) {
+    return (
+      <StyledTimelineBox
+        sx={{
+          maxWidth: '400px',
+        }}
+      >
+        <Typography sx={{ wordWrap: 'break-word' }}>
+          {timeLog?.notes}
+        </Typography>
+      </StyledTimelineBox>
+    )
+  }
+  return <></>
+}

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

@@ -1 +1 @@
-export { default } from './MyTickets'
+export { default } from './MyTickets'

package/src/components/Layout/Tickets/services.ts

@@ -1,11 +1,11 @@
-import axios from '../../../config/axios'
-
-export const getImage = async (id: string) => {
-  let imageData = await axios.get(`/square/service-tickets/${id}`)
-  return imageData?.data
-}
-
-export const fetchTickets = async () => {
-  let imageData = await axios.get(`/square/service-tickets/my-tickets`)
-  return imageData?.data
-}
+import axios from '../../../config/axios'
+
+export const getImage = async (id: string) => {
+  let imageData = await axios.get(`/square/service-tickets/${id}`)
+  return imageData?.data
+}
+
+export const fetchTickets = async () => {
+  let imageData = await axios.get(`/square/service-tickets/my-tickets`)
+  return imageData?.data
+}