Feat/SW-3028 hotel page campaigns

* feat(SW-3028): Added query and typings to fetch campaigns by hotelUid * feat(SW-3028): Added components for campaigns to the hotel page * feat(SW-3028): Implemented prioritized campaigns list * chore(SW-3028): Refactor how campaigns are fetched on hotel pages * feat(SW-3028): Added offers/campaigns to tab navigation Approved-by: Matilda Landström
2025-08-21 13:00:34 +00:00
parent 456e10c674
commit 2064732e56
22 changed files with 566 additions and 45 deletions
--- a/apps/scandic-web/components/ContentCard/contentCard.ts
+++ b/apps/scandic-web/components/ContentCard/contentCard.ts
@@ -1,14 +0,0 @@
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
-
-export interface ContentCardProps {
-  link?: {
-    href: string
-    openInNewTab?: boolean
-    isExternal?: boolean
-  }
-  heading: string
-  image: ImageVaultAsset
-  bodyText: string
-  promoText?: string
-  className?: string
-}
--- a/apps/scandic-web/components/ContentCard/index.tsx
+++ b/apps/scandic-web/components/ContentCard/index.tsx
@@ -6,7 +6,20 @@ import Subtitle from "@scandic-hotels/design-system/Subtitle"

 import styles from "./contentCard.module.css"

-import type { ContentCardProps } from "./contentCard"
+import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+
+interface ContentCardProps {
+  link?: {
+    href: string
+    openInNewTab?: boolean
+    isExternal?: boolean
+  }
+  heading: string
+  image: ImageVaultAsset
+  bodyText: string
+  promoText?: string
+  className?: string
+}

 export default function ContentCard({
  heading,
--- a/apps/scandic-web/components/ContentType/CampaignPage/Hero/hero.module.css
+++ b/apps/scandic-web/components/ContentType/CampaignPage/Hero/hero.module.css
@@ -69,6 +69,7 @@
    border-radius: 0;
    margin: 0;
    align-content: center;
+    padding: var(--Space-x7) var(--Space-x3);
  }

  .hero {
@@ -76,11 +77,18 @@
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
+    min-height: 478px;
+    height: 100%;
+
+    &.hotelPage {
+      min-height: 310px;
+    }
  }

  .imageContainer {
    grid-column: span 2;
    position: relative;
    border-radius: 0;
+    height: 100%;
  }
 }
--- a/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx
+++ b/apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx
@@ -1,4 +1,6 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
+import { cx, type VariantProps } from "class-variance-authority"
+
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -9,7 +11,14 @@ import { variants } from "./variants"

 import styles from "./hero.module.css"

