@campxdev/shared 1.0.5 → 1.1.0

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

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