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/FindMyBooking/Title/findMyBookingTitle.module.css

@@ -0,0 +1,3 @@
+.title {
+  color: var(--Text-Heading);
+}

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>
+  )
+}