-import type { HeroProps } from "@/components/ContentType/CampaignPage/Hero/types"
+import type { Hero } from "@scandic-hotels/trpc/types/campaignPage"
+
+interface HeroProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof variants>,
+    Omit<Hero, "theme"> {
+  pageType?: "campaign" | "overview" | "hotelPage"
+}

 export default async function CampaignHero({
  image,
@@ -18,12 +27,17 @@ export default async function CampaignHero({
  rate_text,
  button,
  theme,
+  pageType = "campaign",
 }: HeroProps) {
  const classNames = variants({
    theme,
  })
+
+  const visibleBenefits =
+    pageType === "campaign" ? benefits : benefits.slice(0, 3)
+
  return (
-    <header className={classNames}>
+    <header className={cx(classNames, styles[pageType])}>
      {image ? (
        <div className={styles.imageContainer}>
          <Image
@@ -38,11 +52,11 @@ export default async function CampaignHero({
      ) : null}
      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
-          <h2>{heading}</h2>
+          <h3>{heading}</h3>
        </Typography>
-        {benefits?.length ? (
+        {visibleBenefits?.length ? (
          <ul className={styles.benefitList}>
-            {benefits.map((benefit) => (
+            {visibleBenefits.map((benefit) => (
              <li key={benefit}>
                <MaterialIcon
                  icon="check_circle"
--- a/apps/scandic-web/components/ContentType/CampaignPage/Hero/types.ts
+++ b/apps/scandic-web/components/ContentType/CampaignPage/Hero/types.ts
@@ -1,9 +0,0 @@
-import type { Hero } from "@scandic-hotels/trpc/types/campaignPage"
-import type { VariantProps } from "class-variance-authority"
-
-import type { variants } from "./variants"
-
-export interface HeroProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof variants>,
-    Omit<Hero, "theme"> {}
--- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/campaignCardList.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/campaignCardList.module.css
@@ -0,0 +1,17 @@
+.list {
+  list-style: none;
+  display: grid;
+  gap: var(--Space-x4) var(--Space-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
--- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+
+import ContentCard from "@/components/ContentCard"
+
+import styles from "./campaignCardList.module.css"
+
+import type { Campaigns } from "@scandic-hotels/trpc/types/campaignPage"
+
+interface CampaignCardListProps {
+  campaigns: Campaigns
+  className?: string
+}
+
+export default function CampaignCardList({
+  campaigns,
+  className,
+}: CampaignCardListProps) {
+  return (
+    <ul className={cx(styles.list, className)}>
+      {campaigns.map(({ id, url, card_content }) => (
+        <li key={id}>
+          <ContentCard
+            heading={card_content.heading}
+            image={card_content.image}
+            bodyText={card_content.text || ""}
+            link={{ href: url }}
+          />
+        </li>
+      ))}
+    </ul>
+  )
+}
--- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/campaigns.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/campaigns.module.css
@@ -0,0 +1,35 @@
+.campaignsSection {
+  display: grid;
+  gap: var(--Space-x3);
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
+}
+
+.intro {
+  display: grid;
+  gap: var(--Space-x15);
+  max-width: var(--max-width-text-block);
+}
+
+.campaigns {
+  display: grid;
+  gap: var(--Space-x7);
+}
+
+.heading {
+  color: var(--Text-Heading);
+}
+
+@media screen and (max-width: 767px) {
+  .cardList {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .campaignsSection {
+    gap: var(--Space-x5);
+  }
+  .carousel {
+    display: none;
+  }
+}
--- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx
@@ -0,0 +1,88 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { Carousel } from "@/components/Carousel"
+import { CarouselContent } from "@/components/Carousel/CarouselContent"
+import { CarouselDots } from "@/components/Carousel/CarouselDots"
+import { CarouselItem } from "@/components/Carousel/CarouselItem"
+import {
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/Carousel/CarouselNavigation"
+import ContentCard from "@/components/ContentCard"
+import CampaignHero from "@/components/ContentType/CampaignPage/Hero"
+import CampaignCardList from "@/components/ContentType/HotelPage/Campaigns/CampaignCardList"
+import { getIntl } from "@/i18n"
+
+import styles from "./campaigns.module.css"
+
+import type { Campaigns } from "@scandic-hotels/trpc/types/campaignPage"
+
+import { HotelHashValues } from "@/types/enums/hotelPage"
+
+interface HotelCampaignsProps {
+  heading?: string
+  preamble?: string
+  campaigns: Campaigns
+}
+
+export default async function HotelCampaigns({
+  heading,
+  preamble,
+  campaigns,
+}: HotelCampaignsProps) {
+  const intl = await getIntl()
+
+  const [topCampaign, ...campaignCards] = campaigns
+
+  return (
+    <section id={HotelHashValues.offers} className={styles.campaignsSection}>
+      <div className={styles.intro}>
+        <Typography variant="Title/md">
+          <h2 className={styles.heading}>
+            {heading || intl.formatMessage({ defaultMessage: "Offers" })}
+          </h2>
+        </Typography>
+        {preamble ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>{preamble}</p>
+          </Typography>
+        ) : null}
+      </div>
+      <div className={styles.campaigns}>
+        <CampaignHero
+          {...topCampaign.hero}
+          button={{
+            cta: intl.formatMessage({ defaultMessage: "Explore the offer" }),
+            url: topCampaign.url,
+          }}
+          pageType="hotelPage"
+        />
+        {campaignCards.length ? (
+          <div className={styles.campaignCards}>
+            <CampaignCardList
+              campaigns={campaignCards}
+              className={styles.cardList}
+            />
+            <Carousel className={styles.carousel}>
+              <CarouselContent>
+                {campaignCards.map(({ id, url, card_content }) => (
+                  <CarouselItem key={id}>
+                    <ContentCard
+                      heading={card_content.heading}
+                      image={card_content.image}
+                      bodyText={card_content.text || ""}
+                      link={{ href: url }}
+                    />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious className={styles.navigationButton} />
+              <CarouselNext className={styles.navigationButton} />
+              <CarouselDots />
+            </Carousel>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  )
+}
--- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/index.tsx
@@ -12,6 +12,7 @@ import {

 import AccordionSection from "@/components/Blocks/Accordion"
 import Breadcrumbs from "@/components/Breadcrumbs"
+import HotelCampaigns from "@/components/ContentType/HotelPage/Campaigns"
 import Alert from "@/components/TempDesignSystem/Alert"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import TrackingSDK from "@/components/TrackingSDK"
@@ -84,6 +85,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
    faq,
    content: { spaPage, activitiesCards },
    sectionHeadings,
+    campaignsBlock,
  } = hotelPageData
  const { hotel, restaurants, roomCategories, additionalData } = hotelData
  const {
@@ -120,12 +122,13 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
  const pageSections = getPageSectionsData(
    intl,
    {
-      hasWellness: healthFacilities.length > 0,
-      hasRestaurants: restaurants.length > 0,
-      hasMeetingRooms: !!(meetingRoomsData && meetingRoomsData.length > 0),
      hasActivities: activitiesCards.length > 0,
      hasFAQ: !!(faq && faq.accordions.length > 0),
+      hasMeetingRooms: !!(meetingRoomsData && meetingRoomsData.length > 0),
+      hasOffers: !!(campaignsBlock && campaignsBlock.campaigns.length > 0),
+      hasRestaurants: restaurants.length > 0,
      hasRooms: roomCategories.length > 0,
+      hasWellness: healthFacilities.length > 0,
    },
    sectionHeadings
  )
@@ -223,6 +226,14 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
        {faq && faq.accordions.length > 0 && (
          <AccordionSection accordion={faq.accordions} title={faq.title} />
        )}
+
+        {campaignsBlock ? (
+          <HotelCampaigns
+            heading={campaignsBlock.heading}
+            preamble={campaignsBlock.preamble}
+            campaigns={campaignsBlock.campaigns}
+          />
+        ) : null}
      </main>
      <aside className={styles.mapContainer}>
        <MapWithCardWrapper>
--- a/apps/scandic-web/components/ContentType/HotelPage/utils.ts
+++ b/apps/scandic-web/components/ContentType/HotelPage/utils.ts
@@ -100,22 +100,24 @@ export function translateWellnessType(type: string, intl: IntlShape) {
 export function getPageSectionsData(
  intl: IntlShape,
  dynamicSections: {
-    hasWellness: boolean
-    hasRestaurants: boolean
-    hasMeetingRooms: boolean
    hasActivities: boolean
    hasFAQ: boolean
+    hasMeetingRooms: boolean
+    hasOffers: boolean
+    hasRestaurants: boolean
    hasRooms: boolean
+    hasWellness: boolean
  },
  sectionHeadings?: HotelPageSectionHeadings | null
 ) {
  const {
-    hasWellness,
-    hasRestaurants,
-    hasMeetingRooms,
    hasActivities,
    hasFAQ,
+    hasMeetingRooms,
+    hasOffers,
+    hasRestaurants,
    hasRooms,
+    hasWellness,
  } = dynamicSections
  const sections: HotelPageSections = {
    overview: {
@@ -178,6 +180,16 @@ export function getPageSectionsData(
        }),
    }
  }
+  if (hasOffers) {
+    sections.offers = {
+      hash: HotelHashValues.offers,
+      heading:
+        sectionHeadings?.offers ||
+        intl.formatMessage({
+          defaultMessage: "Offers",
+        }),
+    }
+  }
  if (hasFAQ) {
    sections.faq = {
      hash: HotelHashValues.faq,
--- a/apps/scandic-web/types/components/hotelPage/sections.ts
+++ b/apps/scandic-web/types/components/hotelPage/sections.ts
@@ -23,5 +23,6 @@ export interface HotelPageSections {
  meetings?: HotelPageSection
  wellness?: HotelPageSection
  activities?: HotelPageSection
+  offers?: HotelPageSection
  faq?: HotelPageSection
 }
--- a/apps/scandic-web/types/enums/hotelPage.ts
+++ b/apps/scandic-web/types/enums/hotelPage.ts
@@ -5,5 +5,6 @@ export const HotelHashValues = {
  meetings: "meetings",
  wellness: "wellness",
  activities: "activities",
+  offers: "offers",
  faq: "faq",
 } as const
--- a/packages/trpc/lib/graphql/Query/CampaignPage/CampaignPagesByHotelUid.graphql
+++ b/packages/trpc/lib/graphql/Query/CampaignPage/CampaignPagesByHotelUid.graphql
@@ -0,0 +1,45 @@
+#import "../../Fragments/System.graphql"
+
+#import "../../Fragments/CampaignPage/Hero.graphql"
+
+query GetCampaignPagesByHotelUid($locale: String!, $hotelPageUid: String!) {
+  all_campaign_page(
+    where: {
+      OR: [
+        { included_hotels: { list_1: { hotel_page: { uid: $hotelPageUid } } } }
+        { included_hotels: { list_2: { hotel_page: { uid: $hotelPageUid } } } }
+      ]
+    }
+    locale: $locale
+  ) {
+    items {
+      heading
+      url
+      card_content {
+        heading
+        image
+        text
+      }
+      ...Hero_CampaignPage
+      system {
+        ...System
+      }
+    }
+  }
+}
+
+query GetCampaignPagesByHotelUidRefs($locale: String!, $hotelPageUid: String!) {
+  all_campaign_page(
+    where: {
+      OR: [
+        { included_hotels: { list_1: { hotel_page: { uid: $hotelPageUid } } } }
+        { included_hotels: { list_2: { hotel_page: { uid: $hotelPageUid } } } }
+      ]
+    }
+    locale: $locale
+  ) {
+    items {
+      ...CampaignPageRef
+    }
+  }
+}
--- a/packages/trpc/lib/graphql/Query/HotelPage/HotelPage.graphql
+++ b/packages/trpc/lib/graphql/Query/HotelPage/HotelPage.graphql
@@ -23,6 +23,21 @@ query GetHotelPage($locale: String!, $uid: String!) {
      offers
      faq
    }
+    campaigns {
+      heading
+      preamble
+      prioritized_campaignsConnection {
+        edges {
+          node {
+            ... on CampaignPage {
+              system {
+                uid
+              }
+            }
+          }
+        }
+      }
+    }
    faq {
      __typename
      title
--- a/packages/trpc/lib/routers/contentstack/campaignPage/input.ts
+++ b/packages/trpc/lib/routers/contentstack/campaignPage/input.ts
@@ -0,0 +1,5 @@
+import { z } from "zod"
+
+export const getCampaignPagesByHotelUidInput = z.object({
+  hotelPageUid: z.string(),
+})
--- a/packages/trpc/lib/routers/contentstack/campaignPage/output.ts
+++ b/packages/trpc/lib/routers/contentstack/campaignPage/output.ts
@@ -1,5 +1,7 @@
 import { z } from "zod"

+import { removeMultipleSlashes } from "@scandic-hotels/common/utils/url"
+
 import { CampaignPageEnum } from "../../../types/campaignPage"
 import { discriminatedUnionArray } from "../../../utils/discriminatedUnion"
 import {
@@ -20,6 +22,8 @@ import {
 import { systemSchema } from "../schemas/system"
 import { getCarouselCardsBlockWithBookingCodeLinks } from "./utils"

+import type { ImageVaultAsset } from "../../../types/imageVault"
+
 const campaignPageEssentials = z
  .object({
    __typename: z.literal(CampaignPageEnum.ContentStack.blocks.Essentials),
@@ -173,6 +177,56 @@ export const campaignPageSchema = z
    }
  })

+export const campaignPagesByHotelUidSchema = z
+  .object({
+    all_campaign_page: z.object({
+      items: z
+        .array(
+          z.object({
+            heading: z.string(),
+            url: z.string(),
+            card_content: z
+              .object({
+                image: tempImageVaultAssetSchema,
+                heading: z.string().nullish(),
+                text: z.string().nullish(),
+              })
+              .nullish(),
+            hero: heroSchema,
+            system: systemSchema,
+          })
+        )
+        .transform((data) => {
+          const mappedCampaigns = data.map((campaign) => {
+            const { card_content, hero, system, heading, url } = campaign
+            const hasImage = !!(card_content?.image || hero.image)
+            const cardContentImage = card_content?.image || hero.image
+            const heroImage = hero.image || card_content?.image
+
+            if (hasImage) {
+              return {
+                id: system.uid,
+                url: removeMultipleSlashes(`/${system.locale}/${url}`),
+                card_content: {
+                  ...card_content,
+                  heading: card_content?.heading || heading,
+                  image: (cardContentImage || heroImage) as ImageVaultAsset,
+                },
+                hero: {
+                  ...hero,
+                  image: (heroImage || cardContentImage) as ImageVaultAsset,
+                  heading,
+                },
+              }
+            }
+            return null
+          })
+          return mappedCampaigns.filter((item) => !!item)
+        }),
+    }),
+  })
+  .transform((data) => data.all_campaign_page.items)
+
 /** REFS */
 const campaignPageCarouselCardsRef = z
  .object({
@@ -203,3 +257,15 @@ export const campaignPageRefsSchema = z.object({
    system: systemSchema,
  }),
 })
+
+export const campaignPagesByHotelUidRefsSchema = z
+  .object({
+    all_campaign_page: z.object({
+      items: z.array(
+        z.object({
+          system: systemSchema,
+        })
+      ),
+    }),
+  })
+  .transform((data) => data.all_campaign_page.items.map((item) => item.system))
--- a/packages/trpc/lib/routers/contentstack/campaignPage/utils.ts
+++ b/packages/trpc/lib/routers/contentstack/campaignPage/utils.ts
@@ -1,12 +1,32 @@
+import { createCounter } from "@scandic-hotels/common/telemetry"
+
+import { notFound } from "../../../errors"
+import {
+  GetCampaignPagesByHotelUid,
+  GetCampaignPagesByHotelUidRefs,
+} from "../../../graphql/Query/CampaignPage/CampaignPagesByHotelUid.graphql"
+import { request } from "../../../graphql/request"
 import {
  CampaignPageEnum,
  type CampaignPageRefs,
 } from "../../../types/campaignPage"
-import { generateTag, generateTagsFromSystem } from "../../../utils/generateTag"
+import {
+  generateRefsResponseTag,
+  generateTag,
+  generateTagsFromSystem,
+} from "../../../utils/generateTag"
+import {
+  campaignPagesByHotelUidRefsSchema,
+  campaignPagesByHotelUidSchema,
+} from "./output"

 import type { Lang } from "@scandic-hotels/common/constants/language"

-import type { CarouselCardsBlock } from "../../../types/campaignPage"
+import type {
+  CarouselCardsBlock,
+  GetCampaignPagesByHotelUidData,
+  GetCampaignPagesByHotelUidRefsData,
+} from "../../../types/campaignPage"
 import type { System } from "../schemas/system"

 export function generatePageTags(
@@ -78,3 +98,94 @@ export function getCarouselCardsBlockWithBookingCodeLinks(
    },
  }
 }
+
+export async function getCampaignPagesByHotelPageUid(
+  hotelPageUid: string,
+  lang: Lang
+) {
+  const getCampaignPagesByHotelUidRefsCounter = createCounter(
+    "trpc.contentstack",
+    "campaignPage.byHotelUid.get.refs"
+  )
+  const metricsGetCampaignPagesByHotelUidRefs =
+    getCampaignPagesByHotelUidRefsCounter.init({
+      lang,
+      hotelPageUid,
+    })
+
+  metricsGetCampaignPagesByHotelUidRefs.start()
+
+  const refsResponse = await request<GetCampaignPagesByHotelUidRefsData>(
+    GetCampaignPagesByHotelUidRefs,
+    {
+      locale: lang,
+      hotelPageUid,
+    },
+    {
+      key: generateRefsResponseTag(lang, hotelPageUid, "hotel_page_campaigns"),
+      ttl: "max",
+    }
+  )
+
+  if (!refsResponse.data) {
+    const notFoundError = notFound(refsResponse)
+    metricsGetCampaignPagesByHotelUidRefs.noDataError()
+    throw notFoundError
+  }
+
+  const validatedRefsData = campaignPagesByHotelUidRefsSchema.safeParse(
+    refsResponse.data
+  )
+  if (!validatedRefsData.success) {
+    metricsGetCampaignPagesByHotelUidRefs.validationError(
+      validatedRefsData.error
+    )
+    return null
+  }
+
+  metricsGetCampaignPagesByHotelUidRefs.success()
+
+  const tags = generateTagsFromSystem(lang, validatedRefsData.data)
+
+  const getCampaignPagesByHotelUidCounter = createCounter(
+    "trpc.contentstack",
+    "campaignPage.byHotelUid.get"
+  )
+  const metricsGetCampaignPagesByHotelUid =
+    getCampaignPagesByHotelUidCounter.init({
+      lang,
+      hotelPageUid,
+    })
+
+  metricsGetCampaignPagesByHotelUid.start()
+
+  const response = await request<GetCampaignPagesByHotelUidData>(
+    GetCampaignPagesByHotelUid,
+    {
+      locale: lang,
+      hotelPageUid,
+    },
+    {
+      key: tags,
+      ttl: "max",
+    }
+  )
+
+  if (!response.data) {
+    metricsGetCampaignPagesByHotelUid.noDataError()
+    return null
+  }
+
+  const validatedResponse = campaignPagesByHotelUidSchema.safeParse(
+    response.data
+  )
+
+  if (!validatedResponse.success) {
+    metricsGetCampaignPagesByHotelUid.validationError(validatedResponse.error)
+    return null
+  }
+
+  metricsGetCampaignPagesByHotelUid.success()
+
+  return validatedResponse.data
+}
--- a/packages/trpc/lib/routers/contentstack/hotelPage/output.ts
+++ b/packages/trpc/lib/routers/contentstack/hotelPage/output.ts
@@ -70,6 +70,34 @@ export const hotelPageSchema = z.object({
      hotel_page_id: z.string(),
      title: z.string(),
      url: z.string(),
+      campaigns: z
+        .object({
+          heading: z.string(),
+          preamble: z.string(),
+          prioritized_campaignsConnection: z.object({
+            edges: z.array(
+              z.object({
+                node: z.object({
+                  system: z.object({
+                    uid: z.string(),
+                  }),
+                }),
+              })
+            ),
+          }),
+        })
+        .nullish()
+        .transform((data) => {
+          const prioritizedCampaigns =
+            data?.prioritized_campaignsConnection.edges.map(
+              (edge) => edge.node.system.uid
+            ) || []
+          return {
+            heading: data?.heading,
+            preamble: data?.preamble,
+            prioritizedCampaigns,
+          }
+        }),
      system: systemSchema.merge(
        z.object({
          created_at: z.string(),
--- a/packages/trpc/lib/routers/contentstack/hotelPage/query.ts
+++ b/packages/trpc/lib/routers/contentstack/hotelPage/query.ts
@@ -6,7 +6,9 @@ import { GetHotelPage } from "../../../graphql/Query/HotelPage/HotelPage.graphql
 import { request } from "../../../graphql/request"
 import { contentstackExtendedProcedureUID } from "../../../procedures"
 import { generateTag } from "../../../utils/generateTag"
+import { getCampaignPagesByHotelPageUid } from "../campaignPage/utils"
 import { hotelPageSchema } from "./output"
+import { getSortedCampaigns } from "./utils"

 import type { GetHotelPageData } from "../../../types/hotelPage"

@@ -22,7 +24,7 @@ export const hotelPageQueryRouter = router({

    metricsGetHotelPage.start()

-    const response = await request<GetHotelPageData>(
+    const hotelPageResponse = await request<GetHotelPageData>(
      GetHotelPage,
      {
        locale: lang,
@@ -33,13 +35,14 @@ export const hotelPageQueryRouter = router({
        ttl: "max",
      }
    )
-    if (!response.data) {
-      const notFoundError = notFound(response)
+
+    if (!hotelPageResponse.data) {
+      const notFoundError = notFound(hotelPageResponse)
      metricsGetHotelPage.noDataError()
      throw notFoundError
    }

-    const validatedHotelPage = hotelPageSchema.safeParse(response.data)
+    const validatedHotelPage = hotelPageSchema.safeParse(hotelPageResponse.data)

    if (!validatedHotelPage.success) {
      metricsGetHotelPage.validationError(validatedHotelPage.error)
@@ -48,6 +51,19 @@ export const hotelPageQueryRouter = router({

    metricsGetHotelPage.success()

-    return validatedHotelPage.data.hotel_page
+    const hotelCampaigns = await getCampaignPagesByHotelPageUid(uid, lang)
+
+    const hotelPage = validatedHotelPage.data.hotel_page
+    const { prioritizedCampaigns, ...campaignsBlockContent } =
+      hotelPage.campaigns
+    return {
+      ...hotelPage,
+      campaignsBlock: hotelCampaigns?.length
+        ? {
+            ...campaignsBlockContent,
+            campaigns: getSortedCampaigns(prioritizedCampaigns, hotelCampaigns),
+          }
+        : null,
+    }
  }),
 })
--- a/packages/trpc/lib/routers/contentstack/hotelPage/utils.ts
+++ b/packages/trpc/lib/routers/contentstack/hotelPage/utils.ts
@@ -7,6 +7,7 @@ import { batchedHotelPageUrlsSchema, hotelPageCountSchema } from "./output"

 import type { Lang } from "@scandic-hotels/common/constants/language"

+import type { Campaigns } from "../../../types/campaignPage"
 import type {
  GetHotelPageCountData,
  GetHotelPageUrlsData,
@@ -97,3 +98,16 @@ export async function getHotelPageUrls(lang: Lang) {

  return validatedResponse.data
 }
+
+export function getSortedCampaigns(
+  prioritizedCampaignUids: string[],
+  campaigns: Campaigns
+) {
+  const prioritizedSet = new Set(prioritizedCampaignUids)
+  const prioritized = prioritizedCampaignUids.flatMap((id) => {
+    const found = campaigns.find((c) => c.id === id)
+    return found ? [found] : []
+  })
+  const others = campaigns.filter((c) => !prioritizedSet.has(c.id))
+  return [...prioritized, ...others]
+}
--- a/packages/trpc/lib/types/campaignPage.ts
+++ b/packages/trpc/lib/types/campaignPage.ts
@@ -2,6 +2,8 @@ import type { z } from "zod"

 import type {
  campaignPageRefsSchema,
+  campaignPagesByHotelUidRefsSchema,
+  campaignPagesByHotelUidSchema,
  campaignPageSchema,
  heroSchema,
 } from "../routers/contentstack/campaignPage/output"
@@ -37,3 +39,11 @@ export interface CarouselCardsBlock
 export type EssentialsBlock = z.output<typeof essentialsSchema>["essentials"]

 export type Hero = z.output<typeof heroSchema>
+
+export interface GetCampaignPagesByHotelUidData
+  extends z.input<typeof campaignPagesByHotelUidSchema> {}
+export interface GetCampaignPagesByHotelUidRefsData
+  extends z.input<typeof campaignPagesByHotelUidRefsSchema> {}
+
+export interface Campaigns
+  extends z.output<typeof campaignPagesByHotelUidSchema> {}