scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: url management in hotel reservation flow

Browse Source
This commit is contained in:
Christel Westerberg
2025-01-13 14:26:38 +01:00
parent 23ff0970e9
commit b2935114e3
48 changed files with 407 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/HotelReservation/BookingConfirmation/index.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import TrackingSDK from "@/components/TrackingSDK"
import { getLang } from "@/i18n/serverContext"
import { invertedBedTypeMap } from "../SelectRate/RoomSelection/utils"
import { invertedBedTypeMap } from "../utils"
import Confirmation from "./Confirmation"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx
+4 -4
View File
@@ -5,9 +5,9 @@ import { useEffect } from "react"
import { detailsStorageName } from "@/stores/enter-details"
import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
import LoadingSpinner from "@/components/LoadingSpinner"
import { trackPaymentEvent } from "@/utils/tracking"
import { convertObjToSearchParams } from "@/utils/url"
import type { PersistedState } from "@/types/stores/enter-details"
@@ -29,7 +29,7 @@ export default function PaymentCallback({
if (bookingData) {
const detailsStorage: PersistedState = JSON.parse(bookingData)
const searchParams = createQueryParamsForEnterDetails(
const searchParams = convertObjToSearchParams(
detailsStorage.booking,
searchObject
)
@@ -37,13 +37,13 @@ export default function PaymentCallback({
if (status === "cancel") {
trackPaymentEvent({
event: "paymentCancel",
hotelId: detailsStorage.booking.hotel,
hotelId: detailsStorage.booking.hotelId,
})
}
if (status === "error") {
trackPaymentEvent({
event: "paymentFail",
hotelId: detailsStorage.booking.hotel,
hotelId: detailsStorage.booking.hotelId,
errorMessage,
})
}
components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
+10 -10
View File
@@ -33,7 +33,7 @@ import { usePaymentFailedToast } from "@/hooks/booking/usePaymentFailedToast"
import useLang from "@/hooks/useLang"
import { trackPaymentEvent } from "@/utils/tracking"
import { bedTypeMap } from "../../SelectRate/RoomSelection/utils"
import { bedTypeMap } from "../../utils"
import PriceChangeDialog from "../PriceChangeDialog"
import GuaranteeDetails from "./GuaranteeDetails"
import PaymentOption from "./PaymentOption"
@@ -87,7 +87,7 @@ export default function PaymentClient({
newPrice: number
} | null>()
const { toDate, fromDate, rooms, hotel } = booking
const { toDate, fromDate, rooms, hotelId } = booking
usePaymentFailedToast()
@@ -171,14 +171,14 @@ export default function PaymentClient({
trackPaymentEvent({
event: "paymentFail",
hotelId: hotel,
hotelId,
method: currentPaymentMethod,
isSavedCreditCard,
smsEnable,
errorMessage,
})
},
[intl, methods, savedCreditCards, hotel]
[intl, methods, savedCreditCards, hotelId]
)
useEffect(() => {
@@ -226,7 +226,7 @@ export default function PaymentClient({
trackPaymentEvent({
event: "paymentAttemptStart",
hotelId: hotel,
hotelId,
method: paymentMethod,
isSavedCreditCard: !!savedCreditCard,
smsEnable: data.smsConfirmation,
@@ -234,7 +234,7 @@ export default function PaymentClient({
initiateBooking.mutate({
language: lang,
hotelId: hotel,
hotelId,
checkInDate: fromDate,
checkOutDate: toDate,
rooms: rooms.map((room) => ({
@@ -294,7 +294,7 @@ export default function PaymentClient({
savedCreditCards,
lang,
initiateBooking,
hotel,
hotelId,
fromDate,
toDate,
rooms,
@@ -347,7 +347,7 @@ export default function PaymentClient({
]
}
cardNumber={savedCreditCard.truncatedNumber}
hotelId={hotel}
hotelId={hotelId}
/>
))}
</div>
@@ -364,7 +364,7 @@ export default function PaymentClient({
name="paymentMethod"
value={PaymentMethodEnum.card}
label={intl.formatMessage({ id: "Credit card" })}
hotelId={hotel}
hotelId={hotelId}
/>
{availablePaymentOptions.map((paymentMethod) => (
<PaymentOption
@@ -374,7 +374,7 @@ export default function PaymentClient({
label={
PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
}
hotelId={hotel}
hotelId={hotelId}
/>
))}
</div>
components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx
+9 -7
View File
@@ -9,6 +9,7 @@ import {
getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
import TrackingSDK from "@/components/TrackingSDK"
import { getLang } from "@/i18n/serverContext"
import { safeTry } from "@/utils/safeTry"
import { getHotelPins } from "../../HotelCardDialogListing/utils"
@@ -33,19 +34,20 @@ function isValidHotelData(hotel: NullableHotelData): hotel is HotelData {
export async function SelectHotelMapContainer({
city,
searchParams,
selectHotelParams,
adultsInRoom,
childrenInRoom,
child,
}: SelectHotelMapContainerProps) {
const lang = getLang()
const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
const fetchAvailableHotelsPromise = safeTry(
fetchAvailableHotels({
cityId: city.id,
roomStayStartDate: searchParams.fromDate,
roomStayEndDate: searchParams.toDate,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom,
children: childrenInRoom,
})
@@ -62,12 +64,12 @@ export async function SelectHotelMapContainer({
hotel: { address: hotels?.[0]?.hotelData?.address.streetAddress },
})
const arrivalDate = new Date(searchParams.fromDate)
const departureDate = new Date(searchParams.toDate)
const arrivalDate = new Date(selectHotelParams.fromDate)
const departureDate = new Date(selectHotelParams.toDate)
const pageTrackingData: TrackingSDKPageData = {
pageId: "select-hotel",
domainLanguage: searchParams.lang as Lang,
domainLanguage: lang,
channel: TrackingChannelEnum["hotelreservation"],
pageName: "hotelreservation|select-hotel|mapview",
siteSections: "hotelreservation|select-hotel|mapview",
@@ -77,7 +79,7 @@ export async function SelectHotelMapContainer({
const hotelsTrackingData: TrackingSDKHotelInfo = {
availableResults: validHotels.length,
searchTerm: searchParams.city,
searchTerm: selectHotelParams.city,
arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
departureDate: format(departureDate, "yyyy-MM-dd"),
noOfAdults: adultsInRoom,
components/HotelReservation/SelectHotel/index.tsx
+13 -11
View File
@@ -20,6 +20,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import TrackingSDK from "@/components/TrackingSDK"
import { getIntl } from "@/i18n"
import { safeTry } from "@/utils/safeTry"
import { convertObjToSearchParams } from "@/utils/url"
import HotelCardListing from "../HotelCardListing"
import HotelCount from "./HotelCount"
@@ -46,7 +47,6 @@ export default async function SelectHotel({
}: SelectHotelProps) {
const {
selectHotelParams,
searchParams,
adultsInRoom,
childrenInRoom,
childrenInRoomArray,
@@ -57,8 +57,8 @@ export default async function SelectHotel({
const hotelsPromise = safeTry(
fetchAvailableHotels({
cityId: city.id,
roomStayStartDate: searchParams.fromDate,
roomStayEndDate: searchParams.toDate,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom,
children: childrenInRoom,
})
@@ -66,8 +66,8 @@ export default async function SelectHotel({
const [hotels] = await hotelsPromise
const arrivalDate = new Date(searchParams.fromDate)
const departureDate = new Date(searchParams.toDate)
const arrivalDate = new Date(selectHotelParams.fromDate)
const departureDate = new Date(selectHotelParams.toDate)
const isCityWithCountry = (city: any): city is { country: string } =>
"country" in city
@@ -76,6 +76,8 @@ export default async function SelectHotel({
hotels?.filter((hotel): hotel is HotelData => hotel !== null) || []
const filterList = getFiltersFromHotels(validHotels)
const searchParams = convertObjToSearchParams(selectHotelParams)
const breadcrumbs = [
{
title: intl.formatMessage({ id: "Home" }),
@@ -89,7 +91,7 @@ export default async function SelectHotel({
},
{
title: intl.formatMessage({ id: "Select hotel" }),
href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
href: `${selectHotel(params.lang)}/?${searchParams.toString()}`,
uid: "select-hotel",
},
{
@@ -112,7 +114,7 @@ export default async function SelectHotel({
const hotelsTrackingData: TrackingSDKHotelInfo = {
availableResults: validHotels.length,
searchTerm: searchParams.city,
searchTerm: selectHotelParams.city,
arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
departureDate: format(departureDate, "yyyy-MM-dd"),
noOfAdults: adultsInRoom,
@@ -158,13 +160,13 @@ export default async function SelectHotel({
>
<div className={styles.mapContainer}>
<StaticMap
city={searchParams.city}
city={selectHotelParams.city}
country={isCityWithCountry(city) ? city.country : undefined}
width={340}
height={180}
zoomLevel={11}
mapType="roadmap"
altText={`Map of ${searchParams.city} city center`}
altText={`Map of ${selectHotelParams.city} city center`}
/>
<Button wrapping size="medium" intent="text" theme="base">
{intl.formatMessage({ id: "See map" })}
@@ -179,12 +181,12 @@ export default async function SelectHotel({
) : (
<div className={styles.mapContainer}>
<StaticMap
city={searchParams.city}
city={selectHotelParams.city}
width={340}
height={180}
zoomLevel={11}
mapType="roadmap"
altText={`Map of ${searchParams.city} city center`}
altText={`Map of ${selectHotelParams.city} city center`}
/>
</div>
)}
components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import Alert from "@/components/TempDesignSystem/Alert"
import { getIntl } from "@/i18n"
import { safeTry } from "@/utils/safeTry"
import { generateChildrenString } from "../RoomSelection/utils"
import { generateChildrenString } from "../../utils"
import styles from "./NoRoomsAlert.module.css"
components/HotelReservation/SelectRate/RoomFilter/index.tsx
+1 -2
View File
@@ -8,14 +8,13 @@ import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { z } from "zod"
import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
import { InfoCircleIcon } from "@/components/Icons"
import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import { getIconForFeatureCode } from "../utils"
import styles from "./roomFilter.module.css"
import {
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+1 -1
View File
@@ -5,13 +5,13 @@ import { useIntl } from "react-intl"
import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
import { ErrorCircleIcon } from "@/components/Icons"
import ImageGallery from "@/components/ImageGallery"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIconForFeatureCode } from "../../utils"
import { cardVariants } from "./cardVariants"
import styles from "./roomCard.module.css"
components/HotelReservation/SelectRate/RoomSelection/index.tsx
+17 -22
View File
@@ -2,9 +2,10 @@
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useMemo } from "react"
import { convertObjToSearchParams } from "@/utils/url"
import RateSummary from "./RateSummary"
import RoomCard from "./RoomCard"
import { getHotelReservationQueryParams } from "./utils"
import styles from "./roomSelection.module.css"
@@ -26,28 +27,22 @@ export default function RoomSelection({
const { roomConfigurations, rateDefinitions } = roomsAvailability
const queryParams = useMemo(() => {
const params = new URLSearchParams(searchParams)
const searchParamsObject = getHotelReservationQueryParams(searchParams)
// TODO: handle multiple rooms
const newSearchParams = convertObjToSearchParams(
{
rooms: [
{
roomTypeCode: rateSummary?.roomTypeCode,
rateCode: rateSummary?.public.rateCode,
counterRateCode: rateSummary?.member?.rateCode,
packages: selectedPackages,
},
],
},
searchParams
)
searchParamsObject.room.forEach((item, index) => {
if (rateSummary?.roomTypeCode) {
params.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
}
if (rateSummary?.public?.rateCode) {
params.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
}
if (rateSummary?.member?.rateCode) {
params.set(
`room[${index}].counterratecode`,
rateSummary.member.rateCode
)
}
selectedPackages.length > 0
? params.set(`room[${index}].packages`, selectedPackages.join(","))
: params.delete(`room[${index}].packages`)
})
return params
return newSearchParams
}, [searchParams, rateSummary, selectedPackages])
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
components/HotelReservation/SelectRate/RoomSelection/utils.ts
-113
View File
@@ -1,113 +0,0 @@
import { ChildBedTypeEnum } from "@/constants/booking"
import { getFormattedUrlQueryParams } from "@/utils/url"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData"
import type { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
import type {
Child,
SelectRateSearchParams,
} from "@/types/components/hotelReservation/selectRate/selectRate"
export function getHotelReservationQueryParams(searchParams: URLSearchParams) {
return getFormattedUrlQueryParams(searchParams, {
adults: "number",
age: "number",
bed: ChildBedMapEnum,
}) as SelectRateSearchParams
}
export const bedTypeMap: Record<number, ChildBedTypeEnum> = {
[ChildBedMapEnum.IN_ADULTS_BED]: ChildBedTypeEnum.ParentsBed,
[ChildBedMapEnum.IN_CRIB]: ChildBedTypeEnum.Crib,
[ChildBedMapEnum.IN_EXTRA_BED]: ChildBedTypeEnum.ExtraBed,
[ChildBedMapEnum.UNKNOWN]: ChildBedTypeEnum.Unknown,
}
export const invertedBedTypeMap: Record<ChildBedTypeEnum, string> = {
[ChildBedTypeEnum.ParentsBed]: ChildBedMapEnum[ChildBedMapEnum.IN_ADULTS_BED],
[ChildBedTypeEnum.Crib]: ChildBedMapEnum[ChildBedMapEnum.IN_CRIB],
[ChildBedTypeEnum.ExtraBed]: ChildBedMapEnum[ChildBedMapEnum.IN_EXTRA_BED],
[ChildBedTypeEnum.Unknown]: ChildBedMapEnum[ChildBedMapEnum.UNKNOWN],
}
export function generateChildrenString(children: Child[]): string {
return `[${children
.map((child) => {
const age = child.age
const bedType = bedTypeMap[parseInt(child.bed.toString())]
return `${age}:${bedType}`
})
.join(",")}]`
}
export function getQueryParamsForEnterDetails(
searchParams: URLSearchParams
): BookingData {
const selectRoomParamsObject = getHotelReservationQueryParams(searchParams)
const { room } = selectRoomParamsObject
return {
fromDate: selectRoomParamsObject.fromDate,
toDate: selectRoomParamsObject.toDate,
hotel: selectRoomParamsObject.hotel,
rooms: room?.map((room) => ({
adults: room.adults, // TODO: Handle multiple rooms
children: room.child, // TODO: Handle multiple rooms and children
roomTypeCode: room.roomtype,
rateCode: room.ratecode,
packages: room.packages?.split(",") as RoomPackageCodeEnum[],
counterRateCode: room.counterratecode,
})),
}
}
export function createQueryParamsForEnterDetails(
bookingData: BookingData,
intitalSearchParams: URLSearchParams
) {
const { hotel, fromDate, toDate, rooms } = bookingData
const bookingSearchParams = new URLSearchParams({ hotel, fromDate, toDate })
const searchParams = new URLSearchParams([
...intitalSearchParams,
...bookingSearchParams,
])
searchParams.set(`hotel`, hotel)
rooms.forEach((item, index) => {
if (item?.adults) {
searchParams.set(`room[${index}].adults`, item.adults.toString())
}
if (item?.children) {
item.children.forEach((child, childIndex) => {
searchParams.set(
`room[${index}].child[${childIndex}].age`,
child.age.toString()
)
searchParams.set(
`room[${index}].child[${childIndex}].bed`,
child.bed.toString()
)
})
}
if (item?.roomTypeCode) {
searchParams.set(`room[${index}].roomtype`, item.roomTypeCode)
}
if (item?.rateCode) {
searchParams.set(`room[${index}].ratecode`, item.rateCode)
}
if (item?.counterRateCode) {
searchParams.set(`room[${index}].counterratecode`, item.counterRateCode)
}
if (item.packages && item.packages.length > 0) {
searchParams.set(`room[${index}].packages`, item.packages.join(","))
}
})
return searchParams
}
components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import { auth } from "@/auth"
import { safeTry } from "@/utils/safeTry"
import { isValidSession } from "@/utils/session"
import { generateChildrenString } from "../RoomSelection/utils"
import { generateChildrenString } from "../../utils"
import Rooms from "."
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
components/HotelReservation/SelectRate/utils.ts
-19
View File
@@ -1,19 +0,0 @@
import { AllergyIcon, PetsIcon, WheelchairIcon } from "@/components/Icons"
import {
RoomPackageCodeEnum,
type RoomPackageCodes,
} from "@/types/components/hotelReservation/selectRate/roomFilter"
export function getIconForFeatureCode(featureCode: RoomPackageCodes) {
switch (featureCode) {
case RoomPackageCodeEnum.ACCESSIBILITY_ROOM:
return WheelchairIcon
case RoomPackageCodeEnum.ALLERGY_ROOM:
return AllergyIcon
case RoomPackageCodeEnum.PET_ROOM:
return PetsIcon
default:
return PetsIcon
}
}
components/HotelReservation/utils.ts
+47
View File
@@ -0,0 +1,47 @@
import { ChildBedTypeEnum } from "@/constants/booking"
import { AllergyIcon, PetsIcon, WheelchairIcon } from "@/components/Icons"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import {
RoomPackageCodeEnum,
type RoomPackageCodes,
} from "@/types/components/hotelReservation/selectRate/roomFilter"
import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
export function getIconForFeatureCode(featureCode: RoomPackageCodes) {
switch (featureCode) {
case RoomPackageCodeEnum.ACCESSIBILITY_ROOM:
return WheelchairIcon
case RoomPackageCodeEnum.ALLERGY_ROOM:
return AllergyIcon
case RoomPackageCodeEnum.PET_ROOM:
return PetsIcon
default:
return PetsIcon
}
}
export const bedTypeMap: Record<number, ChildBedTypeEnum> = {
[ChildBedMapEnum.IN_ADULTS_BED]: ChildBedTypeEnum.ParentsBed,
[ChildBedMapEnum.IN_CRIB]: ChildBedTypeEnum.Crib,
[ChildBedMapEnum.IN_EXTRA_BED]: ChildBedTypeEnum.ExtraBed,
[ChildBedMapEnum.UNKNOWN]: ChildBedTypeEnum.Unknown,
}
export const invertedBedTypeMap: Record<ChildBedTypeEnum, string> = {
[ChildBedTypeEnum.ParentsBed]: ChildBedMapEnum[ChildBedMapEnum.IN_ADULTS_BED],
[ChildBedTypeEnum.Crib]: ChildBedMapEnum[ChildBedMapEnum.IN_CRIB],
[ChildBedTypeEnum.ExtraBed]: ChildBedMapEnum[ChildBedMapEnum.IN_EXTRA_BED],
[ChildBedTypeEnum.Unknown]: ChildBedMapEnum[ChildBedMapEnum.UNKNOWN],
}
export function generateChildrenString(children: Child[]): string {
return `[${children
.map((child) => {
const age = child.age
const bedType = bedTypeMap[parseInt(child.bed.toString())]
return `${age}:${bedType}`
})
.join(",")}]`
}