feat(SW-1269): added dynamic content to collection page

components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -18,8 +18,8 @@
   background-color: var(--UI-Opacity-White-100);
   display: grid;
   grid-template-columns: 1fr 1fr;
-  margin: 0 calc(var(--Spacing-x2) * -1) calc(var(--Spacing-x9) * -1)
+  margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9))
-    calc(var(--Spacing-x2) * -1);
+    calc(0px - var(--Spacing-x2));
   padding-bottom: var(--Spacing-x9);
   position: relative;
 }
@@ -60,6 +60,13 @@
   padding-left: var(--Spacing-x1);
 }
 
+@media screen and (min-width: 768px) {
+  .mobileColumns {
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+}
+
 @media screen and (min-width: 950px) {
   .mobileColumns {
     display: none;

components/Blocks/DynamicContent/SectionWrapper/index.tsx

@@ -1,13 +1,8 @@
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./sectionWrapper.module.css"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
-import { DynamicContentEnum } from "@/types/enums/dynamicContent"
 
 export default function SectionWrapper({
   children,
@@ -19,17 +14,9 @@ export default function SectionWrapper({
     dynamic_content.subtitle ||
     dynamic_content.title
   )
-  const isOverviewTable =
-    dynamic_content.component ===
-    DynamicContentEnum.Blocks.components.overview_table
   return (
-    <SectionContainer className={styles.container}>
+    <SectionContainer>
-      {isOverviewTable ? (
+      {displayHeader ? (
-        <div className={styles.header}>
-          <Title className={styles.tableTitle}> {dynamic_content.title}</Title>
-          <Subtitle>{dynamic_content.subtitle}</Subtitle>
-        </div>
-      ) : displayHeader ? (
         <SectionHeader
           link={dynamic_content.link}
           preamble={dynamic_content.subtitle}
@@ -38,7 +25,7 @@ export default function SectionWrapper({
         />
       ) : null}
       {children}
-      {displayHeader ? (
+      {dynamic_content.link ? (
         <SectionLink link={dynamic_content.link} variant="mobile" />
       ) : null}
     </SectionContainer>

components/Blocks/DynamicContent/SectionWrapper/sectionWrapper.module.css

@@ -1,30 +0,0 @@
-.container {
-  /* These negative margins are needed for getting the right background color for mobile loyalty table overview */
-  margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9))
-    calc(0px - var(--Spacing-x2));
-  overflow-x: hidden;
-  padding: 0 var(--Spacing-x2) var(--Spacing-x9) var(--Spacing-x2);
-}
-
-.header {
-  display: grid;
-  gap: var(--Spacing-x1);
-  padding-bottom: var(--Spacing-x2);
-}
-
-.tableTitle {
-  text-wrap: balance;
-}
-
-.preamble {
-  color: var(--Base-Text-High-contrast);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  margin: 0;
-}
-
-@media screen and (min-width: 950px) {
-  .header {
-    width: 800px;
-  }
-}

components/Section/Container/container.module.css

@@ -1,4 +1,5 @@
 .container {
   display: grid;
   gap: var(--Spacing-x3);
+  z-index: 0;
 }

components/Section/Header/header.module.css

@@ -8,6 +8,7 @@
 .title,
 .preamble {
   grid-column: 1 / -1;
+  max-width: var(--max-width-text-block);
 }
 
 @media screen and (min-width: 768px) {

components/Section/Link/link.module.css

@@ -1,6 +1,7 @@
 .linkWrapper {
   align-items: baseline;
   gap: var(--Spacing-x-half);
+  z-index: 1;
 }
 
 .mobile {

lib/graphql/Fragments/Blocks/DynamicContent.graphql

@@ -52,6 +52,48 @@ fragment DynamicContent_AccountPageRefs on AccountPageContentDynamicContent {
   }
 }
 
+fragment DynamicContent_CollectionPage on CollectionPageBlocksDynamicContent {
+  dynamic_content {
+    component
+    subtitle
+    title
+    link {
+      text
+      linkConnection: pageConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageLink
+            ...ContentPageLink
+            ...CollectionPageLink
+            ...HotelPageLink
+            ...LoyaltyPageLink
+          }
+        }
+      }
+    }
+  }
+}
+
+fragment DynamicContent_CollectionPageRefs on CollectionPageBlocksDynamicContent {
+  dynamic_content {
+    link {
+      linkConnection: pageConnection {
+        edges {
+          node {
+            __typename
+            ...ContentPageRef
+            ...HotelPageRef
+            ...LoyaltyPageRef
+            ...AccountPageRef
+            ...CollectionPageRef
+          }
+        }
+      }
+    }
+  }
+}
+
 fragment DynamicContent_ContentPage on ContentPageBlocksDynamicContent {
   dynamic_content {
     component

lib/graphql/Query/CollectionPage/CollectionPage.graphql

@@ -1,6 +1,7 @@
 #import "../../Fragments/System.graphql"
 
 #import "../../Fragments/Blocks/CardsGrid.graphql"
+#import "../../Fragments/Blocks/DynamicContent.graphql"
 #import "../../Fragments/Blocks/Shortcuts.graphql"
 #import "../../Fragments/Blocks/UspGrid.graphql"
 
@@ -20,6 +21,7 @@ query GetCollectionPage($locale: String!, $uid: String!) {
       ...CardsGrid_CollectionPage
       ...Shortcuts_CollectionPage
       ...UspGrid_CollectionPage
+      ...DynamicContent_CollectionPage
     }
     system {
       ...System
@@ -42,6 +44,7 @@ query GetCollectionPageRefs($locale: String!, $uid: String!) {
       ...CardsGrid_CollectionPageRefs
       ...Shortcuts_CollectionPageRefs
       ...UspGrid_CollectionPageRefs
+      ...DynamicContent_CollectionPageRefs
     }
     system {
       ...System

server/routers/contentstack/collectionPage/output.ts

@@ -6,6 +6,10 @@ import {
   cardGridRefsSchema,
   cardsGridSchema,
 } from "../schemas/blocks/cardsGrid"
+import {
+  dynamicContentRefsSchema,
+  dynamicContentSchema as blockDynamicContentSchema,
+} from "../schemas/blocks/dynamicContent"
 import {
   shortcutsRefsSchema,
   shortcutsSchema,
@@ -39,8 +43,17 @@ export const collectionPageUspGrid = z
   })
   .merge(uspGridSchema)
 
+export const collectionPageDynamicContent = z
+  .object({
+    __typename: z.literal(
+      CollectionPageEnum.ContentStack.blocks.DynamicContent
+    ),
+  })
+  .merge(blockDynamicContentSchema)
+
 export const blocksSchema = z.discriminatedUnion("__typename", [
   collectionPageCards,
+  collectionPageDynamicContent,
   collectionPageShortcuts,
   collectionPageUspGrid,
 ])
@@ -103,8 +116,17 @@ const collectionPageUspGridRefs = z
   })
   .merge(uspGridRefsSchema)
 
+const contentPageDynamicContentRefs = z
+  .object({
+    __typename: z.literal(
+      CollectionPageEnum.ContentStack.blocks.DynamicContent
+    ),
+  })
+  .merge(dynamicContentRefsSchema)
+
 const collectionPageBlockRefsItem = z.discriminatedUnion("__typename", [
   collectionPageShortcutsRefs,
+  contentPageDynamicContentRefs,
   collectionPageCardsRefs,
   collectionPageUspGridRefs,
 ])

types/enums/collectionPage.ts

@@ -2,6 +2,7 @@ export namespace CollectionPageEnum {
   export namespace ContentStack {
     export const enum blocks {
       CardsGrid = "CollectionPageBlocksCardsGrid",
+      DynamicContent = "CollectionPageBlocksDynamicContent",
       Shortcuts = "CollectionPageBlocksShortcuts",
       UspGrid = "CollectionPageBlocksUspGrid",
     }