diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css
deleted file mode 100644
index 464c8ce65..000000000
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.page {
- min-height: 100dvh;
- padding-top: var(--Spacing-x6);
- padding-left: var(--Spacing-x2);
- padding-right: var(--Spacing-x2);
- background-color: var(--Scandic-Brand-Warm-White);
-}
-
-.content {
- max-width: var(--max-width);
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- gap: var(--Spacing-x7);
- padding: var(--Spacing-x2);
-}
-
-.main {
- flex-grow: 1;
-}
-
-.summary {
- max-width: 340px;
-}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
index 05103acf3..d43330adb 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -1,14 +1,12 @@
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
+import { RoomPackageCode } from "@/server/routers/hotels/schemas/packages"
import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
-import RoomFilter from "@/components/HotelReservation/SelectRate/RoomFilter"
-import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
+import Rooms from "@/components/HotelReservation/SelectRate/Rooms"
import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
import { setLang } from "@/i18n/serverContext"
-import styles from "./page.module.css"
-
import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
import { LangParams, PageArgs } from "@/types/params"
@@ -24,7 +22,7 @@ export default async function SelectRatePage({
const adults = selectRoomParamsObject.room?.[0].adults // TODO: Handle multiple rooms
const children = selectRoomParamsObject.room?.[0].child?.length // TODO: Handle multiple rooms
- const [hotelData, roomsAvailability, user] = await Promise.all([
+ const [hotelData, roomsAvailability, packages, user] = await Promise.all([
serverClient().hotel.hotelData.get({
hotelId: searchParams.hotel,
language: params.lang,
@@ -37,6 +35,18 @@ export default async function SelectRatePage({
adults,
children,
}),
+ serverClient().hotel.packages.get({
+ hotelId: searchParams.hotel,
+ startDate: searchParams.fromDate,
+ endDate: searchParams.toDate,
+ adults: adults,
+ children: children,
+ packageCodes: [
+ RoomPackageCode.ACCE,
+ RoomPackageCode.PETR,
+ RoomPackageCode.ALLG,
+ ],
+ }),
getProfileSafely(),
])
@@ -51,20 +61,14 @@ export default async function SelectRatePage({
const roomCategories = hotelData?.included
return (
-
+
+ >
)
}
diff --git a/components/HotelReservation/EnterDetails/Payment/index.tsx b/components/HotelReservation/EnterDetails/Payment/index.tsx
index 0da2b79e2..ba126c1f2 100644
--- a/components/HotelReservation/EnterDetails/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -22,7 +22,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
import LoadingSpinner from "@/components/LoadingSpinner"
import Button from "@/components/TempDesignSystem/Button"
-import Checkbox from "@/components/TempDesignSystem/Checkbox"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
index d775f8f46..3c3586994 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -1,49 +1,60 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
-import { useRef } from "react"
+import { useCallback, useEffect, useMemo } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
+import { z } from "zod"
-import { roomFilterSchema } from "@/server/routers/hotels/schemas/room"
+import { RoomPackageCode } from "@/server/routers/hotels/schemas/packages"
+import Chip from "@/components/TempDesignSystem/Chip"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./roomFilter.module.css"
-import {
- RoomFilterFormData,
- RoomFilterProps,
-} from "@/types/components/hotelReservation/selectRate/roomFilter"
+import { RoomFilterProps } from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+export default function RoomFilter({
+ numberOfRooms,
+ onFilter,
+ filterOptions,
+}: RoomFilterProps) {
+ const initialFilterValues = useMemo(
+ () =>
+ filterOptions.reduce(
+ (acc, option) => {
+ acc[option.code] = false
+ return acc
+ },
+ {} as Record
+ ),
+ [filterOptions]
+ )
-function RoomFilter({ numberOfRooms }: RoomFilterProps) {
const intl = useIntl()
- const methods = useForm({
- defaultValues: {
- allergyFriendly: false,
- petFriendly: false,
- accessibility: false,
- },
+ const methods = useForm>({
+ defaultValues: initialFilterValues,
mode: "all",
reValidateMode: "onChange",
- resolver: zodResolver(roomFilterSchema),
+ resolver: zodResolver(z.object({})),
})
- const formRef = useRef(null)
- const { watch, setValue } = methods
- const petFriendly = watch("petFriendly")
- const allergyFriendly = watch("allergyFriendly")
+ const { watch, getValues, handleSubmit } = methods
+ const petFriendly = watch(RoomPackageCode.PETR)
+ const allergyFriendly = watch(RoomPackageCode.ALLG)
- const onSubmit = (data: RoomFilterFormData) => {
- if (data.petFriendly) {
- setValue("allergyFriendly", false)
- } else if (data.allergyFriendly) {
- setValue("petFriendly", false)
- }
- console.log("Form submitted with data:", data)
- }
+ const submitFilter = useCallback(() => {
+ const data = getValues()
+ onFilter(data)
+ }, [onFilter, getValues])
+
+ useEffect(() => {
+ const subscription = watch(() => handleSubmit(submitFilter)())
+ return () => subscription.unsubscribe()
+ }, [handleSubmit, watch, submitFilter])
return (
@@ -51,45 +62,27 @@ function RoomFilter({ numberOfRooms }: RoomFilterProps) {
{intl.formatMessage({ id: "Room types available" }, { numberOfRooms })}