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

apps/scandic-web/components/Forms/BookingWidget/form.module.css

@@ -34,9 +34,17 @@
   .full {
     padding: var(--Spacing-x1) 0;
   }
+
   .form {
     width: 100%;
     max-width: var(--max-width-page);
     margin: 0 auto;
   }
+
+  .compact {
+    width: 1160px;
+    padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
+      var(--Spacing-x-one-and-half) var(--Spacing-x1);
+    white-space: nowrap;
+  }
 }

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

@@ -15,7 +15,10 @@ import { bookingWidgetVariants } from "./variants"
 
 import styles from "./form.module.css"
 
-import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
+import type {
+  BookingWidgetSchema,
+  BookingWidgetType,
+} from "@/types/components/bookingWidget"
 import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidget"
 import type { Location } from "@/types/trpc/routers/hotel/locations"
 
@@ -85,9 +88,13 @@ export default function Form({
   )
 }
 
-export function BookingWidgetFormSkeleton() {
+export function BookingWidgetFormSkeleton({
+  type,
+}: {
+  type: BookingWidgetType
+}) {
   const classNames = bookingWidgetVariants({
-    type: "full",
+    type,
   })
 
   return (

apps/scandic-web/components/Forms/BookingWidget/variants.ts

@@ -7,6 +7,7 @@ export const bookingWidgetVariants = cva(styles.section, {
     type: {
       default: styles.default,
       full: styles.full,
+      compact: styles.compact,
     },
   },
   defaultVariants: {