willba-component-library 0.2.21 → 0.2.23

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -26,6 +26,8 @@ export default function FilterCalendar({
   loadingData,
   setToggleCalendar,
   requestDates,
+  showFeedback,
+  noActiveSelection,
 }: FilterCalendarTypes) {
   const themePalette = useTheme({ palette })
 
@@ -42,7 +44,8 @@ export default function FilterCalendar({
     setDisabledDates,
     updateCalendar,
     setUpdateCalendar,
-  } = useFilterCalendar({ onSubmit, setToggleCalendar })
+    initialCalendarRange,
+  } = useFilterCalendar({ onSubmit, setToggleCalendar, noActiveSelection })
 
   // Display component after fully loaded
   useAwaitRender()
@@ -76,6 +79,9 @@ export default function FilterCalendar({
               updateCalendar={updateCalendar}
               setUpdateCalendar={setUpdateCalendar}
               loadingData={loadingData}
+              initialCalendarRange={initialCalendarRange}
+              showFeedback={showFeedback}
+              noActiveSelection={noActiveSelection}
             />
           </div>
           <div className={`will-calendar-footer`}>
@@ -85,6 +91,7 @@ export default function FilterCalendar({
                   {parseDate({
                     date: calendarRange?.from,
                     dateFormat: 'EEEEEE d.M.yyyy',
+                    language,
                   }) || t('common:checkIn')}
                 </span>
                 <span className={`will-calendar-footer-dates-separator`}>
@@ -94,6 +101,7 @@ export default function FilterCalendar({
                   {parseDate({
                     date: calendarRange?.to,
                     dateFormat: 'EEEEEE d.M.yyyy',
+                    language,
                   }) || t('common:checkOut')}
                 </span>
               </div>

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

@@ -4,10 +4,18 @@ import { DateRange, Matcher } from 'react-day-picker'
 type Props = {
   onSubmit: (val: any) => void
   setToggleCalendar: (val: boolean) => void
+  noActiveSelection?: boolean
 }
 
-export const useFilterCalendar = ({ onSubmit, setToggleCalendar }: Props) => {
+export const useFilterCalendar = ({
+  onSubmit,
+  setToggleCalendar,
+  noActiveSelection,
+}: Props) => {
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
+  const [initialCalendarRange, setInitialCalendarRange] = useState<
+    DateRange | undefined
+  >()
   const [disabledDates, setDisabledDates] = useState<Matcher[]>([])
   const [updateCalendar, setUpdateCalendar] = useState<boolean>(false)
 
@@ -20,18 +28,18 @@ export const useFilterCalendar = ({ onSubmit, setToggleCalendar }: Props) => {
     const endDateParam = urlSearchParams.get('endDate')
 
     if (startDateParam && endDateParam) {
-      setCalendarRange({
-        from: new Date(startDateParam),
-        to: new Date(endDateParam),
-      })
+      noActiveSelection
+        ? setInitialCalendarRange({
+            from: new Date(startDateParam),
+            to: new Date(endDateParam),
+          })
+        : setCalendarRange({
+            from: new Date(startDateParam),
+            to: new Date(endDateParam),
+          })
     }
   }, [])
 
-  // TODO - handle the onSubmit on calendar open
-  // useEffect(() => {
-  //   onSubmit(calendarRange)
-  // }, [])
-
   const handleSubmit = () => {
     setToggleCalendar(false)
     return onSubmit(calendarRange)
@@ -51,5 +59,6 @@ export const useFilterCalendar = ({ onSubmit, setToggleCalendar }: Props) => {
     calendarRange,
     disabledDates,
     updateCalendar,
+    initialCalendarRange,
   }
 }

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

@@ -143,4 +143,10 @@
   font-weight: 600;
 }
 
+/* No active selection */
+
+.will-root .will-calendar-filter-container .no-active-selection {
+  background-color: lightgrey;
+}
+
 

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, MouseEvent } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { addDays, startOfDay, format } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
@@ -24,6 +24,8 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       updateCalendar,
       setUpdateCalendar,
       loadingData,
+      initialCalendarRange,
+      showFeedback,
     }: CalendarTypes,
     ref
   ) => {
@@ -50,7 +52,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
 
     // Handle tooltip
     useEffect(() => {
-      if (typeof document === 'undefined') return
+      if (typeof document === 'undefined' || !showFeedback) return
 
       const calendarTooltip = document.querySelector('.will-calendar-tooltip')
       const calendarTooltipCheckOut = document.querySelector(
@@ -115,6 +117,36 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       }
     }, [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,
@@ -145,6 +177,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
               today: 'my-today',
               booked: 'booked',
               disabledAfterCheckIn: 'disabled-after-check-in',
+              noActiveSelection: 'no-active-selection',
             }}
             captionLayout="dropdown-buttons"
             defaultMonth={
@@ -176,6 +209,10 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
               disabledAfterCheckIn: calendarRange?.from
                 ? [{ after: calendarRange.from }]
                 : [],
+
+              noActiveSelection: !calendarRange
+                ? initialCalendarRange || []
+                : [],
             }}
           />
 
@@ -226,18 +263,26 @@ const handleSelectedCheckIn = ({
       )
     : null
 
-  if (
-    rangeFrom &&
-    // rangeFrom !== calendarTo &&
-    checkOutRange &&
-    setDisabledDates
-  ) {
+  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)
 
+    // 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 },
 
@@ -247,6 +292,7 @@ const handleSelectedCheckIn = ({
         from: noDatesRange ? undefined : checkIn,
         to: noDatesRange ? undefined : firstCheckOut,
       },
+
       { after: checkOutRange?.lastCheckOut },
     ])
   }
@@ -299,3 +345,34 @@ 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/core/components/calendar/CalendarTypes.ts

@@ -30,4 +30,7 @@ export type CalendarTypes = {
   updateCalendar?: boolean
   setUpdateCalendar?: (arg: (prev: boolean) => boolean) => void
   loadingData?: boolean
+  initialCalendarRange?: DateRange | undefined
+  showFeedback?: boolean
+  noActiveSelection?: boolean
 }

package/src/core/utils/parseDate.tsx

@@ -1,9 +1,17 @@
 import { format } from 'date-fns'
+import { fi, enUS } from 'date-fns/locale'
 
 type Props = {
   date?: Date
   dateFormat?: string
+  language?: string
 }
-export const parseDate = ({ date, dateFormat = 'dd.MM.yyyy' }: Props) => {
-  return date ? format(date, dateFormat) : null
+export const parseDate = ({
+  date,
+  dateFormat = 'dd.MM.yyyy',
+  language,
+}: Props) => {
+  return date
+    ? format(date, dateFormat, { locale: language === 'en' ? enUS : fi })
+    : null
 }

package/src/locales/en/common.json

@@ -6,6 +6,6 @@
 "search": "Search",
 "apply": "Apply",
 "clearDates": "Clear dates",
-"noCheckIn": "No check-in",
-"noCheckOut": "No check-out"
+"noCheckIn": "Room not available",
+"noCheckOut": "Check-out not available"
 }

package/src/locales/fi/common.json

@@ -4,9 +4,9 @@
 "checkIn": "check-in",
 "checkOut": "check-out",
 "search": "Hae",
-"apply": "Apply",
-"clearDates": "Clear dates",
-"noCheckIn": "No check-in",
-"noCheckOut": "No check-out"
+"apply": "Aseta",
+"clearDates": "Tyhjennä",
+"noCheckIn": "Huone ei saatavilla",
+"noCheckOut": "Uloskirjaus ei saatavilla"
 }
   

package/src/locales/fi/filterBar.json

@@ -1,6 +1,6 @@
 {
   "calendar": {
-    "label": "Ajankohta",
+    "label": "Päivät",
     "roomsLabelPlaceholder": "Lisää check-in ja check-out",
     "eventsLabelPlaceholder": "Lisää aikaväli",
     "startDate": "Alku",