@campxdev/shared 0.6.19 → 1.0.0

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

@@ -0,0 +1,298 @@
+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 axios, { axiosErrorToast } from '../../../../config/axios'
+import { queryClient } from '../../../../contexts/QueryClientProvider'
+import { FormSingleSelect, FormTextField } from '../../../HookForm'
+import ImageUpload from '../../../ImageUpload'
+import MediaRow from '../../../MediaRow'
+import * as yup from 'yup'
+import Spinner from '../../../Spinner'
+import { Media } from '../../../UploadButton/types'
+import {
+  StyledCard,
+  StyledContactBoxHeader,
+  StyledContactHeader,
+  StyledDialog,
+  StyledDialogCard,
+  StyledDialogHeader,
+} 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 HelpWidget = () => {
+  const [open, setOpen] = useState(false)
+  const { control, handleSubmit, watch, reset } = useForm({
+    resolver: yupResolver(schema),
+  })
+  const [state, setState] = useState(0)
+  const { data: ticketCategories, isLoading } = useQuery(
+    'ticketCategories',
+    () => axios.get(`/service-tickets/categories`).then((res) => res.data),
+  )
+  // console.log(ticketCategories)
+  const [uploadMedia, setUploadMedia] = useState<Media[]>([])
+
+  const handleClickOpen = () => {
+    setOpen(true)
+    setState(0)
+  }
+  const handleClose = () => {
+    setOpen(false)
+    reset()
+  }
+  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: '/service-tickets',
+      data: {
+        issueFiles: [uploadMedia[0]?.key],
+        ...formData,
+      },
+    }
+
+    try {
+      await axios(config)
+      queryClient.invalidateQueries('ticketCategories')
+      toast.success('Ticket Created Successfully')
+      handleClose()
+      reset()
+      setUploadMedia([])
+    } catch (error) {
+      axiosErrorToast(error)
+    }
+  }
+  if (isLoading) return <Spinner />
+
+  return (
+    <div>
+      <StyledDialog
+        fullWidth
+        onClose={handleClose}
+        open={open}
+        PaperProps={{
+          sx: {
+            borderRadius: '10px',
+          },
+        }}
+      >
+        {state == 0 ? (
+          <>
+            <StyledDialogHeader>
+              <IconButton onClick={handleClose}>
+                <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={handleClose}>
+                  <Close
+                    sx={{
+                      position: 'absolute',
+                      color: 'white',
+                      top: 5,
+                      right: 2,
+                    }}
+                  />
+                </IconButton>
+              </StyledContactHeader>
+              <DialogContent sx={{ height: '500px' }}>
+                <StyledDialogCard>
+                  <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 }
+                        })}
+                        // onChange={(value) => {
+                        //   mutate({ id: value })
+                        // }}
+                        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
+                      />
+
+                      {/* <StyledContactCard>
+                          <Screenshot />
+                          <Typography sx={{ fontSize: '12px' }} variant="h5">
+                            Take screenshot
+                          </Typography>
+                        </StyledContactCard> */}
+                      {/* <StyledContactCard
+                          sx={{
+                            minHeight: '120px',
+                            flexDirection: 'column',
+                            border: '2px dashed #0000001A',
+                          }}
+                        > */}
+                      {/* <Upload />
+                          <Typography sx={{ fontSize: '12px' }} variant="h5">
+                            Upload files (max 5)
+                          </Typography>
+                          <Typography variant="h4" sx={{ fontSize: '10px' }}>
+                            Click to add or drag & drop files
+                          </Typography> */}
+                      {/* category id , service id and priority is required */}
+                      {!uploadMedia?.length ? (
+                        <ImageUpload
+                          onFileUploaded={handleUploadImageChange}
+                          postUrl="/tickets/upload-issue-file"
+                          // postUrl="/"
+                        />
+                      ) : (
+                        <MediaRow
+                          list={uploadMedia}
+                          onDelete={handleUploadDeleteImage}
+                        />
+                      )}
+                      {/* </StyledContactCard> */}
+                      <Button
+                        type="submit"
+                        fullWidth
+                        sx={{
+                          height: '60px',
+                          borderRadius: '10px',
+                          fontSize: '18px',
+                        }}
+                      >
+                        Send
+                      </Button>
+                    </Stack>
+                  </form>
+                </StyledDialogCard>
+              </DialogContent>
+            </Box>
+          </>
+        )}
+      </StyledDialog>
+
+      <IconButton color="secondary">
+        <HelpOutline onClick={handleClickOpen} />
+      </IconButton>
+    </div>
+  )
+}
+export default HelpWidget

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

@@ -0,0 +1,92 @@
+import { alpha, Box, Card, Dialog, styled } from '@mui/material'
+import { background, contactBg } from '../assets'
+// import background from '../../Header/assets/background.png'
+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 StyledContact = styled(Dialog)(() => ({
+//   zIndex: 500,
+//   height: '950px',
+//   '& .MuiDialog-container': {
+//     bottom: 0,
+//     justifyContent: 'flex-end',
+//     alignItems: 'end',
+//     '& .MuiPaper-root': {
+//       maxWidth: '380px',
+//     },
+//   },
+// }))
+
+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',
+  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',
+}))

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

