willba-component-library 0.2.78 → 0.2.80

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

@@ -1,24 +1,12 @@
-import React, { forwardRef } from 'react'
-import { startOfDay } from 'date-fns'
+import React, { forwardRef, useEffect, useMemo, useState } from 'react'
+import { addDays, startOfDay, format } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
-import { DateRange, DayPicker } from 'react-day-picker'
+import { DateRange, DayPicker, Matcher } from 'react-day-picker'
 import { useMediaQuery } from 'react-responsive'
 
-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 { CalendarTypes, DisableCalendarDates } from './CalendarTypes'
+import { SpinnerSVG } from '../../../assets/SpinnerSvg'
 
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
@@ -36,14 +24,11 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       setDisabledDates,
       updateCalendarMonthNavigation,
       setUpdateCalendarMonthNavigation,
-      updateCalendarDefaultMonth,
+      updateCalendarDefaultMoth,
       loadingData,
+      initialCalendarRange,
       showFeedback,
       palette,
-      setCalendarHasError,
-      setUpdatedForSubmit,
-      rangeContext,
-      calendarHasError,
     }: CalendarTypes,
     ref
   ) => {
@@ -53,16 +38,81 @@ 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 initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
-    const { newDisableCalendarDates, overlappingDate, lastPossibleCheckout } =
-      useUpdateDisabledDates({
-        disableCalendarDates,
-        calendarRange,
-        updateCalendarMonthNavigation,
-        updateCalendarDefaultMonth,
-      })
+    // 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 disable dates by page
     const disabledDatesByPage = handleDisabledDatesByPage({
@@ -72,72 +122,132 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
     })
 
     // Handle tooltip
-    useCalendarTooltips({
-      showFeedback,
-    })
+    useEffect(() => {
+      if (typeof document === 'undefined' || !showFeedback) return
 
-    // Handle loading spinner
-    useCalendarLoadingSpinner({
-      loadingData,
-    })
+      // Children
+      const calendarTooltip = document.querySelector('.will-calendar-tooltip')
+      const calendarTooltipCheckOut = document.querySelector(
+        '.will-calendar-tooltip-check-out'
+      )
 
-    // 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,
-    })
+      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[] = []
 
-    // Handle check for continuous selection in the range context
-    checkForContinuousSelection({
-      setCalendarHasError,
-      rangeContext,
+      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())
+      }
+    }, [
       calendarRange,
-      calendarHasError,
-      disabledDates: newDisableCalendarDates?.disabledDates,
-    })
+      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])
 
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
         <div className="will-calendar-filter-container">
           <DayPicker
-            key={updateCalendarDefaultMonth}
+            key={updateCalendarDefaultMoth}
             id="will-calendar"
             mode="range"
             locale={language === 'en' ? enUS : fi}
             numberOfMonths={!isTablet ? 2 : 1}
             weekStartsOn={1}
             selected={calendarRange}
-            onSelect={(range) => handleOnSelect(range)}
+            onSelect={(range) =>
+              handleSelectedCheckIn({
+                range,
+                newDisableCalendarDates,
+                setCalendarRange,
+                setDisabledDates,
+                calendarRange,
+                overlappingDate,
+              })
+            }
             captionLayout="dropdown-buttons"
             defaultMonth={
-              calendarRange?.from ||
+              initialCalendarRange?.from ||
               selectedStartDate ||
-              rangeContextStartDate ||
               (newDisableCalendarDates?.disabledDates?.length
                 ? newDisableCalendarDates.disabledDates[0].from
                 : today)
@@ -146,20 +256,8 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
               disabledDatesByPage.length
                 ? disabledDatesByPage
                 : disabledDates?.length
-                ? [
-                    lastPossibleCheckout && lastPossibleCheckout,
-                    ...disabledDates,
-                    ...firstPossibleRangeContextCheckIn,
-                    ...lastPossibleRangeContextCheckOut,
-                  ]
-                : newDisableCalendarDates?.disabledDates?.length
-                ? [
-                    lastPossibleCheckout && lastPossibleCheckout,
-                    ...newDisableCalendarDates.disabledDates,
-                    ...firstPossibleRangeContextCheckIn,
-                    ...lastPossibleRangeContextCheckOut,
-                  ]
-                : []
+                ? disabledDates
+                : newDisableCalendarDates?.disabledDates || []
             }
             fromMonth={today}
             onMonthChange={(val) => {
@@ -168,43 +266,55 @@ 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: 'no-active-selection-start',
-              noActiveSelectionMid: 'no-active-selection-mid',
-              noActiveSelectionEnd: 'no-active-selection-end',
+              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 || [],
 
-              checkoutOptionsMid:
-                'rdp-day_selected rdp-day_range_middle checkout-option',
+              disabledAfterCheckIn: calendarRange?.from
+                ? [{ after: calendarRange.from }]
+                : [],
 
-              checkInOnly: 'check-in-only',
-              checkOutOnly: 'check-out-only',
+              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,
+                  }))) ||
+                [],
             }}
