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
-  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+interface ConfirmationProps extends Pick<
+  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>
-        <Link
-          className={styles.link}
-          color="Text/Interactive/Secondary"
-          href={hotel.contactInformation.websiteUrl}
-          textDecoration="underline"
-        >
-          {hotel.contactInformation.websiteUrl}
-        </Link>
+        {url && (
+          <Link
+            className={styles.link}
+            color="Text/Interactive/Secondary"
+            href={url}
+            textDecoration="underline"
+          >
+            {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