From 51f422510cd1bde9c20474e631be64b5e2a593bf Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Thu, 12 Dec 2024 13:49:15 +0100
Subject: [PATCH] feat(SW-865): link to booking without validation

---
 .../booking-confirmation/page.tsx             | 10 ++----
 .../FormContent/Search/index.tsx              |  2 +-
 .../Confirmation/index.tsx                    | 10 +++---
 .../Header/Actions/ManageBooking.tsx          | 33 ++++++++++++++++---
 .../BookingConfirmation/Header/index.tsx      |  5 ++-
 .../Promos/Promo/index.tsx                    | 26 +++++++--------
 .../Promos/Promo/promo.module.css             |  4 +--
 .../BookingConfirmation/index.tsx             | 14 ++++----
 .../actions/manageBooking.ts                  |  5 +++
 .../bookingConfirmation.ts                    | 10 ++----
 .../bookingConfirmation/promos.ts             | 13 +++++---
 11 files changed, 79 insertions(+), 53 deletions(-)
 create mode 100644 types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
index 2d4496b98..ba645e64c 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
@@ -10,14 +10,8 @@ export default async function BookingConfirmationPage({
   searchParams,
 }: PageArgs<LangParams, { confirmationNumber: string }>) {
   setLang(params.lang)
-  const bookingConfirmationPromise = getBookingConfirmation(
-    searchParams.confirmationNumber
-  )
-
+  void getBookingConfirmation(searchParams.confirmationNumber)
   return (
-    <BookingConfirmation
-      bookingConfirmationPromise={bookingConfirmationPromise}
-      lang={params.lang}
-    />
+    <BookingConfirmation confirmationNumber={searchParams.confirmationNumber} />
   )
 }
diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 1f91f57ca..972982337 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -24,7 +24,7 @@ import styles from "./search.module.css"
 import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
 import {
   ActionType,
-  SetStorageData,
+  type SetStorageData,
 } from "@/types/components/form/bookingwidget"
 import type { SearchProps } from "@/types/components/search"
 import type { Location } from "@/types/trpc/routers/hotel/locations"
diff --git a/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx b/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx
index 5a7a1a9f8..71efd978d 100644
--- a/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { use, useRef } from "react"
+import { useRef } from "react"
 
 import Header from "@/components/HotelReservation/BookingConfirmation/Header"
 import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
