@campxdev/shared 1.2.9 → 1.3.1

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

@@ -20,12 +20,12 @@ 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 * as yup from 'yup'
 import Spinner from '../../../Spinner'
 import { Media } from '../../../UploadButton/types'
 import {
@@ -35,7 +35,9 @@ import {
   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'),
@@ -43,28 +45,139 @@ const schema = yup.object().shape({
   categoryId: yup.string().required('Category is required'),
   serviceId: yup.string().required('Service is required'),
 })
-const HelpWidget = () => {
+
+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 [state, setState] = useState(0)
   const { data: ticketCategories, isLoading } = useQuery(
     'ticketCategories',
     () =>
       axios.get(`/square/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,
@@ -90,210 +203,71 @@ const HelpWidget = () => {
       await axios(config)
       queryClient.invalidateQueries('ticketCategories')
       toast.success('Ticket Created Successfully')
-      handleClose()
       reset()
+      onClose()
       setUploadMedia([])
     } catch (error) {
       axiosErrorToast(error)
     }
   }
-  if (isLoading) return <Spinner />
 
+  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>
-          </>
+    <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"
+          />
         ) : (
-          <>
-            <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="/square/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>
-          </>
+          <MediaRow list={uploadMedia} onDelete={handleUploadDeleteImage} />
         )}
-      </StyledDialog>
-
-      <IconButton color="secondary">
-        <HelpOutline onClick={handleClickOpen} />
-      </IconButton>
-    </div>
+        <Button
+          type="submit"
+          fullWidth
+          sx={{
+            height: '60px',
+            borderRadius: '10px',
+            fontSize: '18px',
+          }}
+        >
+          Send
+        </Button>
+      </Stack>
+    </form>
   )
 }
-export default HelpWidget

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

@@ -1,6 +1,8 @@
-import { alpha, Box, Card, Dialog, styled } from '@mui/material'
+import { alpha, Box, Card, Dialog, Slide, styled } from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { forwardRef } from 'react'
 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),
@@ -11,6 +13,7 @@ export const StyledDialogHeader = styled(Box)(({ theme }) => ({
   justifyContent: 'flex-end',
   padding: '0.6rem 1rem',
 }))
+
 export const StyledDialog = styled(Dialog)(() => ({
   zIndex: 500,
   transition: 'max-height 0.3s ease-in-out',
@@ -23,6 +26,7 @@ export const StyledDialog = styled(Dialog)(() => ({
     },
   },
 }))
+
 export const StyledCard = styled(Card)(() => ({
   display: 'flex',
   position: 'absolute',
@@ -45,19 +49,6 @@ export const StyledContactHeader = styled(Box)(({ theme }) => ({
   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',
@@ -92,3 +83,12 @@ export const StyledContactBoxHeader = styled(Box)(() => ({
   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/Header/UserBox.tsx

@@ -1,71 +1,70 @@
-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 { ReactNode } from 'react'
+import logout from '../../../utils/logout'
+import ChangePassword from '../../ChangePassword'
+import DropDownButton from '../../DropDownButton/DropDownButton'
+import { DialogButton } from '../../ModalButtons'
 import MyTickets from '../Tickets/MyTickets'
+import { StyledAvatar } from './styles'
+
+const getStartingLetters = (text: string) => {
+  if (!text) return ''
+  return text
+    .split(' ')
+    ?.map((w) => w[0])
+    ?.join('')
+}
 
 export default function UserBox({
-  username,
-  profileIcon,
+  fullName,
   actions,
 }: {
-  username: string
-  profileIcon: string
+  fullName: 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>
-        }
+      <DropDownButton
+        anchor={({ open }) => (
+          <StyledAvatar onClick={open}>
+            {getStartingLetters(fullName)}
+          </StyledAvatar>
+        )}
         menu={[
           ...actions,
           {
-            label: 'My Tickets',
-            icon: <ConfirmationNumberOutlinedIcon />,
-            onClick: handleTicketOpen,
+            customButton: (
+              <DialogButton
+                dialogProps={{
+                  maxWidth: 'xl',
+                }}
+                title="My Tickets"
+                anchor={({ open }) => (
+                  <DropDownButton.MenuItem
+                    onClick={open}
+                    icon={<ConfirmationNumberOutlinedIcon />}
+                    label="My Tickets"
+                  />
+                )}
+                content={({ close }) => <MyTickets close={close} />}
+              />
+            ),
           },
-
           {
-            label: 'Change Password',
-            icon: <HttpsOutlined />,
-            onClick: handleClickOpen,
+            customButton: (
+              <DialogButton
+                title="Change Password"
+                anchor={({ open }) => (
+                  <DropDownButton.MenuItem
+                    onClick={open}
+                    icon={<HttpsOutlined />}
+                    label="Change Password"
+                  />
+                )}
+                content={({ close }) => <ChangePassword close={close} />}
+              />
+            ),
           },
           {
             label: 'Logout',
@@ -77,15 +76,6 @@ export default function UserBox({
           PaperProps: { sx: { top: '64px !important' } },
         }}
       />
-      <DialogWrapper
-        open={openTicket}
-        title={'All Tickets'}
-        children={<MyTickets />}
-        onClose={() => {
-          handleTicketClose()
-        }}
-      />
-      <ChangePassword open={open} onClose={handleClose} />
     </>
   )
 }

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

@@ -3,8 +3,8 @@ export const AppsIcon = () => {
     <svg
       id="apps"
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width="22"
+      height="22"
       viewBox="0 0 24 24"
     >
       <path