Merged in feat/LOY-419-highlight-promo-campaigns (pull request #3308)

feat(LOY-419): add promo campaigns to Campaign Overview Page

* feat(LOY-419): add promo campaigns as top campaign and all campaigns

* refactor(LOY-419)


Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/index.tsx

@@ -1,4 +1,5 @@
 import { Typography } from "@scandic-hotels/design-system/Typography"
+import { ContentEnum } from "@scandic-hotels/trpc/types/content"
 
 import CampaignHotelListing from "@/components/Blocks/CampaignHotelListing"
 import CampaignHero from "@/components/ContentType/CampaignPage/Hero"
@@ -13,10 +14,12 @@ interface TopCampaignProps {
   topCampaign: CampaignOverviewPageData["topCampaign"]
 }
 
-export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
+export async function TopCampaign({ topCampaign }: TopCampaignProps) {
   const lang = await getLang()
   const intl = await getIntl()
+
   const { campaign, heading } = topCampaign
+
   const buttonData = {
     cta: intl.formatMessage({
       id: "campaign.exploreTheOffer",
@@ -25,6 +28,41 @@ export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
     url: `/${lang}${campaign.url}`,
   }
 
+  function CampaignContent() {
+    switch (campaign.typename) {
+      case ContentEnum.blocks.CampaignPage:
+        return (
+          <>
+            <CampaignHero {...campaign.hero} button={buttonData} />
+            <CampaignHotelListing
+              heading={
+                campaign.hotel_listing.heading ||
+                intl.formatMessage({
+                  id: "campaignPage.hotelsIncludedInOffer",
+                  defaultMessage: "Hotels included in this offer",
+                })
+              }
+              hotelIds={campaign.hotel_listing.hotelIds}
+              visibleCountMobile={3}
+              visibleCountDesktop={3}
+            />
+          </>
+        )
+      case ContentEnum.blocks.PromoCampaignPage:
+        if (!campaign.hero) return null
+        return (
+          <CampaignHero
+            {...campaign.hero}
+            button={buttonData}
+            rate_text={null}
+            campaign_text={null}
+          />
+        )
+      default:
+        return null
+    }
+  }
+
   return (
     <section className={styles.topCampaign}>
       {heading ? (
@@ -32,19 +70,7 @@ export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
           <h2 className={styles.heading}>{heading}</h2>
         </Typography>
       ) : null}
-      <CampaignHero {...campaign.hero} button={buttonData} />
-      <CampaignHotelListing
-        heading={
-          campaign.hotel_listing.heading ||
-          intl.formatMessage({
-            id: "campaignPage.hotelsIncludedInOffer",
-            defaultMessage: "Hotels included in this offer",
-          })
-        }
-        hotelIds={campaign.hotel_listing.hotelIds}
-        visibleCountMobile={3}
-        visibleCountDesktop={3}
-      />
+      <CampaignContent />
     </section>
   )
 }

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

@@ -6,7 +6,7 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
 import { getCampaignOverviewPage } from "@/lib/trpc/memoizedRequests"
 
-import TopCampaign from "@/components/ContentType/CampaignOverviewPage/TopCampaign"
+import { TopCampaign } from "@/components/ContentType/CampaignOverviewPage/TopCampaign"
 import LinkChips from "@/components/TempDesignSystem/LinkChips"
 
 import Blocks from "./Blocks"
@@ -23,7 +23,6 @@ export default async function CampaignOverviewPage() {
 
   const { campaign_overview_page, tracking } = pageData
   const { header, topCampaign, blocks } = campaign_overview_page
-
   return (
     <>
       <Suspense fallback={<CampaignOverviewPageSkeleton />}>

apps/scandic-web/components/ContentType/CampaignPage/Hero/variants.ts

@@ -10,7 +10,7 @@ const config = {
     },
   },
   defaultVariants: {
-    theme: "Peach",
+    theme: "Burgundy",
   },
 } as const