fix: limit first/lastname inputs to 30 characters

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -78,12 +78,14 @@ export default function Details({ user, memberPrice }: DetailsProps) {
           </Footnote>
           <Input
             label={intl.formatMessage({ id: "First name" })}
+            maxLength={30}
             name="firstName"
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
           <Input
             label={intl.formatMessage({ id: "Last name" })}
+            maxLength={30}
             name="lastName"
             readOnly={!!user}
             registerOptions={{ required: true }}

components/HotelReservation/EnterDetails/Details/schema.ts

@@ -2,6 +2,7 @@ import { z } from "zod"
 
 import { phoneValidator } from "@/utils/phoneValidator"
 
+// stringMatcher regex is copied from current web as specified by requirements.
 const stringMatcher =
   /^[A-Za-z¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ0-9-\s]*$/
 

components/TempDesignSystem/Form/Input/index.tsx

@@ -18,6 +18,7 @@ export default function Input({
   disabled = false,
   helpText = "",
   label,
+  maxLength,
   name,
   placeholder = "",
   readOnly = false,
@@ -55,6 +56,7 @@ export default function Input({
             aria-labelledby={field.name}
             id={field.name}
             label={label}
+            maxLength={maxLength}
             placeholder={placeholder}
             readOnly={readOnly}
             required={!!registerOptions.required}