fix(SW-438): add ContentCard, ScriptedCard and Shortcuts to ContentPage sidebar

components/Blocks/CardsGrid.tsx

@@ -45,10 +45,8 @@ export default function CardsGrid({
                   theme={cards_grid.theme ?? "one"}
                   key={card.system.uid}
                   scriptedTopTitle={card.scripted_top_title}
-                  heading={card.heading}
                   bodyText={card.body_text}
-                  secondaryButton={card.secondaryButton}
-                  primaryButton={card.primaryButton}
+                  {...card}
                 />
               )
             case CardsGridEnum.cards.TeaserCard:
@@ -57,21 +55,15 @@ export default function CardsGrid({
                   key={card.system.uid}
                   title={card.heading}
                   description={card.body_text}
-                  primaryButton={card.primaryButton}
-                  secondaryButton={card.secondaryButton}
-                  sidePeekButton={card.sidePeekButton}
-                  sidePeekContent={card.sidePeekContent}
-                  image={card.image}
+                  {...card}
                 />
               )
             case CardsGridEnum.cards.LoyaltyCard:
               return (
                 <LoyaltyCard
                   key={card.system.uid}
-                  image={card.image}
-                  heading={card.heading}
                   bodyText={card.body_text}
-                  link={card.link}
+                  {...card}
                 />
               )
           }

components/Sidebar/index.tsx

@@ -1,5 +1,8 @@
 import JsonToHtml from "@/components/JsonToHtml"
 
+import ShortcutsList from "../Blocks/ShortcutsList"
+import Card from "../TempDesignSystem/Card"
+import TeaserCard from "../TempDesignSystem/TeaserCard"
 import JoinLoyaltyContact from "./JoinLoyalty"
 import MyPagesNavigation from "./MyPagesNavigation"
 
@@ -26,6 +29,19 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 />
               </section>
             )
+          case SidebarEnums.blocks.ContentCard:
+            console.log("EEE", block.content_card)
+            return (
+              <TeaserCard
+                {...block.content_card}
+                title={block.content_card.heading}
+                description={block.content_card.body_text}
+                style={
+                  block.content_card.theme === "gray" ? "default" : "featured"
+                }
+              />
+            )
+
           case SidebarEnums.blocks.DynamicContent:
             switch (block.dynamic_content.component) {
               case DynamicContentEnum.Sidebar.components.my_pages_navigation:
@@ -40,6 +56,20 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 key={`${block.typename}-${idx}`}
               />
             )
+          case SidebarEnums.blocks.ScriptedCard:
+            return (
+              <Card
+                {...block.scripted_card}
+                bodyText={block.scripted_card.body_text}
+                scriptedTopTitle={block.scripted_card.scripted_top_title}
+                theme={block.scripted_card.theme ?? "image"}
+              />
+            )
+
+          /*case SidebarEnums.blocks.Shortcuts:
+            console.log("SSS", block)
+            return <ShortcutsList {...block.shortcuts} />*/
+
           default:
             return null
         }

components/Sidebar/sidebar.module.css

@@ -2,6 +2,10 @@
   display: grid;
   container-name: sidebar;
   container-type: inline-size;
