fix: improve no disponibilites handler

Author: baptadn

web/components/Place/Booking/BookingFilledUntil.tsx

@@ -1,39 +1,50 @@
-import React, { useEffect, useState } from 'react'
-import { Box, Text, Flex } from '@chakra-ui/react'
+import { Box, Flex, Text } from '@chakra-ui/react'
 import isAfter from 'date-fns/isAfter'
-import { format } from '~utils/date'
-import { Espace } from '~typings/api'
 import { useTranslation } from 'next-i18next'
+import { useEffect, useState } from 'react'
+import { Espace } from '~typings/api'
+import { format } from '~utils/date'
 
 interface Props {
-  start: Date
+  start?: Date
   place: Espace
+  isMonthlyView?: boolean
 }
 
-const BookingFilledUntil = ({ start, place }: Props) => {
-  const { t } = useTranslation('place')
+const BookingFilledUntil = ({ start, place, isMonthlyView = false }: Props) => {
   const [isVisible, setVisible] = useState(false)
+  const { t } = useTranslation('place')
 
+  const isAllCampaign = place.disponibilities.every((d) => d.campaign)
   const typeMessage =
-    !place.filledUntil || place.disponibilities.length === 0
+    !place.filledUntil || place.disponibilities.length === 0 || isAllCampaign
       ? 'empty'
       : 'default'
 
   useEffect(() => {
-    if (!start) return
+    if (!start && !isMonthlyView) {
+      return
+    }
+
     setVisible(
       isAfter(start, new Date(place?.filledUntil)) ||
-        place.disponibilities.length === 0,
+        place.disponibilities.length === 0 ||
+        isAllCampaign,
     )
   }, [start])
 
-  if (!isVisible) return null
+  if (!isVisible) {
+    return null
+  }
+
   return (
     <Flex
       layerStyle="absoluteFull"
       pt="60px"
       justifyContent="center"
       alignItems="center"
+      zIndex={isMonthlyView ? 99 : 1}
+      bg={isMonthlyView ? 'rgba(244, 245, 249, 0.8)' : 'transparent'}
     >
       <Flex
         zIndex={99}
@@ -44,11 +55,15 @@ const BookingFilledUntil = ({ start, place }: Props) => {
         maxW="800px"
       >
         <Box maxW="container.md">
-          <Text>
-            {t(`detail.filledUntil.title.${typeMessage}`, {
-              date: format(place.filledUntil, 'dd/MM/yyyy'),
-            })}
-          </Text>
+          {typeMessage === 'default' ? (
+            <Text>
+              {t(`detail.filledUntil.title.${typeMessage}`, {
+                date: format(place.filledUntil, 'dd/MM/yyyy'),
+              })}
+            </Text>
+          ) : (
+            <Text>{t(`detail.filledUntil.title.${typeMessage}`)}</Text>
+          )}
           <Text color="grayText.1">
             {t(`detail.filledUntil.text.${typeMessage}`)}
           </Text>

web/components/Place/Booking/BookingScheduleContainer.tsx

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Button,
-  Center,
-  Flex,
-  Text,
-  useBreakpointValue,
-} from '@chakra-ui/react'
+import { Box, Button, Flex, Text, useBreakpointValue } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import { useEffect, useMemo, useState } from 'react'
 import BookingRecap from '~components/Place/Booking/BookingRecapInsert/BookingRecap'
@@ -44,13 +37,7 @@ const BookingScheduleContainer = ({ place }: Props) => {
       px={{ base: 4, lg: 6 }}
       py={6}
       borderRadius="sm"
-      pos="relative"
     >
-      {events.length === 0 && (
-        <Center position="absolute" zIndex={100} bg="whiteAlpha.800" inset={0}>
-          <Text textStyle="h2">{t('list.noDisponibility')}</Text>
-        </Center>
-      )}
       <Flex
         justifyContent="space-between"
         pb={{ base: 6, lg: 14 }}

web/components/Place/Booking/BookingScheduleMonth.tsx

@@ -1,14 +1,15 @@
+import { Box, Flex, useBreakpointValue } from '@chakra-ui/react'
 import FullCalendar, { createPlugin } from '@fullcalendar/react'
-import React, { useRef } from 'react'
+import frLocale from '@fullcalendar/core/locales/fr'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
-import frLocale from '@fullcalendar/core/locales/fr'
-import { Box, Flex, useBreakpointValue } from '@chakra-ui/react'
-import { Espace } from '~typings/api'
-import BookingScheduleSlot from '~components/Place/Booking/BookingScheduleSlot'
-import { ScheduleEvent } from '~@types/schedule-event.d'
 import addMonths from 'date-fns/addMonths'
 import isSameDay from 'date-fns/isSameDay'
+import { useRef } from 'react'
+import { ScheduleEvent } from '~@types/schedule-event.d'
+import BookingScheduleSlot from '~components/Place/Booking/BookingScheduleSlot'
+import { Espace } from '~typings/api'
+import BookingFilledUntil from '~components/Place/Booking/BookingFilledUntil'
 
 const view = createPlugin({
   views: {
@@ -123,6 +124,7 @@ const BookingScheduleMonth = ({ place, events }: Props) => {
           />
         )}
       </Flex>
+      <BookingFilledUntil isMonthlyView place={place} />
     </Flex>
   )
 }