@campxdev/shared 1.5.3 → 1.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/assets/fonts/avenir/index.ts

@@ -1,2 +1,13 @@
-const avenirFont = require('./Avenir.ttc')
-export { avenirFont }
+const avenirRegular = require('./Avenir-Book.ttf')
+const avenirMedium = require('./Avenir-Medium.ttf')
+const avenirMediumObliquue = require('./Avenir-MediumOblique.ttf')
+const avenirHeavy = require('./Avenir-Heavy.ttf')
+const avenirHeavyObliquue = require('./Avenir-HeavyOblique.ttf')
+
+export {
+  avenirRegular,
+  avenirHeavy,
+  avenirHeavyObliquue,
+  avenirMedium,
+  avenirMediumObliquue,
+}

package/src/assets/fonts/poppins/index.ts

@@ -3,5 +3,16 @@ const semiboldPoppins = require('./Poppins-SemiBold.ttf')
 const mediumPoppins = require('./Poppins-Medium.ttf')
 const lightPoppins = require('./Poppins-Light.ttf')
 const regularPoppins = require('./Poppins-Regular.ttf')
+const regularPoppinsItalic = require('./Poppins-Italic.ttf')
+const mediumPoppinsItalic = require('./Poppins-MediumItalic.ttf')
+const lightPoppinsItalic = require('./Poppins-LightItalic.ttf')
 
-export { semiboldPoppins, mediumPoppins, lightPoppins, regularPoppins }
+export {
+  semiboldPoppins,
+  mediumPoppins,
+  lightPoppins,
+  regularPoppins,
+  regularPoppinsItalic,
+  mediumPoppinsItalic,
+  lightPoppinsItalic,
+}

package/src/components/FilterComponents/FilterButton.tsx

@@ -1,5 +1,6 @@
 import { Tune } from '@mui/icons-material'
 import { Box, styled } from '@mui/material'
