Fix: Merging issues

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

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

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);
+  }
 }

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

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),