-            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'}>
@@ -216,21 +326,121 @@ 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'}>
-            <IconsSvg
-              fill={palette?.primary || 'inherit'}
-              size={50}
-              icon="spinner"
-            />
+            <SpinnerSVG fill={palette?.primary || 'inherit'} size={50} />
           </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,11 +18,6 @@ export type DisableCalendarDates = {
   }[]
 }
 
-export type RangeContext = {
-  from: Date
-  to: Date
-}
-
 export type CalendarTypes = {
   calendarRange?: DateRange | undefined
   setCalendarRange: (range: DateRange | undefined) => void
@@ -34,14 +29,12 @@ 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
-  updateCalendarDefaultMonth?: number
-  setCalendarHasError?: (arg: boolean) => void
-  setUpdatedForSubmit?: (arg: boolean) => void
-  rangeContext?: RangeContext
-  calendarHasError?: boolean
+  updateCalendarDefaultMoth?: number
 }

package/src/core/utils/index.ts

@@ -0,0 +1,3 @@
+export { parseDates } from './parseDates'
+export { parseDate } from './parseDate'
+export { nightsCount } from './nightsCount'

package/src/locales/en/common.json

@@ -8,11 +8,5 @@
 "clearDates": "Clear dates",
 "noCheckIn": "Room not available",
 "noCheckOut": "Check-out not available",
-"checkOutOnly": "Check-out only",
-"checkInOnly": "Check-in only",
-"errors": {
-    "calendarErrors": {
-        "checkInAvailabilityError": "All room reservations in a single purchase must be for the same dates. If you need reservations for different dates, please make a separate purchase."
-    }
-}
+"checkOutOnly": "Check-out only"
 }

package/src/locales/en/filterBar.json

@@ -7,8 +7,7 @@
     "endDate": "End date",
     "title": "Calendar",
     "checkoutOnly": "Check-out only",
-    "hasDisableDates": "Contains unavailable dates",
-    "minNights": "2 nights min"
+    "hasDisableDates": "Contains unavailable dates"
   },
   "guests": {
     "label": "Number of guests",

package/src/locales/fi/common.json

@@ -8,12 +8,6 @@
 "clearDates": "Tyhjennä",
 "noCheckIn": "Huone ei saatavilla",
 "noCheckOut": "Uloskirjaus ei saatavilla",
-"checkOutOnly": "Vain uloskirjaus",
-"checkInOnly": "Vain sisäänkirjaus",
-"errors": {
-    "calendarErrors": {
-        "checkInAvailabilityError": "Yhdellä ostolla tehdyt huonevaraukset tulee olla samalle ajankohdalle. Jos tarvitset huonevarauksia eri ajankohdille, ole hyvä ja tee uusi osto."
-    }
-}
+"checkOutOnly": "Vain uloskirjaus"
 }
   

package/src/locales/fi/filterBar.json

@@ -7,8 +7,7 @@
     "endDate": "Loppu",
     "title": "Kalenteri",
     "checkoutOnly": "Check-out only",
-    "hasDisableDates": "Contains unavailable dates",
-    "minNights": "2 nights min"
+    "hasDisableDates": "Contains unavailable dates"
   },
   "guests": {
     "label": "Vierasmäärä",

package/src/themes/Default.css

@@ -15,30 +15,21 @@
   --will-primary: #374269;
   --will-secondary: #374269;
   --will-grey: #ABA7AF;
-  --will-light-grey: #C8C8C8;
   --will-white: #fff;
   --will-white-transparent: #ffffffcf;
   --will-black: #000;
   --will-onahau: #CDEEFF;
   --will-text: #5A5959;
   --will-charcoal-blue: #384265;
-  --will-error: #d32f2f;
-
-  /* Transparent */
-  --will-transparent-black: rgba(0, 0, 0, 0.5);
   --will-transparent-white: rgba(255, 255, 255, 0.30);
-  --will-transparent-lavender: rgba(171, 167, 175, 0.30);
-
-  /* Color mix */
-  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);
-  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);
+  --will-transparent-black: rgba(171, 167, 175, 0.30);
 
-
-  /* Shadows */
+  /* Confines */
   --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;
   --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;
 
   /* Breakpoints */
+
   --will-lg: 1140px;
   --will-md: 960px;
   --will-sm: 600px;