willba-component-library 0.2.23 → 0.2.25

package/package.json

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

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

@@ -87,7 +87,8 @@
 
 /* Tooltip */
 .will-root .will-calendar-filter-container .will-calendar-tooltip,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date {
  position: absolute;
  top: -42px;
  transform: translateX(calc(-50% + 20px));
@@ -96,7 +97,8 @@
  z-index: 2;
 }
 .will-root .will-calendar-filter-container .will-calendar-tooltip > div,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out> div {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out > div,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div {
   background-color: white;
   position: relative;
   padding: 5px 10px;
@@ -105,7 +107,8 @@
 }
 
 .will-root .will-calendar-filter-container .will-calendar-tooltip::before,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before {
   content: "";
   width: 10px;
   height: 10px;
@@ -119,7 +122,8 @@
 }
 
 .will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,
-.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out {
+.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out,
+.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date {
   display: block;
 }
 
@@ -145,8 +149,22 @@
 
 /* No active selection */
 
-.will-root .will-calendar-filter-container .no-active-selection {
-  background-color: lightgrey;
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection {
+  background-color: var(--will-grey);
+}
+
+/* Overlapping date */
+
+.will-root .will-calendar-filter-container .overlapping-date {
+  user-select: none;
+  pointer-events: none;
+  
+}
+
+.will-root .will-calendar-filter-container .overlapping-date:hover {
+  cursor: not-allowed;
 }
 
 

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react'
+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'
@@ -36,19 +36,61 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
     const today = startOfDay(new Date())
     const selectedStartDate = calendarRange?.from
 
+    // Handle loading spinner
     useEffect(() => {
-      if (!calendarRange) {
-        setCalendarRange(undefined)
-      } else if (calendarRange.from && calendarRange.to) {
-        handleSelectedCheckIn({
-          range: calendarRange,
-          disableCalendarDates,
-          setCalendarRange,
-          setDisabledDates,
-          calendarRange,
+      if (typeof document === 'undefined') return
+      const loadingSpinner: HTMLElement | null = document.querySelector(
+        '.will-filter-bar-calendar .will-calendar-spinner'
+      )
+      if (loadingData) {
+        if (loadingSpinner) loadingSpinner.style.display = 'flex'
+      } else {
+        if (loadingSpinner) loadingSpinner.style.display = 'none'
+      }
+    }, [loadingData])
+
+    // Handle overlapping availableDates.lastCheckOut and disabledDates.start
+    const [overlappingDate, setOverlappingDate] = useState<
+      DateRange | undefined
+    >(undefined)
+
+    useMemo(() => {
+      if (disableCalendarDates?.availableDates) {
+        const dateFormat = 'dd-MM-yyyy'
+
+        const availableDateMap = new Map()
+        disableCalendarDates.availableDates?.forEach((available) => {
+          availableDateMap.set(
+            format(available.lastCheckOut, dateFormat),
+            available
+          )
         })
+
+        const updatedDisabledDates = disableCalendarDates.disabledDates?.map(
+          (dateRange) => {
+            const formattedFromDate = format(dateRange.from, dateFormat)
+            if (availableDateMap.has(formattedFromDate)) {
+              setOverlappingDate(dateRange)
+
+              return {
+                ...dateRange,
+                from: addDays(dateRange.from, 1),
+              }
+            }
+            return dateRange
+          }
+        )
+
+        disableCalendarDates.disabledDates = updatedDisabledDates
       }
-    }, [disableCalendarDates, calendarRange])
+    }, [disableCalendarDates])
+
+    // Handle disable dates by page
+    const disabledDatesByPage = handleDisabledDatesByPage({
+      today,
+      selectedPath,
+      disableCalendarDates,
+    })
 
     // Handle tooltip
     useEffect(() => {
@@ -58,6 +100,11 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       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'
       )
@@ -70,6 +117,13 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       const calendarMonthContainer = document.querySelector(
         '.will-filter-bar-calendar .rdp-months'
       )
+      const calendarOverlappingDate = document.querySelector(
+        '.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)'
+      )
+      const appendedOverlappingDateTooltip: HTMLElement | null =
+        document.querySelector(
+          '.will-filter-bar-calendar .rdp-cell .will-calendar-tooltip-overlapping-date'
+        )
 
       const tooltipClones: Element[] = []
       const tooltipClonesCheckOut: Element[] = []
@@ -98,61 +152,24 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
         calendarMonthContainer.appendChild(loadingSpinner)
       }
 
+      if (
+        calendarOverlappingDate &&
+        calendarTooltipOverlappingDate &&
+        !appendedOverlappingDateTooltip &&
+        !calendarRange
+      ) {
+        calendarOverlappingDate.appendChild(calendarTooltipOverlappingDate)
+      } else if (calendarRange && appendedOverlappingDateTooltip) {
+        appendedOverlappingDateTooltip.style.visibility = 'hidden'
+      } else if (!calendarRange && appendedOverlappingDateTooltip) {
+        appendedOverlappingDateTooltip.style.visibility = 'visible'
+      }
+
       return () => {
         tooltipClones.forEach((clone) => clone.remove())
         tooltipClonesCheckOut.forEach((clone) => clone.remove())
       }
-    }, [calendarRange, updateCalendar])
-
-    // Handle loading spinner
-    useEffect(() => {
-      if (typeof document === 'undefined') return
-      const loadingSpinner: HTMLElement | null = document.querySelector(
-        '.will-filter-bar-calendar .will-calendar-spinner'
-      )
-      if (loadingData) {
-        if (loadingSpinner) loadingSpinner.style.display = 'flex'
-      } else {
-        if (loadingSpinner) loadingSpinner.style.display = 'none'
-      }
-    }, [loadingData])
-
-    // Handle overlapping availableDates.lastCheckOut and disabledDates.start
-    useEffect(() => {
-      if (disableCalendarDates) {
-        const dateFormat = 'dd-MM-yyyy'
-
-        const availableDateMap = new Map()
-        disableCalendarDates.availableDates?.forEach((available) => {
-          availableDateMap.set(
-            format(available.lastCheckOut, dateFormat),
-            available
-          )
-        })
-
-        const updatedDisabledDates = disableCalendarDates.disabledDates?.map(
-          (dateRange) => {
-            const formattedFromDate = format(dateRange.from, dateFormat)
-            if (availableDateMap.has(formattedFromDate)) {
-              return {
-                ...dateRange,
-                from: addDays(dateRange.from, 1),
-              }
-            }
-            return dateRange
-          }
-        )
-
-        disableCalendarDates.disabledDates = updatedDisabledDates
-      }
-    }, [disableCalendarDates])
-
-    // Handle disable dates by page
-    const disabledDatesByPage = handleDisabledDatesByPage({
-      today,
-      selectedPath,
-      disableCalendarDates,
-    })
+    }, [calendarRange, updateCalendar, overlappingDate])
 
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
@@ -171,14 +188,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 setCalendarRange,
                 setDisabledDates,
                 calendarRange,
