Merged in fix/book-607-page-not-found-confirmation-page (pull request #3345)

* fix(BOOK-607): updated to read from base URL env and contentstack slug instead

* made url optional on interface

* added url to findBooking query

* added the correct (new) link in the confirmation header, add to calendar


Approved-by: Erik Tiekstra

packages/booking-flow/env/server.ts

@@ -9,12 +9,14 @@ export const env = createEnv({
    */
   isServer: typeof window === "undefined" || "Deno" in window,
   server: {
+    PUBLIC_URL: z.string().default(""),
     GOOGLE_STATIC_MAP_KEY: z.string(),
     GOOGLE_STATIC_MAP_SIGNATURE_SECRET: z.string(),
     GOOGLE_DYNAMIC_MAP_ID: z.string(),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
+    PUBLIC_URL: process.env.NEXT_PUBLIC_PUBLIC_URL,
     GOOGLE_STATIC_MAP_KEY: process.env.GOOGLE_STATIC_MAP_KEY,
     GOOGLE_STATIC_MAP_SIGNATURE_SECRET:
       process.env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET,

packages/booking-flow/lib/components/BookingConfirmation/Confirmation/index.tsx

@@ -10,13 +10,16 @@ import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConf
 
 import type { BookingConfirmationRoom } from "../../../types/components/bookingConfirmation/bookingConfirmation"
 
-interface ConfirmationProps
+interface ConfirmationProps extends Pick<
-  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+  BookingConfirmation,
+  "booking" | "hotel" | "url"
+> {
   room: BookingConfirmationRoom
 }
 
 export function Confirmation({
   booking,
+  url,
   hotel,
   children,
 }: React.PropsWithChildren<ConfirmationProps>) {
@@ -24,7 +27,7 @@ export function Confirmation({
 
   return (
     <main className={styles.main} ref={mainRef}>
-      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
+      <Header url={url} booking={booking} hotel={hotel} mainRef={mainRef} />
       {children}
     </main>
   )

packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx

@@ -18,7 +18,7 @@ import type { MutableRefObject } from "react"
 
 interface BookingConfirmationHeaderProps extends Pick<
   BookingConfirmation,
-  "booking" | "hotel"
+  "booking" | "hotel" | "url"
 > {
   mainRef: MutableRefObject<HTMLElement | null>
 }
@@ -26,6 +26,7 @@ interface BookingConfirmationHeaderProps extends Pick<
 export function Header({
   booking,
   hotel,
+  url,
   // mainRef,
 }: BookingConfirmationHeaderProps) {
   const intl = useIntl()
@@ -52,7 +53,7 @@ export function Header({
     startInputType: "utc",
     status: "CONFIRMED",
     title: hotel.name,
-    url: hotel.contactInformation.websiteUrl,
+    url: url ?? undefined,
   }
 
   return (

packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/index.tsx

@@ -11,10 +11,13 @@ import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConf
 
 export function HotelDetails({
   hotel,
+  url,
 }: {
   hotel: BookingConfirmation["hotel"]
+  url: string | null
 }) {
   const intl = useIntl()
+
   return (
     <div className={styles.container}>
       <div className={styles.details}>
@@ -62,14 +65,16 @@ export function HotelDetails({
         >
           {hotel.contactInformation.email}
         </Link>
+        {url && (
           <Link
             className={styles.link}
             color="Text/Interactive/Secondary"
-          href={hotel.contactInformation.websiteUrl}
+            href={url}
             textDecoration="underline"
           >
-          {hotel.contactInformation.websiteUrl}
+            {url}
           </Link>
+        )}
       </div>
     </div>
   )

packages/booking-flow/lib/components/BookingConfirmation/index.tsx

@@ -7,6 +7,7 @@ import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
 
+import { env } from "../../../env/server"
 import { BookingConfirmationProvider } from "../../providers/BookingConfirmationProvider"
 import { getBookingConfirmation } from "../../trpc/memoizedRequests/getBookingConfirmation"
 import { SidePanel } from "../SidePanel"
@@ -41,7 +42,10 @@ export async function BookingConfirmation({
     return notFound()
   }
 
-  const { booking, hotel, room, roomCategories } = bookingConfirmation
+  const { booking, url, hotel, room, roomCategories } = bookingConfirmation
+
+  const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
+  const hotelUrl = new URL(`${baseUrl}${url}`)
 
   if (!room) {
     return notFound()
@@ -69,7 +73,12 @@ export async function BookingConfirmation({
       ]}
       vat={booking.vatPercentage}
     >
-      <Confirmation booking={booking} hotel={hotel} room={room}>
+      <Confirmation
+        url={hotelUrl.toString()}
+        booking={booking}
+        hotel={hotel}
+        room={room}
+      >
         <div className={styles.booking}>
           {membershipFailedError && (
             <Alert
@@ -93,7 +102,7 @@ export async function BookingConfirmation({
           />
           <PaymentDetails />
           <Divider color="Border/Divider/Subtle" />
-          <HotelDetails hotel={hotel} />
+          <HotelDetails url={hotelUrl.toString()} hotel={hotel} />
           {validAlerts.map((alert) => (
             <div key={alert.id}>
               <Alert

packages/trpc/lib/routers/booking/query.ts

@@ -11,6 +11,7 @@ import {
 import { toApiLang } from "../../utils"
 import { encrypt } from "../../utils/encryption"
 import { isValidSession } from "../../utils/session"
+import { getHotelPageUrls } from "../contentstack/hotelPage/utils"
 import { getHotel } from "../hotels/services/getHotel"
 import { createBookingSchema } from "./mutation/create/schema"
 import { getHotelRoom } from "./helpers"
@@ -62,13 +63,19 @@ export const bookingQueryRouter = router({
         return null
       }
 
-      const hotelData = await getHotel(
+      const [hotelData, hotelPages] = await Promise.all([
+        getHotel(
           {
             hotelId: booking.hotelId,
             isCardOnlyPayment: false,
             language: lang,
           },
           serviceToken
+        ),
+        getHotelPageUrls(lang),
+      ])
+      const hotelPage = hotelPages.find(
+        (page) => page.hotelId === booking.hotelId
       )
 
       if (!hotelData) {
@@ -86,6 +93,7 @@ export const bookingQueryRouter = router({
 
       return {
         ...hotelData,
+        url: hotelPage?.url || null,
         booking,
         room: getHotelRoom(hotelData.roomCategories, booking.roomTypeCode),
       }
@@ -132,13 +140,19 @@ export const bookingQueryRouter = router({
         return null
       }
 
-      const hotelData = await getHotel(
+      const [hotelData, hotelPages] = await Promise.all([
+        getHotel(
           {
             hotelId: booking.hotelId,
             isCardOnlyPayment: false,
             language: lang,
           },
           serviceToken
+        ),
+        getHotelPageUrls(lang),
+      ])
+      const hotelPage = hotelPages.find(
+        (page) => page.hotelId === booking.hotelId
       )
 
       if (!hotelData) {
@@ -156,6 +170,7 @@ export const bookingQueryRouter = router({
 
       return {
         ...hotelData,
+        url: hotelPage?.url || null,
         booking,
         room: getHotelRoom(hotelData.roomCategories, booking.roomTypeCode),
       }

packages/trpc/lib/types/bookingConfirmation.ts

@@ -6,12 +6,14 @@ import type {
 } from "../routers/booking/output"
 import type { HotelData, Room } from "./hotel"
 
-export interface BookingConfirmationSchema
+export interface BookingConfirmationSchema extends z.output<
-  extends z.output<typeof bookingConfirmationSchema> {}
+  typeof bookingConfirmationSchema
+> {}
 
 export interface PackageSchema extends z.output<typeof packageSchema> {}
 
 export interface BookingConfirmation extends HotelData {
+  url: string | null
   booking: BookingConfirmationSchema
   room:
     | (Room & {