diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx index 973e6adc1..d93da4174 100644 --- a/components/Current/Header/index.tsx +++ b/components/Current/Header/index.tsx @@ -20,7 +20,9 @@ export default async function Header({ const data = await serverClient().contentstack.base.currentHeader({ lang: getLang(), }) + const newHeaderData = await serverClient().contentstack.base.header() + console.log({ newHeaderData }) const user = await serverClient().user.name() if (!data) { diff --git a/lib/graphql/Fragments/Header/InternalOrExternalLink.graphql b/lib/graphql/Fragments/Header/InternalOrExternalLink.graphql new file mode 100644 index 000000000..1c37ed202 --- /dev/null +++ b/lib/graphql/Fragments/Header/InternalOrExternalLink.graphql @@ -0,0 +1,22 @@ +#import "../PageLink/ContentPageLink.graphql" +#import "../PageLink/LoyaltyPageLink.graphql" + +fragment InternalOrExternalLink on InternalOrExternalLink { + is_external_link + open_in_new_tab + external_link { + href + title + } + page_link { + linkConnection { + edges { + node { + ...ContentPageLink + ...LoyaltyPageLink + } + } + } + link_title + } +} diff --git a/lib/graphql/Query/Header.graphql b/lib/graphql/Query/Header.graphql index 88a03f0bf..fdb079ff2 100644 --- a/lib/graphql/Query/Header.graphql +++ b/lib/graphql/Query/Header.graphql @@ -1,53 +1,25 @@ #import "../Fragments/Refs/System.graphql" -#import "../Fragments/PageLink/ContentPageLink.graphql" -#import "../Fragments/PageLink/LoyaltyPageLink.graphql" +#import "../Fragments/Header/InternalOrExternalLink.graphql" query GetHeader($locale: String!) { all_header(limit: 1, locale: $locale) { items { top_link { - is_external_link - open_in_new_tab - page_link { - link_title - linkConnection { - edges { - node { - ...LoyaltyPageLink - ...ContentPageLink - } - } - } - } - external_link { - href - title - } + ...InternalOrExternalLink } - } - } -} - -query GetHeader2($locale: String!) { - all_header(limit: 1, locale: $locale) { - items { - top_link { - external_link { - href - title + menu_items { + title + link { + ...InternalOrExternalLink } - is_external_link - open_in_new_tab - page_link { - link_title - linkConnection { - edges { - node { - ...LoyaltyPageLink - ...ContentPageLink - } - } + see_all_link { + ...InternalOrExternalLink + } + submenu { + title + links { + ...InternalOrExternalLink } } } diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts index 5e7201fdc..52a7131b9 100644 --- a/server/routers/contentstack/base/output.ts +++ b/server/routers/contentstack/base/output.ts @@ -297,11 +297,50 @@ export type InternalExternalLinkData = z.infer< typeof internalExternalLinkSchema > +const cardButtonSchema = z.object({ + cta_text: z.string(), + external_link: z.object({ + href: z.string(), + title: z.string(), + }), + is_contentstack_link: z.boolean(), + linkConnection: linkConnectionNodeSchema, + open_in_new_tab: z.boolean(), +}) + +const menuItemSchema = z.object({ + title: z.string(), + link: internalExternalLinkSchema, + submenu: z.array( + z.object({ + title: z.string(), + links: z.array(internalExternalLinkSchema), + }) + ), + see_all_link: internalExternalLinkSchema, + // cardConnection: z.array( + // z.object({ + // node: z.object({ + // title: z.string(), + // heading: z.string(), + // body_text: z.string(), + // background_image: z.any(), // TODO: Any for now, should be Image + // has_primary_button: z.boolean(), + // has_secondary_button: z.boolean(), + // scripted_top_title: z.string(), + // primary_button: cardButtonSchema, + // secondary_button: cardButtonSchema, + // }), + // }) + // ), +}) + export const validateHeaderSchema = z.object({ all_header: z.object({ items: z.array( z.object({ top_link: internalExternalLinkSchema.optional(), + menu_items: z.array(menuItemSchema), }) ), }), @@ -316,11 +355,24 @@ export type InternalExternalLink = { openInNewTab: boolean } +export type SubmenuItem = { + title: string + links: InternalExternalLink[] +} + +export type MenuItem = { + title: string + link: InternalExternalLink | null + seeAllLink: InternalExternalLink | null + submenu: SubmenuItem[] +} + export type HeaderData = Omit< HeaderDataRaw["all_header"]["items"][0], - "top_link" + "top_link" | "menu_items" > & { topLink: InternalExternalLink | null + menuItems: MenuItem[] } const validateHeaderRefSchema = z.object({ diff --git a/server/routers/contentstack/base/query.ts b/server/routers/contentstack/base/query.ts index 03b32144e..0c5f5a9ce 100644 --- a/server/routers/contentstack/base/query.ts +++ b/server/routers/contentstack/base/query.ts @@ -27,6 +27,9 @@ import { HeaderData, HeaderDataRaw, HeaderRefDataRaw, + InternalExternalLink, + MenuItem, + SubmenuItem, validateContactConfigSchema, validateCurrentHeaderConfigSchema, validateFooterConfigSchema, @@ -235,10 +238,38 @@ export const baseQueryRouter = router({ const data = validatedHeaderConfig.data.all_header.items[0] const topLink = makeLinkObjectFromInternalExternalLink(data.top_link) + const menuItems: MenuItem[] = data.menu_items.map((menuItem) => { + let link = null + let seeAllLink = null + let submenu: SubmenuItem[] = [] - const headerData: HeaderData = { topLink } + if (!menuItem.submenu.length) { + link = !menuItem.submenu.length + ? makeLinkObjectFromInternalExternalLink(menuItem.link) + : null + seeAllLink = makeLinkObjectFromInternalExternalLink( + menuItem.see_all_link + ) + } else { + submenu = menuItem.submenu.map(({ title, links }) => ({ + title: title, + links: links.map( + (link) => + makeLinkObjectFromInternalExternalLink( + link + ) as InternalExternalLink + ), + })) + } + return { + title: menuItem.title, + link, + seeAllLink, + submenu, + } + }) - console.log({ headerData }) + const headerData: HeaderData = { topLink, menuItems } return headerData }), diff --git a/server/routers/contentstack/base/utils.ts b/server/routers/contentstack/base/utils.ts index 46782933a..eb89c7aa2 100644 --- a/server/routers/contentstack/base/utils.ts +++ b/server/routers/contentstack/base/utils.ts @@ -14,12 +14,13 @@ export function makeLinkObjectFromInternalExternalLink( const isExternalLink = data.is_external_link && data.external_link.href const isOriginalLink = linkConnectionNode?.web?.original_url const externalLink = data.external_link - const href = isExternalLink - ? externalLink.href - : linkConnectionNode?.web?.original_url || - removeMultipleSlashes( - `/${linkConnectionNode.system.locale}/${linkConnectionNode.url}` - ) + const href = + isExternalLink || !linkConnectionNode + ? externalLink.href + : linkConnectionNode.web?.original_url || + removeMultipleSlashes( + `/${linkConnectionNode.system.locale}/${linkConnectionNode.url}` + ) const title = isExternalLink ? externalLink.title : data.page_link.link_title return {