willba-component-library 0.2.55 → 0.2.57

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

@@ -1,19 +1,24 @@
-import React, { forwardRef, useEffect, useMemo, useState } from 'react'
-import {
-  addDays,
-  startOfDay,
-  format,
-  isAfter,
-  isEqual,
-  isBefore,
-} from 'date-fns'
+import React, { forwardRef } from 'react'
+import { startOfDay, isBefore, endOfDay, isEqual, isAfter } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
-import { DateRange, DayPicker, Matcher } from 'react-day-picker'
+import { DateRange, DayPicker } from 'react-day-picker'
 import { useMediaQuery } from 'react-responsive'
 
-import { CalendarTypes, DisableCalendarDates } from './CalendarTypes'
-import { SpinnerSVG } from '../../../assets/SpinnerSvg'
+import { CalendarTypes } from './CalendarTypes'
+import { IconsSvg } from '../../../assets/IconsSvg'
+import {
+  calendarSelectionRules,
+  checkForContinuousSelection,
+  handleCalendarModifiers,
+  disabledDatesByPage as handleDisabledDatesByPage,
+  handleRangeContextDisabledDates,
+} from './utils'
+import {
+  useCalendarLoadingSpinner,
+  useCalendarTooltips,
+  useUpdateDisabledDates,
+} from './hooks'
 
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
@@ -33,10 +38,12 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       setUpdateCalendarMonthNavigation,
       updateCalendarDefaultMoth,
       loadingData,
-      initialCalendarRange,
       showFeedback,
       palette,