@@ -15,13 +15,11 @@ import styles from "./confirmation.module.css"
 import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
 
 export default function Confirmation({
-  bookingConfirmationPromise,
+  booking,
+  hotel,
+  room,
 }: ConfirmationProps) {
-  const bookingConfirmation = use(bookingConfirmationPromise)
   const mainRef = useRef<HTMLElement | null>(null)
-
-  const { booking, hotel, room } = bookingConfirmation
-
   return (
     <main className={styles.main} ref={mainRef}>
       <Header booking={booking} hotel={hotel} mainRef={mainRef} />
diff --git a/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx b/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
index d0c8c2a82..45f7d3655 100644
--- a/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
+++ b/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
@@ -1,15 +1,40 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { myBooking } from "@/constants/myBooking"
+import { env } from "@/env/client"
+
 import { EditIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 
-export default function ManageBooking() {
+import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"
+
+export default function ManageBooking({
+  confirmationNumber,
+  lastName,
+}: ManageBookingProps) {
   const intl = useIntl()
+  const lang = useLang()
+  const myBookingUrl = myBooking[env.NEXT_PUBLIC_NODE_ENV][lang]
   return (
-    <Button intent="text" size="small" theme="base" variant="icon" wrapping>
-      <EditIcon />
-      {intl.formatMessage({ id: "Manage booking" })}
+    <Button
+      asChild
+      intent="text"
+      size="small"
+      theme="base"
+      variant="icon"
+      wrapping
+    >
+      <Link
+        color="none"
+        href={`${myBookingUrl}?bookingId=${confirmationNumber}&lastName=${lastName}`}
+        weight="bold"
+      >
+        <EditIcon />
+        {intl.formatMessage({ id: "Manage booking" })}
+      </Link>
     </Button>
   )
 }
diff --git a/components/HotelReservation/BookingConfirmation/Header/index.tsx b/components/HotelReservation/BookingConfirmation/Header/index.tsx
index 0d2d08f8b..f9aee6f71 100644
--- a/components/HotelReservation/BookingConfirmation/Header/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Header/index.tsx
@@ -70,7 +70,10 @@ export default function Header({
           event={event}
           hotelName={hotel.name}
         />
-        <ManageBooking />
+        <ManageBooking
+          confirmationNumber={booking.confirmationNumber}
+          lastName={booking.guest.lastName}
+        />
         <DownloadInvoice mainRef={mainRef} />
       </div>
     </header>
diff --git a/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx b/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx
index 6373a9570..87b7f4748 100644
--- a/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx
@@ -9,18 +9,18 @@ import type { PromoProps } from "@/types/components/hotelReservation/bookingConf
 
 export default function Promo({ buttonText, href, text, title }: PromoProps) {
   return (
-    <article className={styles.promo}>
-      <Title color="white" level="h4">
-        {title}
-      </Title>
-      <Body className={styles.text} color="white" textAlign="center">
-        {text}
-      </Body>
-      <Button asChild intent="primary" size="small" theme="primaryStrong">
-        <Link color="none" href={href}>
-          {buttonText}
-        </Link>
-      </Button>
-    </article>
+    <Link className={styles.link} color="none" href={href}>
+      <article className={styles.promo}>
+        <Title color="white" level="h4">
+          {title}
+        </Title>
+        <Body className={styles.text} color="white" textAlign="center">
+          {text}
+        </Body>
+        <Button asChild intent="primary" size="small" theme="primaryStrong">
+          <div>{buttonText}</div>
+        </Button>
+      </article>
+    </Link>
   )
 }
diff --git a/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css b/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css
index 1fa553838..69bf014a5 100644
--- a/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css
+++ b/components/HotelReservation/BookingConfirmation/Promos/Promo/promo.module.css
@@ -13,7 +13,7 @@
   padding: var(--Spacing-x4) var(--Spacing-x3);
 }
 
-.promo:nth-of-type(1) {
+.link:nth-of-type(1) .promo {
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 0%,
@@ -23,7 +23,7 @@
     url("/_static/img/Scandic_Park_Party_Lipstick.jpg");
 }
 
-.promo:nth-of-type(2) {
+.link:nth-of-type(2) .promo {
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 0%,
diff --git a/components/HotelReservation/BookingConfirmation/index.tsx b/components/HotelReservation/BookingConfirmation/index.tsx
index 5b18eb2e1..a93a93346 100644
--- a/components/HotelReservation/BookingConfirmation/index.tsx
+++ b/components/HotelReservation/BookingConfirmation/index.tsx
@@ -1,7 +1,10 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { Suspense } from "react"
 
+import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
+
 import TrackingSDK from "@/components/TrackingSDK"
+import { getLang } from "@/i18n/serverContext"
 
 import Confirmation from "./Confirmation"
 
@@ -14,12 +17,11 @@ import {
 import { CurrencyEnum } from "@/types/enums/currency"
 
 export default async function BookingConfirmation({
-  bookingConfirmationPromise,
-  lang,
+  confirmationNumber,
 }: BookingConfirmationProps) {
-  const bookingConfirmation = await bookingConfirmationPromise
-
-  const { booking, hotel, room } = bookingConfirmation
+  const lang = getLang()
+  const { booking, hotel, room } =
+    await getBookingConfirmation(confirmationNumber)
 
   const arrivalDate = new Date(booking.checkInDate)
   const departureDate = new Date(booking.checkOutDate)
@@ -69,7 +71,7 @@ export default async function BookingConfirmation({
 
   return (
     <>
-      <Confirmation bookingConfirmationPromise={bookingConfirmationPromise} />
+      <Confirmation booking={booking} hotel={hotel} room={room} />
       <Suspense fallback={null}>
         <TrackingSDK
           pageData={initialPageTrackingData}
diff --git a/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts b/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts
new file mode 100644
index 000000000..70b22b300
--- /dev/null
+++ b/types/components/hotelReservation/bookingConfirmation/actions/manageBooking.ts
@@ -0,0 +1,5 @@
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export interface ManageBookingProps
+  extends Pick<BookingConfirmation["booking"], "confirmationNumber">,
+    Pick<BookingConfirmation["booking"]["guest"], "lastName"> {}
diff --git a/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts
index 4b9352677..73007a82d 100644
--- a/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts
+++ b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts
@@ -1,11 +1,7 @@
-import type { Lang } from "@/constants/languages"
-import type { RouterOutput } from "@/lib/trpc/client"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 
 export interface BookingConfirmationProps {
-  lang: Lang
-  bookingConfirmationPromise: Promise<RouterOutput["booking"]["confirmation"]>
+  confirmationNumber: string
 }
 
-export interface ConfirmationProps {
-  bookingConfirmationPromise: Promise<RouterOutput["booking"]["confirmation"]>
-}
+export interface ConfirmationProps extends BookingConfirmation {}
diff --git a/types/components/hotelReservation/bookingConfirmation/promos.ts b/types/components/hotelReservation/bookingConfirmation/promos.ts
index 097f55cdb..55f11c6a1 100644
--- a/types/components/hotelReservation/bookingConfirmation/promos.ts
+++ b/types/components/hotelReservation/bookingConfirmation/promos.ts
@@ -1,5 +1,8 @@
-export interface PromosProps {
-  confirmationNumber: string | null
-  hotelId: string
-  lastName: string | null
-}
+import { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export interface PromosProps
+  extends Pick<
+      BookingConfirmation["booking"],
+      "confirmationNumber" | "hotelId"
+    >,
+    Pick<BookingConfirmation["booking"]["guest"], "lastName"> {}