From a96497f7c9eac85befe9ac5942de7073fc10bb10 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 12 Nov 2025 07:06:14 +0000
Subject: [PATCH] feat(BOOK-512): Added default heading from CS to destination
 pages

Approved-by: Bianca Widstam
---
 .../DestinationCityPage/CityMap/index.tsx     |  8 +++----
 .../DestinationCityPage/index.tsx             |  6 ++---
 .../CountryMap/index.tsx                      |  9 +++-----
 .../DestinationCountryPage/index.tsx          |  6 ++---
 .../SidebarContentWrapper/index.tsx           | 15 ++++---------
 .../ContentType/DestinationPage/utils.ts      | 22 +------------------
 6 files changed, 17 insertions(+), 49 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
index 7eaf64037..ae31fcadf 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
@@ -15,21 +15,19 @@ import HotelList from "./HotelList"
 
 import styles from "./cityMap.module.css"
 
-import type { CityLocation } from "@scandic-hotels/trpc/types/locations"
-
 import type { MapLocation } from "@/types/components/mapLocation"
 
 interface CityMapProps {
   mapId: string
   apiKey: string
-  city: CityLocation
+  defaultHeading: string
   defaultLocation: MapLocation
 }
 
 export default function CityMap({
   mapId,
   apiKey,
-  city,
+  defaultHeading,
   defaultLocation,
 }: CityMapProps) {
   const intl = useIntl()
@@ -78,7 +76,7 @@ export default function CityMap({
         ) : null}
         <Typography variant="Title/sm">
           <h1 className={styles.title}>
-            {getHeadingText(intl, city.name, "city", activeSeoFilter)}
+            {getHeadingText(defaultHeading, activeSeoFilter)}
           </h1>
         </Typography>
       </div>
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
index 9e6c3f6d4..f4074e7a3 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
@@ -57,6 +57,7 @@ export default async function DestinationCityPage({
   const {
     blocks,
     images,
+    heading,
     preamble,
     experiences,
     has_sidepeek,
@@ -115,7 +116,7 @@ export default async function DestinationCityPage({
             <CityMap
               mapId={env.GOOGLE_DYNAMIC_MAP_ID}
               apiKey={env.GOOGLE_STATIC_MAP_KEY}
-              city={city}
+              defaultHeading={heading}
               defaultLocation={destination_settings.location}
             />
           ) : (
@@ -135,9 +136,8 @@ export default async function DestinationCityPage({
               </main>
               <aside className={styles.sidebar}>
                 <SidebarContentWrapper
+                  defaultHeading={heading}
                   defaultPreamble={preamble}
-                  location={city.name}
-                  pageType="city"
                 >
                   <ExperienceList experiences={experiences} />
                   {has_sidepeek && sidepeek_content ? (
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
index 09a038e82..4cea544f1 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
@@ -1,7 +1,5 @@
 "use client"
 
-import { useIntl } from "react-intl"
-
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
@@ -17,17 +15,16 @@ import type { MapLocation } from "@/types/components/mapLocation"
 interface CountryMapProps {
   mapId: string
   apiKey: string
-  country: string
+  defaultHeading: string
   defaultLocation: MapLocation
 }
 
 export default function CountryMap({
   mapId,
   apiKey,
-  country,
+  defaultHeading,
   defaultLocation,
 }: CountryMapProps) {
-  const intl = useIntl()
   const { activeCities, activeSeoFilter } = useDestinationDataStore(
     (state) => ({
       activeCities: state.activeCities,
@@ -44,7 +41,7 @@ export default function CountryMap({
     >
       <Typography variant="Title/sm">
         <h1 className={styles.title}>
-          {getHeadingText(intl, country, "country", activeSeoFilter)}
+          {getHeadingText(defaultHeading, activeSeoFilter)}
         </h1>
       </Typography>
       <CityList />
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
index 0574e730d..ff0be5429 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
@@ -58,6 +58,7 @@ export default async function DestinationCountryPage({
   const {
     blocks,
     images,
+    heading,
     preamble,
     experiences,
     has_sidepeek,
@@ -127,7 +128,7 @@ export default async function DestinationCountryPage({
             <CountryMap
               mapId={env.GOOGLE_DYNAMIC_MAP_ID}
               apiKey={env.GOOGLE_STATIC_MAP_KEY}
-              country={translatedCountry}
+              defaultHeading={heading}
               defaultLocation={destination_settings.location}
             />
           ) : (
@@ -150,9 +151,8 @@ export default async function DestinationCountryPage({
               </main>
               <aside className={styles.sidebar}>
                 <SidebarContentWrapper
+                  defaultHeading={heading}
                   defaultPreamble={preamble}
-                  location={translatedCountry}
-                  pageType="country"
                 >
                   <ExperienceList experiences={experiences} />
                   {has_sidepeek && sidepeek_content ? (
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
index 134942592..1be4c7c9a 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import React, { useRef } from "react"
-import { useIntl } from "react-intl"
 
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
@@ -9,26 +8,20 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
-import {
-  getHeadingText,
-  getPreambleText,
-} from "@/components/ContentType/DestinationPage/utils"
+import { getHeadingText, getPreambleText } from "../utils"
 
 import styles from "./sidebarContentWrapper.module.css"
 
 interface SidebarContentWrapperProps extends React.PropsWithChildren {
+  defaultHeading: string
   defaultPreamble: string
-  location: string
-  pageType: "country" | "city"
 }
 
 export default function SidebarContentWrapper({
+  defaultHeading,
   defaultPreamble,
-  location,
-  pageType,
   children,
 }: SidebarContentWrapperProps) {
-  const intl = useIntl()
   const sidebarRef = useRef<HTMLDivElement>(null)
   const { activeSeoFilter } = useDestinationDataStore((state) => ({
     activeSeoFilter: state.activeSeoFilter,
@@ -38,7 +31,7 @@ export default function SidebarContentWrapper({
     name: StickyElementNameEnum.DESTINATION_SIDEBAR,
   })
 
-  const heading = getHeadingText(intl, location, pageType, activeSeoFilter)
+  const heading = getHeadingText(defaultHeading, activeSeoFilter)
   const preamble = getPreambleText(defaultPreamble, activeSeoFilter)
 
   return (
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/utils.ts b/apps/scandic-web/components/ContentType/DestinationPage/utils.ts
index d65aa0da2..4043e9fa7 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/utils.ts
+++ b/apps/scandic-web/components/ContentType/DestinationPage/utils.ts
@@ -2,31 +2,11 @@ import type {
   DestinationFilter,
   DestinationFilters,
 } from "@scandic-hotels/trpc/types/destinationsData"
-import type { IntlShape } from "react-intl"
 
 export function getHeadingText(
-  intl: IntlShape,
-  location: string,
-  pageType: "country" | "city",
+  defaultHeading: string,
   activeSeoFilter: DestinationFilter | null
 ) {
-  const defaultHeading =
-    pageType === "country"
-      ? intl.formatMessage(
-          {
-            id: "destination.destinationsInLocation",
-            defaultMessage: "Destinations in {location}",
-          },
-          { location }
-        )
-      : intl.formatMessage(
-          {
-            id: "destination.hotelsInLocation",
-            defaultMessage: "Hotels in {location}",
-          },
-          { location }
-        )
-
   if (activeSeoFilter?.heading) {
     return activeSeoFilter.heading
   }