willba-component-library 0.2.53 → 0.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.2.53",
+  "version": "0.2.55",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/hooks/useFilterBar.tsx

@@ -124,7 +124,7 @@ export const useFilterBar = ({
 
     handleSelectedFilter(false)
 
-    if (onSubmit) {
+    if (onSubmit && selectedPath === Pages.ROOMS) {
       onSubmit(newParams)
     } else {
       setInnerLoading(true),

package/src/components/FilterCalendar/FilterCalendar.css

@@ -16,9 +16,12 @@
 /* Header */
 
 .will-root .will-calendar-wrapper .will-calendar-header {
+    border-bottom: 1px solid var(--will-grey);
+}
+
+.will-root .will-calendar-wrapper .will-calendar-header-row {
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid var(--will-grey);
     align-items: center;
 }
 

package/src/components/FilterCalendar/FilterCalendar.stories.tsx

@@ -155,6 +155,10 @@ export const Primary: Story = {
           to: new Date('2024-08-23'),
         },
       ],
+      selectedDates: {
+        from: new Date('2024-09-05'),
+        to: new Date('2024-09-10'),
+      },
     },
     language: 'en',
     palette: {

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -46,6 +46,8 @@ export default function FilterCalendar({
     updateCalendarDefaultMoth,
     setUpdateCalendarMonthNavigation,
     initialCalendarRange,
+    overlappingDates,
+    setOverlappingDates,
   } = useFilterCalendar({
     onSubmit,
     setToggleCalendar,
@@ -70,9 +72,13 @@ export default function FilterCalendar({
       {toggleCalendar && (
         <div className={`will-calendar-wrapper`} ref={filtersRef}>
           <div className={`will-calendar-header`}>
-            <h2>{t('filterBar:calendar.title')}</h2>
-            <CloseButton handleClose={() => setToggleCalendar(false)} />
+            <div className={`will-calendar-header-row`}>
+              <h2>{t('filterBar:calendar.title')}</h2>
+              <CloseButton handleClose={() => setToggleCalendar(false)} />
+            </div>
+            {overlappingDates && <div>Chose other dates</div>}
           </div>
+
           <div className={`will-calendar-main`}>
             <Calendar
               calendarRange={calendarRange}
@@ -94,6 +100,7 @@ export default function FilterCalendar({
               showFeedback={showFeedback}
               noActiveSelection={noActiveSelection}
               palette={palette}
+              setOverlappingDates={setOverlappingDates}
             />
           </div>
           <div className={`will-calendar-footer`}>

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

@@ -24,6 +24,8 @@ export const useFilterCalendar = ({
   const [updateCalendarDefaultMoth, setUpdateCalendarDefaultMoth] =
     useState<number>(0)
 
+  const [overlappingDates, setOverlappingDates] = useState<boolean>(false)
+
   useEffect(() => {
     if (typeof window === 'undefined') return
 
@@ -70,5 +72,7 @@ export const useFilterCalendar = ({
     updateCalendarMonthNavigation,
     updateCalendarDefaultMoth,
     initialCalendarRange,
+    overlappingDates,
+    setOverlappingDates,
   }
 }

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

@@ -1,5 +1,12 @@
 import React, { forwardRef, useEffect, useMemo, useState } from 'react'
-import { addDays, startOfDay, format } from 'date-fns'
+import {
+  addDays,
+  startOfDay,
+  format,
+  isAfter,
+  isEqual,
+  isBefore,
+} from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
 import { DateRange, DayPicker, Matcher } from 'react-day-picker'
@@ -29,6 +36,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       initialCalendarRange,
       showFeedback,
       palette,
+      setOverlappingDates,
     }: CalendarTypes,
     ref
   ) => {
@@ -242,6 +250,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 setDisabledDates,
                 calendarRange,
                 overlappingDate,
+                setOverlappingDates,
               })
             }
             captionLayout="dropdown-buttons"
@@ -344,11 +353,13 @@ const handleSelectedCheckIn = ({
   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[]
 }) => {
@@ -374,6 +385,30 @@ const handleSelectedCheckIn = ({
       )
     : 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)
@@ -395,7 +430,21 @@ const handleSelectedCheckIn = ({
     ])
   }
 
+  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

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

@@ -16,6 +16,7 @@ export type DisableCalendarDates = {
     page: string
     offset: number
   }[]
+  selectedDates?: { to: Date; from: Date }
 }
 
 export type CalendarTypes = {
@@ -37,4 +38,5 @@ export type CalendarTypes = {
   updateCalendarMonthNavigation?: boolean
   setUpdateCalendarMonthNavigation?: (arg: (prev: boolean) => boolean) => void
   updateCalendarDefaultMoth?: number
+  setOverlappingDates: (arg: boolean) => void
 }

package/src/core/utils/handleOverlappingDates.tsx

@@ -0,0 +1,3 @@
+export const handleOverlappingDates = () => {
+  return
+}