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

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) {

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({
+export function BookingCodeError({ codeError }: { codeError: FieldError }) {
-  codeError,
-  isDesktop = false,
-}: {
-  codeError: FieldError
-  isDesktop?: boolean
-}) {
   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>

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 {

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}

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);
 }
 

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;
 

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",

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;
   }

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;

packages/booking-flow/lib/components/BookingWidget/DatePicker/index.tsx

@@ -57,8 +57,7 @@ export default function DatePickerForm({
     {
       isOpen,
       onClose: () => {
-        setIsOpen(false)
+        close()
-        unlockScroll()
       },
       isDismissable: true,
     },

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"

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
+          }}
         />
       ))}
     </>

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 && (

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>
   )

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>

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 {

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>

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);
+    }
+  }
+}

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 {