Merged in fix/LOY-365-promo-campaign-layout (pull request #2879)

fix(LOY-365): cleanup promo campaign page layout

* fix(LOY-365): cleanup promo camppaign page layout

* fix(LOY-365): proper gap

* fix(LOY-365): expired campaign gap


Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/ExpiredPromoCampaign.module.css

@@ -8,14 +8,22 @@
   background: var(--Surface-Secondary-Default);
 }
 
-.content {
+.mainContent,
+.info {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--Space-x4);
   text-align: center;
 }
 
+.mainContent {
+  gap: var(--Space-x3);
+}
+
+.info {
+  gap: var(--Space-x1);
+}
+
 .title,
 .description {
   color: var(--Text-Heading);

apps/scandic-web/components/ContentType/PromoCampaignPage/ExpiredPromoCampaign/index.tsx

@@ -16,7 +16,8 @@ export default async function ExpiredPromoCampaign() {
     <div className={styles.container}>
       <MagicWandIcon width={250} height={203} />
 
-      <div className={styles.content}>
+      <div className={styles.mainContent}>
+        <div className={styles.info}>
           <Typography variant="Title/Subtitle/md" className={styles.title}>
             <h3>
               {intl.formatMessage({
@@ -44,5 +45,6 @@ export default async function ExpiredPromoCampaign() {
           })}
         </ButtonLink>
       </div>
+    </div>
   )
 }

apps/scandic-web/components/ContentType/PromoCampaignPage/index.tsx

@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
@@ -13,6 +14,11 @@ import PromoCampaignPageSkeleton from "./PromoCampaignPageSkeleton"
 
 import styles from "./promoCampaignPage.module.css"
 
+import type {
+  PromoCampaignPageData,
+  PromoHero,
+} from "@scandic-hotels/trpc/types/promoCampaignPage"
+
 export default async function PromoCampaignPage() {
   const pageData = await getPromoCampaignPage()
   if (!pageData) {
@@ -30,21 +36,45 @@ export default async function PromoCampaignPage() {
   return (
     <>
       <Suspense fallback={<PromoCampaignPageSkeleton />}>
-        <div className={styles.pageContainer}>
         {isCampaignExpired ? (
-            <ExpiredPromoCampaign />
+          <ExpiredCampaignLayout heading={heading} />
         ) : (
-            <PromoCampaignHero
+          <ActiveCampaignLayout
+            heading={heading}
+            subheading={subheading}
             promoHero={promo_hero}
             eligibleLevels={eligibleLevels}
           />
         )}
+      </Suspense>
+      <TrackingSDK pageData={tracking} />
+    </>
+  )
+}
+
+function ActiveCampaignLayout({
+  heading,
+  subheading,
+  promoHero,
+  eligibleLevels,
+}: {
+  heading: PromoCampaignPageData["heading"]
+  subheading: PromoCampaignPageData["subheading"]
+  promoHero: PromoHero
+  eligibleLevels: PromoCampaignPageData["eligibleLevels"]
+}) {
+  return (
+    <div className={cx(styles.pageContainer, styles.active)}>
+      <PromoCampaignHero
+        promoHero={promoHero}
+        eligibleLevels={eligibleLevels}
+      />
       <div className={styles.intro}>
         <div className={styles.headingWrapper}>
           <Typography variant="Title/lg">
             <h1 className={styles.heading}>{heading}</h1>
           </Typography>
-              {subheading && !isCampaignExpired ? (
+          {subheading ? (
             <Typography variant="Title/Subtitle/lg">
               <p>{subheading}</p>
             </Typography>
@@ -52,8 +82,24 @@ export default async function PromoCampaignPage() {
         </div>
       </div>
     </div>
-      </Suspense>
+  )
-      <TrackingSDK pageData={tracking} />
+}
-    </>
+
+function ExpiredCampaignLayout({
+  heading,
+}: {
+  heading: PromoCampaignPageData["heading"]
+}) {
+  return (
+    <div className={cx(styles.pageContainer, styles.expired)}>
+      <div className={styles.intro}>
+        <div className={styles.headingWrapper}>
+          <Typography variant="Title/lg">
+            <h1 className={styles.heading}>{heading}</h1>
+          </Typography>
+        </div>
+      </div>
+      <ExpiredPromoCampaign />
+    </div>
   )
 }

apps/scandic-web/components/ContentType/PromoCampaignPage/promoCampaignPage.module.css

@@ -1,11 +1,18 @@
 .pageContainer {
   display: grid;
-  gap: var(--Space-x6);
   padding-bottom: var(--Space-x7);
   width: var(--max-width-content);
   margin: 0 auto;
 }
 
+.pageContainer.active {
+  gap: var(--Space-x7);
+}
+
+.pageContainer.expired {
+  gap: var(--Space-x3);
+}
+
 .intro {
   display: grid;
   gap: var(--Space-x5);
@@ -23,7 +30,7 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .pageContainer {
+  .pageContainer.active {
     gap: var(--Space-x9);
   }
 }