Merged in feat/SW-1443-carousel-destination-overview-page (pull request #1289)

feat(SW-1443): added carousel block on hotel overview page

* feat(SW-1443): added carousel block on hotel overview page


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
Approved-by: Chuma Mcphoy (We Ahead)

components/Blocks/CarouselCards/index.tsx

@@ -17,9 +17,9 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
   const {
     heading,
     enableFilters,
+    defaultFilter,
     filterCategories,
     cards,
-    defaultFilter,
     link,
   } = carousel_cards
 

components/ContentType/DestinationOverviewPage/HotelsSection/hotelsSection.module.css

@@ -1,12 +1,11 @@
 .container {
   display: grid;
   gap: var(--Spacing-x4);
-  padding: var(--Spacing-x5) var(--Spacing-x2) var(--Spacing-x7);
+  padding: var(--Spacing-x5) 0 var(--Spacing-x7);
 }
 
 @media screen and (min-width: 768px) {
   .container {
     gap: var(--Spacing-x7);
-    padding: var(--Spacing-x5) 9.625rem var(--Spacing-x9) 9.625rem;
   }
 }

components/ContentType/DestinationOverviewPage/destinationOverviewPage.module.css

@@ -1,12 +1,28 @@
-.pageContainer {
+.mapContainer {
   position: relative;
   display: grid;
   width: 100%;
   max-width: var(--max-width);
+  margin: 0 auto;
 }
 
-@media screen and (min-width: 768px) {
+.main {
-  .pageContainer {
+  display: grid;
-    margin: 0 auto;
+  gap: var(--Spacing-x9);
-  }
+  padding: var(--Spacing-x7) 0 var(--Spacing-x9);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.blocks {
+  display: grid;
+  gap: var(--Spacing-x9);
+  width: 100%;
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+}
+
+.hotelsAccordions {
+  width: 100%;
+  max-width: var(--max-width-content);
+  margin: 0 auto;
 }

components/ContentType/DestinationOverviewPage/index.tsx

@@ -6,6 +6,7 @@ import {
   getDestinationsList,
 } from "@/lib/trpc/memoizedRequests"
 
+import Blocks from "@/components/Blocks"
 import TrackingSDK from "@/components/TrackingSDK"
 
 import HotelsSection from "./HotelsSection"
@@ -30,12 +31,21 @@ export default async function DestinationOverviewPage() {
 
   return (
     <>
-      <div className={styles.pageContainer}>
+      {googleMapsApiKey ? (
-        {googleMapsApiKey ? (
+        <div className={styles.mapContainer}>
           <OverviewMapContainer apiKey={googleMapsApiKey} mapId={googleMapId} />
-        ) : null}
+        </div>
-        {destinationsData && <HotelsSection destinations={destinationsData} />}
+      ) : null}
-      </div>
+      <main className={styles.main}>
+        <div className={styles.blocks}>
+          <Blocks blocks={destinationOverviewPage.blocks} />
+        </div>
+      </main>
+      {destinationsData && (
+        <aside className={styles.hotelsAccordions}>
+          <HotelsSection destinations={destinationsData} />
+        </aside>
+      )}
       <Suspense fallback={null}>
         <TrackingSDK pageData={tracking} />
       </Suspense>

lib/graphql/Fragments/Blocks/CarouselCards.graphql

@@ -24,10 +24,8 @@ fragment CarouselCards_StartPage on StartPageBlocksCarouselCards {
     heading
     enable_filters
     card_groups {
-      filter_category {
+      filter_label
-        filter_identifier
+      filter_identifier
-        filter_label
-      }
       cardConnection {
         edges {
           node {
@@ -93,3 +91,76 @@ fragment CarouselCards_StartPageRefs on StartPageBlocksCarouselCards {
     }
   }
 }
+
+fragment CarouselCards_DestinationOverviewPage on DestinationOverviewPageBlocksCarouselCards {
+  carousel_cards {
+    heading
+    enable_filters
+    card_groups {
+      filter_identifier
+      filter_label
+      cardConnection {
+        edges {
+          node {
+            ...ContentCardBlock
+          }
+        }
+      }
+    }
+    link {
+      cta_text
+      is_contentstack_link
+      open_in_new_tab
+      external_link {
+        href
+        title
+      }
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageLink
+            ...CollectionPageLink
+            ...ContentPageLink
+            ...DestinationCityPageLink
+            ...DestinationCountryPageLink
+            ...DestinationOverviewPageLink
+            ...HotelPageLink
+            ...LoyaltyPageLink
+          }
+        }
+      }
+    }
+  }
+}
+
+fragment CarouselCards_DestinationOverviewPageRefs on DestinationOverviewPageBlocksCarouselCards {
+  carousel_cards {
+    card_groups {
+      cardConnection {
+        edges {
+          node {
+            ...ContentCardBlockRef
+          }
+        }
+      }
+    }
+    link {
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageRef
+            ...CollectionPageRef
+            ...ContentPageRef
+            ...DestinationCityPageRef
+            ...DestinationCountryPageRef
+            ...DestinationOverviewPageRef
+            ...HotelPageRef
+            ...LoyaltyPageRef
+          }
+        }
+      }
+    }
+  }
+}

lib/graphql/Query/DestinationOverviewPage/DestinationOverviewPage.graphql

@@ -1,9 +1,15 @@
 #import "../../Fragments/System.graphql"
 
+#import "../../Fragments/Blocks/CarouselCards.graphql"
+
 query GetDestinationOverviewPage($locale: String!, $uid: String!) {
   destination_overview_page(uid: $uid, locale: $locale) {
     title
     url
+    blocks {
+      __typename
+      ...CarouselCards_DestinationOverviewPage
+    }
     system {
       ...System
       created_at
@@ -17,6 +23,10 @@ query GetDestinationOverviewPage($locale: String!, $uid: String!) {
 
 query GetDestinationOverviewPageRefs($locale: String!, $uid: String!) {
   destination_overview_page(locale: $locale, uid: $uid) {
+    blocks {
+      __typename
+      ...CarouselCards_DestinationOverviewPageRefs
+    }
     system {
       ...System
     }

server/routers/contentstack/destinationOverviewPage/output.ts

@@ -1,12 +1,33 @@
 import { z } from "zod"
 
+import { discriminatedUnionArray } from "@/lib/discriminatedUnion"
+
 import { removeMultipleSlashes } from "@/utils/url"
 
+import {
+  carouselCardsRefsSchema,
+  carouselCardsSchema,
+} from "../schemas/blocks/carouselCards"
 import { systemSchema } from "../schemas/system"
 
+import { DestinationOverviewPageEnum } from "@/types/enums/destinationOverviewPage"
+
+const destinationOverviewPageCarouselCards = z
+  .object({
+    __typename: z.literal(
+      DestinationOverviewPageEnum.ContentStack.blocks.CarouselCards
+    ),
+  })
+  .merge(carouselCardsSchema)
+
+export const blocksSchema = z.discriminatedUnion("__typename", [
+  destinationOverviewPageCarouselCards,
+])
+
 export const destinationOverviewPageSchema = z.object({
   destination_overview_page: z.object({
     title: z.string(),
+    blocks: discriminatedUnionArray(blocksSchema.options),
     system: systemSchema.merge(
       z.object({
         created_at: z.string(),
@@ -41,8 +62,21 @@ export const countryPageUrlSchema = z
   )
 
 /** REFS */
+const destinationOverviewPageCarouselCardsRef = z
+  .object({
+    __typename: z.literal(
+      DestinationOverviewPageEnum.ContentStack.blocks.CarouselCards
+    ),
+  })
+  .merge(carouselCardsRefsSchema)
+
+const blocksRefsSchema = z.discriminatedUnion("__typename", [
+  destinationOverviewPageCarouselCardsRef,
+])
+
 export const destinationOverviewPageRefsSchema = z.object({
   destination_overview_page: z.object({
+    blocks: discriminatedUnionArray(blocksRefsSchema.options).nullable(),
     system: systemSchema,
   }),
 })

server/routers/contentstack/schemas/blocks/carouselCards.ts

@@ -24,10 +24,8 @@ const carouselCardsWithFilters = z.object({
   enable_filters: z.literal(true),
   card_groups: z.array(
     z.object({
-      filter_category: z.object({
+      filter_identifier: z.nativeEnum(CarouselCardFilterEnum),
-        filter_identifier: z.nativeEnum(CarouselCardFilterEnum),
+      filter_label: z.string(),
-        filter_label: z.string(),
-      }),
       cardConnection: z.object({
         edges: z.array(z.object({ node: contentCardSchema })),
       }),
@@ -40,10 +38,8 @@ const carouselCardsWithoutFilters = z.object({
   enable_filters: z.literal(false),
   card_groups: z.array(
     z.object({
-      filter_category: z.object({
+      filter_identifier: z.null(),
-        filter_identifier: z.null(),
+      filter_label: z.string(),
-        filter_label: z.string(),
-      }),
       cardConnection: z.object({
         edges: z.array(z.object({ node: contentCardSchema })),
       }),
@@ -74,7 +70,6 @@ export const carouselCardsSchema = z.object({
               )
             )
             .filter((card): card is NonNullable<typeof card> => card !== null),
-          defaultFilter: null,
           link: data.link
             ? { href: data.link.href, text: data.link.title }
             : undefined,
@@ -87,11 +82,11 @@ export const carouselCardsSchema = z.object({
           label: string
         }>
       >((acc, group) => {
-        const identifier = group.filter_category.filter_identifier
+        const identifier = group.filter_identifier
         if (!acc.some((category) => category.identifier === identifier)) {
           acc.push({
             identifier,
-            label: group.filter_category.filter_label,
+            label: group.filter_label,
           })
         }
         return acc
@@ -107,11 +102,11 @@ export const carouselCardsSchema = z.object({
             .filter((card): card is NonNullable<typeof card> => card !== null)
             .map((card) => ({
               ...card,
-              filterId: group.filter_category.filter_identifier,
+              filterId: group.filter_identifier,
             }))
         ),
         defaultFilter:
-          data.card_groups[0]?.filter_category.filter_identifier ??
+          data.card_groups[0]?.filter_identifier ??
           filterCategories[0]?.identifier,
         link: data.link
           ? { href: data.link.href, text: data.link.title }

types/components/blocks/index.ts

@@ -3,6 +3,7 @@ import type { Block as CollectionPageBlock } from "@/types/trpc/routers/contents
 import type { Block as ContentPageBlock } from "@/types/trpc/routers/contentstack/contentPage"
 import type { Block as DestinationCityPageBlock } from "@/types/trpc/routers/contentstack/destinationCityPage"
 import type { Block as DestinationCountryPageBlock } from "@/types/trpc/routers/contentstack/destinationCountryPage"
+import type { Block as DestinationOverviewPageBlock } from "@/types/trpc/routers/contentstack/destinationOverviewPage"
 import type { Block as LoyaltyPageBlock } from "@/types/trpc/routers/contentstack/loyaltyPage"
 import type { Block as StartPageBlock } from "@/types/trpc/routers/contentstack/startPage"
 
@@ -12,6 +13,7 @@ export type Blocks =
   | ContentPageBlock
   | DestinationCityPageBlock
   | DestinationCountryPageBlock
+  | DestinationOverviewPageBlock
   | LoyaltyPageBlock
   | StartPageBlock
 

types/enums/destinationOverviewPage.ts

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

types/trpc/routers/contentstack/destinationOverviewPage.ts

@@ -1,6 +1,7 @@
 import type { z } from "zod"
 
 import type {
+  blocksSchema,
   countryPageUrlSchema,
   destinationOverviewPageRefsSchema,
   destinationOverviewPageSchema,
@@ -19,3 +20,5 @@ export interface DestinationOverviewPageRefs
 
 export interface GetCountryPageUrlData
   extends z.input<typeof countryPageUrlSchema> {}
+
+export type Block = z.output<typeof blocksSchema>