willba-component-library 0.2.55 → 0.2.56

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -9,7 +9,8 @@ import {
   useCloseFilterSection,
   useUpdateTranslations,
 } from '../../core/hooks'
-import { nightsCount, parseDate } from '../../core/utils'
+import { nightsCount, parseDate } from '../../core/components/calendar/utils'
+import { IconsSvg } from '../../assets/IconsSvg'
 
 import { FilterCalendarTypes } from './FilterCalendarTypes'
 import { useFilterCalendar } from './hooks/useFilterCalendar'
@@ -28,6 +29,7 @@ export default function FilterCalendar({
   requestDates,
   showFeedback,
   noActiveSelection,
+  rangeContext,
 }: FilterCalendarTypes) {
   const themePalette = useTheme({ palette })
 
@@ -36,7 +38,6 @@ export default function FilterCalendar({
   const { t } = useTranslation()
 
   const {
-    handleSubmit,
     setCalendarRange,
     handleClearDates,
     calendarRange,
@@ -45,9 +46,9 @@ export default function FilterCalendar({
     updateCalendarMonthNavigation,
     updateCalendarDefaultMoth,
     setUpdateCalendarMonthNavigation,
-    initialCalendarRange,
-    overlappingDates,
-    setOverlappingDates,
+    calendarHasError,
+    setCalendarHasError,
+    setUpdatedForSubmit,
   } = useFilterCalendar({
     onSubmit,
     setToggleCalendar,
@@ -64,7 +65,7 @@ export default function FilterCalendar({
   })
 
   const nights = nightsCount({
-    calendarRange: calendarRange || initialCalendarRange,
+    calendarRange: calendarRange,
   })
 
   return (
@@ -72,13 +73,9 @@ export default function FilterCalendar({
       {toggleCalendar && (
         <div className={`will-calendar-wrapper`} ref={filtersRef}>
           <div className={`will-calendar-header`}>
-            <div className={`will-calendar-header-row`}>
-              <h2>{t('filterBar:calendar.title')}</h2>
-              <CloseButton handleClose={() => setToggleCalendar(false)} />
-            </div>
-            {overlappingDates && <div>Chose other dates</div>}
+            <h2>{t('filterBar:calendar.title')}</h2>
+            <CloseButton handleClose={() => setToggleCalendar(false)} />
           </div>
-
           <div className={`will-calendar-main`}>
             <Calendar
               calendarRange={calendarRange}
@@ -96,55 +93,75 @@ export default function FilterCalendar({
               }
               updateCalendarDefaultMoth={updateCalendarDefaultMoth}
               loadingData={loadingData}
-              initialCalendarRange={initialCalendarRange}
               showFeedback={showFeedback}
               noActiveSelection={noActiveSelection}
               palette={palette}
-              setOverlappingDates={setOverlappingDates}
+              setCalendarHasError={setCalendarHasError}
+              setUpdatedForSubmit={setUpdatedForSubmit}
+              rangeContext={rangeContext}
+              calendarHasError={calendarHasError}
             />
           </div>
-          <div className={`will-calendar-footer`}>
-            <div className={`will-calendar-footer-dates`}>
-              <div>
-                <span>
-                  {parseDate({
-                    date: calendarRange?.from || initialCalendarRange?.from,
-                    dateFormat: 'EEEEEE d.M.yyyy',
-                    language,
-                  }) || t('common:checkIn')}
-                </span>
-                <span className={`will-calendar-footer-dates-separator`}>
-                  -
-                </span>
-                <span>
-                  {parseDate({
-                    date: calendarRange?.to || initialCalendarRange?.to,
-                    dateFormat: 'EEEEEE d.M.yyyy',
-                    language,
-                  }) || t('common:checkOut')}
+          <div className="will-calendar-footer">
+            <div className="will-calendar-footer-actions-wrapper">
+              <div className="will-calendar-footer-dates">
+                {calendarHasError ? (
+                  <span>
+                    Start or end day need connection for previous reservation
+                  </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
+                    ? '2 nights min'
+                    : nights
+                    ? `${nights} ${t(
+                        `common:${nights === 1 ? 'night' : 'nights'}`
+                      )}`
+                    : ''}
                 </span>
               </div>
 
-              <span className={`will-calendar-footer-booked`}>
-                {nights
-                  ? `${nights} ${t(
-                      `common:${nights === 1 ? 'night' : 'nights'}`
-                    )}`
-                  : ''}
-              </span>
-            </div>
-            <div className={`will-calendar-footer-actions`}>
-              <SubmitButton
-                onClick={handleClearDates}
-                disabled={!calendarRange?.from}
-                label={t(`common:clearDates`)}
-              />
-              <SubmitButton
-                onClick={() => handleSubmit()}
-                label={t(`common:apply`)}
-                disabled={!calendarRange?.from || !calendarRange?.to}
-              />
+              <div className="will-calendar-footer-actions">
+                <SubmitButton
+                  onClick={handleClearDates}
+                  disabled={!calendarRange?.from}
+                  label={t(`common:clearDates`)}
+                />
+              </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>
+            )}
           </div>
         </div>
       )}

package/src/components/FilterCalendar/FilterCalendarTypes.ts

@@ -1,4 +1,3 @@
-import { CSSProperties } from 'react'
 import { DateRange } from 'react-day-picker'
 
 import { Palette } from '../../themes/useTheme'

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { DateRange, Matcher } from 'react-day-picker'
+import { format } from 'date-fns'
 
 type Props = {
   onSubmit: (val: any) => void
@@ -14,6 +15,7 @@ export const useFilterCalendar = ({
   noActiveSelection,
   toggleCalendar,
 }: Props) => {
+  // State
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
   const [initialCalendarRange, setInitialCalendarRange] = useState<
     DateRange | undefined
@@ -24,8 +26,11 @@ export const useFilterCalendar = ({
   const [updateCalendarDefaultMoth, setUpdateCalendarDefaultMoth] =
     useState<number>(0)
 
-  const [overlappingDates, setOverlappingDates] = useState<boolean>(false)
+  const [calendarHasError, setCalendarHasError] = useState<boolean>(false)
 
+  const [updatedForSubmit, setUpdatedForSubmit] = useState<boolean>(false)
+
+  // Lifecycle
   useEffect(() => {
     if (typeof window === 'undefined') return
 
@@ -38,10 +43,15 @@ export const useFilterCalendar = ({
       if (noActiveSelection) {
         handleClearDates()
         setUpdateCalendarDefaultMoth((prev) => prev + 1)
+        setUpdatedForSubmit(false)
         setInitialCalendarRange({
           from: new Date(startDateParam),
           to: new Date(endDateParam),
         })
+        setCalendarRange({
+          from: new Date(startDateParam),
+          to: new Date(endDateParam),
+        })
       } else {
         setCalendarRange({
           from: new Date(startDateParam),
@@ -51,6 +61,34 @@ export const useFilterCalendar = ({
     }
   }, [toggleCalendar])
 
+  useEffect(() => {
+    const formatString = 'dd.MM.yyyy'
+    const initialRangeTo = initialCalendarRange?.to
+      ? format(initialCalendarRange.to, formatString)
+      : null
+    const initialRangeFrom = initialCalendarRange?.from
+      ? format(initialCalendarRange.from, formatString)
+      : null
+    const calendarRangeTo = calendarRange?.to
+      ? format(calendarRange.to, formatString)
+      : null
+    const calendarRangeFrom = calendarRange?.from
+      ? format(calendarRange.from, formatString)
+      : null
+
+    if (!!(calendarRangeTo && calendarRangeFrom && updatedForSubmit)) {
+      if (
+        !!(calendarRangeTo !== initialRangeTo) ||
+        !!(calendarRangeFrom !== initialRangeFrom)
+      ) {
+        handleSubmit()
+      } else {
+        setToggleCalendar(false)
+      }
+    }
+  }, [calendarRange])
+
+  // Methods
   const handleSubmit = () => {
     setToggleCalendar(false)
     return onSubmit(calendarRange)
@@ -59,6 +97,8 @@ export const useFilterCalendar = ({
   const handleClearDates = () => {
     setDisabledDates([])
     setCalendarRange(undefined)
+    setCalendarHasError(false)
+    setInitialCalendarRange(undefined)
   }
 
   return {
@@ -71,8 +111,8 @@ export const useFilterCalendar = ({
     disabledDates,
     updateCalendarMonthNavigation,
     updateCalendarDefaultMoth,
-    initialCalendarRange,
-    overlappingDates,
-    setOverlappingDates,
+    calendarHasError,
+    setCalendarHasError,
+    setUpdatedForSubmit,
   }
 }

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

@@ -1,10 +1,7 @@
+import { FaSpinner } from 'react-icons/fa'
 import React, { ReactNode } from 'react'
 
-import { SpinnerSVG } from '../../../../assets/SpinnerSvg'
-import { Palette } from '../../../../themes/useTheme'
-
 import './SubmitButton.css'
-import { FaSpinner } from 'react-icons/fa'
 
 type Props = {
   onClick?: () => void

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

@@ -88,7 +88,9 @@
 /* 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-overlapping-date {
+.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 {
  position: absolute;
  top: -42px;
  transform: translateX(calc(-50% + 20px));
@@ -96,9 +98,12 @@
  white-space: nowrap;
  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-overlapping-date > div {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only > div,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only > div {
   background-color: white;
   position: relative;
   padding: 5px 10px;
@@ -108,7 +113,9 @@
 
 .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-overlapping-date::before {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only::before,
+.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only::before {
   content: "";
   width: 10px;
   height: 10px;
@@ -123,7 +130,9 @@
 
 .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-overlapping-date {
+.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date,
+.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out-only,
+.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-in-only {
   display: block;
 }
 
@@ -151,8 +160,11 @@
 
 .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-onahau);
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection.checkout-option,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection.checkout-option,
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection.checkout-option {
+  background-color: var(--rdp-background-color);
   color: inherit;
 }
 
@@ -162,6 +174,12 @@
   background-color: var(--rdp-background-color);
 }
 
+.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {
+  background-color: var(--will-primary-lightest);
+  color: inherit;
+}
+
+
 /* Overlapping date */
 
 .will-root .will-calendar-filter-container .overlapping-date {