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}>
-      <Typography variant="Title/md">
+      {heading ? (
-        <h2 className={styles.heading}>{topCampaign.heading}</h2>
+        <Typography variant="Title/md">
-      </Typography>
+          <h2 className={styles.heading}>{heading}</h2>
-      <CampaignHero {...topCampaign.hero} button={buttonData} />
+        </Typography>
+      ) : 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,10 +15,13 @@ query GetCampaignOverviewPage($locale: String!, $uid: String!) {
       preamble
       ...NavigationLinks_CampaignOverviewPage
     }
-    top_campaignConnection {
+    top_campaign_block {
-      edges {
+      heading
-        node {
+      campaignConnection {
-          ...TopCampaign
+        edges {
+          node {
+            ...TopCampaign
+          }
         }
       }
     }
@@ -44,10 +47,12 @@ query GetCampaignOverviewPageRefs($locale: String!, $uid: String!) {
     header {
       ...NavigationLinksRef_CampaignOverviewPage
     }
-    top_campaignConnection {
+    top_campaign_block {
-      edges {
+      campaignConnection {
-        node {
+        edges {
-          ...TopCampaignRef
+          node {
+            ...TopCampaignRef
+          }
         }
       }
     }

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,12 +105,15 @@ export const campaignOverviewPageSchema = z.object({
         preamble: z.string(),
         navigation_links: navigationLinksSchema,
       }),
-      top_campaignConnection: z.object({
+      top_campaign_block: z.object({
-        edges: z.array(
+        heading: z.string().nullish(),
-          z.object({
+        campaignConnection: z.object({
-            node: topCampaignSchema,
+          edges: z.array(
-          })
+            z.object({
-        ),
+              node: topCampaignSchema,
+            })
+          ),
+        }),
       }),
       blocks: discriminatedUnionArray(blocksSchema.options),
       system: systemSchema.merge(
@@ -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,14 +170,16 @@ 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({
-      edges: z.array(
+      campaignConnection: z.object({
-        z.object({
+        edges: z.array(
-          node: z.object({
+          z.object({
-            system: systemSchema,
+            node: z.object({
-          }),
+              system: systemSchema,
-        })
+            }),
-      ),
+          })
+        ),
+      }),
     }),
     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(
-      connections.push(node.system)
+      ({ node }) => {
-    })
+        connections.push(node.system)
+      }
+    )
   }
   if (campaign_overview_page.blocks) {
     campaign_overview_page.blocks.forEach((block) => {