-      setOverlappingDates,
+      setCalendarHasError,
+      setUpdatedForSubmit,
+      rangeContext,
+      calendarHasError,
     }: CalendarTypes,
     ref
   ) => {
@@ -46,81 +53,17 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
     const isTablet = useMediaQuery({ maxWidth: 960 })
     const today = startOfDay(new Date())
     const selectedStartDate = calendarRange?.from
+    const rangeContextStartDate = rangeContext?.from
 
     // Handle overlapping availableDates.lastCheckOut and disabledDates.start
-    const [overlappingDate, setOverlappingDate] = useState<
-      DateRange[] | undefined
-    >(undefined)
-
-    const newDisableCalendarDates = useMemo(() => {
-      if (disableCalendarDates?.availableDates) {
-        const dateFormat = 'dd-MM-yyyy'
-
-        const { disabledDates } = disableCalendarDates
-
-        const { updatedDisabledDates, newOverlappingDates } = (
-          disabledDates || []
-        ).reduce(
-          (
-            acc: {
-              updatedDisabledDates: { to: Date; from: Date }[]
-              newOverlappingDates: { to: Date; from: Date }[]
-            },
-            dateRange
-          ) => {
-            const formattedFromDate = format(dateRange.from, dateFormat)
-            const formattedToDate = format(dateRange.to, dateFormat)
-
-            const hasTwoOverlappingDates =
-              disableCalendarDates.availableDates?.some(
-                (item) =>
-                  format(item.lastCheckOut, dateFormat) === formattedFromDate &&
-                  format(item.lastCheckOut, dateFormat) === formattedToDate
-              )
-
-            const hasOneOverlappingDate =
-              disableCalendarDates.availableDates?.some(
-                (item) =>
-                  format(item.lastCheckOut, dateFormat) === formattedFromDate &&
-                  format(item.lastCheckOut, dateFormat) !== formattedToDate
-              )
-
-            if (hasTwoOverlappingDates) {
-              acc.newOverlappingDates.push(dateRange)
-            } else if (hasOneOverlappingDate) {
-              acc.newOverlappingDates.push(dateRange)
-              acc.updatedDisabledDates.push({
-                ...dateRange,
-                from: addDays(dateRange.from, 1),
-              })
-            } else {
-              acc.updatedDisabledDates.push(dateRange)
-            }
-
-            return acc
-          },
-          { updatedDisabledDates: [], newOverlappingDates: [] }
-        )
-
-        if (newOverlappingDates.length) {
-          setOverlappingDate((prev = []) => [...prev, ...newOverlappingDates])
-        }
-
-        const newDisableCalendarDates = {
-          ...disableCalendarDates,
-          disabledDates: updatedDisabledDates,
-        }
-
-        return newDisableCalendarDates
+    const { newDisableCalendarDates, overlappingDate } = useUpdateDisabledDates(
+      {
+        disableCalendarDates,
+        calendarRange,
+        updateCalendarMonthNavigation,
+        updateCalendarDefaultMoth,
       }
-      return disableCalendarDates
-    }, [
-      disableCalendarDates,
-      calendarRange,
-      updateCalendarMonthNavigation,
-      initialCalendarRange,
-      updateCalendarDefaultMoth,
-    ])
+    )
 
     // Handle disable dates by page
     const disabledDatesByPage = handleDisabledDatesByPage({
@@ -130,106 +73,59 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
     })
 
     // Handle tooltip
-    useEffect(() => {
-      if (typeof document === 'undefined' || !showFeedback) return
-
-      // Children
-      const calendarTooltip = document.querySelector('.will-calendar-tooltip')
-      const calendarTooltipCheckOut = document.querySelector(
-        '.will-calendar-tooltip-check-out'
-      )
-
-      const calendarTooltipOverlappingDate = document.querySelector(
-        '.will-calendar-tooltip-overlapping-date'
-      )
-
-      const loadingSpinner = document.querySelector(
-        '.will-filter-bar-calendar .will-calendar-spinner'
-      )
-
-      // Parents
-      const calendarButtons = document.querySelectorAll(
-        '.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))'
-      )
-      const calendarButtonsCheckOut = document.querySelectorAll(
-        '.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)'
-      )
-      const calendarMonthContainer = document.querySelector(
-        '.will-filter-bar-calendar .rdp-months'
-      )
-      const calendarOverlappingDate = document.querySelectorAll(
-        '.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)'
-      )
-
-      const tooltipClonesCheckIn: Element[] = []
-      const tooltipClonesCheckOut: Element[] = []
-      const tooltipClonesSpinner: Element[] = []
-      const tooltipClonesOverlappingDates: Element[] = []
-
-      if (calendarTooltip && calendarButtons.length > 0) {
-        calendarButtons.forEach((element) => {
-          const tooltipClone: Element = calendarTooltip.cloneNode(
-            true
-          ) as Element
-          element.appendChild(tooltipClone)
-          tooltipClonesCheckIn.push(tooltipClone)
-        })
-      }
-
-      if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
-        calendarButtonsCheckOut.forEach((element) => {
-          const tooltipClone: Element = calendarTooltipCheckOut.cloneNode(
-            true
-          ) as Element
-          element.appendChild(tooltipClone)
-          tooltipClonesCheckOut.push(tooltipClone)
-        })
-      }
-
-      if (loadingSpinner && calendarMonthContainer) {
-        const tooltipClone: Element = loadingSpinner.cloneNode(true) as Element
-        calendarMonthContainer.appendChild(tooltipClone)
-        tooltipClonesSpinner.push(tooltipClone)
-      }
-
-      if (
-        calendarTooltipOverlappingDate &&
-        calendarOverlappingDate.length > 0
-      ) {
-        calendarOverlappingDate.forEach((element) => {
-          const tooltipClone: Element =
-            calendarTooltipOverlappingDate.cloneNode(true) as Element
-          element.appendChild(tooltipClone)
-          tooltipClonesOverlappingDates.push(tooltipClone)
-        })
-      }
-
-      return () => {
-        tooltipClonesCheckIn.forEach((clone) => clone.remove())
-        tooltipClonesCheckOut.forEach((clone) => clone.remove())
-        tooltipClonesSpinner.forEach((clone) => clone.remove())
-        tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
-      }
-    }, [
+    useCalendarTooltips({
       calendarRange,
       updateCalendarMonthNavigation,
       overlappingDate,
-      initialCalendarRange,
       updateCalendarDefaultMoth,
-    ])
+      showFeedback,
+    })
 
     // Handle loading spinner
-    useEffect(() => {
-      if (typeof document === 'undefined') return
-      const loadingSpinner: HTMLElement | null = document.querySelector(
-        '.will-filter-bar-calendar .rdp-months .will-calendar-spinner'
-      )
-      if (loadingData) {
-        if (loadingSpinner) loadingSpinner.style.display = 'flex'
-      } else {
-        if (loadingSpinner) loadingSpinner.style.display = 'none'
-      }
-    }, [loadingData, updateCalendarMonthNavigation, updateCalendarDefaultMoth])
+    useCalendarLoadingSpinner({
+      loadingData,
+      updateCalendarMonthNavigation,
+      updateCalendarDefaultMoth,
+    })
+
+    // Handle the date selection and availability for selection logic.
+    const handleOnSelect = (range?: DateRange) => {
+      setCalendarHasError && calendarHasError && setCalendarHasError(false)
+
+      calendarSelectionRules({
+        range,
+        newDisableCalendarDates,
+        setCalendarRange,
+        setDisabledDates,
+        calendarRange,
+        overlappingDate,
+        setCalendarHasError,
+        rangeContext,
+      })
+
+      setUpdatedForSubmit && setUpdatedForSubmit(true)
+    }
+
+    // Handle disabled dates for range context
+    const {
+      findFirstPossibleRangeContextCheckIn,
+      findLastPossibleRangeContextCheckOut,
+      firstPossibleRangeContextCheckIn,
+      lastPossibleRangeContextCheckOut,
+      currentSelectionLastCheckoutDate,
+    } = handleRangeContextDisabledDates({
+      rangeContext,
+      availableDates: newDisableCalendarDates?.availableDates,
+      calendarRange,
+    })
+
+    // Handle check for continuous selection in the range context
+    checkForContinuousSelection({
+      setCalendarHasError,
+      rangeContext,
+      calendarRange,
+      calendarHasError,
+    })
 
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
@@ -242,21 +138,12 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
             numberOfMonths={!isTablet ? 2 : 1}
             weekStartsOn={1}
             selected={calendarRange}
-            onSelect={(range) =>
-              handleSelectedCheckIn({
-                range,
-                newDisableCalendarDates,
-                setCalendarRange,
-                setDisabledDates,
-                calendarRange,
-                overlappingDate,
-                setOverlappingDates,
-              })
-            }
+            onSelect={(range) => handleOnSelect(range)}
             captionLayout="dropdown-buttons"
             defaultMonth={
-              initialCalendarRange?.from ||
+              calendarRange?.from ||
               selectedStartDate ||
+              rangeContextStartDate ||
               (newDisableCalendarDates?.disabledDates?.length
                 ? newDisableCalendarDates.disabledDates[0].from
                 : today)
@@ -265,8 +152,18 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
               disabledDatesByPage.length
                 ? disabledDatesByPage
                 : disabledDates?.length
-                ? disabledDates
-                : newDisableCalendarDates?.disabledDates || []
+                ? [
+                    ...disabledDates,
+                    ...firstPossibleRangeContextCheckIn,
+                    ...lastPossibleRangeContextCheckOut,
+                  ]
+                : newDisableCalendarDates?.disabledDates?.length
+                ? [
+                    ...newDisableCalendarDates.disabledDates,
+                    ...firstPossibleRangeContextCheckIn,
+                    ...lastPossibleRangeContextCheckOut,
+                  ]
+                : []
             }
             fromMonth={today}
             onMonthChange={(val) => {
@@ -275,55 +172,43 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                   setUpdateCalendarMonthNavigation((prev) => !prev))
                 : null
             }}
