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
2025-11-24 14:46:39 +00:00
parent 2346daec25
commit 2ae3fcb609
9 changed files with 213 additions and 120 deletions
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
@@ -5,9 +5,7 @@ import { useRouter } from "next/navigation"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

-import Body from "@scandic-hotels/design-system/Body"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
+import { Button } from "@scandic-hotels/design-system/Button"

 import Input from "@/components/TempDesignSystem/Form/Input"

@@ -15,6 +13,7 @@ import {
  type AdditionalInfoFormSchema,
  additionalInfoFormSchema,
 } from "./schema"
+import { Title } from "./Title"

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

@@ -51,20 +50,7 @@ export default function AdditionalInfoForm({
  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
-        <div>
-          <Title level="h2" as="h3">
-            {intl.formatMessage({
-              id: "hotelReservation.findMyBooking.title",
-              defaultMessage: "Find your booking",
-            })}
-          </Title>
-          <Body>
-            {intl.formatMessage({
-              id: "hotelReservation.findMyBooking.additionalInfoText",
-              defaultMessage: "We need some details to confirm your identity.",
-            })}
-          </Body>
-        </div>
+        <Title isAdditional />
        <div className={styles.inputs}>
          <Input
            label={intl.formatMessage({
@@ -87,9 +73,9 @@ export default function AdditionalInfoForm({
        <div className={styles.buttons}>
          <Button
            type="submit"
-            intent="primary"
-            theme="base"
-            disabled={form.formState.isSubmitting}
+            variant="Primary"
+            size="Medium"
+            isDisabled={form.formState.isSubmitting}
          >
            {intl.formatMessage({
              id: "common.confirm",
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/Title/findMyBookingTitle.module.css
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/Title/findMyBookingTitle.module.css
@@ -0,0 +1,3 @@
+.title {
+  color: var(--Text-Heading);
+}
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/Title/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/Title/index.tsx
@@ -0,0 +1,36 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./findMyBookingTitle.module.css"
+
+export function Title({ isAdditional = false }: { isAdditional?: boolean }) {
+  const intl = useIntl()
+
+  const message = isAdditional
+    ? intl.formatMessage({
+        id: "hotelReservation.findMyBooking.additionalInfoText",
+        defaultMessage: "We need some details to confirm your identity.",
+      })
+    : intl.formatMessage({
+        id: "findMyBooking.manageBooking",
+        defaultMessage:
+          "View and manage your booking made via our website or app.",
+      })
+  return (
+    <div>
+      <Typography variant="Title/sm" className={styles.title}>
+        <h2>
+          {intl.formatMessage({
+            id: "findMyBooking.findYourStay",
+            defaultMessage: "Find your stay",
+          })}
+        </h2>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <h3>{message}</h3>
+      </Typography>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css
@@ -9,6 +9,10 @@
  padding: 0 var(--Space-x3);
 }

+.alert {
+  margin: 0 var(--Space-x3);
+}
+
 .inputs {
  display: grid;
  gap: var(--Space-x3);
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
@@ -5,37 +5,48 @@ import { useRouter } from "next/navigation"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

+import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { customerService } from "@scandic-hotels/common/constants/routes/customerService"
 import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { logger } from "@scandic-hotels/common/logger"
-import Body from "@scandic-hotels/design-system/Body"
-import Caption from "@scandic-hotels/design-system/Caption"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
+import { Alert } from "@scandic-hotels/design-system/Alert"
+import { Button } from "@scandic-hotels/design-system/Button"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { toast } from "@scandic-hotels/design-system/Toast"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"

 import Input from "@/components/TempDesignSystem/Form/Input"
 import useLang from "@/hooks/useLang"

 import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"
+import { Title } from "./Title"
+import { type FindMyBookingErrorEnum, getErrorMessage } from "./utils"

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

 import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"

-export default function FindMyBooking() {
+const DEFAULT_VALUES: FindMyBookingFormSchema = {
+  confirmationNumber: "",
+  firstName: "",
+  lastName: "",
+  email: "",
+}
+
+export default function FindMyBooking({
+  error,
+  defaultValues = DEFAULT_VALUES,
+}: {
+  error?: FindMyBookingErrorEnum
+  defaultValues: AdditionalInfoCookieValue | undefined
+}) {
  const router = useRouter()
+
  const intl = useIntl()
  const lang = useLang()
  const form = useForm<FindMyBookingFormSchema>({
-    defaultValues: {
-      confirmationNumber: "",
-      firstName: "",
-      lastName: "",
-      email: "",
-    },
+    defaultValues,
    resolver: zodResolver(findMyBookingFormSchema),
    mode: "all",
    criteriaMode: "all",
@@ -69,24 +80,20 @@ export default function FindMyBooking() {
    })
  }

+  const errorMessage = getErrorMessage(intl, error)
+
  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
-        <div>
-          <Title level="h2" as="h3">
-            {intl.formatMessage({
-              id: "findMyBooking.findYourStay",
-              defaultMessage: "Find your stay",
-            })}
-          </Title>
-          <Body>
-            {intl.formatMessage({
-              id: "findMyBooking.manageBooking",
-              defaultMessage:
-                "View and manage your booking made via our website or app.",
-            })}
-          </Body>
-        </div>
+        <Title />
+        {errorMessage ? (
+          <Alert
+            type={AlertTypeEnum.Alarm}
+            heading={errorMessage.heading}
+            text={errorMessage.text}
+            className={styles.alert}
+          />
+        ) : null}
        <div className={[styles.inputs, styles.grid].join(" ")}>
          <Input
            label={intl.formatMessage({
@@ -124,39 +131,43 @@ export default function FindMyBooking() {
        </div>
        <div className={styles.buttons}>
          <div className={styles.footnote}>
-            <Caption type="bold">
-              {intl.formatMessage({
-                id: "findMyBooking.cantFindYourStay",
-                defaultMessage: "Can't find your stay?",
-              })}
-            </Caption>
-            <Caption>
-              {intl.formatMessage(
-                {
-                  id: "findMyBooking.customerService",
-                  defaultMessage:
-                    "Please contact <link>customer service</link>.",
-                },
-                {
-                  link: (str) => (
-                    <Link
-                      href={customerService[lang]}
-                      size="small"
-                      textDecoration="underline"
-                      target="_blank"
-                    >
-                      {str}
-                    </Link>
-                  ),
-                }
-              )}
-            </Caption>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p>
+                {intl.formatMessage({
+                  id: "findMyBooking.cantFindYourStay",
+                  defaultMessage: "Can't find your stay?",
+                })}
+              </p>
+            </Typography>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>
+                {intl.formatMessage(
+                  {
+                    id: "findMyBooking.customerService",
+                    defaultMessage:
+                      "Please contact <link>customer service</link>.",
+                  },
+                  {
+                    link: (str) => (
+                      <TextLink
+                        isInline
+                        href={customerService[lang]}
+                        typography="Link/sm"
+                        target="_blank"
+                      >
+                        {str}
+                      </TextLink>
+                    ),
+                  }
+                )}
+              </p>
+            </Typography>
          </div>
          <Button
            type="submit"
-            intent="primary"
-            theme="base"
-            disabled={form.formState.isSubmitting || update.isPending}
+            variant="Primary"
+            size="Large"
+            isDisabled={form.formState.isSubmitting || update.isPending}
          >
            {intl.formatMessage({
              id: "common.find",
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/utils.ts
@@ -0,0 +1,40 @@
+import type { IntlShape } from "react-intl"
+
+export enum FindMyBookingErrorEnum {
+  BOOKING_NOT_FOUND = "BOOKING_NOT_FOUND",
+  BOOKING_ACCESS_DENIED = "BOOKING_ACCESS_DENIED",
+}
+
+export function getErrorMessage(
+  intl: IntlShape,
+  error?: FindMyBookingErrorEnum
+) {
+  switch (error) {
+    case FindMyBookingErrorEnum.BOOKING_ACCESS_DENIED:
+      return {
+        heading: intl.formatMessage({
+          id: "myStay.accessDenied.loginRequired",
+          defaultMessage: "You need to be logged in to view your booking",
+        }),
+        text: intl.formatMessage({
+          id: "myStay.accessDenied.loginRequiredMessage",
+          defaultMessage:
+            "And you need to be logged in with the same member account that made the booking.",
+        }),
+      }
+    case FindMyBookingErrorEnum.BOOKING_NOT_FOUND:
+      return {
+        heading: intl.formatMessage({
+          id: "myStay.accessDenied.bookingNotFound",
+          defaultMessage: "We couldn't find your booking",
+        }),
+        text: intl.formatMessage({
+          id: "myStay.accessDenied.bookingNotFoundMessage",
+          defaultMessage:
+            "Please make sure you have entered the correct booking details and try again.",
+        }),
+      }
+    default:
+      return null
+  }
+}