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