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

fix: we showed duplicate rooms because every bed represents a room

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-03-19 10:01:05 +01:00
parent 200ed55a2c
commit cf91d3d947
12 changed files with 356 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -17,94 +17,89 @@ import styles from "./hotelInfoCard.module.css"
import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCard"
export default async function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
const hotel = hotelData?.hotel
export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
const intl = await getIntl()
const sortedFacilities = hotel?.detailedFacilities
const sortedFacilities = hotel.detailedFacilities
.sort((a, b) => b.sortOrder - a.sortOrder)
.slice(0, 5)
const galleryImages = mapApiImagesToGalleryImages(hotel?.galleryImages || [])
const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
return (
<article className={styles.container}>
{hotel && (
<section className={styles.wrapper}>
<div className={styles.imageWrapper}>
<ImageGallery title={hotel.name} images={galleryImages} fill />
{hotel.ratings?.tripAdvisor && (
<TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
)}
</div>
<div className={styles.hotelContent}>
<div className={styles.hotelInformation}>
<Title as="h2" textTransform="uppercase">
{hotel.name}
</Title>
<div className={styles.hotelAddressDescription}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{
id: "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
},
{
address: hotel.address.streetAddress,
city: hotel.address.city,
distanceToCityCenterInKm: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</Caption>
<Body color="uiTextHighContrast">
{hotel.hotelContent.texts.descriptions?.medium}
</Body>
</div>
</div>
<Divider color="subtle" variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
<Body textTransform="bold" className={styles.facilityTitle}>
{intl.formatMessage({ id: "At the hotel" })}
</Body>
{sortedFacilities?.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent
className={styles.facilitiesIcon}
color="grey80"
/>
)}
<Body color="uiTextHighContrast">{facility.name}</Body>
</div>
)
})}
</div>
<ReadMore
label={intl.formatMessage({ id: "See all amenities" })}
hotelId={hotel.operaId}
hotel={hotel}
showCTA={false}
/>
<section className={styles.wrapper}>
<div className={styles.imageWrapper}>
<ImageGallery title={hotel.name} images={galleryImages} fill />
{hotel.ratings?.tripAdvisor && (
<TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
)}
</div>
<div className={styles.hotelContent}>
<div className={styles.hotelInformation}>
<Title as="h2" textTransform="uppercase">
{hotel.name}
</Title>
<div className={styles.hotelAddressDescription}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{
id: "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
},
{
address: hotel.address.streetAddress,
city: hotel.address.city,
distanceToCityCenterInKm: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</Caption>
<Body color="uiTextHighContrast">
{hotel.hotelContent.texts.descriptions?.medium}
</Body>
</div>
</div>
</section>
)}
{hotel?.specialAlerts.map((alert) => {
return (
<div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
<Alert
key={alert.id}
type={alert.type}
heading={alert.heading}
text={alert.text}
<Divider color="subtle" variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
<Body textTransform="bold" className={styles.facilityTitle}>
{intl.formatMessage({ id: "At the hotel" })}
</Body>
{sortedFacilities?.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent
className={styles.facilitiesIcon}
color="grey80"
/>
)}
<Body color="uiTextHighContrast">{facility.name}</Body>
</div>
)
})}
</div>
<ReadMore
label={intl.formatMessage({ id: "See all amenities" })}
hotelId={hotel.operaId}
hotel={hotel}
showCTA={false}
/>
</div>
)
})}
</div>
</section>
{hotel.specialAlerts.map((alert) => (
<div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
<Alert
key={alert.id}
type={alert.type}
heading={alert.heading}
text={alert.text}
/>
</div>
))}
</article>
)
}

26
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
View File

