willba-component-library 0.3.13 → 0.3.15

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

@@ -0,0 +1,169 @@
+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, useFilterUi } 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>>
+
+  // Mobile
+  isMobile: boolean
+  targetFilterBarRef: RefObject<HTMLDivElement>
+}
+
+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,
+    setSelectedPath,
+    setAgeCategoryCounts,
+    setSelectedFilter,
+    setCalendarRange,
+    onSubmit,
+    setInnerLoading,
+  })
+
+  const filterUi = useFilterUi(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,
+
+      ...filterUi,
+    }),
+    [
+      selectedFilter,
+      ageCategoryCounts,
+      categories,
+      calendarRange,
+      selectedPath,
+      innerLoading,
+      selectedLocations,
+      language,
+      ageCategories,
+      redirectUrl,
+      palette,
+      onSubmit,
+      fullWidth,
+      disableCalendarDates,
+      mode,
+      tabs,
+      outerLoading,
+      locations,
+      filterUi.isMobile,
+      filterUi.targetFilterBarRef,
+    ]
+  )
+
+  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

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

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

@@ -0,0 +1,27 @@
+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 +1,3 @@
 export { parseGuests } from './parseGuests'
 export { parseLocations } from './parseLocations'
-export { calculateDropdownPosition } from './calculateDropdownPosition'
+export { ageCategoryRules } from './ageCategoriesRules'

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

