feat(SW-2975): Added top campaign to campaign overview page

Approved-by: Matilda Landström
2025-06-24 10:22:07 +00:00
parent 438de66a1f
commit 11201e238d
13 changed files with 212 additions and 37 deletions
@@ -21,20 +21,24 @@ import type { HotelDataWithUrl } from "@/types/hotel"
 interface CampaignHotelListingClientProps {
  heading: string
  hotels: HotelDataWithUrl[]
+  visibleCountMobile?: 3 | 6
+  visibleCountDesktop?: 3 | 6
 }

 export default function CampaignHotelListingClient({
  heading,
  hotels,
+  visibleCountMobile = 3,
+  visibleCountDesktop = 6,
 }: CampaignHotelListingClientProps) {
  const intl = useIntl()
  const isMobile = useMediaQuery("(max-width: 767px)")
  const scrollRef = useRef<HTMLElement>(null)

-  const initialCount = isMobile ? 3 : 6 // Initial number of hotels to show
-  const thresholdCount = isMobile ? 6 : 9 // This is the threshold at which we start showing the "Show More" button
-  const showAllThreshold = isMobile ? 9 : 18 // This is the threshold at which we show the "Show All" button
-  const incrementCount = isMobile ? 3 : 6 // Number of hotels to increment when the button is clicked
+  const initialCount = isMobile ? visibleCountMobile : visibleCountDesktop // Initial number of hotels to show
+  const thresholdCount = initialCount + 3 // This is the threshold at which we start showing the "Show More" button
+  const showAllThreshold = initialCount * 3 // This is the threshold at which we show the "Show All" button
+  const incrementCount = initialCount // Number of hotels to increment when the button is clicked

  const [visibleCount, setVisibleCount] = useState(() =>
    // Set initial visible count based on the number of hotels and the threshold
@@ -86,8 +90,8 @@ export default function CampaignHotelListingClient({
  return (
    <section className={styles.hotelListingSection} ref={scrollRef}>
      <header className={styles.header}>
-        <Typography variant="Title/md">
-          <h2 className={styles.heading}>{heading}</h2>
+        <Typography variant="Title/Subtitle/lg">
+          <h3>{heading}</h3>
        </Typography>
      </header>
      <ul className={styles.list}>
@@ -8,10 +8,6 @@
  scroll-margin-top: var(--scroll-margin-top);
 }

-.heading {
-  color: var(--Text-Heading);
-}
-
 .list {
  list-style: none;
  display: grid;
@@ -27,7 +23,6 @@
    --scroll-margin-top: calc(
      var(--booking-widget-tablet-height) + var(--Spacing-x2)
    );
-    gap: var(--Space-x5);
  }
  .list {
    row-gap: var(--Space-x5);
@@ -5,11 +5,15 @@ import CampaignHotelListingClient from "./Client"
 interface CampaignHotelListingProps {
  heading: string
  hotelIds: string[]
+  visibleCountMobile?: 3 | 6
+  visibleCountDesktop?: 3 | 6
 }

 export default async function CampaignHotelListing({
  heading,
  hotelIds,
+  visibleCountMobile,
+  visibleCountDesktop,
 }: CampaignHotelListingProps) {
  const hotels = await getHotelsByCSFilter({ hotelsToInclude: hotelIds })

@@ -17,5 +21,12 @@ export default async function CampaignHotelListing({
    return null
  }

-  return <CampaignHotelListingClient heading={heading} hotels={hotels} />
+  return (
+    <CampaignHotelListingClient
+      heading={heading}
+      hotels={hotels}
+      visibleCountMobile={visibleCountMobile}
+      visibleCountDesktop={visibleCountDesktop}
+    />
+  )
 }
@@ -0,0 +1,43 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import CampaignHotelListing from "@/components/Blocks/CampaignHotelListing"
+import CampaignHero from "@/components/ContentType/CampaignPage/Hero"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./topCampaign.module.css"
+
+import { type CampaignOverviewPageData } from "@/types/trpc/routers/contentstack/campaignOverviewPage"
+
+interface TopCampaignProps {
+  topCampaign: CampaignOverviewPageData["topCampaign"]
+}
+
+export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
+  const lang = await getLang()
+  const intl = await getIntl()
+  const buttonData = {
+    cta: intl.formatMessage({ defaultMessage: "Explore the offer" }),
+    url: `/${lang}${topCampaign.url}`,
+  }
+
+  return (
+    <section className={styles.topCampaign}>
+      <Typography variant="Title/md">
+        <h2 className={styles.heading}>{topCampaign.heading}</h2>
+      </Typography>
+      <CampaignHero {...topCampaign.hero} button={buttonData} />
+      <CampaignHotelListing
+        heading={
+          topCampaign.hotel_listing.heading ||
+          intl.formatMessage({
+            defaultMessage: "Hotels included in this offer",
+          })
+        }
+        hotelIds={topCampaign.hotel_listing.hotelIds}
+        visibleCountMobile={3}
+        visibleCountDesktop={3}
+      />
+    </section>
+  )
+}
@@ -0,0 +1,8 @@
+.topCampaign {
+  display: grid;
+  gap: var(--Space-x3);
+}
+
+.heading {
+  color: var(--Text-Heading);
+}
@@ -5,6 +5,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"

 import { getCampaignOverviewPage } from "@/lib/trpc/memoizedRequests"

+import TopCampaign from "@/components/ContentType/CampaignOverviewPage/TopCampaign"
 import LinkChips from "@/components/TempDesignSystem/LinkChips"

 import CampaignOverviewPageSkeleton from "./CampaignOverviewPageSkeleton"
@@ -19,7 +20,7 @@ export default async function CampaignOverviewPage() {
  }

  const { campaignOverviewPage } = pageData
-  const { header } = campaignOverviewPage
+  const { header, topCampaign } = campaignOverviewPage

  return (
    <>
@@ -46,8 +47,7 @@ export default async function CampaignOverviewPage() {
          ) : null}

          <main className={styles.mainContent}>
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {">>> MAIN CONTENT <<<"}
+            <TopCampaign topCampaign={topCampaign} />
          </main>
        </div>
      </Suspense>
@@ -10,7 +10,7 @@ import { variants } from "./variants"

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

-import type { HeroProps } from "./types"
+import type { HeroProps } from "@/components/ContentType/CampaignPage/Hero/types"

 export default async function CampaignHero({
  image,
@@ -82,11 +82,11 @@ export default async function CampaignHero({
            ) : null}
          </span>
        ) : null}
-        {button.link ? (
+        {button ? (
          <ButtonLink
            variant="Secondary"
            color={theme === "Peach" ? "Primary" : "Inverted"}
-            href={button.link.url}
+            href={button.url}
            typography="Body/Paragraph/mdBold"
            size="Medium"
          >