+            classNames={{
+              day_range_start: calendarRange?.from ? 'rdp-day_range_start' : '',
+              day_range_end: calendarRange?.to ? 'rdp-day_range_end' : '',
+            }}
             modifiersClassNames={{
               today: 'my-today',
               booked: 'booked',
               disabledAfterCheckIn: 'disabled-after-check-in',
               overlappingDate: 'overlapping-date',
-
               noActiveSelectionStart:
-                'rdp-day_selected rdp-day_range_start no-active-selection ',
+                'rdp-day_selected rdp-day_range_start no-active-selection',
               noActiveSelectionMid:
                 'rdp-day_selected rdp-day_range_middle no-active-selection',
               noActiveSelectionEnd:
                 'rdp-day_selected rdp-day_range_end no-active-selection',
-            }}
-            modifiers={{
-              booked: disabledDatesByPage.length
-                ? disabledDatesByPage
-                : disabledDates?.length
-                ? disabledDates
-                : newDisableCalendarDates?.disabledDates || [],
-
-              disabledAfterCheckIn: calendarRange?.from
-                ? [{ after: calendarRange.from }]
-                : [],
+              checkoutOptionsMid:
+                'rdp-day_selected rdp-day_range_middle checkout-option',
 
-              noActiveSelectionStart: !calendarRange
-                ? initialCalendarRange?.from || []
-                : [],
-              noActiveSelectionMid:
-                !calendarRange &&
-                initialCalendarRange?.from &&
-                initialCalendarRange?.to
-                  ? [
-                      {
-                        after: initialCalendarRange?.from,
-                        before: initialCalendarRange?.to,
-                      },
-                    ]
-                  : [],
-              noActiveSelectionEnd: !calendarRange
-                ? initialCalendarRange?.to || []
-                : [],
-
-              overlappingDate:
-                (!calendarRange?.from &&
-                  overlappingDate?.map((item) => ({
-                    from: item.from,
-                  }))) ||
-                [],
+              checkInOnly: 'check-in-only',
+              checkOutOnly: 'check-out-only',
             }}
