feat(BOOK-512): Added default heading from CS to destination pages

Approved-by: Bianca Widstam

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>

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 ? (

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 />

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 ? (

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 (

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
   }