willba-component-library 0.2.80 → 0.2.82

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -3,16 +3,16 @@ import { useTranslation } from 'react-i18next'
 
 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/utils'
 
 import { FilterCalendarTypes } from './FilterCalendarTypes'
 import { useFilterCalendar } from './hooks/useFilterCalendar'
+import { Footer } from './components/Footer'
 
 import './FilterCalendar.css'
 
@@ -21,13 +21,14 @@ export default function FilterCalendar({
   language,
   palette,
   onSubmit,
-  disableCalendarDates,
+  disableCalendarDates: outerDisableCalendarDates,
   toggleCalendar,
   loadingData,
   setToggleCalendar,
   requestDates,
   showFeedback,
   noActiveSelection,
+  rangeContext: outerRangeContext,
 }: FilterCalendarTypes) {
   const themePalette = useTheme({ palette })
 
@@ -36,21 +37,26 @@ export default function FilterCalendar({
   const { t } = useTranslation()
 
   const {
-    handleSubmit,
     setCalendarRange,
     handleClearDates,
     calendarRange,
     disabledDates,
     setDisabledDates,
     updateCalendarMonthNavigation,
-    updateCalendarDefaultMoth,
+    updateCalendarDefaultMonth,
     setUpdateCalendarMonthNavigation,
-    initialCalendarRange,
+    calendarHasError,
+    setCalendarHasError,
+    setUpdatedForSubmit,
+    rangeContext,
+    disableCalendarDates,
   } = useFilterCalendar({
     onSubmit,
     setToggleCalendar,
     noActiveSelection,
     toggleCalendar,
+    outerRangeContext,
+    outerDisableCalendarDates,
   })
 
   // Display component after fully loaded
@@ -61,10 +67,6 @@ export default function FilterCalendar({
     handleSelectedFilter: setToggleCalendar,
   })
 
-  const nights = nightsCount({
-    calendarRange: calendarRange || initialCalendarRange,
-  })
-
   return (
     <div className={`will-root`} style={themePalette}>
       {toggleCalendar && (
@@ -88,56 +90,25 @@ export default function FilterCalendar({
               setUpdateCalendarMonthNavigation={
                 setUpdateCalendarMonthNavigation
               }
-              updateCalendarDefaultMoth={updateCalendarDefaultMoth}
+              updateCalendarDefaultMonth={updateCalendarDefaultMonth}
               loadingData={loadingData}
-              initialCalendarRange={initialCalendarRange}
               showFeedback={showFeedback}
               noActiveSelection={noActiveSelection}
               palette={palette}
+              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')}
-                </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>
+          <div className="will-calendar-footer">
+            <Footer
+              calendarHasError={calendarHasError}
+              calendarRange={calendarRange}
+              handleClearDates={handleClearDates}
+              language={language}
+              palette={palette}
+            />
           </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/components/Footer.tsx

@@ -0,0 +1,96 @@
+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 ? (
+          <div className="will-calendar-footer-error">
+            {calendarHasError &&
+              renderCalendarErrorMessage({
+                palette,
+                message: t(
+                  `common:errors.calendarErrors.checkInAvailabilityError`
+                ),
+              })}
+          </div>
+        ) : (
+          <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 && 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`)}
+          variant="text"
+        />
+      </div>
+    </div>
+  )
+}
+
+/////////
+
+const renderCalendarErrorMessage = ({
+  message,
+  palette,
+}: {
+  message?: string
+  palette: Palette
+}) => (
+  <>
+    <IconsSvg fill={palette?.error || 'inherit'} size={25} icon="warning" />
+    <span>{message || ''}</span>
+  </>
+)

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

@@ -1,11 +1,18 @@
 import { useEffect, useState } from 'react'
 import { DateRange, Matcher } from 'react-day-picker'
+import { compareAsc, endOfDay, format, isAfter, parseISO } from 'date-fns'
+import {
+  DisableCalendarDates,
+  RangeContext,
+} from 'src/core/components/calendar/CalendarTypes'
 
 type Props = {
   onSubmit: (val: any) => void
   setToggleCalendar: (val: boolean) => void
   noActiveSelection?: boolean
   toggleCalendar?: boolean
+  outerRangeContext?: RangeContext
+  outerDisableCalendarDates?: DisableCalendarDates
 }
 
 export const useFilterCalendar = ({
@@ -13,17 +20,59 @@ export const useFilterCalendar = ({
   setToggleCalendar,
   noActiveSelection,
   toggleCalendar,
+  outerRangeContext,
+  outerDisableCalendarDates,
 }: Props) => {
+  // State
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
+  const [rangeContext, setRangeContext] = useState<RangeContext | undefined>(
+    outerRangeContext
+  )
   const [initialCalendarRange, setInitialCalendarRange] = useState<
     DateRange | undefined
   >()
   const [disabledDates, setDisabledDates] = useState<Matcher[]>([])
   const [updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation] =
     useState<boolean>(false)
-  const [updateCalendarDefaultMoth, setUpdateCalendarDefaultMoth] =
+  const [updateCalendarDefaultMonth, setUpdateCalendarDefaultMonth] =
     useState<number>(0)
 
+  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?.availableDates) {
+      setDisableCalendarDates({
+        availableDates: [
+          ...outerDisableCalendarDates.availableDates.sort((a, b) =>
+            compareAsc(a.checkIn, b.checkIn)
+          ),
+        ],
+        disabledDates: outerDisableCalendarDates.disabledDates
+          ? [
+              ...outerDisableCalendarDates.disabledDates.sort((a, b) =>
+                compareAsc(a.from, b.from)
+              ),
+            ]
+          : [],
+      })
+    }
+
+    if (disabledDates && !!outerDisableCalendarDates?.disabledDates?.length) {
+      setDisabledDates({
+        ...disabledDates,
+        ...outerDisableCalendarDates.disabledDates,
+      })
+    }
+  }, [outerDisableCalendarDates])
+
+  // Handle Range Context initial selections
   useEffect(() => {
     if (typeof window === 'undefined') return
 
@@ -35,11 +84,17 @@ export const useFilterCalendar = ({
     if (startDateParam && endDateParam) {
       if (noActiveSelection) {
         handleClearDates()
-        setUpdateCalendarDefaultMoth((prev) => prev + 1)
+        setUpdateCalendarDefaultMonth((prev) => prev + 1)
+        setUpdatedForSubmit(false)
+        setRangeContext(outerRangeContext)
         setInitialCalendarRange({
           from: new Date(startDateParam),
           to: new Date(endDateParam),
         })
+        setCalendarRange({
+          from: new Date(startDateParam),
+          to: new Date(endDateParam),
+        })
       } else {
         setCalendarRange({
           from: new Date(startDateParam),
@@ -49,6 +104,35 @@ export const useFilterCalendar = ({
     }
   }, [toggleCalendar])
 
+  // Handle submit dates
+  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)
@@ -57,6 +141,8 @@ export const useFilterCalendar = ({
   const handleClearDates = () => {
     setDisabledDates([])
     setCalendarRange(undefined)
+    setCalendarHasError(false)
+    setInitialCalendarRange(undefined)
   }
 
   return {
@@ -68,7 +154,11 @@ export const useFilterCalendar = ({
     calendarRange,
     disabledDates,
     updateCalendarMonthNavigation,
-    updateCalendarDefaultMoth,
-    initialCalendarRange,
+    updateCalendarDefaultMonth,
+    calendarHasError,
+    setCalendarHasError,
+    setUpdatedForSubmit,
+    rangeContext,
+    disableCalendarDates,
   }
 }

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

@@ -1,8 +1,6 @@
 .will-filter-bar-submit-button {
   width: auto;
   height: auto;
-  background-color: var(--will-primary);
-  color: var(--will-white);
   padding: 10px 20px;
   border-radius: 20px;
   cursor: pointer;
@@ -12,6 +10,22 @@
   font-size: 12px;
   display: flex;
   align-items: center;
+  user-select: none;
+}
+
+/* Submit button variants */
+.will-filter-bar-submit-button.default {
+  background-color: var(--will-primary);
+  color: var(--will-white);
+}
+
+.will-filter-bar-submit-button.text {
+  background-color: transparent;
+  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/buttons/submit-button/SubmitButton.tsx

@@ -1,10 +1,9 @@
+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 SubmitButtonVariant = 'text' | 'full'
 
 type Props = {
   onClick?: () => void
@@ -12,6 +11,7 @@ type Props = {
   label?: string
   disabled?: boolean
   isLoading?: boolean
+  variant?: SubmitButtonVariant
 }
 
 export const SubmitButton = ({
@@ -20,10 +20,11 @@ export const SubmitButton = ({
   label,
   disabled,
   isLoading,
+  variant,
 }: Props) => {
   return (
     <button
-      className="will-filter-bar-submit-button"
+      className={`will-filter-bar-submit-button ${variant || 'default'}`}
       onClick={onClick}
       disabled={disabled || isLoading}
     >

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 {
@@ -42,9 +41,15 @@
   opacity: .6;
 }
 
+.will-calendar-filter-container .rdp-table {
+  border-collapse: separate;
+  border-spacing: 0px 2px;
+}
+
 .will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
   background-color: var(--will-primary);
   opacity: 1;
+  color: var(--will-white)
 }
 
 .will-calendar-filter-container .my-today:not(.rdp-day_selected) { 
@@ -67,7 +72,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,10 +91,12 @@
   }
 }
 
-/* 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 {
+.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 +104,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 +119,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 +136,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;
 }
 
@@ -149,17 +164,43 @@
 
 /* No active selection */
 
-.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);
-  color: inherit;
+.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,
+.will-root .will-calendar-filter-container .no-active-selection-mid::before,
+.will-root .will-calendar-filter-container .no-active-selection-end::before { 
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 2px solid var(--will-light-grey);
+  box-sizing: border-box;
+}
+
+.will-root .will-calendar-filter-container .no-active-selection-start::before {
+  border-right: none;
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
 }
 
-.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_start.no-active-selection:hover,
-.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.no-active-selection:hover,
-.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_end.no-active-selection:hover {
-  background-color: var(--rdp-background-color);
+.will-root .will-calendar-filter-container .no-active-selection-mid::before {
+  border-right: none;
+  border-left: none;
+}
+
+.will-root .will-calendar-filter-container .no-active-selection-end::before {
+  border-left: none;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+}
+
+.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 */
@@ -167,11 +208,23 @@
 .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;
 }
 
+@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;
+}
+}
+