fix: enable localization of sidepeek params

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -1,3 +1,6 @@
+import { Lang } from "@/constants/languages"
+import { amenities } from "@/constants/routes/hotelPageParams"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
@@ -12,11 +15,14 @@ import { HotelData } from "@/types/hotel"
 
 export default async function AmenitiesList({
   detailedFacilities,
+  // TODO: remove prop drilling once getLang() is merged
+  lang,
 }: {
   detailedFacilities: HotelData["data"]["attributes"]["detailedFacilities"]
+  lang: Lang
 }) {
   const { formatMessage } = await getIntl()
-  const sidePeekLink = generateSidePeekLink("amenities")
+  const sidePeekLink = generateSidePeekLink(amenities[lang])
   const sortedAmenities = detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)

components/ContentType/HotelPage/HotelPage.tsx

@@ -1,3 +1,4 @@
+import { about, amenities } from "@/constants/routes/hotelPageParams"
 import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
@@ -34,6 +35,8 @@ export default async function HotelPage() {
       <main className={styles.mainSection}>
         <div className={styles.introContainer}>
           <IntroSection
+            // TODO: remove prop drilling once getLang() is merged
+            lang={lang}
             hotelName={attributes.name}
             hotelDescription={attributes.hotelContent.texts.descriptions.short}
             location={attributes.location}
@@ -55,7 +58,10 @@ export default async function HotelPage() {
               Some additional information about the hotel
             </SidePeekContent>
           </SidePeekContainer>
-          <AmenitiesList detailedFacilities={attributes.detailedFacilities} />
+          <AmenitiesList
+            detailedFacilities={attributes.detailedFacilities}
+            lang={lang}
+          />
         </div>
         <Rooms rooms={roomCategories} />
       </main>

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,3 +1,5 @@
+import { about } from "@/constants/routes/hotelPageParams"
+
 import ArrowRight from "@/components/Icons/ArrowRight"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Link from "@/components/TempDesignSystem/Link"
@@ -18,6 +20,8 @@ export default async function IntroSection({
   location,
   address,
   tripAdvisor,
+  // TODO: remove prop drilling once getLang() is merged
+  lang,
 }: IntroSectionProps) {
   const intl = await getIntl()
   const { formatMessage } = intl
@@ -32,7 +36,7 @@ export default async function IntroSection({
     { id: "Tripadvisor reviews" },
     { rating: tripAdvisor.rating, count: tripAdvisor.numberOfReviews }
   )
-  const aboutTheHotelLink = generateSidePeekLink("about")
+  const aboutTheHotelLink = generateSidePeekLink(about[lang])
 
   return (
     <section className={styles.introSection}>

components/ContentType/HotelPage/IntroSection/types.ts

@@ -1,3 +1,5 @@
+import { Lang } from "@/constants/languages"
+
 import {
   HotelAddress,
   HotelData,
@@ -11,4 +13,6 @@ export type IntroSectionProps = {
   location: HotelLocation
   address: HotelAddress
   tripAdvisor: HotelTripAdvisor
+  // TODO: remove prop drilling once getLang() is merged
+  lang: Lang
 }

components/TempDesignSystem/SidePeek/Container/index.tsx

@@ -15,15 +15,13 @@ export default function SidePeekContainer({
   const [activeSidePeek, setActiveSidePeek] =
     useState<SidePeekContentKey | null>(() => {
       const sidePeekParam = searchParams.get(
-        "sidepeek"
+        "open"
       ) as SidePeekContentKey | null
       return sidePeekParam || null
     })
 
   useEffect(() => {
-    const sidePeekParam = searchParams.get(
-      "sidepeek"
-    ) as SidePeekContentKey | null
+    const sidePeekParam = searchParams.get("open") as SidePeekContentKey | null
     if (sidePeekParam !== activeSidePeek) {
       setActiveSidePeek(sidePeekParam)
     }
@@ -34,7 +32,7 @@ export default function SidePeekContainer({
       setActiveSidePeek(null)
 
       const nextSearchParams = new URLSearchParams(searchParams.toString())
-      nextSearchParams.delete("sidepeek")
+      nextSearchParams.delete("open")
 
       router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
     }

components/TempDesignSystem/SidePeek/data.ts

@@ -1,5 +1,6 @@
 import { SidePeekContentKey } from "./types"
 
 export const generateSidePeekLink = (key: SidePeekContentKey) => {
-  return `?sidepeek=${key}`
+  // what should the parameter be named to make sense in all use cases/languages? single caracter? like`s=`?
+  return `?open=${key}`
 }

constants/routes/hotelPageParams.js

@@ -0,0 +1,21 @@
+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",
+}
+
+const params = { about, amenities }
+
+export default params