feat(SW-1710): add access checks to my stay page for viewing booking

2025-03-05 13:46:09 +01:00
parent 1009ea87c9
commit b0df70e552
21 changed files with 515 additions and 133 deletions
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useRouter } from "next/navigation"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Input from "@/components/TempDesignSystem/Form/Input"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import {
+  type AdditionalInfoFormSchema,
+  additionalInfoFormSchema,
+} from "./schema"
+
+import styles from "./findMyBooking.module.css"
+
+export default function AdditionalInfoForm({
+  confirmationNumber,
+  lastName,
+}: {
+  confirmationNumber: string
+  lastName: string
+}) {
+  const router = useRouter()
+  const intl = useIntl()
+  const form = useForm<AdditionalInfoFormSchema>({
+    resolver: zodResolver(additionalInfoFormSchema),
+    mode: "all",
+    criteriaMode: "all",
+    reValidateMode: "onChange",
+  })
+
+  function onSubmit() {
+    const values = form.getValues()
+    const value = new URLSearchParams({
+      ...values,
+      confirmationNumber,
+      lastName,
+    }).toString()
+    document.cookie = `bv=${value}; Path=/; Max-Age=30; Secure; SameSite=Strict`
+    router.refresh()
+  }
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+        <div>
+          <Title level="h2" as="h3">
+            {intl.formatMessage({
+              id: "One last step",
+            })}
+          </Title>
+          <Body>
+            {intl.formatMessage({
+              id: "We need some more details to confirm your identity.",
+            })}
+          </Body>
+        </div>
+        <div className={styles.inputs}>
+          <Input
+            label={intl.formatMessage({ id: "First name" })}
+            name="firstName"
+            placeholder="Anna"
+            registerOptions={{ required: true }}
+          />
+          <Input
+            label={intl.formatMessage({ id: "Email" })}
+            name="email"
+            placeholder="anna@scandichotels.com"
+            registerOptions={{ required: true }}
+          />
+        </div>
+        <div className={styles.buttons}>
+          <Button
+            type="submit"
+            intent="primary"
+            theme="base"
+            disabled={form.formState.isSubmitting}
+          >
+            {intl.formatMessage({ id: "Confirm" })}
+          </Button>
+        </div>
+      </form>
+    </FormProvider>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css
@@ -1,9 +1,12 @@
 .form {
  box-shadow: var(--popup-box-shadow);
+  padding: var(--Spacing-x3) 0;
+  display: grid;
+  gap: var(--Spacing-x3);
 }

-.form > div {
-  padding: var(--Spacing-x3);
+.form > div:not(.buttons) {
+  padding: 0 var(--Spacing-x3);
 }

 .inputs {
@@ -12,23 +15,23 @@
 }

@media screen and (min-width: 768px) {
-  .inputs {
+  .grid {
    grid-template-areas:
      "a a"
      "b c"
      "d d";
  }

-  .inputs > div:nth-child(1) {
+  .grid > div:nth-child(1) {
    grid-area: a;
  }
-  .inputs > div:nth-child(2) {
+  .grid > div:nth-child(2) {
    grid-area: b;
  }
-  .inputs > div:nth-child(3) {
+  .grid > div:nth-child(3) {
    grid-area: c;
  }
-  .inputs > div:nth-child(4) {
+  .grid > div:nth-child(4) {
    grid-area: d;
  }
 }
@@ -38,9 +41,14 @@
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x3) var(--Spacing-x3) 0;
  gap: var(--Spacing-x2);
 }

+.buttons > button:only-child {
+  margin-left: auto;
+}
+
 .buttons > button {
  min-width: 140px;
 }
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
@@ -21,7 +21,7 @@ import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"

 import styles from "./findMyBooking.module.css"

-export default function Form() {
+export default function FindMyBooking() {
  const router = useRouter()
  const intl = useIntl()
  const lang = useLang()
@@ -53,7 +53,7 @@ export default function Form() {

  async function onSubmit(data: FindMyBookingFormSchema) {
    update.mutate({
-      bookingNumber: data.bookingNumber,
+      confirmationNumber: data.confirmationNumber,
      lastName: data.lastName,
    })
  }
@@ -62,7 +62,7 @@ export default function Form() {
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
        <div>
-          <Title level="h2">
+          <Title level="h2" as="h3">
            {intl.formatMessage({ id: "Find your stay" })}
          </Title>
          <Body>
@@ -71,27 +71,27 @@ export default function Form() {
            })}
          </Body>
        </div>
-        <div className={styles.inputs}>
+        <div className={[styles.inputs, styles.grid].join(" ")}>
          <Input
-            label="Booking number"
-            name="bookingNumber"
+            label={intl.formatMessage({ id: "Booking number" })}
+            name="confirmationNumber"
            placeholder="XXXXXX"
            registerOptions={{ required: true }}
          />
          <Input
-            label="First name"
+            label={intl.formatMessage({ id: "First name" })}
            name="firstName"
            placeholder="Anna"
            registerOptions={{ required: true }}
          />
          <Input
-            label="Last name"
+            label={intl.formatMessage({ id: "Last name" })}
            name="lastName"
            placeholder="Andersson"
            registerOptions={{ required: true }}
          />
          <Input
-            label="Email"
+            label={intl.formatMessage({ id: "Email" })}
            name="email"
            placeholder="anna@scandichotels.com"
            registerOptions={{ required: true }}
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/schema.ts
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/schema.ts
@@ -1,6 +1,13 @@
 import { defineMessage } from "react-intl"
 import { z } from "zod"

+export {
+  type AdditionalInfoFormSchema,
+  additionalInfoFormSchema,
+  type FindMyBookingFormSchema,
+  findMyBookingFormSchema,
+}
+
 defineMessage({
  id: "Invalid booking number",
 })
@@ -17,8 +24,15 @@ defineMessage({
  id: "Email address is required",
 })

-export const findMyBookingFormSchema = z.object({
-  bookingNumber: z
+const additionalInfoFormSchema = z.object({
+  firstName: z.string().trim().max(250).min(1, {
+    message: "First name is required",
+  }),
+  email: z.string().max(250).email({ message: "Email address is required" }),
+})
+
+const findMyBookingFormSchema = additionalInfoFormSchema.extend({
+  confirmationNumber: z
    .string()
    .trim()
    .regex(/^[0-9]+(-[0-9])?$/, {
@@ -27,14 +41,11 @@ export const findMyBookingFormSchema = z.object({
    .min(1, {
      message: "Booking number is required",
    }),
-  firstName: z.string().trim().max(250).min(1, {
-    message: "First name is required",
-  }),
  lastName: z.string().trim().max(250).min(1, {
    message: "Last name is required",
  }),
-  email: z.string().max(250).email({ message: "Email address is required" }),
 })

-export interface FindMyBookingFormSchema
-  extends z.output<typeof findMyBookingFormSchema> {}
+type AdditionalInfoFormSchema = z.output<typeof additionalInfoFormSchema>
+
+type FindMyBookingFormSchema = z.output<typeof findMyBookingFormSchema>
--- a/apps/scandic-web/components/HotelReservation/MyStay/accessBooking.test.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/accessBooking.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from "@jest/globals"
+
+import accessBooking, {
+  ACCESS_GRANTED,
+  ERROR_BAD_REQUEST,
+  ERROR_NOT_FOUND,
+  ERROR_UNAUTHORIZED,
+} from "./accessBooking"
+
+import type { SafeUser } from "@/types/user"
+import type { Guest } from "@/server/routers/booking/output"
+
+describe("Access booking", () => {
+  describe("for logged in booking", () => {
+    it("should enable access if all is provided", () => {
+      expect(accessBooking(loggedIn, "Booking", user)).toBe(ACCESS_GRANTED)
+    })
+    it("should prompt to login", () => {
+      expect(accessBooking(loggedIn, "Booking", null)).toBe(ERROR_UNAUTHORIZED)
+    })
+    it("should deny access", () => {
+      expect(accessBooking(loggedIn, "NotBooking", user)).toBe(ERROR_NOT_FOUND)
+    })
+  })
+  describe("for anonymous booking", () => {
+    it("should enable access if all is provided", () => {
+      const cookieString = new URLSearchParams({
+        confirmationNumber: "123456789",
+        firstName: "Anonymous",
+        lastName: "Booking",
+        email: "logged-out@scandichotels.com",
+      }).toString()
+      expect(accessBooking(loggedOut, "Booking", null, cookieString)).toBe(
+        ACCESS_GRANTED
+      )
+    })
+    it("should prompt logout if user is logged in", () => {
+      const cookieString = new URLSearchParams({
+        confirmationNumber: "123456789",
+        firstName: "Anonymous",
+        lastName: "Booking",
+        email: "logged-out@scandichotels.com",
+      }).toString()
+      expect(accessBooking(loggedOut, "Booking", user, cookieString)).toBe(
+        ACCESS_GRANTED
+      )
+    })
+    it("should prompt for more if first name is missing", () => {
+      const cookieString = new URLSearchParams({
+        confirmationNumber: "123456789",
+        lastName: "Booking",
+        email: "logged-out@scandichotels.com",
+      }).toString()
+      expect(accessBooking(loggedOut, "Booking", null, cookieString)).toBe(
+        ERROR_BAD_REQUEST
+      )
+    })
+    it("should prompt for more if email is missing", () => {
+      const cookieString = new URLSearchParams({
+        confirmationNumber: "123456789",
+        firstName: "Anonymous",
+        lastName: "Booking",
+      }).toString()
+      expect(accessBooking(loggedOut, "Booking", null, cookieString)).toBe(
+        ERROR_BAD_REQUEST
+      )
+    })
+    it("should prompt for more if cookie is invalid", () => {
+      const cookieString = new URLSearchParams({}).toString()
+      expect(accessBooking(loggedOut, "Booking", null, cookieString)).toBe(
+        ERROR_BAD_REQUEST
+      )
+    })
+    it("should deny access", () => {
+      expect(accessBooking(loggedOut, "NotBooking", null)).toBe(ERROR_NOT_FOUND)
+    })
+  })
+})
+
+const user: SafeUser = {
+  address: {
+    city: undefined,
+    country: "Sweden",
+    countryCode: "SE",
+    streetAddress: undefined,
+    zipCode: undefined,
+  },
+  dateOfBirth: "",
+  email: "",
+  firstName: "",
+  language: undefined,
+  lastName: "",
+  membership: undefined,
+  memberships: [],
+  name: "",
+  phoneNumber: undefined,
+  profileId: "",
+}
+
+const loggedOut: Guest = {
+  email: "logged-out@scandichotels.com",
+  firstName: "Anonymous",
+  lastName: "Booking",
+  membershipNumber: null,
+  phoneNumber: "+46701234567",
+}
+
+const loggedIn: Guest = {
+  email: "logged-in@scandichotels.com",
+  firstName: "Authenticated",
+  lastName: "Booking",
+  membershipNumber: "01234567890123",
+  phoneNumber: "+46701234567",
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/accessBooking.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/accessBooking.ts
@@ -0,0 +1,64 @@
+import type { SafeUser } from "@/types/user"
+import type { Guest } from "@/server/routers/booking/output"
+
+export {
+  ACCESS_GRANTED,
+  accessBooking as default,
+  ERROR_BAD_REQUEST,
+  ERROR_NOT_FOUND,
+  ERROR_UNAUTHORIZED,
+}
+
+/**
+ * Whether a request can access a confirmed booking or not.
+ */
+function accessBooking(
+  guest: Guest,
+  lastName: string,
+  user: SafeUser | null,
+  cookie: string = ""
+) {
+  if (guest.membershipNumber) {
+    if (user) {
+      if (lastName === guest.lastName) {
+        return ACCESS_GRANTED
+      }
+    } else {
+      return ERROR_UNAUTHORIZED
+    }
+  }
+
+  if (guest.lastName === lastName) {
+    const params = new URLSearchParams(cookie)
+    if (
+      params.get("firstName") === guest.firstName &&
+      params.get("email") === guest.email
+    ) {
+      return ACCESS_GRANTED
+    } else {
+      return ERROR_BAD_REQUEST
+    }
+  }
+
+  return ERROR_NOT_FOUND
+}
+
+const ERROR_BAD_REQUEST = {
+  code: "BAD_REQUEST",
+  status: 400,
+} as const
+
+const ERROR_UNAUTHORIZED = {
+  code: "UNAUTHORIZED",
+  status: 401,
+} as const
+
+const ERROR_NOT_FOUND = {
+  code: "NOT_FOUND",
+  status: 404,
+} as const
+
+const ACCESS_GRANTED = {
+  code: "ACCESS_GRANTED",
+  status: 200,
+} as const
--- a/apps/scandic-web/components/HotelReservation/MyStay/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/index.tsx
@@ -1,3 +1,4 @@
+import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"

@@ -9,12 +10,20 @@ import {
  getBookingConfirmation,
  getProfileSafely,
 } from "@/lib/trpc/memoizedRequests"
+import { decrypt } from "@/server/routers/utils/encryption"

 import Image from "@/components/Image"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

+import AdditionalInfoForm from "../FindMyBooking/AdditionalInfoForm"
 import LinkedReservationSkeleton from "./LinkedReservation/LinkedReservationSkeleton"
+import accessBooking, {
+  ACCESS_GRANTED,
+  ERROR_BAD_REQUEST,
+  ERROR_UNAUTHORIZED,
+} from "./accessBooking"
 import { Ancillaries } from "./Ancillaries"
 import BookingSummary from "./BookingSummary"
 import { Header } from "./Header"
@@ -25,83 +34,120 @@ import { Room } from "./Room"

 import styles from "./myStay.module.css"

-export async function MyStay({ reservationId }: { reservationId: string }) {
-  const bookingConfirmation = await getBookingConfirmation(reservationId)
+export async function MyStay({ refId }: { refId: string }) {
+  const value = decrypt(refId)
+  if (!value) {
+    return notFound()
+  }
+  const [confirmationNumber, lastName] = value.split(",")
+  const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
  if (!bookingConfirmation) {
    return notFound()
  }

  const { booking, hotel, room } = bookingConfirmation
-
-  const linkedBookingPromises = booking.linkedReservations
-    ? booking.linkedReservations.map((linkedBooking) => {
-        return getBookingConfirmation(linkedBooking.confirmationNumber)
-      })
-    : []
-
-  const userResponse = await getProfileSafely()
-  const user = userResponse && !("error" in userResponse) ? userResponse : null
+  const user = await getProfileSafely()
+  const cookie = cookies()
+  const bv = cookie.get("bv")?.value
  const intl = await getIntl()
-  const lang = getLang()
-  const homeUrl = homeHrefs[env.NODE_ENV][lang]
-  const fromDate = dt(booking.checkInDate).format("YYYY-MM-DD")
-  const toDate = dt(booking.checkOutDate).format("YYYY-MM-DD")
-  const hotelId = hotel.operaId
-  const ancillaryInput = { fromDate, hotelId, toDate }
-  const ancillaryPackages = await getAncillaryPackages(ancillaryInput)

-  return (
-    <main className={styles.main}>
-      <div className={styles.imageContainer}>
-        <div className={styles.blurOverlay} />
+  const access = accessBooking(booking.guest, lastName, user, bv)
+  if (access.status === ACCESS_GRANTED.status) {
+    const linkedBookingPromises = booking.linkedReservations
+      ? booking.linkedReservations.map((linkedBooking) => {
+          return getBookingConfirmation(linkedBooking.confirmationNumber)
+        })
+      : []

-        <Image
-          className={styles.image}
-          src={
-            hotel.gallery?.heroImages[0]?.imageSizes.large ??
-            hotel.galleryImages[0]?.imageSizes.large ??
-            ""
-          }
-          alt={hotel.name}
-          fill
-        />
-      </div>
-      <div className={styles.content}>
-        <div className={styles.headerContainer}>
-          <Header hotel={hotel} />
-          <ReferenceCard booking={booking} hotel={hotel} />
-        </div>
-        {booking.showAncillaries && (
-          <Ancillaries
-            ancillaries={ancillaryPackages}
-            booking={booking}
-            user={user}
+    const lang = getLang()
+    const ancillaryPackages = await getAncillaryPackages({
+      fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
+      hotelId: hotel.operaId,
+      toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
+    })
+
+    return (
+      <main className={styles.main}>
+        <div className={styles.imageContainer}>
+          <div className={styles.blurOverlay} />
+
+          <Image
+            className={styles.image}
+            src={
+              hotel.gallery?.heroImages[0]?.imageSizes.large ??
+              hotel.galleryImages[0]?.imageSizes.large ??
+              ""
+            }
+            alt={hotel.name}
+            fill
          />
-        )}
-        <div>
-          <Room booking={booking} room={room} hotel={hotel} user={user} />
-          {booking.linkedReservations.map((linkedRes, index) => (
-            <Suspense
-              key={linkedRes.confirmationNumber}
-              fallback={<LinkedReservationSkeleton />}
-            >
-              <LinkedReservation
-                bookingPromise={linkedBookingPromises[index]}
-                index={index}
-              />
-            </Suspense>
-          ))}
        </div>
-        <BookingSummary booking={booking} hotel={hotel} room={room} />
-        <Promo
-          buttonText={intl.formatMessage({ id: "Book another stay" })}
-          href={`${homeUrl}?hotel=${hotel.operaId}`}
-          text={intl.formatMessage({
-            id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
-          })}
-          title={intl.formatMessage({ id: "Book your next stay" })}
-        />
-      </div>
-    </main>
-  )
+        <div className={styles.content}>
+          <div className={styles.headerContainer}>
+            <Header hotel={hotel} />
+            <ReferenceCard booking={booking} hotel={hotel} />
+          </div>
+          {booking.showAncillaries && (
+            <Ancillaries
+              ancillaries={ancillaryPackages}
+              booking={booking}
+              user={user}
+            />
+          )}
+          <div>
+            <Room booking={booking} room={room} hotel={hotel} user={user} />
+            {booking.linkedReservations.map((linkedRes, index) => (
+              <Suspense
+                key={linkedRes.confirmationNumber}
+                fallback={<LinkedReservationSkeleton />}
+              >
+                <LinkedReservation
+                  bookingPromise={linkedBookingPromises[index]}
+                  index={index}
+                />
+              </Suspense>
+            ))}
+          </div>
+          <BookingSummary booking={booking} hotel={hotel} room={room} />
+          <Promo
+            buttonText={intl.formatMessage({ id: "Book another stay" })}
+            href={`${homeHrefs[env.NODE_ENV][lang]}?hotel=${hotel.operaId}`}
+            text={intl.formatMessage({
+              id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
+            })}
+            title={intl.formatMessage({ id: "Book your next stay" })}
+          />
+        </div>
+      </main>
+    )
+  }
+
+  if (access.status === ERROR_BAD_REQUEST.status) {
+    return (
+      <main className={styles.main}>
+        <div className={styles.form}>
+          <AdditionalInfoForm
+            confirmationNumber={confirmationNumber}
+            lastName={lastName}
+          />
+        </div>
+      </main>
+    )
+  }
+
+  if (access.status === ERROR_UNAUTHORIZED.status) {
+    return (
+      <main className={styles.main}>
+        <div className={styles.logIn}>
+          <Body textAlign="center">
+            {intl.formatMessage({
+              id: "In order to view your booking, please log in.",
+            })}
+          </Body>
+        </div>
+      </main>
+    )
+  }
+
+  return notFound()
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/myStay.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/myStay.module.css
@@ -1,6 +1,5 @@
 .main {
  background-color: var(--Base-Surface-Primary-light-Normal);
-  min-height: 100dvh;
 }

 .imageContainer {
@@ -52,11 +51,11 @@
  }
 }

-@media (min-width: 768px) {
-  .content {
-    width: var(--max-width-content);
-    padding-bottom: 160px;
-  }
+.form {
+  max-width: 640px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--Spacing-x5) 0;
 }

 .headerSkeleton {
@@ -103,3 +102,7 @@
  flex-direction: column;
  gap: var(--Spacing-x2);
 }
+
+.logIn {
+  padding: var(--Spacing-x5) var(--Spacing-x2);
+}