+                overlappingDate,
               })
             }
-            modifiersClassNames={{
-              today: 'my-today',
-              booked: 'booked',
-              disabledAfterCheckIn: 'disabled-after-check-in',
-              noActiveSelection: 'no-active-selection',
-            }}
             captionLayout="dropdown-buttons"
             defaultMonth={
               selectedStartDate ||
@@ -199,6 +211,19 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? (requestDates(val), setUpdateCalendar((prev) => !prev))
                 : null
             }}
+            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
@@ -210,9 +235,26 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? [{ after: calendarRange.from }]
                 : [],
 
-              noActiveSelection: !calendarRange
-                ? initialCalendarRange || []
+              noActiveSelectionStart: !calendarRange
+                ? initialCalendarRange?.from || []
+                : [],
+              noActiveSelectionMid:
+                !calendarRange &&
+                initialCalendarRange?.from &&
+                initialCalendarRange?.to
+                  ? [
+                      {
+                        after: initialCalendarRange?.from,
+                        before: initialCalendarRange?.to,
+                      },
+                    ]
+                  : [],
+              noActiveSelectionEnd: !calendarRange
+                ? initialCalendarRange?.to || []
                 : [],
+
+              overlappingDate:
+                (!calendarRange?.from && overlappingDate?.from) || [],
             }}
           />
 
@@ -222,6 +264,9 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
           <div className={'will-calendar-tooltip-check-out'}>
             <div>{t('noCheckOut')}</div>
           </div>
