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
2026-01-22 12:50:24 +00:00
parent f79ff9b570
commit 665ca210c0
19 changed files with 129 additions and 41 deletions
--- a/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css
+++ b/apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css
@@ -70,10 +70,12 @@
  left: 0;
  bottom: 0;
  transform: translateY(100%);
+  visibility: hidden;
 }

 .footer .dropdown.isExpanded {
  transform: translateY(0);
+  visibility: visible;
 }

@media screen and (max-width: 767px) {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/BookingCodeError/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/BookingCodeError/index.tsx
@@ -11,13 +11,7 @@ import { isMultiRoomError } from "../../utils"

 import styles from "./booking-code-error.module.css"

-export function BookingCodeError({
-  codeError,
-  isDesktop = false,
-}: {
-  codeError: FieldError
-  isDesktop?: boolean
-}) {
+export function BookingCodeError({ codeError }: { codeError: FieldError }) {
  const intl = useIntl()
  const isMultiroomError = isMultiRoomError(codeError.message)
  const config = useBookingFlowConfig()
@@ -33,7 +27,7 @@ export function BookingCodeError({
            size={20}
            icon="error"
            color="Icon/Feedback/Error"
-            isFilled={!isDesktop}
+            isFilled
          />
          {getErrorMessage(intl, config.variant, codeError.message)}
        </span>
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
@@ -11,6 +11,7 @@
  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x1) var(--Space-x15);
  border: 2px solid transparent;
+  flex-shrink: 0;
 }

 .bookingCode:focus-within,
@@ -27,6 +28,9 @@
  gap: var(--Space-x05);
  position: relative;
  color: var(--Text-Secondary);
+  flex-shrink: 0;
+  text-wrap: nowrap;
+  width: 100%;
 }

 .input {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
@@ -167,7 +167,7 @@ export default function BookingCode() {
        <span className={styles.inputWrapper}>
          <BookingWidgetInput
            className={styles.input}
-            type="text"
+            type="search"
            placeholder={addCode}
            aria-labelledby="bookingCodeLabel"
            name="bookingCode.value"
@@ -204,7 +204,7 @@ export default function BookingCode() {
          }
        >
          {codeError?.message ? (
-            <BookingCodeError codeError={codeError} isDesktop />
+            <BookingCodeError codeError={codeError} />
          ) : (
            <RememberCode
              bookingCodeValue={bookingCode?.value}
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css
@@ -10,7 +10,9 @@
  color: var(--UI-Text-Error);
  white-space: break-spaces;
 }
-
+.label {
+  text-wrap: nowrap;
+}
 .errorIcon {
  min-width: 20px;
 }
@@ -18,7 +20,6 @@
  align-items: center;
  display: flex;
  color: var(--Text-Secondary);
-  min-width: 160px;
  gap: var(--Space-x1);
 }

--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
@@ -3,7 +3,7 @@
  border-style: solid;
  border-width: 1px;
  border-radius: var(--Corner-Radius-md);
-  padding: var(--Space-x1) var(--Space-x15);
+  padding: var(--Space-x15);
  position: relative;
  height: 60px;

--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx
@@ -15,7 +15,12 @@ export default function ValidationError() {
        variant="Body/Supporting text (caption)/smBold"
      >
        <span>
-          <MaterialIcon icon="error" color="Icon/Feedback/Error" size={20} />
+          <MaterialIcon
+            icon="error"
+            isFilled
+            color="Icon/Feedback/Error"
+            size={20}
+          />
          {intl.formatMessage({
            id: "bookingWidget.validationError.destination",
            defaultMessage: "Enter destination or hotel",
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
@@ -43,7 +43,7 @@
  .optionsContainer {
    display: grid;
    grid-template-columns: auto auto;
-    column-gap: var(--Space-x2);
+    column-gap: var(--Space-x3);
  }
 }

@@ -54,6 +54,9 @@
  .showOnTablet {
    display: flex;
  }
+  .option {
+    min-height: 56px;
+  }
  .skeletonContainer {
    padding: var(--Space-x2) 0;
  }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css
@@ -63,7 +63,7 @@
 }
@media screen and (max-width: 767px) {
  .voucherContainer {
-    padding: var(--Space-x2) 0 var(--Space-x4);
+    padding: var(--Space-x15) 0 var(--Space-x4);
  }
  .buttonContainer {
    width: 100%;
@@ -73,7 +73,7 @@
@media screen and (max-width: 1366px) {
  .inputContainer {
    display: grid;
-    gap: var(--Space-x2);
+    gap: var(--Space-x15);
  }

  .rooms,
@@ -111,7 +111,7 @@
  .inputContainer {
    display: flex;
    flex: 2;
-    gap: var(--Space-x2);
+    gap: var(--Space-x15);
  }
  .voucherContainer {
    border-radius: 0 0 var(--Corner-Radius-md) var(--Corner-Radius-md);
@@ -191,12 +191,18 @@
 }

@media screen and (min-width: 1367px) {
+  .inputContainer {
+    margin-left: calc(-1 * var(--Space-x15));
+  }
  .input {
-    gap: var(--Space-x2);
+    gap: var(--Space-x15);
  }
  .inputRow {
    flex: 1;
  }
+  .voucherRow {
+    flex: 0 1;
+  }

  .bookingCodeDisabled {
    flex: none;
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/index.tsx
@@ -57,8 +57,7 @@ export default function DatePickerForm({
    {
      isOpen,
      onClose: () => {
-        setIsOpen(false)
-        unlockScroll()
+        close()
      },
      isDismissable: true,
    },
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -30,6 +30,7 @@ type ChildInfoSelectorProps = {
  index: number
  roomIndex: number
  childrenInAdultsBed: number
+  scrollToRef?: React.Ref<HTMLDivElement>
 }

 export default function ChildInfoSelector({
@@ -38,6 +39,7 @@ export default function ChildInfoSelector({
  adults,
  index = 0,
  roomIndex = 0,
+  scrollToRef,
 }: ChildInfoSelectorProps) {
  const ageSelectRef = useRef<HTMLDivElement>(null)
  const bedPrefSelectRef = useRef<HTMLDivElement>(null)
@@ -84,8 +86,11 @@ export default function ChildInfoSelector({
    defaultMessage: "Child age is required",
  })

-  const { setValue, formState } = useFormContext()
+  const { setValue, formState, watch } = useFormContext()

+  const selectedAgeValue = watch(
+    `rooms.${roomIndex}.childrenInRoom.${index}.age`
+  )
  function updateSelectedBed(bed: number) {
    setValue(`rooms.${roomIndex}.childrenInRoom.${index}.bed`, bed)
  }
@@ -140,10 +145,16 @@ export default function ChildInfoSelector({

  const ageError = roomErrors?.age
  const bedError = roomErrors?.bed
+  const isInvalid =
+    !!ageError ||
+    !!bedError ||
+    selectedAgeValue === undefined ||
+    selectedAgeValue === null ||
+    selectedAgeValue === -1

  return (
    <>
-      <div key={index} className={styles.childInfoContainer}>
+      <div key={index} ref={scrollToRef} className={styles.childInfoContainer}>
        <div ref={ageSelectRef}>
          <Select
            items={ageList}
@@ -152,9 +163,13 @@ export default function ChildInfoSelector({
            onSelectionChange={(key) => {
              updateSelectedAge(key as number)
            }}
+            isRequired
            popoverWidth={`${ageWidth}px`}
            value={child.age ?? childDefaultValues.age}
-            isInvalid={!!ageError}
+            isInvalid={
+              (!!ageError || selectedAgeValue === undefined) ??
+              childDefaultValues.age === -1
+            }
          />
        </div>
        <div ref={bedPrefSelectRef}>
@@ -186,7 +201,7 @@ export default function ChildInfoSelector({
        </Typography>
      ) : null}

-      {ageError || bedError ? (
+      {isInvalid ? (
        <>
          <Typography
            variant="Body/Supporting text (caption)/smRegular"
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/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
+          }}
        />
      ))}
    </>
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
@@ -23,11 +23,13 @@ const MAX_ROOMS = 4
 interface GuestsRoomsPickerDialogProps {
  rooms: TGuestsRoom[]
  onClose: () => void
+  containerRef?: React.RefObject<HTMLDivElement | null>
 }

 export default function GuestsRoomsPickerDialog({
  rooms,
  onClose,
+  containerRef,
 }: GuestsRoomsPickerDialogProps) {
  const intl = useIntl()
  const isDesktop = useIsDesktop()
@@ -124,6 +126,7 @@ export default function GuestsRoomsPickerDialog({
              room={room}
              index={index}
              onRemove={handleRemoveRoom}
+              containerRef={containerRef}
            />
          ))}
          {!isDesktop && (
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
@@ -16,12 +16,15 @@ export function GuestsRoom({
  room,
  index,
  onRemove,
+  containerRef,
 }: {
  room: GuestsRoom
  index: number
  onRemove: (index: number) => void
+  containerRef?: React.RefObject<HTMLDivElement | null>
 }) {
  const intl = useIntl()
+
  const roomLabel = intl.formatMessage(
    {
      id: "booking.roomIndex",
@@ -48,6 +51,7 @@ export function GuestsRoom({
          currentAdults={room.adults}
          currentChildren={room.childrenInRoom}
          childrenInAdultsBed={childrenInAdultsBed}
+          containerRef={containerRef}
        />
        {index !== 0 && (
          <Button
@@ -64,6 +68,7 @@ export function GuestsRoom({
          </Button>
        )}
      </section>
+
      <Divider color="Border/Divider/Subtle" />
    </div>
  )
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx
@@ -20,7 +20,12 @@ export default function ValidationError() {
        variant="Body/Supporting text (caption)/smBold"
      >
        <span>
-          <MaterialIcon icon="error" color="Icon/Feedback/Error" size={20} />
+          <MaterialIcon
+            icon="error"
+            isFilled
+            color="Icon/Feedback/Error"
+            size={20}
+          />
          {errorMessage}
        </span>
      </Typography>
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -108,7 +108,6 @@
  left: 0;
  transition: top 300ms ease;
  z-index: var(--booking-widget-z-index);
-  overflow: scroll;
 }

@media screen and (max-width: 1366px) {
@@ -116,6 +115,7 @@
    grid-area: content;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
+    padding-bottom: calc(120px + var(--Space-x2));
  }

  .header {
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/index.tsx
@@ -105,7 +105,7 @@ export default function GuestsRoomsPickerForm({
  }, [])

  useEffect(() => {
-    if (isDesktop && rooms.length > 1) {
+    if (isDesktop) {
      updateHeight(containerConstraint)
    }
  }, [
@@ -138,7 +138,7 @@ export default function GuestsRoomsPickerForm({
        setIsOpen(false)
        unlockScroll()
      },
-      isDismissable: !errors.rooms,
+      isDismissable: true,
    },
    ref
  )
@@ -183,6 +183,7 @@ export default function GuestsRoomsPickerForm({
                    setIsOpen((prev) => !prev)
                    unlockScroll()
                  }}
+                  containerRef={ref}
                />
              </div>
            </FocusScope>
--- a/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
@@ -12,6 +12,8 @@
      bottom: 0;
      width: 100%;
      z-index: 1;
+      transform: translateY(0);
+      visibility: visible;
    }
    @media screen and (max-width: 767px) {
      .backdrop {
@@ -41,9 +43,11 @@
  padding: var(--Space-x3) var(--Space-x2);
  position: fixed;
  left: 0;
-  bottom: -100%;
+  bottom: 0;
  overflow-y: auto;
-  transition: bottom 300ms ease;
+  transform: translateY(100%);
+  transition: transform 300ms ease;
+  visibility: hidden;

  &:has([data-searchlist-open="true"]) {
    overflow-y: visible;
@@ -83,6 +87,8 @@
    position: static;
    padding: 0;
    overflow-y: visible;
+    transform: none;
+    visibility: visible;

    &.compactFormContainer {
      box-shadow: none;
@@ -93,3 +99,11 @@
    display: none;
  }
 }
+
+@media screen and (min-width: 1367px) {
+  .formContainer {
+    &.compactFormContainer {
+      padding-left: var(--Space-x15);
+    }
+  }
+}
--- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
@@ -29,7 +29,7 @@
 .link {
  display: flex;
  gap: var(--Space-x05);
-  align-items: center;
+  align-items: baseline;
 }

 .bookingCodeFilter {