willba-component-library 0.3.26 → 0.4.0

package/src/components/FilterBar/hooks/useFilterState.tsx

@@ -1,86 +0,0 @@
-import { useEffect, useState } from 'react'
-import { DateRange } from 'react-day-picker'
-
-import { AgeCategoryCount, FilterBarTypes, Pages } from '../FilterBarTypes'
-
-type Props = {
-  locations: FilterBarTypes['locations']
-}
-
-export const useFilterState = ({ locations }: Props) => {
-  const [selectedPath, setSelectedPath] = useState<string>(Pages.EVENTS)
-  const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
-  const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
-  const [innerLoading, setInnerLoading] = useState<boolean>(false)
-  const [categories, setCategories] = useState<number>(0)
-  const [ageCategoryCounts, setAgeCategoryCounts] = useState<AgeCategoryCount>(
-    {}
-  )
-  const [selectedLocations, setSelectedLocations] = useState<
-    NonNullable<FilterBarTypes['locations']>['data']
-  >([])
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-
-    const urlSearchParams = new URLSearchParams(window.location.search)
-
-    const startDateParam = urlSearchParams.get('startDate')
-    const endDateParam = urlSearchParams.get('endDate')
-    const locationIdParams = urlSearchParams.getAll('locationId')
-
-    let ageCategoryCountsParam: AgeCategoryCount = {}
-    const ageCategoryCountsQuery = urlSearchParams.get('ageCategoryCounts')
-
-    if (ageCategoryCountsQuery) {
-      try {
-        ageCategoryCountsParam = JSON.parse(ageCategoryCountsQuery)
-      } catch (error) {
-        console.warn('Invalid ageCategoryCounts query param, ignoring', error)
-        ageCategoryCountsParam = {}
-      }
-    }
-
-    const categoriesParam = urlSearchParams.get('categories')
-    let parsedCategories = 0
-
-    if (categoriesParam) {
-      const parsed = parseInt(categoriesParam, 10)
-      parsedCategories = Number.isNaN(parsed) ? 0 : parsed
-    }
-
-    if (startDateParam && endDateParam) {
-      setCalendarRange({
-        from: new Date(startDateParam),
-        to: new Date(endDateParam),
-      })
-    }
-
-    setAgeCategoryCounts(ageCategoryCountsParam)
-    setCategories(parsedCategories)
-
-    if (locations?.data?.length && locationIdParams.length) {
-      const matchedLocations = locations.data.filter((location) =>
-        locationIdParams.includes(location.id.toString())
-      )
-      setSelectedLocations(matchedLocations)
-    }
-  }, [locations])
-
-  return {
-    selectedPath,
-    selectedFilter,
-    calendarRange,
-    innerLoading,
-    categories,
-    ageCategoryCounts,
-    selectedLocations,
-    setSelectedLocations,
-    setCalendarRange,
-    setAgeCategoryCounts,
-    setCategories,
-    setSelectedPath,
-    setSelectedFilter,
-    setInnerLoading,
-  }
-}

package/src/components/FilterBar/hooks/usePanelPosition.tsx

@@ -1,52 +0,0 @@
-import { MutableRefObject, RefObject, useLayoutEffect, useState } from 'react'
-
-type Props = {
-  selectedFilter: string | boolean
-  panelRef: RefObject<HTMLDivElement | null>
-  filtersRef: RefObject<HTMLDivElement | null>
-  buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>
-  isMobile: boolean
-  tabs?: unknown[]
-}
-
-export const usePanelPosition = ({
-  selectedFilter,
-  panelRef,
-  filtersRef,
-  buttonRefs,
-  isMobile,
-  tabs,
-}: Props) => {
-  const [left, setLeft] = useState<number | undefined>()
-
-  const hasMultipleTabs = tabs && tabs.length > 1
-  const top = isMobile ? (hasMultipleTabs ? 60 : 0) : hasMultipleTabs ? 125 : 66
-
-  useLayoutEffect(() => {
-    if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
-      setLeft(undefined)
-      return
-    }
-
-    const panel = panelRef.current
-    const container = filtersRef.current
-    const button = buttonRefs.current[selectedFilter]
-
-    if (!panel || !container || !button) return
-
-    const panelRect = panel.getBoundingClientRect()
-    const containerRect = container.getBoundingClientRect()
-    const buttonRect = button.getBoundingClientRect()
-
-    const buttonLeft = buttonRect.left - containerRect.left - 10
-
-    const newLeft = Math.max(
-      0,
-      Math.min(buttonLeft, containerRect.width - panelRect.width)
-    )
-
-    setLeft(newLeft)
-  }, [selectedFilter, isMobile])
-
-  return { top, left }
-}

