feat(SW-2116): RefId instead of confirmationNumber

apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/confirmation.module.css

@@ -1,21 +0,0 @@
-.main {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  display: grid;
-  gap: var(--Spacing-x5);
-  grid-template-areas: "header" "booking";
-  margin: 0 auto;
-  min-height: 100dvh;
-  padding-top: var(--Spacing-x5);
-  width: var(--max-width-page);
-}
-
-@media screen and (min-width: 1367px) {
-  .main {
-    grid-template-areas:
-      "header  receipt"
-      "booking receipt";
-    grid-template-columns: 1fr 340px;
-    grid-template-rows: auto 1fr;
-    padding-top: var(--Spacing-x9);
-  }
-}

apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx

@@ -1,24 +0,0 @@
-"use client"
-import { useRef } from "react"
-
-import Header from "@/components/HotelReservation/BookingConfirmation/Header"
-
-import styles from "./confirmation.module.css"
-
-import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function Confirmation({
-  booking,
-  hotel,
-  children,
-  refId,
-}: React.PropsWithChildren<ConfirmationProps>) {
-  const mainRef = useRef<HTMLElement | null>(null)
-
-  return (
-    <main className={styles.main} ref={mainRef}>
-      <Header booking={booking} hotel={hotel} mainRef={mainRef} refId={refId} />
-      {children}
-    </main>
-  )
-}

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -1,15 +1,22 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
+import { myStay } from "@/constants/routes/myStay"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 
 import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"
 
