From e3b1bfc4141c5b35947a21d727e66ab31dd7e013 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 5 Feb 2025 13:10:28 +0000
Subject: [PATCH] Merged in feat/SW-1454-hotel-listing-city-page (pull request
 #1250)

feat(SW-1454): added hotel listing

* feat(SW-1454): added hotel listing


Approved-by: Fredrik Thorsson
---
 .../DestinationPage/CityListing/index.tsx     |   4 +-
 .../destinationCityPage.module.css            |   4 +-
 .../DestinationCityPage/index.tsx             |  12 +--
 .../hotelListingItem.module.css               |  54 ++++++++++
 .../HotelListing/HotelListingItem/index.tsx   | 101 ++++++++++++++++++
 .../HotelListing/hotelListing.module.css      |  32 ++++++
 .../DestinationPage/HotelListing/index.tsx    |  76 +++++++++++++
 .../SelectHotelMapContent/index.tsx           |   1 +
 .../ImageGallery/imageGallery.module.css      |   2 +
 .../backToTopButton.module.css                |   5 +
 .../BackToTopButton/index.tsx                 |   2 +-
 .../BackToTopButton/variants.ts               |   1 +
 hooks/useScrollToTop.ts                       |  34 ++++--
 i18n/dictionaries/da.json                     |   3 +-
 i18n/dictionaries/de.json                     |   3 +-
 i18n/dictionaries/en.json                     |   3 +-
 i18n/dictionaries/fi.json                     |   3 +-
 i18n/dictionaries/no.json                     |   3 +-
 i18n/dictionaries/sv.json                     |   3 +-
 .../contentstack/destinationCityPage/query.ts |  29 +++--
 .../contentstack/destinationCityPage/utils.ts |  31 ++++++
 .../destinationCountryPage/query.ts           |  55 ++--------
 .../destinationCountryPage/utils.ts           |  49 +++++++++
 server/routers/hotels/output.ts               |  13 ++-
 server/routers/hotels/query.ts                |   8 +-
 .../routers/hotels/schemas/additionalData.ts  |   2 +-
 server/routers/hotels/utils.ts                |  92 +++++++++++++---
 27 files changed, 522 insertions(+), 103 deletions(-)
 create mode 100644 components/ContentType/DestinationPage/HotelListing/HotelListingItem/hotelListingItem.module.css
 create mode 100644 components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx
 create mode 100644 components/ContentType/DestinationPage/HotelListing/hotelListing.module.css
 create mode 100644 components/ContentType/DestinationPage/HotelListing/index.tsx

diff --git a/components/ContentType/DestinationPage/CityListing/index.tsx b/components/ContentType/DestinationPage/CityListing/index.tsx
index 639d46e09..6eda28805 100644
--- a/components/ContentType/DestinationPage/CityListing/index.tsx
+++ b/components/ContentType/DestinationPage/CityListing/index.tsx
@@ -19,7 +19,9 @@ export default async function CityListing({ cities }: CityListingProps) {
       <div className={styles.listHeader}>
         <Subtitle type="two">
           {intl.formatMessage(
-            { id: `{count} Locations` },
+            {
+              id: `{count, plural, one {{count} Location} other {{count} Locations}}`,
+            },
             { count: cities.length }
           )}
         </Subtitle>
diff --git a/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css b/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
index f2ba79648..1032fc939 100644
--- a/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
+++ b/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
@@ -16,7 +16,9 @@
 .mainSection {
   grid-area: mainSection;
   padding-bottom: var(--Spacing-x7);
-  min-height: 500px; /* This is a temporary value because of no content atm */
+  max-width: var(--max-width-page);
+  width: 100%;
+  margin: 0 auto;
 }
 
 .sidebar {
diff --git a/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
index 2bc30e119..d2b51975d 100644
--- a/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
+++ b/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
@@ -7,9 +7,9 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
-import { getIntl } from "@/i18n"
 
 import ExperienceList from "../ExperienceList"
+import HotelListing from "../HotelListing"
 import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
 import StaticMap from "../StaticMap"
@@ -20,16 +20,13 @@ import styles from "./destinationCityPage.module.css"
 import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export default async function DestinationCityPage() {
-  const [intl, pageData] = await Promise.all([
-    getIntl(),
-    getDestinationCityPage(),
-  ])
+  const pageData = await getDestinationCityPage()
 
   if (!pageData) {
     return null
   }
 
-  const { tracking, destinationCityPage } = pageData
+  const { tracking, destinationCityPage, hotels } = pageData
   const {
     images,
     heading,
@@ -55,8 +52,7 @@ export default async function DestinationCityPage() {
           />
         </header>
         <main className={styles.mainSection}>
-          {/* TODO: Add hotel listing by cityIdentifier */}
-          {">>>> MAIN CONTENT <<<<"}
+          <HotelListing hotels={hotels} />
         </main>
         <aside className={styles.sidebar}>
           <SidebarContentWrapper>
diff --git a/components/ContentType/DestinationPage/HotelListing/HotelListingItem/hotelListingItem.module.css b/components/ContentType/DestinationPage/HotelListing/HotelListingItem/hotelListingItem.module.css
new file mode 100644
index 000000000..f2e381031
--- /dev/null
+++ b/components/ContentType/DestinationPage/HotelListing/HotelListingItem/hotelListingItem.module.css
@@ -0,0 +1,54 @@
+.container {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  align-content: start;
+  justify-items: start;
+}
+
+.intro {
+  display: grid;
+  gap: var(--Spacing-x-half);
+}
+
+.captions {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
+.amenityList {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  flex-wrap: wrap;
+  color: var(--UI-Text-Medium-contrast);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Caption-Underline-fontSize);
+}
+
+.amenityItem {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  align-items: center;
+}
+
+.ctaWrapper {
+  justify-self: stretch;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    display: grid;
+    grid-template-columns: minmax(250px, 350px) auto;
+  }
+
+  .ctaWrapper {
+    justify-self: end;
+  }
+}
diff --git a/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx b/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx
new file mode 100644
index 000000000..c7fcf609a
--- /dev/null
+++ b/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
+import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import HotelLogo from "@/components/Icons/Logos"
+import ImageGallery from "@/components/ImageGallery"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
+import { getSingleDecimal } from "@/utils/numberFormatting"
+
+import styles from "./hotelListingItem.module.css"
+
+import type { Hotel } from "@/types/hotel"
+
+interface HotelListingItemProps {
+  hotel: Hotel
+  url: string | null
+}
+
+export default function HotelListingItem({
+  hotel,
+  url,
+}: HotelListingItemProps) {
+  const intl = useIntl()
+  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
+  const amenities = hotel.detailedFacilities.slice(0, 5)
+
+  return (
+    <article className={styles.container}>
+      <ImageGallery
+        images={galleryImages}
+        title={intl.formatMessage(
+          { id: "{title} - Image gallery" },
+          { title: hotel.name }
+        )}
+      />
+      <div className={styles.content}>
+        <div className={styles.intro}>
+          <HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
+          <Subtitle type="one" asChild>
+            <h3>{hotel.name}</h3>
+          </Subtitle>
+          <div className={styles.captions}>
+            <Caption color="uiTextPlaceholder">
+              {hotel.address.streetAddress}
+            </Caption>
+            <Divider variant="vertical" color="beige" />
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage(
+                { id: "{number} km to city center" },
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
+              )}
+            </Caption>
+          </div>
+        </div>
+        <Body>{hotel.hotelContent.texts.descriptions.short}</Body>
+        <ul className={styles.amenityList}>
+          {amenities.map((amenity) => {
+            const IconComponent = mapFacilityToIcon(amenity.id)
+            return (
+              <li className={styles.amenityItem} key={amenity.id}>
+                {IconComponent && (
+                  <IconComponent color="grey80" width={20} height={20} />
+                )}
+                {amenity.name}
+              </li>
+            )
+          })}
+        </ul>
+        <Button intent="text" variant="icon" theme="base">
+          {intl.formatMessage({ id: "See on map" })}
+          <ChevronRightSmallIcon />
+        </Button>
+        {url && (
+          <>
+            <Divider variant="horizontal" color="primaryLightSubtle" />
+
+            <div className={styles.ctaWrapper}>
+              <Button intent="tertiary" theme="base" size="small" asChild>
+                <Link href={url}>
+                  {intl.formatMessage({ id: "See hotel details" })}
+                </Link>
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </article>
+  )
+}
diff --git a/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css b/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css
new file mode 100644
index 000000000..e09427a78
--- /dev/null
+++ b/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css
@@ -0,0 +1,32 @@
+.container {
+  --scroll-margin-top: calc(
+    var(--booking-widget-mobile-height) + var(--Spacing-x2)
+  );
+  position: relative;
+  display: grid;
+  gap: var(--Spacing-x2);
+  scroll-margin-top: var(--scroll-margin-top);
+}
+
+.listHeader {
+  display: flex;
+  justify-content: space-between;
+}
+
+.hotelList {
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.hotelList:not(.allVisible) li:nth-child(n + 6) {
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    --scroll-margin-top: calc(
+      var(--booking-widget-desktop-height) + var(--Spacing-x2)
+    );
+  }
+}
diff --git a/components/ContentType/DestinationPage/HotelListing/index.tsx b/components/ContentType/DestinationPage/HotelListing/index.tsx
new file mode 100644
index 000000000..39868122f
--- /dev/null
+++ b/components/ContentType/DestinationPage/HotelListing/index.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { useIntl } from "react-intl"
+
+import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useScrollToTop } from "@/hooks/useScrollToTop"
+
+import HotelListingItem from "./HotelListingItem"
+
+import styles from "./hotelListing.module.css"
+
+import type { HotelData } from "@/types/hotel"
+
+interface HotelListingProps {
+  hotels: (HotelData & { url: string | null })[]
+}
+
+export default function HotelListing({ hotels }: HotelListingProps) {
+  const intl = useIntl()
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const showToggleButton = hotels.length > 5
+  const [allHotelsVisible, setAllHotelsVisible] = useState(!showToggleButton)
+  const { showBackToTop, scrollToTop } = useScrollToTop({
+    threshold: 300,
+    elementRef: scrollRef,
+  })
+
+  function handleShowMore() {
+    if (scrollRef.current && allHotelsVisible) {
+      scrollRef.current.scrollIntoView({ behavior: "smooth" })
+    }
+    setAllHotelsVisible((state) => !state)
+  }
+
+  return (
+    <section className={styles.container} ref={scrollRef}>
+      <div className={styles.listHeader}>
+        <Subtitle type="two">
+          {intl.formatMessage(
+            {
+              id: `{count, plural, one {{count} Hotel} other {{count} Hotels}}`,
+            },
+            { count: hotels.length }
+          )}
+        </Subtitle>
+      </div>
+      <ul
+        className={`${styles.hotelList} ${allHotelsVisible ? styles.allVisible : ""}`}
+      >
+        {hotels.map(({ hotel, url }) => (
+          <li key={hotel.name}>
+            <HotelListingItem hotel={hotel} url={url} />
+          </li>
+        ))}
+      </ul>
+      {showToggleButton ? (
+        <ShowMoreButton
+          loadMoreData={handleShowMore}
+          showLess={allHotelsVisible}
+          textShowMore={intl.formatMessage({
+            id: "Show more",
+          })}
+          textShowLess={intl.formatMessage({
+            id: "Show less",
+          })}
+        />
+      ) : null}
+      {showBackToTop && (
+        <BackToTopButton position="center" onClick={scrollToTop} />
+      )}
+    </section>
+  )
+}
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index be1ecef60..e9fd3d986 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -51,6 +51,7 @@ export default function SelectHotelContent({
   const { showBackToTop, scrollToTop } = useScrollToTop({
     threshold: 490,
     elementRef: listingContainerRef,
+    refScrollable: true,
   })
 
   const coordinates = useMemo(
diff --git a/components/ImageGallery/imageGallery.module.css b/components/ImageGallery/imageGallery.module.css
index 050f9be3b..5ceb02255 100644
--- a/components/ImageGallery/imageGallery.module.css
+++ b/components/ImageGallery/imageGallery.module.css
@@ -13,6 +13,7 @@
 }
 
 .triggerArea {
+  position: relative;
   display: flex;
   cursor: pointer;
   width: 100%;
@@ -21,6 +22,7 @@
 
 .image {
   width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 
diff --git a/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css b/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
index 35059b505..290688fa4 100644
--- a/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
+++ b/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
@@ -35,6 +35,11 @@
   right: 32px;
 }
 
+.center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 @media (min-width: 768px) {
   .backToTopButtonText {
     display: initial;
diff --git a/components/TempDesignSystem/BackToTopButton/index.tsx b/components/TempDesignSystem/BackToTopButton/index.tsx
index ebab3ecd3..5da4159fb 100644
--- a/components/TempDesignSystem/BackToTopButton/index.tsx
+++ b/components/TempDesignSystem/BackToTopButton/index.tsx
@@ -14,7 +14,7 @@ export function BackToTopButton({
   position,
 }: {
   onClick: () => void
-  position: "left" | "right"
+  position: "left" | "right" | "center"
 }) {
   const intl = useIntl()
   return (
diff --git a/components/TempDesignSystem/BackToTopButton/variants.ts b/components/TempDesignSystem/BackToTopButton/variants.ts
index 91cee911e..ea6c9c1c8 100644
--- a/components/TempDesignSystem/BackToTopButton/variants.ts
+++ b/components/TempDesignSystem/BackToTopButton/variants.ts
@@ -7,6 +7,7 @@ export const backToTopButtonVariants = cva(styles.backToTopButton, {
     position: {
       left: styles.left,
       right: styles.right,
+      center: styles.center,
     },
   },
   defaultVariants: {
diff --git a/hooks/useScrollToTop.ts b/hooks/useScrollToTop.ts
index 39ff5da0c..a39dbac9e 100644
--- a/hooks/useScrollToTop.ts
+++ b/hooks/useScrollToTop.ts
@@ -3,29 +3,43 @@ import { type RefObject, useEffect, useState } from "react"
 interface UseScrollToTopProps {
   threshold: number
   elementRef?: RefObject<HTMLElement>
+  refScrollable?: boolean
 }
 
-export function useScrollToTop({ threshold, elementRef }: UseScrollToTopProps) {
+export function useScrollToTop({
+  threshold,
+  elementRef,
+  refScrollable,
+}: UseScrollToTopProps) {
   const [showBackToTop, setShowBackToTop] = useState(false)
 
   useEffect(() => {
-    const element = elementRef?.current ?? window
+    const element =
+      refScrollable && elementRef?.current ? elementRef?.current : window
 
     function handleScroll() {
-      const scrollTop = elementRef?.current
-        ? elementRef.current.scrollTop
-        : window.scrollY
-      setShowBackToTop(scrollTop > threshold)
+      let position = window.scrollY
+      if (elementRef?.current) {
+        position = refScrollable
+          ? elementRef.current.scrollTop
+          : elementRef.current.getBoundingClientRect().top * -1
+      }
+      setShowBackToTop(position > threshold)
     }
 
     element.addEventListener("scroll", handleScroll, { passive: true })
     return () => element.removeEventListener("scroll", handleScroll)
-  }, [threshold, elementRef])
+  }, [threshold, elementRef, refScrollable])
 
   function scrollToTop() {
-    if (elementRef?.current)
-      elementRef.current.scrollTo({ top: 0, behavior: "smooth" })
-    else window.scrollTo({ top: 0, behavior: "smooth" })
+    if (elementRef?.current) {
+      if (refScrollable) {
+        elementRef.current.scrollTo({ top: 0, behavior: "smooth" })
+      }
+      window.scrollTo({ top: elementRef.current.offsetTop, behavior: "smooth" })
+    } else {
+      window.scrollTo({ top: 0, behavior: "smooth" })
+    }
   }
 
   return { showBackToTop, scrollToTop }
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 217e7bcd0..bd81bb5e1 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -565,7 +565,8 @@
   "{card} ending with {cardno}": "{card} slutter med {cardno}",
   "{checkInDate} from {checkInTime}": "{checkInDate} fra {checkInTime}",
   "{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}",
-  "{count} Locations": "{count} steder",
+  "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotel} other {# hoteller}}",
+  "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}",
   "{count} lowercase letter": "{count} lille bogstav",
   "{count} number": "{count} nummer",
   "{count} special character": "{count} speciel karakter",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 58ebc29a7..5700320d2 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -563,7 +563,8 @@
   "{card} ending with {cardno}": "{card} endet mit {cardno}",
   "{checkInDate} from {checkInTime}": "{checkInDate} aus {checkInTime}",
   "{checkOutDate} from {checkOutTime}": "{checkOutDate} aus {checkOutTime}",
-  "{count} Locations": "{count} Standorte",
+  "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}}",
+  "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# Standort} other {# Standorte}}",
   "{count} lowercase letter": "{count} Kleinbuchstabe",
   "{count} number": "{count} nummer",
   "{count} special character": "{count} sonderzeichen",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index cd5676904..acb978d1d 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -615,7 +615,8 @@
   "{card} ending with {cardno}": "{card} ending with {cardno}",
   "{checkInDate} from {checkInTime}": "{checkInDate} from {checkInTime}",
   "{checkOutDate} from {checkOutTime}": "{checkOutDate} from {checkOutTime}",
-  "{count} Locations": "{count} Locations",
+  "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}",
+  "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {{count} Location} other {{count} Locations}}",
   "{count} lowercase letter": "{count} lowercase letter",
   "{count} number": "{count} number",
   "{count} special character": "{count} special character",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index ada837233..91a5f6edf 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -563,7 +563,8 @@
   "{card} ending with {cardno}": "{card} päättyen {cardno}",
   "{checkInDate} from {checkInTime}": "{checkInDate} alkaen {checkInTime}",
   "{checkOutDate} from {checkOutTime}": "{checkOutDate} alkaen {checkOutTime}",
-  "{count} Locations": "{count} sijaintia",
+  "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotelli} other {# hotellit}}",
+  "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sijainti} other {# sijainnit}}",
   "{count} lowercase letter": "{count} pien kirjain",
   "{count} number": "{count} määrä",
   "{count} special character": "{count} erikoishahmo",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 13ecf92f5..5060a0731 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -564,7 +564,8 @@
   "{card} ending with {cardno}": "{card} slutter med {cardno}",
   "{checkInDate} from {checkInTime}": "{checkInDate} fra {checkInTime}",
   "{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}",
-  "{count} Locations": "{count} steder",
+  "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hoteller}}",
+  "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}",
   "{count} lowercase letter": "{count} liten bokstav",
   "{count} number": "{count} antall",
   "{count} special character": "{count} spesiell karakter",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 0364c2ea7..1d9c1f3c6 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -566,7 +566,8 @@
   "{card} ending with {cardno}": "{card} som slutar på {cardno}",
   "{checkInDate} from {checkInTime}": "{checkInDate} från {checkInTime}",
   "{checkOutDate} from {checkOutTime}": "{checkOutDate} från {checkOutTime}",
-  "{count} Locations": "{count} platser",
+  "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hotell}}",
+  "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# plats} other {# platser}}",
   "{count} lowercase letter": "{count} liten bokstav",
   "{count} number": "{count} nummer",
   "{count} special character": "{count} speciell karaktär",
diff --git a/server/routers/contentstack/destinationCityPage/query.ts b/server/routers/contentstack/destinationCityPage/query.ts
index c0e500b94..aba16d609 100644
--- a/server/routers/contentstack/destinationCityPage/query.ts
+++ b/server/routers/contentstack/destinationCityPage/query.ts
@@ -4,7 +4,7 @@ import {
 } from "@/lib/graphql/Query/DestinationCityPage/DestinationCityPage.graphql"
 import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
-import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
+import { contentStackUidWithServiceProcedure, router } from "@/server/trpc"
 
 import { generateTag } from "@/utils/generateTag"
 
@@ -20,7 +20,7 @@ import {
   getDestinationCityPageRefsSuccessCounter,
   getDestinationCityPageSuccessCounter,
 } from "./telemetry"
-import { generatePageTags } from "./utils"
+import { generatePageTags, getHotelListData } from "./utils"
 
 import type {
   GetDestinationCityPageData,
@@ -28,8 +28,8 @@ import type {
 } from "@/types/trpc/routers/contentstack/destinationCityPage"
 
 export const destinationCityPageQueryRouter = router({
-  get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {
-    const { lang, uid } = ctx
+  get: contentStackUidWithServiceProcedure.query(async ({ ctx }) => {
+    const { lang, uid, serviceToken } = ctx
 
     getDestinationCityPageRefsCounter.add(1, { lang, uid })
     console.info(
@@ -128,27 +128,31 @@ export const destinationCityPageQueryRouter = router({
       throw notFoundError
     }
 
-    const validatedDestinationCityPage = destinationCityPageSchema.safeParse(
-      response.data
-    )
+    const validatedResponse = destinationCityPageSchema.safeParse(response.data)
 
-    if (!validatedDestinationCityPage.success) {
+    if (!validatedResponse.success) {
       getDestinationCityPageFailCounter.add(1, {
         lang,
         uid: `${uid}`,
         error_type: "validation_error",
-        error: JSON.stringify(validatedDestinationCityPage.error),
+        error: JSON.stringify(validatedResponse.error),
       })
       console.error(
         "contentstack.destinationCityPage validation error",
         JSON.stringify({
           query: { lang, uid },
-          error: validatedDestinationCityPage.error,
+          error: validatedResponse.error,
         })
       )
       return null
     }
 
+    const hotels = await getHotelListData(
+      lang,
+      serviceToken,
+      validatedResponse.data.destinationCityPage.destination_settings.city
+    )
+
     getDestinationCityPageSuccessCounter.add(1, { lang, uid: `${uid}` })
     console.info(
       "contentstack.destinationCityPage success",
@@ -157,6 +161,9 @@ export const destinationCityPageQueryRouter = router({
       })
     )
 
-    return validatedDestinationCityPage.data
+    return {
+      ...validatedResponse.data,
+      hotels,
+    }
   }),
 })
diff --git a/server/routers/contentstack/destinationCityPage/utils.ts b/server/routers/contentstack/destinationCityPage/utils.ts
index 8f2b1fcf4..b8ac95e94 100644
--- a/server/routers/contentstack/destinationCityPage/utils.ts
+++ b/server/routers/contentstack/destinationCityPage/utils.ts
@@ -1,5 +1,10 @@
 import { generateTag, generateTagsFromSystem } from "@/utils/generateTag"
 
+import { getHotel } from "../../hotels/query"
+import { getHotelIdsByCityIdentifier } from "../../hotels/utils"
+import { getHotelPageUrl } from "../hotelPage/utils"
+
+import type { HotelData } from "@/types/hotel"
 import type { System } from "@/types/requests/system"
 import type { GetDestinationCityPageRefsSchema } from "@/types/trpc/routers/contentstack/destinationCityPage"
 import type { Lang } from "@/constants/languages"
@@ -29,3 +34,29 @@ export function getConnections({
 
   return connections
 }
+
+export async function getHotelListData(
+  lang: Lang,
+  serviceToken: string,
+  cityIdentifier: string
+) {
+  const hotelIds = await getHotelIdsByCityIdentifier(
+    cityIdentifier,
+    serviceToken
+  )
+
+  const hotels = await Promise.all(
+    hotelIds.map(async (hotelId) => {
+      const [hotelData, url] = await Promise.all([
+        getHotel({ hotelId, language: lang }, serviceToken),
+        getHotelPageUrl(lang, hotelId),
+      ])
+
+      return hotelData ? { ...hotelData, url } : null
+    })
+  )
+
+  return hotels.filter(
+    (hotel): hotel is HotelData & { url: string | null } => !!hotel
+  )
+}
diff --git a/server/routers/contentstack/destinationCountryPage/query.ts b/server/routers/contentstack/destinationCountryPage/query.ts
index 86fa6d2bb..802039a91 100644
--- a/server/routers/contentstack/destinationCountryPage/query.ts
+++ b/server/routers/contentstack/destinationCountryPage/query.ts
@@ -1,4 +1,3 @@
-import { env } from "@/env/server"
 import {
   GetDestinationCountryPage,
   GetDestinationCountryPageRefs,
@@ -10,7 +9,6 @@ import { toApiLang } from "@/server/utils"
 
 import { generateTag } from "@/utils/generateTag"
 
-import { getCitiesByCountry } from "../../hotels/utils"
 import {
   destinationCountryPageRefsSchema,
   destinationCountryPageSchema,
@@ -23,10 +21,9 @@ import {
   getDestinationCountryPageRefsSuccessCounter,
   getDestinationCountryPageSuccessCounter,
 } from "./telemetry"
-import { generatePageTags, getCityListDataByCityIdentifier } from "./utils"
+import { generatePageTags, getCityPages } from "./utils"
 
 import { ApiCountry } from "@/types/enums/country"
-import type { RequestOptionsWithOutBody } from "@/types/fetch"
 import type {
   GetDestinationCountryPageData,
   GetDestinationCountryPageRefsSchema,
@@ -155,44 +152,10 @@ export const destinationCountryPageQueryRouter = router({
       return null
     }
 
-    const params = new URLSearchParams({
-      language: apiLang,
-    })
-    const options: RequestOptionsWithOutBody = {
-      // needs to clear default option as only
-      // cache or next.revalidate is permitted
-      cache: undefined,
-      headers: {
-        Authorization: `Bearer ${serviceToken}`,
-      },
-      next: {
-        revalidate: env.CACHE_TIME_HOTELS,
-      },
-    }
-    const selectedCountry =
-      validatedResponse.data.destinationCountryPage.destination_settings.country
-    const apiCountry = ApiCountry[lang][selectedCountry]
-    const cities = await getCitiesByCountry(
-      [apiCountry],
-      options,
-      params,
+    const cities = await getCityPages(
       lang,
-      true,
-      "destinationCountryPage"
-    )
-
-    const cityPages = await Promise.all(
-      cities[apiCountry].map(async (city) => {
-        if (!city.cityIdentifier) {
-          return null
-        }
-
-        const data = await getCityListDataByCityIdentifier(
-          lang,
-          city.cityIdentifier
-        )
-        return data ? { ...data, cityName: city.name } : null
-      })
+      serviceToken,
+      validatedResponse.data.destinationCountryPage.destination_settings.country
     )
 
     getDestinationCountryPageSuccessCounter.add(1, { lang, uid: `${uid}` })
@@ -205,10 +168,12 @@ export const destinationCountryPageQueryRouter = router({
 
     return {
       ...validatedResponse.data,
-      translatedCountry: apiCountry,
-      cities: cityPages
-        .flat()
-        .filter((city): city is NonNullable<typeof city> => !!city),
+      translatedCountry:
+        ApiCountry[lang][
+          validatedResponse.data.destinationCountryPage.destination_settings
+            .country
+        ],
+      cities,
     }
   }),
 })
diff --git a/server/routers/contentstack/destinationCountryPage/utils.ts b/server/routers/contentstack/destinationCountryPage/utils.ts
index ca5dbd241..32b93ba5e 100644
--- a/server/routers/contentstack/destinationCountryPage/utils.ts
+++ b/server/routers/contentstack/destinationCountryPage/utils.ts
@@ -1,8 +1,11 @@
+import { env } from "@/env/server"
 import { GetDestinationCityListData } from "@/lib/graphql/Query/DestinationCityPage/DestinationCityListData.graphql"
 import { request } from "@/lib/graphql/request"
+import { toApiLang } from "@/server/utils"
 
 import { generateTag, generateTagsFromSystem } from "@/utils/generateTag"
 
+import { getCitiesByCountry } from "../../hotels/utils"
 import { destinationCityListDataSchema } from "../destinationCityPage/output"
 import {
   getCityListDataCounter,
@@ -10,6 +13,8 @@ import {
   getCityListDataSuccessCounter,
 } from "./telemetry"
 
+import { ApiCountry, type Country } from "@/types/enums/country"
+import type { RequestOptionsWithOutBody } from "@/types/fetch"
 import type { System } from "@/types/requests/system"
 import type { GetDestinationCityListDataResponse } from "@/types/trpc/routers/contentstack/destinationCityPage"
 import type { GetDestinationCountryPageRefsSchema } from "@/types/trpc/routers/contentstack/destinationCountryPage"
@@ -108,3 +113,47 @@ export async function getCityListDataByCityIdentifier(
 
   return validatedResponse.data
 }
+
+export async function getCityPages(
+  lang: Lang,
+  serviceToken: string,
+  country: Country
+) {
+  const apiLang = toApiLang(lang)
+  const params = new URLSearchParams({
+    language: apiLang,
+  })
+  const options: RequestOptionsWithOutBody = {
+    // needs to clear default option as only
+    // cache or next.revalidate is permitted
+    cache: undefined,
+    headers: {
+      Authorization: `Bearer ${serviceToken}`,
+    },
+    next: {
+      revalidate: env.CACHE_TIME_HOTELS,
+    },
+  }
+  const apiCountry = ApiCountry[lang][country]
+  const cities = await getCitiesByCountry([apiCountry], options, params, lang)
+
+  const publishedCities = cities[apiCountry].filter((city) => city.isPublished)
+
+  const cityPages = await Promise.all(
+    publishedCities.map(async (city) => {
+      if (!city.cityIdentifier) {
+        return null
+      }
+
+      const data = await getCityListDataByCityIdentifier(
+        lang,
+        city.cityIdentifier
+      )
+      return data ? { ...data, cityName: city.name } : null
+    })
+  )
+
+  return cityPages
+    .flat()
+    .filter((city): city is NonNullable<typeof city> => !!city)
+}
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index ee7130c1f..bb641ca42 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -251,16 +251,23 @@ export const packagesSchema = z
   })
   .transform(({ data }) => data?.attributes.packages)
 
-export const getHotelIdsByCityIdSchema = z
+export const getHotelIdsSchema = z
   .object({
     data: z.array(
       z.object({
-        // We only care about the hotel id
+        attributes: z.object({
+          isPublished: z.boolean(),
+        }),
         id: z.string(),
       })
     ),
   })
-  .transform((data) => data.data.map((hotel) => hotel.id))
+  .transform(({ data }) => {
+    const filteredHotels = data.filter(
+      (hotel) => !!hotel.attributes.isPublished
+    )
+    return filteredHotels.map((hotel) => hotel.id)
+  })
 
 export const getNearbyHotelIdsSchema = z
   .object({
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 5da29e7e6..8922c359e 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -91,7 +91,7 @@ export const getHotel = cache(
         })
         console.info(
           "api.hotels.hotelData start",
-          JSON.stringify({ query: { hotelId, params } })
+          JSON.stringify({ query: { hotelId, params: params.toString() } })
         )
 
         const apiResponse = await api.get(
@@ -126,7 +126,7 @@ export const getHotel = cache(
           console.error(
             "api.hotels.hotelData error",
             JSON.stringify({
-              query: { hotelId, params },
+              query: { hotelId, params: params.toString() },
               error: {
                 status: apiResponse.status,
                 statusText: apiResponse.statusText,
@@ -151,7 +151,7 @@ export const getHotel = cache(
           console.error(
             "api.hotels.hotelData validation error",
             JSON.stringify({
-              query: { hotelId, params },
+              query: { hotelId, params: params.toString() },
               error: validateHotelData.error,
             })
           )
@@ -165,7 +165,7 @@ export const getHotel = cache(
         console.info(
           "api.hotels.hotelData success",
           JSON.stringify({
-            query: { hotelId, params: params },
+            query: { hotelId, params: params.toString() },
           })
         )
         const hotelData = validateHotelData.data
diff --git a/server/routers/hotels/schemas/additionalData.ts b/server/routers/hotels/schemas/additionalData.ts
index ac4908d9b..9f0a2a95c 100644
--- a/server/routers/hotels/schemas/additionalData.ts
+++ b/server/routers/hotels/schemas/additionalData.ts
@@ -30,7 +30,7 @@ export const restaurantsOverviewPageSchema = z.object({
 })
 
 export const extraPageSchema = z.object({
-  elevatorPitch: z.string().optional(),
+  elevatorPitch: z.string().default(""),
   mainBody: z.string().optional(),
 })
 
diff --git a/server/routers/hotels/utils.ts b/server/routers/hotels/utils.ts
index 0355bf16a..bf63f045d 100644
--- a/server/routers/hotels/utils.ts
+++ b/server/routers/hotels/utils.ts
@@ -1,14 +1,17 @@
 import deepmerge from "deepmerge"
 import { unstable_cache } from "next/cache"
 
+import { Lang } from "@/constants/languages"
+import { env } from "@/env/server"
 import * as api from "@/lib/api"
+import { toApiLang } from "@/server/utils"
 
 import { metrics } from "./metrics"
 import {
   citiesByCountrySchema,
   citiesSchema,
   countriesSchema,
-  getHotelIdsByCityIdSchema,
+  getHotelIdsSchema,
   locationsSchema,
 } from "./output"
 
@@ -17,10 +20,9 @@ import { PointOfInterestGroupEnum } from "@/types/enums/pointOfInterest"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
 import type {
   CitiesGroupedByCountry,
-  Countries,
+  CityLocation,
   HotelLocation,
 } from "@/types/trpc/routers/hotel/locations"
-import type { Lang } from "@/constants/languages"
 import type { Endpoint } from "@/lib/api/endpoints"
 
 export function getPoiGroupByCategoryName(category: string | undefined) {
@@ -305,11 +307,11 @@ export async function getHotelIdsByCityId(
           })
         )
 
-        return null
+        return []
       }
 
       const apiJson = await apiResponse.json()
-      const validatedHotelIds = getHotelIdsByCityIdSchema.safeParse(apiJson)
+      const validatedHotelIds = getHotelIdsSchema.safeParse(apiJson)
       if (!validatedHotelIds.success) {
         metrics.hotelIds.fail.add(1, {
           params: params.toString(),
@@ -323,19 +325,22 @@ export async function getHotelIdsByCityId(
             error: validatedHotelIds.error,
           })
         )
-        return null
+        return []
       }
 
       metrics.hotelIds.success.add(1, { cityId })
       console.info(
         "api.hotel.hotel-ids success",
-        JSON.stringify({ params: params.toString() })
+        JSON.stringify({
+          params: params.toString(),
+          response: validatedHotelIds.data,
+        })
       )
 
       return validatedHotelIds.data
     },
     [`hotelsByCityId`, params.toString()],
-    { revalidate: TWENTYFOUR_HOURS }
+    { revalidate: env.CACHE_TIME_HOTELS }
   )(params)
 }
 
@@ -376,11 +381,11 @@ export async function getHotelIdsByCountry(
           })
         )
 
-        return null
+        return []
       }
 
       const apiJson = await apiResponse.json()
-      const validatedHotelIds = getHotelIdsByCityIdSchema.safeParse(apiJson)
+      const validatedHotelIds = getHotelIdsSchema.safeParse(apiJson)
       if (!validatedHotelIds.success) {
         metrics.hotelIds.fail.add(1, {
           country,
@@ -394,7 +399,7 @@ export async function getHotelIdsByCountry(
             error: validatedHotelIds.error,
           })
         )
-        return null
+        return []
       }
 
       metrics.hotelIds.success.add(1, { country })
@@ -406,6 +411,69 @@ export async function getHotelIdsByCountry(
       return validatedHotelIds.data
     },
     [`hotelsByCountry`, params.toString()],
-    { revalidate: TWENTYFOUR_HOURS }
+    { revalidate: env.CACHE_TIME_HOTELS }
   )(params)
 }
+
+export async function getHotelIdsByCityIdentifier(
+  cityIdentifier: string,
+  serviceToken: string
+) {
+  const apiLang = toApiLang(Lang.en)
+  const cityId = await getCityIdByCityIdentifier(cityIdentifier, serviceToken)
+
+  if (!cityId) {
+    return []
+  }
+
+  const hotelIdsParams = new URLSearchParams({
+    language: apiLang,
+    city: cityId,
+    onlyBasicInfo: "true",
+  })
+  const options: RequestOptionsWithOutBody = {
+    // needs to clear default option as only
+    // cache or next.revalidate is permitted
+    cache: undefined,
+    headers: {
+      Authorization: `Bearer ${serviceToken}`,
+    },
+    next: {
+      revalidate: env.CACHE_TIME_HOTELS,
+    },
+  }
+  const hotelIds = await getHotelIdsByCityId(cityId, options, hotelIdsParams)
+  return hotelIds
+}
+
+export async function getCityIdByCityIdentifier(
+  cityIdentifier: string,
+  serviceToken: string
+) {
+  const lang = Lang.en
+  const apiLang = toApiLang(lang)
+  const options: RequestOptionsWithOutBody = {
+    // needs to clear default option as only
+    // cache or next.revalidate is permitted
+    cache: undefined,
+    headers: {
+      Authorization: `Bearer ${serviceToken}`,
+    },
+    next: {
+      revalidate: env.CACHE_TIME_HOTELS,
+    },
+  }
+  const params = new URLSearchParams({
+    language: apiLang,
+  })
+  const locations = await getLocations(lang, options, params, null)
+  if (!locations || "error" in locations) {
+    return null
+  }
+
+  const cityId = locations
+    .filter((loc): loc is CityLocation => loc.type === "cities")
+    .find((loc) => loc.cityIdentifier === cityIdentifier)?.id
+
+  return cityId ?? null
+}