diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx index 1d874ec6e..ac952d518 100644 --- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx +++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx @@ -1,6 +1,7 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" +import { useSearchParams } from "next/navigation" import { useCallback, useEffect, useMemo, useState } from "react" import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" @@ -30,17 +31,22 @@ export default function RoomFilter({ const isTabletAndUp = useMediaQuery("(min-width: 768px)") const [isAboveMobile, setIsAboveMobile] = useState(false) - const initialFilterValues = useMemo( - () => - filterOptions.reduce( - (acc, option) => { - acc[option.code] = false - return acc - }, - {} as Record - ), - [filterOptions] - ) + const searchParams = useSearchParams() + const initialFilterValues = useMemo(() => { + const packagesFromSearchParams = + searchParams.get("room[0].packages")?.split(",") ?? [] + + const values = filterOptions.reduce( + (acc, option) => { + acc[option.code] = packagesFromSearchParams.includes(option.code) + return acc + }, + {} as Record + ) + + onFilter(values) + return values + }, [filterOptions, onFilter, searchParams]) const intl = useIntl() const methods = useForm>({ diff --git a/components/HotelReservation/SelectRate/Rooms/index.tsx b/components/HotelReservation/SelectRate/Rooms/index.tsx index e9cb10fa1..612815d36 100644 --- a/components/HotelReservation/SelectRate/Rooms/index.tsx +++ b/components/HotelReservation/SelectRate/Rooms/index.tsx @@ -35,29 +35,33 @@ export default function Rooms({ const [selectedPackages, setSelectedPackages] = useState( [] ) - const defaultPackages: DefaultFilterOptions[] = [ - { - code: RoomPackageCodeEnum.ACCESSIBILITY_ROOM, - description: "Accessible Room", - itemCode: availablePackages.find( - (pkg) => pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM - )?.itemCode, - }, - { - code: RoomPackageCodeEnum.ALLERGY_ROOM, - description: "Allergy Room", - itemCode: availablePackages.find( - (pkg) => pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM - )?.itemCode, - }, - { - code: RoomPackageCodeEnum.PET_ROOM, - description: "Pet Room", - itemCode: availablePackages.find( - (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM - )?.itemCode, - }, - ] + + const defaultPackages: DefaultFilterOptions[] = useMemo( + () => [ + { + code: RoomPackageCodeEnum.ACCESSIBILITY_ROOM, + description: "Accessible Room", + itemCode: availablePackages.find( + (pkg) => pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM + )?.itemCode, + }, + { + code: RoomPackageCodeEnum.ALLERGY_ROOM, + description: "Allergy Room", + itemCode: availablePackages.find( + (pkg) => pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM + )?.itemCode, + }, + { + code: RoomPackageCodeEnum.PET_ROOM, + description: "Pet Room", + itemCode: availablePackages.find( + (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM + )?.itemCode, + }, + ], + [availablePackages] + ) const handleFilter = useCallback( (filter: Record) => {