Merged in feature/SW-1736-foating-booking-widget (pull request #1696)

Feature/SW-1736 floating booking widget

* feature: Add floating booking widget on start page SW-1736

* fix: Make sure we don't try to use IntersectionObserver on the server

* fix: make sure that we disconnect the intersectionobserver when dismounting

* fix: pass searchparams to floating bookingwidget


Approved-by: Michael Zetterberg

apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -86,13 +86,13 @@ export function VoucherSkeleton() {
   return (
     <FormProvider {...form}>
       <div className={styles.optionsContainer}>
-        <div>
+        <div className={styles.voucherSkeletonContainer}>
           <label>
             <Caption type="bold" color="red" asChild>
               <span>{vouchers}</span>
             </Caption>
           </label>
-          <SkeletonShimmer width={"100%"} />
+          <SkeletonShimmer width={"100%"} display={"block"} />
         </div>
         <div className={styles.options}>
           <div className={styles.option}>

apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css

@@ -16,6 +16,9 @@
   display: flex;
   flex-direction: column;
 }
+.voucherSkeletonContainer {
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+}
 
 .checkbox {
   width: 24px;

apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -59,6 +59,9 @@
     height: 60px;
   }
 }
+.voucherContainer {
+  height: 100%;
+}
 
 @media screen and (min-width: 768px) {
   .input {

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -135,13 +135,13 @@ export function BookingWidgetFormContentSkeleton() {
               { totalNights: 0 }
             )}
           </Caption>
-          <SkeletonShimmer width={"100%"} />
+          <SkeletonShimmer width={"100%"} display={"block"} />
         </div>
         <div className={styles.rooms}>
           <Caption color="red" type="bold" asChild>
             <span>{intl.formatMessage({ id: "Rooms & Guests" })}</span>
           </Caption>
-          <SkeletonShimmer width={"100%"} />
+          <SkeletonShimmer width={"100%"} display={"block"} />
         </div>
       </div>
       <div className={styles.voucherContainer}>