willba-component-library 0.2.80 → 0.2.82

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

@@ -1,12 +1,24 @@
-import React, { forwardRef, useEffect, useMemo, useState } from 'react'
-import { addDays, startOfDay, format } from 'date-fns'
+import React, { forwardRef } from 'react'
+import { startOfDay } 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'
@@ -24,11 +36,14 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       setDisabledDates,
       updateCalendarMonthNavigation,
       setUpdateCalendarMonthNavigation,
-      updateCalendarDefaultMoth,
+      updateCalendarDefaultMonth,
       loadingData,
-      initialCalendarRange,
       showFeedback,
       palette,
+      setCalendarHasError,
+      setUpdatedForSubmit,
+      rangeContext,
+      calendarHasError,
     }: CalendarTypes,
     ref
   ) => {
@@ -38,81 +53,16 @@ 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
-      }
-      return disableCalendarDates
-    }, [
-      disableCalendarDates,
-      calendarRange,
-      updateCalendarMonthNavigation,
-      initialCalendarRange,
-      updateCalendarDefaultMoth,
-    ])
+    // Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
+    const { newDisableCalendarDates, overlappingDate, lastPossibleCheckout } =
+      useUpdateDisabledDates({
+        disableCalendarDates,
+        calendarRange,
+        updateCalendarMonthNavigation,
+        updateCalendarDefaultMonth,
+      })
 
     // Handle disable dates by page
     const disabledDatesByPage = handleDisabledDatesByPage({
@@ -122,132 +72,72 @@ 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)
-      }
+    useCalendarTooltips({
+      showFeedback,
+    })
 
-      if (
-        calendarTooltipOverlappingDate &&
-        calendarOverlappingDate.length > 0
-      ) {
-        calendarOverlappingDate.forEach((element) => {
-          const tooltipClone: Element =
-            calendarTooltipOverlappingDate.cloneNode(true) as Element
-          element.appendChild(tooltipClone)
-          tooltipClonesOverlappingDates.push(tooltipClone)
-        })
-      }
+    // Handle loading spinner
+    useCalendarLoadingSpinner({
+      loadingData,
+    })
 
-      return () => {
-        tooltipClonesCheckIn.forEach((clone) => clone.remove())
-        tooltipClonesCheckOut.forEach((clone) => clone.remove())
-        tooltipClonesSpinner.forEach((clone) => clone.remove())
-        tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
-      }
-    }, [
+    // 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,
-      updateCalendarMonthNavigation,
-      overlappingDate,
-      initialCalendarRange,
-      updateCalendarDefaultMoth,
-    ])
+    })
 
-    // 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])
+    // Handle check for continuous selection in the range context
+    checkForContinuousSelection({
+      setCalendarHasError,
+      rangeContext,
+      calendarRange,
+      calendarHasError,
+      disabledDates: newDisableCalendarDates?.disabledDates,
+    })
 
     return (
       <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}
             numberOfMonths={!isTablet ? 2 : 1}
             weekStartsOn={1}
             selected={calendarRange}
-            onSelect={(range) =>
-              handleSelectedCheckIn({
-                range,
-                newDisableCalendarDates,
-                setCalendarRange,
-                setDisabledDates,
-                calendarRange,
-                overlappingDate,
-              })
-            }
+            onSelect={(range) => handleOnSelect(range)}
             captionLayout="dropdown-buttons"
             defaultMonth={
-              initialCalendarRange?.from ||
+              calendarRange?.from ||
               selectedStartDate ||
+              rangeContextStartDate ||
               (newDisableCalendarDates?.disabledDates?.length
                 ? newDisableCalendarDates.disabledDates[0].from
                 : today)
@@ -256,8 +146,20 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
               disabledDatesByPage.length
                 ? disabledDatesByPage
                 : disabledDates?.length
-                ? disabledDates
-                : newDisableCalendarDates?.disabledDates || []
+                ? [
+                    lastPossibleCheckout && lastPossibleCheckout,
+                    ...disabledDates,
+                    ...firstPossibleRangeContextCheckIn,
+                    ...lastPossibleRangeContextCheckOut,
+                  ]
+                : newDisableCalendarDates?.disabledDates?.length
+                ? [
+                    lastPossibleCheckout && lastPossibleCheckout,
+                    ...newDisableCalendarDates.disabledDates,
+                    ...firstPossibleRangeContextCheckIn,
+                    ...lastPossibleRangeContextCheckOut,
+                  ]
+                : []
             }
             fromMonth={today}
             onMonthChange={(val) => {
@@ -266,55 +168,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 ',
-              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 || [],
+              noActiveSelectionStart: 'no-active-selection-start',
+              noActiveSelectionMid: 'no-active-selection-mid',
+              noActiveSelectionEnd: 'no-active-selection-end',
 
-              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,
+                lastPossibleCheckout,
+                findFirstPossibleRangeContextCheckIn,
+                findLastPossibleRangeContextCheckOut,
+                firstPossibleRangeContextCheckIn,
+                lastPossibleRangeContextCheckOut,
+                currentSelectionLastCheckoutDate,
+              })
+            }
           />
 
           <div className={'will-calendar-tooltip'}>
@@ -326,121 +216,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>{t('checkInOnly')}</div>
+          </div>
+          <div className={'will-calendar-tooltip-check-out-only'}>
+            <div>{t('checkOutOnly')}</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,
-}: {
-  range: DateRange | undefined
-  newDisableCalendarDates?: DisableCalendarDates
-  setCalendarRange: (range: DateRange | undefined) => void
-  setDisabledDates: ((arg: Matcher[]) => void) | undefined
-  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
-
-  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 },
-    ])
-  }
-
-  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

@@ -18,6 +18,11 @@ export type DisableCalendarDates = {
   }[]
 }
 
+export type RangeContext = {
+  from: Date
+  to: Date
+}
+
 export type CalendarTypes = {
   calendarRange?: DateRange | undefined
   setCalendarRange: (range: DateRange | undefined) => void
@@ -29,12 +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
+  updateCalendarDefaultMonth?: number
+  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,19 @@
+import { useEffect } from 'react'
+
+type Props = {
+  loadingData?: boolean
+}
+
+export const useCalendarLoadingSpinner = ({ loadingData }: 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'
+    }
+  })