feat(WEB-304): remaning UI from design system primitives

server/routers/contentstack/myPages/navigation/output.ts

@@ -4,18 +4,47 @@ import { Lang } from "@/constants/languages"
 
 import { PageLinkEnum } from "@/types/requests/pageLinks"
 
+const node = z.object({
+  system: z.object({
+    locale: z.nativeEnum(Lang),
+    uid: z.string(),
+  }),
+  title: z.string(),
+  url: z.string(),
+})
+
+const web = z.object({
+  original_url: z.string().optional(),
+})
+
+const accountPageLink = z
+  .object({
+    __typename: z.literal(PageLinkEnum.AccountPage),
+  })
+  .merge(node)
+
+const contentPageLink = z
+  .object({
+    __typename: z.literal(PageLinkEnum.ContentPage),
+    web,
+  })
+  .merge(node)
+
+const loyaltyPageLink = z
+  .object({
+    __typename: z.literal(PageLinkEnum.LoyaltyPage),
+    web,
+  })
+  .merge(node)
+
 const pageConnection = z.object({
   edges: z.array(
     z.object({
-      node: z.object({
-        __typename: z.nativeEnum(PageLinkEnum),
-        system: z.object({
-          locale: z.nativeEnum(Lang),
-          uid: z.string(),
-        }),
-        title: z.string(),
-        url: z.string(),
-      }),
+      node: z.discriminatedUnion("__typename", [
+        accountPageLink,
+        contentPageLink,
+        loyaltyPageLink,
+      ]),
     })
   ),
 })
