Merged in fix/remove-translated-slugs (pull request #1390)

Fix(SW-1467): Remove translation of hotel page sidepeek slugs

* fix(SW-1467): remove translation of sidepeek slugs

* fix: update enums


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -1,23 +1,21 @@
-import { amenities } from "@/constants/routes/hotelPageParams"
-
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { ChevronRightSmallIcon } from "@/components/Icons"
 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 type { AmenitiesListProps } from "@/types/components/hotelPage/amenities"
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
 
 export default async function AmenitiesList({
   detailedFacilities,
 }: AmenitiesListProps) {
   const intl = await getIntl()
   const facilities = detailedFacilities.slice(0, 5)
-  const lang = getLang()
+
   return (
     <section className={styles.amenitiesContainer}>
       <Subtitle type="two" color="black">
@@ -43,7 +41,7 @@ export default async function AmenitiesList({
       </div>
       <Link
         scroll={false}
-        href={`#s-${amenities[lang]}`}
+        href={`#s-${SidepeekSlugs.amenities}`}
         color="burgundy"
         variant="icon"
         className={styles.showAllAmenities}

components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx

@@ -1,22 +1,19 @@
-import { activities } from "@/constants/routes/hotelPageParams"
-
 import Card from "@/components/TempDesignSystem/Card"
 import CardImage from "@/components/TempDesignSystem/Card/CardImage"
 import Grids from "@/components/TempDesignSystem/Grids"
-import { getLang } from "@/i18n/serverContext"
 
 import styles from "./cardGrid.module.css"
 
+import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 import type { ActivityCard } from "@/types/trpc/routers/contentstack/hotelPage"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
 export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
-  const lang = getLang()
   const hasImage = activitiesCard.backgroundImage
 
   const updatedCard: CardProps = {
     ...activitiesCard,
-    id: activities[lang],
+    id: HotelHashValues.activities,
     theme: hasImage ? "image" : "primaryDark",
     primaryButton: hasImage
       ? {

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,5 +1,3 @@
-import { about } from "@/constants/routes/hotelPageParams"
-
 import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -7,11 +5,11 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import styles from "./introSection.module.css"
 
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
 import type { IntroSectionProps } from "./types"
 
 export default async function IntroSection({
@@ -28,7 +26,7 @@ export default async function IntroSection({
     { id: "{number} km to city center" },
     { number: getSingleDecimal(distanceToCentre / 1000) }
   )
-  const lang = getLang()
+
   const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`
   const hasTripAdvisorData = !!(
     tripAdvisor?.rating &&
@@ -72,7 +70,7 @@ export default async function IntroSection({
           className={styles.introLink}
           color="burgundy"
           variant="icon"
-          href={`#s-${about[lang]}`}
+          href={`#s-${SidepeekSlugs.about}`}
           scroll={false}
         >
           {intl.formatMessage({ id: "Read more about the hotel" })}

components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx

@@ -1,16 +1,14 @@
-import { about } from "@/constants/routes/hotelPageParams"
-
 import Divider from "@/components/TempDesignSystem/Divider"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import ContactInformation from "./ContactInformation"
 
 import styles from "./aboutTheHotel.module.css"
 
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
 import type { AboutTheHotelSidePeekProps } from "@/types/components/hotelPage/sidepeek/aboutTheHotel"
 
 export default async function AboutTheHotelSidePeek({
@@ -21,12 +19,11 @@ export default async function AboutTheHotelSidePeek({
   ecoLabels,
   descriptions,
 }: AboutTheHotelSidePeekProps) {
-  const lang = getLang()
   const intl = await getIntl()
 
   return (
     <SidePeek
-      contentKey={about[lang]}
+      contentKey={SidepeekSlugs.about}
       title={intl.formatMessage({ id: "About the hotel" })}
     >
       <section className={styles.wrapper}>

components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx

@@ -1,9 +1,6 @@
-import { amenities } from "@/constants/routes/hotelPageParams"
-
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import {
   AccessibilityAmenity,
@@ -13,6 +10,7 @@ import {
 } from "./AccordionAmenities"
 import FilteredAmenities from "./FilteredAmenities"
 
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
 import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities"
 import { FacilityEnum } from "@/types/enums/facilities"
 
@@ -23,7 +21,6 @@ export default async function AmenitiesSidePeek({
   accessibility,
   restaurants,
 }: AmenitiesSidePeekProps) {
-  const lang = getLang()
   const intl = await getIntl()
 
   const amenitiesToRemove = [
@@ -54,7 +51,7 @@ export default async function AmenitiesSidePeek({
 
   return (
     <SidePeek
-      contentKey={amenities[lang]}
+      contentKey={SidepeekSlugs.amenities}
       title={intl.formatMessage({ id: "Amenities" })}
     >
       <Accordion>

components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx

@@ -1,5 +1,3 @@
-import { meetingsAndConferences } from "@/constants/routes/hotelPageParams"
-
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
@@ -8,12 +6,12 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import { getConferenceRoomTexts } from "./util"
 
 import styles from "./meetingsAndConferences.module.css"
 
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
 import type { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences"
 
 export default async function MeetingsAndConferencesSidePeek({
@@ -22,7 +20,6 @@ export default async function MeetingsAndConferencesSidePeek({
   meetingRooms,
   meetingPageUrl,
 }: MeetingsAndConferencesSidePeekProps) {
-  const lang = getLang()
   const intl = await getIntl()
   const { seatingText, roomText } = await getConferenceRoomTexts(meetingRooms)
 
@@ -38,7 +35,7 @@ export default async function MeetingsAndConferencesSidePeek({
 
   return (
     <SidePeek
-      contentKey={meetingsAndConferences[lang]}
+      contentKey={SidepeekSlugs.meetings}
       title={intl.formatMessage({ id: "Meetings & Conferences" })}
     >
       <div className={styles.wrapper}>

components/ContentType/HotelPage/SidePeeks/RestaurantBar/index.tsx

@@ -1,24 +1,21 @@
-import { restaurantAndBar } from "@/constants/routes/hotelPageParams"
-
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import RestaurantBarItem from "./RestaurantBarItem"
 
 import styles from "./restaurantBar.module.css"
 
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
 import type { RestaurantBarSidePeekProps } from "@/types/components/hotelPage/sidepeek/restaurantBar"
 
 export default async function RestaurantBarSidePeek({
   restaurants,
 }: RestaurantBarSidePeekProps) {
   const intl = await getIntl()
-  const lang = getLang()
 
   return (
     <SidePeek
-      contentKey={restaurantAndBar[lang]}
+      contentKey={SidepeekSlugs.restaurant}
       title={intl.formatMessage({ id: "Restaurant & Bar" })}
     >
       <div className={styles.content}>

components/ContentType/HotelPage/SidePeeks/Room/index.tsx

@@ -25,6 +25,7 @@ export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
   const ctaUrl = ""
 
   const galleryImages = mapApiImagesToGalleryImages(images)
+
   return (
     <SidePeek contentKey={getRoomNameAsParam(room.name)} title={room.name}>
       <div className={styles.content}>

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

@@ -1,15 +1,13 @@
-import { wellnessAndExercise } from "@/constants/routes/hotelPageParams"
-
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import Facility from "./Facility"
 
 import styles from "./wellnessAndExercise.module.css"
 
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
 import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise"
 
 export default async function WellnessAndExerciseSidePeek({
@@ -18,11 +16,10 @@ export default async function WellnessAndExerciseSidePeek({
   spaPage,
 }: WellnessAndExerciseSidePeekProps) {
   const intl = await getIntl()
-  const lang = getLang()
 
   return (
     <SidePeek
-      contentKey={wellnessAndExercise[lang]}
+      contentKey={SidepeekSlugs.wellness}
       title={intl.formatMessage({ id: "Wellness & Exercise" })}
     >
       <div className={styles.wrapper}>

components/ContentType/HotelPage/utils.ts

@@ -11,7 +11,12 @@ import type { HotelPage } from "@/types/trpc/routers/contentstack/hotelPage"
 import type { Lang } from "@/constants/languages"
 
 export function getRoomNameAsParam(roomName: string) {
-  return roomName.replace(/[()]/g, "").replaceAll(" ", "-").toLowerCase()
+  return roomName
+    .replace(/\s?\(.*\)$/, "")
+    .trim()
+    .replace(/[()]/g, "")
+    .replaceAll(" ", "-")
+    .toLowerCase()
 }
 
 export function getTrackingPageData(

constants/routes/hotelPageParams.js

@@ -1,94 +0,0 @@
-export const about = {
-  en: "about",
-  sv: "om-hotellet",
-  no: "om-hotellet",
-  fi: "hotellista",
-  da: "om-hotellet",
-  de: "uber-das-hotel",
-}
-
-export const amenities = {
-  en: "amenities",
-  sv: "bekvamligheter",
-  no: "fasiliteter",
-  da: "faciliteter",
-  fi: "palvelut",
-  de: "annehmlichkeiten",
-}
-
-export const wellnessAndExercise = {
-  en: "wellness-and-exercise",
-  sv: "halsa-och-träning",
-  no: "velvære-og-trening",
-  da: "wellness-og-motion",
-  fi: "hyvinvointia-ja-liikuntaa",
-  de: "Wellness-und-Bewegung",
-}
-
-export const activities = {
-  en: "activities",
-  sv: "aktiviteter",
-  no: "aktiviteter",
-  da: "aktiviteter",
-  fi: "toimintaa",
-  de: "Aktivitäten",
-}
-
-export const meetingsAndConferences = {
-  en: "meetings-and-conferences",
-  sv: "moten-och-konferenser",
-  no: "møter-og-konferansers",
-  da: "møder-og-konferencer",
-  fi: "kokoukset-ja-konferenssit",
-  de: "Tagungen-und-Konferenzen",
-}
-
-export const restaurantAndBar = {
-  en: "restaurant-and-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: "restaurang",
-  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,
-  wellnessAndExercise,
-  activities,
-  meetingsAndConferences,
-  restaurantAndBar,
-  /*bar,
-  restaurant,
-  breakfastRestaurant,*/
-}
-
-export default params

types/components/hotelPage/hotelPage.ts

@@ -1,3 +1,12 @@
 export interface HotelPageProps {
   hotelId: string
 }
+
+// Slugs that are not set elsewhere (dynamically or from CS)
+export enum SidepeekSlugs {
+  about = "about",
+  amenities = "amenities",
+  restaurant = "restaurant-and-bar",
+  meetings = "meetings-and-conferences",
+  wellness = "wellness-and-exercise",
+}

utils/facilityCards.ts

@@ -1,11 +1,3 @@
-import {
-  meetingsAndConferences,
-  restaurantAndBar,
-  wellnessAndExercise,
-} from "@/constants/routes/hotelPageParams"
-
-import { getLang } from "@/i18n/serverContext"
-
 import {
   type Facilities,
   type FacilityCard,
@@ -18,6 +10,8 @@ import {
   RestaurantHeadings,
   WellnessHeadings,
 } from "@/types/components/hotelPage/facilities"
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
+import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 import { FacilityEnum } from "@/types/enums/facilities"
 import type {
   Amenities,
@@ -77,8 +71,9 @@ export function isFacilityImage(card: FacilityCardType): card is FacilityImage {
 function setCardProps(
   theme: CardProps["theme"],
   buttonText: (typeof FacilityCardButtonText)[keyof typeof FacilityCardButtonText],
-  href: string,
+  href: HotelHashValues,
   heading: string,
+  slug: SidepeekSlugs,
   scriptedTopTitle?: string
 ): FacilityCard {
   return {
@@ -87,7 +82,7 @@ function setCardProps(
     heading,
     scriptedTopTitle,
     secondaryButton: {
-      href: `#s-${href}`,
+      href: `#s-${slug}`,
       title: buttonText,
       isExternal: false,
       scrollOnClick: false,
@@ -100,8 +95,6 @@ export function setFacilityCardGrids(
   amenities: Amenities,
   healthFacilities: HealthFacilities
 ): Facilities {
-  const lang = getLang()
-
   const cards: Facilities = facilities
     .filter((fac) => !!fac.headingText)
     .map((facility) => {
@@ -133,8 +126,9 @@ export function setFacilityCardGrids(
           card = setCardProps(
             "one",
             FacilityCardButtonText.WELLNESS,
-            wellnessAndExercise[lang],
+            HotelHashValues.wellness,
             facility.headingText,
+            SidepeekSlugs.wellness,
             wellnessTitle
           )
           grid.unshift(card)
@@ -144,8 +138,9 @@ export function setFacilityCardGrids(
           card = setCardProps(
             "primaryDim",
             FacilityCardButtonText.MEETINGS,
-            meetingsAndConferences[lang],
+            HotelHashValues.meetings,
             facility.headingText,
+            SidepeekSlugs.meetings,
             "Events that make an impression"
           )
           grid.push(card)
@@ -156,8 +151,9 @@ export function setFacilityCardGrids(
           card = setCardProps(
             "primaryDark",
             FacilityCardButtonText.RESTAURANT,
-            restaurantAndBar[lang],
+            HotelHashValues.restaurant,
             facility.headingText,
+            SidepeekSlugs.restaurant,
             restaurantTitle
           )
           grid.unshift(card)