+  gap: var(--Spacing-x3);
+
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding-top: var(--Spacing-x4);
 }
 
 .content {
@@ -11,8 +15,10 @@
 @media screen and (min-width: 1367px) {
   .aside {
     align-content: flex-start;
-    display: grid;
     gap: var(--Spacing-x4);
+
+    border-top: 0;
+    padding-top: 0;
   }
 }
 

lib/graphql/Fragments/Sidebar/ContentCard.graphql

@@ -0,0 +1,37 @@
+#import "../AccountPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+
+#import "../PageLink/AccountPageLink.graphql"
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+
+#import "../Blocks/TeaserCard.graphql"
+#import "../Blocks/Refs/TeaserCard.graphql"
+
+fragment ContentCardSidebar_ContentPage on ContentPageSidebarContentCard {
+  __typename
+  content_card {
+    theme
+    content_cardConnection {
+      edges {
+        node {
+          __typename
+          ...TeaserCardBlock
+        }
+      }
+    }
+  }
+}
+
+fragment ContentCardSidebar_ContentPageRefs on ContentPageSidebarContentCard {
+  content_card {
+    content_cardConnection {
+      edges {
+        node {
+          ...TeaserCardBlockRef
+        }
+      }
+    }
+  }
+}

lib/graphql/Fragments/Sidebar/QuickLinks.graphql

@@ -0,0 +1,22 @@
+#import "../AccountPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+
+#import "../PageLink/AccountPageLink.graphql"
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+
+#import "../Blocks/Shortcuts.graphql"
+
+fragment QuickLinksSidebar_ContentPage on ContentPageSidebarShortcuts {
+  __typename
+  shortcuts {
+    ...Shortcuts
+  }
+}
+
+fragment QuickLinksSidebar_ContentPageRefs on ContentPageSidebarShortcuts {
+  shortcuts {
+    ...ShortcutsRefs
+  }
+}

lib/graphql/Fragments/Sidebar/ScriptedCard.graphql

@@ -0,0 +1,37 @@
+#import "../AccountPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+
+#import "../PageLink/AccountPageLink.graphql"
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+
+#import "../Blocks/Card.graphql"
+#import "../Blocks/Refs/Card.graphql"
+
+fragment ScriptedCardSidebar_ContentPage on ContentPageSidebarScriptedCard {
+  __typename
+  scripted_card {
+    theme
+    scripted_cardConnection {
+      edges {
+        node {
+          __typename
+          ...CardBlock
+        }
+      }
+    }
+  }
+}
+
+fragment ScriptedCardSidebar_ContentPageRefs on ContentPageSidebarContentCard {
+  scripted_card {
+    scripted_cardConnection {
+      edges {
+        node {
+          ...CardBlockRef
+        }
+      }
+    }
+  }
+}

lib/graphql/Query/ContentPage/ContentPage.graphql

@@ -13,6 +13,9 @@
 #import "../../Fragments/Sidebar/Content.graphql"
 #import "../../Fragments/Sidebar/DynamicContent.graphql"
 #import "../../Fragments/Sidebar/JoinLoyaltyContact.graphql"
+#import "../../Fragments/Sidebar/ContentCard.graphql"
+#import "../../Fragments/Sidebar/ScriptedCard.graphql"
+#import "../../Fragments/Sidebar/QuickLinks.graphql"
 
 query GetContentPage($locale: String!, $uid: String!) {
   content_page(uid: $uid, locale: $locale) {
@@ -28,6 +31,9 @@ query GetContentPage($locale: String!, $uid: String!) {
       ...ContentSidebar_ContentPage
       ...DynamicContentSidebar_ContentPage
       ...JoinLoyaltyContactSidebar_ContentPage
+      ...ContentCardSidebar_ContentPage
+      ...ScriptedCardSidebar_ContentPage
+      ...QuickLinksSidebar_ContentPage
     }
     system {
       ...System

server/routers/contentstack/contentPage/output.ts

@@ -34,11 +34,14 @@ import {
   contentRefsSchema as sidebarContentRefsSchema,
   contentSchema as sidebarContentSchema,
 } from "../schemas/sidebar/content"
+import { contentCardsSchema } from "../schemas/sidebar/contentCard"
 import { dynamicContentSchema as sidebarDynamicContentSchema } from "../schemas/sidebar/dynamicContent"
 import {
   joinLoyaltyContactRefsSchema,
   joinLoyaltyContactSchema,
 } from "../schemas/sidebar/joinLoyaltyContact"
+import { quickLinksSchema } from "../schemas/sidebar/quickLinks"
+import { scriptedCardsSchema } from "../schemas/sidebar/scriptedCard"
 import { systemSchema } from "../schemas/system"
 
 import { ContentPageEnum } from "@/types/enums/contentPage"
@@ -122,10 +125,31 @@ export const contentPageJoinLoyaltyContact = z
   })
   .merge(joinLoyaltyContactSchema)
 
+export const contentPageSidebarQuicklinks = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.QuickLinks),
+  })
+  .merge(quickLinksSchema)
+
+export const contentPageSidebarContentCard = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ContentCard),
+  })
+  .merge(contentCardsSchema)
+
+export const contentPageSidebarScriptedCard = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ScriptedCard),
+  })
+  .merge(scriptedCardsSchema)
+
 export const sidebarSchema = z.discriminatedUnion("__typename", [
   contentPageSidebarContent,
+  contentPageSidebarContentCard,
   contentPageSidebarDynamicContent,
   contentPageJoinLoyaltyContact,
+  contentPageSidebarScriptedCard,
+  contentPageSidebarQuicklinks,
 ])
 
 const navigationLinksSchema = z

server/routers/contentstack/schemas/sidebar/content.ts

