chore: remove destructuring of intl.formatMessage

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -6,18 +6,18 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./amenitiesList.module.css"
 
 import { HotelData } from "@/types/hotel"
-import { getLang } from "@/i18n/serverContext"
 
 export default async function AmenitiesList({
   detailedFacilities,
 }: {
   detailedFacilities: HotelData["data"]["attributes"]["detailedFacilities"]
 }) {
-  const { formatMessage } = await getIntl()
+  const intl = await getIntl()
   const sortedAmenities = detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
@@ -25,7 +25,7 @@ export default async function AmenitiesList({
   return (
     <section className={styles.amenitiesContainer}>
       <Subtitle type="two" color="black">
-        {formatMessage({ id: "At the hotel" })}
+        {intl.formatMessage({ id: "At the hotel" })}
       </Subtitle>
       <div className={styles.amenityItemList}>
         {sortedAmenities.map((facility) => {
@@ -44,7 +44,7 @@ export default async function AmenitiesList({
         color="burgundy"
         variant="icon"
       >
-        {formatMessage({ id: "Show all amenities" })}
+        {intl.formatMessage({ id: "Show all amenities" })}
         <ChevronRightIcon />
       </Link>
     </section>

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -9,6 +9,7 @@ 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"
@@ -21,16 +22,15 @@ export default async function IntroSection({
   tripAdvisor,
 }: IntroSectionProps) {
   const intl = await getIntl()
-  const { formatMessage } = intl
   const { streetAddress, city } = address
   const { distanceToCentre } = location
-  const formattedDistanceText = formatMessage(
+  const formattedDistanceText = intl.formatMessage(
     { id: "Distance to city centre" },
     { number: distanceToCentre }
   )
   const lang = getLang()
   const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`
-  const formattedTripAdvisorText = formatMessage(
+  const formattedTripAdvisorText = intl.formatMessage(
     { id: "Tripadvisor reviews" },
     { rating: tripAdvisor.rating, count: tripAdvisor.numberOfReviews }
   )
@@ -40,7 +40,7 @@ export default async function IntroSection({
       <div className={styles.mainContent}>
         <div className={styles.titleContainer}>
           <BiroScript tilted="medium" color="red">
-            {formatMessage({ id: "Welcome to" })}:
+            {intl.formatMessage({ id: "Welcome to" })}:
           </BiroScript>
           <Title level="h2">{hotelName}</Title>
         </div>
@@ -66,7 +66,7 @@ export default async function IntroSection({
           variant="icon"
           href={`?s=${about[lang]}`}
         >
-          {formatMessage({ id: "Read more about the hotel" })}
+          {intl.formatMessage({ id: "Read more about the hotel" })}
           <ArrowRight color="peach80" />
         </Link>
       </div>

components/ContentType/HotelPage/SidePeeks.tsx

@@ -21,8 +21,9 @@ function SidePeekContainer() {
       return sidePeekParam || null
     })
 
-  const { formatMessage } = useIntl()
   const lang = useLang()
+  const intl = useIntl()
+
   useEffect(() => {
     const sidePeekParam = searchParams.get("s") as SidePeekContentKey | null
     if (sidePeekParam !== activeSidePeek) {
@@ -45,14 +46,14 @@ function SidePeekContainer() {
     <SidePeek handleClose={handleClose} activeSidePeek={activeSidePeek}>
       <SidePeekItem
         contentKey={amenities[lang]}
-        title={formatMessage({ id: "Amenities" })}
+        title={intl.formatMessage({ id: "Amenities" })}
       >
         {/* TODO: Render amenities as per the design. */}
         Read more about the amenities here
       </SidePeekItem>
       <SidePeekItem
         contentKey={about[lang]}
-        title={formatMessage({ id: "Read more about the hotel" })}
+        title={intl.formatMessage({ id: "Read more about the hotel" })}
       >
         Some additional information about the hotel
       </SidePeekItem>