willba-component-library 0.3.13 → 0.3.15

package/src/components/FilterBar/components/FilterPanels/FilterPanels.css

@@ -0,0 +1,24 @@
+.will-filter-bar-panels {
+  background-color: var(--will-white);
+  min-height: 100px;
+  position: absolute;
+  top: 125px;
+  z-index: 111;
+  border-radius: 25px;
+  box-shadow: var(--will-box-shadow);
+}
+
+@media (max-width: 960px) {
+  .will-root {
+    width: 100%;
+    min-width: auto;
+    max-height: 100vh;
+    z-index: 3;
+  }
+
+  .will-filter-bar-panels {
+    margin-top: 10px;
+    top: 0;
+    position: relative;
+  }
+}

package/src/components/FilterBar/components/FilterPanels/FilterPanels.tsx

@@ -0,0 +1,115 @@
+import React, { CSSProperties, useEffect, useState } from 'react'
+
+import { useCloseFilterSection } from '../../../../core/hooks'
+import { FilterSections } from '../../FilterBarTypes'
+import { useFilterBar } from '../../providers'
+
+import { Dates } from './Dates/Dates'
+import { Guests } from './Guests/Guests'
+import { Locations } from './Locations/Locations'
+import { Categories } from './Categories/Categories'
+
+import './FilterPanels.css'
+import { usePanelPosition } from '../../hooks'
+
+export const FilterPanels = () => {
+  const {
+    categories,
+    calendarRange,
+    selectedFilter,
+    selectedPath,
+    ageCategoryCounts,
+    selectedLocations,
+    mode,
+    tabs,
+    disableCalendarDates,
+    ageCategories,
+    locations,
+    language,
+    isMobile,
+    panelRef,
+    buttonRefs,
+    targetFilterBarRef,
+    setSelectedLocations,
+    setCalendarRange,
+    handleSelectedFilter,
+    updateGuestsCount,
+    setCategories,
+  } = useFilterBar()
+
+  // Handle close filter section
+  const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
+
+  const { localStyles } = usePanelPosition({
+    selectedFilter,
+    panelRef,
+    targetFilterBarRef,
+    buttonRefs,
+    isMobile,
+  })
+
+  const renderContent = () => {
+    switch (selectedFilter) {
+      case FilterSections.CALENDAR:
+        return (
+          <Dates
+            autoFocus
+            ref={filtersRef}
+            onClose={() => handleSelectedFilter(false)}
+            calendarRange={calendarRange}
+            setCalendarRange={setCalendarRange}
+            disableCalendarDates={disableCalendarDates}
+            selectedPath={selectedPath}
+            language={language}
+          />
+        )
+      case FilterSections.GUESTS:
+        return (
+          <Guests
+            autoFocus
+            ref={filtersRef}
+            ageCategories={ageCategories}
+            ageCategoryCounts={ageCategoryCounts}
+            updateGuestsCount={updateGuestsCount}
+            onClose={() => handleSelectedFilter(false)}
+          />
+        )
+      case FilterSections.CATEGORIES:
+        return (
+          <Categories categories={categories} setCategories={setCategories} />
+        )
+      case FilterSections.LOCATIONS:
+        return (
+          <Locations
+            autoFocus
+            ref={filtersRef}
+            locations={locations?.data}
+            language={language}
+            selectedLocations={selectedLocations}
+            setSelectedLocations={setSelectedLocations}
+            multiSelect={locations?.multiSelect}
+            onClose={() => handleSelectedFilter(false)}
+          />
+        )
+
+      default:
+        return null
+    }
+  }
+
+  return (
+    selectedFilter && (
+      <div
+        ref={panelRef}
+        className={`will-filter-bar-panels ${mode || 'light'}`}
+        style={
+          (!tabs || tabs.length < 2) && !isMobile
+            ? { top: 66 }
+            : { ...localStyles }
+        }
+      >
+        {renderContent()}
+      </div>
+    )
+  )
+}

package/src/components/FilterBar/components/{guests → FilterPanels/Guests}/GuestCount/GuestCount.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useEffect } from 'react'
 
-import { GuestsCountPropsType } from '../../../FilterBarTypes'
+import { GuestsCountPropsType } from '../../../../FilterBarTypes'
 
 import './GuestCount.css'
 

package/src/components/FilterBar/components/{guests → FilterPanels/Guests}/Guests.css

@@ -1,4 +1,4 @@
-.will-filter-bar-guests {
+#will-filter-bar-guests {
   text-align: initial;
 }
 
@@ -10,9 +10,8 @@
   padding: 16px;
 }
 
