From 20cbb4b0a006aa4e6ccc330fd4b04604aae318e4 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 13 Dec 2024 09:51:35 +0100
Subject: [PATCH] Fix: Merging issues

---
 .../hotelreservation/(standard)/select-hotel/page.tsx |  2 +-
 .../SelectHotelMap/SelectHotelMapContent/index.tsx    | 11 ++++++-----
 .../selectHotelMapContent.module.css                  |  6 ++++++
 hooks/useScrollToTop.ts                               |  3 +--
 server/routers/hotels/output.ts                       |  6 +++++-
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index 04439fdf4..821e2d3cb 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -27,7 +27,7 @@ export default async function SelectHotelPage({
 
   return (
     <Suspense
-      key={`${city.name}-${searchParams.fromDate}-${searchParams.toDate}-${adultsParams}-${childrenParams}`}
+      key={`${city.name}-${searchParams.fromDate}-${searchParams.toDate}-${adultsInRoom}-${childrenInRoom}`}
       fallback={<SelectHotelSkeleton />}
     >
       <SelectHotel
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index 7dbb89171..a9b72d220 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -42,7 +42,7 @@ export default function SelectHotelContent({
 
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
-  const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
@@ -85,7 +85,7 @@ export default function SelectHotelContent({
     const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
     setVisibleHotels(visibleHotels)
     setTimeout(() => {
-      setShowSkeleton(true)
+      setShowSkeleton(false)
     }, SKELETON_LOAD_DELAY)
   }, [hotels, filteredHotelPins, map])
 
@@ -99,7 +99,7 @@ export default function SelectHotelContent({
     () =>
       debounce(() => {
         if (!map) return
-        setShowSkeleton(false)
+        setShowSkeleton(true)
         getHotelCards()
       }, 100),
     [map, getHotelCards]
@@ -138,11 +138,12 @@ export default function SelectHotelContent({
           </Button>
           <FilterAndSortModal filters={filterList} />
         </div>
+
         {showSkeleton ? (
-          <>
+          <div className={styles.skeletonContainer}>
             <RoomCardSkeleton />
             <RoomCardSkeleton />
-          </>
+          </div>
         ) : (
           <HotelListing hotels={visibleHotels} />
         )}
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
index 811f94d68..ae6b81191 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
@@ -48,4 +48,10 @@
     padding: 0 0 var(--Spacing-x1);
     position: static;
   }
+
+  .skeletonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--Spacing-x2);
+  }
 }
diff --git a/hooks/useScrollToTop.ts b/hooks/useScrollToTop.ts
index 70f306783..39ff5da0c 100644
--- a/hooks/useScrollToTop.ts
+++ b/hooks/useScrollToTop.ts
@@ -1,5 +1,4 @@
-import { type  RefObject,useEffect,useState  } from "react"
-
+import { type RefObject, useEffect, useState } from "react"
 
 interface UseScrollToTopProps {
   threshold: number
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 1bffd3543..937506b5d 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -470,7 +470,11 @@ export const hotelAttributesSchema = z.object({
   isPublished: z.boolean(),
   keywords: z.array(z.string()),
   location: locationSchema,
-  merchantInformationData: merchantInformationSchema,
+  merchantInformationData: merchantInformationSchema.default({
+    webMerchantId: "",
+    cards: {},
+    alternatePaymentOptions: {},
+  }),
   name: z.string(),
   operaId: z.string(),
   parking: z.array(parkingSchema),