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

constants/routes/hotelPageParams.js

@@ -45,13 +45,40 @@ export const meetingsAndConferences = {
 
 export const restaurantAndBar = {
   en: "restaurant-and-bar",
-  sv: "restaurant-och-bar",
+  sv: "restaurang-och-bar",
   no: "restaurant-og-bar",
   da: "restaurant-og-bar",
   fi: "ravintola-ja-baari",
   de: "Restaurant-und-Bar",
 }
 
+export const restaurant = {
+  en: "restaurant",
+  sv: "restaurant",
+  no: "restaurant",
+  da: "restaurant",
+  fi: "ravintola",
+  de: "Restaurant",
+}
+
+export const bar = {
+  en: "bar",
+  sv: "bar",
+  no: "bar",
+  da: "bar",
+  fi: "baari",
+  de: "Bar",
+}
+
+export const breakfastRestaurant = {
+  en: "breakfast-restaurant",
+  sv: "frukostrestaurang",
+  no: "frokostrestaurant",
+  da: "morgenmadsrestaurant",
+  fi: "aamiaisravintola",
+  de: "Frühstücksrestaurant",
+}
+
 const params = {
   about,
   amenities,
@@ -59,6 +86,9 @@ const params = {
   activities,
   meetingsAndConferences,
   restaurantAndBar,
+  bar,
+  restaurant,
+  breakfastRestaurant,
 }
 
 export default params

types/components/hotelPage/tabNavigation.ts

@@ -1,9 +1,12 @@
-export enum HotelHashValues {
+export enum HotelHashValues { // Should these be translated?
   overview = "#overview",
   rooms = "#rooms-section",
-  restaurant = "#restaurant-and-bar",
   meetings = "#meetings-and-conferences",
   wellness = "#wellness-and-exercise",
   activities = "#activities",
   faq = "#faq",
 }
+
+export type TabNavigationProps = {
+  restaurantRefData: { href: any; title: string }
+}

utils/facilityCards.ts

@@ -1,5 +1,8 @@
 import {
+  bar,
+  breakfastRestaurant,
   meetingsAndConferences,
+  restaurant,
   restaurantAndBar,
   wellnessAndExercise,
 } from "@/constants/routes/hotelPageParams"
@@ -13,6 +16,7 @@ import {
   FacilityEnum,
 } from "@/types/components/hotelPage/facilities"
 import type { ImageVaultAsset } from "@/types/components/imageVault"
+import type { HotelData } from "@/types/hotel"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 import type { Facility } from "@/server/routers/hotels/output"
 
@@ -53,7 +57,10 @@ export function setActivityCard(activitiesCard: ActivityCard): FacilityCards {
   ]
 }
 
-export async function setFacilityCards(facilities: Array<Facility>) {
+export async function setFacilityCards(
+  facilities: Array<Facility>,
+  amenities: HotelData["data"]["attributes"]["detailedFacilities"]
+) {
   const lang = getLang()
   const intl = await getIntl()
 
@@ -112,13 +119,14 @@ export async function setFacilityCards(facilities: Array<Facility>) {
         break
 
       case FacilityEnum.restaurant:
+        const { href, title } = getRestaurantDynamicTitles(amenities)
         card.theme = "primaryDark"
-        card.id = "restaurant-and-bar"
+        card.id = href[lang]
         card.heading = intl.formatMessage({
           id: "Enjoy relaxed restaurant experiences",
         })
         card.secondaryButton = {
-          href: `?s=${restaurantAndBar[lang]}`,
+          href: `?s=${href[lang]}`,
           title: intl.formatMessage({ id: "Read more & book a table" }),
           isExternal: false,
         }
@@ -130,10 +138,28 @@ export async function setFacilityCards(facilities: Array<Facility>) {
   return cards
 }
 
-/* lista över potentiella 
-  Restaurant & Bar
-  Restaurants & bars
-  Restaurant
-  Bar
-  Breakfast restaurant (fallback om det inte finns restaurang eller bar)
-*/
+export function getRestaurantDynamicTitles(
+  amenities: HotelData["data"]["attributes"]["detailedFacilities"]
+) {
+  const hasBar = amenities.some(
+    (facility) => facility.id == 1606 || facility.id == 1014 // bar & rooftop bar id
+  )
+  const hasRestaurant = amenities.some((facility) => facility.id == 1383) // restaurant id
+
+  let href, title: string
+  if (hasBar && hasRestaurant) {
+    href = restaurantAndBar
+    title = "Restaurant & Bar"
+  } else if (hasBar) {
+    href = bar
+    title = "Bar"
+  } else if (hasRestaurant) {
+    href = restaurant
+    title = "Restaurant"
+  } else {
+    href = breakfastRestaurant
+    title = "Breakfast restaurant"
+  }
+
+  return { href, title }
+}