fix(SW-239): make contents in sidepeek component render serverside for seo

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -1,8 +1,6 @@
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
-import SidePeekContainer from "@/components/TempDesignSystem/SidePeek/Container"
-import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
 import { generateSidePeekLink } from "@/components/TempDesignSystem/SidePeek/data"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -22,6 +20,7 @@ export default async function AmenitiesList({
   const sortedAmenities = detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
+
   return (
     <section className={styles.amenitiesContainer}>
       <Subtitle type="two" color="black">
@@ -42,14 +41,6 @@ export default async function AmenitiesList({
         {formatMessage({ id: "Show all amenities" })}
         <ChevronRightIcon />
       </Link>
-      <SidePeekContainer>
-        <SidePeekContent
-          contentKey={"amenities"}
-          title={formatMessage({ id: "Amenities" })}
-        >
-          {/* TODO: Render amenities as per the design. */}
-        </SidePeekContent>
-      </SidePeekContainer>
     </section>
   )
 }

components/ContentType/HotelPage/HotelPage.tsx

@@ -1,6 +1,9 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
+import SidePeekContainer from "@/components/TempDesignSystem/SidePeek/Container"
+import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
+import { getIntl } from "@/i18n"
 
 import AmenitiesList from "./AmenitiesList"
 import IntroSection from "./IntroSection"
@@ -23,6 +26,8 @@ export default async function HotelPage() {
     include: ["RoomCategories"],
   })
 
+  const { formatMessage } = await getIntl()
+
   return (
     <div className={styles.pageContainer}>
       <TabNavigation />
@@ -35,6 +40,21 @@ export default async function HotelPage() {
             address={attributes.address}
             tripAdvisor={attributes.ratings.tripAdvisor}
           />
+          <SidePeekContainer>
+            <SidePeekContent
+              contentKey={"amenities"}
+              title={formatMessage({ id: "Amenities" })}
+            >
+              {/* TODO: Render amenities as per the design. */}
+              Read more about the amenities here
+            </SidePeekContent>
+            <SidePeekContent
+              contentKey={"about"}
+              title={formatMessage({ id: "About the hotel" })}
+            >
+              Some additional information about the hotel
+            </SidePeekContent>
+          </SidePeekContainer>
           <AmenitiesList detailedFacilities={attributes.detailedFacilities} />
         </div>
         <Rooms rooms={roomCategories} />

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,6 +1,7 @@
 import ArrowRight from "@/components/Icons/ArrowRight"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Link from "@/components/TempDesignSystem/Link"
+import { generateSidePeekLink } from "@/components/TempDesignSystem/SidePeek/data"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
@@ -31,6 +32,7 @@ export default async function IntroSection({
     { id: "Tripadvisor reviews" },
     { rating: tripAdvisor.rating, count: tripAdvisor.numberOfReviews }
   )
+  const aboutTheHotelLink = generateSidePeekLink("about")
 
   return (
     <section className={styles.introSection}>
@@ -58,13 +60,11 @@ export default async function IntroSection({
         <Preamble>{hotelDescription}</Preamble>
         <Link
           className={styles.introLink}
-          target="_blank"
           color="peach80"
           textDecoration="underline"
           variant="icon"
-          href="#"
+          href={aboutTheHotelLink}
         >
-          {/*TODO: Ask content team where this should link to. */}
           {formatMessage({ id: "Read more about the hotel" })}
           <ArrowRight color="peach80" />
         </Link>