willba-component-library 0.1.41 → 0.1.42

package/package.json

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

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

@@ -32,7 +32,7 @@ export const Primary: Story = {
       {
         id: '1',
         name: 'Aikuiset',
-        minVal: 2,
+        minVal: 1,
         sortOrder: 1,
       },
     ],

package/src/components/FilterBar/FilterBar.tsx

@@ -61,7 +61,7 @@ export default function FilterBar({
     handleSubmit,
     updateGuestsCount,
     setSelectedPath,
-  } = useFilterBar({ redirectUrl, currentViewApply })
+  } = useFilterBar({ redirectUrl, currentViewApply, ageCategories })
 
   // Default selected tab
   useEffect(() => {

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

@@ -37,7 +37,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
           <DayPicker
             id="will-calendar"
             mode="range"
-            showOutsideDays
+            //showOutsideDays
             numberOfMonths={!isTablet ? 2 : 1}
             weekStartsOn={1}
             selected={calendarRange}

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

@@ -12,10 +12,6 @@ export default function GuestCount({
   count,
   minVal,
 }: GuestsCountPropsType) {
-  useEffect(() => {
-    if (minVal) updateGuestsCount(`guests-${id}`, minVal)
-  }, [])
-
   const handleDecrement = () => {
     if (count > minVal) {
       updateGuestsCount(`guests-${id}`, count - 1)
@@ -34,10 +30,10 @@ export default function GuestCount({
         <button
           className="will-guests-filter-counter-button"
           onClick={handleDecrement}
-          disabled={minVal && count < 2 ? true : false}
+          disabled={minVal && count <= minVal ? true : false}
           style={{
             cursor:
-              minVal && count < 2
+              minVal && count <= minVal
                 ? 'initial'
                 : !minVal && count < 1
                 ? 'initial'

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

@@ -31,7 +31,7 @@ export const Guests = forwardRef<HTMLDivElement, Props>(
               count={
                 (ageCategoryCounts as AgeCategoryCount)[
                   `guests-${category.id}`
-                ] || category.minVal
+                ] || 0
               }
             />
           ))}

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

@@ -2,14 +2,19 @@ import { useEffect, useState } from 'react'
 import { DateRange } from 'react-day-picker'
 import { format } from 'date-fns'
 
-import { AgeCategoryCount } from '../FilterBarTypes'
+import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
 
 type Props = {
   redirectUrl?: string
   currentViewApply?: string
+  ageCategories?: AgeCategoryType[]
 }
 
-export const useFilterBar = ({ redirectUrl, currentViewApply }: Props) => {
+export const useFilterBar = ({
+  redirectUrl,
+  currentViewApply,
+  ageCategories,
+}: Props) => {
   const [selectedPath, setSelectedPath] = useState('/events')
 
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
@@ -44,6 +49,7 @@ export const useFilterBar = ({ redirectUrl, currentViewApply }: Props) => {
   }, [])
 
   useEffect(() => {
+    // Handle hide scroll bar on mobile
     if (typeof window === 'undefined') return
 
     document.body.style.overflow =
@@ -55,16 +61,16 @@ export const useFilterBar = ({ redirectUrl, currentViewApply }: Props) => {
   }, [selectedFilter])
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      // Handle default selected tab
-      const currentPath = window.location.pathname.includes('/events')
-        ? '/events'
-        : window.location.pathname.includes('/rooms')
-        ? '/rooms'
-        : '/events'
-
-      setSelectedPath(currentPath)
-    }
+    // Handle default selected tab
+    if (typeof window === 'undefined') return
+
+    const currentPath = window.location.pathname.includes('/events')
+      ? '/events'
+      : window.location.pathname.includes('/rooms')
+      ? '/rooms'
+      : '/events'
+
+    setSelectedPath(currentPath)
   }, [])
 
   const updateGuestsCount = (id: string, newCount: number) => {
@@ -85,9 +91,10 @@ export const useFilterBar = ({ redirectUrl, currentViewApply }: Props) => {
         : '',
       endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
       categories,
-      ageCategoryCounts: Object.entries(ageCategoryCounts).length
-        ? JSON.stringify(ageCategoryCounts)
-        : '',
+      ageCategoryCounts: handleAgeCategoryRules({
+        ageCategoryCounts,
+        ageCategories,
+      }),
     }
 
     if (currentViewApply) {
@@ -151,3 +158,41 @@ export const useFilterBar = ({ redirectUrl, currentViewApply }: Props) => {
     setSelectedPath,
   }
 }
+
+////////////
+
+const handleAgeCategoryRules = ({
+  ageCategoryCounts,
+  ageCategories,
+}: {
+  ageCategoryCounts: AgeCategoryCount
+  ageCategories?: AgeCategoryType[]
+}) => {
+  if (ageCategories?.length) {
+    ageCategories?.map((a) => {
+      if (a.minVal) {
+        // Age categories rules
+        const totalAgeCategories = Object.entries(ageCategoryCounts).reduce(
+          (acc, c) => {
+            return acc + c[1]
+          },
+          0
+        )
+        const ageCategory = ageCategoryCounts[`guests-${a.id}`]
+
+        if (
+          !totalAgeCategories ||
+          (totalAgeCategories === 1 && ageCategory === 1)
+        ) {
+          ageCategoryCounts[`guests-${a.id}`] = 2
+        } else if (totalAgeCategories > 1 && !ageCategory) {
+          ageCategoryCounts[`guests-${a.id}`] = a.minVal
+        }
+      }
+    })
+  }
+
+  return Object.entries(ageCategoryCounts).length
+    ? JSON.stringify(ageCategoryCounts)
+    : ''
+}