@campxdev/shared 1.8.14 → 1.8.16

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

@@ -0,0 +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 <></>
+}

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

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

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

@@ -0,0 +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
+}

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

@@ -0,0 +1,136 @@
+import { TimelineItem } from '@mui/lab'
+import { alpha, Box, Card, styled, Typography } from '@mui/material'
+
+export const StyledListItem = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'isActive',
+})<{ isActive: boolean }>(({ theme, isActive }) => ({
+  maxWidth: '400px',
+  height: '85px',
+  display: 'flex',
+  border: theme.borders.grayLight,
+
+  alignItems: 'center',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  ':first-child': {
+    borderTopRightRadius: '10px',
+    borderTopLeftRadius: '10px',
+  },
+  '&:hover': {
+    background: alpha(theme.palette.secondary.main, 0.02),
+  },
+
+  '& .left': {
+    paddingLeft: '10px',
+    marginRight: 'auto',
+    '& .MuiTypography-root': {
+      marginTop: '4px',
+      '& > span': {
+        color: theme.palette.secondary.main,
+      },
+    },
+  },
+  '& .right': {
+    paddingRight: '15px',
+    display: 'flex',
+  },
+  '&:before': {
+    transition: 'all 0.2s ease',
+    content: "''",
+    height: '95%',
+    width: '4px',
+    borderRadius: '2px',
+    background: 'transparent',
+    ...(isActive && {
+      background: theme.palette.common.yellow,
+    }),
+  },
+
+  ...(isActive && {
+    background: alpha(theme.palette.secondary.main, 0.035),
+  }),
+}))
+
+export const StyledRemarksContainer = styled(Box)({
+  height: '170px',
+  borderRadius: '10px',
+  border: '1px solid #1212121A',
+  marginBottom: '20px ',
+})
+export const StyledLetterBackGround = styled(Box)({
+  width: '60px',
+  height: '60px',
+  display: 'flex',
+  backgroundColor: 'black',
+  justifyContent: 'center',
+  alignItems: 'center',
+})
+export const StyledNamecontainer = styled(Box)({
+  display: 'flex',
+  gap: '20px',
+  alignItems: 'center',
+  margin: '25px',
+})
+
+export const StyledLetter = ({ letter }) => {
+  //letter?.split(' ')[0][0]}${letter?.split(' ')[1][0]
+  const value = `${letter?.split(' ')[0][0]}`
+
+  return (
+    <StyledLetterBackGround>
+      <Typography variant="h1" sx={{ color: 'white' }}>
+        {value.toLocaleUpperCase()}
+      </Typography>
+    </StyledLetterBackGround>
+  )
+}
+export const StyledBox = styled(Box)({
+  width: '900px',
+  height: 'calc(80vh - 100px)',
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+})
+
+export const StyledTimelineBox = styled(Box)({
+  borderRadius: '10px',
+  border: '1px solid #1212121A',
+  margin: '20px 0',
+  padding: '20px',
+  maxWidth: '600px',
+})
+
+export const StyledTimeLineItem = styled(TimelineItem)(({ theme }) => ({
+  '& .MuiTimelineDot-root': {
+    backgroundColor: theme.palette.secondary,
+  },
+  '&:before': {
+    content: 'none',
+  },
+}))
+
+export const StyledLeftContainer = styled(Box)({
+  maxHeight: 'calc(80vh - 50px)',
+  //  maxHeight: 'calc(80vh - 130px)', 1st default value
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px',
+    height: '0px',
+  },
+})
+
+export const StyledCardData = styled(Card)({
+  borderRadius: '4px',
+  width: 'auto',
+  backgroundColor: '#1E19F51A',
+  padding: '6px 10px',
+})
+
+export const StyledBoxDetails = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '950px',
+  padding: '20px',
+})

package/src/components/LinearProgress.tsx

@@ -0,0 +1,19 @@
+import {
+  BoxProps,
+  styled,
+  Box,
+  LinearProgress as MuiLinearProgress,
+} from '@mui/material'
+
+export const LinearProgress = styled((props: BoxProps) => (
+  <Box {...props}>
+    <MuiLinearProgress color={'inherit'} sx={{ height: '4px' }} />
+  </Box>
+))(({ theme }) => ({
+  width: '100%',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: 400,
+  color: theme.palette.primary.main,
+}))

package/src/components/ListItemButton.tsx

