feat(SW-2116): avoid passing entire booking object to Room client component

2025-04-23 15:47:18 +02:00
parent a839d05e09
commit 7eeb0bbcac
11 changed files with 75 additions and 43 deletions
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
@@ -78,14 +78,19 @@ export function LinkedReservation({
  if (!data?.room) {
    return <Retry handleRefetch={refetch} />
  }
-
+  const { booking, room } = data
  return (
    <Room
-      booking={data.booking}
+      checkInDate={booking.checkInDate}
+      checkOutDate={booking.checkOutDate}
      checkInTime={checkInTime}
      checkOutTime={checkOutTime}
-      img={data.room.images[0]}
-      roomName={data.room.name}
+      confirmationNumber={booking.confirmationNumber}
+      guest={booking.guest}
+      guaranteeInfo={booking.guaranteeInfo}
+      img={room.images[0]}
+      rateDefinition={booking.rateDefinition}
+      roomName={room.name}
    />
  )
 }
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
@@ -20,24 +20,28 @@ import styles from "./room.module.css"
 import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"

 export default function Room({
-  booking,
+  checkInDate,
+  checkOutDate,
  checkInTime,
  checkOutTime,
+  confirmationNumber,
+  guaranteeInfo,
+  guest,
  img,
+  rateDefinition,
  roomName,
 }: RoomProps) {
  const intl = useIntl()
  const lang = useLang()

-  const guestName = `${booking.guest.firstName} ${booking.guest.lastName}`
-  const fromDate = dt(booking.checkInDate).locale(lang)
-  const toDate = dt(booking.checkOutDate).locale(lang)
-
+  const guestName = `${guest.firstName} ${guest.lastName}`
+  const fromDate = dt(checkInDate).locale(lang)
+  const toDate = dt(checkOutDate).locale(lang)
  const isFlexBooking =
-    booking.rateDefinition.cancellationRule ===
+    rateDefinition.cancellationRule ===
    CancellationRuleEnum.CancellableBefore6PM
  const isChangeBooking =
-    booking.rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
+    rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
  return (
    <article className={styles.room}>
      <header className={styles.header}>
@@ -47,11 +51,11 @@ export default function Room({
              {
                defaultMessage: "Booking number {value}",
              },
-              { value: booking.confirmationNumber }
+              { value: confirmationNumber }
            )}
          </h2>
        </Typography>
-        {booking.rateDefinition.isMemberRate ? (
+        {rateDefinition.isMemberRate ? (
          <div className={styles.benefits}>
            <>
              <MaterialIcon
@@ -67,7 +71,7 @@ export default function Room({
            </>
          </div>
        ) : null}
-        {booking.guaranteeInfo && (
+        {guaranteeInfo && (
          <div className={styles.benefits}>
            <MaterialIcon
              icon="check_circle"
@@ -168,7 +172,7 @@ export default function Room({
                })}
              </Body>
              <Body color="uiTextHighContrast">
-                {booking.rateDefinition.cancellationText}
+                {rateDefinition.cancellationText}
              </Body>
            </li>
            {isFlexBooking || isChangeBooking ? (
@@ -196,25 +200,23 @@ export default function Room({
              })}
            </Body>
            <Body color="uiTextHighContrast">{guestName}</Body>
-            {booking.guest.membershipNumber ? (
+            {guest.membershipNumber ? (
              <Body color="uiTextHighContrast">
                {intl.formatMessage(
                  {
                    defaultMessage: "Friend no. {value}",
                  },
                  {
-                    value: booking.guest.membershipNumber,
+                    value: guest.membershipNumber,
                  }
                )}
              </Body>
            ) : null}
-            {booking.guest.phoneNumber ? (
-              <Body color="uiTextHighContrast">
-                {booking.guest.phoneNumber}
-              </Body>
+            {guest.phoneNumber ? (
+              <Body color="uiTextHighContrast">{guest.phoneNumber}</Body>
            ) : null}
-            {booking.guest.email ? (
-              <Body color="uiTextHighContrast">{booking.guest.email}</Body>
+            {guest.email ? (
+              <Body color="uiTextHighContrast">{guest.email}</Body>
            ) : null}
          </div>
        </div>
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx
@@ -34,10 +34,15 @@ export default async function Rooms({
          </Typography>
        ) : null}
        <Room
-          booking={booking}
+          checkInDate={booking.checkInDate}
+          checkOutDate={booking.checkOutDate}
          checkInTime={checkInTime}
          checkOutTime={checkOutTime}
+          confirmationNumber={booking.confirmationNumber}
+          guaranteeInfo={booking.guaranteeInfo}
+          guest={booking.guest}
          img={mainRoom.images[0]}
+          rateDefinition={booking.rateDefinition}
          roomName={mainRoom.name}
        />
      </div>
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
@@ -1,7 +1,6 @@
 import { notFound } from "next/navigation"

 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
-import { encrypt } from "@/server/routers/utils/encryption"

 import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
 import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
@@ -12,6 +11,7 @@ import SidePanel from "@/components/HotelReservation/SidePanel"
 import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
+import { encrypt } from "@/utils/encryption"

 import Alerts from "./Alerts"
 import Confirmation from "./Confirmation"
@@ -66,11 +66,7 @@ export default async function BookingConfirmation({
          <PaymentDetails />
          <Divider color="primaryLightSubtle" />
          <HotelDetails hotel={hotel} />
-          <Promos
-            confirmationNumber={booking.confirmationNumber}
-            hotelId={hotel.operaId}
-            lastName={booking.guest.lastName}
-          />
+          <Promos refId={refId} hotelId={hotel.operaId} />
          <div className={styles.mobileReceipt}>
            <Receipt />
          </div>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
@@ -10,9 +10,9 @@ import {
  getBookingConfirmation,
  getProfileSafely,
 } from "@/lib/trpc/memoizedRequests"
-import { decrypt } from "@/server/routers/utils/encryption"

 import { getIntl } from "@/i18n"
+import { decrypt } from "@/utils/encryption"

 import AdditionalInfoForm from "../../FindMyBooking/AdditionalInfoForm"
 import accessBooking, {
@@ -132,6 +132,7 @@ export async function Receipt({ refId }: { refId: string }) {
      <main className={styles.main}>
        <div className={styles.form}>
          <AdditionalInfoForm
+            // send refId here?
            confirmationNumber={confirmationNumber}
            lastName={lastName}
          />
--- a/apps/scandic-web/server/routers/booking/query.ts
+++ b/apps/scandic-web/server/routers/booking/query.ts
@@ -7,8 +7,9 @@ import {
  serviceProcedure,
 } from "@/server/trpc"

+import { calculateRefId } from "@/utils/refId"
+
 import { getHotel } from "../hotels/utils"
-import { encrypt } from "../utils/encryption"
 import {
  createRefIdInput,
  getBookingInput,
@@ -169,7 +170,7 @@ export const bookingQueryRouter = router({
    .input(createRefIdInput)
    .mutation(async function ({ input }) {
      const { confirmationNumber, lastName } = input
-      const encryptedRefId = encrypt(`${confirmationNumber},${lastName}`)
+      const encryptedRefId = calculateRefId(confirmationNumber, lastName)

      if (!encryptedRefId) {
        throw serverErrorByStatus(422, "Was not able to encrypt ref id")
--- a/apps/scandic-web/server/routers/user/utils.ts
+++ b/apps/scandic-web/server/routers/user/utils.ts
@@ -4,10 +4,10 @@ import { myStay } from "@/constants/routes/myStay"
 import { env } from "@/env/server"
 import * as api from "@/lib/api"
 import { dt } from "@/lib/dt"
-import { encrypt } from "@/server/routers/utils/encryption"
 import { createCounter } from "@/server/telemetry"

 import { cache } from "@/utils/cache"
+import { encrypt } from "@/utils/encryption"
 import * as maskValue from "@/utils/maskValue"
 import { isValidSession } from "@/utils/session"
 import { getCurrentWebUrl } from "@/utils/url"
--- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/promos.ts
+++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/promos.ts
@@ -1,8 +1,4 @@
-import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
-
-export interface PromosProps
-  extends Pick<
-      BookingConfirmation["booking"],
-      "confirmationNumber" | "hotelId"
-    >,
-    Pick<BookingConfirmation["booking"]["guest"], "lastName"> {}
+export interface PromosProps {
+  hotelId: string
+  refId: string
+}
--- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts
+++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts
@@ -1,9 +1,14 @@
 import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

 export interface RoomProps {
-  booking: BookingConfirmation["booking"]
+  checkInDate: BookingConfirmation["booking"]["checkInDate"]
+  checkOutDate: BookingConfirmation["booking"]["checkOutDate"]
  checkInTime: string
  checkOutTime: string
+  confirmationNumber: string
+  guest: BookingConfirmation["booking"]["guest"]
+  guaranteeInfo: BookingConfirmation["booking"]["guaranteeInfo"]
  img: NonNullable<BookingConfirmation["room"]>["images"][number]
+  rateDefinition: BookingConfirmation["booking"]["rateDefinition"]
  roomName: NonNullable<BookingConfirmation["room"]>["name"]
 }
--- a/apps/scandic-web/server/routers/utils/encryption.ts
+++ b/apps/scandic-web/server/routers/utils/encryption.ts
--- a/apps/scandic-web/utils/refId.ts
+++ b/apps/scandic-web/utils/refId.ts
@@ -0,0 +1,21 @@
+import "server-only"
+
+import { decrypt, encrypt } from "./encryption"
+
+export function calculateRefId(confirmationNumber: string, lastName: string) {
+  const encryptedRefId = encrypt(`${confirmationNumber},${lastName}`)
+
+  return encryptedRefId
+}
+
+export function parseRefId(refId: string) {
+  const data = decrypt(refId)
+  const parts = data.split(",")
+  if (parts.length !== 2) {
+    throw new Error("Invalid refId format")
+  }
+  return {
+    confirmationNumber: parts[0],
+    lastName: parts[1],
+  }
+}