willba-component-library 0.2.56 → 0.2.58

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

@@ -1,11 +1,4 @@
-import {
-  addDays,
-  startOfDay,
-  format,
-  isAfter,
-  isBefore,
-  endOfDay,
-} from 'date-fns'
+import { addDays, isAfter, isBefore, endOfDay, isEqual } from 'date-fns'
 import { DateRange, Matcher } from 'react-day-picker'
 
 import { DisableCalendarDates, RangeContext } from '../CalendarTypes'
@@ -33,30 +26,31 @@ export const calendarSelectionRules = ({
   rangeContext,
 }: Props) => {
   // Get and parse needed data
-  const dateFormat = 'dd-MM-yyyy'
-  const rangeFrom = range?.from ? format(range.from, dateFormat) : null
-  const rangeTo = range?.to ? format(range.to, dateFormat) : null
-  const calendarFrom = calendarRange?.from
-    ? format(calendarRange?.from, dateFormat)
-    : null
-  const calendarTo = calendarRange?.to
-    ? format(calendarRange?.to, dateFormat)
+  const rangeFrom = range?.from ? endOfDay(range.from) : null
+  const rangeTo = range?.to ? endOfDay(range.to) : null
+  const calendarRangeFrom = calendarRange?.from
+    ? endOfDay(calendarRange.from)
     : null
+  const calendarRangeTo = calendarRange?.to ? endOfDay(calendarRange.to) : null
+
   const rangeContextFrom = rangeContext?.from
-    ? format(rangeContext.from, dateFormat)
+    ? endOfDay(rangeContext.from)
     : null
+  const rangeContextTo = rangeContext?.to ? endOfDay(rangeContext.to) : null
 
   const overlappingDateFrom = overlappingDate?.length
     ? overlappingDate.find((date) =>
-        date.from ? format(date.from, dateFormat) === rangeFrom : false
+        !!(date.from && rangeFrom)
+          ? isEqual(endOfDay(date.from), rangeFrom)
+          : false
       )
     : null
 
   const checkOutRange = newDisableCalendarDates?.availableDates?.length
-    ? newDisableCalendarDates.availableDates.find(
-        (checkInDate) =>
-          format(checkInDate.checkIn || 1, dateFormat) ===
-          format(range?.from || 1, dateFormat)
+    ? newDisableCalendarDates.availableDates.find((checkInDate) =>
+        !!(checkInDate.checkIn && rangeFrom)
+          ? isEqual(endOfDay(checkInDate.checkIn), rangeFrom)
+          : false
       )
     : null
 
@@ -65,57 +59,85 @@ export const calendarSelectionRules = ({
     rangeFrom,
     checkOutRange,
     setDisabledDates,
-    dateFormat,
     newDisableCalendarDates,
   })
 
-  // Calendar selection rules
-  switch (true) {
-    case !!overlappingDateFrom:
-      // Clear the selection when overlapping dates are detected
-      return setCalendarRange(undefined)
-
-    case !!((!rangeTo && !rangeFrom && calendarFrom) || rangeTo === rangeFrom):
-      // Handle double-click on the same date
-      return setCalendarRange({ from: calendarRange?.from, to: undefined })
-
-    case range?.to &&
-      calendarRange?.to &&
-      isAfter(endOfDay(range.to), endOfDay(calendarRange.to)) &&
-      !(
-        range?.to &&
-        rangeContext?.to &&
-        isAfter(startOfDay(range.to), startOfDay(rangeContext.to))
-      ):
-      // Handle checkout selection greater than current checkout
-      return setCalendarRange({ from: range?.to, to: undefined })
-
-    case calendarFrom && rangeFrom && rangeFrom !== calendarFrom:
-      // Handle check-in selection prior to current check-in
-      return setCalendarRange({ from: range?.from, to: undefined })
-
-    case checkOutRange && range?.to && checkOutRange.lastCheckOut < range.to:
-      return setCalendarRange({ from: range?.to, to: undefined })
-
-    // Handle checkout selection between the range context and first passible check-in
-    case range?.to &&
-      rangeContext?.from &&
-      isBefore(startOfDay(range.to), startOfDay(rangeContext.from)):
-      return setCalendarRange({ from: range?.to, to: undefined })
-
-    case range?.from &&
-      rangeContext?.to &&
-      isAfter(startOfDay(range.from), startOfDay(rangeContext.to)):
-      return (
-        setCalendarRange(undefined),
-        setCalendarHasError && setCalendarHasError(true)
-      )
-    //
+  // 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) {
+    // 1. If dates overlap, clear the selection.
+    return setCalendarRange(undefined)
+  }
 
-    default:
-      // Apply the given range
-      return setCalendarRange(range)
+  if (
+    // 2. If selected "start" is after "range context end", clear selection and display error
+    (rangeFrom && rangeContextTo && isAfter(rangeFrom, rangeContextTo)) ||
+    (calendarRangeFrom &&
+      calendarRangeTo &&
+      rangeContextTo &&
+      rangeTo &&
+      isAfter(rangeTo, rangeContextTo))
+  ) {
+    setCalendarHasError && setCalendarHasError(true)
+    return setCalendarRange(undefined)
   }
+
+  if (rangeFrom && rangeTo && isEqual(rangeFrom, rangeTo)) {
+    // 3. If "start" is selected and the same date is clicked again, keep the current "start" selection.
+    return setCalendarRange({ from: rangeFrom, to: undefined })
+  }
+
+  if (calendarRangeFrom && calendarRangeTo && !range) {
+    // 4. If "calendarRange" has dates selected and the same "start" date is clicked, the "range" will become undefined.
+    // Set the current selection (calendarRange) to the initial "start" of calendarRange.
+    return setCalendarRange({ from: calendarRangeFrom, to: undefined })
+  }
+
+  // 5. Handle gap selection backwards and forwards
+  if (
+    // Enforce on every date selection before current "start", mark as "start" selection
+    rangeFrom &&
+    calendarRangeFrom &&
+    isBefore(rangeFrom, calendarRangeFrom)
+  ) {
+    return setCalendarRange({ from: rangeFrom, to: undefined })
+  }
+
+  if (
+    // Every date selection that is after selected "start" last checkout, mark as "start"
+    rangeTo &&
+    checkOutRange?.lastCheckOut &&
+    isAfter(rangeTo, endOfDay(checkOutRange.lastCheckOut))
+  ) {
+    return setCalendarRange({ from: rangeTo, to: undefined })
+  }
+
+  if (
+    calendarRangeFrom &&
+    rangeFrom &&
+    !isEqual(calendarRangeFrom, rangeFrom)
+  ) {
+    // 6. If "calendarRange" has selected dates and the new selection "start" differs from the current "calendarRange start", reset and make a new "start" selection.
+    return setCalendarRange({ from: rangeFrom, to: undefined })
+  } else if (calendarRangeTo && rangeTo && !isEqual(calendarRangeTo, rangeTo)) {
+    // 7. If "calendarRange" has selected dates and the new selection "end" differs from the current "calendarRange end", reset and make a new "start" selection.
+    return setCalendarRange({ from: rangeTo, to: undefined })
+  }
+
+  if (
+    // 8. If selected "end" is before "context start", mark as "start" and display error
+    rangeFrom &&
+    rangeTo &&
+    rangeContextFrom &&
+    isBefore(rangeTo, rangeContextFrom)
+  ) {
+    setCalendarHasError && setCalendarHasError(true)
+    return setCalendarRange({ from: rangeTo, to: undefined })
+  }
+
+  setCalendarRange(range)
 }
 
 /////////
@@ -124,26 +146,20 @@ const disableFutureDates = ({
   rangeFrom,
   checkOutRange,
   setDisabledDates,
-  dateFormat,
   newDisableCalendarDates,
 }: {
-  rangeFrom: string | null
+  rangeFrom: Date | null
   checkOutRange?:
     | NonNullable<DisableCalendarDates['availableDates']>['0']
     | null
   setDisabledDates?: (arg: Matcher[]) => void
-  dateFormat: string
   newDisableCalendarDates?: DisableCalendarDates
 }) => {
   if (rangeFrom && checkOutRange && setDisabledDates) {
     // Get and parse data
     const checkIn = addDays(checkOutRange.checkIn, 1)
     const firstCheckOut = addDays(checkOutRange.firstCheckOut, -1)
-    const noDatesRange =
-      format(checkIn, dateFormat) ===
-      format(checkOutRange.firstCheckOut, dateFormat)
-
-    // -------------------
+    const noDatesRange = isEqual(checkIn, checkOutRange.firstCheckOut)
 
     setDisabledDates([
       // Will disable all dates before the check-in date