feat: allow direct access to my stay from booking confirmation

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

@@ -1,4 +1,5 @@
 "use client"
+
 import { useRef } from "react"
 
 import Header from "@/components/HotelReservation/BookingConfirmation/Header"
@@ -11,13 +12,12 @@ 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} />
+      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
       {children}
     </main>
   )

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

@@ -1,15 +1,36 @@
 "use client"
+
+import { useEffect } from "react"
 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({ booking }: ManageBookingProps) {
   const intl = useIntl()
+  const lang = useLang()
+
+  const { refId, confirmationNumber } = booking
+  const { email, firstName, lastName } = booking.guest
+  useEffect(() => {
+    // Setting the `bv` cookie allows direct access to My stay without prompting for more information.
+    const value = new URLSearchParams({
+      email,
+      firstName,
+      lastName,
+      confirmationNumber,
+    }).toString()
+    document.cookie = `bv=${encodeURIComponent(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`
+  }, [confirmationNumber, email, firstName, lastName])
+
+  const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
 
   return (
     <Button
@@ -20,7 +41,7 @@ export default function ManageBooking({ bookingUrl }: ManageBookingProps) {
       variant="icon"
       wrapping
     >
-      <Link color="none" href={bookingUrl} weight="bold">
+      <Link color="none" href={myStayURL} weight="bold">
         <MaterialIcon icon="edit_square" color="CurrentColor" />
         {intl.formatMessage({
           defaultMessage: "Manage booking",

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

@@ -1,11 +1,9 @@
 "use client"
-import { useIntl } from "react-intl"
 
-import { myStay } from "@/constants/routes/myStay"
+import { useIntl } from "react-intl"
 
 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"
@@ -23,10 +21,8 @@ export default function Header({
   booking,
   hotel,
   // mainRef,
-  refId,
 }: BookingConfirmationHeaderProps) {
   const intl = useIntl()
-  const lang = useLang()
 
   const text = intl.formatMessage({
     defaultMessage:
@@ -52,8 +48,6 @@ export default function Header({
     url: hotel.contactInformation.websiteUrl,
   }
 
-  const bookingUrlPath = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
-
   return (
     <header className={styles.header}>
       <hgroup className={styles.hgroup}>
@@ -74,7 +68,7 @@ export default function Header({
           hotelName={hotel.name}
           renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
         />
-        <ManageBooking bookingUrl={bookingUrlPath} />
+        <ManageBooking booking={booking} />
         {/* Download Invoice will be added later (currently available on My Stay) */}
         {/* <DownloadInvoice mainRef={mainRef} /> */}
       </div>

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

@@ -53,12 +53,7 @@ export default async function BookingConfirmation({
       ]}
       vat={booking.vatPercentage}
     >
-      <Confirmation
+      <Confirmation booking={booking} hotel={hotel} room={room}>
-        booking={booking}
-        hotel={hotel}
-        room={room}
-        refId={booking.refId}
-      >
         <div className={styles.booking}>
           {membershipFailedError && (
             <Alert

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts

@@ -1,3 +1,4 @@
-export interface ManageBookingProps {
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
-  bookingUrl: string
+
-}
+export interface ManageBookingProps
+  extends Pick<BookingConfirmation, "booking"> {}

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts

@@ -16,7 +16,6 @@ export interface BookingConfirmationRoom extends Room {
 export interface ConfirmationProps
   extends Pick<BookingConfirmation, "booking" | "hotel"> {
   room: BookingConfirmationRoom
-  refId: string
 }
 
 export interface BookingConfirmationAlertsProps {

apps/scandic-web/types/components/hotelReservation/bookingConfirmation/header.ts

@@ -5,5 +5,4 @@ import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmat
 export interface BookingConfirmationHeaderProps
   extends Pick<BookingConfirmation, "booking" | "hotel"> {
   mainRef: MutableRefObject<HTMLElement | null>
-  refId: string
 }