diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx index 5167278c8..367d2999f 100644 --- a/components/ContentType/HotelPage/AmenitiesList/index.tsx +++ b/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 (
- {formatMessage({ id: "At the hotel" })} + {intl.formatMessage({ id: "At the hotel" })}
{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" })}
diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx index a7a408210..4c98c4d4c 100644 --- a/components/ContentType/HotelPage/IntroSection/index.tsx +++ b/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({
- {formatMessage({ id: "Welcome to" })}: + {intl.formatMessage({ id: "Welcome to" })}: {hotelName}
@@ -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" })}
diff --git a/components/ContentType/HotelPage/SidePeeks.tsx b/components/ContentType/HotelPage/SidePeeks.tsx index c352399aa..272ea4287 100644 --- a/components/ContentType/HotelPage/SidePeeks.tsx +++ b/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() { {/* TODO: Render amenities as per the design. */} Read more about the amenities here Some additional information about the hotel