willba-component-library 0.2.71 → 0.2.73

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -1,20 +1,18 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useMediaQuery } from 'react-responsive'
 
-import useTheme, { Palette } from '../../themes/useTheme'
+import useTheme from '../../themes/useTheme'
 import '../../themes/Default.css'
-import { Calendar, SubmitButton, CloseButton } from '../../core/components'
+import { Calendar, CloseButton } from '../../core/components'
 import {
   useAwaitRender,
   useCloseFilterSection,
   useUpdateTranslations,
 } from '../../core/hooks'
-import { nightsCount, parseDate } from '../../core/components/calendar/utils'
-import { IconsSvg } from '../../assets/IconsSvg'
 
 import { FilterCalendarTypes } from './FilterCalendarTypes'
 import { useFilterCalendar } from './hooks/useFilterCalendar'
+import { Footer } from './components/Footer'
 
 import './FilterCalendar.css'
 
@@ -37,7 +35,6 @@ export default function FilterCalendar({
   // Translations
   useUpdateTranslations({ language })
   const { t } = useTranslation()
-  const isMobile = useMediaQuery({ maxWidth: 690 })
 
   const {
     setCalendarRange,
@@ -70,10 +67,6 @@ export default function FilterCalendar({
     handleSelectedFilter: setToggleCalendar,
   })
 
-  const nights = nightsCount({
-    calendarRange: calendarRange,
-  })
-
   return (
     <div className={`will-root`} style={themePalette}>
       {toggleCalendar && (
@@ -109,90 +102,16 @@ export default function FilterCalendar({
             />
           </div>
           <div className="will-calendar-footer">
-            <div className="will-calendar-footer-actions-wrapper">
-              <div className="will-calendar-footer-dates">
-                {calendarHasError ? (
-                  <span>
-                    {t(`common:errors.calendarErrors.checkInAvailabilityGuide`)}
-                  </span>
-                ) : (
-                  <div>
-                    <span>
-                      {parseDate({
-                        date: calendarRange?.from,
-                        dateFormat: 'EEEEEE d.M.yyyy',
-                        language,
-                      }) || t('common:checkIn')}
-                    </span>
-                    <span className="will-calendar-footer-dates-separator">
-                      -
-                    </span>
-                    <span>
-                      {parseDate({
-                        date: calendarRange?.to,
-                        dateFormat: 'EEEEEE d.M.yyyy',
-                        language,
-                      }) || t('common:checkOut')}
-                    </span>
-                  </div>
-                )}
-
-                <span className="will-calendar-footer-booked">
-                  {calendarHasError
-                    ? t(`filterBar:calendar.minNights`)
-                    : nights
-                    ? `${nights} ${t(
-                        `common:${nights === 1 ? 'night' : 'nights'}`
-                      )}`
-                    : ''}
-                </span>
-              </div>
-
-              {calendarHasError &&
-                isMobile &&
-                renderCalendarErrorMessage({
-                  palette,
-                  message: t(
-                    `common:errors.calendarErrors.checkInAvailabilityError`
-                  ),
-                })}
-
-              <div className="will-calendar-footer-actions">
-                <SubmitButton
-                  onClick={handleClearDates}
-                  disabled={!calendarRange?.from}
-                  label={t(`common:clearDates`)}
-                  variant="text"
-                />
-              </div>
-            </div>
-
-            {calendarHasError &&
-              !isMobile &&
-              renderCalendarErrorMessage({
-                palette,
-                message: t(
-                  `common:errors.calendarErrors.checkInAvailabilityError`
-                ),
-              })}
+            <Footer
+              calendarHasError={calendarHasError}
+              calendarRange={calendarRange}
+              handleClearDates={handleClearDates}
+              language={language}
+              palette={palette}
+            />
           </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/components/Footer.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useMediaQuery } from 'react-responsive'
+import { DateRange } from 'react-day-picker'
+
+import { Palette } from '../../../themes/useTheme'
+import { nightsCount, parseDate } from '../../../core/components/calendar/utils'
+import { IconsSvg } from '../../../assets/IconsSvg'
+import { SubmitButton } from '../../../core/components'
+
+export const Footer = ({
+  calendarHasError,
+  calendarRange,
+  handleClearDates,
+  language,
+  palette,
+}: {
+  calendarHasError: boolean
+  calendarRange?: DateRange
+  handleClearDates: () => void
+  language?: string
+  palette: Palette
+}) => {
+  const { t } = useTranslation()
+  const isMobile = useMediaQuery({ maxWidth: 600 })
+
+  const nights = nightsCount({
+    calendarRange: calendarRange,
+  })
+
+  return (
+    <>
+      <div className="will-calendar-footer-actions-wrapper">
+        <div className="will-calendar-footer-dates">
+          {calendarHasError ? (
+            <span>
+              {t(`common:errors.calendarErrors.checkInAvailabilityGuide`)}
+            </span>
+          ) : (
+            <div>
+              <span>
+                {parseDate({
+                  date: calendarRange?.from,
+                  dateFormat: 'EEEEEE d.M.yyyy',
+                  language,
+                }) || t('common:checkIn')}
+              </span>
+              <span className="will-calendar-footer-dates-separator">-</span>
+              <span>
+                {parseDate({
+                  date: calendarRange?.to,
+                  dateFormat: 'EEEEEE d.M.yyyy',
+                  language,
+                }) || t('common:checkOut')}
+              </span>
+            </div>
+          )}
+
+          <span className="will-calendar-footer-booked">
+            {calendarHasError
+              ? `${1} ${t(`common:night`)} min`
+              : nights
+              ? `${nights} ${t(`common:${nights === 1 ? 'night' : 'nights'}`)}`
+              : ''}
+          </span>
+        </div>
+
+        <div className="will-calendar-footer-error">
+          {calendarHasError &&
+            isMobile &&
+            renderCalendarErrorMessage({
+              palette,
+              message: t(
+                `common:errors.calendarErrors.checkInAvailabilityError`
+              ),
+            })}
+        </div>
+
+        <div className="will-calendar-footer-actions">
+          <SubmitButton
+            onClick={handleClearDates}
+            disabled={!calendarRange?.from}
+            label={t(`common:clearDates`)}
+            variant="text"
+          />
+        </div>
+      </div>
+
+      <div className="will-calendar-footer-error">
+        {calendarHasError &&
+          !isMobile &&
+          renderCalendarErrorMessage({
+            palette,
+            message: t(`common:errors.calendarErrors.checkInAvailabilityError`),
+          })}
+      </div>
+    </>
+  )
+}
+
+/////////
+
+const renderCalendarErrorMessage = ({
+  message,
+  palette,
+}: {
+  message?: string
+  palette: Palette
+}) => (
+  <>
+    <IconsSvg fill={palette?.error || 'inherit'} size={25} icon="warning" />
+    <span>{message || ''}</span>
+  </>
+)

package/src/core/components/buttons/submit-button/SubmitButton.css

@@ -24,6 +24,8 @@
   color: var(--will-black);
   text-decoration: underline;
   font-weight: 500;
+  font-size: 15px;
+  padding: 0 10px;
 }
 
 .will-filter-bar-submit-button span {

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

@@ -6,9 +6,8 @@
 
 /* Calendar overrides */
 
-
 .will-calendar-filter-container .DayPicker {
-  font-size: 25px; /* Adjust this value to make the DayPicker bigger */
+  font-size: 25px;
 }
 
 .will-calendar-filter-container .rdp-month {
@@ -67,7 +66,8 @@
 }
 
 .will-calendar-filter-container .rdp-cell .rdp-button[disabled] {
-  opacity: 0.5;
+  color: var(--will-transparent-black);
+  opacity: 1
 }
 
 @media (max-width: 960px) {
@@ -85,7 +85,7 @@
   }
 }
 
-/* Tooltip */
+/* Tooltips */
 .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-overlapping-date,
@@ -158,15 +158,11 @@
 
 /* No active selection */
 
-
-
-
-/* ---- */
-
 .will-root .will-calendar-filter-container .no-active-selection-start,
 .will-root .will-calendar-filter-container .no-active-selection-mid,
 .will-root .will-calendar-filter-container .no-active-selection-end { 
   position: initial;
+  
 }
 
 .will-root .will-calendar-filter-container .no-active-selection-start::before,
@@ -179,7 +175,6 @@
   border: 3px dashed var(--will-grey);
 }
 
-
 .will-root .will-calendar-filter-container .no-active-selection-start::before {
   border-right: none;
   border-top-left-radius: 50%;
@@ -202,7 +197,6 @@
   color: inherit;
 }
 
-
 /* Overlapping date */
 
 .will-root .will-calendar-filter-container .overlapping-date {
@@ -214,4 +208,17 @@
   cursor: not-allowed;
 }
 
+@media (max-width: 600px) {
+ /* Tooltips */
+.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-overlapping-date,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {
+  top: -70px;
+  white-space: wrap;
+  max-width: 120px;
+}
+}
+
 

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react'
+import React, { forwardRef } from 'react'
 import { startOfDay } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useTranslation } from 'react-i18next'
@@ -118,6 +118,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       rangeContext,
       calendarRange,
       calendarHasError,
+      disabledDates: newDisableCalendarDates?.disabledDates,
     })
 
     return (

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

@@ -119,5 +119,7 @@ export const useCalendarTooltips = ({ showFeedback }: Props) =>
       tooltipClonesCheckOut.forEach((clone) => clone.remove())
       tooltipClonesSpinner.forEach((clone) => clone.remove())
       tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
+      tooltipClonesCheckInOnly.forEach((clone) => clone.remove())
+      tooltipClonesCheckOutOnly.forEach((clone) => clone.remove())
     }
   })

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

