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

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

Browse Source
This commit is contained in:
Arvid Norlin
2025-04-23 15:47:18 +02:00
committed by Michael Zetterberg
parent a839d05e09
commit 7eeb0bbcac
11 changed files with 75 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
View File

@@ -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}
/>
)
}

40
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
View File

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

7
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/index.tsx
View File

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

8
apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
View File

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