chore: add breadcrumbs to loyalty page

components/ContentType/LoyaltyPage.tsx

@@ -1,15 +1,21 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import { auth } from "@/auth"
 import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
 
+import Breadcrumbs from "../MyPages/Breadcrumbs"
+
 import styles from "./loyaltyPage.module.css"
 
 export default async function LoyaltyPage() {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
+  const session = await auth()
+
   return (
     <section className={styles.content}>
+      {session && <Breadcrumbs b={true} />}
       {loyaltyPage.sidebar.length ? (
         <Sidebar blocks={loyaltyPage.sidebar} />
       ) : null}

components/MyPages/Breadcrumbs/index.tsx

@@ -6,9 +6,13 @@ import BreadcrumbsWithLink from "./BreadcrumbWithLink"
 
 import styles from "./breadcrumbs.module.css"
 
-export default async function Breadcrumbs() {
+type bool = {
-  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
+  b?: Boolean
-
+}
+export default async function Breadcrumbs({ b = false }: bool) {
+  let breadcrumbs
+  if (!b) breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
+  else breadcrumbs = await serverClient().contentstack.breadcrumbs.loyalty()
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>

lib/graphql/Fragments/MyPages/Breadcrumbs.graphql

@@ -19,3 +19,27 @@ fragment MyPagesBreadcrumbs on AccountPage {
     }
   }
 }
+
+fragment LoyaltyBreadcrumbs on LoyaltyPage {
+  web {
+    breadcrumbss {
+      title
+      parentsConnection {
+        edges {
+          node {
+            ... on AccountPage {
+              breadcrumbs {
+                title
+              }
+              system {
+                locale
+                uid
+              }
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+}

lib/graphql/Fragments/Refs/Breadcrumbs.graphql

@@ -18,3 +18,31 @@ fragment MyPagesBreadcrumbsRefs on AccountPage {
     ...System
   }
 }
+
+fragment LoyaltyBreadcrumbsRefs on LoyaltyPage {
+  web {
+    breadcrumbss {
+      title
+      parentsConnection {
+        edges {
+          node {
+            ... on AccountPage {
+              breadcrumbs {
+                title
+              }
+              system {
+                uid
+                locale
+                content_type_uid
+              }
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+  system {
+    ...System
+  }
+}

lib/graphql/Query/BreadcrumbsLoyaltyPages.graphql

@@ -0,0 +1,21 @@
+#import "../Fragments/MyPages/Breadcrumbs.graphql"
+#import "../Fragments/Refs/Breadcrumbs.graphql"
+
+query GetLoyaltyBreadcrumbs($locale: String!, $url: String!) {
+  all_loyalty_page(locale: $locale, where: { url: $url }) {
+    items {
+      ...LoyaltyBreadcrumbs
+      system {
+        uid
+      }
+    }
+  }
+}
+
+query GetLoyaltyBreadcrumbsRefs($locale: String!, $url: String!) {
+  all_loyalty_page(locale: $locale, where: { url: $url }) {
+    items {
+      ...LoyaltyBreadcrumbsRefs
+    }
+  }
+}

server/routers/contentstack/breadcrumbs/output.ts

@@ -67,3 +67,65 @@ export const getBreadcrumbsSchema = z.array(
     uid: z.string(),
   })
 )
+
+export const validateBreadcrumbsRefsConstenstackSchemaLoyalty = z.object({
+  all_loyalty_page: z.object({
+    items: z.array(
+      z.object({
+        web: z.object({
+          breadcrumbss: z.object({
+            parentsConnection: z.object({
+              edges: z.array(
+                z.object({
+                  node: z.object({
+                    system: z.object({
+                      content_type_uid: z.string(),
+                      uid: z.string(),
+                    }),
+                  }),
+                })
+              ),
+            }),
+          }),
+        }),
+        system: z.object({
+          content_type_uid: z.string(),
+          uid: z.string(),
+        }),
+      })
+    ),
+  }),
+})
+
+export const validateBreadcrumbsConstenstackSchemaLoyalty = z.object({
+  all_loyalty_page: z.object({
+    items: z.array(
+      z.object({
+        web: z.object({
+          breadcrumbss: z.object({
+            title: z.string(),
+            parentsConnection: z.object({
+              edges: z.array(
+                z.object({
+                  node: z.object({
+                    breadcrumbs: z.object({
+                      title: z.string(),
+                    }),
+                    system: z.object({
+                      locale: z.nativeEnum(Lang),
+                      uid: z.string(),
+                    }),
+                    url: z.string(),
+                  }),
+                })
+              ),
+            }),
+          }),
+        }),
+        system: z.object({
+          uid: z.string(),
+        }),
+      })
+    ),
+  }),
+})

server/routers/contentstack/breadcrumbs/query.ts

@@ -1,3 +1,7 @@
+import {
+  GetLoyaltyBreadcrumbs,
+  GetLoyaltyBreadcrumbsRefs,
+} from "@/lib/graphql/Query/BreadcrumbsLoyaltyPages.graphql"
 import {
   GetMyPagesBreadcrumbs,
   GetMyPagesBreadcrumbsRefs,
@@ -16,11 +20,20 @@ import { removeMultipleSlashes } from "@/utils/url"
 import {
   getBreadcrumbsSchema,
   validateBreadcrumbsConstenstackSchema,
+  validateBreadcrumbsConstenstackSchemaLoyalty,
   validateBreadcrumbsRefsConstenstackSchema,
+  validateBreadcrumbsRefsConstenstackSchemaLoyalty,
 } from "./output"
-import { affix, getConnections, homeBreadcrumbs } from "./utils"
+import {
+  affix,
+  getConnections,
+  getConnectionsLoyalty,
+  homeBreadcrumbs,
+} from "./utils"
 
 import type {
+  GetLoyaltyBreadcrumbsData,
+  GetLoyaltyBreadcrumbsRefsData,
   GetMyPagesBreadcrumbsData,
   GetMyPagesBreadcrumbsRefsData,
 } from "@/types/requests/myPages/breadcrumbs"
@@ -36,7 +49,8 @@ export const breadcrumbsQueryRouter = router({
         },
       }
     )
-
+    console.log(ctx.pathname)
+    console.log(refsResponse.data.all_account_page)
     if (!refsResponse.data) {
       throw notFound(refsResponse)
     }
@@ -46,18 +60,23 @@ export const breadcrumbsQueryRouter = router({
     if (!validatedRefsData.success) {
       throw internalServerError(validatedRefsData.error)
     }
-
+    console.log(validatedRefsData.data)
     const connections = getConnections(validatedRefsData.data)
+    console.log(connections)
     const tags = generateTags(ctx.lang, connections)
+    console.log(tags)
     const page = validatedRefsData.data.all_account_page.items[0]
+    console.log(page)
+
     tags.push(generateTag(ctx.lang, page.system.uid, affix))
+    console.log(tags)
 
     const response = await request<GetMyPagesBreadcrumbsData>(
       GetMyPagesBreadcrumbs,
       { locale: ctx.lang, url: ctx.pathname },
       { next: { tags } }
     )
-
+    console.log(response.data)
     if (!response.data) {
       throw notFound(response)
     }
@@ -95,6 +114,106 @@ export const breadcrumbsQueryRouter = router({
       parentBreadcrumbs,
       pageBreadcrumb,
     ].flat()
+    console.log(breadcrumbs)
+
+    const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
+    if (!validatedBreadcrumbs.success) {
+      throw internalServerError(validatedBreadcrumbs.error)
+    }
+
+    return validatedBreadcrumbs.data
+  }),
+  loyalty: contentstackProcedure.query(async ({ ctx }) => {
+    console.log("HEJ", ctx)
+    const refsResponse = await request<GetLoyaltyBreadcrumbsRefsData>(
+      GetLoyaltyBreadcrumbsRefs,
+      { locale: ctx.lang, url: ctx.pathname },
+      {
+        next: {
+          tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
+        },
+      }
+    )
+    console.log(ctx.pathname)
+    console.log(refsResponse.data.all_loyalty_page)
+    if (!refsResponse.data) {
+      throw notFound(refsResponse)
+    }
+    /*if (refsResponse.data.all_loyalty_page.items) {
+      Object.assign(
+        refsResponse.data.all_loyalty_page.items,
+        refsResponse.data.all_loyalty_page.items[0].web
+      )
+      delete refsResponse.data.all_loyalty_page.items[0].web
+    }*/
+    console.log(
+      refsResponse.data.all_loyalty_page.items[0].web.breadcrumbss
+        .parentsConnection
+    )
+    const validatedRefsData =
+      validateBreadcrumbsRefsConstenstackSchemaLoyalty.safeParse(
+        refsResponse.data
+      )
+    console.log("VALI", validatedRefsData)
+    if (!validatedRefsData.success) {
+      throw internalServerError(validatedRefsData.error)
+    }
+    console.log(
+      validatedRefsData.data.all_loyalty_page.items[0].web.breadcrumbss
+    )
+    const connections = getConnectionsLoyalty(validatedRefsData.data)
+    console.log(connections)
+    const tags = generateTags(ctx.lang, connections)
+    console.log(tags)
+    const page = validatedRefsData.data.all_loyalty_page.items[0]
+    console.log(page)
+    tags.push(generateTag(ctx.lang, page.system.uid, affix))
+    console.log(tags)
+
+    const response = await request<GetLoyaltyBreadcrumbsData>(
+      GetLoyaltyBreadcrumbs,
+      { locale: ctx.lang, url: ctx.pathname },
+      { next: { tags } }
+    )
+    console.log(response.data)
+    if (!response.data) {
+      throw notFound(response)
+    }
+
+    const validatedBreadcrumbsData =
+      validateBreadcrumbsConstenstackSchemaLoyalty.safeParse(response.data)
+    console.log(validatedBreadcrumbsData)
+    if (!validatedBreadcrumbsData.success) {
+      throw internalServerError(validatedBreadcrumbsData.error)
+    }
+
+    const parentBreadcrumbs =
+      validatedBreadcrumbsData.data.all_loyalty_page.items[0].web.breadcrumbss.parentsConnection.edges.map(
+        (breadcrumb) => {
+          return {
+            href: removeMultipleSlashes(
+              `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
+            ),
+            title: breadcrumb.node.breadcrumbs.title,
+            uid: breadcrumb.node.system.uid,
+          }
+        }
+      )
+
+    const pageBreadcrumb =
+      validatedBreadcrumbsData.data.all_loyalty_page.items.map((breadcrumb) => {
+        return {
+          title: breadcrumb.web.breadcrumbss.title,
+          uid: breadcrumb.system.uid,
+        }
+      })
+
+    const breadcrumbs = [
+      homeBreadcrumbs[ctx.lang],
+      parentBreadcrumbs,
+      pageBreadcrumb,
+    ].flat()
+    console.log(breadcrumbs)
 
     const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
     if (!validatedBreadcrumbs.success) {

server/routers/contentstack/breadcrumbs/utils.ts

@@ -1,18 +1,35 @@
 import { Lang } from "@/constants/languages"
 
-import type { GetMyPagesBreadcrumbsRefsData } from "@/types/requests/myPages/breadcrumbs"
+import type {
+  GetLoyaltyBreadcrumbsRefsData,
+  GetMyPagesBreadcrumbsRefsData,
+} from "@/types/requests/myPages/breadcrumbs"
 import type { Edges } from "@/types/requests/utils/edges"
 import type { NodeRefs } from "@/types/requests/utils/refs"
 
 export function getConnections(refs: GetMyPagesBreadcrumbsRefsData) {
   const connections: Edges<NodeRefs>[] = []
   refs.all_account_page.items.forEach((ref) => {
+    console.log(ref)
+    console.log(ref.breadcrumbs.parentsConnection)
     connections.push(ref.breadcrumbs.parentsConnection)
   })
 
   return connections
 }
 
+export function getConnectionsLoyalty(refs: GetLoyaltyBreadcrumbsRefsData) {
+  const connections: Edges<NodeRefs>[] = []
+  refs.all_loyalty_page.items.forEach((ref) => {
+    console.log(ref)
+    console.log(ref.web.breadcrumbss)
+    console.log(ref.web.breadcrumbss.parentsConnection)
+    connections.push(ref.web.breadcrumbss.parentsConnection)
+  })
+  console.log(connections)
+  return connections
+}
+
 export const affix = "breadcrumbs"
 
 // TODO: Make these editable in CMS?

types/requests/myPages/breadcrumbs.ts

@@ -22,23 +22,65 @@ interface AccountPageBreadcrumbs {
     uid: string
   }
 }
+interface LoyaltyBreadcrumbs {
+  web: {
+    breadcrumbss: {
+      title: string
+      parentsConnection: Edges<{
+        breadcrumbs: {
+          title: string
+        }
+        system: {
+          locale: Lang
+          uid: string
+        }
+        url: string
+      }>
+    }
+    system: {
+      uid: string
+    }
+  }
+}
 
 interface AllAccountPageResponse
   extends AllRequestResponse<AccountPageBreadcrumbs> {}
 
+interface AllLoyaltyPageResponse
+  extends AllRequestResponse<LoyaltyBreadcrumbs> {}
+
 export interface GetMyPagesBreadcrumbsData {
   all_account_page: AllAccountPageResponse
 }
 
+export interface GetLoyaltyBreadcrumbsData {
+  all_loyalty_page: AllLoyaltyPageResponse
+}
+
 interface AccountPageBreadcrumbRefs extends System {
   breadcrumbs: {
     parentsConnection: Edges<System>
   }
 }
 
+interface LoyaltyBreadcrumbRefs extends System {
+  web: {
+    breadcrumbss: {
+      parentsConnection: Edges<System>
+    }
+  }
+}
+
 interface AllAccountPageRefsResponse
   extends AllRequestResponse<AccountPageBreadcrumbRefs> {}
 
+interface AllLoyaltyPageRefsResponse
+  extends AllRequestResponse<LoyaltyBreadcrumbRefs> {}
+
 export interface GetMyPagesBreadcrumbsRefsData {
   all_account_page: AllAccountPageRefsResponse
 }
+
+export interface GetLoyaltyBreadcrumbsRefsData {
+  all_loyalty_page: AllLoyaltyPageRefsResponse
+}