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,33 +16,35 @@ export default async function ExpiredPromoCampaign() {
     <div className={styles.container}>
       <MagicWandIcon width={250} height={203} />
 
-      <div className={styles.content}>
-        <Typography variant="Title/Subtitle/md" className={styles.title}>
-          <h3>
-            {intl.formatMessage({
-              defaultMessage: "This promotion has expired",
-            })}
-          </h3>
-        </Typography>
+      <div className={styles.mainContent}>
+        <div className={styles.info}>
+          <Typography variant="Title/Subtitle/md" className={styles.title}>
+            <h3>
+              {intl.formatMessage({
+                defaultMessage: "This promotion has expired",
+              })}
+            </h3>
+          </Typography>
 
-        <Typography
-          variant="Body/Paragraph/mdRegular"
-          className={styles.description}
-        >
-          <p>
-            {intl.formatMessage({
-              defaultMessage:
-                "Don't worry, we will conjure up new exciting offers and campaigns in the future. Stay tuned!",
-            })}
-          </p>
-        </Typography>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.description}
+          >
+            <p>
+              {intl.formatMessage({
+                defaultMessage:
+                  "Don't worry, we will conjure up new exciting offers and campaigns in the future. Stay tuned!",
+              })}
+            </p>
+          </Typography>
+        </div>
+
+        <ButtonLink href={offers[lang]} variant="Tertiary" size="Large">
+          {intl.formatMessage({
+            defaultMessage: "See all offers",
+          })}
+        </ButtonLink>
       </div>
-
-      <ButtonLink href={offers[lang]} variant="Tertiary" size="Large">
-        {intl.formatMessage({
-          defaultMessage: "See all offers",
-        })}
-      </ButtonLink>
     </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,30 +36,70 @@ export default async function PromoCampaignPage() {
   return (
     <>
       <Suspense fallback={<PromoCampaignPageSkeleton />}>
-        <div className={styles.pageContainer}>
-          {isCampaignExpired ? (
-            <ExpiredPromoCampaign />
-          ) : (
-            <PromoCampaignHero
-              promoHero={promo_hero}
-              eligibleLevels={eligibleLevels}
-            />
-          )}
-          <div className={styles.intro}>
-            <div className={styles.headingWrapper}>
-              <Typography variant="Title/lg">
-                <h1 className={styles.heading}>{heading}</h1>
-              </Typography>
-              {subheading && !isCampaignExpired ? (
-                <Typography variant="Title/Subtitle/lg">
-                  <p>{subheading}</p>
-                </Typography>
-              ) : null}
-            </div>
-          </div>
-        </div>
+        {isCampaignExpired ? (
+          <ExpiredCampaignLayout heading={heading} />
+        ) : (
+          <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 ? (
+            <Typography variant="Title/Subtitle/lg">
+              <p>{subheading}</p>
+            </Typography>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+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);
   }
 }