@@ -1,8 +1,10 @@
+import React from 'react'
+
 import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
 
 type Props = {
   ageCategoryCounts: AgeCategoryCount
-  ageCategories: AgeCategoryType[]
+  ageCategories?: AgeCategoryType[]
   guestLabel: string
   guestsLabel: string
   guestsPlaceholder: string
@@ -26,7 +28,7 @@ export const parseGuests = ({
       if (parts.length < 2) return acc
 
       const ageCategoryId = parts[1]
-      const ageCategory = ageCategories.find((c) => c.id === ageCategoryId)
+      const ageCategory = ageCategories?.find((c) => c.id === ageCategoryId)
 
       if (ageCategory && value) {
         return {
@@ -40,15 +42,24 @@ export const parseGuests = ({
     { total: 0, html: [] }
   )
 
-  const htmlString =
-    parsedData.html.length > 1 ? parsedData.html.join(' + ') : ''
+  if (!parsedData.total) {
+    return {
+      content: guestsPlaceholder,
+      data: parsedData,
+    }
+  }
+
+  const breakdown =
+    parsedData.html.length > 1 ? parsedData.html.join(' + ') : null
 
   return {
-    content: parsedData.total
-      ? `<span class="will-guest-count">${parsedData.total}</span> ${
-          parsedData.total > 1 ? guestsLabel : guestLabel
-        }${htmlString ? ` &nbsp; ( ${htmlString} )` : ''}`
-      : guestsPlaceholder,
+    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.tsx → parseLocations.ts}

@@ -8,7 +8,6 @@ type Props = {
 
 export const parseLocations = ({
   selectedLocations,
-
   locationsPlaceholder,
   locationsSelectedLabel = 'locations',
 }: Props) => {
@@ -17,12 +16,12 @@ export const parseLocations = ({
   }
 
   if (selectedLocations.length === 1) {
-    const translation = selectedLocations[0].label
+    const singleSelection = selectedLocations[0].label
 
-    if (!translation) {
+    if (!singleSelection) {
       return locationsPlaceholder
     }
-    return translation
+    return singleSelection
   }
 
   return `${selectedLocations.length} ${locationsSelectedLabel}`

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import useTheme from '../../themes/useTheme'
-import '../../themes/Default.css'
+import { useTheme } from '../../themes/useTheme'
 import { Calendar, CloseButton } from '../../core/components'
 import {
   useAwaitRender,
@@ -14,6 +13,7 @@ import { FilterCalendarTypes } from './FilterCalendarTypes'
 import { useFilterCalendar } from './hooks/useFilterCalendar'
 import { Footer } from './components/Footer'
 
+import '../../themes/Default.css'
 import './FilterCalendar.css'
 
 export default function FilterCalendar({

package/src/core/components/index.ts

@@ -1,4 +1,7 @@
-export { SubmitButton } from './buttons/submit-button/SubmitButton'
-export { CloseButton } from './buttons/close-button/CloseButton'
+export { SubmitButton } from './buttons/SubmitButton/SubmitButton'
+export { CloseButton } from './buttons/CloseButton/CloseButton'
 
+// Calendar
 export { Calendar } from './calendar/Calendar'
+export type { CalendarTypes } from './calendar/CalendarTypes'
+export { parseDates } from './calendar/utils'

package/src/index.ts

@@ -1,5 +1,5 @@
 import Button from './components/Button'
-import FilterBar from './components/FilterBar'
+import { FilterBar } from './components/FilterBar'
 import FilterCalendar from './components/FilterCalendar'
 
 export { Button, FilterBar, FilterCalendar }

package/src/themes/useTheme.tsx

@@ -16,7 +16,7 @@ export interface CustomPaletteTypes extends CSSProperties {
   '--will-error'?: string
 }
 
-export default function useTheme({ palette }: ThemeProps) {
+export const useTheme = ({ palette }: ThemeProps) => {
   const themePalette: CustomPaletteTypes = {
     '--will-primary': palette?.primary,
     '--will-secondary': palette?.secondary,

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

@@ -1,5 +0,0 @@
-export { CloseButton } from '../../../../core/components/buttons/close-button/CloseButton'
-export { SubmitButton } from '../../../../core/components/buttons/submit-button/SubmitButton'
-
-export { SelectButton } from './select-button/SelectButton'
-export { TabButton } from './tab-button/TabButton'

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

@@ -1 +0,0 @@
-export { ImageCard } from './image-card/ImageCard'

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

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

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

@@ -1,208 +0,0 @@
-import { useEffect, useState } from 'react'
-import { DateRange } from 'react-day-picker'
-import { format } from 'date-fns'
-
-import {
-  AgeCategoryCount,
-  AgeCategoryType,
-  Filters,
-  Pages,
-  Tab,
-  Location,
-} from '../FilterBarTypes'
-
-type Props = {
-  redirectUrl?: string
-  ageCategories?: AgeCategoryType[]
-  onSubmit?: ((val: Filters) => void) | null
-  tabs?: Tab[]
-  locations?: {
-    multiSelect: boolean
-    data: Location[]
-  }
-}
-
-export const useFilterBar = ({
-  redirectUrl,
-  ageCategories,
-  onSubmit,
-  tabs,
-  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<Location[]>([])
-
-  useEffect(() => {
-    const urlSearchParams = new URLSearchParams(window.location.search)
-
-    const startDateParam = urlSearchParams.get('startDate')
-    const endDateParam = urlSearchParams.get('endDate')
-    // Get all locationId params from URL
-    const locationIdParams = urlSearchParams.getAll('locationId')
-    const ageCategoryCountsParam = JSON.parse(
-      urlSearchParams.get('ageCategoryCounts') || '{}'
-    )
-    const parsedCategories = parseInt(
-      urlSearchParams.get('categories') || '0',
-      10
-    )
-
-    if (startDateParam && endDateParam) {
-      setCalendarRange({
-        from: new Date(startDateParam),
-        to: new Date(endDateParam),
-      })
-    }
-
-    setAgeCategoryCounts(ageCategoryCountsParam)
-    setCategories(parsedCategories)
-
-    // Set selected locations from URL - handle all locationIds
-    if (locations?.data?.length && locationIdParams.length) {
-      const matchedLocations = locations.data.filter((location) =>
-        locationIdParams.includes(location.id.toString())
-      )
-      setSelectedLocations(matchedLocations)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-
-    const defaultTab =
-      tabs?.length === 1 ? tabs[0] : tabs?.find((tab) => tab.default)
-
-    const findMatchingPath = () => {
-      const paths = [Pages.EVENTS, Pages.ROOMS, Pages.SALES]
-
-      for (const path of paths) {
-        if (window.location.pathname.includes(path)) {
-          return path
-        }
-      }
-
-      return defaultTab ? defaultTab.path : Pages.EVENTS
-    }
-
-    const currentPath = findMatchingPath()
-    setSelectedPath(currentPath)
-  }, [])
-
-  const updateGuestsCount = (id: string, newCount: number) => {
-    setAgeCategoryCounts((prevCounts) => ({
-      ...prevCounts,
-      [id]: newCount,
-    }))
-  }
-
-  const handleSelectedFilter = (id: string | boolean) => {
-    setSelectedFilter(id)
-  }
-
-  const handleSubmit = () => {
-    const newParams = {
-      startDate: calendarRange?.from
-        ? format(calendarRange.from, 'yyyy-MM-dd')
-        : '',
-      endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
-      //categories: categories.toString(),
-      ageCategoryCounts: handleAgeCategoryRules({
-        ageCategoryCounts,
-        ageCategories,
-      }),
-
-      selectedLocations: selectedLocations
-        .map((location) => location.id.toString())
-        .join(','),
-    }
-
-    const querySearchParams = new URLSearchParams()
-
-    for (const [key, value] of Object.entries(newParams)) {
-      if (value) {
-        if (key === 'selectedLocations' && !!selectedLocations.length) {
-          // Append all selected locationIds
-          selectedLocations.forEach((location) => {
-            querySearchParams.append('locationId', location.id.toString())
-          })
-        } else {
-          querySearchParams.append(key, value.toString())
-        }
-      }
-    }
-
-    handleSelectedFilter(false)
-
-    if (onSubmit && window.location.href.includes(selectedPath)) {
-      onSubmit(newParams)
-    } else {
-      const params = new URLSearchParams(querySearchParams ?? undefined)
-
-      const paramString = params.toString()
-      const path = `${redirectUrl}${selectedPath}`
-
-      setInnerLoading(true)
-      window.location.href = paramString ? `${path}?${paramString}` : path
-    }
-  }
-
-  const handleResetFilters = () => {
-    setAgeCategoryCounts({})
-    setCalendarRange(undefined)
-  }
-
-  return {
-    selectedFilter,
-    ageCategoryCounts,
-    categories,
-    calendarRange,
-    selectedPath,
-    innerLoading,
-    selectedLocations,
-    setSelectedLocations,
-    setCalendarRange,
-    setSelectedFilter,
-    setAgeCategoryCounts,
-    setCategories,
-    handleSelectedFilter,
-    handleSubmit,
-    updateGuestsCount,
-    handleResetFilters,
-    setSelectedPath,
-  }
-}
-
-////////////
-
-const handleAgeCategoryRules = ({
-  ageCategoryCounts,
-  ageCategories,
-}: {
-  ageCategoryCounts: AgeCategoryCount
-  ageCategories?: AgeCategoryType[]
-}) => {
-  if (ageCategories?.length) {
-    ageCategories?.map((a) => {
-      if (a.minVal) {
-        // Age categories rules
-        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/calculateDropdownPosition.tsx

@@ -1,96 +0,0 @@
-import { CSSProperties, RefObject } from 'react'
-import { FilterSections } from '../FilterBarTypes'
-
-type CalculateDropdownPositionParams = {
-  filterSection: FilterSections
-  headerRef: RefObject<HTMLDivElement>
-  locationsButtonRef: RefObject<HTMLButtonElement>
-  datesButtonRef: RefObject<HTMLButtonElement>
-  guestsButtonRef: RefObject<HTMLButtonElement>
-  isMobile: boolean
-}
-
-export const calculateDropdownPosition = ({
-  filterSection,
-  headerRef,
-  locationsButtonRef,
-  datesButtonRef,
-  guestsButtonRef,
-  isMobile,
-}: CalculateDropdownPositionParams): CSSProperties => {
-  if (isMobile) {
-    return {}
-  }
-
-  if (!headerRef.current) return {}
-
-  const containerRect = headerRef.current.getBoundingClientRect()
-  const containerLeft = 0
-
-  switch (filterSection) {
-    case FilterSections.LOCATIONS:
-      if (locationsButtonRef.current) {
-        const buttonRect = locationsButtonRef.current.getBoundingClientRect()
-        const relativeLeft = buttonRect.left - containerRect.left
-        return {
-          left: relativeLeft,
-          right: 'auto',
-          width: 'auto',
-        }
-      }
-      break
-
-    case FilterSections.CALENDAR:
-      if (datesButtonRef.current) {
-        const buttonRect = datesButtonRef.current.getBoundingClientRect()
-        const relativeLeft = buttonRect.left - containerRect.left
-        const availableWidth = containerRect.width - relativeLeft
-        const calendarMinWidth = 650
-
-        if (availableWidth < calendarMinWidth) {
-          return {
-            left: 'auto',
-            right: containerLeft,
-            width: 'auto',
-            maxWidth: `${containerRect.width}px`,
-          }
-        } else {
-          return {
-            left: relativeLeft,
-            right: 'auto',
-            width: 'auto',
-          }
-        }
-      }
-      break
-
-    case FilterSections.GUESTS:
-      if (guestsButtonRef.current) {
-        const buttonRect = guestsButtonRef.current.getBoundingClientRect()
-        const relativeLeft = buttonRect.left - containerRect.left
-        const availableWidth = containerRect.width - relativeLeft
-        const dropdownMinWidth = 350
-
-        if (availableWidth < dropdownMinWidth) {
-          return {
-            left: 'auto',
-            right: containerLeft,
-            width: 'auto',
-            maxWidth: `${containerRect.width}px`,
-          }
-        } else {
-          return {
-            left: relativeLeft,
-            right: 'auto',
-            width: 'auto',
-          }
-        }
-      }
-      break
-
-    default:
-      return {}
-  }
-
-  return {}
-}