fix: move crunching of data to trpc layer

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@summary/page.tsx

@@ -1,13 +1,12 @@
+import { notFound } from "next/navigation"
+
 import {
-  getHotelData,
   getProfileSafely,
-  getRoomAvailability,
+  getSelectedRoomAvailability,
 } from "@/lib/trpc/memoizedRequests"
-import { HotelIncludeEnum } from "@/server/routers/hotels/input"
 
 import Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import { getQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-import { formatNumber } from "@/utils/format"
 
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { LangParams, PageArgs, SearchParams } from "@/types/params"
@@ -20,68 +19,61 @@ export default async function SummaryPage({
   const { hotel, adults, children, roomTypeCode, rateCode, fromDate, toDate } =
     getQueryParamsForEnterDetails(selectRoomParams)
 
-  const [user, hotelData, availability] = await Promise.all([
+  if (!roomTypeCode || !rateCode) {
+    console.log("No roomTypeCode or rateCode")
+    return notFound()
+  }
+
+  const [user, availability] = await Promise.all([
     getProfileSafely(),
-    getHotelData({
+    getSelectedRoomAvailability({
-      hotelId: hotel,
-      language: params.lang,
-      include: [HotelIncludeEnum.RoomCategories],
-    }),
-    getRoomAvailability({
       hotelId: parseInt(hotel),
       adults,
       children,
       roomStayStartDate: fromDate,
       roomStayEndDate: toDate,
+      rateCode,
+      roomTypeCode,
     }),
   ])
 
-  if (!hotelData?.data || !hotelData?.included || !availability) {
+  if (!availability) {
-    console.error("No hotel or availability data", hotelData, availability)
+    console.error("No hotel or availability data", availability)
     // TODO: handle this case
     return null
   }
 
-  const cancellationText =
-    availability?.rateDefinitions.find((rate) => rate.rateCode === rateCode)
-      ?.cancellationText ?? ""
-  const chosenRoom = availability.roomConfigurations.find(
-    (availRoom) => availRoom.roomTypeCode === roomTypeCode
-  )
-
-  if (!chosenRoom) {
-    // TODO: handle this case
-    console.error("No chosen room", chosenRoom)
-    return null
-  }
-
-  const memberRate = chosenRoom.products.find(
-    (rate) => rate.productType.member?.rateCode === rateCode
-  )?.productType.member
-
-  const publicRate = chosenRoom.products.find(
-    (rate) => rate.productType.public?.rateCode === rateCode
-  )?.productType.public
-
   const prices = user
     ? {
-        local: memberRate?.localPrice.pricePerStay,
+        local: {
-        euro: memberRate?.requestedPrice?.pricePerStay,
+          price: availability.memberRate?.localPrice.pricePerStay,
+          currency: availability.memberRate?.localPrice.currency,
+        },
+        euro: {
+          price: availability.memberRate?.requestedPrice?.pricePerStay,
+          currency: availability.memberRate?.requestedPrice?.currency,
+        },
       }
     : {
-        local: publicRate?.localPrice.pricePerStay,
+        local: {
-        euro: publicRate?.requestedPrice?.pricePerStay,
+          price: availability.publicRate?.localPrice.pricePerStay,
+          currency: availability.publicRate?.localPrice.currency,
+        },
+        euro: {
+          price: availability.publicRate?.requestedPrice?.pricePerStay,
+          currency: availability.publicRate?.requestedPrice?.currency,
+        },
       }
 
   return (
     <Summary
       isMember={!!user}
       room={{
-        roomType: chosenRoom.roomType,
+        roomType: availability.selectedRoom.roomType,
-        localPrice: formatNumber(parseInt(prices.local ?? "0")),
+        localPrice: prices.local,
-        euroPrice: formatNumber(parseInt(prices.euro ?? "0")),
+        euroPrice: prices.euro,
         adults,
-        cancellationText,
+        cancellationText: availability.cancellationText,
       }}
     />
   )

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx

@@ -6,6 +6,7 @@ import {
   getHotelData,
   getProfileSafely,
   getRoomAvailability,
+  getSelectedRoomAvailability,
 } from "@/lib/trpc/memoizedRequests"
 import { HotelIncludeEnum } from "@/server/routers/hotels/input"
 
@@ -36,9 +37,7 @@ export default async function StepPage({
   searchParams,
 }: PageArgs<LangParams & { step: StepEnum }, SelectRateSearchParams>) {
   const { lang } = params
-  if (!searchParams.hotel) {
+
-    redirect(`/${lang}`)
-  }
   void getBreakfastPackages(searchParams.hotel)
 
   const intl = await getIntl()
@@ -62,24 +61,37 @@ export default async function StepPage({
     rateCode
   })
 
-  const hotelData = await getHotelData({
-    hotelId,
-    language: lang,
-    include: [HotelIncludeEnum.RoomCategories],
-  })
 
-  const user = await getProfileSafely()
+  if (!rateCode || !roomTypeCode) {
-  const savedCreditCards = await getCreditCardsSafely()
+    return notFound()
-  const breakfastPackages = await getBreakfastPackages(searchParams.hotel)
+  }
 
-  const roomAvailability = await getRoomAvailability({
+  const [
-    hotelId: parseInt(hotelId),
+    hotelData,
-    adults,
+    user,
-    children,
+    savedCreditCards,
-    roomStayStartDate: fromDate,
+    breakfastPackages,
-    roomStayEndDate: toDate,
+    roomAvailability,
-    rateCode
+  ] = await Promise.all([
-  })
+    getHotelData({
+      hotelId,
+      language: lang,
+      include: [HotelIncludeEnum.RoomCategories],
+    }),
+
+    getProfileSafely(),
+    getCreditCardsSafely(),
+    getBreakfastPackages(searchParams.hotel),
+    getSelectedRoomAvailability({
+      hotelId: parseInt(searchParams.hotel),
+      adults,
+      children,
+      roomStayStartDate: fromDate,
+      roomStayEndDate: toDate,
+      rateCode,
+      roomTypeCode,
+    }),
+  ])
 
   if (!isValidStep(params.step) || !hotelData || !roomAvailability) {
     return notFound()
@@ -100,10 +112,8 @@ export default async function StepPage({
     id: "Select payment method",
   })
 
-  const availableRoom = roomAvailability?.roomConfigurations
+  const availableRoom = roomAvailability.selectedRoom?.roomType
-    .filter((room) => room.status === "Available")
+  const bedTypes = hotelData.included
-    .find((room) => room.roomTypeCode === roomTypeCode)?.roomType
-  const roomTypes = hotelData.included
     ?.find((room) => room.name === availableRoom)
     ?.roomTypes.map((room) => ({
       description: room.mainBed.description,
@@ -116,13 +126,13 @@ export default async function StepPage({
       <HistoryStateManager />
 
       {/* TODO: How to handle no beds found? */}
-      {roomTypes ? (
+      {bedTypes ? (
         <SectionAccordion
           header="Select bed"
           step={StepEnum.selectBed}
           label={intl.formatMessage({ id: "Request bedtype" })}
         >
-          <BedType roomTypes={roomTypes} />
+          <BedType bedTypes={bedTypes} />
         </SectionAccordion>
       ) : null}
 

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -14,28 +14,20 @@ import { bedTypeSchema } from "./schema"
 
 import styles from "./bedOptions.module.css"
 
-import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
+import type {
+  BedTypeProps,
+  BedTypeSchema,
+} from "@/types/components/hotelReservation/enterDetails/bedType"
 
-export default function BedType({
+export default function BedType({ bedTypes }: BedTypeProps) {
-  roomTypes,
-}: {
-  roomTypes: {
-    description: string
-    size: {
-      min: number
-      max: number
-    }
-    value: string
-  }[]
-}) {
   const intl = useIntl()
   const bedType = useEnterDetailsStore((state) => state.userData.bedType)
 
   const methods = useForm<BedTypeSchema>({
     defaultValues: bedType
       ? {
-        bedType,
+          bedType,
-      }
+        }
       : undefined,
     criteriaMode: "all",
     mode: "all",
@@ -64,7 +56,7 @@ export default function BedType({
   return (
     <FormProvider {...methods}>
       <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
-        {roomTypes.map((roomType) => {
+        {bedTypes.map((roomType) => {
           const width =
             roomType.size.max === roomType.size.min
               ? `${roomType.size.min} cm`

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -13,10 +13,12 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
+import { formatNumber } from "@/utils/format"
 
 import styles from "./summary.module.css"
 
 import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData"
+import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 
 export default function Summary({
@@ -27,15 +29,15 @@ export default function Summary({
   room: RoomsData
 }) {
   const [chosenBed, setChosenBed] = useState<string>()
-  const [chosenBreakfast, setCosenBreakfast] = useState<string>()
+  const [chosenBreakfast, setChosenBreakfast] = useState<
+    BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST
+  >()
   const intl = useIntl()
   const lang = useLang()
   const { fromDate, toDate, bedType, breakfast } = useEnterDetailsStore(
     (state) => ({
       fromDate: state.roomData.fromDate,
       toDate: state.roomData.toDate,
-      rooms: state.roomData.room,
-      hotel: state.roomData.hotel,
       bedType: state.userData.bedType,
       breakfast: state.userData.breakfast,
     })
@@ -55,10 +57,9 @@ export default function Summary({
 
   useEffect(() => {
     setChosenBed(bedType)
-    if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
+
-      setCosenBreakfast("No breakfast")
+    if (breakfast) {
-    } else if (breakfast) {
+      setChosenBreakfast(breakfast)
-      setCosenBreakfast("Breakfast buffet")
     }
   }, [bedType, breakfast])
 
@@ -80,7 +81,10 @@ export default function Summary({
             <Caption color={color}>
               {intl.formatMessage(
                 { id: "{amount} {currency}" },
-                { amount: room.localPrice, currency: "SEK" }
+                {
+                  amount: formatNumber(parseInt(room.localPrice.price ?? "0")),
+                  currency: room.localPrice.currency,
+                }
               )}
             </Caption>
           </div>
@@ -118,24 +122,41 @@ export default function Summary({
             <Caption color="uiTextMediumContrast">
               {intl.formatMessage(
                 { id: "{amount} {currency}" },
-                { amount: "0", currency: "SEK" }
+                { amount: "0", currency: room.localPrice.currency }
               )}
             </Caption>
           </div>
         ) : null}
 
         {chosenBreakfast ? (
-          <div className={styles.entry}>
+          chosenBreakfast === BreakfastPackageEnum.NO_BREAKFAST ? (
-            <Body color="textHighContrast">
+            <div className={styles.entry}>
-              {intl.formatMessage({ id: chosenBreakfast })}
+              <Body color="textHighContrast">
-            </Body>
+                {intl.formatMessage({ id: "No breakfast" })}
-            <Caption color="uiTextMediumContrast">
+              </Body>
-              {intl.formatMessage(
+              <Caption color="uiTextMediumContrast">
-                { id: "{amount} {currency}" },
+                {intl.formatMessage(
-                { amount: "0", currency: "SEK" }
+                  { id: "{amount} {currency}" },
-              )}
+                  { amount: "0", currency: room.localPrice.currency }
-            </Caption>
+                )}
-          </div>
+              </Caption>
+            </div>
+          ) : (
+            <div className={styles.entry}>
+              <Body color="textHighContrast">
+                {intl.formatMessage({ id: "Breakfast buffet" })}
+              </Body>
+              <Caption color="uiTextMediumContrast">
+                {intl.formatMessage(
+                  { id: "{amount} {currency}" },
+                  {
+                    amount: chosenBreakfast.totalPrice,
+                    currency: chosenBreakfast.currency,
+                  }
+                )}
+              </Caption>
+            </div>
+          )
         ) : null}
       </div>
       <Divider color="primaryLightSubtle" />
@@ -156,14 +177,20 @@ export default function Summary({
             <Body textTransform="bold">
               {intl.formatMessage(
                 { id: "{amount} {currency}" },
-                { amount: room.localPrice, currency: "SEK" } // TODO: calculate total price
+                {
+                  amount: formatNumber(parseInt(room.localPrice.price ?? "0")),
+                  currency: room.localPrice.currency,
+                }
               )}
             </Body>
             <Caption color="uiTextMediumContrast">
               {intl.formatMessage({ id: "Approx." })}{" "}
               {intl.formatMessage(
                 { id: "{amount} {currency}" },
-                { amount: room.euroPrice, currency: "EUR" }
+                {
+                  amount: formatNumber(parseInt(room.euroPrice.price ?? "0")),
+                  currency: room.euroPrice.currency,
+                }
               )}
             </Caption>
           </div>

components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts

@@ -23,10 +23,15 @@ interface ListCardProps extends BaseCardProps {
 
 interface TextCardProps extends BaseCardProps {
   list?: never
-  text?: React.ReactNode
+  text: React.ReactNode
 }
 
-export type CardProps = ListCardProps | TextCardProps
+interface CleanCardProps extends BaseCardProps {
+  list?: never
+  text?: never
+}
+
+export type CardProps = ListCardProps | TextCardProps | CleanCardProps
 
 export type CheckboxProps =
   | Omit<ListCardProps, "type">
@@ -34,6 +39,7 @@ export type CheckboxProps =
 export type RadioProps =
   | Omit<ListCardProps, "type">
   | Omit<TextCardProps, "type">
+  | Omit<CleanCardProps, "type">
 
 export interface ListProps extends Pick<ListCardProps, "declined"> {
   list?: ListCardProps["list"]

lib/trpc/memoizedRequests/index.ts

@@ -3,6 +3,7 @@ import { cache } from "react"
 import { Lang } from "@/constants/languages"
 import {
   GetRoomsAvailabilityInput,
+  GetSelectedRoomAvailabilityInput,
   HotelIncludeEnum,
 } from "@/server/routers/hotels/input"
 
@@ -95,6 +96,14 @@ export const getRoomAvailability = cache(
   }
 )
 
+export const getSelectedRoomAvailability = cache(
+  async function getMemoizedRoomAvailability(
+    args: GetSelectedRoomAvailabilityInput
+  ) {
+    return serverClient().hotel.availability.room(args)
+  }
+)
+
 export const getFooter = cache(async function getMemoizedFooter() {
   return serverClient().contentstack.base.footer()
 })

server/routers/hotels/input.ts

@@ -29,6 +29,23 @@ export const getRoomsAvailabilityInputSchema = z.object({
   rateCode: z.string().optional(),
 })
 
+export const getSelectedRoomAvailabilityInputSchema = z.object({
+  hotelId: z.number(),
+  roomStayStartDate: z.string(),
+  roomStayEndDate: z.string(),
+  adults: z.number(),
+  children: z.string().optional(),
+  promotionCode: z.string().optional(),
+  reservationProfileType: z.string().optional().default(""),
+  attachedProfileId: z.string().optional().default(""),
+  rateCode: z.string(),
+  roomTypeCode: z.string(),
+})
+
+export type GetSelectedRoomAvailabilityInput = z.input<
+  typeof getSelectedRoomAvailabilityInputSchema
+>
+
 export type GetRoomsAvailabilityInput = z.input<
   typeof getRoomsAvailabilityInputSchema
 >

server/routers/hotels/query.ts

@@ -37,6 +37,7 @@ import {
   getHotelsAvailabilityInputSchema,
   getRatesInputSchema,
   getRoomsAvailabilityInputSchema,
+  getSelectedRoomAvailabilityInputSchema,
 } from "./input"
 import {
   breakfastPackagesSchema,
@@ -93,6 +94,16 @@ const roomsAvailabilityFailCounter = meter.createCounter(
   "trpc.hotel.availability.rooms-fail"
 )
 
+const selectedRoomAvailabilityCounter = meter.createCounter(
+  "trpc.hotel.availability.room"
+)
+const selectedRoomAvailabilitySuccessCounter = meter.createCounter(
+  "trpc.hotel.availability.room-success"
+)
+const selectedRoomAvailabilityFailCounter = meter.createCounter(
+  "trpc.hotel.availability.room-fail"
+)
+
 const breakfastPackagesCounter = meter.createCounter("trpc.package.breakfast")
 const breakfastPackagesSuccessCounter = meter.createCounter(
   "trpc.package.breakfast-success"
@@ -545,6 +556,161 @@ export const hotelQueryRouter = router({
 
         return validateAvailabilityData.data
       }),
+    room: serviceProcedure
+      .input(getSelectedRoomAvailabilityInputSchema)
+      .query(async ({ input, ctx }) => {
+        const {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+          attachedProfileId,
+          rateCode,
+          roomTypeCode,
+        } = input
+
+        const params: Record<string, string | number | undefined> = {
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          ...(children && { children }),
+          promotionCode,
+          reservationProfileType,
+          attachedProfileId,
+        }
+
+        selectedRoomAvailabilityCounter.add(1, {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+        })
+        console.info(
+          "api.hotels.selectedRoomAvailability start",
+          JSON.stringify({ query: { hotelId, params } })
+        )
+        const apiResponseAvailability = await api.get(
+          api.endpoints.v1.Availability.hotel(hotelId.toString()),
+          {
+            headers: {
+              Authorization: `Bearer ${ctx.serviceToken}`,
+            },
+          },
+          params
+        )
+
+        if (!apiResponseAvailability.ok) {
+          const text = await apiResponseAvailability.text()
+          selectedRoomAvailabilityFailCounter.add(1, {
+            hotelId,
+            roomStayStartDate,
+            roomStayEndDate,
+            adults,
+            children,
+            promotionCode,
+            reservationProfileType,
+            error_type: "http_error",
+            error: JSON.stringify({
+              status: apiResponseAvailability.status,
+              statusText: apiResponseAvailability.statusText,
+              text,
+            }),
+          })
+          console.error(
+            "api.hotels.selectedRoomAvailability error",
+            JSON.stringify({
+              query: { hotelId, params },
+              error: {
+                status: apiResponseAvailability.status,
+                statusText: apiResponseAvailability.statusText,
+                text,
+              },
+            })
+          )
+          return null
+        }
+        const apiJsonAvailability = await apiResponseAvailability.json()
+        const validateAvailabilityData =
+          getRoomsAvailabilitySchema.safeParse(apiJsonAvailability)
+        if (!validateAvailabilityData.success) {
+          selectedRoomAvailabilityFailCounter.add(1, {
+            hotelId,
+            roomStayStartDate,
+            roomStayEndDate,
+            adults,
+            children,
+            promotionCode,
+            reservationProfileType,
+            error_type: "validation_error",
+            error: JSON.stringify(validateAvailabilityData.error),
+          })
+          console.error(
+            "api.hotels.selectedRoomAvailability validation error",
+            JSON.stringify({
+              query: { hotelId, params },
+              error: validateAvailabilityData.error,
+            })
+          )
+          throw badRequestError()
+        }
+
+        const selectedRoom = validateAvailabilityData.data.roomConfigurations
+          .filter((room) => room.status === "Available")
+          .find((room) => room.roomTypeCode === roomTypeCode)
+
+        if (!selectedRoom) {
+          console.error("No matching room found")
+          return null
+        }
+
+        const memberRate = selectedRoom.products.find(
+          (rate) => rate.productType.member?.rateCode === rateCode
+        )?.productType.member
+
+        const publicRate = selectedRoom.products.find(
+          (rate) => rate.productType.public?.rateCode === rateCode
+        )?.productType.public
+
+        const mustBeGuaranteed =
+          validateAvailabilityData.data.rateDefinitions.filter(
+            (rate) => rate.rateCode === rateCode
+          )[0].mustBeGuaranteed
+
+        const cancellationText =
+          validateAvailabilityData.data.rateDefinitions.find(
+            (rate) => rate.rateCode === rateCode
+          )?.cancellationText ?? ""
+
+        selectedRoomAvailabilitySuccessCounter.add(1, {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+        })
+        console.info(
+          "api.hotels.selectedRoomAvailability success",
+          JSON.stringify({
+            query: { hotelId, params: params },
+          })
+        )
+
+        return {
+          selectedRoom,
+          mustBeGuaranteed,
+          cancellationText,
+          memberRate,
+          publicRate,
+        }
+      }),
   }),
   rates: router({
     get: publicProcedure

types/components/hotelReservation/enterDetails/bedType.ts

@@ -2,4 +2,16 @@ import { z } from "zod"
 
 import { bedTypeSchema } from "@/components/HotelReservation/EnterDetails/BedType/schema"
 
+type BedType = {
+  description: string
+  size: {
+    min: number
+    max: number
+  }
+  value: string
+}
+export type BedTypeProps = {
+  bedTypes: BedType[]
+}
+
 export interface BedTypeSchema extends z.output<typeof bedTypeSchema> {}

types/components/hotelReservation/enterDetails/bookingData.ts

@@ -16,10 +16,15 @@ export interface BookingData {
   room: Room[]
 }
 
+type Price = {
+  price?: string
+  currency?: string
+}
+
 export type RoomsData = {
   roomType: string
-  localPrice: string
+  localPrice: Price
-  euroPrice: string
+  euroPrice: Price
   adults: number
   children?: Child[]
   cancellationText: string