Merged in fix/sw-350-booking-widget-ui-fixes (pull request #683)

Fix/sw 350 booking widget ui fixes

Approved-by: Simon.Emanuelsson

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -48,15 +48,6 @@ export default function Search({ locations }: SearchProps) {
     dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
   }
 
-  function handleOnBlur() {
-    if (!value && state.searchData?.name) {
-      setValue(name, state.searchData.name)
-      // Always need to manually trigger
-      // revalidation when setting value r-h-f
-      trigger()
-    }
-  }
-
   function handleOnChange(
     evt: FormEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>
   ) {
@@ -138,7 +129,9 @@ export default function Search({ locations }: SearchProps) {
         <div className={styles.container}>
           <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
             <Caption color={isOpen ? "uiTextActive" : "red"}>
-              {intl.formatMessage({ id: "Where to" })}
+              {state.searchData?.type === "hotels"
+                ? state.searchData?.relationships?.city?.name
+                : intl.formatMessage({ id: "Where to" })}
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
@@ -154,7 +147,6 @@ export default function Search({ locations }: SearchProps) {
                 }),
                 ...register(name, {
                   onBlur: function () {
-                    handleOnBlur()
                     closeMenu()
                   },
                   onChange: handleOnChange,

components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -24,8 +24,3 @@
   p {
   color: var(--UI-Text-Active);
 }
-
-.container:hover:has(input:not(:active, :focus, :focus-within))
-  input::-webkit-search-cancel-button {
-  display: none;
-}

components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
 
@@ -50,17 +50,17 @@ export default function Voucher() {
       >
         <div className={styles.options}>
           <label className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useVouchers" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{useVouchers}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
           <label className={styles.option}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useBonus" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{bonus}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
           <label className={styles.option}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useReward" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{reward}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>

components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css

@@ -68,7 +68,7 @@
   .options {
     flex-direction: column;
     max-width: 190px;
-    gap: 0;
+    gap: var(--Spacing-x-half);
   }
   .vouchers:hover,
   .option:hover {
@@ -76,6 +76,7 @@
   }
   .optionsContainer {
     flex-direction: row;
+    align-items: center;
   }
   .checkboxVoucher {
     display: none;

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -75,8 +75,10 @@
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);
   }
+
   .when:hover,
   .rooms:hover,
+  .when:has([data-isopen="true"]),
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }

components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -20,7 +21,6 @@ import type { BookingWidgetFormContentProps } from "@/types/components/form/book
 export default function FormContent({
   locations,
   formId,
-  formState,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
   const selectedDate = useWatch({ name: "date" })
@@ -40,7 +40,7 @@ export default function FormContent({
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },
-                { totalNights: nights }
+                { totalNights: nights > 0 ? nights : 0 }
               )}
             </Caption>
             <DatePicker />
@@ -60,7 +60,6 @@ export default function FormContent({
         <div className={styles.buttonContainer}>
           <Button
             className={styles.button}
-            disabled={!formState.isValid}
             form={formId}
             intent="primary"
             theme="base"

components/Forms/BookingWidget/form.module.css

@@ -22,6 +22,7 @@
 @media screen and (min-width: 768px) {
   .section {
     display: flex;
+    width: 100%;
   }
 
   .default {
@@ -35,6 +36,13 @@
       var(--Spacing-x-one-and-half) var(--Spacing-x1);
   }
 
+  .section {
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
+  }
+
   .full {
     padding: var(--Spacing-x1) 0;
   }