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

SW-454 Use the API on select room page

Browse Source
This commit is contained in:
Niclas Edenvin
2024-10-08 15:22:51 +02:00
parent 4b9a6d2e8e
commit baf6ed9f2b
12 changed files with 348 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
View File

@@ -2,7 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
import tempHotelData from "@/server/routers/hotels/tempHotelData.json" import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection" import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext" import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css" import styles from "./page.module.css"
@@ -19,18 +18,15 @@ export default async function SelectRatePage({
// TODO: Use real endpoint. // TODO: Use real endpoint.
const hotel = tempHotelData.data.attributes const hotel = tempHotelData.data.attributes
const rates = await serverClient().hotel.rates.get({ const roomConfigurations = await serverClient().hotel.availability.rooms({
// TODO: pass the correct hotel ID and all other parameters that should be included in the search hotelId: parseInt(searchParams.hotel, 10),
hotelId: searchParams.hotel, roomStayStartDate: "2024-11-02",
roomStayEndDate: "2024-11-03",
adults: 1,
}) })
if (!roomConfigurations) {
// const rates = await serverClient().hotel.availability.getForHotel({ return "No rooms found"
// hotelId: 811, }
// roomStayStartDate: "2024-11-02",
// roomStayEndDate: "2024-11-03",
// adults: 1,
// })
const intl = await getIntl()
return ( return (
<div> <div>
@@ -39,13 +35,7 @@ export default async function SelectRatePage({
<div className={styles.content}> <div className={styles.content}>
<div className={styles.main}> <div className={styles.main}>
<RoomSelection <RoomSelection roomConfigurations={roomConfigurations} />
rates={rates}
// TODO: Get real value
nrOfNights={1}
// TODO: Get real value
nrOfAdults={1}
/>
</div> </div>
</div> </div>
</div> </div>

35
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
View File

@@ -9,17 +9,23 @@ import styles from "./flexibilityOption.module.css"
import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption" import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
export default function FlexibilityOption({ export default function FlexibilityOption({
currency, product,
standardPrice,
memberPrice,
name, name,
value,
paymentTerm, paymentTerm,
}: FlexibilityOptionProps) { }: FlexibilityOptionProps) {
const intl = useIntl() const intl = useIntl()
if (!product) {
// TODO: Implement empty state when this rate can't be booked
return <div>TBI: Rate not available</div>
}
return ( return (
<label> <label>
<input type="radio" name="flexibility" value={value} /> <input
type="radio"
name="rateCode"
value={product.productType.public.rateCode}
/>
<div className={styles.card}> <div className={styles.card}>
<div className={styles.header}> <div className={styles.header}>
<Body>{name}</Body> <Body>{name}</Body>
@@ -29,15 +35,30 @@ export default function FlexibilityOption({
<div> <div>
<dt>{intl.formatMessage({ id: "Standard price" })}</dt> <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
<dd> <dd>
{standardPrice} {currency} {product.productType.public.localPrice.pricePerNight}{" "}
{product.productType.public.localPrice.currency}/
{intl.formatMessage({ id: "night" })}
</dd> </dd>
</div> </div>
<div> <div>
<dt>{intl.formatMessage({ id: "Member price" })}</dt> <dt>{intl.formatMessage({ id: "Member price" })}</dt>
<dd> <dd>
{memberPrice} {currency} {product.productType.member.localPrice.pricePerNight}{" "}
{product.productType.member.localPrice.currency}/
{intl.formatMessage({ id: "night" })}
</dd> </dd>
</div> </div>
{product.productType.public.requestedPrice &&
product.productType.member.requestedPrice && (
<div>
<dt>{intl.formatMessage({ id: "Approx." })}</dt>
<dd>
{product.productType.public.requestedPrice.pricePerNight}/
{product.productType.member.requestedPrice.pricePerNight}{" "}
{product.productType.public.requestedPrice.currency}
</dd>
</div>
)}
</dl> </dl>
</div> </div>
</label> </label>

80
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -11,20 +11,54 @@ import styles from "./roomCard.module.css"
import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard" import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
export default function RoomCard({ export default function RoomCard({
room, rateDefinitions,
nrOfAdults, roomConfiguration,
nrOfNights,
breakfastIncluded,
}: RoomCardProps) { }: RoomCardProps) {
const intl = useIntl() const intl = useIntl()
const saveRate = rateDefinitions.find(
// TODO: Update string when API has decided
(rate) => rate.cancellationRule === "NonCancellable"
)
const changeRate = rateDefinitions.find(
// TODO: Update string when API has decided
(rate) => rate.cancellationRule === "Modifiable"
)
const flexRate = rateDefinitions.find(
// TODO: Update string when API has decided
(rate) => rate.cancellationRule === "CancellableBefore6PM"
)
const saveProduct = saveRate
? roomConfiguration.products.find(
(product) =>
product.productType.public.rateCode === saveRate.rateCode ||
product.productType.member.rateCode === saveRate.rateCode
)
: undefined
const changeProduct = changeRate
? roomConfiguration.products.find(
(product) =>
product.productType.public.rateCode === changeRate.rateCode ||
product.productType.member.rateCode === changeRate.rateCode
)
: undefined
const flexProduct = flexRate
? roomConfiguration.products.find(
(product) =>
product.productType.public.rateCode === flexRate.rateCode ||
product.productType.member.rateCode === flexRate.rateCode
)
: undefined
return ( return (
<div className={styles.card}> <div className={styles.card}>
<div className={styles.cardBody}> <div className={styles.cardBody}>
<div className={styles.specification}> <div className={styles.specification}>
<Subtitle className={styles.name} type="two"> <Subtitle className={styles.name} type="two">
{room.name} {roomConfiguration.roomType}
</Subtitle> </Subtitle>
<Caption>{room.size}</Caption> <Caption>Room size TBI</Caption>
<Button intent="text" type="button" size="small" theme="base"> <Button intent="text" type="button" size="small" theme="base">
{intl.formatMessage({ id: "See room details" })} {intl.formatMessage({ id: "See room details" })}
</Button> </Button>
@@ -32,20 +66,15 @@ export default function RoomCard({
{/*TODO: Handle pluralisation*/} {/*TODO: Handle pluralisation*/}
{intl.formatMessage( {intl.formatMessage(
{ {
id: "Nr night, nr adult", id: "Max {nrOfGuests} guests",
defaultMessage: defaultMessage: "Max {nrOfGuests} guests",
"{nights, number} night, {adults, number} adult",
}, },
{ nights: nrOfNights, adults: nrOfAdults } // TODO: Correct number
{ nrOfGuests: 2 }
)} )}
{" | "} {intl.formatMessage({
{breakfastIncluded id: "Breakfast included",
? intl.formatMessage({ })}
id: "Breakfast included",
})
: intl.formatMessage({
id: "Breakfast excluded",
})}
</Caption> </Caption>
</div> </div>
@@ -53,25 +82,19 @@ export default function RoomCard({
name={intl.formatMessage({ id: "Non-refundable" })} name={intl.formatMessage({ id: "Non-refundable" })}
value="non-refundable" value="non-refundable"
paymentTerm={intl.formatMessage({ id: "Pay now" })} paymentTerm={intl.formatMessage({ id: "Pay now" })}
standardPrice={room.prices.nonRefundable.standard} product={saveProduct}
memberPrice={room.prices.nonRefundable.member}
currency={room.prices.currency}
/> />
<FlexibilityOption <FlexibilityOption
name={intl.formatMessage({ id: "Free rebooking" })} name={intl.formatMessage({ id: "Free rebooking" })}
value="free-rebooking" value="free-rebooking"
paymentTerm={intl.formatMessage({ id: "Pay now" })} paymentTerm={intl.formatMessage({ id: "Pay now" })}
standardPrice={room.prices.freeRebooking.standard} product={changeProduct}
memberPrice={room.prices.freeRebooking.member}
currency={room.prices.currency}
/> />
<FlexibilityOption <FlexibilityOption
name={intl.formatMessage({ id: "Free cancellation" })} name={intl.formatMessage({ id: "Free cancellation" })}
value="free-cancellation" value="free-cancellation"
paymentTerm={intl.formatMessage({ id: "Pay later" })} paymentTerm={intl.formatMessage({ id: "Pay later" })}
standardPrice={room.prices.freeCancellation.standard} product={flexProduct}
memberPrice={room.prices.freeCancellation.member}
currency={room.prices.currency}
/> />
<Button <Button
@@ -87,7 +110,8 @@ export default function RoomCard({
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
alt={intl.formatMessage({ id: "A photo of the room" })} alt={intl.formatMessage({ id: "A photo of the room" })}
src={room.imageSrc} // TODO: Correct image URL
src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
/> />
</div> </div>
) )

51
components/HotelReservation/SelectRate/RoomSelection/index.tsx
View File

@@ -1,5 +1,8 @@
"use client" "use client"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import RoomCard from "./RoomCard" import RoomCard from "./RoomCard"
@@ -8,12 +11,11 @@ import styles from "./roomSelection.module.css"
import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection" import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
export default function RoomSelection({ export default function RoomSelection({
rates, roomConfigurations,
nrOfNights,
nrOfAdults,
}: RoomSelectionProps) { }: RoomSelectionProps) {
const router = useRouter() const router = useRouter()
const searchParams = useSearchParams() const searchParams = useSearchParams()
const intl = useIntl()
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault() e.preventDefault()
@@ -25,31 +27,28 @@ export default function RoomSelection({
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<ul className={styles.roomList}> <form
{rates.map((room) => ( method="GET"
<li key={room.id}> action={`select-bed?${searchParams}`}
<form onSubmit={handleSubmit}
method="GET" >
action={`select-bed?${searchParams}`} <ul className={styles.roomList}>
onSubmit={handleSubmit} {roomConfigurations.roomConfigurations.map((roomConfiguration) => (
> <li key={roomConfiguration.roomType}>
<input
type="hidden"
name="roomClass"
value={room.id}
id={`room-${room.id}`}
/>
<RoomCard <RoomCard
room={room} rateDefinitions={roomConfigurations.rateDefinitions}
nrOfAdults={nrOfAdults} roomConfiguration={roomConfiguration}
nrOfNights={nrOfNights}
breakfastIncluded={room.breakfastIncluded}
/> />
</form> </li>
</li> ))}
))} </ul>
</ul> <div className={styles.summary}>
<div className={styles.summary}>This is summary</div> This is summary
<Button type="submit" size="small" theme="primaryDark">
{intl.formatMessage({ id: "Choose room" })}
</Button>
</div>
</form>
</div> </div>
) )
} }

2
components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
View File

@@ -27,4 +27,6 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: white;
padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
} }

1
lib/api/endpoints.ts
View File

@@ -7,6 +7,7 @@ export namespace endpoints {
} }
export const enum v1 { export const enum v1 {
hotelsAvailability = "availability/v1/availabilities/city", hotelsAvailability = "availability/v1/availabilities/city",
roomsAvailability = "availability/v1/availabilities/hotel",
profile = "profile/v1/Profile", profile = "profile/v1/Profile",
booking = "booking/v1/Bookings", booking = "booking/v1/Bookings",
creditCards = `${profile}/creditCards`, creditCards = `${profile}/creditCards`,

11
server/routers/hotels/input.ts
View File

@@ -17,6 +17,17 @@ export const getHotelsAvailabilityInputSchema = z.object({
attachedProfileId: z.string().optional().default(""), attachedProfileId: z.string().optional().default(""),
}) })
export const getRoomsAvailabilityInputSchema = z.object({
hotelId: z.number(),
roomStayStartDate: z.string(),
roomStayEndDate: z.string(),
adults: z.number(),
children: z.number().optional().default(0),
promotionCode: z.string().optional(),
reservationProfileType: z.string().optional().default(""),
attachedProfileId: z.string().optional().default(""),
})
export const getRatesInputSchema = z.object({ export const getRatesInputSchema = z.object({
hotelId: z.string(), hotelId: z.string(),
}) })

80
server/routers/hotels/output.ts
View File

@@ -572,6 +572,86 @@ export type HotelsAvailability = z.infer<typeof hotelsAvailabilitySchema>
export type HotelsAvailabilityPrices = export type HotelsAvailabilityPrices =
HotelsAvailability["data"][number]["attributes"]["bestPricePerNight"] HotelsAvailability["data"][number]["attributes"]["bestPricePerNight"]
const productSchema = z.object({
productType: z.object({
public: z.object({
rateCode: z.string(),
rateType: z.string().optional(),
localPrice: z.object({
pricePerNight: z.string(),
pricePerStay: z.string(),
currency: z.string(),
}),
requestedPrice: z
.object({
pricePerNight: z.string(),
pricePerStay: z.string(),
currency: z.string(),
})
.optional(),
}),
member: z.object({
rateCode: z.string(),
rateType: z.string().optional(),
localPrice: z.object({
pricePerNight: z.string(),
pricePerStay: z.string(),
currency: z.string(),
}),
requestedPrice: z
.object({
pricePerNight: z.string(),
pricePerStay: z.string(),
currency: z.string(),
})
.optional(),
}),
}),
})
const roomConfigurationSchema = z.object({
status: z.string(),
bedType: z.string(),
roomType: z.string(),
roomsLeft: z.number(),
features: z.array(z.object({ inventory: z.number(), code: z.string() })),
products: z.array(productSchema),
})
const rateDefinitionSchema = z.object({
title: z.string(),
breakfastIncluded: z.boolean(),
rateType: z.string().optional(),
rateCode: z.string(),
generalTerms: z.array(z.string()),
cancellationRule: z.string(),
cancellationText: z.string(),
mustBeGuaranteed: z.boolean(),
})
const roomsAvailabilitySchema = z
.object({
data: z.object({
attributes: z.object({
checkInDate: z.string(),
checkOutDate: z.string(),
occupancy: occupancySchema.optional(),
hotelId: z.number(),
roomConfigurations: z.array(roomConfigurationSchema),
rateDefinitions: z.array(rateDefinitionSchema),
}),
relationships: linksSchema.optional(),
type: z.string().optional(),
}),
})
.transform((o) => o.data.attributes)
export const getRoomsAvailabilitySchema = roomsAvailabilitySchema
export type RoomsAvailability = z.infer<typeof roomsAvailabilitySchema>
export type RoomConfiguration = z.infer<typeof roomConfigurationSchema>
export type Product = z.infer<typeof productSchema>
export type RateDefinition = z.infer<typeof rateDefinitionSchema>
const flexibilityPrice = z.object({ const flexibilityPrice = z.object({
standard: z.number(), standard: z.number(),
member: z.number(), member: z.number(),

129
server/routers/hotels/query.ts
View File

@@ -24,11 +24,13 @@ import {
getHotelsAvailabilityInputSchema, getHotelsAvailabilityInputSchema,
getlHotelDataInputSchema, getlHotelDataInputSchema,
getRatesInputSchema, getRatesInputSchema,
getRoomsAvailabilityInputSchema,
} from "./input" } from "./input"
import { import {
getHotelDataSchema, getHotelDataSchema,
getHotelsAvailabilitySchema, getHotelsAvailabilitySchema,
getRatesSchema, getRatesSchema,
getRoomsAvailabilitySchema,
roomSchema, roomSchema,
} from "./output" } from "./output"
import tempRatesData from "./tempRatesData.json" import tempRatesData from "./tempRatesData.json"
@@ -61,6 +63,16 @@ const hotelsAvailabilityFailCounter = meter.createCounter(
"trpc.hotel.availability.hotels-fail" "trpc.hotel.availability.hotels-fail"
) )
const roomsAvailabilityCounter = meter.createCounter(
"trpc.hotel.availability.rooms"
)
const roomsAvailabilitySuccessCounter = meter.createCounter(
"trpc.hotel.availability.rooms-success"
)
const roomsAvailabilityFailCounter = meter.createCounter(
"trpc.hotel.availability.rooms-fail"
)
async function getContentstackData( async function getContentstackData(
locale: string, locale: string,
uid: string | null | undefined uid: string | null | undefined
@@ -376,6 +388,123 @@ export const hotelQueryRouter = router({
.flatMap((hotels) => hotels.attributes), .flatMap((hotels) => hotels.attributes),
} }
}), }),
rooms: hotelServiceProcedure
.input(getRoomsAvailabilityInputSchema)
.query(async ({ input, ctx }) => {
const {
hotelId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
promotionCode,
reservationProfileType,
attachedProfileId,
} = input
const params: Record<string, string | number | undefined> = {
roomStayStartDate,
roomStayEndDate,
adults,
children,
promotionCode,
reservationProfileType,
attachedProfileId,
}
roomsAvailabilityCounter.add(1, {
hotelId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
promotionCode,
reservationProfileType,
})
console.info(
"api.hotels.roomsAvailability start",
JSON.stringify({ query: { hotelId, params } })
)
const apiResponse = await api.get(
`${api.endpoints.v1.roomsAvailability}/${hotelId}`,
{
headers: {
Authorization: `Bearer ${ctx.serviceToken}`,
},
},
params
)
if (!apiResponse.ok) {
const text = await apiResponse.text()
roomsAvailabilityFailCounter.add(1, {
hotelId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
promotionCode,
reservationProfileType,
error_type: "http_error",
error: JSON.stringify({
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
}),
})
console.error(
"api.hotels.roomsAvailability error",
JSON.stringify({
query: { hotelId, params },
error: {
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
},
})
)
return null
}
const apiJson = await apiResponse.json()
const validateAvailabilityData =
getRoomsAvailabilitySchema.safeParse(apiJson)
if (!validateAvailabilityData.success) {
roomsAvailabilityFailCounter.add(1, {
hotelId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
promotionCode,
reservationProfileType,
error_type: "validation_error",
error: JSON.stringify(validateAvailabilityData.error),
})
console.error(
"api.hotels.roomsAvailability validation error",
JSON.stringify({
query: { hotelId, params },
error: validateAvailabilityData.error,
})
)
throw badRequestError()
}
roomsAvailabilitySuccessCounter.add(1, {
hotelId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
promotionCode,
reservationProfileType,
})
console.info(
"api.hotels.roomsAvailability success",
JSON.stringify({
query: { hotelId, params: params },
})
)
return validateAvailabilityData.data
}),
}), }),
rates: router({ rates: router({
get: publicProcedure get: publicProcedure

6
types/components/hotelReservation/selectRate/flexibilityOption.ts
View File

@@ -1,8 +1,8 @@
import { Product, RateDefinition } from "@/server/routers/hotels/output"
export type FlexibilityOptionProps = { export type FlexibilityOptionProps = {
product: Product | undefined
name: string name: string
value: string value: string
paymentTerm: string paymentTerm: string
standardPrice: number
memberPrice: number
currency: string
} }

11
types/components/hotelReservation/selectRate/roomCard.ts
View File

@@ -1,8 +1,9 @@
import { Rate } from "@/server/routers/hotels/output" import {
RateDefinition,
RoomConfiguration,
} from "@/server/routers/hotels/output"
export type RoomCardProps = { export type RoomCardProps = {
room: Rate roomConfiguration: RoomConfiguration
nrOfNights: number rateDefinitions: RateDefinition[]
nrOfAdults: number
breakfastIncluded: boolean
} }

6
types/components/hotelReservation/selectRate/roomSelection.ts
View File

@@ -1,7 +1,5 @@
import { Rate } from "@/server/routers/hotels/output" import { RoomsAvailability } from "@/server/routers/hotels/output"
export interface RoomSelectionProps { export interface RoomSelectionProps {
rates: Rate[] roomConfigurations: RoomsAvailability
nrOfAdults: number
nrOfNights: number
} }