+          <div className={'will-calendar-tooltip-overlapping-date'}>
+            <div>{t('checkOutOnly')}</div>
+          </div>
           <div className={'will-calendar-spinner'}>Loading...</div>
         </div>
       </div>
@@ -237,12 +282,14 @@ const handleSelectedCheckIn = ({
   setCalendarRange,
   setDisabledDates,
   calendarRange,
+  overlappingDate,
 }: {
   range: DateRange | undefined
   disableCalendarDates?: DisableCalendarDates
   setCalendarRange: (range: DateRange | undefined) => void
   setDisabledDates: ((arg: Matcher[]) => void) | undefined
   calendarRange?: DateRange
+  overlappingDate?: DateRange
 }) => {
   // Calendar dates select logic
   const dateFormat = 'dd-MM-yyyy'
@@ -255,6 +302,10 @@ const handleSelectedCheckIn = ({
     ? format(calendarRange?.to, dateFormat)
     : null
 
+  const overlappingDateFrom = overlappingDate?.from
+    ? format(overlappingDate.from, dateFormat)
+    : null
+
   const checkOutRange = disableCalendarDates?.availableDates?.length
     ? disableCalendarDates.availableDates.find(
         (checkInDate) =>
@@ -270,19 +321,6 @@ const handleSelectedCheckIn = ({
       format(checkIn, dateFormat) ===
       format(checkOutRange.firstCheckOut, dateFormat)
 
-    // Handle overlapping availableDates.lastCheckOut and disabledDates.start
-    // const filteredDisabledCalendarDates =
-    //   disableCalendarDates?.disabledDates?.map((dateRange) => {
-    //     if (
-    //       dateRange.from &&
-    //       format(dateRange.from, dateFormat) ===
-    //         format(checkOutRange.lastCheckOut, dateFormat)
-    //     ) {
-    //       return { ...dateRange, from: addDays(checkOutRange.lastCheckOut, 1) }
-    //     }
-    //     return dateRange
-    //   })
-
     setDisabledDates([
       // { before: findCheckOutRange?.checkIn },
 
@@ -299,7 +337,8 @@ const handleSelectedCheckIn = ({
 
   if (
     (rangeTo && rangeFrom && rangeFrom === rangeTo) ||
-    (!rangeTo && !rangeFrom)
+    (!rangeTo && !rangeFrom) ||
+    rangeFrom === overlappingDateFrom
   ) {
     setCalendarRange(undefined)
     setDisabledDates && setDisabledDates([])
@@ -345,34 +384,3 @@ const handleDisabledDatesByPage = ({
       ]
     : []
 }
-
-// const handleOverlappingDates = ({
-//   disableCalendarDates,
-// }: {
-//   disableCalendarDates?: DisableCalendarDates
-// }): DisableCalendarDates | undefined => {
-//   if (!disableCalendarDates) return undefined
-
-//   const dateFormat = 'dd-MM-yyyy'
-
-//   disableCalendarDates.disabledDates = disableCalendarDates.disabledDates?.map(
-//     (dateRange) => {
-//       const overlappingDate = disableCalendarDates.availableDates?.find(
-//         (available) =>
-//           format(available.lastCheckOut, dateFormat) ===
-//           format(dateRange.from, dateFormat)
-//       )
-
-//       if (overlappingDate) {
-//         return {
-//           ...dateRange,
-//           from: addDays(dateRange.from, 1),
-//         }
-//       }
-
-//       return dateRange
-//     }
-//   )
-
-//   return disableCalendarDates
-// }

package/src/locales/en/common.json

@@ -7,5 +7,6 @@
 "apply": "Apply",
 "clearDates": "Clear dates",
 "noCheckIn": "Room not available",
-"noCheckOut": "Check-out not available"
+"noCheckOut": "Check-out not available",
+"checkOutOnly": "Check-out only"
 }

package/src/locales/fi/common.json

@@ -7,6 +7,7 @@
 "apply": "Aseta",
 "clearDates": "Tyhjennä",
 "noCheckIn": "Huone ei saatavilla",
-"noCheckOut": "Uloskirjaus ei saatavilla"
+"noCheckOut": "Uloskirjaus ei saatavilla",
+"checkOutOnly": "Vain uloskirjaus"
 }