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 816c937ae..dc5c7a6b5 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx @@ -18,7 +18,7 @@ import { setLang } from "@/i18n/serverContext" import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter" import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate" -import { LangParams, PageArgs } from "@/types/params" +import type { LangParams, PageArgs } from "@/types/params" export default async function SelectRatePage({ params, diff --git a/app/globals.css b/app/globals.css index 7dd0c44fb..a266e9f31 100644 --- a/app/globals.css +++ b/app/globals.css @@ -114,6 +114,8 @@ /* Z-INDEX */ --header-z-index: 11; --menu-overlay-z-index: 11; + --booking-widget-z-index: 10; + --booking-widget-open-z-index: 100; --dialog-z-index: 9; --sidepeek-z-index: 100; --lightbox-z-index: 150; diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx index f3944e7ab..39f186814 100644 --- a/components/BookingWidget/Client.tsx +++ b/components/BookingWidget/Client.tsx @@ -42,11 +42,11 @@ export default function BookingWidgetClient({ const bookingWidgetSearchData: BookingWidgetSearchParams | undefined = searchParams - ? (getFormattedUrlQueryParams(new URLSearchParams(searchParams), { + ? getFormattedUrlQueryParams(new URLSearchParams(searchParams), { adults: "number", age: "number", bed: "number", - }) as BookingWidgetSearchParams) + }) : undefined const getLocationObj = (destination: string): Location | undefined => { @@ -79,6 +79,16 @@ export default function BookingWidgetClient({ ) : undefined + const defaultRoomsData = bookingWidgetSearchData?.room?.map((room) => ({ + adults: room.adults, + child: room.child ?? [], + })) ?? [ + { + adults: 1, + child: [], + }, + ] + const methods = useForm({ defaultValues: { search: selectedLocation?.name ?? "", @@ -96,12 +106,7 @@ export default function BookingWidgetClient({ bookingCode: "", redemption: false, voucher: false, - rooms: bookingWidgetSearchData?.room ?? [ - { - adults: 1, - child: [], - }, - ], + rooms: defaultRoomsData, }, shouldFocusError: false, mode: "all", @@ -158,21 +163,24 @@ export default function BookingWidgetClient({ return ( -
-
-
-
- - +
+ +
+ + +
- ) } diff --git a/components/BookingWidget/MobileToggleButton/button.module.css b/components/BookingWidget/MobileToggleButton/button.module.css index 9a0912b07..1742ee38a 100644 --- a/components/BookingWidget/MobileToggleButton/button.module.css +++ b/components/BookingWidget/MobileToggleButton/button.module.css @@ -6,8 +6,6 @@ display: grid; gap: var(--Spacing-x-one-and-half); padding: var(--Spacing-x2); - position: sticky; - top: 0; z-index: 1; background-color: var(--Base-Surface-Primary-light-Normal); } diff --git a/components/BookingWidget/MobileToggleButton/index.tsx b/components/BookingWidget/MobileToggleButton/index.tsx index c8ef26189..03d8d8f93 100644 --- a/components/BookingWidget/MobileToggleButton/index.tsx +++ b/components/BookingWidget/MobileToggleButton/index.tsx @@ -31,12 +31,6 @@ export default function MobileToggleButton({ const location = useWatch({ name: "location" }) const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" }) - const bookingWidgetMobileRef = useRef(null) - useStickyPosition({ - ref: bookingWidgetMobileRef, - name: StickyElementNameEnum.BOOKING_WIDGET_MOBILE, - }) - const parsedLocation: Location | null = location ? JSON.parse(decodeURIComponent(location)) : null @@ -67,7 +61,6 @@ export default function MobileToggleButton({ className={locationAndDateIsSet ? styles.complete : styles.partial} onClick={openMobileSearch} role="button" - ref={bookingWidgetMobileRef} > {!locationAndDateIsSet && ( <> diff --git a/components/BookingWidget/bookingWidget.module.css b/components/BookingWidget/bookingWidget.module.css index f0dec979d..07f4880a4 100644 --- a/components/BookingWidget/bookingWidget.module.css +++ b/components/BookingWidget/bookingWidget.module.css @@ -1,60 +1,63 @@ -.containerDesktop, -.containerMobile, -.close { - display: none; +.wrapper { + position: sticky; + z-index: var(--booking-widget-z-index); } -@media screen and (max-width: 767px) { - .containerMobile { - background-color: var(--UI-Input-Controls-Surface-Normal); - bottom: -100%; - display: grid; - gap: var(--Spacing-x3); - grid-template-rows: 36px 1fr; - height: calc(100dvh - 20px); - padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7); - position: fixed; - transition: bottom 300ms ease; - width: 100%; - z-index: 10000; - border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0; - } +.formContainer { + display: grid; + grid-template-rows: auto 1fr; + background-color: var(--UI-Input-Controls-Surface-Normal); + border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0; + gap: var(--Spacing-x3); + height: calc(100dvh - 20px); + width: 100%; + padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7); + position: fixed; + bottom: -100%; + transition: bottom 300ms ease; +} - .containerMobile[data-open="true"] { - bottom: 0; - } +.wrapper[data-open="true"] { + z-index: var(--booking-widget-open-z-index); +} - .close { - background: none; - border: none; - cursor: pointer; - justify-self: flex-end; - } +.wrapper[data-open="true"] .formContainer { + bottom: 0; +} - .containerMobile[data-open="true"] + .backdrop { - background-color: rgba(0, 0, 0, 0.4); - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 1000; - } +.close { + background: none; + border: none; + cursor: pointer; + justify-self: flex-end; + padding: 0; +} + +.wrapper[data-open="true"] + .backdrop { + background-color: rgba(0, 0, 0, 0.4); + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: calc(var(--booking-widget-open-z-index) - 1); } @media screen and (min-width: 768px) { - .containerDesktop { - display: block; - box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05); - position: sticky; + .wrapper { top: 0; - z-index: 10; - background-color: var(--Base-Surface-Primary-light-Normal); } -} -@media screen and (min-width: 1367px) { - .container { - z-index: 9; + .formContainer { + display: block; + background-color: var(--Base-Surface-Primary-light-Normal); + box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05); + height: auto; + position: static; + padding: 0; + } + + .close { + display: none; } } diff --git a/components/DatePicker/Screen/mobile.module.css b/components/DatePicker/Screen/mobile.module.css index ef3f97ca0..5ee03bde5 100644 --- a/components/DatePicker/Screen/mobile.module.css +++ b/components/DatePicker/Screen/mobile.module.css @@ -1,5 +1,5 @@ .container { - --header-height: 68px; + --header-height: 72px; --sticky-button-height: 120px; display: grid; @@ -11,12 +11,10 @@ } .header { - align-self: flex-start; + align-self: flex-end; background-color: var(--Main-Grey-White); - display: grid; grid-area: header; - grid-template-columns: 1fr 24px; - padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2); + padding: var(--Spacing-x3) var(--Spacing-x2); position: sticky; top: 0; z-index: 10; diff --git a/components/DatePicker/date-picker.module.css b/components/DatePicker/date-picker.module.css index ee9034648..985c9d63c 100644 --- a/components/DatePicker/date-picker.module.css +++ b/components/DatePicker/date-picker.module.css @@ -38,7 +38,7 @@ .hideWrapper { bottom: 0; left: 0; - overflow: auto; + overflow: hidden; position: fixed; right: 0; top: 100%; diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx index dc7306fca..6f44da9c9 100644 --- a/components/Forms/BookingWidget/FormContent/index.tsx +++ b/components/Forms/BookingWidget/FormContent/index.tsx @@ -6,7 +6,6 @@ import { dt } from "@/lib/dt" import DatePicker from "@/components/DatePicker" import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker" -import GuestsRoomsProvider from "@/components/GuestsRoomsPicker/Provider/GuestsRoomsProvider" import { SearchIcon } from "@/components/Icons" import SkeletonShimmer from "@/components/SkeletonShimmer" import Button from "@/components/TempDesignSystem/Button" @@ -26,12 +25,10 @@ export default function FormContent({ const intl = useIntl() const selectedDate = useWatch({ name: "date" }) - const rooms = intl.formatMessage({ id: "Guests & Rooms" }) + const roomsLabel = intl.formatMessage({ id: "Guests & Rooms" }) const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days") - const selectedGuests = useWatch({ name: "rooms" }) - return ( <>
@@ -51,12 +48,10 @@ export default function FormContent({
- - - +
diff --git a/components/Forms/BookingWidget/schema.ts b/components/Forms/BookingWidget/schema.ts index 973ab6ad6..9d0c8f247 100644 --- a/components/Forms/BookingWidget/schema.ts +++ b/components/Forms/BookingWidget/schema.ts @@ -1,16 +1,37 @@ import { z } from "zod" +import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums" import type { Location } from "@/types/trpc/routers/hotel/locations" -export const guestRoomSchema = z.object({ - adults: z.number().default(1), - child: z.array( - z.object({ - age: z.number().nonnegative(), - bed: z.number(), - }) - ), -}) +export const guestRoomSchema = z + .object({ + adults: z.number().default(1), + child: z + .array( + z.object({ + age: z.number().min(0, "Age is required"), + bed: z.number().min(0, "Bed choice is required"), + }) + ) + .default([]), + }) + .superRefine((value, ctx) => { + const childrenInAdultsBed = value.child.filter( + (c) => c.bed === ChildBedMapEnum.IN_ADULTS_BED + ) + if (value.adults < childrenInAdultsBed.length) { + const lastAdultBedIndex = value.child + .map((c) => c.bed) + .lastIndexOf(ChildBedMapEnum.IN_ADULTS_BED) + + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: + "You cannot have more children in adults bed than adults in the room", + path: ["child", lastAdultBedIndex], + }) + } + }) export const guestRoomsSchema = z.array(guestRoomSchema) diff --git a/components/GuestsRoomsPicker/AdultSelector/index.tsx b/components/GuestsRoomsPicker/AdultSelector/index.tsx index b24d5f681..008037300 100644 --- a/components/GuestsRoomsPicker/AdultSelector/index.tsx +++ b/components/GuestsRoomsPicker/AdultSelector/index.tsx @@ -3,54 +3,32 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { useGuestsRoomsStore } from "@/stores/guests-rooms" - import Caption from "@/components/TempDesignSystem/Text/Caption" import Counter from "../Counter" import styles from "./adult-selector.module.css" -import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums" -import { - AdultSelectorProps, - Child, -} from "@/types/components/bookingWidget/guestsRoomsPicker" +import { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker" -export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) { +export default function AdultSelector({ + roomIndex = 0, + currentAdults, +}: SelectorProps) { + const name = `rooms.${roomIndex}.adults` const intl = useIntl() const adultsLabel = intl.formatMessage({ id: "Adults" }) const { setValue } = useFormContext() - const { adults, child, childrenInAdultsBed } = useGuestsRoomsStore( - (state) => state.rooms[roomIndex] - ) - const increaseAdults = useGuestsRoomsStore((state) => state.increaseAdults) - const decreaseAdults = useGuestsRoomsStore((state) => state.decreaseAdults) - function increaseAdultsCount(roomIndex: number) { - if (adults < 6) { - increaseAdults(roomIndex) - setValue(`rooms.${roomIndex}.adults`, adults + 1) + function increaseAdultsCount() { + if (currentAdults < 6) { + setValue(name, currentAdults + 1) } } - function decreaseAdultsCount(roomIndex: number) { - if (adults > 1) { - decreaseAdults(roomIndex) - setValue(`rooms.${roomIndex}.adults`, adults - 1) - if (childrenInAdultsBed > adults) { - const toUpdateIndex = child.findIndex( - (child: Child) => child.bed == ChildBedMapEnum.IN_ADULTS_BED - ) - if (toUpdateIndex != -1) { - setValue( - `rooms.${roomIndex}.children.${toUpdateIndex}.bed`, - child[toUpdateIndex].age < 3 - ? ChildBedMapEnum.IN_CRIB - : ChildBedMapEnum.IN_EXTRA_BED - ) - } - } + function decreaseAdultsCount() { + if (currentAdults > 1) { + setValue(name, currentAdults - 1) } } @@ -60,15 +38,11 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) { {adultsLabel} { - decreaseAdultsCount(roomIndex) - }} - handleOnIncrease={() => { - increaseAdultsCount(roomIndex) - }} - disableDecrease={adults == 1} - disableIncrease={adults == 6} + count={currentAdults} + handleOnDecrease={decreaseAdultsCount} + handleOnIncrease={increaseAdultsCount} + disableDecrease={currentAdults == 1} + disableIncrease={currentAdults == 6} />
) diff --git a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx index d8e541eb3..b5a34c168 100644 --- a/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx +++ b/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx @@ -3,8 +3,6 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { useGuestsRoomsStore } from "@/stores/guests-rooms" - import { ErrorCircleIcon } from "@/components/Icons" import Select from "@/components/TempDesignSystem/Select" import Caption from "@/components/TempDesignSystem/Text/Caption" @@ -17,55 +15,35 @@ import { ChildInfoSelectorProps, } from "@/types/components/bookingWidget/guestsRoomsPicker" +const ageList = [...Array(13)].map((_, i) => ({ + label: i.toString(), + value: i, +})) + export default function ChildInfoSelector({ child = { age: -1, bed: -1 }, + childrenInAdultsBed, + adults, index = 0, roomIndex = 0, }: ChildInfoSelectorProps) { + const ageFieldName = `rooms.${roomIndex}.child.${index}.age` + const bedFieldName = `rooms.${roomIndex}.child.${index}.bed` const intl = useIntl() const ageLabel = intl.formatMessage({ id: "Age" }) - const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" }) const bedLabel = intl.formatMessage({ id: "Bed" }) - const { setValue } = useFormContext() - const { adults, childrenInAdultsBed } = useGuestsRoomsStore( - (state) => state.rooms[roomIndex] - ) - const { - isValidated, - updateChildAge, - updateChildBed, - increaseChildInAdultsBed, - decreaseChildInAdultsBed, - } = useGuestsRoomsStore((state) => ({ - isValidated: state.isValidated, - updateChildAge: state.updateChildAge, - updateChildBed: state.updateChildBed, - increaseChildInAdultsBed: state.increaseChildInAdultsBed, - decreaseChildInAdultsBed: state.decreaseChildInAdultsBed, - })) - - const ageList = Array.from(Array(13).keys()).map((age) => ({ - label: `${age}`, - value: age, - })) - - function updateSelectedAge(age: number) { - updateChildAge(age, roomIndex, index) - setValue(`rooms.${roomIndex}.child.${index}.age`, age, { - shouldValidate: true, - }) - const availableBedTypes = getAvailableBeds(age) - updateSelectedBed(availableBedTypes[0].value) - } + const errorMessage = intl.formatMessage({ id: "Child age is required" }) + const { setValue, formState, register, trigger } = useFormContext() function updateSelectedBed(bed: number) { - if (bed == ChildBedMapEnum.IN_ADULTS_BED) { - increaseChildInAdultsBed(roomIndex) - } else if (child.bed == ChildBedMapEnum.IN_ADULTS_BED) { - decreaseChildInAdultsBed(roomIndex) - } - updateChildBed(bed, roomIndex, index) setValue(`rooms.${roomIndex}.child.${index}.bed`, bed) + trigger() + } + + function updateSelectedAge(age: number) { + setValue(`rooms.${roomIndex}.child.${index}.age`, age) + const availableBedTypes = getAvailableBeds(age) + updateSelectedBed(availableBedTypes[0].value) } const allBedTypes: ChildBed[] = [ @@ -97,6 +75,12 @@ export default function ChildInfoSelector({ return availableBedTypes } + //@ts-expect-error: formState is typed with FormValues + const roomErrors = formState.errors.rooms?.[roomIndex]?.child?.[index] + + const ageError = roomErrors?.age + const bedError = roomErrors?.bed + return ( <>
@@ -110,13 +94,15 @@ export default function ChildInfoSelector({ onSelect={(key) => { updateSelectedAge(key as number) }} - name={`rooms.${roomIndex}.child.${index}.age`} placeholder={ageLabel} maxHeight={150} + {...register(ageFieldName, { + required: true, + })} />
- {child.age !== -1 ? ( + {child.age >= 0 ? ( void - decreaseAdults: (roomIndex: number) => void - increaseChildren: (roomIndex: number) => void - decreaseChildren: (roomIndex: number) => Child[] - updateChildAge: (age: number, roomIndex: number, childIndex: number) => void - updateChildBed: (bed: number, roomIndex: number, childIndex: number) => void - increaseChildInAdultsBed: (roomIndex: number) => void - decreaseChildInAdultsBed: (roomIndex: number) => void - increaseRoom: () => void - decreaseRoom: (roomIndex: number) => void - setIsValidated: (isValidated: boolean) => void -} - -export function validateBedTypes(data: extendedGuestsRoom[]) { - data.forEach((room) => { - room.child.forEach((child) => { - const allowedBedTypes: number[] = [] - if (child.age <= 5 && room.adults >= room.childrenInAdultsBed) { - allowedBedTypes.push(ChildBedMapEnum.IN_ADULTS_BED) - } else if (child.age <= 5) { - room.childrenInAdultsBed = room.childrenInAdultsBed - 1 - } - if (child.age < 3) { - allowedBedTypes.push(ChildBedMapEnum.IN_CRIB) - } - if (child.age > 2) { - allowedBedTypes.push(ChildBedMapEnum.IN_EXTRA_BED) - } - if (!allowedBedTypes.includes(child.bed)) { - child.bed = allowedBedTypes[0] - } - }) - }) -} - -export function initGuestsRoomsState(initData?: GuestsRoom[]) { - const isBrowser = typeof window !== "undefined" - const sessionData = isBrowser - ? sessionStorage.getItem(SESSION_STORAGE_KEY) - : null - - const defaultGuestsData: extendedGuestsRoom = { - adults: 1, - child: [], - childrenInAdultsBed: 0, - } - const defaultData: GuestsRoomsState = { - rooms: [defaultGuestsData], - adultCount: 1, - childCount: 0, - isValidated: false, - } - - let inputData: GuestsRoomsState = defaultData - if (sessionData) { - inputData = JSON.parse(sessionData) - } - if (initData) { - inputData.rooms = initData.map((room) => { - const childrenInAdultsBed = room.child - ? room.child.reduce((acc, child) => { - acc = acc + (child.bed == ChildBedMapEnum.IN_ADULTS_BED ? 1 : 0) - return acc - }, 0) - : 0 - return { ...defaultGuestsData, ...room, childrenInAdultsBed } - }) as extendedGuestsRoom[] - - inputData.adultCount = initData.reduce((acc, room) => { - acc = acc + room.adults - return acc - }, 0) - inputData.childCount = initData.reduce((acc, room) => { - acc = acc + room.child?.length - return acc - }, 0) - validateBedTypes(inputData.rooms) - } - - return create()((set, get) => ({ - ...inputData, - increaseAdults: (roomIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms[roomIndex].adults = state.rooms[roomIndex].adults + 1 - state.adultCount = state.adultCount + 1 - }) - ), - decreaseAdults: (roomIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms[roomIndex].adults = state.rooms[roomIndex].adults - 1 - state.adultCount = state.adultCount - 1 - if ( - state.rooms[roomIndex].childrenInAdultsBed > - state.rooms[roomIndex].adults - ) { - const toUpdateIndex = state.rooms[roomIndex].child.findIndex( - (child) => child.bed == ChildBedMapEnum.IN_ADULTS_BED - ) - if (toUpdateIndex != -1) { - state.rooms[roomIndex].child[toUpdateIndex].bed = - state.rooms[roomIndex].child[toUpdateIndex].age < 3 - ? ChildBedMapEnum.IN_CRIB - : ChildBedMapEnum.IN_EXTRA_BED - state.rooms[roomIndex].childrenInAdultsBed = - state.rooms[roomIndex].adults - } - } - }) - ), - increaseChildren: (roomIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms[roomIndex].child.push({ - age: -1, - bed: -1, - }) - state.childCount = state.childCount + 1 - }) - ), - decreaseChildren: (roomIndex) => { - set( - produce((state: GuestsRoomsState) => { - const roomChildren = state.rooms[roomIndex].child - if ( - roomChildren.length && - roomChildren[roomChildren.length - 1].bed == - ChildBedMapEnum.IN_ADULTS_BED - ) { - state.rooms[roomIndex].childrenInAdultsBed = - state.rooms[roomIndex].childrenInAdultsBed - 1 - } - state.rooms[roomIndex].child.pop() - state.childCount = state.childCount - 1 - }) - ) - return get().rooms[roomIndex].child - }, - updateChildAge: (age, roomIndex, childIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms[roomIndex].child[childIndex].age = age - }) - ), - updateChildBed: (bed, roomIndex, childIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms[roomIndex].child[childIndex].bed = bed - }) - ), - increaseChildInAdultsBed: (roomIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms[roomIndex].childrenInAdultsBed = - state.rooms[roomIndex].childrenInAdultsBed + 1 - }) - ), - decreaseChildInAdultsBed: (roomIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms[roomIndex].childrenInAdultsBed = - state.rooms[roomIndex].childrenInAdultsBed - 1 - }) - ), - increaseRoom: () => - set( - produce((state: GuestsRoomsState) => { - state.rooms.push({ - adults: 1, - child: [], - childrenInAdultsBed: 0, - }) - }) - ), - decreaseRoom: (roomIndex) => - set( - produce((state: GuestsRoomsState) => { - state.rooms.splice(roomIndex, 1) - }) - ), - setIsValidated: (isValidated) => set(() => ({ isValidated })), - })) -} - -export type GuestsRoomsStore = ReturnType - -export const GuestsRoomsContext = createContext(null) - -export const useGuestsRoomsStore = ( - selector: (store: GuestsRoomsStoreState) => T -): T => { - const guestsRoomsContextStore = useContext(GuestsRoomsContext) - - if (!guestsRoomsContextStore) { - throw new Error( - `guestsRoomsContextStore must be used within GuestsRoomsContextProvider` - ) - } - - return useStore(guestsRoomsContextStore, selector) -} diff --git a/stores/sticky-position.ts b/stores/sticky-position.ts index 99272ab62..93328b9e9 100644 --- a/stores/sticky-position.ts +++ b/stores/sticky-position.ts @@ -3,7 +3,6 @@ import { create } from "zustand" export enum StickyElementNameEnum { SITEWIDE_ALERT = "SITEWIDE_ALERT", BOOKING_WIDGET = "BOOKING_WIDGET", - BOOKING_WIDGET_MOBILE = "BOOKING_WIDGET_MOBILE", HOTEL_TAB_NAVIGATION = "HOTEL_TAB_NAVIGATION", HOTEL_STATIC_MAP = "HOTEL_STATIC_MAP", } @@ -32,7 +31,6 @@ interface StickyStore { const priorityMap: Record = { [StickyElementNameEnum.SITEWIDE_ALERT]: 1, [StickyElementNameEnum.BOOKING_WIDGET]: 2, - [StickyElementNameEnum.BOOKING_WIDGET_MOBILE]: 2, [StickyElementNameEnum.HOTEL_TAB_NAVIGATION]: 3, [StickyElementNameEnum.HOTEL_STATIC_MAP]: 3, diff --git a/types/components/bookingWidget/guestsRoomsPicker.ts b/types/components/bookingWidget/guestsRoomsPicker.ts index 61e8f7d7a..a075c9f8d 100644 --- a/types/components/bookingWidget/guestsRoomsPicker.ts +++ b/types/components/bookingWidget/guestsRoomsPicker.ts @@ -13,26 +13,23 @@ export type GuestsRoom = { child: Child[] } -export interface GuestsRoomsPickerProps { - closePicker: () => void -} - export type GuestsRoomPickerProps = { index: number } -export type AdultSelectorProps = { - roomIndex: number -} - -export type ChildSelectorProps = { +export type SelectorProps = { roomIndex: number + currentAdults: number + currentChildren: Child[] + childrenInAdultsBed: number } export type ChildInfoSelectorProps = { child: Child + adults: number index: number roomIndex: number + childrenInAdultsBed: number } export interface CounterProps { diff --git a/types/components/form/filterChip.ts b/types/components/form/filterChip.ts index 3ff40673d..062d398f4 100644 --- a/types/components/form/filterChip.ts +++ b/types/components/form/filterChip.ts @@ -11,6 +11,7 @@ export interface FilterChipProps { value?: string selected?: boolean disabled?: boolean + hasTooltip?: boolean } export type FilterChipCheckboxProps = Omit diff --git a/types/components/hotelReservation/selectRate/roomSelection.ts b/types/components/hotelReservation/selectRate/roomSelection.ts index 3e3a6117e..63b17ed6f 100644 --- a/types/components/hotelReservation/selectRate/roomSelection.ts +++ b/types/components/hotelReservation/selectRate/roomSelection.ts @@ -2,6 +2,7 @@ import type { RoomData } from "@/types/hotel" import type { SafeUser } from "@/types/user" import type { RoomsAvailability } from "@/server/routers/hotels/output" import type { RoomPackageCodes, RoomPackageData } from "./roomFilter" +import type { Rate } from "./selectRate" export interface RoomSelectionProps { roomsAvailability: RoomsAvailability @@ -9,4 +10,13 @@ export interface RoomSelectionProps { user: SafeUser packages: RoomPackageData selectedPackages: RoomPackageCodes[] + setRateSummary: (rateSummary: Rate) => void + rateSummary: Rate | null +} + +export interface SelectRateProps { + roomsAvailability: RoomsAvailability + roomCategories: RoomData[] + user: SafeUser + packages: RoomPackageData }