willba-component-library 0.2.58 → 0.2.60

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -29,7 +29,7 @@ export default function FilterCalendar({
   requestDates,
   showFeedback,
   noActiveSelection,
-  rangeContext,
+  rangeContext: outerRangeContext,
 }: FilterCalendarTypes) {
   const themePalette = useTheme({ palette })
 
@@ -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,
       }
     )
 
@@ -74,18 +74,12 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
 
     // 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 +125,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,21 +1,10 @@
 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(() => {
     if (typeof document === 'undefined' || !showFeedback) return
 
@@ -131,9 +120,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)
@@ -66,8 +75,12 @@ export const calendarSelectionRules = ({
   // 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) {
+  if (
+    !!overlappingDateFrom ||
+    (calendarRangeFrom && calendarRangeTo && overlappingDateTo)
+  ) {
     // 1. If dates overlap, clear the selection.
+
     return setCalendarRange(undefined)
   }
 

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

@@ -81,7 +81,7 @@ export const handleCalendarModifiers = ({
       : [],
 
     overlappingDate: [
-      ...(!calendarRange?.from && !!overlappingDate?.length && !rangeContext
+      ...(!calendarRange?.from && !!overlappingDate?.length
         ? overlappingDate.map((date) => ({ from: date.from }))
         : []),
     ],
@@ -89,29 +89,31 @@ export const handleCalendarModifiers = ({
     noActiveSelectionStart:
       rangeContext?.from &&
       !(
-        calendarRange?.from &&
-        rangeContext?.from &&
-        isEqual(endOfDay(rangeContext.from), endOfDay(calendarRange.from))
+        (calendarRange?.from &&
+          isEqual(endOfDay(rangeContext.from), endOfDay(calendarRange.from))) ||
+        (calendarRange?.to &&
+          isEqual(endOfDay(rangeContext.from), endOfDay(calendarRange.to)))
       )
         ? rangeContext.from
         : [],
 
-    noActiveSelectionMid: [
-      ...(rangeContextMiddleSelection.length
-        ? rangeContextMiddleSelection
-        : []),
-    ],
-
     noActiveSelectionEnd:
       rangeContext?.to &&
       !(
-        calendarRange?.from &&
-        rangeContext?.to &&
-        isEqual(endOfDay(rangeContext.to), endOfDay(calendarRange.from))
+        (calendarRange?.from &&
+          isEqual(endOfDay(rangeContext.to), endOfDay(calendarRange.from))) ||
+        (calendarRange?.to &&
+          isEqual(endOfDay(rangeContext.to), endOfDay(calendarRange.to)))
       )
         ? rangeContext.to
         : [],
 
+    noActiveSelectionMid: [
+      ...(rangeContextMiddleSelection.length
+        ? rangeContextMiddleSelection
+        : []),
+    ],
+
     checkoutOptionsMid: [
       ...(calendarRange?.from &&
       !calendarRange?.to &&