willba-component-library 0.0.78 → 0.0.80

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -1,7 +1,8 @@
 .will-root {
-  position: relative;
   z-index: 99999;
   width: 100%;
+  max-height: calc(100vh - 56px);
+  position: relative;
 }
 
 .will-filter-bar {
@@ -17,7 +18,7 @@
   width: 100%;
   height: 100%;
   cursor: pointer;
-  min-height: 100vh;
+  min-height: 200vh;
   z-index: 88888;
 }
 

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

@@ -16,5 +16,28 @@ export const Primary: Story = {
   args: {
     vendor: '',
     language: '',
+    ageCategories: [
+      {
+        id: '1',
+        name: 'Alle 6 vuotiaat',
+        minAge: null,
+        maxAge: 6,
+        minVal: 1,
+      },
+      {
+        id: '2',
+        name: '6-16 vuotiaat',
+        minAge: 6,
+        maxAge: 17,
+        minVal: 0,
+      },
+      {
+        id: '3',
+        name: 'Aikuiset',
+        minAge: 17,
+        maxAge: null,
+        minVal: 0,
+      },
+    ],
   },
 }

package/src/components/FilterBar/FilterBar.tsx

@@ -10,17 +10,23 @@ import Categories from './components/categories/Categories'
 
 import useTheme from '../../themes/useTheme'
 import useFilterBar from './hooks/useFilterBar'
+import { AgeCategoryType } from './FilterBarTypes'
 
 import './FilterBar.css'
 import '../../themes/Default.css'
 import i18n from '../../i18n'
 
