Merged in fix/BOOK-323-enter-details-scroll-error (pull request #2986)

Fix/BOOK-323 enter details scroll error

* fix(BOOK-323): scroll to invalid element on submit on enter details

* fix(BOOK-323): update error message design

* fix(BOOK-323): clean up

* fix(BOOK-323): scroll to fields in room in right order

* fix(BOOK-323): add id to translations

* fix(BOOK-323): remove undefined

* fix(BOOK-323): fix submitting state

* fix(BOOK-323): use ref in multiroom for scrolling to right element, add membershipNo

* fix(BOOK-323): fix invalid border country

* fix(BOOK-323): use error message component

* fix(BOOK-323): fix invalid focused styling on mobile

* fix(BOOK-323): remove redundant dependency in callback


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingFlowInput/index.tsx

@@ -14,6 +14,7 @@ import {
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
+import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
 
@@ -51,7 +52,7 @@ const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
     ref
   ) {
     const intl = useIntl()
-    const { control } = useFormContext()
+    const { control, formState } = useFormContext()
     const config = useBookingFlowConfig()
 
     return (
@@ -96,14 +97,15 @@ const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
               </Caption>
             ) : null}
             {fieldState.error && !hideError ? (
-              <Caption className={styles.error} fontOnly>
-                <MaterialIcon icon="info" color="Icon/Feedback/Error" />
-                {getErrorMessage(
+              <ErrorMessage
+                errors={formState.errors}
+                name={name}
+                messageLabel={getErrorMessage(
                   intl,
                   config.variant,
                   fieldState.error.message
                 )}
-              </Caption>
+              />
             ) : null}
           </TextField>
         )}

packages/booking-flow/lib/components/BookingFlowInput/input.module.css

@@ -3,15 +3,3 @@
   display: flex;
   gap: var(--Space-x05);
 }
-
-.error {
-  align-items: center;
-  color: var(--Text-Interactive-Error);
-  display: flex;
-  gap: var(--Space-x05);
-  margin: var(--Space-x1) 0 0;
-}
-
-.error svg {
-  min-width: 20px;
-}