@@ -69,8 +69,6 @@ function getBreakfastMessage(
export default function RoomCard({ roomConfiguration }: RoomCardProps) {
const intl = useIntl()
const lessThanFiveRoomsLeft =
roomConfiguration.roomsLeft > 0 && roomConfiguration.roomsLeft < 5
const searchParams = useSearchParams()
const bookingCode = searchParams.get("bookingCode")
@@ -85,6 +83,8 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
}))
const { isMainRoom, roomAvailability, roomNr, selectedPackage } =
useRoomContext()
const showLowInventory =
roomConfiguration.roomsLeft > 0 && roomConfiguration.roomsLeft < 5
if (!roomAvailability || !("rateDefinitions" in roomAvailability)) {
return null
@@ -177,7 +177,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
<li className={classNames}>
<div className={styles.imageContainer}>
<div className={styles.chipContainer}>
{lessThanFiveRoomsLeft ? (
{showLowInventory ? (
<span className={styles.chip}>
<Footnote color="burgundy" textTransform="uppercase">
{intl.formatMessage(
@@ -211,16 +211,16 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
<Caption color="uiTextMediumContrast">
{occupancy.max === occupancy.min
? intl.formatMessage(
{ id: "{guests, plural, one {# guest} other {# guests}}" },
{ guests: occupancy.max }
)
{ id: "{guests, plural, one {# guest} other {# guests}}" },
{ guests: occupancy.max }
)
: intl.formatMessage(
{ id: "{min}-{max} guests" },
{
min: occupancy.min,
max: occupancy.max,
}
)}
{ id: "{min}-{max} guests" },
{
min: occupancy.min,
max: occupancy.max,
}
)}
</Caption>
)}
<RoomSize roomSize={roomSize} />
@@ -293,7 +293,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
title={rateTitle}
rateTitle={
product.public &&
product.public?.rateType !== RateTypeEnum.Regular
product.public?.rateType !== RateTypeEnum.Regular
? rateDefinition?.title
: undefined
}

9
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
View File

@@ -17,7 +17,6 @@ export function RoomsContainer({
childArray,
fromDate,
hotelData,
hotelId,
isUserLoggedIn,
toDate,
}: RoomsContainerProps) {
@@ -29,7 +28,7 @@ export function RoomsContainer({
const { data: roomsAvailability, isPending: isLoadingAvailability } =
useRoomsAvailability(
adultArray,
hotelId,
hotelData.hotel.id,
fromDateString,
toDateString,
lang,
@@ -42,7 +41,7 @@ export function RoomsContainer({
childArray,
fromDateString,
toDateString,
hotelId,
hotelData.hotel.id,
lang
)
@@ -50,10 +49,6 @@ export function RoomsContainer({
return <RoomsContainerSkeleton />
}
if (!hotelData?.hotel) {
return null
}
if (packages === null) {
// TODO: Log packages error
console.error("[RoomsContainer] unable to fetch packages")

28
apps/scandic-web/components/HotelReservation/SelectRate/index.tsx
View File

@@ -5,9 +5,7 @@ import { Suspense } from "react"
import { getHotel } from "@/lib/trpc/memoizedRequests"
import { auth } from "@/auth"
import HotelInfoCard, {
HotelInfoCardSkeleton,
} from "@/components/HotelReservation/SelectRate/HotelInfoCard"
import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
import { RoomsContainer } from "@/components/HotelReservation/SelectRate/RoomsContainer"
import TrackingSDK from "@/components/TrackingSDK"
import { setLang } from "@/i18n/serverContext"
@@ -33,17 +31,21 @@ export default async function SelectRatePage({
const { adultsInRoom, childrenInRoom, hotel, noOfRooms, selectHotelParams } =
searchDetails
const { fromDate, toDate } = getValidDates(
selectHotelParams.fromDate,
selectHotelParams.toDate
)
const hotelData = await getHotel({
hotelId: hotel.id,
isCardOnlyPayment: false,
language: params.lang,
})
if (!hotelData) {
return notFound()
}
const { fromDate, toDate } = getValidDates(
selectHotelParams.fromDate,
selectHotelParams.toDate
)
const session = await auth()
const isUserLoggedIn = isValidSession(session)
@@ -59,20 +61,17 @@ export default async function SelectRatePage({
hotel.id,
hotel.name,
noOfRooms,
hotelData?.hotel.address.country,
hotelData?.hotel.address.city,
hotelData.hotel.address.country,
hotelData.hotel.address.city,
selectHotelParams.city
)
const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
const hotelId = +hotel.id
const suspenseKey = stringify(searchParams)
return (
<>
<Suspense fallback={<HotelInfoCardSkeleton />}>
<HotelInfoCard hotelData={hotelData} />
</Suspense>
<HotelInfoCard hotel={hotelData.hotel} />
<RoomsContainer
adultArray={adultsInRoom}
@@ -80,7 +79,6 @@ export default async function SelectRatePage({
childArray={childrenInRoom}
fromDate={arrivalDate}
hotelData={hotelData}
hotelId={hotelId}
isUserLoggedIn={isUserLoggedIn}
toDate={departureDate}
/>

38
apps/scandic-web/components/HotelReservation/SelectRate/utils.ts
View File

@@ -6,38 +6,22 @@ import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"
export function useRoomsAvailability(
adultsCount: number[],
hotelId: number,
hotelId: string,
fromDateString: string,
toDateString: string,
lang: Lang,
childArray: ChildrenInRoom,
bookingCode?: string
) {
const roomsAvailability =
trpc.hotel.availability.roomsCombinedAvailability.useQuery({
adultsCount,
bookingCode,
childArray,
hotelId,
lang,
roomStayEndDate: toDateString,
roomStayStartDate: fromDateString,
})
const data = roomsAvailability.data?.map((ra) => {
if (ra.status === "fulfilled") {
return ra.value
}
return {
details: ra.reason,
error: "request_failure",
}
return trpc.hotel.availability.roomsCombinedAvailability.useQuery({
adultsCount,
bookingCode,
childArray,
hotelId,
lang,
roomStayEndDate: toDateString,
roomStayStartDate: fromDateString,
})
return {
...roomsAvailability,
data,
}
}
export function useHotelPackages(
@@ -45,14 +29,14 @@ export function useHotelPackages(
childArray: ChildrenInRoom,
fromDateString: string,
toDateString: string,
hotelId: number,
hotelId: string,
lang: Lang
) {
return trpc.hotel.packages.get.useQuery({
adults: adultArray[0], // Using the first adult count
children: childArray?.[0]?.length, // Using the first children count
endDate: toDateString,
hotelId: hotelId.toString(),
hotelId,
packageCodes: [
RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
RoomPackageCodeEnum.PET_ROOM,

1
apps/scandic-web/providers/BookingConfirmationProvider.tsx
View File

@@ -29,6 +29,7 @@ export default function BookingConfirmationProvider({
rooms,
vat,
}
storeRef.current = createBookingConfirmationStore(initialData)
}

2
apps/scandic-web/server/routers/hotels/input.ts
View File

@@ -40,7 +40,7 @@ export const roomsCombinedAvailabilityInputSchema = z.object({
.nullable()
)
.nullish(),
hotelId: z.number(),
hotelId: z.string(),
lang: z.nativeEnum(Lang),
rateCode: z.string().optional(),
roomStayEndDate: z.string(),

137
apps/scandic-web/server/routers/hotels/output.ts
View File

@@ -33,6 +33,7 @@ import type {
import type {
Product,
RateDefinition,
RoomConfiguration,
} from "@/types/trpc/routers/hotel/roomAvailability"
// NOTE: Find schema at: https://aks-test.scandichotels.com/hotel/swagger/v1/index.html
@@ -145,6 +146,142 @@ const statusLookup = {
[AvailabilityEnum.NotAvailable]: 2,
}
function sortRoomConfigs(a: RoomConfiguration, b: RoomConfiguration) {
// @ts-expect-error - array indexing
return statusLookup[a.status] - statusLookup[b.status]
}
export const roomsCombinedAvailabilitySchema = z
.object({
data: z.object({
attributes: z.object({
checkInDate: z.string(),
checkOutDate: z.string(),
hotelId: z.number(),
mustBeGuaranteed: z.boolean().optional(),
occupancy: occupancySchema.optional(),
rateDefinitions: z.array(rateDefinitionSchema),
roomConfigurations: z
.array(roomConfigurationSchema)
.transform((data) => {
// Initial sort to guarantee if one bed is NotAvailable and whereas
// the other is Available to make sure data is added to the correct
// roomConfig
const configs = data.sort(sortRoomConfigs)
const roomConfigs = new Map<string, RoomConfiguration>()
for (const roomConfig of configs) {
if (roomConfigs.has(roomConfig.roomType)) {
const currentRoomConf = roomConfigs.get(roomConfig.roomType)
if (currentRoomConf) {
currentRoomConf.features = roomConfig.features.reduce(
(feats, feature) => {
const currentFeatureIndex = feats.findIndex(
(f) => f.code === feature.code
)
if (currentFeatureIndex !== -1) {
feats[currentFeatureIndex].inventory =
feats[currentFeatureIndex].inventory +
feature.inventory
} else {
feats.push(feature)
}
return feats
},
currentRoomConf.features
)
currentRoomConf.roomsLeft =
currentRoomConf.roomsLeft + roomConfig.roomsLeft
roomConfigs.set(currentRoomConf.roomType, currentRoomConf)
}
} else {
roomConfigs.set(roomConfig.roomType, roomConfig)
}
}
return Array.from(roomConfigs.values())
}),
}),
relationships: relationshipsSchema.optional(),
type: z.string().optional(),
}),
})
.transform(({ data: { attributes } }) => {
const rateDefinitions = attributes.rateDefinitions
const cancellationRuleLookup = rateDefinitions.reduce((acc, val) => {
// @ts-expect-error - index of cancellationRule TS
acc[val.rateCode] = cancellationRules[val.cancellationRule]
return acc
}, {})
const roomConfigurations = attributes.roomConfigurations
.map((room) => {
if (room.products.length) {
room.breakfastIncludedInAllRatesMember = room.products.every(
(product) =>
everyRateHasBreakfastIncluded(product, rateDefinitions, "member")
)
room.breakfastIncludedInAllRatesPublic = room.products.every(
(product) =>
everyRateHasBreakfastIncluded(product, rateDefinitions, "public")
)
room.products = room.products.map((product) => {
const publicRate = product.public
if (publicRate?.rateCode) {
const publicRateDefinition = rateDefinitions.find(
(rateDefinition) =>
rateDefinition.rateCode === publicRate.rateCode
)
if (publicRateDefinition) {
const rate = getRate(publicRateDefinition)
if (rate) {
product.rate = rate
if (rate === "flex") {
product.isFlex = true
}
}
}
}
const memberRate = product.member
if (memberRate?.rateCode) {
const memberRateDefinition = rateDefinitions.find(
(rate) => rate.rateCode === memberRate.rateCode
)
if (memberRateDefinition) {
const rate = getRate(memberRateDefinition)
if (rate) {
product.rate = rate
if (rate === "flex") {
product.isFlex = true
}
}
}
}
return product
})
// CancellationRule is the same for public and member per product
// Sorting to guarantee order based on rate
room.products = room.products.sort(
(a, b) =>
// @ts-expect-error - index
cancellationRuleLookup[a.public?.rateCode || a.member?.rateCode] -
// @ts-expect-error - index
cancellationRuleLookup[b.public?.rateCode || b.member?.rateCode]
)
}
return room
})
.sort(sortRoomConfigs)
return {
...attributes,
roomConfigurations,
}
})
export const roomsAvailabilitySchema = z
.object({
data: z.object({

190
apps/scandic-web/server/routers/hotels/query.ts
View File

@@ -50,6 +50,7 @@ import {
packagesSchema,
ratesSchema,
roomsAvailabilitySchema,
roomsCombinedAvailabilitySchema,
} from "./output"
import tempRatesData from "./tempRatesData.json"
import {
@@ -495,95 +496,110 @@ export const hotelQueryRouter = router({
roomsCombinedAvailability: serviceProcedure
.input(roomsCombinedAvailabilityInputSchema)
.query(async ({ input, ctx }) => {
const { lang } = input
const apiLang = toApiLang(lang)
const {
adultsCount,
bookingCode,
childArray,
hotelId,
rateCode,
roomStayEndDate,
roomStayStartDate,
} = input
.query(
async ({
ctx,
input: {
adultsCount,
bookingCode,
childArray,
hotelId,
lang,
rateCode,
roomStayEndDate,
roomStayStartDate,
},
}) => {
const apiLang = toApiLang(lang)
const metricsData = {
hotelId,
roomStayStartDate,
roomStayEndDate,
adultsCount,
childArray: childArray ? JSON.stringify(childArray) : undefined,
bookingCode,
}
const metricsData = {
hotelId,
roomStayStartDate,
roomStayEndDate,
adultsCount,
childArray: childArray ? JSON.stringify(childArray) : undefined,
bookingCode,
}
metrics.roomsCombinedAvailability.counter.add(1, metricsData)
metrics.roomsCombinedAvailability.counter.add(1, metricsData)
console.info(
"api.hotels.roomsCombinedAvailability start",
JSON.stringify({ query: { hotelId, params: metricsData } })
)
console.info(
"api.hotels.roomsCombinedAvailability start",
JSON.stringify({ query: { hotelId, params: metricsData } })
)
const availabilityResponses = await Promise.allSettled(
adultsCount.map(async (adultCount: number, idx: number) => {
const kids = childArray?.[idx]
const params: Record<string, string | number | undefined> = {
roomStayStartDate,
roomStayEndDate,
adults: adultCount,
...(kids?.length && {
children: generateChildrenString(kids),
}),
...(bookingCode && { bookingCode }),
language: apiLang,
}
const apiResponse = await api.get(
api.endpoints.v1.Availability.hotel(hotelId.toString()),
{
headers: {
Authorization: `Bearer ${ctx.serviceToken}`,
},
},
params
)
if (!apiResponse.ok) {
const text = await apiResponse.text()
metrics.roomsCombinedAvailability.fail.add(1, metricsData)
console.error("Failed API call", { params, text })
return { error: "http_error", details: text }
}
const apiJson = await apiResponse.json()
const validateAvailabilityData =
roomsAvailabilitySchema.safeParse(apiJson)
if (!validateAvailabilityData.success) {
console.error("Validation error", {
params,
error: validateAvailabilityData.error,
})
metrics.roomsCombinedAvailability.fail.add(1, metricsData)
return {
error: "validation_error",
details: validateAvailabilityData.error,
const availabilityResponses = await Promise.allSettled(
adultsCount.map(async (adultCount: number, idx: number) => {
const kids = childArray?.[idx]
const params: Record<string, string | number | undefined> = {
roomStayStartDate,
roomStayEndDate,
adults: adultCount,
...(kids?.length && {
children: generateChildrenString(kids),
}),
...(bookingCode && { bookingCode }),
language: apiLang,
}
}
if (rateCode) {
validateAvailabilityData.data.mustBeGuaranteed =
validateAvailabilityData.data.rateDefinitions.find(
(rate) => rate.rateCode === rateCode
)?.mustBeGuaranteed
}
const apiResponse = await api.get(
api.endpoints.v1.Availability.hotel(hotelId.toString()),
{
headers: {
Authorization: `Bearer ${ctx.serviceToken}`,
},
},
params
)
return validateAvailabilityData.data
if (!apiResponse.ok) {
const text = await apiResponse.text()
metrics.roomsCombinedAvailability.fail.add(1, metricsData)
console.error("Failed API call", { params, text })
return { error: "http_error", details: text }
}
const apiJson = await apiResponse.json()
const validateAvailabilityData =
roomsCombinedAvailabilitySchema.safeParse(apiJson)
if (!validateAvailabilityData.success) {
console.error("Validation error", {
params,
error: validateAvailabilityData.error,
})
metrics.roomsCombinedAvailability.fail.add(1, metricsData)
return {
error: "validation_error",
details: validateAvailabilityData.error,
}
}
if (rateCode) {
validateAvailabilityData.data.mustBeGuaranteed =
validateAvailabilityData.data.rateDefinitions.find(
(rate) => rate.rateCode === rateCode
)?.mustBeGuaranteed
}
return validateAvailabilityData.data
})
)
metrics.roomsCombinedAvailability.success.add(1, metricsData)
const data = availabilityResponses.map((availability) => {
if (availability.status === "fulfilled") {
return availability.value
}
return {
details: availability.reason,
error: "request_failure",
}
})
)
metrics.roomsCombinedAvailability.success.add(1, metricsData)
return availabilityResponses
}),
return data
}
),
room: serviceProcedure
.input(selectedRoomAvailabilityInputSchema)
.query(async ({ input, ctx }) => {
@@ -771,9 +787,9 @@ export const hotelQueryRouter = router({
type: matchingRoom.mainBed.type,
extraBed: matchingRoom.fixedExtraBed
? {
type: matchingRoom.fixedExtraBed.type,
description: matchingRoom.fixedExtraBed.description,
}
type: matchingRoom.fixedExtraBed.type,
description: matchingRoom.fixedExtraBed.description,
}
: undefined,
}
}
@@ -1102,9 +1118,9 @@ export const hotelQueryRouter = router({
return hotelData
? {
...hotelData,
url: hotelPage?.url ?? null,
}
...hotelData,
url: hotelPage?.url ?? null,
}
: null
})
)

5
apps/scandic-web/server/routers/hotels/schemas/roomAvailability/configuration.ts
View File

@@ -45,8 +45,5 @@ export const roomConfigurationSchema = z
}
}
// Creating a new objekt since data is frozen (readony)
// and can cause errors to be thrown if trying to manipulate
// object elsewhere
return { ...data }
return data
})

4
apps/scandic-web/types/components/hotelReservation/selectRate/hotelInfoCard.ts
View File

@@ -1,5 +1,5 @@
import type { HotelData } from "@/types/hotel"
import type { Hotel } from "@/types/hotel"
export interface HotelInfoCardProps {
hotelData: HotelData | null
hotel: Hotel
}

3
apps/scandic-web/types/components/hotelReservation/selectRate/roomsContainer.ts
View File

@@ -8,8 +8,7 @@ export interface RoomsContainerProps {
bookingCode?: string
childArray: ChildrenInRoom
fromDate: Date
hotelData: HotelData | null
hotelId: number
hotelData: HotelData
isUserLoggedIn: boolean
toDate: Date
}