@@ -36,78 +65,58 @@ const pageConnectionRefs = z.object({
 
 export const navigationRefsPayloadSchema = z.object({
   all_navigation_my_pages: z.object({
-    items: z
-      .array(
-        z.object({
-          items: z.array(
-            z.object({
-              __typename: z.string(),
-              item: z.object({
-                sub_items: z.array(
-                  z.object({
-                    __typename: z.string(),
-                    item: z.object({
-                      pageConnection: pageConnectionRefs,
-                    }),
-                  })
-                ),
-                pageConnection: pageConnectionRefs,
-              }),
-            })
-          ),
-          system: z.object({
-            content_type_uid: z.string(),
-            uid: z.string(),
-          }),
-        })
-      )
-      .refine(
-        (input) => {
-          return input.length === 1
-        },
-        {
-          message: `Expected all_navigation_my_pages items to only contain 1 in navigationRefsPayloadSchema`,
-        }
-      ),
+    items: z.array(
+      z.object({
+        menu_items: z.array(
+          z.object({
+            links: z.array(
+              z.object({
+                page: pageConnectionRefs,
+              })
+            ),
+          })
+        ),
+        system: z.object({
+          content_type_uid: z.string(),
+          uid: z.string(),
+        }),
+      })
+    ),
   }),
 })
 
+export type GetNavigationMyPagesRefsData = z.infer<
+  typeof navigationRefsPayloadSchema
+>
+
+const menuItems = z.array(
+  z.object({
+    display_sign_out_link: z.boolean(),
+    links: z.array(
+      z.object({
+        link_text: z.string().default(""),
+        page: pageConnection,
+      })
+    ),
+  })
+)
+
+export type MenuItems = z.infer<typeof menuItems>
+
 export const navigationPayloadSchema = z.object({
   all_navigation_my_pages: z.object({
-    items: z
-      .array(
-        z.object({
-          items: z.array(
-            z.object({
-              item: z.object({
-                link_text: z.string().default(""),
-                pageConnection,
-                sub_items: z.array(
-                  z.object({
-                    item: z.object({
-                      link_text: z.string().default(""),
-                      pageConnection,
-                    }),
-                  })
-                ),
-              }),
-            })
-          ),
-          title: z.string(),
-        })
-      )
-      .refine(
-        (input) => {
-          return input.length === 1
-        },
-        {
-          message: `Expected all_navigation_my_pages items to only contain 1 in navigationPayloadSchema`,
-        }
-      ),
+    items: z.array(
+      z.object({
+        menu_items: menuItems,
+        title: z.string(),
+      })
+    ),
   }),
 })
 
-const baseMenuItem = z.object({
+export type GetNavigationMyPagesData = z.infer<typeof navigationPayloadSchema>
+
+const link = z.object({
   lang: z.nativeEnum(Lang),
   linkText: z.string(),
   uid: z.string(),
@@ -116,12 +125,11 @@ const baseMenuItem = z.object({
 })
 
 export const getNavigationSchema = z.object({
-  items: z.array(
-    z
-      .object({
-        subItems: z.array(baseMenuItem),
-      })
-      .merge(baseMenuItem)
+  menuItems: z.array(
+    z.object({
+      display_sign_out_link: z.boolean(),
+      links: z.array(link),
+    })
   ),
   title: z.string(),
 })

server/routers/contentstack/myPages/navigation/query.ts

@@ -4,7 +4,7 @@ import {
 } from "@/lib/graphql/Query/NavigationMyPages.graphql"
 import { request } from "@/lib/graphql/request"
 import { internalServerError, notFound } from "@/server/errors/trpc"
-import { contentstackProcedure, publicProcedure, router } from "@/server/trpc"
+import { contentstackBaseProcedure, router } from "@/server/trpc"
 
 import {
   generateRefsResponseTag,
@@ -14,40 +14,46 @@ import {
 import { removeMultipleSlashes } from "@/utils/url"
 
 import {
+  type GetNavigationMyPagesData,
+  type GetNavigationMyPagesRefsData,
   getNavigationSchema,
+  type MenuItems,
   navigationPayloadSchema,
   navigationRefsPayloadSchema,
 } from "./output"
 import { getConnections } from "./utils"
 
-import type {
-  GetNavigationMyPagesData,
-  GetNavigationMyPagesRefsData,
-  MenuItem,
-  NavigationItem,
-} from "@/types/requests/myPages/navigation"
+import { PageLinkEnum } from "@/types/requests/pageLinks"
 
-export function mapMenuItems(navigationItems: NavigationItem[]) {
-  return navigationItems.map(({ item }): MenuItem => {
-    const { node } = item.pageConnection.edges[0]
-
-    const menuItem: MenuItem = {
-      lang: node.system.locale,
-      linkText: item.link_text || node.title,
-      uid: node.system.uid,
-      url: removeMultipleSlashes(`/${node.system.locale}/${node.url}`),
+export function mapMenuItems(menuItems: MenuItems) {
+  return menuItems.map((menuItem) => {
+    return {
+      ...menuItem,
+      links: menuItem.links.map((link) => {
+        const page = link.page.edges[0].node
+        let originalUrl = undefined
+        if (
+          page.__typename === PageLinkEnum.ContentPage ||
+          page.__typename === PageLinkEnum.LoyaltyPage
+        ) {
+          if (page.web.original_url) {
+            originalUrl = page.web.original_url
+          }
+        }
+        return {
+          lang: page.system.locale,
+          linkText: link.link_text ? link.link_text : page.title,
+          uid: page.system.uid,
+          url: removeMultipleSlashes(`/${page.system.locale}/${page.url}`),
+          originalUrl,
+        }
+      }),
     }
-
-    if ("sub_items" in item) {
-      menuItem.subItems = mapMenuItems(item.sub_items)
-    }
-
-    return menuItem
   })
 }
 
 export const navigationQueryRouter = router({
-  get: contentstackProcedure.query(async function ({ ctx }) {
+  get: contentstackBaseProcedure.query(async function ({ ctx }) {
     const { lang } = ctx
 
     const refsResponse = await request<GetNavigationMyPagesRefsData>(
@@ -102,7 +108,7 @@ export const navigationQueryRouter = router({
       validatedMyPagesNavigation.data.all_navigation_my_pages.items[0]
 
     const nav = {
-      items: mapMenuItems(menuItem.items),
+      menuItems: mapMenuItems(menuItem.menu_items),
       title: menuItem.title,
     }
 

server/routers/contentstack/myPages/navigation/utils.ts

@@ -1,15 +1,13 @@
-import type { GetNavigationMyPagesRefsData } from "@/types/requests/myPages/navigation"
 import type { Edges } from "@/types/requests/utils/edges"
 import type { NodeRefs } from "@/types/requests/utils/refs"
+import type { GetNavigationMyPagesRefsData } from "./output"
 
 export function getConnections(refs: GetNavigationMyPagesRefsData) {
   const connections: Edges<NodeRefs>[] = []
   refs.all_navigation_my_pages.items.forEach((ref) => {
-    ref.items.forEach(({ item }) => {
-      connections.push(item.pageConnection)
-
-      item.sub_items.forEach(({ item: subItem }) => {
-        connections.push(subItem.pageConnection)
+    ref.menu_items.forEach((menuItem) => {
+      menuItem.links.map((link) => {
+        connections.push(link.page)
       })
     })
   })