willba-component-library 0.2.93 → 0.2.95

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -41,7 +41,6 @@ export default function FilterCalendar({
     handleClearDates,
     calendarRange,
     disabledDates,
-    setDisabledDates,
     updateCalendarMonthNavigation,
     updateCalendarDefaultMonth,
     setUpdateCalendarMonthNavigation,
@@ -85,7 +84,6 @@ export default function FilterCalendar({
               disableCalendarDates={disableCalendarDates}
               requestDates={requestDates}
               disabledDates={disabledDates}
-              setDisabledDates={setDisabledDates}
               updateCalendarMonthNavigation={updateCalendarMonthNavigation}
               setUpdateCalendarMonthNavigation={
                 setUpdateCalendarMonthNavigation

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

@@ -149,7 +149,6 @@ export const useFilterCalendar = ({
     handleSubmit,
     handleClearDates,
     setCalendarRange,
-    setDisabledDates,
     setUpdateCalendarMonthNavigation,
     calendarRange,
     disabledDates,

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

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react'
-import { startOfDay } from 'date-fns'
+import { addDays, startOfDay } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
 import { DateRange, DayPicker } from 'react-day-picker'
 import { useMediaQuery } from 'react-responsive'
 
 import { CalendarTypes } from './CalendarTypes'
-import { IconsSvg } from '../../../assets/IconsSvg'
+
 import {
   calendarSelectionRules,
   checkForContinuousSelection,
@@ -22,6 +22,7 @@ import {
 
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
+import { IconsSvg } from '../../../assets/IconsSvg'
 
 export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
   (
@@ -33,7 +34,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       disableCalendarDates,
       requestDates,
       disabledDates,
-      setDisabledDates,
       updateCalendarMonthNavigation,
       setUpdateCalendarMonthNavigation,
       updateCalendarDefaultMonth,
@@ -89,7 +89,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
         range,
         newDisableCalendarDates,
         setCalendarRange,
-        setDisabledDates,
         calendarRange,
         overlappingDate,
         setCalendarHasError,
@@ -105,7 +104,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       findLastPossibleRangeContextCheckOut,
       firstPossibleRangeContextCheckIn,
       lastPossibleRangeContextCheckOut,
-      currentSelectionLastCheckoutDate,
+      currentSelectionAvailability,
     } = handleRangeContextDisabledDates({
       rangeContext,
       availableDates: newDisableCalendarDates?.availableDates,
@@ -121,6 +120,43 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       disabledDates: newDisableCalendarDates?.disabledDates,
     })
 
+    const disabledInsideSelectableRange = () => {
+      if (
+        // Range end already selected
+        calendarRange?.to ||
+        // No current check-in availability
+        !currentSelectionAvailability ||
+        // No gap between check-in and first possible check-out, nothing to disable
+        addDays(currentSelectionAvailability.checkIn, 1) >=
+          currentSelectionAvailability.firstCheckOut
+      ) {
+        return []
+      }
+      // Disable dates between current check-in and first possible check-out
+      return [
+        {
+          from: addDays(currentSelectionAvailability.checkIn, 1),
+          to: addDays(currentSelectionAvailability.firstCheckOut, -1),
+        },
+      ]
+    }
+
+    const base = disabledDatesByPage.length
+      ? disabledDatesByPage
+      : disabledDates?.length
+      ? disabledDates
+      : newDisableCalendarDates?.disabledDates || []
+
+    const disabled = disabledDatesByPage.length
+      ? base
+      : [
+          lastPossibleCheckout,
+          ...base,
+          ...firstPossibleRangeContextCheckIn,
+          ...lastPossibleRangeContextCheckOut,
+          ...disabledInsideSelectableRange(),
+        ]
+
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
         <div className="will-calendar-filter-container">
@@ -142,31 +178,11 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? newDisableCalendarDates.disabledDates[0].from
                 : today)
             }
-            disabled={
-              disabledDatesByPage.length
-                ? disabledDatesByPage
-                : disabledDates?.length
-                ? [
-                    lastPossibleCheckout && lastPossibleCheckout,
-                    ...disabledDates,
-                    ...firstPossibleRangeContextCheckIn,
-                    ...lastPossibleRangeContextCheckOut,
-                  ]
-                : newDisableCalendarDates?.disabledDates?.length
-                ? [
-                    lastPossibleCheckout && lastPossibleCheckout,
-                    ...newDisableCalendarDates.disabledDates,
-                    ...firstPossibleRangeContextCheckIn,
-                    ...lastPossibleRangeContextCheckOut,
-                  ]
-                : []
-            }
+            disabled={disabled}
             fromMonth={today}
             onMonthChange={(val) => {
-              requestDates && setUpdateCalendarMonthNavigation
-                ? (requestDates(val),
-                  setUpdateCalendarMonthNavigation((prev) => !prev))
-                : null
+              requestDates?.(val)
+              setUpdateCalendarMonthNavigation?.((prev) => !prev)
             }}
             classNames={{
               day_range_start: calendarRange?.from ? 'rdp-day_range_start' : '',
@@ -191,18 +207,13 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             modifiers={
               // This function handles conditions for applying the modifiersClassNames
               handleCalendarModifiers({
-                newDisableCalendarDates,
                 calendarRange,
-                disabledDatesByPage,
-                disabledDates,
+                disabledDates: disabled,
                 overlappingDate,
                 rangeContext,
-                lastPossibleCheckout,
                 findFirstPossibleRangeContextCheckIn,
                 findLastPossibleRangeContextCheckOut,
-                firstPossibleRangeContextCheckIn,
-                lastPossibleRangeContextCheckOut,
-                currentSelectionLastCheckoutDate,
+                currentSelectionLastCheckoutDate: currentSelectionAvailability,
               })
             }
           />

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

@@ -74,11 +74,11 @@ export const useUpdateDisabledDates = ({
       )
 
       // Find last possible checkout ( disable all dates after the last possible checkout )
-      const lastPossibleCheckout =
+      const lastPossibleCheckoutDate: Date | undefined =
         disableCalendarDates.availableDates.at(-1)?.lastCheckOut
 
-      if (lastPossibleCheckout) {
-        setLatsPossibleCheckout({ after: lastPossibleCheckout })
+      if (lastPossibleCheckoutDate) {
+        setLatsPossibleCheckout({ after: lastPossibleCheckoutDate })
       }
 
       // Extract overlapping dates ( dates that are only available for checkout )

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

@@ -7,7 +7,6 @@ type Props = {
   range: DateRange | undefined
   newDisableCalendarDates?: DisableCalendarDates
   setCalendarRange: (range: DateRange | undefined) => void
-  setDisabledDates?: (arg: Matcher[]) => void
   setCalendarHasError?: (arg: boolean) => void
   calendarRange?: DateRange
   overlappingDate?: DateRange[]
@@ -19,7 +18,6 @@ export const calendarSelectionRules = ({
   range,
   newDisableCalendarDates,
   setCalendarRange,
-  setDisabledDates,
   calendarRange,
   overlappingDate,
   setCalendarHasError,
@@ -67,14 +65,6 @@ export const calendarSelectionRules = ({
       )
     : null
 
-  // On check-in, disable future dates that are unavailable for checkout
-  disableFutureDates({
-    rangeFrom,
-    checkOutRange,
-    setDisabledDates,
-    newDisableCalendarDates,
-  })
-
   // 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.
@@ -188,41 +178,3 @@ export const calendarSelectionRules = ({
 
   setCalendarRange(range)
 }
-
-/////////
-
-const disableFutureDates = ({
-  rangeFrom,
-  checkOutRange,
-  setDisabledDates,
-  newDisableCalendarDates,
-}: {
-  rangeFrom: Date | null
-  checkOutRange?:
-    | NonNullable<DisableCalendarDates['availableDates']>['0']
-    | null
-  setDisabledDates?: (arg: Matcher[]) => void
-  newDisableCalendarDates?: DisableCalendarDates
-}) => {
-  if (rangeFrom && checkOutRange && setDisabledDates) {
-    // Get parse data
-    const checkIn = addDays(checkOutRange.checkIn, 1)
-    const firstCheckOut = addDays(checkOutRange.firstCheckOut, -1)
-    const noDatesRange = isEqual(checkIn, checkOutRange.firstCheckOut)
-
-    setDisabledDates([
-      // Will disable all dates before the check-in date
-      // { before: findCheckOutRange?.checkIn },
-
-      ...(newDisableCalendarDates?.disabledDates || []),
-
-      {
-        from: noDatesRange ? undefined : checkIn,
-        to: noDatesRange ? undefined : firstCheckOut,
-      },
-
-      // Will disable all dates after the last possible check-out after a check-in has been selected
-      //{ after: checkOutRange?.lastCheckOut },
-    ])
-  }
-}

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

@@ -4,14 +4,8 @@ import { DateRange, Matcher } from 'react-day-picker'
 import { DisableCalendarDates, RangeContext } from '../CalendarTypes'
 
 type Props = {
-  newDisableCalendarDates?: DisableCalendarDates
   calendarRange?: DateRange
-  disabledDatesByPage: {
-    from: Date
-    to: Date
-  }[]
   disabledDates?: Matcher[]
-  lastPossibleCheckout?: Matcher
   overlappingDate?: DateRange[]
   rangeContext?: RangeContext
   findFirstPossibleRangeContextCheckIn?: NonNullable<
@@ -20,26 +14,19 @@ type Props = {
   findLastPossibleRangeContextCheckOut?: NonNullable<
     DisableCalendarDates['availableDates']
   >['0']
-  firstPossibleRangeContextCheckIn: Matcher[]
-  lastPossibleRangeContextCheckOut: Matcher[]
   currentSelectionLastCheckoutDate?: NonNullable<
     DisableCalendarDates['availableDates']
   >['0']
 }
 
 export const handleCalendarModifiers = ({
-  newDisableCalendarDates,
   calendarRange,
-  disabledDatesByPage,
   disabledDates,
   overlappingDate,
   rangeContext,
-  firstPossibleRangeContextCheckIn,
-  lastPossibleRangeContextCheckOut,
   findFirstPossibleRangeContextCheckIn,
   findLastPossibleRangeContextCheckOut,
   currentSelectionLastCheckoutDate,
-  lastPossibleCheckout,
 }: Props) => {
   // Parse data
   const calendarRangeFrom = calendarRange?.from && endOfDay(calendarRange.from)
@@ -69,23 +56,7 @@ export const handleCalendarModifiers = ({
     : []
 
   return {
-    booked: disabledDatesByPage.length
-      ? disabledDatesByPage
-      : disabledDates?.length
-      ? [
-          lastPossibleCheckout || [],
-          ...disabledDates,
-          ...firstPossibleRangeContextCheckIn,
-          ...lastPossibleRangeContextCheckOut,
-        ]
-      : newDisableCalendarDates?.disabledDates?.length
-      ? [
-          lastPossibleCheckout || [],
-          ...newDisableCalendarDates?.disabledDates,
-          ...firstPossibleRangeContextCheckIn,
-          ...lastPossibleRangeContextCheckOut,
-        ]
-      : [],
+    booked: disabledDates || [],
 
     disabledAfterCheckIn: calendarRangeFrom
       ? [{ after: calendarRangeFrom }]

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

@@ -58,8 +58,8 @@ export const handleRangeContextDisabledDates = ({
     }
   }
 
-  // Get last possible check-out dates for current check-in
-  const currentSelectionLastCheckoutDate = availableDates?.find((date) => {
+  // Get possible check-out dates for current check-in
+  const currentSelectionAvailability = availableDates?.find((date) => {
     return calendarRangeFrom
       ? isEqual(endOfDay(date.checkIn), calendarRangeFrom)
       : false
@@ -70,6 +70,6 @@ export const handleRangeContextDisabledDates = ({
     findLastPossibleRangeContextCheckOut,
     firstPossibleRangeContextCheckIn,
     lastPossibleRangeContextCheckOut,
-    currentSelectionLastCheckoutDate,
+    currentSelectionAvailability,
   }
 }