feat(SW-201): Refactoring how we fetch hotel page data

components/ContentType/HotelPage/index.tsx

@@ -1,6 +1,8 @@
+import { notFound } from "next/navigation"
+
 import hotelPageParams from "@/constants/routes/hotelPageParams"
 import { env } from "@/env/server"
-import { serverClient } from "@/lib/trpc/server"
+import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
 
 import AccordionSection from "@/components/Blocks/Accordion"
 import HotelReservationSidePeek from "@/components/HotelReservation/SidePeek"
@@ -16,65 +18,96 @@ import MapCard from "./Map/MapCard"
 import MapWithCardWrapper from "./Map/MapWithCard"
 import MobileMapToggle from "./Map/MobileMapToggle"
 import StaticMap from "./Map/StaticMap"
+import WellnessAndExerciseSidePeek from "./SidePeeks/WellnessAndExercise"
 import AmenitiesList from "./AmenitiesList"
 import Facilities from "./Facilities"
 import IntroSection from "./IntroSection"
 import PreviewImages from "./PreviewImages"
 import { Rooms } from "./Rooms"
-import { AboutTheHotelSidePeek, WellnessAndExerciseSidePeek } from "./SidePeeks"
+import { AboutTheHotelSidePeek } from "./SidePeeks"
 import TabNavigation from "./TabNavigation"
 
 import styles from "./hotelPage.module.css"
 
+import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
+import { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
+import { Facility } from "@/types/hotel"
 
-export default async function HotelPage() {
-  const intl = await getIntl()
-  const lang = getLang()
+export default async function HotelPage({ hotelId }: HotelPageProps) {
   const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
   const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
-  const hotelData = await serverClient().hotel.get()
-  if (!hotelData) {
-    return null
+  const lang = getLang()
+  const [intl, hotelPageData, hotelData] = await Promise.all([
+    getIntl(),
+    getHotelPage(),
+    getHotelData({ hotelId, language: lang }),
+  ])
+
+  if (!hotelData?.data || !hotelPageData) {
+    return notFound()
   }
 
+  const { faq, content } = hotelPageData
   const {
-    hotelId,
-    hotelName,
-    hotelDescriptions,
-    hotelLocation,
-    hotelAddress,
-    hotelRatings,
-    hotelDetailedFacilities,
-    hotelImages,
-    roomCategories,
-    activitiesCard,
+    name,
+    address,
     pointsOfInterest,
-    facilities,
-    faq,
-    alerts,
+    gallery,
+    specialAlerts,
+    healthAndWellness,
+    restaurantImages,
+    conferencesAndMeetings,
+    hotelContent,
+    detailedFacilities,
     healthFacilities,
-    contact,
-    socials,
-    ecoLabels,
-  } = hotelData
+    contactInformation,
+    socialMedia,
+    hotelFacts,
+    location,
+    ratings,
+  } = hotelData.data.attributes
+  const roomCategories =
+    hotelData.included?.filter((item) => item.type === "roomcategories") || []
+  const images = gallery?.smallerImages
+  const description = hotelContent.texts.descriptions.short
+  const activitiesCard = content?.[0]?.upcoming_activities_card || null
+
+  const facilities: Facility[] = [
+    {
+      ...restaurantImages,
+      id: FacilityCardTypeEnum.restaurant,
+      headingText: restaurantImages?.headingText ?? "",
+      heroImages: restaurantImages?.heroImages ?? [],
+    },
+    {
+      ...conferencesAndMeetings,
+      id: FacilityCardTypeEnum.conference,
+      headingText: conferencesAndMeetings?.headingText ?? "",
+      heroImages: conferencesAndMeetings?.heroImages ?? [],
+    },
+    {
+      ...healthAndWellness,
+      id: FacilityCardTypeEnum.wellness,
+      headingText: healthAndWellness?.headingText ?? "",
+      heroImages: healthAndWellness?.heroImages ?? [],
+    },
+  ]
 
   const topThreePois = pointsOfInterest.slice(0, 3)
 
   const coordinates = {
-    lat: hotelLocation.latitude,
-    lng: hotelLocation.longitude,
+    lat: location.latitude,
+    lng: location.longitude,
   }
 
   return (
     <div className={styles.pageContainer}>
       <div className={styles.hotelImages}>
-        {hotelImages?.length && (
-          <PreviewImages images={hotelImages} hotelName={hotelName} />
-        )}
+        {images?.length && <PreviewImages images={images} hotelName={name} />}
       </div>
       <TabNavigation
-        restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}
+        restaurantTitle={getRestaurantHeading(detailedFacilities)}
         hasActivities={!!activitiesCard}
         hasFAQ={!!faq.accordions.length}
       />
@@ -82,18 +115,18 @@ export default async function HotelPage() {
         <div id={HotelHashValues.overview} className={styles.overview}>
           <div className={styles.introContainer}>
             <IntroSection
-              hotelName={hotelName}
-              hotelDescription={hotelDescriptions.descriptions.short}
-              location={hotelLocation}
-              address={hotelAddress}
-              tripAdvisor={hotelRatings?.tripAdvisor}
+              hotelName={name}
+              hotelDescription={description}
+              location={location}
+              address={address}
+              tripAdvisor={ratings?.tripAdvisor}
             />
 
-            <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
+            <AmenitiesList detailedFacilities={detailedFacilities} />
           </div>
-          {alerts.length ? (
+          {specialAlerts.length ? (
             <div className={styles.alertsContainer}>
-              {alerts.map((alert) => (
+              {specialAlerts.map((alert) => (
                 <Alert
                   key={alert.id}
                   type={alert.type}
@@ -114,14 +147,14 @@ export default async function HotelPage() {
         <>
           <aside className={styles.mapContainer}>
             <MapWithCardWrapper>
-              <StaticMap coordinates={coordinates} hotelName={hotelName} />
-              <MapCard hotelName={hotelName} pois={topThreePois} />
+              <StaticMap coordinates={coordinates} hotelName={name} />
+              <MapCard hotelName={name} pois={topThreePois} />
             </MapWithCardWrapper>
           </aside>
           <MobileMapToggle />
           <DynamicMap
             apiKey={googleMapsApiKey}
-            hotelName={hotelName}
+            hotelName={name}
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
             mapId={googleMapId}
@@ -138,12 +171,12 @@ export default async function HotelPage() {
           Read more about the amenities here
         </SidePeek>
         <AboutTheHotelSidePeek
-          hotelAddress={hotelAddress}
-          coordinates={hotelLocation}
-          contact={contact}
-          socials={socials}
-          ecoLabels={ecoLabels}
-          descriptions={hotelDescriptions}
+          hotelAddress={address}
+          coordinates={location}
+          contact={contactInformation}
+          socials={socialMedia}
+          ecoLabels={hotelFacts.ecoLabels}
+          descriptions={hotelContent.texts}
         />
         <SidePeek
           contentKey={hotelPageParams.restaurantAndBar[lang]}