+import { useEffect, useState } from 'react'
 
 const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
   ({ theme, size }) => ({
@@ -37,14 +38,15 @@ export default function FilterButton({
   ...props
 }: {
   onClick: (e: any) => void
-  filtersApplied?: boolean
   size?: 'regular' | 'large'
+  filtersApplied?: any
 }) {
   const handleClick = (e) => {
     e.stopPropagation()
     if (!onClick) return
     onClick(e)
   }
+
   return (
     <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
       {filtersApplied && <StyledNotify />}

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -1,11 +1,47 @@
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
+  styled,
+  Typography,
 } from '@mui/material'
 import useConfirm from './useConfirm'
+const animatedImage = require('./animation.gif')
+const StyledImage = styled((props: any) => (
+  <Box>
+    <img {...props} />
+  </Box>
+))(({ theme }) => ({
+  width: '154px',
+  height: '172px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  '> img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+}))
+
+const StyledDialogContent = styled(Box)(({ theme }) => ({
+  height: '360px',
+  width: '570px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+}))
+
+const StyledCancel = styled(Button)(() => ({
+  color: 'rgba(18, 18, 18, 0.5)',
+  border: '0.5px solid #12121280',
+  height: '40px',
+}))
 
 const PopupConfirm = () => {
   const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
@@ -18,16 +54,26 @@ const PopupConfirm = () => {
       open={isOpen}
       transitionDuration={150}
     >
-      <DialogTitle>Confirm</DialogTitle>
-      <DialogContent sx={{ minHeight: '40px' }}>{prompt}</DialogContent>
-      <DialogActions>
-        <Button variant="contained" color="primary" onClick={proceed}>
-          Ok
-        </Button>
-        <Button color="secondary" variant="outlined" onClick={cancel}>
-          Cancel
-        </Button>
-      </DialogActions>
+      <StyledDialogContent>
+        <Box sx={{ marginBottom: '20px' }}>
+          {' '}
+          <StyledImage src={animatedImage} alt="Upload Image" />
+        </Box>
+
+        <Typography
+          sx={{ fontSize: '16px', fontFamily: 'Poppins', fontWeight: '500' }}
+        >
+          {prompt}
+        </Typography>
+        <Box sx={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
+          <StyledCancel variant="text" onClick={cancel}>
+            No, Cancel
+          </StyledCancel>
+          <Button variant="outlined" onClick={proceed} sx={{ height: '40px' }}>
+            Yes, I’m. Sure
+          </Button>
+        </Box>
+      </StyledDialogContent>
     </Dialog>
   )
 }

package/src/components/ToastContainer/ToastContainer.tsx

@@ -1,7 +1,8 @@
-import { Done } from '@mui/icons-material'
+import { Done, Close, WarningAmberRounded } from '@mui/icons-material'
 import { Box } from '@mui/material'
 import { Slide, ToastContainer as ReactToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
 
 export default function ToastContainer() {
   return (
@@ -18,12 +19,26 @@ export default function ToastContainer() {
       draggable
       pauseOnHover
       theme="colored"
-      icon={<Icon />}
+      icon={({ type }) => <Icon type={type} />}
     />
   )
 }
 
-const Icon = () => {
+const Icon = ({ type }) => {
+  const renderIcon = () => {
+    switch (type) {
+      case 'error':
+        return <Close />
+      case 'success':
+        return <Done />
+      case 'warning':
+        return <WarningAmberRounded />
+
+      default:
+        return <Done />
+    }
+  }
+
   return (
     <Box
       sx={{
@@ -36,7 +51,7 @@ const Icon = () => {
         justifyContent: 'center',
       }}
     >
-      <Done />
+      {renderIcon()}
     </Box>
   )
 }

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { default as useFetch } from './useFetch'
 export * from './useRouter'
 export { default as useAuth } from './useAuth'
+export { default as useFilter } from './useFilters'

package/src/hooks/useFilters.ts

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react'
+
+export default function useFilters(initialState, key?: any) {
+  const [filters, setFilters] = useState(initialState)
+  const [filtersApplied, setFiltersApplied] = useState(false)
+
+  useEffect(() => {
+    const prevFilters = getSessionFilters()
+    setFilters({
+      ...filters,
+      ...prevFilters,
+    })
+  }, [])
+
+  function onFilterChange(modified) {
+    setFilters({
+      ...filters,
+      ...modified,
+    })
+
+    const filterData = {
+      ...filters,
+      ...modified,
+    }
+
+    const sessionData = Object.keys(filterData).map((item, key) => {
+      if (filtersCheck(item, filterData)) {
+        return { key: item, value: filterData[item] }
+      }
+    })
+
+    const filteredSessionArray = sessionData.filter(
+      (value) => value !== undefined,
+    )
+
+    if (filteredSessionArray?.length > 0) {
+      sessionStorage.setItem(key, JSON.stringify(filteredSessionArray))
+      setFiltersApplied(true)
+    }
+  }
+
+  function filtersCheck(item: any, filterData: any) {
+    switch (true) {
+      case !!filterData[item] &&
+        item !== 'limit' &&
+        item !== 'offset' &&
+        item !== 'page':
+        return true
+      default:
+        return false
+    }
+  }
+
+  function clearFilters() {
+    setFilters(initialState)
+    setFiltersApplied(false)
+    sessionStorage.removeItem(key)
+  }
+
+  const getSessionFilters = () => {
+    try {
+      if (sessionStorage.getItem(key)) {
+        setFiltersApplied(true)
+        const parsed = JSON.parse(sessionStorage.getItem(key))
+        const filters = parsed?.reduce(
+          (acc, curr) => ({ ...acc, [curr.key]: curr.value }),
+          {},
+        )
+        return filters
+      }
+    } catch (error) {}
+  }
+
+  return {
+    filters,
+    onFilterChange,
+    clearFilters,
+    filtersApplied,
+  }
+}

package/src/theme/customCssBaseline.ts

@@ -1,50 +1,109 @@
-import { avenirFont } from '../assets/fonts/avenir'
+import {
+  avenirHeavy,
+  avenirHeavyObliquue,
+  avenirMedium,
+  avenirMediumObliquue,
+  avenirRegular,
+} from '../assets/fonts/avenir'
 import {
   lightPoppins,
   mediumPoppins,
   regularPoppins,
   semiboldPoppins,
+  lightPoppinsItalic,
+  mediumPoppinsItalic,
+  regularPoppinsItalic,
 } from '../assets/fonts/poppins'
 
-const uniCode =
-  'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF'
-
 export const customCssBaseline = `
+    :root{
+      --toastify-color-info: #3498db;
+      --toastify-color-success: #7EB872;
+      --toastify-color-warning: #f1c40f;
+      --toastify-color-error: #BC2C3D;
+    }
+
     html, body {
       font-size: 14px;
       font-family: Avenir, sans-serif;
       font-weight: 400;
     }
+    
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirRegular}) format('truetype');
+      font-display: swap;
+      font-weight: 400;
+    }
     @font-face {
       font-family: Avenir;
-      src: url(${avenirFont});
+      src: url(${avenirMedium}) format('truetype');
       font-display: swap;
+      font-weight: 500;
     }
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirMediumObliquue}) format('truetype');
+      font-display: swap;
+      font-weight: 500;
+      font-style: oblique;
+    }
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirHeavy}) format('truetype');
+      font-display: swap;
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirHeavyObliquue}) format('truetype');
+      font-display: swap;
+      font-weight: 600;
+      font-style: oblique;
+    }
+
     @font-face {
       font-family: Poppins;
       src: url(${lightPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
       font-display: swap;
       font-weight: 300;
     }
     @font-face {
       font-family: Poppins;
-      src: url(${mediumPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
+      src: url(${lightPoppinsItalic}) format('truetype');
       font-display: swap;
-      font-weight: 500;
+      font-weight: 300;
+      font-style: italic;
     }
     @font-face {
       font-family: Poppins;
       src: url(${regularPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
       font-display: swap;
       font-weight: 400;
     }
+    @font-face {
+      font-family: Poppins;
+      src: url(${regularPoppinsItalic}) format('truetype');
+      font-display: swap;
+      font-weight: 400;
+      font-style: italic;
+    }
+    @font-face {
+      font-family: Poppins;
+      src: url(${mediumPoppins}) format('truetype');
+      font-display: swap;
+      font-weight: 500;
+    }
+    @font-face {
+      font-family: Poppins;
+      src: url(${mediumPoppinsItalic}) format('truetype');
+      font-display: swap;
+      font-weight: 500;
+      font-style: italic;
+    }
     @font-face {
       font-family: Poppins;
       src: url(${semiboldPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
       font-display: swap;
       font-weight: 600;
     }

package/src/theme/index.css

@@ -26,50 +26,3 @@
   --toastify-color-success: #7eb872;
   --toastify-color-warning: #f1c40f;
 }
-
-@font-face {
-  font-family: Avenir;
-  src: url('../assets/fonts/avenir/Avenir.ttc');
-}
-
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-SemiBold.otf');
-}
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-Medium.otf');
-}
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-Light.otf');
-}
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-Regular.otf');
-}
-
-.Toastify__toast {
-  border-radius: 10px;
-  padding: 0;
-}
-
-.Toastify__toast-body {
-  font-family: Poppins;
-  font-size: 16px;
-  line-height: 1.5;
-  color: #fff;
-  font-weight: 600;
-  padding: 0;
-  margin: 0;
-  height: 64px;
-  align-items: stretch;
-}
-.Toastify__toast-body > div:last-child {
-  align-self: center;
-  margin-left: 30px;
-}
-
-.Toastify__toast > button > svg {
-  display: none;
-}

package/src/theme/muiTheme.ts

@@ -135,7 +135,7 @@ const muiTheme = createTheme({
         root: {
           color: '#121212',
           fontSize: '14px',
-          fontWeight: 600,
+          fontWeight: 500,
           fontFamily: PRIMARY_FONT,
         },
         h1: {
@@ -167,12 +167,12 @@ const muiTheme = createTheme({
         },
         subtitle1: {
           fontSize: '14px',
-          fontWeight: 600,
+          fontWeight: 500,
           color: '#121212b3',
         },
         subtitle2: {
           fontSize: '13px',
-          fontWeight: 600,
+          fontWeight: 500,
           color: '#959595',
         },
       },

package/src/utils/logout.ts

@@ -1,4 +1,5 @@
 import Cookies from 'js-cookie'
+import { useConfirm } from '../components'
 import axios, { axiosErrorToast } from '../config/axios'
 import { isDevelopment } from '../constants'