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>