@@ -1,13 +1,13 @@
-import { IconButton } from '@mui/material'
-import { NotificationIcon } from './icons'
-
-function Notification() {
-  return (
-    <>
-      <IconButton>
-        <NotificationIcon />
-      </IconButton>
-    </>
-  )
-}
-export default Notification
+import { IconButton } from '@mui/material'
+import { NotificationIcon } from './icons'
+
+function Notification() {
+  return (
+    <>
+      <IconButton>
+        <NotificationIcon />
+      </IconButton>
+    </>
+  )
+}
+export default Notification

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

@@ -1,70 +1,90 @@
-import { Box, Typography } from '@mui/material'
-import { ReactNode, useState } from 'react'
-import { avatarImage } from '../../../assets/images'
-import MenuButton from '../../MenuButton'
-import { StyledUser } from './styles'
-import logout from '../../../utils/logout'
-import ChangePassword from '../../ChangePassword'
-import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
-
-export default function UserBox({
-  username,
-  profileIcon,
-  actions,
-}: {
-  username: string
-  profileIcon: string
-  actions: { label: ReactNode; icon?: ReactNode; onClick: any }[]
-}) {
-  const [open, setOpen] = useState(false)
-
-  const handleClickOpen = () => {
-    setOpen(true)
-  }
-  const handleClose = (value: string) => {
-    setOpen(false)
-  }
-
-  return (
-    <>
-      <MenuButton
-        anchor={
-          <Box minWidth={'80px'} textAlign="center">
-            <StyledUser>
-              <img
-                src={profileIcon ?? avatarImage}
-                style={{
-                  height: '32px',
-                  width: '32px',
-                  objectFit: 'contain',
-                }}
-                onError={(e: any) => {
-                  e.target.src = avatarImage
-                }}
-              />
-              <Typography variant="h6">{username}</Typography>
-            </StyledUser>
-          </Box>
-        }
-        menu={[
-          ...actions,
-
-          {
-            label: 'Change Password',
-            icon: <HttpsOutlined />,
-            onClick: handleClickOpen,
-          },
-          {
-            label: 'Logout',
-            icon: <ExitToAppOutlined />,
-            onClick: logout,
-          },
-        ]}
-        menuProps={{
-          PaperProps: { sx: { top: '64px !important' } },
-        }}
-      />
-      <ChangePassword open={open} onClose={handleClose} />
-    </>
-  )
-}
+import { Box, Typography } from '@mui/material'
+import { ReactNode, useState } from 'react'
+import { avatarImage } from '../../../assets/images'
+import MenuButton from '../../MenuButton'
+import { StyledUser } from './styles'
+import logout from '../../../utils/logout'
+import ChangePassword from '../../ChangePassword'
+import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
+import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'
+import DialogWrapper from '../../DrawerWrapper/DialogWrapper'
+import MyTickets from '../Tickets/MyTickets'
+export default function UserBox({
+  username,
+  profileIcon,
+  actions,
+}: {
+  username: string
+  profileIcon: string
+  actions: { label: ReactNode; icon?: ReactNode; onClick: any }[]
+}) {
+  const [open, setOpen] = useState(false)
+  const [openTicket, setOpenTicket] = useState(false)
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+  const handleClose = (value: string) => {
+    setOpen(false)
+  }
+  const handleTicketOpen = () => {
+    setOpenTicket(true)
+  }
+  const handleTicketClose = () => {
+    setOpenTicket(false)
+  }
+  return (
+    <>
+      <MenuButton
+        anchor={
+          <Box minWidth={'80px'} textAlign="center">
+            <StyledUser>
+              <img
+                src={profileIcon ?? avatarImage}
+                style={{
+                  height: '32px',
+                  width: '32px',
+                  objectFit: 'contain',
+                }}
+                onError={(e: any) => {
+                  e.target.src = avatarImage
+                }}
+              />
+              <Typography variant="h6">{username}</Typography>
+            </StyledUser>
+          </Box>
+        }
+        menu={[
+          ...actions,
+          {
+            label: 'My Tickets',
+            icon: <ConfirmationNumberOutlinedIcon />,
+            onClick: handleTicketOpen,
+          },
+
+          {
+            label: 'Change Password',
+            icon: <HttpsOutlined />,
+            onClick: handleClickOpen,
+          },
+          {
+            label: 'Logout',
+            icon: <ExitToAppOutlined />,
+            onClick: logout,
+          },
+        ]}
+        menuProps={{
+          PaperProps: { sx: { top: '64px !important' } },
+        }}
+      />
+      <DialogWrapper
+        open={openTicket}
+        title={'All Tickets'}
+        children={<MyTickets />}
+        onClose={() => {
+          handleTicketClose()
+        }}
+      />
+      <ChangePassword open={open} onClose={handleClose} />
+    </>
+  )
+}