willba-component-library 0.2.63 → 0.2.64

package/package.json

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

package/src/components/FilterCalendar/FilterCalendar.css

@@ -48,6 +48,7 @@
 .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {
     display: flex;
     min-height: 20.5px;
+    margin-top: 10px;
 }
 
 .will-root .will-calendar-wrapper .will-calendar-footer-actions {
@@ -56,6 +57,11 @@
     gap: 10px;
 }
 
+.will-root .will-calendar-wrapper .will-calendar-footer-error {
+    display: flex;
+    align-items: center;
+}
+
 @media (max-width: 960px) {
     .will-root .will-calendar-wrapper {
         width: -webkit-fill-available;
@@ -67,7 +73,7 @@
         padding: 20px 10px;
     }
 
-    .will-root .will-calendar-wrapper .will-calendar-footer {
+    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {
         flex-direction: column;
     }
 
@@ -88,6 +94,11 @@
     .will-root .will-calendar-wrapper .will-calendar-footer-actions button{
         width: 100%;
      }
+
+     .will-root .will-calendar-wrapper .will-calendar-footer-error {
+       min-width: 20px;
+       margin-bottom: 10px; 
+    }
   }
 
 .will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useMediaQuery } from 'react-responsive'
 
-import useTheme from '../../themes/useTheme'
+import useTheme, { Palette } from '../../themes/useTheme'
 import '../../themes/Default.css'
 import { Calendar, SubmitButton, CloseButton } from '../../core/components'
 import {
@@ -22,7 +23,7 @@ export default function FilterCalendar({
   language,
   palette,
   onSubmit,
-  disableCalendarDates,
+  disableCalendarDates: outerDisableCalendarDates,
   toggleCalendar,
   loadingData,
   setToggleCalendar,
@@ -36,7 +37,8 @@ export default function FilterCalendar({
   // Translations
   useUpdateTranslations({ language })
   const { t } = useTranslation()
-
+  const isMobile = useMediaQuery({ maxWidth: 690 })
+  console.log('1', { outerDisableCalendarDates })
   const {
     setCalendarRange,
     handleClearDates,
@@ -50,14 +52,18 @@ export default function FilterCalendar({
     setCalendarHasError,
     setUpdatedForSubmit,
     rangeContext,
+    disableCalendarDates,
   } = useFilterCalendar({
     onSubmit,
     setToggleCalendar,
     noActiveSelection,
     toggleCalendar,
     outerRangeContext,
+    outerDisableCalendarDates,
   })
 
+  console.log('1', { disableCalendarDates })
+
   // Display component after fully loaded
   useAwaitRender()
 
@@ -109,7 +115,7 @@ export default function FilterCalendar({
               <div className="will-calendar-footer-dates">
                 {calendarHasError ? (
                   <span>
-                    Start or end day need connection for previous reservation
+                    {t(`common:errors.calendarErrors.checkInAvailabilityGuide`)}
                   </span>
                 ) : (
                   <div>
@@ -135,7 +141,7 @@ export default function FilterCalendar({
 
                 <span className="will-calendar-footer-booked">
                   {calendarHasError
-                    ? '2 nights min'
+                    ? t(`filterBar:calendar.minNights`)
                     : nights
                     ? `${nights} ${t(
                         `common:${nights === 1 ? 'night' : 'nights'}`
@@ -144,6 +150,15 @@ export default function FilterCalendar({
                 </span>
               </div>
 
+              {calendarHasError &&
+                isMobile &&
+                renderCalendarErrorMessage({
+                  palette,
+                  message: t(
+                    `common:errors.calendarErrors.checkInAvailabilityError`
+                  ),
+                })}
+
               <div className="will-calendar-footer-actions">
                 <SubmitButton
                   onClick={handleClearDates}
@@ -152,21 +167,33 @@ export default function FilterCalendar({
                 />
               </div>
             </div>
-            {calendarHasError && (
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <IconsSvg
-                  fill={palette?.error || 'inherit'}
-                  size={25}
-                  icon="warning"
-                />
-                <span style={{ marginLeft: '10px' }}>
-                  Check-in available for second room only with connection dates
-                </span>
-              </div>
-            )}
+
+            {calendarHasError &&
+              !isMobile &&
+              renderCalendarErrorMessage({
+                palette,
+                message: t(
+                  `common:errors.calendarErrors.checkInAvailabilityError`
+                ),
+              })}
           </div>
         </div>
       )}
     </div>
   )
 }
+
+/////////
+
+const renderCalendarErrorMessage = ({
+  message,
+  palette,
+}: {
+  message?: string
+  palette: Palette
+}) => (
+  <div className="will-calendar-footer-error">
+    <IconsSvg fill={palette?.error || 'inherit'} size={25} icon="warning" />
+    <span style={{ marginLeft: '10px' }}>{message || ''}</span>
+  </div>
+)

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

@@ -1,7 +1,10 @@
 import { useEffect, useState } from 'react'
 import { DateRange, Matcher } from 'react-day-picker'
 import { format } from 'date-fns'
-import { RangeContext } from 'src/core/components/calendar/CalendarTypes'
+import {
+  DisableCalendarDates,
+  RangeContext,
+} from 'src/core/components/calendar/CalendarTypes'
 
 type Props = {
   onSubmit: (val: any) => void
@@ -9,6 +12,7 @@ type Props = {
   noActiveSelection?: boolean
   toggleCalendar?: boolean
   outerRangeContext?: RangeContext
+  outerDisableCalendarDates?: DisableCalendarDates
 }
 
 export const useFilterCalendar = ({
@@ -17,6 +21,7 @@ export const useFilterCalendar = ({
   noActiveSelection,
   toggleCalendar,
   outerRangeContext,
+  outerDisableCalendarDates,
 }: Props) => {
   // State
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
@@ -35,8 +40,19 @@ export const useFilterCalendar = ({
   const [calendarHasError, setCalendarHasError] = useState<boolean>(false)
 
   const [updatedForSubmit, setUpdatedForSubmit] = useState<boolean>(false)
+  const [disableCalendarDates, setDisableCalendarDates] =
+    useState<DisableCalendarDates>()
 
   // Lifecycle
+
+  // Handle update component with new data
+  useEffect(() => {
+    if (outerDisableCalendarDates) {
+      setDisableCalendarDates(outerDisableCalendarDates)
+    }
+  }, [outerDisableCalendarDates])
+
+  // Handle Range Context initial selections
   useEffect(() => {
     if (typeof window === 'undefined') return
 
@@ -68,6 +84,7 @@ export const useFilterCalendar = ({
     }
   }, [toggleCalendar])
 
+  // Handle submit dates
   useEffect(() => {
     const formatString = 'dd.MM.yyyy'
     const initialRangeTo = initialCalendarRange?.to
@@ -122,5 +139,6 @@ export const useFilterCalendar = ({
     setCalendarHasError,
     setUpdatedForSubmit,
     rangeContext,
+    disableCalendarDates,
   }
 }

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

@@ -55,15 +55,18 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
     const selectedStartDate = calendarRange?.from
     const rangeContextStartDate = rangeContext?.from
 
-    // Handle overlapping availableDates.lastCheckOut and disabledDates.start
-    const { newDisableCalendarDates, overlappingDate } = useUpdateDisabledDates(
-      {
+    console.log({ disableCalendarDates })
+
+    // Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
+    const { newDisableCalendarDates, overlappingDate, lastPossibleCheckout } =
+      useUpdateDisabledDates({
         disableCalendarDates,
         calendarRange,
         updateCalendarMonthNavigation,
         updateCalendarDefaultMonth,
-      }
-    )
+      })
+
+    console.log({ newDisableCalendarDates })
 
     // Handle disable dates by page
     const disabledDatesByPage = handleDisabledDatesByPage({
@@ -100,6 +103,8 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       setUpdatedForSubmit && setUpdatedForSubmit(true)
     }
 
+    console.log({ disabledDates })
+
     // Handle disabled dates for range context
     const {
       findFirstPossibleRangeContextCheckIn,
@@ -121,14 +126,6 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       calendarHasError,
     })
 
-    // Find last possible checkout for dates
-    const lastPossibleCheckout = !!newDisableCalendarDates?.availableDates
-      ?.length
-      ? newDisableCalendarDates?.availableDates[
-          newDisableCalendarDates.availableDates.length - 1
-        ].lastCheckOut
-      : null
-
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
         <div className="will-calendar-filter-container">
@@ -155,14 +152,14 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 ? disabledDatesByPage
                 : disabledDates?.length
                 ? [
-                    lastPossibleCheckout ? { after: lastPossibleCheckout } : [],
+                    lastPossibleCheckout && lastPossibleCheckout,
                     ...disabledDates,
                     ...firstPossibleRangeContextCheckIn,
                     ...lastPossibleRangeContextCheckOut,
                   ]
                 : newDisableCalendarDates?.disabledDates?.length
                 ? [
-                    lastPossibleCheckout ? { after: lastPossibleCheckout } : [],
+                    lastPossibleCheckout && lastPossibleCheckout,
                     ...newDisableCalendarDates.disabledDates,
                     ...firstPossibleRangeContextCheckIn,
                     ...lastPossibleRangeContextCheckOut,
@@ -206,6 +203,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
                 disabledDates,
                 overlappingDate,
                 rangeContext,
+                lastPossibleCheckout,
                 findFirstPossibleRangeContextCheckIn,
                 findLastPossibleRangeContextCheckOut,
                 firstPossibleRangeContextCheckIn,

package/src/core/components/calendar/hooks/useUpdateDisabledDates.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import { addDays, format } from 'date-fns'
-import { DateRange } from 'react-day-picker'
+import { DateRange, Matcher } from 'react-day-picker'
 
 import { DisableCalendarDates } from '../CalendarTypes'
 
@@ -21,6 +21,8 @@ export const useUpdateDisabledDates = ({
     DateRange[] | undefined
   >(undefined)
 
+  const [lastPossibleCheckout, setLatsPossibleCheckout] = useState<Matcher>([])
+
   const newDisableCalendarDates = useMemo(() => {
     if (disableCalendarDates?.availableDates) {
       const dateFormat = 'dd-MM-yyyy'
@@ -71,10 +73,25 @@ export const useUpdateDisabledDates = ({
         { updatedDisabledDates: [], newOverlappingDates: [] }
       )
 
+      // Find last possible checkout ( disable all dates after the last possible checkout )
+      const lastPossibleCheckout =
+        disableCalendarDates.availableDates[
+          disableCalendarDates.availableDates.length - 1
+        ].lastCheckOut
+
+      if (lastPossibleCheckout) {
+        setLatsPossibleCheckout({ after: lastPossibleCheckout })
+      }
+
+      // Extract overlapping dates ( dates that are only available for checkout )
       if (newOverlappingDates.length) {
         setOverlappingDate((prev = []) => [...prev, ...newOverlappingDates])
       }
 
+      if (newOverlappingDates.length) {
+        console.log(newOverlappingDates)
+      }
+
       const newDisableCalendarDates = {
         ...disableCalendarDates,
         disabledDates: updatedDisabledDates,
@@ -90,5 +107,5 @@ export const useUpdateDisabledDates = ({
     updateCalendarDefaultMonth,
   ])
 
-  return { newDisableCalendarDates, overlappingDate }
+  return { newDisableCalendarDates, overlappingDate, lastPossibleCheckout }
 }

package/src/core/components/calendar/utils/handleCalendarModifiers.tsx

@@ -21,6 +21,7 @@ type Props = {
     to: Date
   }[]
   disabledDates?: Matcher[]
+  lastPossibleCheckout?: Matcher
   overlappingDate?: DateRange[]
   rangeContext?: RangeContext
   findFirstPossibleRangeContextCheckIn?: NonNullable<
@@ -48,6 +49,7 @@ export const handleCalendarModifiers = ({
   findFirstPossibleRangeContextCheckIn,
   findLastPossibleRangeContextCheckOut,
   currentSelectionLastCheckoutDate,
+  lastPossibleCheckout,
 }: Props) => {
   // Parse data
   const calendarRangeFrom = calendarRange?.from && endOfDay(calendarRange.from)
@@ -93,19 +95,19 @@ export const handleCalendarModifiers = ({
         )
       : []
 
-  console.log()
-
   return {
     booked: disabledDatesByPage.length
       ? disabledDatesByPage
       : disabledDates?.length
       ? [
+          lastPossibleCheckout || [],
           ...disabledDates,
           ...firstPossibleRangeContextCheckIn,
           ...lastPossibleRangeContextCheckOut,
         ]
       : newDisableCalendarDates?.disabledDates?.length
       ? [
+          lastPossibleCheckout || [],
           ...newDisableCalendarDates?.disabledDates,
           ...firstPossibleRangeContextCheckIn,
           ...lastPossibleRangeContextCheckOut,

package/src/locales/en/common.json

@@ -8,5 +8,13 @@
 "clearDates": "Clear dates",
 "noCheckIn": "Room not available",
 "noCheckOut": "Check-out not available",
-"checkOutOnly": "Check-out only"
+"checkOutOnly": "Check-out only",
+"onlyCheckOut": "Check-in only",
+"onlyCheckIn": "Check-out only",
+"errors": {
+    "calendarErrors": {
+        "checkInAvailabilityError": "Check-in available for second room only with connection dates",
+        "checkInAvailabilityGuide": "Start or end day need connection for previous reservation"
+    }
+}
 }

package/src/locales/en/filterBar.json

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

package/src/locales/fi/common.json

@@ -8,6 +8,14 @@
 "clearDates": "Tyhjennä",
 "noCheckIn": "Huone ei saatavilla",
 "noCheckOut": "Uloskirjaus ei saatavilla",
-"checkOutOnly": "Vain uloskirjaus"
+"checkOutOnly": "Vain uloskirjaus",
+"onlyCheckOut": "Check-in only",
+"onlyCheckIn": "Check-out only",
+"errors": {
+    "calendarErrors": {
+        "checkInAvailabilityError": "Check-in available for second room only with connection dates",
+        "checkInAvailabilityGuide": "Start or end day need connection for previous reservation"
+    }
+}
 }
   

package/src/locales/fi/filterBar.json

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