feat: add multiroom tracking to booking flow

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -34,7 +34,7 @@ import type { HotelCardProps } from "@/types/components/hotelReservation/selectH
 import type { Lang } from "@/constants/languages"
 
 function HotelCard({
-  hotel,
+  hotelData: { availability, hotel },
   isUserLoggedIn,
   state = "default",
   type = HotelCardListingTypeEnum.PageListing,
@@ -45,36 +45,27 @@ function HotelCard({
   const intl = useIntl()
   const { setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore()
 
-  const { hotelData } = hotel
-  const { price } = hotel
-
   const handleMouseEnter = useCallback(() => {
-    if (hotelData) {
-      setActiveHotelPin(hotelData.name)
-    }
-  }, [setActiveHotelPin, hotelData])
+    setActiveHotelPin(hotel.name)
+  }, [setActiveHotelPin, hotel])
 
   const handleMouseLeave = useCallback(() => {
-    if (hotelData) {
-      setActiveHotelPin(null)
-      setActiveHotelCard(null)
-    }
-  }, [setActiveHotelPin, hotelData, setActiveHotelCard])
+    setActiveHotelPin(null)
+    setActiveHotelCard(null)
+  }, [setActiveHotelPin, setActiveHotelCard])
 
-  if (!hotel || !hotelData) return null
-
-  const amenities = hotelData.detailedFacilities.slice(0, 5)
+  const amenities = hotel.detailedFacilities.slice(0, 5)
 
   const classNames = hotelCardVariants({
     type,
     state,
   })
 
-  const addressStr = `${hotelData.address.streetAddress}, ${hotelData.address.city}`
-  const galleryImages = mapApiImagesToGalleryImages(
-    hotelData.galleryImages || []
-  )
-  const fullPrice = hotel.price?.public?.rateType?.toLowerCase() === "regular"
+  const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
+  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
+  const fullPrice =
+    availability.productType?.public?.rateType?.toLowerCase() === "regular"
+  const price = availability.productType
 
   return (
     <article
@@ -84,21 +75,18 @@ function HotelCard({
     >
       <div>
         <div className={styles.imageContainer}>
-          <ImageGallery title={hotelData.name} images={galleryImages} fill />
-          {hotelData.ratings?.tripAdvisor && (
-            <TripAdvisorChip rating={hotelData.ratings.tripAdvisor.rating} />
+          <ImageGallery title={hotel.name} images={galleryImages} fill />
+          {hotel.ratings?.tripAdvisor && (
+            <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
           )}
         </div>
       </div>
       <div className={styles.hotelContent}>
         <section className={styles.hotelInformation}>
           <div className={styles.titleContainer}>
-            <HotelLogo
-              hotelId={hotelData.operaId}
-              hotelType={hotelData.hotelType}
-            />
+            <HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
             <Subtitle textTransform="capitalize" color="uiTextHighContrast">
-              {hotelData.name}
+              {hotel.name}
             </Subtitle>
             <div className={styles.addressContainer}>
               <address className={styles.address}>
@@ -107,7 +95,7 @@ function HotelCard({
               <address className={styles.addressMobile}>
                 <Caption color="burgundy" type="underline" asChild>
                   <Link
-                    href={`https://www.google.com/maps/dir/?api=1&destination=${hotelData.location.latitude},${hotelData.location.longitude}`}
+                    href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
                     target="_blank"
                     aria-label={intl.formatMessage({
                       id: "Driving directions",
@@ -130,7 +118,7 @@ function HotelCard({
                   { id: "{number} km to city center" },
                   {
                     number: getSingleDecimal(
-                      hotelData.location.distanceToCentre / 1000
+                      hotel.location.distanceToCentre / 1000
                     ),
                   }
                 )}
@@ -138,7 +126,7 @@ function HotelCard({
             </div>
           </div>
           <Body className={styles.hotelDescription}>
-            {hotelData.hotelContent.texts.descriptions?.short}
+            {hotel.hotelContent.texts.descriptions?.short}
           </Body>
           <div className={styles.facilities}>
             {amenities.map((facility) => {
@@ -155,13 +143,13 @@ function HotelCard({
           </div>
           <ReadMore
             label={intl.formatMessage({ id: "See hotel details" })}
-            hotelId={hotelData.operaId}
-            hotel={hotelData}
+            hotelId={hotel.operaId}
+            hotel={hotel}
             showCTA={true}
           />
         </section>
         <div className={styles.prices}>
-          {!price ? (
+          {!availability.productType ? (
             <NoPriceAvailableCard />
           ) : (
             <>
@@ -174,18 +162,18 @@ function HotelCard({
                 </span>
               )}
               {(!isUserLoggedIn ||
-                !price.member ||
+                !price?.member ||
                 (bookingCode && !fullPrice)) &&
-                price.public && (
+                price?.public && (
                   <HotelPriceCard productTypePrices={price.public} />
                 )}
-              {price.member && (
+              {availability.productType.member && (
                 <HotelPriceCard
-                  productTypePrices={price.member}
+                  productTypePrices={availability.productType.member}
                   isMemberPrice
                 />
               )}
-              {price.redemption && (
+              {price?.redemption && (
                 <div className={styles.pointsCard}>
                   <Caption>
                     {intl.formatMessage({ id: "Available rates" })}
@@ -210,7 +198,7 @@ function HotelCard({
                 className={styles.button}
               >
                 <Link
-                  href={`${selectRate(lang)}?hotel=${hotel.hotelData.operaId}`}
+                  href={`${selectRate(lang)}?hotel=${hotel.operaId}`}
                   color="none"
                   keepSearchParams
                 >