@campxdev/shared 1.2.9 → 1.3.0

package/src/components/Layout/Header/styles.tsx

@@ -7,7 +7,9 @@ import {
   styled,
   Typography,
   Link,
+  Avatar,
 } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
 
 export const StyledImageWrapper = styled('div')`
   width: auto;
@@ -36,7 +38,7 @@ export const StyledHeader = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'space-between',
   '& .actions': {
-    marginRight: '10px',
+    marginRight: '20px',
     display: 'flex',
     alignItems: 'center',
     gap: '14px',
@@ -63,6 +65,7 @@ export const StyledIconButton = styled(IconButton)({
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '0px',
+  border: '1px solid white',
 })
 
 export const StyledLink = styled(Link)({
@@ -96,3 +99,26 @@ export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
   },
   padding: '8px 0px',
 }))
+
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.secondary.main,
+  cursor: 'pointer',
+  height: '45px',
+  width: '45px',
+}))
+
+export const StyledLogosWrapper = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  padding: '10px',
+  transition: 'background ease 0.3s',
+  borderRadius: '5px',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.05)',
+  },
+}))
+
+export const StyledRouterLink = styled(RouterLink)(() => ({
+  textDecoration: 'none',
+}))

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

@@ -2,41 +2,38 @@ import { Box, Typography } from '@mui/material'
 import moment from 'moment'
 import { useState } from 'react'
 import { useQuery } from 'react-query'
-import axios from '../../../config/axios'
+import ErrorBoundary from '../../ErrorBoundary'
 import Spinner from '../../Spinner'
-// import { getImage } from './Services'
+import { fetchTickets } from './services'
 import { StyledCardData, StyledLeftContainer, StyledListItem } from './styles'
 import TicketDetails from './TicketDetails'
 
-function MyTickets() {
+function MyTickets({ close }) {
   const [currentTicket, setCurrentTicket] = useState(null)
-  const { data, isLoading } = useQuery<any>('tickets', () =>
-    axios
-      .get('/square/service-tickets/my-tickets')
-      .then((res) => res.data.result),
-  )
-  // const { data: imageData } = useQuery('imageData', () => getImage(data))
+
+  const { data, isLoading } = useQuery<any>('tickets', fetchTickets)
+
   if (isLoading) return <Spinner />
   return (
-    <Box sx={{ display: 'flex', gap: '20px' }}>
-      <Box sx={{ margin: '10px', borderRadius: '10px' }}>
-        <StyledLeftContainer>
-          {data?.map((item) => (
-            <TicketListItem
-              key={item}
-              data={item}
-              setCurrentTicket={setCurrentTicket}
-              currentTicket={currentTicket}
-            />
-          ))}
-        </StyledLeftContainer>
+    <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>
-      {currentTicket?._id ? (
-        <TicketDetails data={currentTicket} id={currentTicket._id} />
-      ) : (
-        ''
-      )}
-    </Box>
+    </ErrorBoundary>
   )
 }
 
@@ -47,7 +44,6 @@ const TicketListItem = ({ data, setCurrentTicket, currentTicket }) => {
     <StyledListItem
       isActive={currentTicket?._id === data?._id ? true : false}
       onClick={() => {
-        // set selected ticket data
         setCurrentTicket(data)
       }}
     >

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

@@ -1,18 +1,12 @@
-/* eslint-disable react/jsx-key */
 import { Box, Card, Stack, Typography } from '@mui/material'
-import axios from 'axios'
 import moment from 'moment'
 import { useQuery } from 'react-query'
-import { getImage } from './Services'
+import { getImage } from './services'
 import { StyledBoxDetails, StyledCardData } from './styles'
 import StyledTimeLine from './TimeLine'
-// export const getImage = async (id: string) => {
-//   let imgData = await axios.get(`/service-tickets/${id}`)
-//   return imgData?.data
-// }
+
 function TicketDetails({ data, id }) {
   const { data: imageData } = useQuery(['imageData', id], () => getImage(id))
-  console.log(imageData, 'imagedata')
   return (
     <Box>
       {data ? (
@@ -34,8 +28,13 @@ function TicketDetails({ data, id }) {
                 {data?.description}
               </Typography>
               <Stack direction={'column'} gap="20px" sx={{ marginTop: '10px' }}>
-                {imageData?.issueFiles?.map((item) => (
-                  <img src={item?.url} height={'100px'} width={'200px'} />
+                {imageData?.issueFiles?.map((item, index) => (
+                  <img
+                    src={item?.url}
+                    height={'100px'}
+                    width={'200px'}
+                    key={index}
+                  />
                 ))}
               </Stack>
             </Box>

package/src/components/Layout/Tickets/{Services.tsx → services.ts}

@@ -4,3 +4,8 @@ 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
+}

package/src/components/ModalButtons/DialogButton.tsx

@@ -1,83 +1,88 @@
 import { Close } from '@mui/icons-material'
 import {
-  alpha,
   Box,
-  ButtonProps,
   Dialog,
   DialogProps,
+  DialogTitle,
+  Grow,
   IconButton,
   styled,
-  Typography,
 } from '@mui/material'
-import { createElement, ReactNode, useState } from 'react'
+import { TransitionProps } from '@mui/material/transitions'
+import { forwardRef, ReactNode, useState } from 'react'
 
-const StyledDialogHeader = styled(Box)(({ theme }) => ({
+const StyledDialogHeader = styled(Box)(() => ({
   height: '64px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  backgroundColor: '#f7f7f7',
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'center',
+  alignItems: 'end',
   padding: '0.6rem 1rem',
+  paddingBottom: '10px',
 }))
 
-const StyledDialogContent = styled(Box)(({ theme }) => ({
+const StyledDialogContent = styled(Box)(() => ({
   width: '100%',
   padding: '1rem',
 }))
 
-type ContentProps = {
-  close: () => void
-}
+export const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Grow timeout={1000} ref={ref} {...props} />
+})
 
 interface DrawerButtonProps {
-  button: any
-  content: (props: ContentProps) => ReactNode
+  anchor: (props: { open: () => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
   title: string | ReactNode
-  btnTxt?: string | ReactNode
-  btnProps?: ButtonProps
   dialogProps?: Omit<DialogProps, 'open'>
   onDialogClose?: () => void
 }
 
 export default function DialogButton({
-  button: Button,
   content,
   title,
-  btnTxt,
-  btnProps,
   dialogProps,
   onDialogClose,
+  anchor,
 }: DrawerButtonProps) {
   const [open, setOpen] = useState(false)
 
-  const ButtonEl = (props) => (
-    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
-      {btnTxt}
-    </Button>
-  )
-
-  const MyButton = createElement(ButtonEl, {
-    onClick: () => setOpen(true),
-  })
-
   const onClose = () => {
     onDialogClose && onDialogClose()
     setOpen(false)
   }
+
+  const onOpen = () => {
+    setOpen(true)
+  }
+
   return (
     <>
-      {MyButton}
+      {anchor({
+        open: onOpen,
+      })}
       <Dialog
-        PaperProps={{ sx: { borderRadius: '10px' } }}
+        PaperProps={{ elevation: 2, sx: { borderRadius: '10px' } }}
         fullWidth
         onClose={onClose}
         open={open}
-        transitionDuration={200}
+        transitionDuration={100}
+        TransitionComponent={Transition}
+        sx={{
+          '& .MuiBackdrop-root': {
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          },
+        }}
         {...dialogProps}
       >
         <StyledDialogHeader>
-          <Typography fontWeight={600}>{title}</Typography>
-          <IconButton onClick={onClose}>
+          <DialogTitle>{title}</DialogTitle>
+          <IconButton onClick={onClose} sx={{ color: 'black' }}>
             <Close />
           </IconButton>
         </StyledDialogHeader>

package/src/components/ModalButtons/DrawerButton.tsx

@@ -3,20 +3,21 @@ import {
   alpha,
   Box,
   ButtonProps,
+  DialogTitle,
   Drawer,
   IconButton,
   styled,
-  Typography,
 } from '@mui/material'
-import { createElement, ReactNode, useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 const StyledDrawerHeader = styled(Box)(({ theme }) => ({
   height: '64px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  backgroundColor: '#f7f7f7',
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'center',
+  alignItems: 'end',
   padding: '0.6rem 1rem',
+  paddingBottom: '10px',
 }))
 
 const StyledDrawerContent = styled(Box)(({ theme }) => ({
@@ -26,59 +27,54 @@ const StyledDrawerContent = styled(Box)(({ theme }) => ({
   paddingBottom: '4rem',
 }))
 
-type ContentProps = {
-  close: () => void
-}
-
 interface DrawerButtonProps {
-  button: any
-  content: (props: ContentProps) => ReactNode
+  anchor: (props: { open: () => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
   title: string | ReactNode
   btnTxt?: string | ReactNode
   btnProps?: ButtonProps
 }
 
 export default function DrawerButton({
-  button: Button,
   content,
   title,
-  btnTxt,
-  btnProps,
+  anchor,
 }: DrawerButtonProps) {
   const [open, setOpen] = useState(false)
 
-  const ButtonEl = (props) => (
-    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
-      {btnTxt}
-    </Button>
-  )
-
-  const MyButton = createElement(ButtonEl, {
-    onClick: () => setOpen(true),
-  })
+  const onOpen = () => {
+    setOpen(true)
+  }
 
   const onClose = () => {
     setOpen(false)
   }
   return (
     <>
-      {MyButton}
+      {anchor({ open: onOpen })}
       <Drawer
         anchor="right"
         elevation={10}
         onClose={onClose}
         open={open}
+        PaperProps={{
+          elevation: 2,
+        }}
         sx={{
           zIndex: 500,
           '& .MuiDrawer-paper': {
             boxSizing: 'border-box',
             width: 600,
           },
+          '& .MuiBackdrop-root': {
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          },
         }}
+        transitionDuration={200}
       >
         <StyledDrawerHeader>
-          <Typography fontWeight={600}>{title}</Typography>
-          <IconButton onClick={onClose}>
+          <DialogTitle>{title}</DialogTitle>
+          <IconButton onClick={onClose} sx={{ color: 'black' }}>
             <Close />
           </IconButton>
         </StyledDrawerHeader>

package/src/components/TableComponent/BatchActionsHeader.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material'
-import DropDownButton from '../DropDownButton'
+import DropDownButton from '../DropDownButton/DropDownButton'
 import {
   StyledActionIconButton,
   StyledActionsRow,

package/src/components/TableComponent/TableFooter/TableFooter.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography } from '@mui/material'
-import DropDownButton from '../../DropDownButton'
+import DropDownButton from '../../DropDownButton/DropDownButton'
 import { StyledPagination, StyledTableFooter } from '../styles'
 
 interface TableFooterProps {
@@ -62,17 +62,19 @@ const LimitField = ({ handlePageLimit, limit }) => {
   return (
     <Box>
       <DropDownButton
-        buttonProps={{
-          variant: 'outlined',
-          color: 'secondary',
-          sx: {
-            padding: '0px 10px',
-            color: '#121212',
-            fontSize: '13px',
-            border: '1px solid #1212121A',
+        button={{
+          buttonProps: {
+            variant: 'outlined',
+            color: 'secondary',
+            sx: {
+              padding: '0px 10px',
+              color: '#121212',
+              fontSize: '13px',
+              border: '1px solid #1212121A',
+            },
           },
+          label: `${limit} / page`,
         }}
-        label={`${limit} / page`}
         menu={[
           {
             label: 10,

package/src/components/index.ts

@@ -8,7 +8,6 @@ import SearchBar from './SearchBar'
 import { DrawerButton, DialogButton } from './ModalButtons'
 import DetailsGrid from './DetailsGrid'
 import AppHeader from './Layout/Header'
-import MenuButton from './MenuButton'
 import StepsHeader from './StepsHeader'
 import UploadDocument from './UploadDocument'
 import { Table as StyledTable } from './Table'
@@ -61,7 +60,6 @@ export {
   DialogButton,
   DetailsGrid,
   AppHeader,
-  MenuButton,
   StepsHeader,
   UploadDocument,
   StyledTable,

package/src/theme/muiTheme.ts

@@ -104,7 +104,7 @@ const muiTheme = createTheme({
         root: {
           color: '#121212',
           fontSize: '14px',
-          fontWeight: 500,
+          fontWeight: 600,
           fontFamily: PRIMARY_FONT,
         },
         h1: {
@@ -157,30 +157,26 @@ const muiTheme = createTheme({
       styleOverrides: {
         root: {
           fontFamily: SECONDARY_FONT,
-          height: '40px',
-          padding: '10px 36px',
+          height: '50px',
+          fontSize: '14px',
+          padding: '10px 40px',
           textTransform: 'capitalize',
           fontWeight: 600,
           borderRadius: borderRadius.small,
           '&.MuiButton-sizeSmall': {
             padding: '6px 8px',
-            height: '32px',
-            fontSize: '13px',
+            height: '40px',
+            fontSize: '14px',
           },
         },
       },
     },
     MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true,
-      },
       styleOverrides: {
         root: {
           fontFamily: SECONDARY_FONT,
-          '&.MuiButton-textSizeSmall': {
-            padding: '6px 8px',
-            height: '32px',
-          },
+          fontSize: '14px',
+          fontWeight: 600,
         },
       },
     },
@@ -225,9 +221,7 @@ const muiTheme = createTheme({
         },
         root: {
           '.MuiAutocomplete-inputRoot.MuiOutlinedInput-root .MuiAutocomplete-endAdornment':
-            {
-              right: 14,
-            },
+            { right: 14 },
           '& .MuiAutocomplete-tag': {
             border: '1px solid #D1D1D1',
             background: '#F8F8F8',
@@ -454,6 +448,16 @@ const muiTheme = createTheme({
         },
       },
     },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          fontWeight: 500,
+          fontSize: '16px',
+          padding: 0,
+        },
+      },
+    },
     MuiChip: {
       styleOverrides: {
         root: {