feat(SW-3354): Added possibility to add heading to top campaign on campaign overview page

Approved-by: Matilda Landström

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

@@ -16,25 +16,28 @@ interface TopCampaignProps {
 export default async function TopCampaign({ topCampaign }: TopCampaignProps) {
   const lang = await getLang()
   const intl = await getIntl()
+  const { campaign, heading } = topCampaign
   const buttonData = {
     cta: intl.formatMessage({ defaultMessage: "Explore the offer" }),
-    url: `/${lang}${topCampaign.url}`,
+    url: `/${lang}${campaign.url}`,
   }
 
   return (
     <section className={styles.topCampaign}>
+      {heading ? (
         <Typography variant="Title/md">
-        <h2 className={styles.heading}>{topCampaign.heading}</h2>
+          <h2 className={styles.heading}>{heading}</h2>
         </Typography>
-      <CampaignHero {...topCampaign.hero} button={buttonData} />
+      ) : null}
+      <CampaignHero {...campaign.hero} button={buttonData} />
       <CampaignHotelListing
         heading={
-          topCampaign.hotel_listing.heading ||
+          campaign.hotel_listing.heading ||
           intl.formatMessage({
             defaultMessage: "Hotels included in this offer",
           })
         }
-        hotelIds={topCampaign.hotel_listing.hotelIds}
+        hotelIds={campaign.hotel_listing.hotelIds}
         visibleCountMobile={3}
         visibleCountDesktop={3}
       />

packages/trpc/lib/graphql/Fragments/CampaignOverviewPage/TopCampaign.graphql

@@ -5,7 +5,6 @@
 #import "../CampaignPage/Hero.graphql"
 
 fragment TopCampaign on CampaignPage {
-  heading
   included_hotels {
     ...CampaignPageIncludedHotels
   }

packages/trpc/lib/graphql/Query/CampaignOverviewPage/CampaignOverviewPage.graphql

@@ -15,13 +15,16 @@ query GetCampaignOverviewPage($locale: String!, $uid: String!) {
       preamble
       ...NavigationLinks_CampaignOverviewPage
     }
-    top_campaignConnection {
+    top_campaign_block {
+      heading
+      campaignConnection {
         edges {
           node {
             ...TopCampaign
           }
         }
       }
+    }
     blocks {
       __typename
       ...AllCampaigns
@@ -44,13 +47,15 @@ query GetCampaignOverviewPageRefs($locale: String!, $uid: String!) {
     header {
       ...NavigationLinksRef_CampaignOverviewPage
     }
-    top_campaignConnection {
+    top_campaign_block {
+      campaignConnection {
         edges {
           node {
             ...TopCampaignRef
           }
         }
       }
+    }
     blocks {
       __typename
       ...CarouselCards_CampaignOverviewPageRefs

packages/trpc/lib/routers/contentstack/campaignOverviewPage/output.ts

@@ -45,7 +45,6 @@ export const campaignPageBlocksSchema = z.discriminatedUnion("__typename", [
 
 const topCampaignSchema = z
   .object({
-    heading: z.string(),
     hero: heroSchema,
     included_hotels: includedHotelsSchema,
     blocks: discriminatedUnionArray(campaignPageBlocksSchema.options),
@@ -106,13 +105,16 @@ export const campaignOverviewPageSchema = z.object({
         preamble: z.string(),
         navigation_links: navigationLinksSchema,
       }),
-      top_campaignConnection: z.object({
+      top_campaign_block: z.object({
+        heading: z.string().nullish(),
+        campaignConnection: z.object({
           edges: z.array(
             z.object({
               node: topCampaignSchema,
             })
           ),
         }),
+      }),
       blocks: discriminatedUnionArray(blocksSchema.options),
       system: systemSchema.merge(
         z.object({
@@ -122,10 +124,15 @@ export const campaignOverviewPageSchema = z.object({
       ),
     })
     .transform((data) => {
-      const { top_campaignConnection, ...rest } = data
+      const { top_campaign_block, ...rest } = data
       return {
         ...rest,
-        topCampaign: top_campaignConnection.edges.map(({ node }) => node)[0],
+        topCampaign: {
+          heading: top_campaign_block.heading,
+          campaign: top_campaign_block.campaignConnection.edges.map(
+            ({ node }) => node
+          )[0],
+        },
       }
     }),
   trackingProps: z.object({
@@ -163,7 +170,8 @@ const blockRefsSchema = z.discriminatedUnion("__typename", [
 export const campaignOverviewPageRefsSchema = z.object({
   campaign_overview_page: z.object({
     header: campaignOverviewPageHeaderRefs,
-    top_campaignConnection: z.object({
+    top_campaign_block: z.object({
+      campaignConnection: z.object({
         edges: z.array(
           z.object({
             node: z.object({
@@ -172,6 +180,7 @@ export const campaignOverviewPageRefsSchema = z.object({
           })
         ),
       }),
+    }),
     blocks: discriminatedUnionArray(blockRefsSchema.options).nullable(),
     system: systemSchema,
   }),

packages/trpc/lib/routers/contentstack/campaignOverviewPage/utils.ts

@@ -29,10 +29,12 @@ export function getConnections({
       }
     })
   }
-  if (campaign_overview_page.top_campaignConnection) {
+  if (campaign_overview_page.top_campaign_block.campaignConnection) {
-    campaign_overview_page.top_campaignConnection.edges.forEach(({ node }) => {
+    campaign_overview_page.top_campaign_block.campaignConnection.edges.forEach(
+      ({ node }) => {
         connections.push(node.system)
-    })
+      }
+    )
   }
   if (campaign_overview_page.blocks) {
     campaign_overview_page.blocks.forEach((block) => {