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

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;