Add CookiePermissionSnackbar component to Landing page, Better UI to selected dates

4 files changed, 73 insertions, 12 deletions

diff --git a/package.json b/package.json
index 3e9cd92..ea12bfe 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "donetick",
   "private": true,
-  "version": "0.1.73",
+  "version": "0.1.74",
   "type": "module",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
diff --git a/src/views/Chores/ChoreCard.jsx b/src/views/Chores/ChoreCard.jsx
index fdf025e..29ee933 100644
--- a/src/views/Chores/ChoreCard.jsx
+++ b/src/views/Chores/ChoreCard.jsx
@@ -3,7 +3,6 @@ import {
   Check,
   Delete,
   Edit,
-  HowToReg,
   KeyboardDoubleArrowUp,
   LocalOffer,
   ManageSearch,
@@ -39,7 +38,11 @@ import moment from 'moment'
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { API_URL } from '../../Config'
-import { MarkChoreComplete, SkipChore, UpdateChoreAssignee } from '../../utils/Fetcher'
+import {
+  MarkChoreComplete,
+  SkipChore,
+  UpdateChoreAssignee,
+} from '../../utils/Fetcher'
 import { Fetch } from '../../utils/TokenManager'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import DateModal from '../Modals/Inputs/DateModal'
@@ -226,9 +229,7 @@ const ChoreCard = ({
           onChoreUpdate(newChore, 'assigned')
         })
       }
-    }
-    )
-    
+    })
   }
   const handleCompleteWithNote = note => {
     Fetch(`${API_URL}/chores/${chore.id}/do`, {
@@ -314,8 +315,28 @@ const ChoreCard = ({
       return 'Yearly'
     } else if (chore.frequencyType === 'days_of_the_week') {
       let days = JSON.parse(chore.frequencyMetadata).days
-      days = days.map(d => moment().day(d).format('ddd'))
-      return days.join(', ')
+      if (days.length > 4) {
+        const allDays = [
+          'Sunday',
+          'Monday',
+          'Tuesday',
+          'Wednesday',
+          'Thursday',
+          'Friday',
+          'Saturday',
+        ]
+        const selectedDays = days.map(d => moment().day(d).format('dddd'))
+        const notSelectedDay = allDays.filter(
+          day => !selectedDays.includes(day),
+        )
+        const notSelectedShortdays = notSelectedDay.map(d =>
+          moment().day(d).format('ddd'),
+        )
+        return `Daily except ${notSelectedShortdays.join(', ')}`
+      } else {
+        days = days.map(d => moment().day(d).format('ddd'))
+        return days.join(', ')
+      }
     } else if (chore.frequencyType === 'day_of_the_month') {
       let freqData = JSON.parse(chore.frequencyMetadata)
       const months = freqData.months.map(m => moment().month(m).format('MMM'))
@@ -629,10 +650,9 @@ const ChoreCard = ({
           onClose={() => {
             setIsChangeAssigneeModalOpen(false)
           }}
-          onSave={(selected)=>{            
+          onSave={selected => {
             handleAssigneChange(selected.id)
-          }
-        }
+          }}
         />
         <ConfirmationModal config={confirmModelConfig} />
         <TextModal
diff --git a/src/views/Landing/CookiePermissionSnackbar.jsx b/src/views/Landing/CookiePermissionSnackbar.jsx
new file mode 100644
index 0000000..e786794
--- /dev/null
+++ b/src/views/Landing/CookiePermissionSnackbar.jsx
@@ -0,0 +1,40 @@
+import { Button, Snackbar } from '@mui/joy'
+import Cookies from 'js-cookie'
+import { useEffect, useState } from 'react'
+
+const CookiePermissionSnackbar = () => {
+  useEffect(() => {
+    const cookiePermission = Cookies.get('cookies_permission')
+
+    if (cookiePermission !== 'true') {
+      setOpen(true)
+    }
+  }, [])
+
+  const [open, setOpen] = useState(false)
+  const handleClose = () => {
+    // Cookies.set('cookies_permission', 'true')
+    setOpen(false)
+  }
+
+  return (
+    <Snackbar
+      open={open}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      onClose={(event, reason) => {
+        if (reason === 'clickaway') {
+          return
+        }
+        // Cookies.set('cookies_permission', 'true')
+        handleClose()
+      }}
+    >
+      We use cookies to ensure you get the best experience on our website.
+      <Button variant='soft' onClick={handleClose}>
+        Accept
+      </Button>
+    </Snackbar>
+  )
+}
+
+export default CookiePermissionSnackbar
diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx
index 7e70a03..a323ecc 100644
--- a/src/views/Landing/Landing.jsx
+++ b/src/views/Landing/Landing.jsx
@@ -3,6 +3,7 @@ import AOS from 'aos'
 import 'aos/dist/aos.css'
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
+import CookiePermissionSnackbar from './CookiePermissionSnackbar'
 import DemoAssignee from './DemoAssignee'
 import DemoHistory from './DemoHistory'
 import DemoMyChore from './DemoMyChore'
@@ -52,7 +53,7 @@ const Landing = () => {
           mb: 5,
         }}
       ></Box>
-
+      <CookiePermissionSnackbar />
       <Footer />
     </Container>
   )