feat: add shortcuts component to loyaltypage

components/Loyalty/Blocks/index.tsx

@@ -1,5 +1,6 @@
 import JsonToHtml from "@/components/JsonToHtml"
 import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
+import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 
 import CardGrid from "./CardGrid"
 
@@ -22,6 +23,14 @@ export function Blocks({ blocks }: BlocksProps) {
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
         return <DynamicContentBlock dynamicContent={block.dynamic_content} />
+      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
+        return (
+          <Shortcuts
+            shortcuts={block.shortcuts.shortcuts}
+            title={block.shortcuts.title}
+            subtitle={block.shortcuts.preamble}
+          />
+        )
       default:
         return null
     }

lib/graphql/Query/LoyaltyPage.graphql

@@ -8,6 +8,27 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
     items {
       blocks {
         __typename
+        ... on LoyaltyPageBlocksShortcuts {
+          shortcuts {
+            title
+            preamble
+            shortcuts {
+              text
+              open_in_new_tab
+              linkConnection {
+                edges {
+                  node {
+                    __typename
+                    ...AccountPageLink
+                    ...LoyaltyPageLink
+                    ...ContentPageLink
+                  }
+                }
+                totalCount
+              }
+            }
+          }
+        }
         ... on LoyaltyPageBlocksDynamicContent {
           dynamic_content {
             title
@@ -58,6 +79,8 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
                   node {
                     __typename
                     ...Image
+                    ...LoyaltyPageLink
+                    ...ContentPageLink
                   }
                 }
                 totalCount
@@ -93,6 +116,8 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
                   node {
                     __typename
                     ...Image
+                    ...LoyaltyPageLink
+                    ...ContentPageLink
                   }
                 }
                 totalCount

server/routers/contentstack/accountPage/output.ts

@@ -12,8 +12,6 @@ import { RTEDocument } from "@/types/rte/node"
 
 const accountPageShortcuts = z.object({
   __typename: z.literal(ContentEntries.AccountPageContentShortcuts),
-  title: z.string().optional(),
-  preamble: z.string().optional(),
   shortcuts: z.object({
     title: z.string().optional(),
     preamble: z.string().optional(),

server/routers/contentstack/loyaltyPage/output.ts

@@ -1,5 +1,7 @@
 import { z } from "zod"
 
+import { Lang } from "@/constants/languages"
+
 import {
   JoinLoyaltyContactTypenameEnum,
   LoyaltyBlocksTypenameEnum,
@@ -55,6 +57,7 @@ const loyaltyPageDynamicContent = z.object({
             node: z.object({
               system: z.object({
                 uid: z.string(),
+                locale: z.nativeEnum(Lang),
               }),
               url: z.string(),
               title: z.string(),
@@ -67,6 +70,40 @@ const loyaltyPageDynamicContent = z.object({
   }),
 })
 
+const loyaltyPageShortcuts = z.object({
+  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts),
+  shortcuts: z.object({
+    title: z.string().optional(),
+    preamble: z.string().optional(),
+    shortcuts: z.array(
+      z.object({
+        linkConnection: z.object({
+          edges: z.array(
+            z.object({
+              node: z.object({
+                system: z.object({
+                  uid: z.string(),
+                  locale: z.nativeEnum(Lang),
+                }),
+                url: z.string(),
+                web: z
+                  .object({
+                    original_url: z.string(),
+                  })
+                  .optional(),
+                title: z.string(),
+              }),
+            })
+          ),
+          totalCount: z.number(),
+        }),
+        text: z.string().optional(),
+        open_in_new_tab: z.boolean(),
+      })
+    ),
+  }),
+})
+
 const loyaltyPageBlockTextContent = z.object({
   __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent),
   content: z.object({
@@ -84,6 +121,7 @@ const loyaltyPageBlockItem = z.discriminatedUnion("__typename", [
   loyaltyPageBlockCardGrid,
   loyaltyPageDynamicContent,
   loyaltyPageBlockTextContent,
+  loyaltyPageShortcuts,
 ])
 
 const loyaltyPageSidebarTextContent = z.object({
@@ -182,7 +220,21 @@ export interface RteBlockContent extends BlockContentRaw {
     }
   }
 }
-export type Block = CardGrid | RteBlockContent | DynamicContent
+
+type ShortcutsRaw = z.infer<typeof loyaltyPageShortcuts>
+
+export type Shortcuts = Omit<ShortcutsRaw, "shortcuts"> & {
+  shortcuts: Omit<ShortcutsRaw["shortcuts"], "shortcuts"> & {
+    shortcuts: {
+      text?: string
+      openInNewTab: boolean
+      url: string
+      title: string
+    }[]
+  }
+}
+
+export type Block = CardGrid | RteBlockContent | DynamicContent | Shortcuts
 
 // Sidebar block types
 type SidebarContentRaw = z.infer<typeof loyaltyPageSidebarTextContent>
@@ -198,7 +250,7 @@ export type RteSidebarContent = Omit<SidebarContentRaw, "content"> & {
 export type JoinLoyaltyContact = z.infer<typeof loyaltyPageJoinLoyaltyContact>
 export type Sidebar = JoinLoyaltyContact | RteSidebarContent
 
-type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema>
+export type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema>
 
 type LoyaltyPageRaw = LoyaltyPageDataRaw["all_loyalty_page"]["items"][0]
 

server/routers/contentstack/loyaltyPage/query.ts

@@ -4,7 +4,11 @@ import { badRequestError } from "@/server/errors/trpc"
 import { publicProcedure, router } from "@/server/trpc"
 
 import { getLoyaltyPageInput } from "./input"
-import { type LoyaltyPage, validateLoyaltyPageSchema } from "./output"
+import {
+  type LoyaltyPage,
+  type LoyaltyPageDataRaw,
+  validateLoyaltyPageSchema,
+} from "./output"
 
 import {
   LoyaltyBlocksTypenameEnum,
@@ -17,7 +21,7 @@ import { RTEDocument } from "@/types/rte/node"
 export const loyaltyPageQueryRouter = router({
   get: publicProcedure.input(getLoyaltyPageInput).query(async ({ input }) => {
     try {
-      const loyaltyPageRes = await request<LoyaltyPage>(GetLoyaltyPage, {
+      const loyaltyPageRes = await request<LoyaltyPageDataRaw>(GetLoyaltyPage, {
         locale: input.locale,
         url: input.href,
       })
@@ -108,6 +112,22 @@ export const loyaltyPageQueryRouter = router({
                     },
                   },
                 }
+              case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
+                return {
+                  ...block,
+                  shortcuts: {
+                    ...block.shortcuts,
+                    shortcuts: block.shortcuts.shortcuts.map((shortcut) => ({
+                      text: shortcut.text,
+                      openInNewTab: shortcut.open_in_new_tab,
+                      ...shortcut.linkConnection.edges[0].node,
+                      url:
+                        shortcut.linkConnection.edges[0].node.web
+                          ?.original_url ||
+                        `/${shortcut.linkConnection.edges[0].node.system.locale}${shortcut.linkConnection.edges[0].node.url}`,
+                    })),
+                  },
+                }
               default:
                 return block
             }

types/components/loyalty/enums.ts

@@ -29,4 +29,5 @@ export enum LoyaltyBlocksTypenameEnum {
   LoyaltyPageBlocksDynamicContent = "LoyaltyPageBlocksDynamicContent",
   LoyaltyPageBlocksCardGrid = "LoyaltyPageBlocksCardGrid",
   LoyaltyPageBlocksContent = "LoyaltyPageBlocksContent",
+  LoyaltyPageBlocksShortcuts = "LoyaltyPageBlocksShortcuts",
 }