package/src/components/FilterBar/hooks/useScrollInToView.tsx

@@ -1,29 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-type Props = {
-  selectedFilter: string | boolean
-}
-
-export const useScrollInToView = ({ selectedFilter }: Props) => {
-  const [isMobile, setIsMobile] = useState(true)
-  const tabsRef = useRef<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined' && window.innerWidth > 960) {
-      setIsMobile(false)
-      return
-    }
-
-    if (tabsRef.current && selectedFilter) {
-      window.scrollTo({
-        behavior: 'smooth',
-        top:
-          tabsRef.current.getBoundingClientRect().top -
-          document.body.getBoundingClientRect().top -
-          30,
-      })
-    }
-  }, [selectedFilter])
-
-  return { isMobile, tabsRef }
-}

package/src/components/FilterBar/index.ts

@@ -1,3 +0,0 @@
-export { FilterBar } from './FilterBar'
-
-export * from './FilterBarTypes'

package/src/components/FilterBar/providers/FilterBarProvider.tsx

@@ -1,172 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  PropsWithChildren,
-  RefObject,
-  MutableRefObject,
-  useMemo,
-} from 'react'
-import { DateRange } from 'react-day-picker'
-
-import { AgeCategoryCount, Location, FilterBarTypes } from '../FilterBarTypes'
-import { useFilterActions, useFilterState, useFilterRefs } from '../hooks'
-
-type FilterBarProviderProps = PropsWithChildren<FilterBarTypes>
-
-type FilterBarContextType = FilterBarTypes & {
-  selectedFilter: string | boolean
-  ageCategoryCounts: AgeCategoryCount
-  categories: number
-  calendarRange?: DateRange
-  selectedPath: string
-  innerLoading: boolean
-  selectedLocations: Location[]
-
-  setSelectedLocations: (val: Location[]) => void
-  setCalendarRange: (val: DateRange | undefined) => void
-  setSelectedFilter: (val: string | boolean) => void
-  setAgeCategoryCounts: (val: AgeCategoryCount) => void
-  setCategories: (val: number) => void
-  setSelectedPath: (val: string) => void
-
-  handleSelectedFilter: (id: string | boolean) => void
-  handleSubmit: () => void
-  updateGuestsCount: (id: string, newCount: number) => void
-  handleResetFilters: () => void
-
-  // Refs
-  previouslyFocusedButtonRef: MutableRefObject<HTMLButtonElement | null>
-  panelRef: MutableRefObject<HTMLDivElement | null>
-  buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>
-  filtersRef: MutableRefObject<HTMLDivElement | null>
-
-  // Mobile
-  isMobile: boolean
-  tabsRef: MutableRefObject<HTMLDivElement | null>
-}
-
-const FilterBarContext = createContext<FilterBarContextType | undefined>(
-  undefined
-)
-
-export const FilterBarProvider = ({
-  children,
-  language,
-  ageCategories,
-  redirectUrl,
-  palette,
-  onSubmit,
-  fullWidth,
-  disableCalendarDates,
-  mode,
-  tabs,
-  outerLoading,
-  locations,
-}: FilterBarProviderProps) => {
-  const {
-    selectedPath,
-    selectedFilter,
-    calendarRange,
-    innerLoading,
-    categories,
-    ageCategoryCounts,
-    selectedLocations,
-    setSelectedLocations,
-    setCalendarRange,
-    setAgeCategoryCounts,
-    setCategories,
-    setSelectedPath,
-    setSelectedFilter,
-    setInnerLoading,
-  } = useFilterState({ locations })
-
-  const filterActions = useFilterActions({
-    tabs,
-    ageCategoryCounts,
-    ageCategories,
-    selectedLocations,
-    selectedPath,
-    redirectUrl,
-    calendarRange,
-    setSelectedPath,
-    setAgeCategoryCounts,
-    setSelectedFilter,
-    setCalendarRange,
-    onSubmit,
-    setInnerLoading,
-  })
-
-  const filterRefs = useFilterRefs(selectedFilter)
-
-  const contextValue = useMemo(
-    () => ({
-      selectedFilter,
-      ageCategoryCounts,
-      categories,
-      calendarRange,
-      selectedPath,
-      innerLoading,
-      selectedLocations,
-
-      setSelectedLocations,
-      setCalendarRange,
-      setSelectedFilter,
-      setAgeCategoryCounts,
-      setCategories,
-      setSelectedPath,
-
-      ...filterActions,
-
-      language,
-      ageCategories,
-      redirectUrl,
-      palette,
-      onSubmit,
-      fullWidth,
-      disableCalendarDates,
-      mode,
-      tabs,
-      outerLoading,
-      locations,
-
-      ...filterRefs,
-    }),
-    [
-      selectedFilter,
-      ageCategoryCounts,
-      categories,
-      calendarRange,
-      selectedPath,
-      innerLoading,
-      selectedLocations,
-      language,
-      ageCategories,
-      redirectUrl,
-      palette,
-      onSubmit,
-      fullWidth,
-      disableCalendarDates,
-      mode,
-      tabs,
-      outerLoading,
-      locations,
-      filterRefs.isMobile,
-      filterRefs.tabsRef,
-      filterRefs.filtersRef,
-    ]
-  )
-
-  return (
-    <FilterBarContext.Provider value={contextValue}>
-      {children}
-    </FilterBarContext.Provider>
-  )
-}
-
-export const useFilterBar = () => {
-  const context = useContext(FilterBarContext)
-  if (!context) {
-    throw new Error('useFilterBar must be used within FilterBarProvider')
-  }
-  return context
-}

