Merged in feat/LOY-361-add-promo-campaign-page-type (pull request #2826)

Feat/LOY-361 add promo campaign page type * feat(LOY-361): add Pomo Campaign page type * chore(SW-361): remove campaign page flag * fix(LOY-361): cleanup * fix(LOY-361): add promo code Approved-by: Erik Tiekstra Approved-by: Chuma Mcphoy (We Ahead)
2025-09-19 07:20:17 +00:00
parent c791fef2c6
commit 0e30a2d218
34 changed files with 613 additions and 19 deletions
@@ -0,0 +1,31 @@
+"use client"
+
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./promoCampaignPage.module.css"
+
+export default function PromoCampaignPageSkeleton() {
+  return (
+    <div className={styles.pageContainer}>
+      <SkeletonShimmer width="100%" height="478px" />
+
+      <div className={styles.intro}>
+        <div className={styles.headingWrapper}>
+          <Typography variant="Title/lg">
+            <SkeletonShimmer width="20ch" />
+          </Typography>
+          <Typography variant="Title/Subtitle/lg">
+            <SkeletonShimmer width="50ch" />
+          </Typography>
+        </div>
+      </div>
+      <div>
+        <Typography variant="Title/smLowCase">
+          <SkeletonShimmer width="30ch" />
+        </Typography>
+        <SkeletonShimmer width="100%" height="110px" />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,43 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
+
+import { getPromoCampaignPage } from "@/lib/trpc/memoizedRequests"
+
+import PromoCampaignPageSkeleton from "./PromoCampaignPageSkeleton"
+
+import styles from "./promoCampaignPage.module.css"
+
+export default async function PromoCampaignPage() {
+  const pageData = await getPromoCampaignPage()
+  if (!pageData) {
+    notFound()
+  }
+  //const isUserLoggedIn = await isLoggedInUser()
+  const { promo_campaign_page, tracking } = pageData
+  const { heading, subheading } = promo_campaign_page
+
+  return (
+    <>
+      <Suspense fallback={<PromoCampaignPageSkeleton />}>
+        <div className={styles.pageContainer}>
+          <div className={styles.intro}>
+            <div className={styles.headingWrapper}>
+              <Typography variant="Title/lg">
+                <h1 className={styles.heading}>{heading}</h1>
+              </Typography>
+              {subheading ? (
+                <Typography variant="Title/Subtitle/lg">
+                  <p>{subheading}</p>
+                </Typography>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </Suspense>
+      <TrackingSDK pageData={tracking} />
+    </>
+  )
+}
@@ -0,0 +1,29 @@
+.pageContainer {
+  display: grid;
+  gap: var(--Space-x6);
+  padding-bottom: var(--Space-x7);
+  width: var(--max-width-content);
+  margin: 0 auto;
+}
+
+.intro {
+  display: grid;
+  gap: var(--Space-x5);
+}
+
+.headingWrapper {
+  display: grid;
+  gap: var(--Space-x2);
+}
+
+.heading {
+  color: var(--Text-Heading);
+  text-wrap: balance;
+  hyphens: auto;
+}
+
+@media screen and (min-width: 1367px) {
+  .pageContainer {
+    gap: var(--Space-x9);
+  }
+}