diff --git a/components/Blocks/CardsGrid.tsx b/components/Blocks/CardsGrid.tsx index 1c07b73ec..6c9d84b15 100644 --- a/components/Blocks/CardsGrid.tsx +++ b/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 ( ) } diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx index 3e0f59637..155af47ba 100644 --- a/components/Sidebar/index.tsx +++ b/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) { /> ) + case SidebarEnums.blocks.ContentCard: + console.log("EEE", block.content_card) + return ( + + ) + 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 ( + + ) + + /*case SidebarEnums.blocks.Shortcuts: + console.log("SSS", block) + return */ + default: return null } diff --git a/components/Sidebar/sidebar.module.css b/components/Sidebar/sidebar.module.css index 5ae1ce5d4..f30a1ea39 100644 --- a/components/Sidebar/sidebar.module.css +++ b/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; } } diff --git a/lib/graphql/Fragments/Sidebar/ContentCard.graphql b/lib/graphql/Fragments/Sidebar/ContentCard.graphql new file mode 100644 index 000000000..08cf9db28 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/lib/graphql/Fragments/Sidebar/QuickLinks.graphql b/lib/graphql/Fragments/Sidebar/QuickLinks.graphql new file mode 100644 index 000000000..ff516e519 --- /dev/null +++ b/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 + } +} diff --git a/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql b/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql new file mode 100644 index 000000000..65781aaf7 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/lib/graphql/Query/ContentPage/ContentPage.graphql b/lib/graphql/Query/ContentPage/ContentPage.graphql index 280eb13ef..9552c53c4 100644 --- a/lib/graphql/Query/ContentPage/ContentPage.graphql +++ b/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 diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts index 2a1bc1681..6b0baa553 100644 --- a/server/routers/contentstack/contentPage/output.ts +++ b/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 diff --git a/server/routers/contentstack/schemas/sidebar/content.ts b/server/routers/contentstack/schemas/sidebar/content.ts index d1d03c6bd..8f8e83239 100644 --- a/server/routers/contentstack/schemas/sidebar/content.ts +++ b/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 diff --git a/server/routers/contentstack/schemas/sidebar/contentCard.ts b/server/routers/contentstack/schemas/sidebar/contentCard.ts new file mode 100644 index 000000000..4d415eece --- /dev/null +++ b/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, + }) + ), + }), + }), +}) diff --git a/server/routers/contentstack/schemas/sidebar/quickLinks.ts b/server/routers/contentstack/schemas/sidebar/quickLinks.ts new file mode 100644 index 000000000..fe673b7a3 --- /dev/null +++ b/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, +}) diff --git a/server/routers/contentstack/schemas/sidebar/scriptedCard.ts b/server/routers/contentstack/schemas/sidebar/scriptedCard.ts new file mode 100644 index 000000000..eddd2cd40 --- /dev/null +++ b/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, + }) + ), + }), + }), +}) diff --git a/types/enums/contentPage.ts b/types/enums/contentPage.ts index 16366a756..95b228da3 100644 --- a/types/enums/contentPage.ts +++ b/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", } } } diff --git a/types/enums/sidebar.ts b/types/enums/sidebar.ts index fbdb589a8..fd6de1838 100644 --- a/types/enums/sidebar.ts +++ b/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", } }