refactor: update SidePeek composition

components/ContentType/HotelPage/HotelPage.tsx

@@ -2,8 +2,8 @@ import { about, amenities } from "@/constants/routes/hotelPageParams"
 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 SidePeek from "@/components/TempDesignSystem/SidePeek"
+import SidePeekItem from "@/components/TempDesignSystem/SidePeek/Item"
 import { getIntl } from "@/i18n"
 
 import AmenitiesList from "./AmenitiesList"
@@ -20,10 +20,10 @@ export default async function HotelPage() {
   if (!hotelPageIdentifierData) {
     return null
   }
-
+  const lang = getLang()
   const { attributes, roomCategories } = await serverClient().hotel.getHotel({
     hotelId: hotelPageIdentifierData.hotel_page_id,
-    language: getLang(),
+    language: lang,
     include: ["RoomCategories"],
   })
 
@@ -35,29 +35,27 @@ export default async function HotelPage() {
       <main className={styles.mainSection}>
         <div className={styles.introContainer}>
           <IntroSection
-            // TODO: remove prop drilling once getLang() is merged
-            lang={lang}
             hotelName={attributes.name}
             hotelDescription={attributes.hotelContent.texts.descriptions.short}
             location={attributes.location}
             address={attributes.address}
             tripAdvisor={attributes.ratings.tripAdvisor}
           />
-          <SidePeekContainer>
-            <SidePeekContent
-              contentKey={"amenities"}
+          <SidePeek>
+            <SidePeekItem
+              contentKey={amenities[lang]}
               title={formatMessage({ id: "Amenities" })}
             >
               {/* TODO: Render amenities as per the design. */}
               Read more about the amenities here
-            </SidePeekContent>
-            <SidePeekContent
-              contentKey={"about"}
+            </SidePeekItem>
+            <SidePeekItem
+              contentKey={about[lang]}
               title={formatMessage({ id: "About the hotel" })}
             >
               Some additional information about the hotel
-            </SidePeekContent>
-          </SidePeekContainer>
+            </SidePeekItem>
+          </SidePeek>
           <AmenitiesList
             detailedFacilities={attributes.detailedFacilities}
             lang={lang}

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -9,7 +9,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-
+import { getLang } from "@/i18n/serverContext"
 import { IntroSectionProps } from "./types"
 
 import styles from "./introSection.module.css"
@@ -20,8 +20,6 @@ export default async function IntroSection({
   location,
   address,
   tripAdvisor,
-  // TODO: remove prop drilling once getLang() is merged
-  lang,
 }: IntroSectionProps) {
   const intl = await getIntl()
   const { formatMessage } = intl
@@ -31,6 +29,7 @@ export default async function IntroSection({
     { id: "Distance to city centre" },
     { number: distanceToCentre }
   )
+  const lang = getLang()
   const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`
   const formattedTripAdvisorText = formatMessage(
     { id: "Tripadvisor reviews" },

components/ContentType/HotelPage/IntroSection/types.ts

@@ -1,5 +1,3 @@
-import { Lang } from "@/constants/languages"
-
 import {
   HotelAddress,
   HotelData,
@@ -13,6 +11,4 @@ export type IntroSectionProps = {
   location: HotelLocation
   address: HotelAddress
   tripAdvisor: HotelTripAdvisor
-  // TODO: remove prop drilling once getLang() is merged
-  lang: Lang
 }