Merged in feat/LOY-366-Promo-Campaign-Expiring-Flow (pull request #2842)

Feat(LOY-366): Promo Campaign Expiring Flow

* feat(LOY-366): expired promo campaign WIP

* fix(LOY-366): MagicWand icon transparent bg

* fix(LOY-366): css cleanup

* fix(LOY-366): Add link to all offers

* fix(LOY-366): semantic var name


Approved-by: Erik Tiekstra

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

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  padding: var(--Space-x7) var(--Space-x1);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Space-x6);
+  border-radius: var(--Corner-radius-lg);
+  background: var(--Surface-Secondary-Default);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Space-x4);
+  text-align: center;
+}
+
+.title,
+.description {
+  color: var(--Text-Heading);
+}

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

@@ -0,0 +1,48 @@
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { offers } from "@/constants/webHrefs"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./ExpiredPromoCampaign.module.css"
+
+export default async function ExpiredPromoCampaign() {
+  const intl = await getIntl()
+  const lang = await getLang()
+  return (
+    <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>
+
+        <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>
+  )
+}

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

@@ -1,11 +1,13 @@
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
+import { dt } from "@scandic-hotels/common/dt"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
 import { getPromoCampaignPage } from "@/lib/trpc/memoizedRequests"
 
+import ExpiredPromoCampaign from "./ExpiredPromoCampaign"
 import PromoCampaignHero from "./Hero"
 import PromoCampaignPageSkeleton from "./PromoCampaignPageSkeleton"
 
@@ -18,7 +20,11 @@ export default async function PromoCampaignPage() {
   }
   //const isUserLoggedIn = await isLoggedInUser()
   const { promo_campaign_page, tracking } = pageData
-  const { heading, subheading, promo_hero } = promo_campaign_page
+  const { heading, subheading, enddate, promo_hero } = promo_campaign_page
+
+  const isCampaignExpired = enddate
+    ? dt().isAfter(dt(enddate).endOf("day"))
+    : false
 
   return (
     <>
@@ -30,13 +36,14 @@ export default async function PromoCampaignPage() {
               <Typography variant="Title/lg">
                 <h1 className={styles.heading}>{heading}</h1>
               </Typography>
-              {subheading ? (
+              {subheading && !isCampaignExpired ? (
                 <Typography variant="Title/Subtitle/lg">
                   <p>{subheading}</p>
                 </Typography>
               ) : null}
             </div>
           </div>
+          {isCampaignExpired ? <ExpiredPromoCampaign /> : null}
         </div>
       </Suspense>
       <TrackingSDK pageData={tracking} />

apps/scandic-web/constants/webHrefs.ts

@@ -37,3 +37,12 @@ export const spendPoints: LangRoute = {
   no: `/${Lang.no}/scandic-friends/bruk-poeng`,
   sv: `/${Lang.sv}/scandic-friends/anvand-poang`,
 }
+
+export const offers: LangRoute = {
+  da: `/${Lang.da}/tilbud`,
+  de: `/${Lang.de}/angebote`,
+  en: `/${Lang.en}/offers`,
+  fi: `/${Lang.fi}/tarjoukset`,
+  no: `/${Lang.no}/hotelltilbud`,
+  sv: `/${Lang.sv}/erbjudanden`,
+}