Merged in fix/bw-fixes (pull request #3481)

Fix/bw fixes

* fix(bookingwidget): fixed some mobile issues with the booking widget

* fixed dual scroll and hidden button in mobile guests & rooms picker

* fixed button colors

* fixed mobile search button position

* Remove scroll lock

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css

@@ -62,6 +62,9 @@
   color: var(--Text-Interactive-Focus);
 }
 @media screen and (max-width: 767px) {
+  .buttonContainer {
+    margin-bottom: var(--Space-x6);
+  }
   .voucherContainer {
     padding: var(--Space-x15) 0 var(--Space-x4);
   }

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx

@@ -131,7 +131,7 @@ export default function DatePickerRangeMobile({
       <footer className={styles.footer}>
         <Button
           className={styles.button}
-          variant="Primary"
+          variant="Tertiary"
           color="Primary"
           size="md"
           onPress={close}

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css

@@ -81,7 +81,6 @@ div.months {
     #ffffff 82.5%
   );
   display: flex;
-  grid-area: content;
   padding: var(--Space-x1) var(--Space-x2) var(--Space-x7);
   position: fixed;
   bottom: 0;

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

@@ -8,7 +8,6 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
-import { useScrollLock } from "@scandic-hotels/common/hooks/useScrollLock"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../hooks/useLang"
@@ -31,9 +30,6 @@ export default function DatePickerForm({
 
   const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
   const [isDesktop, setIsDesktop] = useState(true)
-  const { lockScroll, unlockScroll } = useScrollLock({
-    autoLock: false,
-  })
   const [isOpen, setIsOpen] = useState(false)
   const selectedDate = useWatch({ name })
   const { setValue } = useFormContext()
@@ -50,8 +46,7 @@ export default function DatePickerForm({
       )
     }
     setIsOpen(false)
-    unlockScroll()
+  }, [name, setValue, selectedDate])
-  }, [name, setValue, selectedDate, unlockScroll])
 
   const { overlayProps, underlayProps } = useOverlay(
     {
@@ -168,11 +163,6 @@ export default function DatePickerForm({
         ariaLabelledBy={ariaLabelledBy}
         onPress={() => {
           setIsOpen((prev) => !prev)
-          if (!isOpen) {
-            lockScroll()
-          } else {
-            unlockScroll()
-          }
         }}
         selectedFromDate={selectedFromDate}
         selectedToDate={selectedToDate}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx

@@ -187,7 +187,7 @@ export default function GuestsRoomsPickerDialog({
             onPress={handleClose}
             isDisabled={isInvalid}
             className={styles.doneButton}
-            variant={isDesktop ? "Tertiary" : "Primary"}
+            variant="Tertiary"
             color="Primary"
             size={isDesktop ? "sm" : "md"}
           >

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -115,13 +115,13 @@
     grid-area: content;
     overflow-y: scroll;
     scroll-snap-type: y mandatory;
-    padding-bottom: calc(120px + var(--Space-x2));
+    padding-bottom: calc(var(--sticky-button-height) + var(--Space-x4));
   }
 
   .header {
     display: grid;
     grid-area: header;
-    padding: var(--Space-x3) var(--Space-x2) 0;
+    padding: 0 var(--Space-x2) 0;
   }
 
   .close {

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

@@ -7,7 +7,6 @@ import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
-import { useScrollLock } from "@scandic-hotels/common/hooks/useScrollLock"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ValidationError from "./ValidationError/index"
@@ -40,9 +39,6 @@ export default function GuestsRoomsPickerForm({
 
   const [scrollPosition, setScrollPosition] = useState(0)
   const roomError = errors["rooms"]
-  const { lockScroll, unlockScroll } = useScrollLock({
-    autoLock: false,
-  })
   useEffect(() => {
     if (roomError) {
       setShowErrorModal(true)
@@ -136,7 +132,6 @@ export default function GuestsRoomsPickerForm({
       isOpen,
       onClose: () => {
         setIsOpen(false)
-        unlockScroll()
       },
       isDismissable: true,
     },
@@ -150,11 +145,6 @@ export default function GuestsRoomsPickerForm({
           rooms={rooms}
           onPress={() => {
             setIsOpen((prev) => !prev)
-            if (!isDesktop && !isOpen) {
-              lockScroll()
-            } else {
-              unlockScroll()
-            }
           }}
           ariaLabelledBy={ariaLabelledBy}
         />
@@ -181,7 +171,6 @@ export default function GuestsRoomsPickerForm({
                   rooms={rooms}
                   onClose={() => {
                     setIsOpen((prev) => !prev)
-                    unlockScroll()
                   }}
                   containerRef={ref}
                 />

packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css

@@ -40,11 +40,10 @@
   gap: var(--Space-x3);
   height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
   width: 100%;
-  padding: var(--Space-x3) var(--Space-x2);
+  padding: var(--Space-x3) var(--Space-x2) 0;
   position: fixed;
   left: 0;
   bottom: 0;
-  overflow-y: auto;
   transform: translateY(100%);
   transition: transform 300ms ease;
   visibility: hidden;