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)
2025-02-11 06:56:38 +00:00
parent a86f0f3993
commit f021c60c2a
11 changed files with 177 additions and 30 deletions
--- a/components/Blocks/CarouselCards/index.tsx
+++ b/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

--- a/components/ContentType/DestinationOverviewPage/HotelsSection/hotelsSection.module.css
+++ b/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;
  }
 }
--- a/components/ContentType/DestinationOverviewPage/destinationOverviewPage.module.css
+++ b/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) {
-  .pageContainer {
-    margin: 0 auto;
-  }
+.main {
+  display: grid;
+  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;
 }
--- a/components/ContentType/DestinationOverviewPage/index.tsx
+++ b/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}
-        {destinationsData && <HotelsSection destinations={destinationsData} />}
-      </div>
+        </div>
+      ) : null}
+      <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>
--- a/lib/graphql/Fragments/Blocks/CarouselCards.graphql
+++ b/lib/graphql/Fragments/Blocks/CarouselCards.graphql
@@ -24,10 +24,8 @@ fragment CarouselCards_StartPage on StartPageBlocksCarouselCards {
    heading
    enable_filters
    card_groups {
-      filter_category {
-        filter_identifier
-        filter_label
-      }
+      filter_label
+      filter_identifier
      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
+          }
+        }
+      }
+    }
+  }
+}
--- a/lib/graphql/Query/DestinationOverviewPage/DestinationOverviewPage.graphql
+++ b/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
    }
--- a/server/routers/contentstack/destinationOverviewPage/output.ts
+++ b/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,
  }),
 })
--- a/server/routers/contentstack/schemas/blocks/carouselCards.ts
+++ b/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_label: z.string(),
-      }),
+      filter_identifier: z.nativeEnum(CarouselCardFilterEnum),
+      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_label: z.string(),
-      }),
+      filter_identifier: z.null(),
+      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 }
--- a/types/components/blocks/index.ts
+++ b/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

--- a/types/enums/destinationOverviewPage.ts
+++ b/types/enums/destinationOverviewPage.ts
@@ -0,0 +1,7 @@
+export namespace DestinationOverviewPageEnum {
+  export namespace ContentStack {
+    export const enum blocks {
+      CarouselCards = "DestinationOverviewPageBlocksCarouselCards",
+    }
+  }
+}
--- a/types/trpc/routers/contentstack/destinationOverviewPage.ts
+++ b/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>