Merged in fix/STAY-17-find-my-booking-errors (pull request #3181)

fix: improve error messages in find my booking flow

* fix: improve error messages in find my booking flow


Approved-by: Linus Flood
Approved-by: Erik Tiekstra

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

@@ -1,13 +1,13 @@
 import { cookies } from "next/headers"
-import { notFound } from "next/navigation"
+import { notFound, redirect } from "next/navigation"
 
 import { BookingFlowConfig } from "@scandic-hotels/booking-flow/BookingFlowConfig"
 import { filterOverlappingDates } from "@scandic-hotels/booking-flow/utils/SelectRate"
+import { findMyBookingRoutes } from "@scandic-hotels/common/constants/routes/findMyBookingRoutes"
 import { dt } from "@scandic-hotels/common/dt"
 import { logger } from "@scandic-hotels/common/logger"
 import * as maskValue from "@scandic-hotels/common/utils/maskValue"
 import Image from "@scandic-hotels/design-system/Image"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 import { parseRefId } from "@scandic-hotels/trpc/utils/refId"
 
@@ -40,6 +40,9 @@ import { getIntl } from "@/i18n"
 import MyStayProvider from "@/providers/MyStay"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
+import FindMyBooking from "../FindMyBooking"
+import { FindMyBookingErrorEnum } from "../FindMyBooking/utils"
+
 import styles from "./index.module.css"
 
 import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
@@ -72,9 +75,6 @@ async function MyStay(props: {
   }
 
   const { confirmationNumber, lastName } = parseRefId(refId)
-  if (!confirmationNumber) {
-    return notFound()
-  }
 
   const isLoggedIn = await isLoggedInUser()
 
@@ -85,10 +85,11 @@ async function MyStay(props: {
     bookingConfirmation = await getBookingConfirmation(refId)
   } else if (bv) {
     logger.info(`MyStay: bv`, bv)
-    const values = JSON.parse(bv) as AdditionalInfoCookieValue
-    const firstName = values.firstName
-    const email = values.email
-    const bvConfirmationNo = values.confirmationNumber
+    const {
+      firstName,
+      email,
+      confirmationNumber: bvConfirmationNo,
+    } = JSON.parse(bv) as AdditionalInfoCookieValue
 
     if (firstName && email && bvConfirmationNo === confirmationNumber) {
       bookingConfirmation = await findBooking(
@@ -115,7 +116,9 @@ async function MyStay(props: {
   }
 
   if (!bookingConfirmation) {
-    return notFound()
+    redirect(
+      `${findMyBookingRoutes[lang]}?error=${FindMyBookingErrorEnum.BOOKING_NOT_FOUND}`
+    )
   }
 
   const { additionalData, booking, hotel, roomCategories } = bookingConfirmation
@@ -288,41 +291,34 @@ async function MyStay(props: {
 
   if (access === ERROR_BAD_REQUEST) {
     return (
-      <main className={styles.main}>
-        <div className={styles.form}>
-          <AdditionalInfoForm
-            confirmationNumber={confirmationNumber}
-            lastName={lastName}
-          />
-        </div>
-      </main>
+      <RenderAdditionalInfoForm
+        confirmationNumber={confirmationNumber}
+        lastName={lastName}
+      />
     )
   }
 
   if (access === ERROR_UNAUTHORIZED) {
-    return (
-      <main className={styles.main}>
-        <div className={styles.logIn}>
-          <Typography variant="Title/md">
-            <h1>
-              {intl.formatMessage({
-                id: "myStay.accessDenied.loginRequired",
-                defaultMessage: "You need to be logged in to view your booking",
-              })}
-            </h1>
-          </Typography>
-          <Typography variant="Body/Lead text">
-            <p>
-              {intl.formatMessage({
-                id: "myStay.accessDenied.loginRequiredMessage",
-                defaultMessage:
-                  "And you need to be logged in with the same member account that made the booking.",
-              })}
-            </p>
-          </Typography>
-        </div>
-      </main>
-    )
+    if (bv) {
+      const { firstName, email } = JSON.parse(bv) as AdditionalInfoCookieValue
+
+      return (
+        <main className={styles.main}>
+          <div className={styles.form}>
+            <FindMyBooking
+              error={FindMyBookingErrorEnum.BOOKING_ACCESS_DENIED}
+              defaultValues={{
+                firstName,
+                lastName,
+                confirmationNumber,
+                email,
+              }}
+            />
+          </div>
+        </main>
+      )
+    } else {
+    }
   }
 
   return notFound()