willba-component-library 0.2.58 → 0.2.59

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -29,14 +29,14 @@ export default function FilterCalendar({
   requestDates,
   showFeedback,
   noActiveSelection,
-  rangeContext,
+  rangeContext: outerRangeContext,
 }: FilterCalendarTypes) {
   const themePalette = useTheme({ palette })
 
   // Translations
   useUpdateTranslations({ language })
   const { t } = useTranslation()
-
+  console.log('1', t('noCheckIn'))
   const {
     setCalendarRange,
     handleClearDates,
@@ -44,16 +44,18 @@ export default function FilterCalendar({
     disabledDates,
     setDisabledDates,
     updateCalendarMonthNavigation,
-    updateCalendarDefaultMoth,
+    updateCalendarDefaultMonth,
     setUpdateCalendarMonthNavigation,
     calendarHasError,
     setCalendarHasError,
     setUpdatedForSubmit,
+    rangeContext,
   } = useFilterCalendar({
     onSubmit,
     setToggleCalendar,
     noActiveSelection,
     toggleCalendar,
+    outerRangeContext,
   })
 
   // Display component after fully loaded
@@ -91,7 +93,7 @@ export default function FilterCalendar({
               setUpdateCalendarMonthNavigation={
                 setUpdateCalendarMonthNavigation
               }
-              updateCalendarDefaultMoth={updateCalendarDefaultMoth}
+              updateCalendarDefaultMonth={updateCalendarDefaultMonth}
               loadingData={loadingData}
               showFeedback={showFeedback}
               noActiveSelection={noActiveSelection}

package/src/components/FilterCalendar/hooks/useFilterCalendar.ts

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react'
 import { DateRange, Matcher } from 'react-day-picker'
 import { format } from 'date-fns'
+import { RangeContext } from 'src/core/components/calendar/CalendarTypes'
 
 type Props = {
   onSubmit: (val: any) => void
   setToggleCalendar: (val: boolean) => void
   noActiveSelection?: boolean
   toggleCalendar?: boolean
+  outerRangeContext?: RangeContext
 }
 
 export const useFilterCalendar = ({
@@ -14,16 +16,20 @@ export const useFilterCalendar = ({
   setToggleCalendar,
   noActiveSelection,
   toggleCalendar,
+  outerRangeContext,
 }: Props) => {
   // State
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
+  const [rangeContext, setRangeContext] = useState<RangeContext | undefined>(
+    outerRangeContext
+  )
   const [initialCalendarRange, setInitialCalendarRange] = useState<
     DateRange | undefined
   >()
   const [disabledDates, setDisabledDates] = useState<Matcher[]>([])
   const [updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation] =
     useState<boolean>(false)
-  const [updateCalendarDefaultMoth, setUpdateCalendarDefaultMoth] =
+  const [updateCalendarDefaultMonth, setUpdateCalendarDefaultMonth] =
     useState<number>(0)
 
   const [calendarHasError, setCalendarHasError] = useState<boolean>(false)
@@ -42,8 +48,9 @@ export const useFilterCalendar = ({
     if (startDateParam && endDateParam) {
       if (noActiveSelection) {
         handleClearDates()
-        setUpdateCalendarDefaultMoth((prev) => prev + 1)
+        setUpdateCalendarDefaultMonth((prev) => prev + 1)
         setUpdatedForSubmit(false)
+        setRangeContext(outerRangeContext)
         setInitialCalendarRange({
           from: new Date(startDateParam),
           to: new Date(endDateParam),
@@ -110,9 +117,10 @@ export const useFilterCalendar = ({
     calendarRange,
     disabledDates,
     updateCalendarMonthNavigation,
-    updateCalendarDefaultMoth,
+    updateCalendarDefaultMonth,
     calendarHasError,
     setCalendarHasError,
     setUpdatedForSubmit,
+    rangeContext,
   }
 }

package/src/core/components/calendar/Calendar.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { startOfDay, isBefore, endOfDay, isEqual, isAfter } from 'date-fns'
+import { startOfDay } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
 import { DateRange, DayPicker } from 'react-day-picker'
@@ -36,7 +36,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       setDisabledDates,
       updateCalendarMonthNavigation,
       setUpdateCalendarMonthNavigation,
-      updateCalendarDefaultMoth,
+      updateCalendarDefaultMonth,
       loadingData,
       showFeedback,
       palette,
@@ -61,7 +61,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
         disableCalendarDates,
         calendarRange,
         updateCalendarMonthNavigation,
-        updateCalendarDefaultMoth,
+        updateCalendarDefaultMonth,
       }
     )
 
@@ -72,20 +72,16 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       newDisableCalendarDates,
     })
 
+    console.log('2', t('noCheckIn'))
+
     // Handle tooltip
     useCalendarTooltips({
-      calendarRange,
-      updateCalendarMonthNavigation,
-      overlappingDate,
-      updateCalendarDefaultMoth,
       showFeedback,
     })
 
     // Handle loading spinner
     useCalendarLoadingSpinner({
       loadingData,
-      updateCalendarMonthNavigation,
-      updateCalendarDefaultMoth,
     })
 
     // Handle the date selection and availability for selection logic.
@@ -131,7 +127,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       <div className="will-filter-bar-calendar" ref={ref}>
         <div className="will-calendar-filter-container">
           <DayPicker
-            key={updateCalendarDefaultMoth}
+            key={updateCalendarDefaultMonth}
             id="will-calendar"
             mode="range"
             locale={language === 'en' ? enUS : fi}

package/src/core/components/calendar/CalendarTypes.ts

@@ -39,7 +39,7 @@ export type CalendarTypes = {
   palette?: Palette
   updateCalendarMonthNavigation?: boolean
   setUpdateCalendarMonthNavigation?: (arg: (prev: boolean) => boolean) => void
-  updateCalendarDefaultMoth?: number
+  updateCalendarDefaultMonth?: number
   setCalendarHasError?: (arg: boolean) => void
   setUpdatedForSubmit?: (arg: boolean) => void
   rangeContext?: RangeContext

package/src/core/components/calendar/hooks/useCalendarLoadingSpinner.tsx

@@ -2,15 +2,9 @@ import { useEffect } from 'react'
 
 type Props = {
   loadingData?: boolean
-  updateCalendarMonthNavigation?: boolean
-  updateCalendarDefaultMoth?: number
 }
 
-export const useCalendarLoadingSpinner = ({
-  loadingData,
-  updateCalendarMonthNavigation,
-  updateCalendarDefaultMoth,
-}: Props) =>
+export const useCalendarLoadingSpinner = ({ loadingData }: Props) =>
   useEffect(() => {
     if (typeof document === 'undefined') return
 
@@ -22,4 +16,4 @@ export const useCalendarLoadingSpinner = ({
     } else {
       if (loadingSpinner) loadingSpinner.style.display = 'none'
     }
-  }, [loadingData, updateCalendarMonthNavigation, updateCalendarDefaultMoth])
+  })

package/src/core/components/calendar/hooks/useCalendarTooltips.tsx

@@ -1,22 +1,12 @@
 import { useEffect } from 'react'
-import { DateRange } from 'react-day-picker'
 
 type Props = {
-  calendarRange?: DateRange
-  updateCalendarMonthNavigation?: boolean
-  overlappingDate?: DateRange[]
-  updateCalendarDefaultMoth?: number
   showFeedback?: boolean
 }
 
-export const useCalendarTooltips = ({
-  calendarRange,
-  updateCalendarMonthNavigation,
-  overlappingDate,
-  updateCalendarDefaultMoth,
-  showFeedback,
-}: Props) =>
+export const useCalendarTooltips = ({ showFeedback }: Props) =>
   useEffect(() => {
+    console.log('3')
     if (typeof document === 'undefined' || !showFeedback) return
 
     // Children
@@ -131,9 +121,4 @@ export const useCalendarTooltips = ({
       tooltipClonesSpinner.forEach((clone) => clone.remove())
       tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
     }
-  }, [
-    calendarRange,
-    updateCalendarMonthNavigation,
-    overlappingDate,
-    updateCalendarDefaultMoth,
-  ])
+  })

package/src/core/components/calendar/hooks/useUpdateDisabledDates.tsx

@@ -8,14 +8,14 @@ type Props = {
   disableCalendarDates?: DisableCalendarDates
   calendarRange?: DateRange
   updateCalendarMonthNavigation?: boolean
-  updateCalendarDefaultMoth?: number
+  updateCalendarDefaultMonth?: number
 }
 
 export const useUpdateDisabledDates = ({
   disableCalendarDates,
   calendarRange,
   updateCalendarMonthNavigation,
-  updateCalendarDefaultMoth,
+  updateCalendarDefaultMonth,
 }: Props) => {
   const [overlappingDate, setOverlappingDate] = useState<
     DateRange[] | undefined
@@ -87,7 +87,7 @@ export const useUpdateDisabledDates = ({
     disableCalendarDates,
     calendarRange,
     updateCalendarMonthNavigation,
-    updateCalendarDefaultMoth,
+    updateCalendarDefaultMonth,
   ])
 
   return { newDisableCalendarDates, overlappingDate }

package/src/core/components/calendar/utils/calendarSelectionRules.tsx

@@ -38,6 +38,8 @@ export const calendarSelectionRules = ({
     : null
   const rangeContextTo = rangeContext?.to ? endOfDay(rangeContext.to) : null
 
+  // When some dates are not available for selection, the earliest date will be available only for "end"
+  // and the latest date will only be available for "start"
   const overlappingDateFrom = overlappingDate?.length
     ? overlappingDate.find((date) =>
         !!(date.from && rangeFrom)
@@ -46,6 +48,13 @@ export const calendarSelectionRules = ({
       )
     : null
 
+  const overlappingDateTo = overlappingDate?.length
+    ? overlappingDate.find((date) =>
+        !!(date.from && rangeTo) ? isEqual(endOfDay(date.from), rangeTo) : false
+      )
+    : null
+  //----------
+
   const checkOutRange = newDisableCalendarDates?.availableDates?.length
     ? newDisableCalendarDates.availableDates.find((checkInDate) =>
         !!(checkInDate.checkIn && rangeFrom)
@@ -65,8 +74,11 @@ export const calendarSelectionRules = ({
   // Calendar selection rules: The cases are handled sequentially, starting from simple selections to more complex contextual selections.
   // The rules are processed in a specific order, so one case is handled before another.
   // Changing the order will cause the rules to break or not work properly.
-
-  if (!!overlappingDateFrom) {
+  console.log(overlappingDateTo)
+  if (
+    !!overlappingDateFrom ||
+    (calendarRangeFrom && calendarRangeTo && overlappingDateTo)
+  ) {
     // 1. If dates overlap, clear the selection.
     return setCalendarRange(undefined)
   }