@@ -10,7 +10,6 @@ import {
 
 import { ContentEnum } from "@/types/enums/content"
 import { SidebarEnums } from "@/types/enums/sidebar"
-import { System } from "@/types/requests/system"
 
 export const contentSchema = z.object({
   typename: z

server/routers/contentstack/schemas/sidebar/contentCard.ts

@@ -0,0 +1,45 @@
+import { z } from "zod"
+
+import {
+  teaserCardBlockRefsSchema,
+  teaserCardBlockSchema,
+  transformTeaserCardBlock,
+} from "../blocks/cardsGrid"
+
+import { SidebarEnums } from "@/types/enums/sidebar"
+
+export const contentCardsSchema = z.object({
+  typename: z
+    .literal(SidebarEnums.blocks.ContentCard)
+    .optional()
+    .default(SidebarEnums.blocks.ContentCard),
+  content_card: z
+    .object({
+      theme: z.enum(["gray", "white"]).nullable().default("gray"),
+      content_cardConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: teaserCardBlockSchema,
+          })
+        ),
+      }),
+    })
+    .transform((data) => {
+      return {
+        ...transformTeaserCardBlock(data.content_cardConnection.edges[0].node),
+        theme: data.theme,
+      }
+    }),
+})
+
+export const contentCardRefschema = z.object({
+  content_card: z.object({
+    content_cardConnection: z.object({
+      edges: z.array(
+        z.object({
+          node: teaserCardBlockRefsSchema,
+        })
+      ),
+    }),
+  }),
+})

server/routers/contentstack/schemas/sidebar/quickLinks.ts

@@ -0,0 +1,18 @@
+import { z } from "zod"
+
+import { shortcutsRefsSchema, shortcutsSchema } from "../blocks/shortcuts"
+
+import { SidebarEnums } from "@/types/enums/sidebar"
+
+export const quickLinksSchema = z
+  .object({
+    typename: z
+      .literal(SidebarEnums.blocks.Shortcuts)
+      .optional()
+      .default(SidebarEnums.blocks.Shortcuts),
+  })
+  .merge(shortcutsSchema)
+
+export const quickLinksSRefschema = z.object({
+  shortcutsRefsSchema,
+})

server/routers/contentstack/schemas/sidebar/scriptedCard.ts

@@ -0,0 +1,55 @@
+import { z } from "zod"
+
+import {
+  cardBlockRefsSchema,
+  cardBlockSchema,
+  transformCardBlock,
+} from "../blocks/cardsGrid"
+
+import { SidebarEnums } from "@/types/enums/sidebar"
+
+export const scriptedCardsSchema = z.object({
+  typename: z
+    .literal(SidebarEnums.blocks.ScriptedCard)
+    .optional()
+    .default(SidebarEnums.blocks.ScriptedCard),
+  scripted_card: z
+    .object({
+      theme: z
+        .enum([
+          "one",
+          "two",
+          "three",
+          "primaryDim",
+          "primaryDark",
+          "primaryInverted",
+          "primaryStrong",
+        ])
+        .nullable(),
+      scripted_cardConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: cardBlockSchema,
+          })
+        ),
+      }),
+    })
+    .transform((data) => {
+      return {
+        theme: data.theme,
+        ...transformCardBlock(data.scripted_cardConnection.edges[0].node),
+      }
+    }),
+})
+
+export const scriptedCardRefschema = z.object({
+  cripted_card: z.object({
+    scripted_cardConnection: z.object({
+      edges: z.array(
+        z.object({
+          node: cardBlockRefsSchema,
+        })
+      ),
+    }),
+  }),
+})

types/enums/contentPage.ts

@@ -13,8 +13,11 @@ export namespace ContentPageEnum {
 
     export const enum sidebar {
       Content = "ContentPageSidebarContent",
+      ContentCard = "ContentPageSidebarContentCard",
       DynamicContent = "ContentPageSidebarDynamicContent",
       JoinLoyaltyContact = "ContentPageSidebarJoinLoyaltyContact",
+      ScriptedCard = "ContentPageSidebarScriptedCard",
+      QuickLinks = "ContentPageSidebarShortcuts",
     }
   }
 }

types/enums/sidebar.ts

@@ -1,7 +1,10 @@
 export namespace SidebarEnums {
   export const enum blocks {
     Content = "Content",
+    ContentCard = "ContentCard",
     DynamicContent = "DynamicContent",
     JoinLoyaltyContact = "JoinLoyaltyContact",
+    ScriptedCard = "ScriptedCard",
+    Shortcuts = "Shortcuts",
   }
 }