-export default function ManageBooking({ bookingUrl }: ManageBookingProps) {
+export default function ManageBooking({ refId }: ManageBookingProps) {
   const intl = useIntl()
+  const lang = useLang()
+
+  const bookingUrl = `${myStay[lang]}?RefId=${refId}`
 
   return (
     <Button

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/index.tsx

@@ -1,15 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { myStay } from "@/constants/routes/myStay"
-
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import useLang from "@/hooks/useLang"
 
 import AddToCalendar from "../../AddToCalendar"
 import AddToCalendarButton from "./Actions/AddToCalendarButton"
-// import DownloadInvoice from "./Actions/DownloadInvoice"
 import { generateDateTime } from "./Actions/helpers"
 import ManageBooking from "./Actions/ManageBooking"
 
@@ -22,11 +18,9 @@ import type { BookingConfirmationHeaderProps } from "@/types/components/hotelRes
 export default function Header({
   booking,
   hotel,
-  // mainRef,
   refId,
 }: BookingConfirmationHeaderProps) {
   const intl = useIntl()
-  const lang = useLang()
 
   const text = intl.formatMessage({
     defaultMessage:
@@ -52,8 +46,6 @@ export default function Header({
     url: hotel.contactInformation.websiteUrl,
   }
 
-  const bookingUrlPath = `${myStay[lang]}?RefId=${refId}`
-
   return (
     <header className={styles.header}>
       <hgroup className={styles.hgroup}>
@@ -74,9 +66,7 @@ export default function Header({
           hotelName={hotel.name}
           renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
         />
-        <ManageBooking bookingUrl={bookingUrlPath} />
-        {/* Download Invoice will be added later (currently available on My Stay) */}
-        {/* <DownloadInvoice mainRef={mainRef} /> */}
+        <ManageBooking refId={refId} />
       </div>
     </header>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/index.tsx

@@ -1,9 +1,8 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
-import { homeHrefs } from "@/constants/homeHrefs"
-import { myBooking } from "@/constants/myBooking"
-import { env } from "@/env/client"
+import { myStay } from "@/constants/routes/myStay"
 
 import useLang from "@/hooks/useLang"
 
@@ -13,22 +12,17 @@ import styles from "./promos.module.css"
 
 import type { PromosProps } from "@/types/components/hotelReservation/bookingConfirmation/promos"
 
-export default function Promos({
-  confirmationNumber,
-  hotelId,
-  lastName,
-}: PromosProps) {
+export default function Promos({ refId, hotelId }: PromosProps) {
   const intl = useIntl()
   const lang = useLang()
-  const homeUrl = homeHrefs[env.NEXT_PUBLIC_NODE_ENV][lang]
-  const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang]
+
   return (
     <div className={styles.promos}>
       <Promo
         buttonText={intl.formatMessage({
           defaultMessage: "View and buy add-ons",
         })}
-        href={`${myBookingUrl}?bookingId=${confirmationNumber}&lastName=${lastName}`}
+        href={`${myStay[lang]}?RefId=${refId}`}
         text={intl.formatMessage({
           defaultMessage:
             "Discover the little extra touches to make your upcoming stay even more unforgettable.",
@@ -41,7 +35,7 @@ export default function Promos({
         buttonText={intl.formatMessage({
           defaultMessage: "Book another stay",
         })}
-        href={`${homeUrl}?hotel=${hotelId}`}
+        href={`/${lang}?hotel=${hotelId}`}
         text={intl.formatMessage({
           defaultMessage:
             "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",

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

@@ -20,14 +20,16 @@ import { CurrencyEnum } from "@/types/enums/currency"
 export function LinkedReservation({
   checkInTime,
   checkOutTime,
-  confirmationNumber,
+  refId,
   roomIndex,
 }: LinkedReservationProps) {
   const lang = useLang()
-  const { data, refetch, isLoading } = trpc.booking.get.useQuery({
-    confirmationNumber,
+
+  const { data, refetch, isLoading } = trpc.booking.confirmation.useQuery({
+    refId,
     lang,
   })
+
   const {
     setRoom,
     setFormattedTotalCost,
@@ -41,6 +43,7 @@ export function LinkedReservation({
     totalBookingPrice: state.totalBookingPrice,
     totalBookingCheques: state.totalBookingCheques,
   }))
+
   const intl = useIntl()
 
   useEffect(() => {
@@ -78,7 +81,9 @@ export function LinkedReservation({
   if (!data?.room) {
     return <Retry handleRefetch={refetch} />
   }
+
   const { booking, room } = data
+
   return (
     <Room
       checkInDate={booking.checkInDate}
@@ -86,8 +91,8 @@ export function LinkedReservation({
       checkInTime={checkInTime}
       checkOutTime={checkOutTime}
       confirmationNumber={booking.confirmationNumber}
-      guest={booking.guest}
       guaranteeInfo={booking.guaranteeInfo}
+      guest={booking.guest}
       img={room.images[0]}
       rateDefinition={booking.rateDefinition}
       roomName={room.name}

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

@@ -9,30 +9,35 @@ import styles from "./rooms.module.css"
 
 import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
 
+async function RoomTitle({ nr }: { nr: number }) {
+  const intl = await getIntl()
+
+  return (
+    <Typography variant="Title/Subtitle/md">
+      <h2 className={styles.roomTitle}>
+        {intl.formatMessage(
+          {
+            defaultMessage: "Room {roomIndex}",
+          },
+          { roomIndex: nr }
+        )}
+      </h2>
+    </Typography>
+  )
+}
+
 export default async function Rooms({
   booking,
   checkInTime,
   checkOutTime,
   mainRoom,
-  linkedReservations,
 }: BookingConfirmationRoomsProps) {
-  const intl = await getIntl()
+  const { linkedReservations } = booking
 
   return (
     <section className={styles.rooms}>
       <div className={styles.room}>
-        {linkedReservations.length ? (
-          <Typography variant="Title/Subtitle/md">
-            <h2 className={styles.roomTitle}>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "Room {roomIndex}",
-                },
-                { roomIndex: 1 }
-              )}
-            </h2>
-          </Typography>
-        ) : null}
+        {linkedReservations.length ? <RoomTitle nr={1} /> : null}
         <Room
           checkInDate={booking.checkInDate}
           checkOutDate={booking.checkOutDate}
@@ -49,20 +54,11 @@ export default async function Rooms({
 
       {linkedReservations.map((reservation, idx) => (
         <div className={styles.room} key={reservation.confirmationNumber}>
-          <Typography variant="Title/Subtitle/md">
-            <h2 className={styles.roomTitle}>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "Room {roomIndex}",
-                },
-                { roomIndex: idx + 2 }
-              )}
-            </h2>
-          </Typography>
+          <RoomTitle nr={idx + 2} />
           <LinkedReservation
             checkInTime={checkInTime}
             checkOutTime={checkOutTime}
-            confirmationNumber={reservation.confirmationNumber}
+            refId={reservation.refId}
             roomIndex={idx + 1}
           />
         </div>

apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/index.tsx

@@ -27,7 +27,7 @@ export default function Tracking({
     getTracking(
       lang,
       bookingConfirmation.booking,
-      bookingConfirmation.hotel,
+      bookingConfirmation.hotelData.hotel,
       rooms
     )
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts

@@ -67,7 +67,7 @@ function mapAncillaryPackage(
 export function getTracking(
   lang: Lang,
   booking: BookingConfirmation["booking"],
-  hotel: BookingConfirmation["hotel"],
+  hotel: BookingConfirmation["hotelData"]["hotel"],
   rooms: Room[]
 ) {
   const arrivalDate = new Date(booking.checkInDate)

apps/scandic-web/components/HotelReservation/BookingConfirmation/bookingConfirmation.module.css

@@ -1,22 +0,0 @@
-.booking {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x5);
-  grid-area: booking;
-  padding-bottom: var(--Spacing-x9);
-}
-
-.aside {
-  display: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .mobileReceipt {
-    display: none;
-  }
-
-  .aside {
-    display: grid;
-    grid-area: receipt;
-  }
-}

apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx

@@ -1,83 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
-
-import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
-import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
-import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
-import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
-import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
-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"
-import Tracking from "./Tracking"
-import { mapRoomState } from "./utils"
-
-import styles from "./bookingConfirmation.module.css"
-
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default async function BookingConfirmation({
-  confirmationNumber,
-}: BookingConfirmationProps) {
-  const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
-
-  if (!bookingConfirmation) {
-    return notFound()
-  }
-  const { booking, hotel, room } = bookingConfirmation
-  if (!room) {
-    return notFound()
-  }
-
-  const refId = encrypt(
-    `${booking.confirmationNumber},${booking.guest.lastName}`
-  )
-
-  const intl = await getIntl()
-  return (
-    <BookingConfirmationProvider
-      bookingCode={booking.bookingCode}
-      currencyCode={booking.currencyCode}
-      fromDate={booking.checkInDate}
-      toDate={booking.checkOutDate}
-      rooms={[
-        mapRoomState(booking, room, intl),
-        // null represents "known but not yet fetched rooms" and is used to render placeholders correctly
-        ...Array(booking.linkedReservations.length).fill(null),
-      ]}
-      vat={booking.vatPercentage}
-    >
-      <Confirmation booking={booking} hotel={hotel} room={room} refId={refId}>
-        <div className={styles.booking}>
-          <Alerts booking={booking} />
-          <Rooms
-            booking={booking}
-            checkInTime={hotel.hotelFacts.checkin.checkInTime}
-            checkOutTime={hotel.hotelFacts.checkin.checkOutTime}
-            mainRoom={room}
-            linkedReservations={booking.linkedReservations}
-          />
-          <PaymentDetails />
-          <Divider color="primaryLightSubtle" />
-          <HotelDetails hotel={hotel} />
-          <Promos refId={refId} hotelId={hotel.operaId} />
-          <div className={styles.mobileReceipt}>
-            <Receipt />
-          </div>
-        </div>
-        <aside className={styles.aside}>
-          <SidePanel variant="receipt">
-            <Receipt />
-          </SidePanel>
-        </aside>
-      </Confirmation>
-      <Tracking bookingConfirmation={bookingConfirmation} />
-    </BookingConfirmationProvider>
-  )
-}

apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts

@@ -5,10 +5,10 @@ import type { IntlShape } from "react-intl"
 import type { BookingConfirmationRoom } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import { CurrencyEnum } from "@/types/enums/currency"
-import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation"
+import type { BookingSchema } from "@/types/trpc/routers/booking/confirmation"
 
 export function mapRoomState(
-  booking: BookingConfirmationSchema,
+  booking: BookingSchema,
   room: BookingConfirmationRoom,
   intl: IntlShape
 ) {