From 66b7af877ad7f9222a3ef828e3622beb3e4d7011 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Mon, 19 Jan 2026 08:34:24 +0000
Subject: [PATCH] Merged in fix/loy-514-fix-validation-tracking-in-signup-form
 (pull request #3445)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(LOY-514): Fix validation error tracking in SignupForm

* Fix issue with form submit handling

* Fix

* Remove browser validation

* Add automatic tracking of validatione rrors


Approved-by: Rasmus Langvad
Approved-by: Matilda Landström
---
 .../components/Forms/Signup/index.tsx         | 46 +++++--------------
 .../ChildSelector/ChildInfoSelector.tsx       |  2 -
 .../Form/Country/CountryCombobox.tsx          |  1 -
 .../components/Form/Country/CountrySelect.tsx |  1 -
 .../lib/components/Form/Date/index.tsx        |  3 --
 .../lib/components/Form/FormInput/index.tsx   |  1 -
 .../components/Form/FormTextArea/index.tsx    |  1 -
 .../lib/components/Form/Phone/index.tsx       |  1 -
 .../lib/components/Input/Input.tsx            |  2 -
 .../PasswordInput/PasswordInput.tsx           |  1 -
 packages/tracking/lib/useFormTracking.ts      | 31 +++++++++++++
 11 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx
index 40dbbe403..55f8b3756 100644
--- a/apps/scandic-web/components/Forms/Signup/index.tsx
+++ b/apps/scandic-web/components/Forms/Signup/index.tsx
@@ -249,8 +249,8 @@ export default function SignupForm({
                   defaultMessage: "Email address",
                 })}
                 name="email"
-                registerOptions={{ required: true }}
                 type="email"