+            modifiers={
+              // This function handles conditions for applying the modifiersClassNames
+              handleCalendarModifiers({
+                newDisableCalendarDates,
+                calendarRange,
+                disabledDatesByPage,
+                disabledDates,
+                overlappingDate,
+                rangeContext,
+                findFirstPossibleRangeContextCheckIn,
+                findLastPossibleRangeContextCheckOut,
+                firstPossibleRangeContextCheckIn,
+                lastPossibleRangeContextCheckOut,
+                currentSelectionLastCheckoutDate,
+              })
+            }
           />
 
           <div className={'will-calendar-tooltip'}>
@@ -335,161 +220,21 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
           <div className={'will-calendar-tooltip-overlapping-date'}>
             <div>{t('checkOutOnly')}</div>
           </div>
+          <div className={'will-calendar-tooltip-check-in-only'}>
+            <div>Check-in Only</div>
+          </div>
+          <div className={'will-calendar-tooltip-check-out-only'}>
+            <div>Checkout Only</div>
+          </div>
           <div className={'will-calendar-spinner'}>
-            <SpinnerSVG fill={palette?.primary || 'inherit'} size={50} />
+            <IconsSvg
+              fill={palette?.primary || 'inherit'}
+              size={50}
+              icon="spinner"
+            />
           </div>
         </div>
       </div>
     )
   }
 )
-
-/////////
-
-const handleSelectedCheckIn = ({
-  range,
-  newDisableCalendarDates,
-  setCalendarRange,
-  setDisabledDates,
-  calendarRange,
-  overlappingDate,
-  setOverlappingDates,
-}: {
-  range: DateRange | undefined
-  newDisableCalendarDates?: DisableCalendarDates
-  setCalendarRange: (range: DateRange | undefined) => void
-  setDisabledDates: ((arg: Matcher[]) => void) | undefined
-  setOverlappingDates: (arg: boolean) => void
-  calendarRange?: DateRange
-  overlappingDate?: DateRange[]
-}) => {
-  // Calendar dates select logic
-  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 overlappingDateFrom = overlappingDate?.length
-    ? overlappingDate.find(
-        (date) => format(date.from || 1, dateFormat) === rangeFrom
-      )
-    : null
-
-  const checkOutRange = newDisableCalendarDates?.availableDates?.length
-    ? newDisableCalendarDates.availableDates.find(
-        (checkInDate) =>
-          format(checkInDate.checkIn || 1, dateFormat) ===
-          format(range?.from || 1, dateFormat)
-      )
-    : null
-
-  // Case: Set the calendar range only if it overlaps with the previously selected dates.
-  // The selection must remain continuous, meaning no gaps between days are allowed.
-  // Whether selecting forwards or backwards from the initially chosen dates,
-  // the new range must be directly adjacent to or overlap with the current selection.
-  const selectedDates = newDisableCalendarDates?.selectedDates || null
-  const rowRangeFrom = range?.from
-  const rowRangeTo = range?.to
-  const selectedDatesFrom = newDisableCalendarDates?.selectedDates?.from || null
-  const selectedDatesTo = newDisableCalendarDates?.selectedDates?.to || null
-
-  // Checking if rowRangeFrom is equal to or before selectedDatesTo
-  const startIsEqualOrBeforeSelectedEnd =
-    rowRangeFrom && selectedDatesFrom && selectedDatesTo
-      ? isBefore(startOfDay(rowRangeFrom), startOfDay(selectedDatesTo)) ||
-        isEqual(startOfDay(rowRangeFrom), startOfDay(selectedDatesTo))
-      : null
-
-  // Checking if rowRangeTo is equal to or after selectedDatesFrom
-  const endIsEqualOrAfterSelectedStart =
-    rowRangeTo && selectedDatesFrom && selectedDatesTo
-      ? isAfter(startOfDay(rowRangeTo), startOfDay(selectedDatesFrom)) ||
-        isEqual(startOfDay(rowRangeTo), startOfDay(selectedDatesFrom))
-      : null
-
-  if (rangeFrom && checkOutRange && setDisabledDates) {
-    const checkIn = addDays(checkOutRange.checkIn, 1)
-    const firstCheckOut = addDays(checkOutRange.firstCheckOut, -1)
-    const noDatesRange =
-      format(checkIn, dateFormat) ===
-      format(checkOutRange.firstCheckOut, dateFormat)
-
-    setDisabledDates([
-      // { before: findCheckOutRange?.checkIn },
-
-      ...(newDisableCalendarDates?.disabledDates || []),
-
-      {
-        from: noDatesRange ? undefined : checkIn,
-        to: noDatesRange ? undefined : firstCheckOut,
-      },
-
-      { after: checkOutRange?.lastCheckOut },
-    ])
-  }
-
-  console.log(
-    selectedDates,
-    startIsEqualOrBeforeSelectedEnd,
-    endIsEqualOrAfterSelectedStart
-  )
-
-  setOverlappingDates && setOverlappingDates(false)
-
-  if (
-    (selectedDates && !startIsEqualOrBeforeSelectedEnd) ||
-    (selectedDates && range?.to && !endIsEqualOrAfterSelectedStart)
-  ) {
-    setCalendarRange(undefined)
-    setOverlappingDates && setOverlappingDates(true)
-  } else if (
-    (rangeTo && rangeFrom && rangeFrom === rangeTo) ||
-    (!rangeTo && !rangeFrom) ||
-    overlappingDateFrom
-  ) {
-    setCalendarRange(undefined)
-    setDisabledDates && setDisabledDates([])
-  } else if (calendarFrom && rangeFrom && rangeFrom !== calendarFrom) {
-    setCalendarRange({
-      from: range?.from,
-      to: undefined,
-    })
-  } else {
-    setCalendarRange(range)
-  }
-}
-
-const handleDisabledDatesByPage = ({
-  newDisableCalendarDates,
-  selectedPath,
-  today,
-}: {
-  newDisableCalendarDates?: DisableCalendarDates
-  selectedPath?: string
-  today: Date
-}) => {
-  const daysToOffsetCalendar =
-    newDisableCalendarDates?.disabledDatesByPage && selectedPath
-      ? [
-          newDisableCalendarDates?.disabledDatesByPage?.find(
-            (item) => selectedPath === item.page
-          ),
-        ]
-      : []
-
-  return daysToOffsetCalendar.length
-    ? [
-        {
-          from: addDays(
-            today,
-            daysToOffsetCalendar.length && daysToOffsetCalendar[0]?.offset
-              ? daysToOffsetCalendar[0]?.offset
-              : -2
-          ),
-          to: addDays(today, -100),
-        },
-      ]
-    : []
-}

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

