Merged in fix/book-149-ui-fixes (pull request #3463)

Fix/book 149 ui fixes

* fixed text-overflow issue in datepicker trigger

* fixed X missing in booking code text field

* fixed toDate not setting properly

* fixed spacing issues and placeholder text not fitting

* added error message to child age if none is added

* spacing fixes

* Revert "map link alignment fix"

This reverts commit d38cc5b007bc05a1d48ce6661b1052fe714961c3.

* fixed EB points padding issue on SAS tablet

* maxWidth on BookingCode/voucher

* spacing fixes

* fixed icons in error message

* spacing fixes

* scroll to child age picker updates

* feat(SW-3706): fix heatmap issue for langswitcher and booking widget

* fixed tablet lineup issue


Approved-by: Linus Flood

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef } from "react"
+import { useCallback, useEffect, useRef } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -18,20 +18,25 @@ type ChildSelectorProps = {
   currentAdults: number
   currentChildren: Child[]
   childrenInAdultsBed: number
+  containerRef?: React.RefObject<HTMLDivElement | null>
+  roomsDividerRef?: React.RefObject<HTMLDivElement | null>
 }
 export default function ChildSelector({
   roomIndex = 0,
   currentAdults,
   childrenInAdultsBed,
   currentChildren,
+  containerRef,
 }: ChildSelectorProps) {
   const intl = useIntl()
+  const childRefs = useRef<(HTMLDivElement | null)[]>([])
+  const previousChildCount = useRef(currentChildren.length)
+
   const childrenLabel = intl.formatMessage({
     id: "bookingwidget.dropdown.children",
     defaultMessage: "Children (0–12 years)",
   })
   const { setValue } = useFormContext()
-  const agePickerRef = useRef<HTMLDivElement | null>(null)
 
   function increaseChildrenCount(roomIndex: number) {
     if (currentChildren.length < 5) {
@@ -53,6 +58,35 @@ export default function ChildSelector({
       })
     }
   }
+  const scrollToAgePicker = useCallback(() => {
+    if (!containerRef?.current) return
+
+    const lastChildIndex = currentChildren.length - 1
+    const lastChild = childRefs.current[lastChildIndex]
+
+    if (!lastChild) return
+
+    const container = containerRef.current
+    const containerRect = container.getBoundingClientRect()
+    const targetRect = lastChild.getBoundingClientRect()
+
+    const targetOffset =
+      targetRect.top - containerRect.top + container.scrollTop
+    const centerOffset = containerRect.height / 2 - targetRect.height / 2
+
+    container.scrollTo({
+      top: targetOffset - centerOffset,
+      behavior: "smooth",
+    })
+  }, [containerRef, currentChildren.length])
+
+  useEffect(() => {
+    // Only scroll when a child was added
+    if (currentChildren.length > previousChildCount.current) {
+      scrollToAgePicker()
+    }
+    previousChildCount.current = currentChildren.length
+  }, [currentChildren.length, scrollToAgePicker])
 
   return (
     <>
@@ -71,19 +105,13 @@ export default function ChildSelector({
             decreaseChildrenCount(roomIndex)
           }}
           handleOnIncrease={() => {
-            requestAnimationFrame(() => {
-              agePickerRef.current?.scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-              })
-            })
             increaseChildrenCount(roomIndex)
           }}
           disableDecrease={currentChildren.length == 0}
           disableIncrease={currentChildren.length == 5}
         />
       </section>
-      <span ref={agePickerRef} />
+
       {currentChildren.map((child, index) => (
         <ChildInfoSelector
           roomIndex={roomIndex}
@@ -92,6 +120,9 @@ export default function ChildSelector({
           adults={currentAdults}
           key={"child_" + index}
           childrenInAdultsBed={childrenInAdultsBed}
+          scrollToRef={(el) => {
+            childRefs.current[index] = el
+          }}
         />
       ))}
     </>