willba-component-library 0.1.57 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -15,6 +15,10 @@ type Story = StoryObj<typeof FilterBar>
 
 export const Primary: Story = {
   args: {
+    calendarOffset: {
+      rooms: 7,
+      events: -2,
+    },
     fullWidth: true,
     language: '',
     redirectUrl: '',

package/src/components/FilterBar/FilterBar.tsx

@@ -7,8 +7,10 @@ import '../../themes/Default.css'
 import { parseDates, parseGuests } from './utils'
 import {
   AgeCategoryType,
+  CalendarOffset,
   FilterSections,
   Filters,
+  Pages,
   ViewApply,
 } from './FilterBarTypes'
 import {
@@ -39,6 +41,7 @@ export type FilterBarProps = {
   currentViewApply?: string
   onSubmit?: ((val: Filters) => void) | null
   fullWidth?: boolean
+  calendarOffset: CalendarOffset
 }
 
 export default function FilterBar({
@@ -49,6 +52,7 @@ export default function FilterBar({
   currentViewApply,
   onSubmit,
   fullWidth,
+  calendarOffset,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
@@ -69,6 +73,7 @@ export default function FilterBar({
     handleSubmit,
     updateGuestsCount,
     setSelectedPath,
+    handleResetFilters,
   } = useFilterBar({
     redirectUrl,
     currentViewApply,
@@ -79,7 +84,7 @@ export default function FilterBar({
   // Default selected tab when tabs are hidden
   useEffect(() => {
     if (currentViewApply === ViewApply.ROOMS) {
-      setSelectedPath('/rooms')
+      setSelectedPath(Pages.ROOMS)
     }
   }, [])
 
@@ -116,13 +121,17 @@ export default function FilterBar({
         >
           <TabButton
             label={t('tabs.events')}
-            onClick={() => setSelectedPath('/events')}
-            active={selectedPath === '/events'}
+            onClick={() => {
+              setSelectedPath(Pages.EVENTS), handleResetFilters()
+            }}
+            active={selectedPath === Pages.EVENTS}
           />
           <TabButton
             label={t('tabs.rooms')}
-            onClick={() => setSelectedPath('/rooms')}
-            active={selectedPath === '/rooms'}
+            onClick={() => {
+              setSelectedPath(Pages.ROOMS), handleResetFilters()
+            }}
+            active={selectedPath === Pages.ROOMS}
           />
         </div>
       )}
@@ -136,7 +145,7 @@ export default function FilterBar({
           description={
             parsedDates
               ? parsedDates
-              : selectedPath === '/rooms'
+              : selectedPath === Pages.ROOMS
               ? t('calendar.roomsLabelPlaceholder')
               : t('calendar.eventsLabelPlaceholder')
           }
@@ -144,14 +153,16 @@ export default function FilterBar({
           active={selectedFilter === FilterSections.CALENDAR}
         />
 
-        {selectedPath === '/rooms' && (
+        {selectedPath === Pages.ROOMS && (
           <>
             <Divider />
 
             <SelectButton
               label={t('guests.label')}
               description={
-                parsedGuests ? parsedGuests : t('guests.labelPlaceholder')
+                parsedGuests
+                  ? t('guests.guestsLabel') + parsedGuests
+                  : t('guests.labelPlaceholder')
               }
               onClick={() => handleSelectedFilter(FilterSections.GUESTS)}
               active={selectedFilter === FilterSections.GUESTS}
@@ -174,6 +185,8 @@ export default function FilterBar({
               calendarRange={calendarRange}
               setCalendarRange={setCalendarRange}
               ref={filtersRef}
+              calendarOffset={calendarOffset}
+              selectedPath={selectedPath}
             />
           )}
           {selectedFilter === FilterSections.GUESTS && (

package/src/components/FilterBar/FilterBarTypes.ts

@@ -29,3 +29,12 @@ export type Filters = { [key: string]: string }
 export enum ViewApply {
   ROOMS = 'roomFilters',
 }
+
+export enum Pages {
+  ROOMS = '/rooms',
+  EVENTS = '/events',
+}
+
+export type CalendarOffset = {
+  [key: string]: number
+}

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

@@ -3,16 +3,23 @@ import { DateRange, DayPicker } from 'react-day-picker'
 import { addDays, startOfDay, addMonths } from 'date-fns'
 import { useMediaQuery } from 'react-responsive'
 
+import { CalendarOffset } from '../../FilterBarTypes'
+
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
 
 type Props = {
   calendarRange: DateRange | undefined
   setCalendarRange: (range: DateRange | undefined) => void
+  calendarOffset: CalendarOffset
+  selectedPath: string
 }
 
 export const Calendar = forwardRef<HTMLDivElement, Props>(
-  ({ calendarRange, setCalendarRange }: Props, ref) => {
+  (
+    { calendarRange, setCalendarRange, calendarOffset, selectedPath }: Props,
+    ref
+  ) => {
     const isTablet = useMediaQuery({ maxWidth: 960 })
 
     useEffect(() => {
@@ -21,10 +28,17 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
 
     const today = startOfDay(new Date())
 
+    const daysToOffsetCalendar = Object.entries(calendarOffset)?.find(
+      (page) => selectedPath.substring(1) === page[0]
+    )
+
     const disabledDays = [
       {
-        from: addDays(today, -2),
-        to: addDays(today, -50),
+        from: addDays(
+          today,
+          !!daysToOffsetCalendar?.length ? daysToOffsetCalendar[1] : -2
+        ),
+        to: addDays(today, -100),
       },
     ]
     const selectedStartDate = calendarRange?.from

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

@@ -2,7 +2,12 @@ import { useEffect, useState } from 'react'
 import { DateRange } from 'react-day-picker'
 import { format } from 'date-fns'
 
-import { AgeCategoryCount, AgeCategoryType, Filters } from '../FilterBarTypes'
+import {
+  AgeCategoryCount,
+  AgeCategoryType,
+  Filters,
+  Pages,
+} from '../FilterBarTypes'
 
 type Props = {
   redirectUrl?: string
@@ -17,7 +22,7 @@ export const useFilterBar = ({
   ageCategories,
   onSubmit,
 }: Props) => {
-  const [selectedPath, setSelectedPath] = useState('/events')
+  const [selectedPath, setSelectedPath] = useState(Pages.EVENTS)
   const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
 
@@ -65,11 +70,11 @@ export const useFilterBar = ({
     // Handle default selected tab
     if (typeof window === 'undefined') return
 
-    const currentPath = window.location.pathname.includes('/events')
-      ? '/events'
-      : window.location.pathname.includes('/rooms')
-      ? '/rooms'
-      : '/events'
+    const currentPath = window.location.pathname.includes(Pages.EVENTS)
+      ? Pages.EVENTS
+      : window.location.pathname.includes(Pages.ROOMS)
+      ? Pages.ROOMS
+      : Pages.EVENTS
 
     setSelectedPath(currentPath)
   }, [])
@@ -120,7 +125,7 @@ export const useFilterBar = ({
 
       handleSelectedFilter(false)
 
-      if (onSubmit && selectedPath === '/rooms') {
+      if (onSubmit && selectedPath === Pages.ROOMS) {
         const updatedParamsObject: { [key: string]: string } = {}
 
         updatedParams.forEach((value, key) => {
@@ -141,7 +146,7 @@ export const useFilterBar = ({
       }
 
       handleSelectedFilter(false)
-      return onSubmit && selectedPath === '/rooms'
+      return onSubmit && selectedPath === Pages.ROOMS
         ? onSubmit(newParams)
         : (window.location.href = `${redirectUrl}/${selectedPath}${
             querySearchParams ? `?${querySearchParams.toString()}` : ''
@@ -151,8 +156,7 @@ export const useFilterBar = ({
 
   const handleResetFilters = () => {
     setAgeCategoryCounts({})
-    handleSubmit()
-    setSelectedFilter(false)
+    setCalendarRange(undefined)
   }
 
   return {

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

@@ -5,15 +5,37 @@ type Props = {
   ageCategories: AgeCategoryType[]
 }
 
-export const parseGuests = ({ ageCategoryCounts, ageCategories }: Props) =>
-  Object.entries(ageCategoryCounts).reduce((acc, [key, value]) => {
-    const ageCategory = ageCategories.find((c) => c.id === key[key.length - 1])
+type AccType = {
+  total: number
+  html: string[]
+}
+
+export const parseGuests = ({ ageCategoryCounts, ageCategories }: Props) => {
+  const parsedData = Object.entries(ageCategoryCounts).reduce(
+    (acc: AccType, [key, value]) => {
+      const ageCategoryId = key[key.length - 1]
+      const ageCategory = ageCategories.find((c) => c.id === ageCategoryId)
+
+      if (ageCategory && value) {
+        return {
+          total: acc.total + value,
+          html: [
+            ...acc.html,
+            `<span style="display: inline-block; width: 21px, text-align: center">${value}</span>`,
+          ],
+        }
+      }
 
-    if (ageCategory && value) {
-      acc += `${acc ? ' |' : ''} ${
-        ageCategory.name
-      }: <span style="display: inline-block; width: 21px">${value}</span>`
-    }
+      return acc
+    },
+    { total: 0, html: [] }
+  )
 
-    return acc
-  }, '')
+  const htmlString =
+    parsedData.html.length > 1 ? parsedData.html.join(' + ') : ''
+
+  return (
+    (parsedData.total || htmlString) &&
+    `: ${parsedData.total} ${htmlString ? `- ( ${htmlString} )` : ''}`
+  )
+}

package/src/locales/en/filterBar.json

@@ -12,7 +12,8 @@
     "labelPlaceholder": "Add guests",
     "title": "Who's coming?",
     "adultsLabel": "Adults",
-    "kidsLabel": "kids"
+    "kidsLabel": "kids",
+    "guestsLabel": "Guests"
   },
   "categories": {
     "label": "Categories",

package/src/locales/fi/filterBar.json

@@ -12,7 +12,8 @@
     "labelPlaceholder": "Lisää vieraat",
     "title": "Ketkä ovat tulossa?",
     "adultsLabel": "Aikuiset",
-    "kidsLabel": "lapset"
+    "kidsLabel": "lapset",
+    "guestsLabel": "Gieraita"
   },
   "categories": {
     "label": "Kategoriat",