@@ -16,7 +16,11 @@ export type DisableCalendarDates = {
     page: string
     offset: number
   }[]
-  selectedDates?: { to: Date; from: Date }
+}
+
+export type RangeContext = {
+  from: Date
+  to: Date
 }
 
 export type CalendarTypes = {
@@ -30,13 +34,14 @@ export type CalendarTypes = {
   disabledDates?: Matcher[]
   setDisabledDates?: (arg: Matcher[]) => void
   loadingData?: boolean
-  initialCalendarRange?: DateRange | undefined
   showFeedback?: boolean
   noActiveSelection?: boolean
   palette?: Palette
-
   updateCalendarMonthNavigation?: boolean
   setUpdateCalendarMonthNavigation?: (arg: (prev: boolean) => boolean) => void
   updateCalendarDefaultMoth?: number
-  setOverlappingDates: (arg: boolean) => void
+  setCalendarHasError?: (arg: boolean) => void
+  setUpdatedForSubmit?: (arg: boolean) => void
+  rangeContext?: RangeContext
+  calendarHasError?: boolean
 }

package/src/core/components/calendar/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useCalendarTooltips } from './useCalendarTooltips'
+export { useCalendarLoadingSpinner } from './useCalendarLoadingSpinner'
+export { useUpdateDisabledDates } from './useUpdateDisabledDates'

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

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+
+type Props = {
+  loadingData?: boolean
+  updateCalendarMonthNavigation?: boolean
+  updateCalendarDefaultMoth?: number
+}
+
+export const useCalendarLoadingSpinner = ({
+  loadingData,
+  updateCalendarMonthNavigation,
+  updateCalendarDefaultMoth,
+}: Props) =>
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+
+    const loadingSpinner: HTMLElement | null = document.querySelector(
+      '.will-filter-bar-calendar .rdp-months .will-calendar-spinner'
+    )
+    if (loadingData) {
+      if (loadingSpinner) loadingSpinner.style.display = 'flex'
+    } else {
+      if (loadingSpinner) loadingSpinner.style.display = 'none'
+    }
+  }, [loadingData, updateCalendarMonthNavigation, updateCalendarDefaultMoth])