@@ -85,7 +85,7 @@ export const useUpdateDisabledDates = ({
 
       // Extract overlapping dates ( dates that are only available for checkout )
       if (newOverlappingDates.length) {
-        setOverlappingDate((prev = []) => [...prev, ...newOverlappingDates])
+        setOverlappingDate([...newOverlappingDates])
       }
 
       const newDisableCalendarDates = {
@@ -103,5 +103,7 @@ export const useUpdateDisabledDates = ({
     updateCalendarDefaultMonth,
   ])
 
+  console.log('1111', overlappingDate)
+
   return { newDisableCalendarDates, overlappingDate, lastPossibleCheckout }
 }

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

@@ -1,14 +1,22 @@
 import { useEffect } from 'react'
 import { DateRange } from 'react-day-picker'
-import { isAfter, isEqual, isBefore, endOfDay } from 'date-fns'
+import {
+  isAfter,
+  isEqual,
+  isBefore,
+  endOfDay,
+  isWithinInterval,
+  areIntervalsOverlapping,
+} from 'date-fns'
 
-import { RangeContext } from '../CalendarTypes'
+import { DisableCalendarDates, RangeContext } from '../CalendarTypes'
 
 type Props = {
   setCalendarHasError?: (arg: boolean) => void
   rangeContext?: RangeContext
   calendarRange?: DateRange
   calendarHasError?: boolean
+  disabledDates?: DisableCalendarDates['disabledDates']
 }
 
 // Case: If the selected dates do not overlap with the rangeContext during continuous selection,
@@ -20,34 +28,59 @@ export const checkForContinuousSelection = ({
   rangeContext,
   calendarRange,
   calendarHasError,
+  disabledDates,
 }: Props) => {
-  const calendarRangeFrom = calendarRange?.from || null
-  const calendarRangeTo = calendarRange?.to || null
-  const rangeContextFrom = rangeContext?.from || null
-  const rangeContextTo = rangeContext?.to || null
+  const calendarRangeFrom = calendarRange?.from && endOfDay(calendarRange.from)
+  const calendarRangeTo = calendarRange?.to && endOfDay(calendarRange.to)
+  const rangeContextFrom = rangeContext?.from && endOfDay(rangeContext.from)
+  const rangeContextTo = rangeContext?.to && endOfDay(rangeContext.to)
 
   // Checking if rangeFrom is equal to or before rangeContextTo
   const startIsEqualOrBeforeRangeContextEnd =
     calendarRangeFrom && rangeContextTo
-      ? isBefore(endOfDay(calendarRangeFrom), endOfDay(rangeContextTo)) ||
-        isEqual(endOfDay(calendarRangeFrom), endOfDay(rangeContextTo))
+      ? isBefore(calendarRangeFrom, rangeContextTo) ||
+        isEqual(calendarRangeFrom, rangeContextTo)
       : null
 
   // Checking if rangeTo is equal to or after rangeContextFrom
   const endIsEqualOrAfterRangeContextStart =
     calendarRangeTo && rangeContextFrom && rangeContextTo
-      ? isAfter(endOfDay(calendarRangeTo), endOfDay(rangeContextFrom)) ||
-        isEqual(endOfDay(calendarRangeTo), endOfDay(rangeContextFrom))
+      ? isAfter(calendarRangeTo, rangeContextFrom) ||
+        isEqual(calendarRangeTo, rangeContextFrom)
       : null
 
+  // Check if selection overlapping unavailable dates
+  const selectionOverlappingUnavailableDate = disabledDates?.find((range) => {
+    const rangeFrom = endOfDay(range.from)
+    const rangeTo = endOfDay(range.to)
+
+    return (
+      rangeContextFrom &&
+      rangeContextTo &&
+      areIntervalsOverlapping(
+        { start: rangeContextFrom, end: rangeContextTo },
+        { start: rangeFrom, end: rangeTo }
+      ) &&
+      calendarRangeFrom &&
+      calendarRangeTo &&
+      areIntervalsOverlapping(
+        { start: calendarRangeFrom, end: calendarRangeTo },
+        { start: rangeFrom, end: rangeTo }
+      )
+    )
+  })
+
   useEffect(() => {
     if (
       (rangeContext &&
         calendarRangeFrom &&
         !startIsEqualOrBeforeRangeContextEnd) ||
-      (rangeContext && calendarRangeTo && !endIsEqualOrAfterRangeContextStart)
+      (rangeContext &&
+        calendarRangeTo &&
+        !endIsEqualOrAfterRangeContextStart) ||
+      selectionOverlappingUnavailableDate
     ) {
-      setCalendarHasError && !calendarHasError && setCalendarHasError(true)
+      !!(setCalendarHasError && !calendarHasError) && setCalendarHasError(true)
     }
   })
 }

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

@@ -1,4 +1,4 @@
-import { addDays, endOfDay } from 'date-fns'
+import { addDays, endOfDay, isAfter, isBefore } from 'date-fns'
 import { DateRange, Matcher } from 'react-day-picker'
 
 import { DisableCalendarDates, RangeContext } from '../CalendarTypes'
@@ -47,6 +47,27 @@ export const handleCalendarModifiers = ({
   const rangeContextFrom = rangeContext?.from && endOfDay(rangeContext.from)
   const rangeContextTo = rangeContext?.to && endOfDay(rangeContext.to)
 
+  const filteredOverlappingDates = overlappingDate
+    ? overlappingDate
+        .filter((date) => {
+          const dateFrom = date.from ? endOfDay(date.from) : null
+          const isBeforeRange =
+            dateFrom &&
+            findFirstPossibleRangeContextCheckIn?.checkIn &&
+            isBefore(dateFrom, findFirstPossibleRangeContextCheckIn?.checkIn)
+          const isAfterRange =
+            dateFrom &&
+            findLastPossibleRangeContextCheckOut?.lastCheckOut &&
+            isAfter(
+              dateFrom,
+              endOfDay(findLastPossibleRangeContextCheckOut?.lastCheckOut)
+            )
+
+          return !(isBeforeRange || isAfterRange)
+        })
+        .map((date) => ({ from: date.from }))
+    : []
+
   return {
     booked: disabledDatesByPage.length
       ? disabledDatesByPage
@@ -70,11 +91,10 @@ export const handleCalendarModifiers = ({
       ? [{ after: calendarRangeFrom }]
       : [],
 
-    overlappingDate: [
-      ...(!calendarRangeFrom && !!overlappingDate?.length
-        ? overlappingDate.map((date) => ({ from: date.from }))
-        : []),
-    ],
+    overlappingDate:
+      !calendarRangeFrom && !!filteredOverlappingDates.length
+        ? filteredOverlappingDates.map((date) => ({ from: date.from }))
+        : [],
 
     noActiveSelectionStart: rangeContextFrom || [],
 

package/src/locales/en/common.json

@@ -12,8 +12,8 @@
 "checkInOnly": "Check-in only",
 "errors": {
     "calendarErrors": {
-        "checkInAvailabilityError": "Check-in available for second room only with connection dates",
-        "checkInAvailabilityGuide": "Start or end day need connection for previous reservation"
+        "checkInAvailabilityError": "All room reservations in a single purchase must be for the same dates.",
+        "checkInAvailabilityGuide": "If you need reservations for different dates, please make a separate purchase."
     }
 }
 }

package/src/locales/fi/common.json

@@ -9,11 +9,11 @@
 "noCheckIn": "Huone ei saatavilla",
 "noCheckOut": "Uloskirjaus ei saatavilla",
 "checkOutOnly": "Vain uloskirjaus",
-"checkInOnly": "Check-in only",
+"checkInOnly": "Vain sisäänkirjautuminen",
 "errors": {
     "calendarErrors": {
-        "checkInAvailabilityError": "Check-in available for second room only with connection dates",
-        "checkInAvailabilityGuide": "Start or end day need connection for previous reservation"
+        "checkInAvailabilityError": "Yhdellä ostolla tehdyt huonevaraukset tulee olla samalle ajankohdalle.",
+        "checkInAvailabilityGuide": "Jos tarvitset huonevarauksia eri ajankohdille, ole hyvä ja tee uusi osto."
     }
 }
 }

package/src/themes/Default.css

@@ -21,21 +21,23 @@
   --will-onahau: #CDEEFF;
   --will-text: #5A5959;
   --will-charcoal-blue: #384265;
-  --will-transparent-white: rgba(255, 255, 255, 0.30);
-  --will-transparent-black: rgba(171, 167, 175, 0.30);
   --will-error: #d32f2f;
 
-  /*Color mix*/
+  /* 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%);
 
 
-  /* Confines */
+  /* Shadows */
   --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;