Merged in feat/SW-619-signup-non-happy (pull request #1083)

Feat/SW-619 signup non happy

* feat(SW-619): Added tests for Date input

* feat(SW-619): Updated date input to not allow date below 18 years old, also added form validation and tests to cover this change

* fix

* feat(SW-619): add info banner if membership verification fails

* fix(SW-619): update test description


Approved-by: Christel Westerberg
Approved-by: Arvid Norlin

components/HotelReservation/BookingConfirmation/Confirmation/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { useRef } from "react"
+import { useIntl } from "react-intl"
 
 import Header from "@/components/HotelReservation/BookingConfirmation/Header"
 import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
@@ -8,22 +9,40 @@ import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
 import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
 import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
 import SidePanel from "@/components/HotelReservation/SidePanel"
+import Alert from "@/components/TempDesignSystem/Alert"
 import Divider from "@/components/TempDesignSystem/Divider"
 
 import styles from "./confirmation.module.css"
 
 import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import { AlertTypeEnum } from "@/types/enums/alert"
 
 export default function Confirmation({
   booking,
   hotel,
   room,
 }: ConfirmationProps) {
+  const intl = useIntl()
   const mainRef = useRef<HTMLElement | null>(null)
+
+  const failedToVerifyMembership =
+    booking.rateDefinition.isMemberRate && !booking.guest.membershipNumber
+
   return (
     <main className={styles.main} ref={mainRef}>
       <Header booking={booking} hotel={hotel} mainRef={mainRef} />
       <div className={styles.booking}>
+        {failedToVerifyMembership && (
+          <Alert
+            type={AlertTypeEnum.Info}
+            heading={intl.formatMessage({
+              id: "booking.confirmation.membershipInfo.heading",
+            })}
+            text={intl.formatMessage({
+              id: "booking.confirmation.membershipInfo.text",
+            })}
+          />
+        )}
         <Rooms booking={booking} room={room} />
         <PaymentDetails booking={booking} />
         <Divider color="primaryLightSubtle" />

components/HotelReservation/EnterDetails/Details/schema.ts

@@ -1,5 +1,7 @@
 import { z } from "zod"
 
+import { dt } from "@/lib/dt"
+
 import { phoneValidator } from "@/utils/phoneValidator"
 
 // stringMatcher regex is copied from current web as specified by requirements.
@@ -78,7 +80,18 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
   z.object({
     join: z.literal<boolean>(true),
     zipCode: z.string().min(1, { message: "Zip code is required" }),
-    dateOfBirth: z.string().min(1, { message: "Date of birth is required" }),
+    dateOfBirth: z
+      .string()
+      .min(1, { message: "Date of birth is required" })
+      .refine(
+        (date) => {
+          const today = dt()
+          const dob = dt(date)
+          const age = today.diff(dob, "year")
+          return age >= 18
+        },
+        { message: "Must be at least 18 years of age to continue" }
+      ),
     membershipNo: z.string().default(""),
   })
 )