feat(SW-2283): Added carousel cards block to campaign overview page

Approved-by: Christian Andolf
Approved-by: Matilda Landström

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

@@ -0,0 +1,21 @@
+import { BlocksEnums } from "@scandic-hotels/trpc/types/blocks"
+
+import CarouselCards from "@/components/Blocks/CarouselCards"
+
+import type { BlocksProps } from "@/types/components/blocks"
+
+export default function Blocks({ blocks }: BlocksProps) {
+  return blocks.map(async (block) => {
+    switch (block.typename) {
+      case BlocksEnums.block.CarouselCards:
+        return (
+          <CarouselCards
+            carousel_cards={block.carousel_cards}
+            key={block.carousel_cards.heading}
+          />
+        )
+      default:
+        return null
+    }
+  })
+}

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

@@ -8,6 +8,7 @@ import { getCampaignOverviewPage } from "@/lib/trpc/memoizedRequests"
 import TopCampaign from "@/components/ContentType/CampaignOverviewPage/TopCampaign"
 import LinkChips from "@/components/TempDesignSystem/LinkChips"
 
+import Blocks from "./Blocks"
 import CampaignOverviewPageSkeleton from "./CampaignOverviewPageSkeleton"
 
 import styles from "./campaignOverviewPage.module.css"
@@ -19,8 +20,7 @@ export default async function CampaignOverviewPage() {
     notFound()
   }
 