package/src/components/FilterBar/providers/index.ts

@@ -1 +0,0 @@
-export { FilterBarProvider, useFilterBar } from './FilterBarProvider'

package/src/components/FilterBar/utils/ageCategoriesRules.ts

@@ -1,27 +0,0 @@
-import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
-
-type Props = {
-  ageCategoryCounts: AgeCategoryCount
-  ageCategories?: AgeCategoryType[]
-}
-
-export const ageCategoryRules = ({
-  ageCategoryCounts,
-  ageCategories,
-}: Props): string => {
-  if (ageCategories?.length) {
-    ageCategories?.map((a) => {
-      if (a.minVal) {
-        const ageCategory = ageCategoryCounts[`guests-${a.id}`]
-
-        if (!ageCategory) {
-          ageCategoryCounts[`guests-${a.id}`] = a.minVal
-        }
-      }
-    })
-  }
-
-  return Object.entries(ageCategoryCounts).length
-    ? JSON.stringify(ageCategoryCounts)
-    : ''
-}

package/src/components/FilterBar/utils/index.tsx

@@ -1,3 +0,0 @@
-export { parseGuests } from './parseGuests'
-export { parseLocations } from './parseLocations'
-export { ageCategoryRules } from './ageCategoriesRules'

package/src/components/FilterBar/utils/parseGuests.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-
-import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
-
-type Props = {
-  ageCategoryCounts: AgeCategoryCount
-  ageCategories?: AgeCategoryType[]
-  guestLabel: string
-  guestsLabel: string
-  guestsPlaceholder: string
-}
-
-type AccType = {
-  total: number
-  html: string[]
-}
-
-export const parseGuests = ({
-  guestLabel,
-  guestsLabel,
-  guestsPlaceholder,
-  ageCategoryCounts,
-  ageCategories,
-}: Props) => {
-  const parsedData = Object.entries(ageCategoryCounts).reduce(
-    (acc: AccType, [key, value]) => {
-      const parts = key.split('-')
-      if (parts.length < 2) return acc
-
-      const ageCategoryId = parts[1]
-      const ageCategory = ageCategories?.find((c) => c.id === ageCategoryId)
-
-      if (ageCategory && value) {
-        return {
-          total: acc.total + value,
-          html: [...acc.html, `${value}`],
-        }
-      }
-
-      return acc
-    },
-    { total: 0, html: [] }
-  )
-
-  if (!parsedData.total) {
-    return {
-      content: guestsPlaceholder,
-      data: parsedData,
-    }
-  }
-
-  const breakdown =
-    parsedData.html.length > 1 ? parsedData.html.join(' + ') : null
-
-  return {
-    content: (
-      <>
-        <span className="will-guest-count">{parsedData.total}</span>{' '}
-        {parsedData.total > 1 ? guestsLabel : guestLabel}
-        {breakdown && <> &nbsp; ( {breakdown} )</>}
-      </>
-    ),
-    data: parsedData,
-  }
-}

