willba-component-library 0.3.26 → 0.4.0

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

@@ -1,253 +0,0 @@
-import React, { forwardRef } from 'react'
-import { addDays, startOfDay } from 'date-fns'
-import { fi, enUS } from 'date-fns/locale'
-import { useTranslation } from 'react-i18next'
-import { DateRange, DayPicker } from 'react-day-picker'
-import { useMediaQuery } from 'react-responsive'
-
-import { CalendarTypes } from './CalendarTypes'
-import { IconsSvg } from '../../../assets/IconsSvg'
-import {
-  calendarSelectionRules,
-  checkForContinuousSelection,
-  handleCalendarModifiers,
-  disabledDatesByPage as handleDisabledDatesByPage,
-  handleRangeContextDisabledDates,
-} from './utils'
-import {
-  useCalendarLoadingSpinner,
-  useCalendarTooltips,
-  useUpdateDisabledDates,
-} from './hooks'
-import { useAutoFocus } from '../../hooks'
-
-import 'react-day-picker/dist/style.css'
-import './Calendar.css'
-
-export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
-  (
-    {
-      selectedPath,
-      calendarRange,
-      setCalendarRange,
-      language,
-      disableCalendarDates,
-      requestDates,
-      disabledDates,
-      updateCalendarMonthNavigation,
-      setUpdateCalendarMonthNavigation,
-      updateCalendarDefaultMonth,
-      loadingData,
-      showFeedback,
-      palette,
-      setCalendarHasError,
-      setUpdatedForSubmit,
-      rangeContext,
-      calendarHasError,
-      autoFocus,
-    }: CalendarTypes,
-    ref
-  ) => {
-    // Translations
-    const { t } = useTranslation('common')
-
-    const calendarContainerRef = useAutoFocus<HTMLDivElement>(autoFocus)
-
-    const isTablet = useMediaQuery({ maxWidth: 960 })
-    const today = startOfDay(new Date())
-    const selectedStartDate = calendarRange?.from
-    const rangeContextStartDate = rangeContext?.from
-
-    // Handle initial disable dates including overlapping availableDates.lastCheckOut and disabledDates.start
-    const { newDisableCalendarDates, overlappingDate, lastPossibleCheckout } =
-      useUpdateDisabledDates({
-        disableCalendarDates,
-        calendarRange,
-        updateCalendarMonthNavigation,
-        updateCalendarDefaultMonth,
-      })
-
-    // Handle disable dates by page
-    const disabledDatesByPage = handleDisabledDatesByPage({
-      today,
-      selectedPath,
-      newDisableCalendarDates,
-    })
-
-    // Handle tooltip
-    useCalendarTooltips({
-      showFeedback,
-    })
-
-    // Handle loading spinner
-    useCalendarLoadingSpinner({
-      loadingData,
-    })
-
-    // Handle the date selection and availability for selection logic.
-    const handleOnSelect = (range?: DateRange) => {
-      setCalendarHasError && calendarHasError && setCalendarHasError(false)
-
-      calendarSelectionRules({
-        range,
-        newDisableCalendarDates,
-        setCalendarRange,
-        calendarRange,
-        overlappingDate,
-        setCalendarHasError,
-        rangeContext,
-      })
-
-      setUpdatedForSubmit && setUpdatedForSubmit(true)
-    }
-
-    // Handle disabled dates for range context
-    const {
-      findFirstPossibleRangeContextCheckIn,
-      findLastPossibleRangeContextCheckOut,
-      firstPossibleRangeContextCheckIn,
-      lastPossibleRangeContextCheckOut,
-      currentSelectionAvailability,
-    } = handleRangeContextDisabledDates({
-      rangeContext,
-      availableDates: newDisableCalendarDates?.availableDates,
-      calendarRange,
-    })
-
-    // Handle check for continuous selection in the range context
-    checkForContinuousSelection({
-      setCalendarHasError,
-      rangeContext,
-      calendarRange,
-      calendarHasError,
-      disabledDates: newDisableCalendarDates?.disabledDates,
-    })
-
-    const disabledInsideSelectableRange = () => {
-      if (
-        // Range end already selected
-        calendarRange?.to ||
-        // No current check-in availability
-        !currentSelectionAvailability ||
-        // No gap between check-in and first possible check-out, nothing to disable
-        addDays(currentSelectionAvailability.checkIn, 1) >=
-          currentSelectionAvailability.firstCheckOut
-      ) {
-        return []
-      }
-      // Disable dates between current check-in and first possible check-out
-      return [
-        {
-          from: addDays(currentSelectionAvailability.checkIn, 1),
-          to: addDays(currentSelectionAvailability.firstCheckOut, -1),
-        },
-      ]
-    }
-
-    const base = disabledDatesByPage.length
-      ? disabledDatesByPage
-      : disabledDates?.length
-        ? disabledDates
-        : newDisableCalendarDates?.disabledDates || []
-
-    const disabled = disabledDatesByPage.length
-      ? base
-      : [
-          lastPossibleCheckout,
-          ...base,
-          ...firstPossibleRangeContextCheckIn,
-          ...lastPossibleRangeContextCheckOut,
-          ...disabledInsideSelectableRange(),
-        ]
-
-    return (
-      <div className="will-filter-bar-calendar" ref={ref}>
-        <div
-          className="will-calendar-filter-container"
-          ref={calendarContainerRef}
-        >
-          <DayPicker
-            key={updateCalendarDefaultMonth}
-            id="will-calendar"
-            mode="range"
-            locale={language === 'en' ? enUS : fi}
-            numberOfMonths={!isTablet ? 2 : 1}
-            weekStartsOn={1}
-            selected={calendarRange}
-            onSelect={(range) => handleOnSelect(range)}
-            captionLayout="dropdown-buttons"
-            defaultMonth={
-              calendarRange?.from ||
-              selectedStartDate ||
-              rangeContextStartDate ||
-              (newDisableCalendarDates?.disabledDates?.length
-                ? newDisableCalendarDates.disabledDates[0].from
-                : today)
-            }
-            disabled={disabled}
-            fromMonth={today}
-            onMonthChange={(val) => {
-              requestDates?.(val)
-              setUpdateCalendarMonthNavigation?.((prev) => !prev)
-            }}
-            classNames={{
-              day_range_start: calendarRange?.from ? 'rdp-day_range_start' : '',
-              day_range_end: calendarRange?.to ? 'rdp-day_range_end' : '',
-            }}
-            modifiersClassNames={{
-              today: 'my-today',
-              booked: 'booked',
-              disabledAfterCheckIn: 'disabled-after-check-in',
-              overlappingDate: 'overlapping-date',
-
-              noActiveSelectionStart: 'no-active-selection-start',
-              noActiveSelectionMid: 'no-active-selection-mid',
-              noActiveSelectionEnd: 'no-active-selection-end',
-
-              checkoutOptionsMid:
-                'rdp-day_selected rdp-day_range_middle checkout-option',
-
-              checkInOnly: 'check-in-only',
-              checkOutOnly: 'check-out-only',
-            }}
-            modifiers={
-              // This function handles conditions for applying the modifiersClassNames
-              handleCalendarModifiers({
-                calendarRange,
-                disabledDates: disabled,
-                overlappingDate,
-                rangeContext,
-                findFirstPossibleRangeContextCheckIn,
-                findLastPossibleRangeContextCheckOut,
-                currentSelectionLastCheckoutDate: currentSelectionAvailability,
-              })
-            }
-          />
-
-          <div className={'will-calendar-tooltip'}>
-            <div>{t('noCheckIn')}</div>
-          </div>
-          <div className={'will-calendar-tooltip-check-out'}>
-            <div>{t('noCheckOut')}</div>
-          </div>
-          <div className={'will-calendar-tooltip-overlapping-date'}>
-            <div>{t('checkOutOnly')}</div>
-          </div>
-          <div className={'will-calendar-tooltip-check-in-only'}>
-            <div>{t('checkInOnly')}</div>
-          </div>
-          <div className={'will-calendar-tooltip-check-out-only'}>
-            <div>{t('checkOutOnly')}</div>
-          </div>
-          <div className={'will-calendar-spinner'}>
-            <IconsSvg
-              fill={palette?.primary || 'inherit'}
-              size={50}
-              icon="spinner"
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-)

package/src/core/components/calendar/CalendarTypes.ts

@@ -1,48 +0,0 @@
-import { DateRange, Matcher } from 'react-day-picker'
-import { Palette } from '../../../themes/useTheme'
-
-export type CalendarOffset = {
-  [key: string]: number
-}
-
-export type DisableCalendarDates = {
-  availableDates?: {
-    checkIn: Date
-    firstCheckOut: Date
-    lastCheckOut: Date
-  }[]
-  disabledDates?: { to: Date; from: Date }[]
-  disabledDatesByPage?: {
-    page: string
-    offset: number
-  }[]
-}
-
-export type RangeContext = {
-  from: Date
-  to: Date
-}
-
-export type CalendarTypes = {
-  calendarRange?: DateRange | undefined
-  setCalendarRange: (range: DateRange | undefined) => void
-  calendarOffset?: CalendarOffset
-  selectedPath?: string
-  language?: string
-  disableCalendarDates?: DisableCalendarDates
-  requestDates?: (val: Date) => void
-  disabledDates?: Matcher[]
-  setDisabledDates?: (arg: Matcher[]) => void
-  loadingData?: boolean
-  showFeedback?: boolean
-  noActiveSelection?: boolean
-  palette?: Palette
-  updateCalendarMonthNavigation?: boolean
-  setUpdateCalendarMonthNavigation?: (arg: (prev: boolean) => boolean) => void
-  updateCalendarDefaultMonth?: number
-  setCalendarHasError?: (arg: boolean) => void
-  setUpdatedForSubmit?: (arg: boolean) => void
-  rangeContext?: RangeContext
-  calendarHasError?: boolean
-  autoFocus?: boolean
-}

package/src/core/components/calendar/hooks/index.ts

@@ -1,3 +0,0 @@
-export { useCalendarTooltips } from './useCalendarTooltips'
-export { useCalendarLoadingSpinner } from './useCalendarLoadingSpinner'
-export { useUpdateDisabledDates } from './useUpdateDisabledDates'

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

@@ -1,19 +0,0 @@
-import { useEffect } from 'react'
-
-type Props = {
-  loadingData?: boolean
-}
-
-export const useCalendarLoadingSpinner = ({ loadingData }: Props) =>
-  useEffect(() => {
-    if (typeof document === 'undefined') return
-
-    const loadingSpinner: HTMLElement | null = document.querySelector(
-      '.will-filter-bar-calendar .rdp-months .will-calendar-spinner'
-    )
-    if (loadingData) {
-      if (loadingSpinner) loadingSpinner.style.display = 'flex'
-    } else {
-      if (loadingSpinner) loadingSpinner.style.display = 'none'
-    }
-  })

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

@@ -1,125 +0,0 @@
-import { useEffect } from 'react'
-
-type Props = {
-  showFeedback?: boolean
-}
-
-export const useCalendarTooltips = ({ showFeedback }: Props) =>
-  useEffect(() => {
-    if (typeof document === 'undefined' || !showFeedback) return
-
-    // Children
-    const calendarTooltip = document.querySelector('.will-calendar-tooltip')
-    const calendarTooltipCheckOut = document.querySelector(
-      '.will-calendar-tooltip-check-out'
-    )
-
-    const calendarTooltipOverlappingDate = document.querySelector(
-      '.will-calendar-tooltip-overlapping-date'
-    )
-
-    const loadingSpinner = document.querySelector(
-      '.will-filter-bar-calendar .will-calendar-spinner'
-    )
-
-    const calendarTooltipCheckInOnly = document.querySelector(
-      '.will-calendar-tooltip-check-in-only'
-    )
-    const calendarTooltipCheckOutOnly = document.querySelector(
-      '.will-calendar-tooltip-check-out-only'
-    )
-
-    // Parents
-    const calendarButtons = document.querySelectorAll(
-      '.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))'
-    )
-    const calendarButtonsCheckOut = document.querySelectorAll(
-      '.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)'
-    )
-    const calendarMonthContainer = document.querySelector(
-      '.will-filter-bar-calendar .rdp-months'
-    )
-    const calendarOverlappingDate = document.querySelectorAll(
-      '.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)'
-    )
-
-    const calendarCheckInOnly = document.querySelectorAll(
-      '.will-filter-bar-calendar .rdp-cell:has(.check-in-only)'
-    )
-
-    const calendarCheckOutOnly = document.querySelectorAll(
-      '.will-filter-bar-calendar .rdp-cell:has(.check-out-only)'
-    )
-
-    // Append children to parents
-
-    const tooltipClonesCheckIn: Element[] = []
-    const tooltipClonesCheckOut: Element[] = []
-    const tooltipClonesCheckInOnly: Element[] = []
-    const tooltipClonesCheckOutOnly: Element[] = []
-    const tooltipClonesSpinner: Element[] = []
-    const tooltipClonesOverlappingDates: Element[] = []
-
-    if (calendarTooltip && calendarButtons.length > 0) {
-      calendarButtons.forEach((element) => {
-        const tooltipClone: Element = calendarTooltip.cloneNode(true) as Element
-        element.appendChild(tooltipClone)
-        tooltipClonesCheckIn.push(tooltipClone)
-      })
-    }
-
-    if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
-      calendarButtonsCheckOut.forEach((element) => {
-        const tooltipClone: Element = calendarTooltipCheckOut.cloneNode(
-          true
-        ) as Element
-        element.appendChild(tooltipClone)
-        tooltipClonesCheckOut.push(tooltipClone)
-      })
-    }
-
-    if (calendarTooltipCheckOutOnly && calendarCheckOutOnly.length > 0) {
-      calendarCheckOutOnly.forEach((element) => {
-        const tooltipClone: Element = calendarTooltipCheckOutOnly.cloneNode(
-          true
-        ) as Element
-        element.appendChild(tooltipClone)
-        tooltipClonesCheckOutOnly.push(tooltipClone)
-      })
-    }
-
-    if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
-      calendarCheckInOnly.forEach((element) => {
-        const tooltipClone: Element = calendarTooltipCheckInOnly.cloneNode(
-          true
-        ) as Element
-        element.appendChild(tooltipClone)
-        tooltipClonesCheckInOnly.push(tooltipClone)
-      })
-    }
-
-    if (loadingSpinner && calendarMonthContainer) {
-      const tooltipClone: Element = loadingSpinner.cloneNode(true) as Element
-      calendarMonthContainer.appendChild(tooltipClone)
-      tooltipClonesSpinner.push(tooltipClone)
-    }
-
-    if (calendarTooltipOverlappingDate && calendarOverlappingDate.length > 0) {
-      calendarOverlappingDate.forEach((element) => {
-        const tooltipClone: Element = calendarTooltipOverlappingDate.cloneNode(
-          true
-        ) as Element
-        element.appendChild(tooltipClone)
-        tooltipClonesOverlappingDates.push(tooltipClone)
-      })
-    }
-
-    return () => {
-      tooltipClonesCheckIn.forEach((clone) => clone.remove())
-      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

@@ -1,105 +0,0 @@
-import { useMemo, useState } from 'react'
-import { addDays, format } from 'date-fns'
-import { DateRange, Matcher } from 'react-day-picker'
-
-import { DisableCalendarDates } from '../CalendarTypes'
-
-type Props = {
-  disableCalendarDates?: DisableCalendarDates
-  calendarRange?: DateRange
-  updateCalendarMonthNavigation?: boolean
-  updateCalendarDefaultMonth?: number
-}
-
-export const useUpdateDisabledDates = ({
-  disableCalendarDates,
-  calendarRange,
-  updateCalendarMonthNavigation,
-  updateCalendarDefaultMonth,
-}: Props) => {
-  const [overlappingDate, setOverlappingDate] = useState<
-    DateRange[] | undefined
-  >(undefined)
-
-  const [lastPossibleCheckout, setLatsPossibleCheckout] = useState<Matcher>([])
-
-  const newDisableCalendarDates = useMemo(() => {
-    if (disableCalendarDates?.availableDates) {
-      const dateFormat = 'dd-MM-yyyy'
-
-      const { disabledDates } = disableCalendarDates
-
-      const { updatedDisabledDates, newOverlappingDates } = (
-        disabledDates || []
-      ).reduce(
-        (
-          acc: {
-            updatedDisabledDates: { to: Date; from: Date }[]
-            newOverlappingDates: { to: Date; from: Date }[]
-          },
-          dateRange
-        ) => {
-          const formattedFromDate = format(dateRange.from, dateFormat)
-          const formattedToDate = format(dateRange.to, dateFormat)
-
-          const hasTwoOverlappingDates =
-            disableCalendarDates.availableDates?.some(
-              (item) =>
-                format(item.lastCheckOut, dateFormat) === formattedFromDate &&
-                format(item.lastCheckOut, dateFormat) === formattedToDate
-            )
-
-          const hasOneOverlappingDate =
-            disableCalendarDates.availableDates?.some(
-              (item) =>
-                format(item.lastCheckOut, dateFormat) === formattedFromDate &&
-                format(item.lastCheckOut, dateFormat) !== formattedToDate
-            )
-
-          if (hasTwoOverlappingDates) {
-            acc.newOverlappingDates.push(dateRange)
-          } else if (hasOneOverlappingDate) {
-            acc.newOverlappingDates.push(dateRange)
-            acc.updatedDisabledDates.push({
-              ...dateRange,
-              from: addDays(dateRange.from, 1),
-            })
-          } else {
-            acc.updatedDisabledDates.push(dateRange)
-          }
-
-          return acc
-        },
-        { updatedDisabledDates: [], newOverlappingDates: [] }
-      )
-
-      // Find last possible checkout ( disable all dates after the last possible checkout )
-      const lastPossibleCheckoutDate: Date | undefined =
-        disableCalendarDates.availableDates.at(-1)?.lastCheckOut
-
-      if (lastPossibleCheckoutDate) {
-        setLatsPossibleCheckout({ after: lastPossibleCheckoutDate })
-      }
-
-      // Extract overlapping dates ( dates that are only available for checkout )
-      if (newOverlappingDates.length) {
-        setOverlappingDate([...newOverlappingDates])
-      }
-
-      const newDisableCalendarDates = {
-        ...disableCalendarDates,
-        disabledDates: updatedDisabledDates,
-      }
-
-      return newDisableCalendarDates
-    }
-    return disableCalendarDates
-  }, [
-    disableCalendarDates,
-    calendarRange,
-    updateCalendarMonthNavigation,
-    updateCalendarDefaultMonth,
-  ])
-
-  return { newDisableCalendarDates, overlappingDate, lastPossibleCheckout }
-}