chore(SW-302): add dynamic restaurant title

components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -6,21 +6,40 @@ import useHash from "@/hooks/useHash"
 
 import styles from "./tabNavigation.module.css"
 
-import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
+import {
+  HotelHashValues,
+  type TabNavigationProps,
+} from "@/types/components/hotelPage/tabNavigation"
 
-export default function TabNavigation() {
+export default function TabNavigation({
+  restaurantRefData,
+}: TabNavigationProps) {
   const hash = useHash()
   const intl = useIntl()
 
-  const hotelTabLinks: { href: HotelHashValues; text: string }[] = [
-    // TODO these titles will need to reflect the facility card titles, which will vary between hotels
-    { href: HotelHashValues.overview, text: "Overview" },
-    { href: HotelHashValues.rooms, text: "Rooms" },
-    { href: HotelHashValues.restaurant, text: "Restaurant & Bar" },
-    { href: HotelHashValues.meetings, text: "Meetings & Conferences" },
-    { href: HotelHashValues.wellness, text: "Wellness & Exercise" },
-    { href: HotelHashValues.activities, text: "Activities" },
-    { href: HotelHashValues.faq, text: "FAQ" },
+  const hotelTabLinks: { href: HotelHashValues | string; text: string }[] = [
+    {
+      href: HotelHashValues.overview,
+      text: intl.formatMessage({ id: "Overview" }),
+    },
+    { href: HotelHashValues.rooms, text: intl.formatMessage({ id: "Rooms" }) },
+    {
+      href: "#" + restaurantRefData.href.en,
+      text: intl.formatMessage({ id: restaurantRefData.title }),
+    },
+    {
+      href: HotelHashValues.meetings,
+      text: intl.formatMessage({ id: "Meetings & Conferences" }),
+    },
+    {
+      href: HotelHashValues.wellness,
+      text: intl.formatMessage({ id: "Wellness & Exercise" }),
+    },
+    {
+      href: HotelHashValues.activities,
+      text: intl.formatMessage({ id: "Activities" }),
+    },
+    { href: HotelHashValues.faq, text: intl.formatMessage({ id: "FAQ" }) },
   ]
 
   return (

components/ContentType/HotelPage/index.tsx

@@ -7,7 +7,12 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { setActivityCard, setFacilityCards } from "@/utils/facilityCards"
+import {
+  getRestaurantDynamicTitles,
+  setActivityCard,
+  setFacilityCards,
+} from "@/utils/facilityCards"
+
 import DynamicMap from "./Map/DynamicMap"
 import MapCard from "./Map/MapCard"
 import MobileMapToggle from "./Map/MobileMapToggle"
@@ -47,7 +52,10 @@ export default async function HotelPage() {
     facilityCards,
   } = hotelData
 
-  const facilities = await setFacilityCards(facilityCards)
+  const facilities = await setFacilityCards(
+    facilityCards,
+    hotelDetailedFacilities
+  )
   activitiesCard && facilities.push(setActivityCard(activitiesCard))
   const topThreePois = pointsOfInterest.slice(0, 3)
 
@@ -61,7 +69,9 @@ export default async function HotelPage() {
       <div className={styles.hotelImages}>
         <PreviewImages images={hotelImages} hotelName={hotelName} />
       </div>
-      <TabNavigation />
+      <TabNavigation
+        restaurantRefData={getRestaurantDynamicTitles(hotelDetailedFacilities)}
+      />
       <main className={styles.mainSection}>
         <div className={styles.introContainer}>
           <IntroSection