package/src/components/FilterBar/utils/parseLocations.ts

@@ -1,28 +0,0 @@
-import { Location } from '../FilterBarTypes'
-
-type Props = {
-  selectedLocations: Location[]
-  locationsPlaceholder: string
-  locationsSelectedLabel?: string
-}
-
-export const parseLocations = ({
-  selectedLocations,
-  locationsPlaceholder,
-  locationsSelectedLabel = 'locations',
-}: Props) => {
-  if (!selectedLocations.length) {
-    return locationsPlaceholder
-  }
-
-  if (selectedLocations.length === 1) {
-    const singleSelection = selectedLocations[0].label
-
-    if (!singleSelection) {
-      return locationsPlaceholder
-    }
-    return singleSelection
-  }
-
-  return `${selectedLocations.length} ${locationsSelectedLabel}`
-}

package/src/components/FilterCalendar/FilterCalendar.css

@@ -1,109 +0,0 @@
-.will-root .will-calendar-wrapper {
-    box-shadow: var(--will-box-shadow-dark);
-    border-radius: 20px;
-    background-color: var(--will-white);
-    position: absolute;
-    top: 0;
-    left: 0;
-   
-}
-
-.will-root .will-calendar-wrapper .will-calendar-header,
-.will-root .will-calendar-wrapper .will-calendar-main,
-.will-root .will-calendar-wrapper .will-calendar-footer {
-   padding: 20px;
-}
-
-/* Header */
-
-.will-root .will-calendar-wrapper .will-calendar-header {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--will-grey);
-    align-items: center;
-}
-
-/* Footer */
-
-.will-root .will-calendar-wrapper .will-calendar-footer {
-    border-top: 1px solid var(--will-grey);
-}
-
-/* Footer actions */
-
-.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {
-    display: flex;
-    justify-content: space-between;
-}
-
-.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {
-    margin-bottom: 5px;
-}
-
-.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {
-    margin: 0 15px;
-}
-
-.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {
-    display: flex;
-    min-height: 20.5px;
-    margin-top: 10px;
-}
-
-.will-root .will-calendar-wrapper .will-calendar-footer-error {
-    display: flex;
-    max-width: 80%;
-}
-
-.will-root .will-calendar-wrapper .will-calendar-footer-error span {
-    display: inline-block;
-    margin-left: 10px;
-}
-
-@media (max-width: 960px) {
-    .will-root .will-calendar-wrapper {
-        width: -webkit-fill-available;
-        margin: 0 -6%;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-header,
-    .will-root .will-calendar-wrapper .will-calendar-main,
-    .will-root .will-calendar-wrapper .will-calendar-footer {
-        padding: 20px 10px;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {
-        flex-direction: column;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {
-        text-align: center;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {
-       justify-content: center;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-footer-actions {
-       flex-direction: column;
-       width: 100%;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{
-        width: 100%;
-        margin-top: 10px;
-     }
-
-     .will-root .will-calendar-wrapper .will-calendar-footer-error {
-        max-width: 100%;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-footer-error span {
-        text-align: center;
-        margin-left: 5px;
-    }
-  }
-
-.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {
-    position: initial;
-}