@@ -0,0 +1,95 @@
+import { ChevronRight } from '@mui/icons-material'
+import {
+  Box,
+  ListItemButton as MuiListItemButton,
+  ListItemButtonProps,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface Props extends ListItemButtonProps {
+  hasChildren?: boolean
+  isActive?: boolean
+  label: String
+  icon?: any
+}
+
+export const ListItemButton = ({
+  isActive,
+  hasChildren,
+  onClick,
+  label,
+  icon: Icon,
+}: Props) => {
+  return (
+    <StyledListItemButton isActive={isActive} onClick={onClick}>
+      {Icon ? (
+        <ListItemIcon>{<Icon />}</ListItemIcon>
+      ) : (
+        <Box minWidth={16}></Box>
+      )}
+      <ListItemText primary={label} />
+    </StyledListItemButton>
+  )
+}
+
+export const StyledChevronIcon = styled(ChevronRight)<{ open: boolean }>(
+  ({ theme, open }) => ({
+    transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+    transition: 'transform 0.2s ease-in-out',
+  }),
+)
+
+export const StyledListItemButton = styled(MuiListItemButton)<{
+  isActive: boolean
+  children: ReactNode
+  dropDown?: boolean
+}>(({ theme, isActive, dropDown = false }) => ({
+  gap: '10px',
+  fontWeight: 'bold',
+  padding: '8px 20px',
+  backgroundColor: isActive && '#1d1d1d',
+  '&:hover': {
+    backgroundColor: isActive && '#1d1d1d',
+  },
+  '&:after': {
+    content: '""',
+    position: 'absolute',
+    height: '100%',
+    left: 0,
+    top: 0,
+    width: isActive ? '6px' : 0,
+    opacity: isActive ? (dropDown ? 0 : 1) : 0,
+    transition: theme.transitions.create(['opacity', 'width']),
+    background: theme.palette.common.yellow,
+    borderTopRightRadius: '3px',
+    borderBottomRightRadius: '3px',
+  },
+  '&.MuiButton-endIcon, &.MuiButton-startIcon': {
+    transition: theme.transitions.create(['color']),
+
+    '&.MuiSvgIcon-root': {
+      fontSize: 'inherit',
+      transition: 'none',
+    },
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: theme.typography.pxToRem(20),
+    marginRight: theme.spacing(1),
+    // color: isActive
+    //   ? theme.sidebar.menuItemColorActive
+    //   : theme.sidebar.menuItemIconColor,
+  },
+  '& .MuiTypography-root': {
+    color: theme.palette.common.white,
+  },
+  '& svg': {
+    color: theme.palette.common.white,
+  },
+  '& .MuiListItemIcon-root': {
+    minWidth: 0,
+    maxWidth: '1rem',
+  },
+}))

package/src/components/LoginForm.tsx

@@ -0,0 +1,279 @@
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import {
+  Alert,
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  Typography,
+  styled,
+} from '@mui/material'
+import axiosBase from 'axios'
+import Cookies from 'js-cookie'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import ActionButton from './ActionButton'
+import { FormTextField } from './HookForm'
+import axios from '../config/axios'
+import ResetPassword from './ResetPassword'
+import { Link } from 'react-router-dom'
+import { DialogButton } from './ModalButtons'
+import adminAxios from '../utils/adminAxios'
+
+export function LoginForm({
+  loginUrl,
+  showSuperAdminForm,
+}: {
+  loginUrl?: string
+  showSuperAdminForm?: boolean
+}) {
+  const [showPassword, setShowPassword] = useState(false)
+  const [forgotMail, setForgotMail] = useState(null)
+  const [forgotPassword, setForgotPassword] = useState(true)
+  const [resetPassword, setResetPassword] = useState(false)
+  const { handleSubmit, control } = useForm()
+  const [error, setError] = useState('')
+
+  const onSubmit = async (values) => {
+    try {
+      const res = await axiosBase({
+        method: 'POST',
+        baseURL: process.env.REACT_APP_API_HOST,
+        url: loginUrl ? loginUrl : `/auth-server/auth/login`,
+        data: values,
+      })
+      Cookies.set('campx_tenant', res?.data?.subDomain)
+      Cookies.set('campx_session_key', res.data?.token)
+      window.location.href = window.location.origin + `/${res?.data?.subDomain}`
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(err)
+      setError(err?.response?.data?.message ?? 'Server Error')
+    }
+  }
+
+  const [mailSent, setMailSent] = useState(false)
+
+  async function handleSendMail() {
+    try {
+      await axios
+        .get(
+          `https://api.campx.dev/auth-server/auth/forgot-password?email=${forgotMail}`,
+        )
+        .then((res) => {
+          setForgotMail(null)
+          setMailSent(true)
+          setError(null)
+        })
+    } catch (err) {
+      if (!forgotMail) {
+        setError('Email should not be empty')
+        setMailSent(false)
+      } else {
+        setError(err.response.data.message ?? 'Server Error')
+        setMailSent(false)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const restLink = window.location.pathname.split('/')[1]
+    if (restLink == 'reset-password') {
+      setResetPassword(true)
+    }
+  }, [])
+
+  return (
+    <Box sx={{ position: 'relative', height: '100%' }}>
+      {resetPassword ? (
+        <>
+          <ResetPassword />
+        </>
+      ) : forgotPassword ? (
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Stack gap={'30px'} sx={{ display: resetPassword ? 'none' : 'flex' }}>
+            <FormTextField
+              control={control}
+              name="username"
+              label="User ID"
+              required
+            />
+            <FormTextField
+              control={control}
+              name="password"
+              label="Password"
+              type={showPassword ? 'text' : 'password'}
+              required
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      aria-label="toggle password visibility"
+                      onClick={() => setShowPassword((prev) => !prev)}
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+            <ActionButton type="submit">Login</ActionButton>
+            <Typography
+              variant="h6"
+              align="right"
+              onClick={() => setForgotPassword(false)}
+            >
+              <StyledLink to="/">Forgot Password</StyledLink>
+            </Typography>
+          </Stack>
+        </form>
+      ) : (
+        <>
+          <Stack gap={'30px'}>
+            <FormTextField
+              control={control}
+              name="email"
+              label="Email"
+              required
+              onChange={(e) => setForgotMail(e.target.value)}
+            />
+            <Button onClick={() => handleSendMail()}>Send Email</Button>
+
+            <Typography
+              variant="subtitle2"
+              onClick={() => {
+                setForgotPassword(true)
+                setError('')
+                setMailSent(false)
+              }}
+              align="right"
+            >
+              <StyledLink to="/">Login here</StyledLink>
+            </Typography>
+
+            {mailSent && (
+              <Alert severity="success">
+                Reset password link has been sent to your email.
+              </Alert>
+            )}
+          </Stack>
+        </>
+      )}
+
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+
+      {showSuperAdminForm && (
+        <Box
+          sx={{
+            position: 'absolute',
+            bottom: '20px',
+            right: '20px',
+          }}
+        >
+          <DialogButton
+            title="Super Admin Login"
+            anchor={({ open }) => (
+              <Button onClick={open} size="small" variant="text">
+                Super Admin Login
+              </Button>
+            )}
+            content={({ close }) => <SuperAdminLoginForm close={close} />}
+          />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
+  color: 'black',
+})
+
+export default LoginForm
+
+const SuperAdminLoginForm = ({ close }) => {
+  const [showPassword, setShowPassword] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const { handleSubmit, control } = useForm({
+    defaultValues: null,
+  })
+  const [error, setError] = useState('')
+
+  const onSubmit = async (values) => {
+    setLoading(true)
+    try {
+      const res = await adminAxios.post(`/auth/login`, values)
+      Cookies.set('campx_admin_session_key', res?.data?.cookie)
+
+      setLoading(false)
+      window.location.href = '/campx'
+    } catch (err) {
+      setLoading(false)
+      setError(err.response.data.message ?? 'Server Error')
+    }
+  }
+
+  const onError = (e) => {
+    console.log(e)
+  }
+
+  return (
+    <Box width={'100%'} marginTop="20px">
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <Stack gap={'40px'}>
+          <Typography variant="h6" textAlign={'center'}>
+            Sign in to Super Admin Account
+          </Typography>
+          <FormTextField
+            control={control}
+            name="username"
+            label="Username/Email"
+            required
+          />
+          <FormTextField
+            control={control}
+            name="password"
+            label="Password"
+            type={showPassword ? 'text' : 'password'}
+            required
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          <ActionButton
+            type="submit"
+            fullWidth
+            disabled={loading}
+            loading={loading}
+          >
+            Login
+          </ActionButton>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}

package/src/components/MediaRow/MediaRow.tsx

@@ -0,0 +1,67 @@
+import { Delete } from '@mui/icons-material'
+import { Box, IconButton, styled, Typography, Stack } from '@mui/material'
+import Image from '../Image'
+
+interface MediaRowProps {
+  list: any[]
+  onDelete?: (mediaKey: string) => void
+}
+
+export default function MediaRow({ list, onDelete }: MediaRowProps) {
+  return (
+    <Box sx={{ display: 'flex', gap: '1rem', width: '100%', flexWrap: 'wrap' }}>
+      {list.map((item, index) => (
+        <>{renderMediaCard(item, onDelete)}</>
+      ))}
+    </Box>
+  )
+}
+
+const renderMediaCard = (item: any, onDelete?: (mediaKey: string) => void) => {
+  switch (item?.type) {
+    case 'image':
+      return (
+        <StyledImageContainer>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => {
+              onDelete(item?.key)
+            }}
+          >
+            <Delete fontSize="small" />
+          </IconButton>
+          <Image src={item?.url} height={120} width={150} alt={''} />
+        </StyledImageContainer>
+      )
+    case 'file':
+      return (
+        <Stack
+          direction={'row'}
+          alignItems="center"
+          justifyContent={'space-between'}
+          gap={'10px'}
+        >
+          <Typography>{item?.fileName}</Typography>
+          <IconButton color="error">
+            <Delete fontSize="small" />
+          </IconButton>
+        </Stack>
+      )
+
+    default:
+      break
+  }
+}
+
+const StyledImageContainer = styled(Box)(({ theme }) => ({
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  padding: '0.7rem',
+  position: 'relative',
+  '& > button': {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+}))

package/src/components/MediaRow/index.tsx

@@ -0,0 +1 @@
+export { default } from './MediaRow'