-type FilterBarProps = {
+interface FilterBarProps {
   vendor?: string
   language?: string
+  ageCategories: AgeCategoryType[]
 }
 
-export default function FilterBar({ vendor, language }: FilterBarProps) {
+export default function FilterBar({
+  vendor,
+  language,
+  ageCategories,
+}: FilterBarProps) {
   const themeClass = useTheme({ vendor })
   const [rerenderKey, setRerenderKey] = useState(0)
 
@@ -35,17 +41,17 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
 
   const {
     selectedFilter,
-    guestsAdults,
-    guestsKids,
+    ageCategoryCounts,
     categories,
     calendarRange,
     setCalendarRange,
-    setGuestsAdults,
-    setGuestsKids,
+    setAgeCategoryCounts,
     setCategories,
     handleSelectedFilter,
     handleSubmit,
-  } = useFilterBar()
+
+    updateGuestsCount,
+  } = useFilterBar(ageCategories)
 
   return (
     <>
@@ -96,12 +102,8 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
             )}
             {selectedFilter === 3 && (
               <Guests
-                guestsAdults={guestsAdults}
-                guestsKids={guestsKids}
-                decrementAdults={() => setGuestsAdults(guestsAdults - 1)}
-                incrementAdults={() => setGuestsAdults(guestsAdults + 1)}
-                decrementKids={() => setGuestsKids(guestsKids - 1)}
-                incrementKids={() => setGuestsKids(guestsKids + 1)}
+                updateGuestsCount={updateGuestsCount}
+                ageCategories={ageCategories}
               />
             )}
             {selectedFilter === 4 && (

package/src/components/FilterBar/FilterBarTypes.ts

@@ -0,0 +1,17 @@
+export interface AgeCategoryType {
+  id: string
+  name: string
+  minAge: number | null
+  maxAge: number | null
+  maxVal: number
+}
+
+export interface GuestsPropsType {
+  ageCategories: AgeCategoryType[]
+  updateGuestsCount: (arg1: string, arg2: number) => void
+}
+
+export interface GuestsCountPropsType {
+  label: string
+  updateGuestsCount: (arg1: string, arg2: number) => void
+}

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

@@ -9,6 +9,7 @@
   font-size: 16px;
   text-transform: uppercase;
   margin: 10px 0;
+  text-align: left;
 }
 
 .will-calendar-filter-container {

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

@@ -7,9 +7,17 @@ import { useMediaQuery } from 'react-responsive'
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
 
+interface CalendarPropsType {
+  calendarRange: DateRange | undefined
+  setCalendarRange: (range: DateRange | undefined) => void
+}
+
 const currentMonth = new Date()
 
-export default function Calendar({ calendarRange, setCalendarRange }: any) {
+export default function Calendar({
+  calendarRange,
+  setCalendarRange,
+}: CalendarPropsType) {
   const { t } = useTranslation('filterBar')
   const isTablet = useMediaQuery({ maxWidth: 1024 })
 

package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css

@@ -0,0 +1,54 @@
+.will-guests-filter-label, .will-guests-filter-count {
+  font-size: 18px;
+  color: var(--will-text)
+}
+
+.will-guests-filter-inner {
+  display: flex;
+  align-items: center;
+}
+
+.will-guests-filter-inner {
+  margin-top: 30px;
+  margin-right: 50px;
+}
+
+.will-guests-filter-label {
+  display: block;
+  margin-right: 20px;
+  font-weight: bold;
+ 
+}
+
+.will-guests-filter-inner > div {
+  display: flex;
+  align-items: center;
+}
+
+.will-guests-filter-count {
+  margin: 0 10px;
+  min-width: 30px;
+  text-align: center;
+}
+
+.will-guests-filter-button {
+  border-radius: 50%;
+  border: none;
+  background-color: var(--will-onahau);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+@media (max-width: 1024px) {
+
+  .will-guests-filter-inner {
+    width: 100%;
+    margin: 15px 0;
+    justify-content: space-between;
+  }
+}

package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { GuestsCountPropsType } from '../../../FilterBarTypes'
+
+import './GuestCount.css'
+
+export default function GuestCount({
+  label,
+  updateGuestsCount,
+}: GuestsCountPropsType) {
+  const { t } = useTranslation('filterBar')
+
+  const [count, setCount] = useState(0)
+
+  const handleDecrement = () => {
+    if (count > 0) {
+      setCount(count - 1)
+      updateGuestsCount(label, count - 1)
+    }
+  }
+
+  const handleIncrement = () => {
+    setCount(count + 1)
+    updateGuestsCount(label, count + 1)
+  }
+  return (
+    <div className="will-guests-filter-inner">
+      <span className="will-guests-filter-label">{label}</span>
+      <div>
+        <button
+          className="will-guests-filter-button"
+          onClick={handleDecrement}
+          disabled={count < 2}
+          style={{
+            cursor: count < 2 ? 'initial' : 'pointer',
+            paddingBottom: '4px',
+          }}
+        >
+          -
+        </button>
+        <span className="will-guests-filter-count">{count}</span>
+        <button className="will-guests-filter-button" onClick={handleIncrement}>
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/FilterBar/components/guests/Guests.css

@@ -15,49 +15,14 @@
 }
 
 
-.will-guests-filter-label, .will-guests-filter-count {
-  font-size: 18px;
-  color: var(--will-text)
-}
-
 .will-guests-filter-container {
   display: flex;
-  margin-top: 30px;
-}
-
-.will-guests-filter-inner {
-  display: flex;
-  align-items: center;
-}
-
-.will-guests-filter-inner:not(:last-child) {
-  margin-right: 50px;
-}
-
-.will-guests-filter-label {
-  display: block;
-  margin-right: 20px;
-  font-weight: bold;
-}
-
-.will-guests-filter-inner > div {
-  display: flex;
-  align-items: center;
+  flex-wrap: wrap;
 }
 
-.will-guests-filter-count {
-  margin: 0 15px;
-}
 
-.will-guests-filter-button {
-  border-radius: 50%;
-  border: none;
-  background-color: var(--will-onahau);
-  width: 25px;
-  height: 25px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-  cursor: pointer;
+@media (max-width: 1024px) {
+  .will-guests-filter-container {
+   margin-top: 15px;
+  }
 }

package/src/components/FilterBar/components/guests/Guests.tsx

@@ -1,16 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import GuestCount from './GuestCount/GuestCount'
+import { GuestsPropsType } from '../../FilterBarTypes'
+
 import './Guests.css'
 
 export default function Guests({
-  guestsAdults,
-  guestsKids,
-  decrementAdults,
-  incrementAdults,
-  decrementKids,
-  incrementKids,
-}: any) {
+  ageCategories,
+  updateGuestsCount,
+}: GuestsPropsType) {
   const { t } = useTranslation('filterBar')
 
   return (
@@ -19,56 +18,13 @@ export default function Guests({
       <p className="will-guests-filter-subtitle">{t('guests.subtitle')}</p>
 
       <div className="will-guests-filter-container">
-        <div className="will-guests-filter-inner">
-          <span className="will-guests-filter-label">
-            {t('guests.adultsLabel')}
-          </span>
-          <div>
-            <button
-              className="will-guests-filter-button"
-              onClick={decrementAdults}
-              disabled={guestsAdults < 2}
-              style={{
-                cursor: guestsAdults < 2 ? 'initial' : 'pointer',
-                paddingBottom: '4px',
-              }}
-            >
-              -
-            </button>
-            <span className="will-guests-filter-count">{guestsAdults}</span>
-            <button
-              className="will-guests-filter-button"
-              onClick={incrementAdults}
-            >
-              +
-            </button>
-          </div>
-        </div>
-        <div className="will-guests-filter-inner">
-          <span className="will-guests-filter-label">
-            {t('guests.kidsLabel')}
-          </span>
-          <div>
-            <button
-              className="will-guests-filter-button"
-              onClick={decrementKids}
-              disabled={guestsKids < 1}
-              style={{
-                cursor: guestsKids < 1 ? 'initial' : 'pointer',
-                paddingBottom: '4px',
-              }}
-            >
-              -
-            </button>
-            <span className="will-guests-filter-count">{guestsKids}</span>
-            <button
-              className="will-guests-filter-button"
-              onClick={incrementKids}
-            >
-              +
-            </button>
-          </div>
-        </div>
+        {ageCategories?.map((category) => (
+          <GuestCount
+            key={category.id}
+            label={category.name}
+            updateGuestsCount={updateGuestsCount}
+          />
+        ))}
       </div>
     </div>
   )

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

@@ -1,13 +1,24 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { DateRange } from 'react-day-picker'
 import { format } from 'date-fns'
 
-export default function useFilterBar() {
+export default function useFilterBar(ageCategories: any) {
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
-  const [calendarRange, setCalendarRange] = useState<DateRange>()
-  const [guestsAdults, setGuestsAdults] = useState(1)
-  const [guestsKids, setGuestsKids] = useState(0)
-  const [categories, setCategories] = useState(0)
+  const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
+
+  const [categories, setCategories] = useState<number>(0)
+
+  //
+  const [ageCategoryCounts, setAgeCategoryCounts] = useState({})
+
+  const updateGuestsCount = (label: string, newCount: number) => {
+    setAgeCategoryCounts((prevCounts) => ({
+      ...prevCounts,
+      [label]: newCount,
+    }))
+  }
+
+  //
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
@@ -34,8 +45,8 @@ export default function useFilterBar() {
       })
     }
 
-    setGuestsAdults(parsedGuestsAdults)
-    setGuestsKids(parsedGuestsKids)
+    // setGuestsAdults(parsedGuestsAdults)
+    // setGuestsKids(parsedGuestsKids)
     setCategories(parsedCategories)
   }, [])
 
@@ -51,9 +62,8 @@ export default function useFilterBar() {
         ? format(calendarRange.from, 'yyyy-MM-dd')
         : '',
       endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
-      guestsAdults,
-      guestsKids,
       categories,
+      ageCategoryCounts: JSON.stringify(ageCategoryCounts),
     }
 
     for (const [key, value] of Object.entries(params)) {
@@ -67,22 +77,26 @@ export default function useFilterBar() {
     handleSelectedFilter(false)
   }
 
-  useMemo(() => {
+  useEffect(() => {
     document.body.style.overflow = selectedFilter ? 'hidden' : 'visible'
+
+    return () => {
+      document.body.style.overflow = 'visible'
+    }
   }, [selectedFilter])
 
   return {
     selectedFilter,
-    guestsAdults,
-    guestsKids,
+    ageCategoryCounts,
     categories,
     calendarRange,
     setCalendarRange,
     setSelectedFilter,
-    setGuestsAdults,
-    setGuestsKids,
+    setAgeCategoryCounts,
     setCategories,
     handleSelectedFilter,
     handleSubmit,
+
+    updateGuestsCount,
   }
 }