willba-component-library 0.2.79 → 0.2.80

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

package/src/components/FilterCalendar/FilterCalendarTypes.ts

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

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

@@ -1,18 +1,11 @@
 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 = ({
@@ -20,59 +13,17 @@ 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 [updateCalendarDefaultMonth, setUpdateCalendarDefaultMonth] =
+  const [updateCalendarDefaultMoth, setUpdateCalendarDefaultMoth] =
     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
 
@@ -84,17 +35,11 @@ export const useFilterCalendar = ({
     if (startDateParam && endDateParam) {
       if (noActiveSelection) {
         handleClearDates()
-        setUpdateCalendarDefaultMonth((prev) => prev + 1)
-        setUpdatedForSubmit(false)
-        setRangeContext(outerRangeContext)
+        setUpdateCalendarDefaultMoth((prev) => prev + 1)
         setInitialCalendarRange({
           from: new Date(startDateParam),
           to: new Date(endDateParam),
         })
-        setCalendarRange({
-          from: new Date(startDateParam),
-          to: new Date(endDateParam),
-        })
       } else {
         setCalendarRange({
           from: new Date(startDateParam),
@@ -104,35 +49,6 @@ 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)
@@ -141,8 +57,6 @@ export const useFilterCalendar = ({
   const handleClearDates = () => {
     setDisabledDates([])
     setCalendarRange(undefined)
-    setCalendarHasError(false)
-    setInitialCalendarRange(undefined)
   }
 
   return {
@@ -154,11 +68,7 @@ export const useFilterCalendar = ({
     calendarRange,
     disabledDates,
     updateCalendarMonthNavigation,
-    updateCalendarDefaultMonth,
-    calendarHasError,
-    setCalendarHasError,
-    setUpdatedForSubmit,
-    rangeContext,
-    disableCalendarDates,
+    updateCalendarDefaultMoth,
+    initialCalendarRange,
   }
 }

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

@@ -1,6 +1,8 @@
 .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;
@@ -10,22 +12,6 @@
   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,9 +1,10 @@
-import { FaSpinner } from 'react-icons/fa'
 import React, { ReactNode } from 'react'
 
-import './SubmitButton.css'
+import { SpinnerSVG } from '../../../../assets/SpinnerSvg'
+import { Palette } from '../../../../themes/useTheme'
 
-type SubmitButtonVariant = 'text' | 'full'
+import './SubmitButton.css'
+import { FaSpinner } from 'react-icons/fa'
 
 type Props = {
   onClick?: () => void
@@ -11,7 +12,6 @@ type Props = {
   label?: string
   disabled?: boolean
   isLoading?: boolean
-  variant?: SubmitButtonVariant
 }
 
 export const SubmitButton = ({
@@ -20,11 +20,10 @@ export const SubmitButton = ({
   label,
   disabled,
   isLoading,
-  variant,
 }: Props) => {
   return (
     <button
-      className={`will-filter-bar-submit-button ${variant || 'default'}`}
+      className="will-filter-bar-submit-button"
       onClick={onClick}
       disabled={disabled || isLoading}
     >

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

@@ -6,8 +6,9 @@
 
 /* Calendar overrides */
 
+
 .will-calendar-filter-container .DayPicker {
-  font-size: 25px;
+  font-size: 25px; /* Adjust this value to make the DayPicker bigger */
 }
 
 .will-calendar-filter-container .rdp-month {
@@ -41,15 +42,9 @@
   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) { 
@@ -72,8 +67,7 @@
 }
 
 .will-calendar-filter-container .rdp-cell .rdp-button[disabled] {
-  color: var(--will-transparent-black);
-  opacity: 1
+  opacity: 0.5;
 }
 
 @media (max-width: 960px) {
@@ -91,12 +85,10 @@
   }
 }
 
-/* Tooltips */
+/* 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-check-out-only,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date {
  position: absolute;
  top: -42px;
  transform: translateX(calc(-50% + 20px));
@@ -104,12 +96,9 @@
  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-check-out-only > div,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only > div {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div {
   background-color: white;
   position: relative;
   padding: 5px 10px;
@@ -119,9 +108,7 @@
 
 .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-check-out-only::before,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only::before {
+.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before {
   content: "";
   width: 10px;
   height: 10px;
@@ -136,9 +123,7 @@
 
 .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-check-out-only,
-.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-in-only {
+.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date {
   display: block;
 }
 
@@ -164,43 +149,17 @@
 
 /* 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,
-.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 .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_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 .rdp-day_selected.rdp-day_range_middle.checkout-option {
-  background-color: var(--will-primary-lightest);
-  color: inherit;
+.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);
 }
 
 /* Overlapping date */
@@ -208,23 +167,11 @@
 .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;
-}
-}
-