feat(sW-718) use convertSearchParamsToObj instead of new util
This commit is contained in:
@@ -10,12 +10,12 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|||||||
import { useRateSummary } from "@/hooks/selectRate/useRateSummary"
|
import { useRateSummary } from "@/hooks/selectRate/useRateSummary"
|
||||||
import { useRoomFiltering } from "@/hooks/selectRate/useRoomFiltering"
|
import { useRoomFiltering } from "@/hooks/selectRate/useRoomFiltering"
|
||||||
import { trackLowestRoomPrice } from "@/utils/tracking"
|
import { trackLowestRoomPrice } from "@/utils/tracking"
|
||||||
import { convertObjToSearchParams } from "@/utils/url"
|
import { convertObjToSearchParams, convertSearchParamsToObj } from "@/utils/url"
|
||||||
|
|
||||||
import RateSummary from "../RateSummary"
|
import RateSummary from "../RateSummary"
|
||||||
import { RoomSelectionPanel } from "../RoomSelectionPanel"
|
import { RoomSelectionPanel } from "../RoomSelectionPanel"
|
||||||
import SelectedRoomPanel from "../SelectedRoomPanel"
|
import SelectedRoomPanel from "../SelectedRoomPanel"
|
||||||
import { filterDuplicateRoomTypesByLowestPrice, parseRoomParams } from "./utils"
|
import { filterDuplicateRoomTypesByLowestPrice } from "./utils"
|
||||||
|
|
||||||
import styles from "./rooms.module.css"
|
import styles from "./rooms.module.css"
|
||||||
|
|
||||||
@@ -24,7 +24,10 @@ import {
|
|||||||
RoomPackageCodeEnum,
|
RoomPackageCodeEnum,
|
||||||
} from "@/types/components/hotelReservation/selectRate/roomFilter"
|
} from "@/types/components/hotelReservation/selectRate/roomFilter"
|
||||||
import type { SelectRateProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
|
import type { SelectRateProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
|
||||||
import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
|
import type {
|
||||||
|
Rate,
|
||||||
|
SelectRateSearchParams,
|
||||||
|
} from "@/types/components/hotelReservation/selectRate/selectRate"
|
||||||
import type { RoomConfiguration } from "@/server/routers/hotels/output"
|
import type { RoomConfiguration } from "@/server/routers/hotels/output"
|
||||||
|
|
||||||
export default function Rooms({
|
export default function Rooms({
|
||||||
@@ -45,18 +48,23 @@ export default function Rooms({
|
|||||||
const { modifyRate, selectedRates, setSelectedRates } =
|
const { modifyRate, selectedRates, setSelectedRates } =
|
||||||
useRateSelectionStore()
|
useRateSelectionStore()
|
||||||
|
|
||||||
const searchedRoomsAndGuests = useMemo(
|
const bookingWidgetSearchData = useMemo(
|
||||||
() => parseRoomParams(searchParams),
|
() =>
|
||||||
|
convertSearchParamsToObj<SelectRateSearchParams>(
|
||||||
|
Object.fromEntries(searchParams)
|
||||||
|
),
|
||||||
[searchParams]
|
[searchParams]
|
||||||
)
|
)
|
||||||
|
|
||||||
const isMultipleRooms = searchedRoomsAndGuests.length > 1
|
const isMultipleRooms = bookingWidgetSearchData.rooms.length > 1
|
||||||
|
|
||||||
const intl = useIntl()
|
const intl = useIntl()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSelectedRates(new Array(searchedRoomsAndGuests.length).fill(undefined))
|
setSelectedRates(
|
||||||
}, [setSelectedRates, searchedRoomsAndGuests.length])
|
new Array(bookingWidgetSearchData.rooms.length).fill(undefined)
|
||||||
|
)
|
||||||
|
}, [setSelectedRates, bookingWidgetSearchData.rooms.length])
|
||||||
|
|
||||||
const visibleRooms: RoomConfiguration[] = useMemo(() => {
|
const visibleRooms: RoomConfiguration[] = useMemo(() => {
|
||||||
const deduped = filterDuplicateRoomTypesByLowestPrice(
|
const deduped = filterDuplicateRoomTypesByLowestPrice(
|
||||||
@@ -110,7 +118,7 @@ export default function Rooms({
|
|||||||
useRoomFiltering({ roomsAvailability })
|
useRoomFiltering({ roomsAvailability })
|
||||||
|
|
||||||
const rateSummary = useRateSummary({
|
const rateSummary = useRateSummary({
|
||||||
searchedRoomsAndGuests,
|
searchedRoomsAndGuests: bookingWidgetSearchData.rooms,
|
||||||
selectedRates,
|
selectedRates,
|
||||||
getFilteredRooms,
|
getFilteredRooms,
|
||||||
selectedPackagesByRoom,
|
selectedPackagesByRoom,
|
||||||
@@ -209,7 +217,7 @@ export default function Rooms({
|
|||||||
return (
|
return (
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
{isMultipleRooms ? (
|
{isMultipleRooms ? (
|
||||||
searchedRoomsAndGuests.map((room, index) => (
|
bookingWidgetSearchData.rooms.map((room, index) => (
|
||||||
<div key={index} className={styles.roomContainer}>
|
<div key={index} className={styles.roomContainer}>
|
||||||
{selectedRates[index] === undefined && (
|
{selectedRates[index] === undefined && (
|
||||||
<Subtitle>
|
<Subtitle>
|
||||||
@@ -220,13 +228,13 @@ export default function Rooms({
|
|||||||
,{" "}
|
,{" "}
|
||||||
{intl.formatMessage(
|
{intl.formatMessage(
|
||||||
{
|
{
|
||||||
id: room.children?.length
|
id: room.childrenInRoom?.length
|
||||||
? "{adults} adults, {children} children"
|
? "{adults} adults, {children} children"
|
||||||
: "{adults} adults",
|
: "{adults} adults",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
adults: room.adults,
|
adults: room.adults,
|
||||||
children: room.children?.length,
|
children: room.childrenInRoom?.length,
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
</Subtitle>
|
</Subtitle>
|
||||||
|
|||||||
@@ -104,54 +104,3 @@ export function filterDuplicateRoomTypesByLowestPrice(
|
|||||||
|
|
||||||
return Array.from(roomMap.values())
|
return Array.from(roomMap.values())
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Parse the room params from the search params.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export function parseRoomParams(searchParams: URLSearchParams): RoomParam[] {
|
|
||||||
const rooms: RoomParam[] = []
|
|
||||||
|
|
||||||
// Collect all param keys and sort them to ensure correct order
|
|
||||||
const paramKeys = Array.from(searchParams.keys()).sort()
|
|
||||||
|
|
||||||
for (const key of paramKeys) {
|
|
||||||
const roomRegex = /^room\[(\d+)\]\.(.+)/
|
|
||||||
const roomMatch = roomRegex.exec(key)
|
|
||||||
if (!roomMatch) continue
|
|
||||||
|
|
||||||
const [, roomIndex, param] = roomMatch
|
|
||||||
const value = searchParams.get(key)
|
|
||||||
if (!value) continue
|
|
||||||
|
|
||||||
// Initialize room if it doesn't exist
|
|
||||||
if (!rooms[Number(roomIndex)]) rooms[Number(roomIndex)] = { adults: 1 }
|
|
||||||
|
|
||||||
// Handle adults
|
|
||||||
if (param === "adults") {
|
|
||||||
rooms[Number(roomIndex)].adults = Number(value)
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle children
|
|
||||||
const childRegex = /child\[(\d+)\]\.(.+)/
|
|
||||||
const childMatch = childRegex.exec(param)
|
|
||||||
|
|
||||||
if (childMatch) {
|
|
||||||
const [, childIndex, childParam] = childMatch
|
|
||||||
const room = rooms[Number(roomIndex)]
|
|
||||||
if (!room.children) room.children = []
|
|
||||||
|
|
||||||
// Set child properties
|
|
||||||
if (childParam === "age" && room.children) {
|
|
||||||
room.children[Number(childIndex)] = {
|
|
||||||
age: Number(value),
|
|
||||||
bed: Number(value),
|
|
||||||
}
|
|
||||||
} else if (childParam === "bed" && room.children?.[Number(childIndex)])
|
|
||||||
room.children[Number(childIndex)].bed = Number(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return rooms
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user