-@media (max-width: 960px) {
-  .will-guests-filter-container {
-    margin-top: 15px;
-    min-width: 100%;
-  }
+/**/
+.will-guest-count {
+  display: inline-block;
+  min-width: 10px;
 }

package/src/components/FilterBar/components/{guests → FilterPanels/Guests}/Guests.tsx

@@ -1,16 +1,16 @@
 import React, { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { useAutoFocus } from '../../../../core/hooks'
+import { useAutoFocus } from '../../../../../core/hooks'
+import { CloseButton } from '../../../../../core/components'
 import { GuestCount } from './GuestCount/GuestCount'
-import { AgeCategoryCount, AgeCategoryType } from '../../FilterBarTypes'
-import { FilterSectionHeader } from '../common/FilterSectionHeader'
-import { CloseButton } from '../../../../core/components'
+import { AgeCategoryCount, AgeCategoryType } from '../../../FilterBarTypes'
+import { SectionHeader } from '../SectionHeader/SectionHeader'
 
 import './Guests.css'
 
 type Props = {
-  ageCategories: AgeCategoryType[]
+  ageCategories?: AgeCategoryType[]
   updateGuestsCount: (arg1: string, arg2: number) => void
   ageCategoryCounts: AgeCategoryCount
   autoFocus?: boolean
@@ -32,8 +32,8 @@ export const Guests = forwardRef<HTMLDivElement, Props>(
     const containerRef = useAutoFocus<HTMLDivElement>(autoFocus)
 
     return (
-      <div className="will-filter-bar-guests" ref={ref}>
-        <FilterSectionHeader
+      <div id="will-filter-bar-guests" ref={ref}>
+        <SectionHeader
           title={t('guests.title')}
           action={onClose && <CloseButton handleClose={onClose} />}
         />

package/src/components/FilterBar/components/{locations → FilterPanels/Locations}/Locations.css

@@ -1,4 +1,4 @@
-.will-filter-bar-locations {
+#will-filter-bar-locations {
   text-align: initial;
 }
 

package/src/components/FilterBar/components/{locations → FilterPanels/Locations}/Locations.tsx

@@ -1,11 +1,12 @@
 import React, { forwardRef, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { CloseButton } from '../../../../../core/components'
+import { Location } from '../../../FilterBarTypes'
+import { ImageCard } from '../../ImageCard/ImageCard'
+import { SectionHeader } from '../SectionHeader/SectionHeader'
+
 import './Locations.css'
-import { ImageCard } from '../cards/image-card/ImageCard'
-import { Location } from '../../FilterBarTypes'
-import { FilterSectionHeader } from '../common/FilterSectionHeader'
-import { CloseButton } from '../../../../core/components'
 
 type Props = {
   locations?: Location[]
@@ -63,8 +64,8 @@ export const Locations = forwardRef<HTMLDivElement, Props>(
     }
 
     return (
-      <div className="will-filter-bar-locations" ref={ref}>
-        <FilterSectionHeader
+      <div id="will-filter-bar-locations" ref={ref}>
+        <SectionHeader
           title={t('locations.title')}
           action={onClose && <CloseButton handleClose={onClose} />}
         />

package/src/components/FilterBar/components/{common/FilterSectionHeader.tsx → FilterPanels/SectionHeader/SectionHeader.tsx}

@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react'
 
-import './FilterSectionHeader.css'
+import './SectionHeader.css'
 
 type Props = {
   title: string
   action?: ReactNode
 }
 
-export const FilterSectionHeader = ({ title, action }: Props) => {
+export const SectionHeader = ({ title, action }: Props) => {
   return (
     <div className="will-filter-section-header">
       <h3 className="will-filter-section-title">{title}</h3>

package/src/components/FilterBar/components/FilterTabs/FilterTabs.css

@@ -0,0 +1,10 @@
+.will-filter-bar-tabs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 222;
+  background: transparent;
+  padding: 10px;
+  gap: 10px;
+}

package/src/components/FilterBar/components/FilterTabs/FilterTabs.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { useTranslation } from 'react-i18next'
+
+import { useFilterBar } from '../../providers'
+
+import { TabButton } from '../TabButton/TabButton'
+
+import './FilterTabs.css'
+
+export const FilterTabs = () => {
+  const { t } = useTranslation('filterBar')
+
+  const {
+    selectedPath,
+    mode,
+    tabs,
+    handleSelectedFilter,
+    setSelectedPath,
+    handleResetFilters,
+    //
+    targetFilterBarRef,
+  } = useFilterBar()
+
+  return (
+    tabs &&
+    tabs.length > 1 && (
+      <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
+        {tabs
+          .sort((a, b) => a.order - b.order)
+          .map((tab, idx) => (
+            <TabButton
+              key={`tab-${idx}`}
+              label={tab.label || t(`tabs.${tab.path.substring(1)}`)}
+              onClick={() => {
+                setSelectedPath(tab.path)
+                handleResetFilters()
+                handleSelectedFilter(false)
+              }}
+              active={selectedPath === tab.path}
+              mode={mode}
+            />
+          ))}
+      </div>
+    )
+  )
+}

package/src/components/FilterBar/components/{buttons/select-button → SelectButton}/SelectButton.css

@@ -8,6 +8,7 @@
   cursor: pointer;
   font-size: 14px;
   text-align: initial;
+  user-select: none;
 }
 
 .will-filter-bar-select-button.disabled {

package/src/components/FilterBar/components/{buttons/select-button → SelectButton}/SelectButton.tsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, ReactNode, MouseEvent } from 'react'
 
 import './SelectButton.css'
 
 type Props = {
   label: string
-  onClick: () => void
-  description: string
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void
+  description: ReactNode
   active?: boolean
   disabled?: boolean
   ariaExpanded?: boolean
@@ -29,7 +29,7 @@ export const SelectButton = forwardRef<HTMLButtonElement, Props>(
       <button
         ref={ref}
         className={`will-filter-bar-select-button ${disabled ? 'disabled' : ''}`}
-        onClick={disabled ? undefined : onClick}
+        onClick={(e) => (disabled ? undefined : onClick(e))}
         disabled={disabled}
         aria-expanded={ariaExpanded}
         aria-controls={ariaControls}
@@ -41,8 +41,9 @@ export const SelectButton = forwardRef<HTMLButtonElement, Props>(
             <p className={`select-button-label`}>{label}</p>
             <p
               className={`select-button-description ${active ? 'active' : ''}`}
-              dangerouslySetInnerHTML={{ __html: description }}
-            />
+            >
+              {description}
+            </p>
           </div>
         </span>
       </button>

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

@@ -1,6 +1,6 @@
-export { CloseButton, SelectButton, SubmitButton, TabButton } from './buttons'
-
-export { Guests } from './guests/Guests'
-export { Divider } from './divider/Divider'
-export { Categories } from './categories/Categories'
-export { Locations } from './locations/Locations'
+export { SelectButton } from './SelectButton/SelectButton'
+export { TabButton } from './TabButton/TabButton'
+export { Divider } from './Divider/Divider'
+export { FilterPanels } from './FilterPanels/FilterPanels'
+export { FilterControls } from './FilterControls/FilterControls'
+export { FilterTabs } from './FilterTabs/FilterTabs'

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

@@ -1,2 +1,5 @@
-export { useFilterBar } from './useFilterBar'
 export { useScrollInToView } from './useScrollInToView'
+export { useFilterState } from './useFilterState'
+export { useFilterActions } from './useFilterActions'
+export { useFilterUi } from './useFilterUi'
+export { usePanelPosition } from './usePanelPosition'

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

@@ -0,0 +1,126 @@
+import { Dispatch, SetStateAction, useEffect } from 'react'
+import { DateRange } from 'react-day-picker'
+import { format } from 'date-fns'
+
+import {
+  AgeCategoryCount,
+  FilterBarTypes,
+  Locations,
+  Pages,
+} from '../FilterBarTypes'
+import { ageCategoryRules } from '../utils'
+
+type Props = {
+  tabs: FilterBarTypes['tabs']
+  ageCategories: FilterBarTypes['ageCategories']
+  redirectUrl: FilterBarTypes['redirectUrl']
+  ageCategoryCounts: AgeCategoryCount
+  selectedLocations: Locations['data']
+  calendarRange?: DateRange
+  selectedPath: string
+  setSelectedPath: (val: string) => void
+  setAgeCategoryCounts: Dispatch<SetStateAction<AgeCategoryCount>>
+  setSelectedFilter: (val: string | boolean) => void
+  setCalendarRange: (val: DateRange | undefined) => void
+  onSubmit: FilterBarTypes['onSubmit']
+  setInnerLoading: (val: boolean) => void
+}
+
+export const useFilterActions = ({
+  tabs,
+  calendarRange,
+  ageCategoryCounts,
+  ageCategories,
+  selectedLocations,
+  selectedPath,
+  redirectUrl,
+  setSelectedPath,
+  setAgeCategoryCounts,
+  setSelectedFilter,
+  setCalendarRange,
+  onSubmit,
+  setInnerLoading,
+}: Props) => {
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const defaultTab =
+      tabs?.length === 1 ? tabs[0] : tabs?.find((tab) => tab.default)
+
+    const paths = [Pages.EVENTS, Pages.ROOMS, Pages.SALES]
+
+    const currentPath =
+      paths.find((path) => window.location.pathname.includes(path)) ||
+      defaultTab?.path ||
+      Pages.EVENTS
+
+    setSelectedPath(currentPath)
+  }, [tabs])
+
+  const updateGuestsCount = (id: string, newCount: number) => {
+    setAgeCategoryCounts((prev) => ({
+      ...prev,
+      [id]: newCount,
+    }))
+  }
+
+  const handleSelectedFilter = (id: string | boolean) => {
+    setSelectedFilter(id)
+  }
+
+  const handleSubmit = () => {
+    if (typeof window === 'undefined') return
+
+    const newParams = {
+      startDate: calendarRange?.from
+        ? format(calendarRange.from, 'yyyy-MM-dd')
+        : '',
+      endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
+      ageCategoryCounts: ageCategoryRules({
+        ageCategoryCounts,
+        ageCategories,
+      }),
+      selectedLocations: selectedLocations
+        .map((l) => l.id.toString())
+        .join(','),
+    }
+
+    const querySearchParams = new URLSearchParams()
+
+    for (const [key, value] of Object.entries(newParams)) {
+      if (!value) continue
+
+      if (key === 'selectedLocations' && selectedLocations.length) {
+        selectedLocations.forEach((location) =>
+          querySearchParams.append('locationId', location.id.toString())
+        )
+      } else {
+        querySearchParams.append(key, value.toString())
+      }
+    }
+
+    setSelectedFilter(false)
+
+    if (onSubmit && window.location.href.includes(selectedPath)) {
+      onSubmit(newParams)
+      return
+    }
+
+    const paramString = querySearchParams.toString()
+    const path = `${redirectUrl}${selectedPath}`
+
+    setInnerLoading(true)
+    window.location.href = paramString ? `${path}?${paramString}` : path
+  }
+
+  const handleResetFilters = () => {
+    setAgeCategoryCounts({})
+    setCalendarRange(undefined)
+  }
+  return {
+    updateGuestsCount,
+    handleSelectedFilter,
+    handleSubmit,
+    handleResetFilters,
+  }
+}

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

@@ -0,0 +1,86 @@
+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/useFilterUi.tsx

@@ -0,0 +1,19 @@
+import { useRef } from 'react'
+
+import { useScrollInToView } from './useScrollInToView'
+
+export const useFilterUi = (selectedFilter: string | boolean) => {
+  const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({})
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)
+
+  const { isMobile, targetFilterBarRef } = useScrollInToView({ selectedFilter })
+
+  return {
+    previouslyFocusedButtonRef,
+    isMobile,
+    targetFilterBarRef,
+    panelRef,
+    buttonRefs,
+  }
+}

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

@@ -0,0 +1,66 @@
+import {
+  CSSProperties,
+  MutableRefObject,
+  RefObject,
+  useEffect,
+  useState,
+} from 'react'
+
+type Props = {
+  selectedFilter: string | boolean
+  panelRef: RefObject<HTMLDivElement | null>
+  targetFilterBarRef: RefObject<HTMLDivElement | null>
+  buttonRefs: MutableRefObject<Record<string, HTMLButtonElement | null>>
+  isMobile: boolean
+}
+
+export const usePanelPosition = ({
+  selectedFilter,
+  panelRef,
+  targetFilterBarRef,
+  buttonRefs,
+  isMobile,
+}: Props) => {
+  const [localStyles, setLocalStyles] = useState<CSSProperties>({})
+
+  useEffect(() => {
+    if (!selectedFilter || typeof selectedFilter !== 'string' || isMobile) {
+      setLocalStyles({})
+      return
+    }
+
+    let timeoutId: number | null = null
+
+    const calculate = () => {
+      const panel = panelRef.current
+      const container = targetFilterBarRef.current
+      const button = buttonRefs.current[selectedFilter]
+
+      if (!panel || !container || !button) return
+
+      const panelRect = panel.getBoundingClientRect()
+      if (panelRect.width === 0) {
+        timeoutId = window.setTimeout(calculate, 10)
+        return
+      }
+
+      const containerRect = container.getBoundingClientRect()
+      const buttonRect = button.getBoundingClientRect()
+      const buttonLeft = buttonRect.left - containerRect.left
+      const left = Math.min(
+        buttonLeft,
+        Math.max(containerRect.width - panelRect.width, 0)
+      )
+
+      setLocalStyles({ left })
+    }
+
+    calculate()
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId)
+    }
+  }, [selectedFilter, panelRef, targetFilterBarRef, buttonRefs, isMobile])
+
+  return { localStyles }
+}

package/src/components/FilterBar/index.ts

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