Merged in fix/hotel-pages-fix (pull request #1346)

fix: HotelPage restaurant navigation + translation

* fix: hotelPage restaurant navigation + translation


Approved-by: Erik Tiekstra

components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx

@@ -4,9 +4,10 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
+import { translateWellnessType } from "../../../utils"
+
 import styles from "./facility.module.css"
 
-import { HealthFacilitiesEnum } from "@/types/components/hotelPage/facilities"
 import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"
 
 export default async function Facility({ data }: FacilityProps) {
@@ -15,26 +16,6 @@ export default async function Facility({ data }: FacilityProps) {
   const ordinaryOpeningTimes = data.openingDetails.openingHours.ordinary
   const weekendOpeningTimes = data.openingDetails.openingHours.weekends
 
-  function translateWellnessType(type: string) {
-    switch (type) {
-      case HealthFacilitiesEnum.Gym:
-        return intl.formatMessage({ id: "Gym" })
-      case HealthFacilitiesEnum.IndoorPool:
-        return intl.formatMessage({ id: "Indoor pool" })
-      case HealthFacilitiesEnum.Jacuzzi:
-        return intl.formatMessage({ id: "Jacuzzi" })
-      case HealthFacilitiesEnum.OutdoorPool:
-        return intl.formatMessage({ id: "Outdoor pool" })
-      case HealthFacilitiesEnum.Relax:
-        return intl.formatMessage({ id: "Relax" })
-      case HealthFacilitiesEnum.Sauna:
-        return intl.formatMessage({ id: "Sauna" })
-      default:
-        console.warn(`Unsupported group given: ${type}`)
-        return intl.formatMessage({ id: "Wellness" })
-    }
-  }
-
   return (
     <div className={styles.content}>
       {image?.imageSizes.medium && (
@@ -48,7 +29,7 @@ export default async function Facility({ data }: FacilityProps) {
       )}
       <div className={styles.information}>
         <Subtitle color="burgundy" asChild type="one">
-          <Title level="h3">{translateWellnessType(data.type)}</Title>
+          <Title level="h3">{translateWellnessType(data.type, intl)}</Title>
         </Subtitle>
         <div>
           <Subtitle type="two" color="uiTextHighContrast">

components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -20,7 +20,6 @@ import {
 } from "@/types/components/hotelPage/tabNavigation"
 
 export default function TabNavigation({
-  restaurantTitle,
   hasActivities,
   hasFAQ,
   tabValues,
@@ -48,7 +47,7 @@ export default function TabNavigation({
       hash: HotelHashValues.restaurant,
       text:
         tabValues?.restaurant_bar ||
-        intl.formatMessage({ id: restaurantTitle }, { count: 1 }),
+        intl.formatMessage({ id: "Restaurant & Bar" }),
     },
     {
       hash: HotelHashValues.meetings,

components/ContentType/HotelPage/index.tsx

@@ -11,7 +11,6 @@ import Alert from "@/components/TempDesignSystem/Alert"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getLang } from "@/i18n/serverContext"
-import { getRestaurantHeading } from "@/utils/facilityCards"
 import { generateHotelSchema } from "@/utils/jsonSchemas"
 
 import DynamicMap from "./Map/DynamicMap"
@@ -150,7 +149,6 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
         ) : null}
       </header>
       <TabNavigation
-        restaurantTitle={getRestaurantHeading(detailedFacilities)}
         hasActivities={activitiesCards.length > 0}
         hasFAQ={!!faq?.accordions.length}
         tabValues={tabValues}

components/ContentType/HotelPage/utils.ts

@@ -1,3 +1,6 @@
+import type { IntlShape } from "react-intl"
+
+import { HealthFacilitiesEnum } from "@/types/components/hotelPage/facilities"
 import {
   TrackingChannelEnum,
   type TrackingSDKHotelInfo,
@@ -42,3 +45,23 @@ export function getTrackingHotelData(hotelData: HotelData["hotel"]) {
 
   return tracking
 }
+
+export function translateWellnessType(type: string, intl: IntlShape) {
+  switch (type) {
+    case HealthFacilitiesEnum.Gym:
+      return intl.formatMessage({ id: "Gym" })
+    case HealthFacilitiesEnum.IndoorPool:
+      return intl.formatMessage({ id: "Indoor pool" })
+    case HealthFacilitiesEnum.Jacuzzi:
+      return intl.formatMessage({ id: "Jacuzzi" })
+    case HealthFacilitiesEnum.OutdoorPool:
+      return intl.formatMessage({ id: "Outdoor pool" })
+    case HealthFacilitiesEnum.Relax:
+      return intl.formatMessage({ id: "Relax" })
+    case HealthFacilitiesEnum.Sauna:
+      return intl.formatMessage({ id: "Sauna" })
+    default:
+      console.warn(`Unsupported group given: ${type}`)
+      return intl.formatMessage({ id: "Wellness" })
+  }
+}

components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx

@@ -4,6 +4,8 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
+import { translateWellnessType } from "../../HotelPage/utils"
+
 import styles from "./sidebar.module.css"
 
 import type { Hotel } from "@/types/hotel"
@@ -23,7 +25,7 @@ export default async function WellnessSidebar({ hotel }: WellnessSidebarProps) {
       {hotel.healthFacilities.map((facility) => (
         <div key={facility.type}>
           <Subtitle type="two" color="uiTextHighContrast" asChild>
-            <h4>{intl.formatMessage({ id: facility.type })}</h4>
+            <h4>{translateWellnessType(facility.type, intl)}</h4>
           </Subtitle>
           <Body color="uiTextHighContrast">
             {facility.openingDetails.openingHours.ordinary.alwaysOpen

types/components/hotelPage/tabNavigation.ts

@@ -20,7 +20,6 @@ type Tabs = {
 }
 
 export type TabNavigationProps = {
-  restaurantTitle: string
   hasActivities: boolean
   hasFAQ: boolean
   tabValues?: Tabs | null

utils/facilityCards.ts

@@ -124,7 +124,7 @@ export function setFacilityCardGrids(
   return cards
 }
 
-export function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
+function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
   const hasBar = amenities.some(
     (facility) =>
       facility.id === FacilityEnum.Bar ||