Merged in feat/SW-1273-find-my-booking-page (pull request #1414)

feat(SW-1273): find my booking page with rudimentary validation and redirect

Approved-by: Michael Zetterberg
Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/Current/Header/MainMenu/index.tsx

@@ -2,6 +2,7 @@
 import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
+import { findMyBooking } from "@/constants/routes/findMyBooking"
 import { logout } from "@/constants/routes/handleAuth"
 import { myPages } from "@/constants/routes/myPages"
 import useDropdownStore from "@/stores/main-menu"
@@ -147,9 +148,12 @@ export function MainMenu({
                 <span className={styles.mobileSeparator} />
               </li>
               <li className={styles.mobileLinkRow}>
-                <a className={styles.mobileLinkButton} href="">
+                <Link
+                  className={styles.mobileLinkButton}
+                  href={findMyBooking[lang]}
+                >
                   {intl.formatMessage({ id: "Find booking" })}
-                </a>
+                </Link>
               </li>
             </ul>
             <ul className={styles.mainLinks}>

apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx

@@ -5,10 +5,12 @@ import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { findMyBooking } from "@/constants/routes/findMyBooking"
 import useDropdownStore from "@/stores/main-menu"
 
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
+import useLang from "@/hooks/useLang"
 
 import HeaderLink from "../../HeaderLink"
 import TopLink from "../../TopLink"
@@ -24,6 +26,7 @@ export default function MobileMenu({
   topLink,
   isLoggedIn,
 }: React.PropsWithChildren<MobileMenuProps>) {
+  const lang = useLang()
   const intl = useIntl()
   const {
     toggleDropdown,
@@ -83,7 +86,7 @@ export default function MobileMenu({
         >
           {children}
           <footer className={styles.footer}>
-            <HeaderLink href="#" iconName={IconName.Search}>
+            <HeaderLink href={findMyBooking[lang]} iconName={IconName.Search}>
               {intl.formatMessage({ id: "Find booking" })}
             </HeaderLink>
             <TopLink isLoggedIn={isLoggedIn} topLink={topLink} iconSize={20} />

apps/scandic-web/components/Header/TopMenu/index.tsx

@@ -1,3 +1,4 @@
+import { findMyBooking } from "@/constants/routes/findMyBooking"
 import { getHeader } from "@/lib/trpc/memoizedRequests"
 
 import { auth } from "@/auth"
@@ -5,6 +6,7 @@ import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 import { isValidSession } from "@/utils/session"
 
 import HeaderLink from "../HeaderLink"
@@ -26,6 +28,8 @@ export default async function TopMenu() {
     return null
   }
 
+  const lang = getLang()
+
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
@@ -34,7 +38,7 @@ export default async function TopMenu() {
           <LanguageSwitcher type="desktopHeader" />
 
           <Caption type="regular" color="textMediumContrast" asChild>
-            <HeaderLink href="#" iconName={IconName.Search}>
+            <HeaderLink href={findMyBooking[lang]} iconName={IconName.Search}>
               {intl.formatMessage({ id: "Find booking" })}
             </HeaderLink>
           </Caption>

apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css

@@ -0,0 +1,51 @@
+.form {
+  box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+}
+
+.form > div {
+  padding: var(--Spacing-x3);
+}
+
+.inputs {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+@media screen and (min-width: 768px) {
+  .inputs {
+    grid-template-areas:
+      "a a"
+      "b c"
+      "d d";
+  }
+
+  .inputs > div:nth-child(1) {
+    grid-area: a;
+  }
+  .inputs > div:nth-child(2) {
+    grid-area: b;
+  }
+  .inputs > div:nth-child(3) {
+    grid-area: c;
+  }
+  .inputs > div:nth-child(4) {
+    grid-area: d;
+  }
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--Base-Border-Subtle);
+  gap: var(--Spacing-x2);
+}
+
+.buttons > button {
+  min-width: 140px;
+}
+
+.footnote {
+  display: grid;
+  gap: var(--Spacing-x-half);
+}

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

@@ -0,0 +1,134 @@
+"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 { customerService } from "@/constants/currentWebHrefs"
+import { trpc } from "@/lib/trpc/client"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Input from "@/components/TempDesignSystem/Form/Input"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
+
+import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"
+
+import styles from "./findMyBooking.module.css"
+
+export default function Form() {
+  const router = useRouter()
+  const intl = useIntl()
+  const lang = useLang()
+  const form = useForm<FindMyBookingFormSchema>({
+    defaultValues: {
+      reservationNumber: "",
+      firstName: "",
+      lastName: "",
+      email: "",
+    },
+    resolver: zodResolver(findMyBookingFormSchema),
+    mode: "all",
+    criteriaMode: "all",
+    reValidateMode: "onChange",
+  })
+
+  const update = trpc.booking.createRefId.useMutation({
+    onSuccess: (result) => {
+      router.push(
+        `/${lang}/hotelreservation/my-stay/${encodeURIComponent(result.refId)}`
+      )
+    },
+    onError: (error) => {
+      console.log("Failed to create ref id", error)
+    },
+  })
+
+  async function onSubmit(data: FindMyBookingFormSchema) {
+    const value = new URLSearchParams(data).toString()
+    document.cookie = `bv=${value}; Path=/; Max-Age=30; Secure; SameSite=Strict`
+    update.mutate({
+      confirmationNumber: data.reservationNumber,
+      lastName: data.lastName,
+    })
+  }
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+        <div>
+          <Title level="h2">
+            {intl.formatMessage({ id: "Find your stay" })}
+          </Title>
+          <Body>
+            {intl.formatMessage({
+              id: "View and manage your stay made on Scandic's website",
+            })}
+          </Body>
+        </div>
+        <div className={styles.inputs}>
+          <Input
+            label="Reservation number"
+            name="reservationNumber"
+            placeholder="XXXXXX"
+            registerOptions={{ required: true }}
+          />
+          <Input
+            label="First name"
+            name="firstName"
+            placeholder="Anna"
+            registerOptions={{ required: true }}
+          />
+          <Input
+            label="Last name"
+            name="lastName"
+            placeholder="Andersson"
+            registerOptions={{ required: true }}
+          />
+          <Input
+            label="Email"
+            name="email"
+            placeholder="anna@scandichotels.com"
+            registerOptions={{ required: true }}
+          />
+        </div>
+        <div className={styles.buttons}>
+          <div className={styles.footnote}>
+            <Caption type="bold">
+              {intl.formatMessage({ id: "Can't find your stay?" })}
+            </Caption>
+            <Caption>
+              {intl.formatMessage(
+                { id: "Please contact <link>customer service</link>." },
+                {
+                  link: (str) => (
+                    <Link
+                      href={customerService[lang]}
+                      size="small"
+                      color="uiTextPlaceholder"
+                      textDecoration="underline"
+                      target="_blank"
+                    >
+                      {str}
+                    </Link>
+                  ),
+                }
+              )}
+            </Caption>
+          </div>
+          <Button
+            type="submit"
+            intent="primary"
+            theme="base"
+            disabled={form.formState.isSubmitting}
+          >
+            {intl.formatMessage({ id: "Find" })}
+          </Button>
+        </div>
+      </form>
+    </FormProvider>
+  )
+}

apps/scandic-web/components/HotelReservation/FindMyBooking/schema.ts

@@ -0,0 +1,15 @@
+import { z } from "zod"
+
+export const findMyBookingFormSchema = z.object({
+  reservationNumber: z.string(),
+  firstName: z.string().max(250).trim().min(1, {
+    message: "First name is required",
+  }),
+  lastName: z.string().max(250).trim().min(1, {
+    message: "Last name is required",
+  }),
+  email: z.string().max(250).email(),
+})
+
+export interface FindMyBookingFormSchema
+  extends z.output<typeof findMyBookingFormSchema> {}