feat(SW-2264): Added campaign overview page

Approved-by: Matilda Landström
2025-06-19 15:19:56 +00:00
parent 3c4ff0a792
commit 891108791c
42 changed files with 743 additions and 86 deletions
@@ -0,0 +1,15 @@
+"use client"
+
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import styles from "./campaignOverviewPage.module.css"
+
+export default function CampaignOverviewPageSkeleton() {
+  return (
+    <div className={styles.pageContainer}>
+      <h1>
+        <SkeletonShimmer width="50%" height="2rem" />
+      </h1>
+    </div>
+  )
+}
@@ -0,0 +1,52 @@
+.pageContainer {
+  display: grid;
+  gap: var(--Space-x5);
+  padding-bottom: var(--Space-x7);
+}
+
+.header {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding-bottom: var(--Space-x4);
+}
+
+.headerContent {
+  display: grid;
+  gap: var(--Space-x3);
+  width: var(--max-width-content);
+  margin: 0 auto;
+}
+
+.headerIntro {
+  display: grid;
+  max-width: var(--max-width-text-block);
+  gap: var(--Space-x3);
+}
+
+.heading {
+  color: var(--Text-Heading);
+  text-wrap: balance;
+  hyphens: auto;
+}
+
+.mainContent {
+  display: grid;
+  gap: var(--Space-x6);
+  width: var(--max-width-content);
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .pageContainer {
+    gap: var(--Space-x9);
+  }
+
+  .headerIntro {
+    gap: var(--Space-x3);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .mainContent {
+    gap: var(--Space-x9);
+  }
+}
@@ -0,0 +1,57 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getCampaignOverviewPage } from "@/lib/trpc/memoizedRequests"
+
+import LinkChips from "@/components/TempDesignSystem/LinkChips"
+
+import CampaignOverviewPageSkeleton from "./CampaignOverviewPageSkeleton"
+
+import styles from "./campaignOverviewPage.module.css"
+
+export default async function CampaignOverviewPage() {
+  const pageData = await getCampaignOverviewPage()
+
+  if (!pageData) {
+    notFound()
+  }
+
+  const { campaignOverviewPage } = pageData
+  const { header } = campaignOverviewPage
+
+  return (
+    <>
+      <Suspense fallback={<CampaignOverviewPageSkeleton />}>
+        <div className={styles.pageContainer}>
+          {header ? (
+            <header className={styles.header}>
+              <div className={styles.headerContent}>
+                <>
+                  <div className={styles.headerIntro}>
+                    <Typography variant="Title/lg">
+                      <h1 className={styles.heading}>{header.heading}</h1>
+                    </Typography>
+                    <Typography variant="Body/Lead text">
+                      <p>{header.preamble}</p>
+                    </Typography>
+                  </div>
+                  {header.navigation_links ? (
+                    <LinkChips chips={header.navigation_links} />
+                  ) : null}
+                </>
+              </div>
+            </header>
+          ) : null}
+
+          <main className={styles.mainContent}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {">>> MAIN CONTENT <<<"}
+          </main>
+        </div>
+      </Suspense>
+      {/* <TrackingSDK pageData={tracking} /> */}
+    </>
+  )
+}
@@ -1,14 +0,0 @@
-.linkChip {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-half);
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-  border-radius: var(--Corner-radius-sm);
-  background-color: var(--Base-Button-Inverted-Fill-Normal);
-  transition: background-color 0.3s;
-  text-decoration: none;
-}
-
-.linkChip:hover {
-  background-color: var(--Base-Button-Inverted-Fill-Hover-alt);
-}
@@ -1,4 +0,0 @@
-export interface LinkChipProps {
-  url: string
-  title: string
-}
@@ -1,20 +0,0 @@
-import Link from "next/link"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
-import styles from "./chip.module.css"
-
-import type { LinkChipProps } from "./chip"
-
-export default function LinkChip({ url, title }: LinkChipProps) {
-  return (
-    <Caption type="bold" color="burgundy" asChild>
-      <Link href={url} className={styles.linkChip}>
-        {title}
-        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
-      </Link>
-    </Caption>
-  )
-}
@@ -1,8 +1,15 @@
-import LinkChip from "./Chip"
+"use client"

-import styles from "./linkChips.module.css"
+import { ChipLink } from "@scandic-hotels/design-system/ChipLink"
+import { Chips } from "@scandic-hotels/design-system/Chips"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

-import type { LinkChipsProps } from "./linkChips"
+interface LinkChipsProps {
+  chips: {
+    url: string
+    title: string
+  }[]
+}

 export default function LinkChips({ chips }: LinkChipsProps) {
  if (!chips.length) {
@@ -10,12 +17,13 @@ export default function LinkChips({ chips }: LinkChipsProps) {
  }

  return (
-    <ul className={styles.linkChips}>
-      {chips.map(({ url, title }) => (
-        <li key={`link-chip-${title}`}>
-          <LinkChip url={url} title={title} />
-        </li>
+    <Chips>
+      {chips.map(({ title, url }) => (
+        <ChipLink key={`${title}-${url}`} href={url}>
+          {title}
+          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
+        </ChipLink>
      ))}
-    </ul>
+    </Chips>
  )
 }
@@ -1,8 +0,0 @@
-.linkChips {
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--Spacing-x1);
-}
@@ -1,5 +0,0 @@
-import type { LinkChipProps } from "./Chip/chip"
-
-export interface LinkChipsProps {
-  chips: LinkChipProps[]
-}