-  const { campaignOverviewPage } = pageData
+  const { header, topCampaign, blocks } = pageData.campaignOverviewPage
-  const { header, topCampaign } = campaignOverviewPage
 
   return (
     <>
@@ -48,6 +48,7 @@ export default async function CampaignOverviewPage() {
 
           <main className={styles.mainContent}>
             <TopCampaign topCampaign={topCampaign} />
+            {blocks.length ? <Blocks blocks={blocks} /> : null}
           </main>
         </div>
       </Suspense>

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

@@ -53,7 +53,7 @@ export default async function CampaignPage() {
               </div>
             </Typography>
           </div>
-          {blocks ? <Blocks blocks={blocks} /> : null}
+          {blocks.length ? <Blocks blocks={blocks} /> : null}
         </div>
       </Suspense>
       {/* <TrackingSDK pageData={tracking} /> */}

apps/scandic-web/types/components/blocks/index.ts

@@ -1,5 +1,6 @@
 import type { Block as StartPageBlock } from "@scandic-hotels/trpc/routers/contentstack/startPage/query"
 import type { Block as AccountPageBlock } from "@scandic-hotels/trpc/types/accountPage"
+import type { Block as CampaignOverviewPageBlock } from "@scandic-hotels/trpc/types/campaignOverviewPage"
 import type { Block as CampaignPageBlock } from "@scandic-hotels/trpc/types/campaignPage"
 import type { Block as CollectionPageBlock } from "@scandic-hotels/trpc/types/collectionPage"
 import type { Block as ContentPageBlock } from "@scandic-hotels/trpc/types/contentPage"
@@ -11,6 +12,7 @@ import type { Block as LoyaltyPageBlock } from "@scandic-hotels/trpc/types/loyal
 export type Blocks =
   | AccountPageBlock
   | CampaignPageBlock
+  | CampaignOverviewPageBlock
   | CollectionPageBlock
   | ContentPageBlock
   | DestinationCityPageBlock

packages/trpc/lib/graphql/Fragments/Blocks/CarouselCards.graphql

@@ -129,3 +129,35 @@ fragment CarouselCards_CampaignPageRefs on CampaignPageBlocksCarouselCards {
     }
   }
 }
+
+fragment CarouselCards_CampaignOverviewPage on CampaignOverviewPageBlocksCarouselCards {
+  carousel_cards {
+    heading
+    enable_filters
+    card_groups {
+      filter_label
+      filter_identifier
+      cardConnection {
+        edges {
+          node {
+            ...ContentCardBlock
+          }
+        }
+      }
+    }
+  }
+}
+
+fragment CarouselCards_CampaignOverviewPageRefs on CampaignOverviewPageBlocksCarouselCards {
+  carousel_cards {
+    card_groups {
+      cardConnection {
+        edges {
+          node {
+            ...ContentCardBlockRef
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -3,6 +3,8 @@
 #import "../../Fragments/CampaignOverviewPage/NavigationLinks.graphql"
 #import "../../Fragments/CampaignOverviewPage/TopCampaign.graphql"
 
+#import "../../Fragments/Blocks/CarouselCards.graphql"
+
 query GetCampaignOverviewPage($locale: String!, $uid: String!) {
   campaign_overview_page(uid: $uid, locale: $locale) {
     title
@@ -18,6 +20,10 @@ query GetCampaignOverviewPage($locale: String!, $uid: String!) {
         }
       }
     }
+    blocks {
+      __typename
+      ...CarouselCards_CampaignOverviewPage
+    }
     system {
       ...System
       created_at
@@ -41,6 +47,10 @@ query GetCampaignOverviewPageRefs($locale: String!, $uid: String!) {
         }
       }
     }
+    blocks {
+      __typename
+      ...CarouselCards_CampaignOverviewPageRefs
+    }
     system {
       ...System
     }

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

@@ -1,5 +1,6 @@
 import { z } from "zod"
 
+import { CampaignOverviewPageEnum } from "../../../types/campaignOverviewPageEnum"
 import { CampaignPageEnum } from "../../../types/campaignPage"
 import { discriminatedUnionArray } from "../../../utils/discriminatedUnion"
 import {
@@ -7,6 +8,10 @@ import {
   heroSchema,
   includedHotelsSchema,
 } from "../campaignPage/output"
+import {
+  carouselCardsRefsSchema,
+  carouselCardsSchema,
+} from "../schemas/blocks/carouselCards"
 import {
   linkAndTitleSchema,
   linkConnectionRefs,
@@ -29,7 +34,7 @@ const navigationLinksSchema = z
       }))
   })
 
-export const blocksSchema = z.discriminatedUnion("__typename", [
+export const campaignPageBlocksSchema = z.discriminatedUnion("__typename", [
   campaignPageHotelListing,
 ])
 
@@ -38,7 +43,7 @@ const topCampaignSchema = z
     heading: z.string(),
     hero: heroSchema,
     included_hotels: includedHotelsSchema,
-    blocks: discriminatedUnionArray(blocksSchema.options),
+    blocks: discriminatedUnionArray(campaignPageBlocksSchema.options),
     url: z.string(),
   })
   .transform((data) => {
@@ -57,6 +62,18 @@ const topCampaignSchema = z
     }
   })
 
+const campaignOverviewPageCarouselCards = z
+  .object({
+    __typename: z.literal(
+      CampaignOverviewPageEnum.ContentStack.blocks.CarouselCards
+    ),
+  })
+  .merge(carouselCardsSchema)
+
+export const blocksSchema = z.discriminatedUnion("__typename", [
+  campaignOverviewPageCarouselCards,
+])
+
 export const campaignOverviewPageSchema = z.object({
   campaign_overview_page: z
     .object({
@@ -73,6 +90,7 @@ export const campaignOverviewPageSchema = z.object({
           })
         ),
       }),
+      blocks: discriminatedUnionArray(blocksSchema.options),
       system: systemSchema.merge(
         z.object({
           created_at: z.string(),
@@ -98,6 +116,18 @@ const campaignOverviewPageHeaderRefs = z.object({
   navigation_links: z.array(linkConnectionRefs),
 })
 
+const campaignOverviewPageCarouselCardsRef = z
+  .object({
+    __typename: z.literal(
+      CampaignOverviewPageEnum.ContentStack.blocks.CarouselCards
+    ),
+  })
+  .merge(carouselCardsRefsSchema)
+
+const blockRefsSchema = z.discriminatedUnion("__typename", [
+  campaignOverviewPageCarouselCardsRef,
+])
+
 export const campaignOverviewPageRefsSchema = z.object({
   campaign_overview_page: z.object({
     header: campaignOverviewPageHeaderRefs,
@@ -110,6 +140,7 @@ export const campaignOverviewPageRefsSchema = z.object({
         })
       ),
     }),
+    blocks: discriminatedUnionArray(blockRefsSchema.options).nullable(),
     system: systemSchema,
   }),
 })

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

@@ -3,6 +3,8 @@ import {
   generateTagsFromSystem,
 } from "@scandic-hotels/trpc/utils/generateTag"
 
+import { CampaignOverviewPageEnum } from "../../../types/campaignOverviewPageEnum"
+
 import type { Lang } from "@scandic-hotels/common/constants/language"
 import type { System } from "@scandic-hotels/trpc/routers/contentstack/schemas/system"
 
@@ -36,6 +38,20 @@ export function getConnections({
       connections.push(node.system)
     })
   }
+  if (campaign_overview_page.blocks) {
+    campaign_overview_page.blocks.forEach((block) => {
+      switch (block.__typename) {
+        case CampaignOverviewPageEnum.ContentStack.blocks.CarouselCards: {
+          block.carousel_cards.card_groups.forEach((group) => {
+            group.cardConnection.edges.forEach(({ node }) => {
+              connections.push(node.system)
+            })
+          })
+          break
+        }
+      }
+    })
+  }
 
   return connections
 }

packages/trpc/lib/types/campaignOverviewPage.ts

@@ -17,3 +17,5 @@ export interface GetCampaignOverviewPageRefsData
 
 export interface CampaignOverviewPageRefs
   extends z.output<typeof campaignOverviewPageRefsSchema> {}
+
+export type Block = CampaignOverviewPageData["blocks"][number]

packages/trpc/lib/types/campaignOverviewPageEnum.ts

@@ -0,0 +1,7 @@
+export namespace CampaignOverviewPageEnum {
+  export namespace ContentStack {
+    export const enum blocks {
+      CarouselCards = "CampaignOverviewPageBlocksCarouselCards",
+    }
+  }
+}