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

Merged in feat/SW-454-select-room-implement-use-of-api (pull request #652)

Browse Source 
Feat/SW-454 select room implement use of api

Approved-by: Pontus Dreij
This commit is contained in:
Niclas Edenvin
2024-10-09 06:19:10 +00:00
committed by Pontus Dreij
parent 4b9a6d2e8e 88d57035e8
commit 6e2fc38952
13 changed files with 354 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>

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

@@ -9,17 +9,31 @@ 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>
}
const { productType } = product
const { public: publicPrice, member: memberPrice } = productType
const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
publicPrice
const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
memberPrice
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 +43,27 @@ export default function FlexibilityOption({
<div> <div>
<dt>{intl.formatMessage({ id: "Standard price" })}</dt> <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
<dd> <dd>
{standardPrice} {currency} {publicLocalPrice.pricePerNight} {publicLocalPrice.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} {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
{intl.formatMessage({ id: "night" })}
</dd> </dd>
</div> </div>
{publicRequestedPrice && memberRequestedPrice && (
<div>
<dt>{intl.formatMessage({ id: "Approx." })}</dt>
<dd>
{publicRequestedPrice.pricePerNight}/
{memberRequestedPrice.pricePerNight}{" "}
{publicRequestedPrice.currency}
</dd>
</div>
)}
</dl> </dl>
</div> </div>
</label> </label>

76
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,19 +66,14 @@ 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
? intl.formatMessage({
id: "Breakfast included", 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>
) )

35
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}>
{rates.map((room) => (
<li key={room.id}>
<form <form
method="GET" method="GET"
action={`select-bed?${searchParams}`} action={`select-bed?${searchParams}`}
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
<input <ul className={styles.roomList}>
type="hidden" {roomConfigurations.roomConfigurations.map((roomConfiguration) => (
name="roomClass" <li key={roomConfiguration.roomType}>
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}>This is summary</div> <div className={styles.summary}>
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

1
server/routers/user/output.ts
View File

@@ -111,6 +111,7 @@ export const getStaysSchema = z.object({
limit: z.number(), limit: z.number(),
totalCount: z.number(), totalCount: z.number(),
}) })
.optional()
.nullable(), .nullable(),
}) })

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
} }