+                registerOptions={{ required: true }}
               />
               <Phone
                 countryLabel={intl.formatMessage({
@@ -307,9 +307,7 @@ export default function SignupForm({
               </header>
               <Checkbox
                 name="profilingConsent"
-                registerOptions={{
-                  required: false,
-                }}
+                registerOptions={{ required: true }}
               >
                 {intl.formatMessage({
                   id: "signup.yesConsent",
@@ -344,9 +342,7 @@ export default function SignupForm({
             </header>
             <Checkbox
               name="termsAccepted"
-              registerOptions={{
-                required: true,
-              }}
+              registerOptions={{ required: true }}
               errorCodeMessages={{
                 [signupErrors.TERMS_REQUIRED]: intl.formatMessage({
                   id: "common.mustAcceptTermsError",
@@ -394,33 +390,15 @@ export default function SignupForm({
             </Typography>
           </section>
 
-          {/*
-            This is a manual validation trigger workaround:
-            - The Controller component (which Input uses) doesn't re-render on submit,
-              which prevents automatic error display.
-            - Future fix requires Input component refactoring (out of scope for now).
-          */}
-          {!methods.formState.isValid ? (
-            <Button
-              className={styles.signUpButton}
-              type="submit"
-              variant="Primary"
-              onPress={() => methods.trigger()}
-              data-testid="trigger-validation"
-            >
-              {signupButtonText}
-            </Button>
-          ) : (
-            <Button
-              className={styles.signUpButton}
-              type="submit"
-              variant="Primary"
-              isDisabled={methods.formState.isSubmitting || signup.isPending}
-              data-testid="submit"
-            >
-              {signupButtonText}
-            </Button>
-          )}
+          <Button
+            className={styles.signUpButton}
+            type="submit"
+            variant="Primary"
+            isDisabled={methods.formState.isSubmitting || signup.isPending}
+            data-testid="submit"
+          >
+            {signupButtonText}
+          </Button>
         </form>
       </FormProvider>
     </div>
diff --git a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
index 2623ad0f7..d14b16348 100644
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -146,7 +146,6 @@ export default function ChildInfoSelector({
       <div key={index} className={styles.childInfoContainer}>
         <div ref={ageSelectRef}>
           <Select
-            isRequired
             items={ageList}
             name={ageFieldName}
             label={ageLabel}
@@ -161,7 +160,6 @@ export default function ChildInfoSelector({
         <div ref={bedPrefSelectRef}>
           {child.age >= 0 ? (
             <Select
-              isRequired
               items={getAvailableBeds(child.age)}
               name={bedFieldName}
               label={bedLabel}
diff --git a/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx b/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
index 0817434bb..d687a4ccd 100644
--- a/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
+++ b/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
@@ -85,7 +85,6 @@ export default function CountryCombobox({
         className={styles.select}
         data-testid={name}
         isDisabled={disabled}
-        isRequired={Boolean(registerOptions?.required)}
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}
diff --git a/packages/design-system/lib/components/Form/Country/CountrySelect.tsx b/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
index 312477d0a..8b4b87ad8 100644
--- a/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
+++ b/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
@@ -54,7 +54,6 @@ export default function CountrySelect({
         items={items}
         label={label}
         isDisabled={disabled}
-        isRequired={Boolean(registerOptions?.required)}
         isInvalid={fieldState.invalid}
         name={name}
         onBlur={field.onBlur}
diff --git a/packages/design-system/lib/components/Form/Date/index.tsx b/packages/design-system/lib/components/Form/Date/index.tsx
index afc9e5716..5480e502d 100644
--- a/packages/design-system/lib/components/Form/Date/index.tsx
+++ b/packages/design-system/lib/components/Form/Date/index.tsx
@@ -127,7 +127,6 @@ export default function DateSelect({
             label={labels.day}
             name={DateName.day}
             onSelectionChange={(key) => setValue(DateName.day, Number(key))}
-            isRequired
             enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
@@ -142,7 +141,6 @@ export default function DateSelect({
             label={labels.month}
             name={DateName.month}
             onSelectionChange={(key) => setValue(DateName.month, Number(key))}
-            isRequired
             enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
@@ -156,7 +154,6 @@ export default function DateSelect({
             label={labels.year}
             name={DateName.year}
             onSelectionChange={(key) => setValue(DateName.year, Number(key))}
-            isRequired
             enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
diff --git a/packages/design-system/lib/components/Form/FormInput/index.tsx b/packages/design-system/lib/components/Form/FormInput/index.tsx
index c6bd8c77d..7489baf24 100644
--- a/packages/design-system/lib/components/Form/FormInput/index.tsx
+++ b/packages/design-system/lib/components/Form/FormInput/index.tsx
@@ -78,7 +78,6 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
               isDisabled={isDisabled}
               isReadOnly={readOnly}
               isInvalid={fieldState.invalid}
-              isRequired={!!registerOptions.required}
             >
               <Input
                 {...props}
diff --git a/packages/design-system/lib/components/Form/FormTextArea/index.tsx b/packages/design-system/lib/components/Form/FormTextArea/index.tsx
index 567747840..75fd6dc36 100644
--- a/packages/design-system/lib/components/Form/FormTextArea/index.tsx
+++ b/packages/design-system/lib/components/Form/FormTextArea/index.tsx
@@ -59,7 +59,6 @@ export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>(
               isDisabled={isDisabled}
               isReadOnly={readOnly}
               isInvalid={fieldState.invalid}
-              isRequired={!!registerOptions.required}
             >
               <TextArea
                 {...props}
diff --git a/packages/design-system/lib/components/Form/Phone/index.tsx b/packages/design-system/lib/components/Form/Phone/index.tsx
index 371937f6d..10a2ca748 100644
--- a/packages/design-system/lib/components/Form/Phone/index.tsx
+++ b/packages/design-system/lib/components/Form/Phone/index.tsx
@@ -131,7 +131,6 @@ export default function Phone({
         aria-label={ariaLabel}
         isDisabled={disabled || registerOptions.disabled}
         isInvalid={fieldState.invalid}
-        isRequired={!!registerOptions?.required}
         name={name}
         type="tel"
         value={phoneNumber}
diff --git a/packages/design-system/lib/components/Input/Input.tsx b/packages/design-system/lib/components/Input/Input.tsx
index d2b69597c..6f23a06c3 100644
--- a/packages/design-system/lib/components/Input/Input.tsx
+++ b/packages/design-system/lib/components/Input/Input.tsx
@@ -89,7 +89,6 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
               <AriaInput
                 {...props}
                 id={inputId}
-                required={required}
                 // Avoid duplicating label text in placeholder when label is positioned above
                 // Screen readers would announce the label twice (once as label, once as placeholder)
                 // Only use placeholder if explicitly provided, otherwise use empty string
@@ -140,7 +139,6 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
           <AriaInput
             {...props}
             id={id}
-            required={required}
             // For floating labels, only set placeholder if explicitly provided
             // The label itself acts as the placeholder, so we don't want to duplicate it
             // This ensures the label only floats when focused or has value
diff --git a/packages/design-system/lib/components/PasswordInput/PasswordInput.tsx b/packages/design-system/lib/components/PasswordInput/PasswordInput.tsx
index 9b3fa7feb..0477e056b 100644
--- a/packages/design-system/lib/components/PasswordInput/PasswordInput.tsx
+++ b/packages/design-system/lib/components/PasswordInput/PasswordInput.tsx
@@ -84,7 +84,6 @@ export const PasswordInput = ({
             aria-describedby={describedBy}
             isDisabled={field.disabled}
             isInvalid={fieldState.invalid}
-            isRequired={!!registerOptions.required}
             name={field.name}
             onBlur={field.onBlur}
             onChange={field.onChange}
diff --git a/packages/tracking/lib/useFormTracking.ts b/packages/tracking/lib/useFormTracking.ts
index b37548ecc..ad22ae1cb 100644
--- a/packages/tracking/lib/useFormTracking.ts
+++ b/packages/tracking/lib/useFormTracking.ts
@@ -13,8 +13,11 @@ import {
   trackFormAbandonment,
   trackFormCompletion,
   trackFormInputStarted,
+  trackFormValidationError,
 } from "./form"
 
+import type { FieldErrors } from "react-hook-form"
+
 export function useFormTracking<T extends FieldValues>(
   formType: FormType,
   subscribe: UseFormSubscribe<T>,
@@ -66,6 +69,13 @@ export function useFormTracking<T extends FieldValues>(
     }
   }, [formStarted, formType, nameSuffix, formState.isValid])
 
+  useEffect(() => {
+    if (formState.submitCount === 0) return
+    if (formState.isValid) return
+
+    trackErrors(formState.errors, formType, nameSuffix)
+  }, [formState.submitCount, formState.errors, formType, nameSuffix])
+
   const trackFormSubmit = useCallback(() => {
     if (formState.isValid) {
       trackFormCompletion(formType, nameSuffix)
@@ -76,3 +86,24 @@ export function useFormTracking<T extends FieldValues>(
     trackFormSubmit,
   }
 }
+
+function trackErrors<T extends FieldValues>(
+  errors: FieldErrors<T>,
+  formType: FormType,
+  nameSuffix: string
+) {
+  const errorKeys = Object.getOwnPropertyNames(errors)
+
+  errorKeys.forEach((key) => {
+    const msg = errors[key]?.message
+    if (!msg) {
+      // Handle nested errors
+      trackErrors(errors[key] as FieldErrors<T>, formType, nameSuffix)
+      return
+    }
+
+    if (!msg || typeof msg !== "string") return
+
+    trackFormValidationError(formType, nameSuffix, msg)
+  })
+}