feat: add new cards grid block

2024-05-21 13:45:52 +02:00
parent 92879b623b
commit 7d982aad18
16 changed files with 402 additions and 205 deletions
--- a/server/routers/contentstack/loyaltyPage/output.ts
+++ b/server/routers/contentstack/loyaltyPage/output.ts
@@ -13,37 +13,22 @@ import { PageLinkEnum } from "@/types/requests/pageLinks"
 import { EdgesWithTotalCount } from "@/types/requests/utils/edges"
 import { RTEDocument } from "@/types/rte/node"

-const loyaltyPageBlockCardGrid = z.object({
-  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid),
-  card_grid: z.object({
-    title: z.string().nullable(),
-    subtitle: z.string().nullable(),
-    cards: z.array(
-      z.object({
-        title: z.string().nullable(),
-        subtitle: z.string().nullable(),
-        referenceConnection: z.object({
-          edges: z.array(
-            z.object({
-              node: z.object({
-                system: z.object({
-                  uid: z.string(),
-                  locale: z.nativeEnum(Lang),
-                }),
-                url: z.string(),
-                title: z.string(),
-                __typename: z.string(),
-              }),
-            })
-          ),
-          totalCount: z.number(),
+const pageLink = z.object({
+  edges: z.array(
+    z.object({
+      node: z.object({
+        system: z.object({
+          uid: z.string(),
+          locale: z.nativeEnum(Lang),
        }),
-        open_in_new_tab: z.boolean(),
-        cta_text: z.string().nullable(),
-      })
-    ),
-  }),
+        url: z.string(),
+        title: z.string(),
+        __typename: z.string(),
+      }),
+    })
+  ),
 })
+
 const loyaltyPageDynamicContent = z.object({
  __typename: z.literal(
    LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent
@@ -93,7 +78,8 @@ const loyaltyPageShortcuts = z.object({
                  .object({
                    original_url: z.string().nullable(),
                  })
-                  .nullable(),
+                  .nullable()
+                  .optional(),
                title: z.string(),
              }),
            })
@@ -107,6 +93,59 @@ const loyaltyPageShortcuts = z.object({
  }),
 })

+const cardBlock = z.object({
+  heading: z.string().nullable(),
+  body_text: z.string().nullable(),
+  background_image: z.any(),
+  scripted_top_title: z.string().nullable(),
+  primary_button: z
+    .object({
+      is_contentstack_link: z.boolean(),
+      cta_text: z.string().nullable(),
+      open_in_new_tab: z.boolean(),
+      external_link: z.object({
+        title: z.string().nullable(),
+        href: z.string().nullable(),
+      }),
+      linkConnection: pageLink,
+    })
+    .nullable(),
+  secondary_button: z
+    .object({
+      is_contentstack_link: z.boolean(),
+      cta_text: z.string().nullable(),
+      open_in_new_tab: z.boolean().nullable(),
+      external_link: z.object({
+        title: z.string().nullable(),
+        href: z.string().nullable(),
+      }),
+      linkConnection: pageLink,
+    })
+    .nullable(),
+
+  system: z.object({
+    locale: z.nativeEnum(Lang),
+    uid: z.string(),
+  }),
+})
+
+const loyaltyPageCards = z.object({
+  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid),
+  cards_grid: z.object({
+    title: z.string().nullable(),
+    preamble: z.string().nullable(),
+    layout: z.enum(["twoColumnGrid", "threeColumnGrid", "twoPlusOne"]),
+    theme: z.enum(["one", "two", "three"]).nullable(),
+    cardConnection: z.object({
+      edges: z.array(
+        z.object({
+          node: cardBlock,
+        })
+      ),
+    }),
+  }),
+})
+
 const loyaltyPageBlockTextContent = z.object({
  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent),
  content: z.object({
@@ -121,10 +160,10 @@ const loyaltyPageBlockTextContent = z.object({
 })

 const loyaltyPageBlockItem = z.discriminatedUnion("__typename", [
-  loyaltyPageBlockCardGrid,
  loyaltyPageDynamicContent,
  loyaltyPageBlockTextContent,
  loyaltyPageShortcuts,
+  loyaltyPageCards,
 ])

 const loyaltyPageSidebarTextContent = z.object({
@@ -178,26 +217,6 @@ export const validateLoyaltyPageSchema = z.object({
 })

 // Block types
-type CardGridRaw = z.infer<typeof loyaltyPageBlockCardGrid>
-
-export type CardGridCard = Omit<
-  CardGridRaw["card_grid"]["cards"][number],
-  "referenceConnection"
-> & {
-  link:
-    | {
-        href: string
-        title: string
-      }
-    | undefined
-}
-
-export type CardGrid = Omit<CardGridRaw, "card_grid"> & {
-  card_grid: Omit<CardGridRaw["card_grid"], "cards"> & {
-    cards: CardGridCard[]
-  }
-}
-
 type DynamicContentRaw = z.infer<typeof loyaltyPageDynamicContent>

 export type DynamicContent = Omit<DynamicContentRaw, "dynamic_content"> & {
@@ -222,6 +241,43 @@ export interface RteBlockContent extends BlockContentRaw {
  }
 }

+type CardsGridRaw = z.infer<typeof loyaltyPageCards>
+
+export type CardsGrid = Omit<CardsGridRaw, "cards_grid"> & {
+  cards_grid: Omit<CardsGridRaw["cards_grid"], "cardConnection"> & {
+    cards: {
+      system: {
+        locale: Lang
+        uid: string
+      }
+      heading: string | null
+      body_text: string | null
+      scripted_top_title: string | null
+      primaryButton:
+        | {
+            open_in_new_tab: boolean
+            link: {
+              title: string
+              href: string
+            }
+            isExternal: boolean
+          }
+        | undefined
+      secondaryButton:
+        | {
+            open_in_new_tab: boolean
+            link: {
+              title: string
+              href: string
+            }
+            isExternal: boolean
+          }
+        | undefined
+      background_image?: any
+    }[]
+  }
+}
+
 type ShortcutsRaw = z.infer<typeof loyaltyPageShortcuts>

 export type Shortcuts = Omit<ShortcutsRaw, "shortcuts"> & {
@@ -235,7 +291,7 @@ export type Shortcuts = Omit<ShortcutsRaw, "shortcuts"> & {
  }
 }

-export type Block = CardGrid | RteBlockContent | DynamicContent | Shortcuts
+export type Block = RteBlockContent | DynamicContent | Shortcuts | CardsGrid

 // Sidebar block types
 type SidebarContentRaw = z.infer<typeof loyaltyPageSidebarTextContent>
@@ -275,14 +331,34 @@ const pageConnectionRefs = z.object({
  ),
 })

-const loyaltyPageBlockCardGridRefs = z.object({
-  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid),
-  card_grid: z.object({
-    cards: z.array(
-      z.object({
-        referenceConnection: pageConnectionRefs,
-      })
-    ),
+const cardBlockRefs = z.object({
+  primary_button: z
+    .object({
+      linkConnection: pageConnectionRefs,
+    })
+    .nullable(),
+  secondary_button: z
+    .object({
+      linkConnection: pageConnectionRefs,
+    })
+    .nullable(),
+
+  system: z.object({
+    content_type_uid: z.string(),
+    uid: z.string(),
+  }),
+})
+
+const loyaltyPageCardsRefs = z.object({
+  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid),
+  cards_grid: z.object({
+    cardConnection: z.object({
+      edges: z.array(
+        z.object({
+          node: cardBlockRefs,
+        })
+      ),
+    }),
  }),
 })

@@ -318,10 +394,10 @@ const loyaltyPageBlockTextContentRefs = z.object({
 })

 const loyaltyPageBlocRefsItem = z.discriminatedUnion("__typename", [
-  loyaltyPageBlockCardGridRefs,
  loyaltyPageDynamicContentRefs,
  loyaltyPageBlockTextContentRefs,
  loyaltyPageShortcutsRefs,
+  loyaltyPageCardsRefs,
 ])

 const loyaltyPageSidebarTextContentRef = z.object({
--- a/server/routers/contentstack/loyaltyPage/query.ts
+++ b/server/routers/contentstack/loyaltyPage/query.ts
@@ -60,6 +60,8 @@ export const loyaltyPageQueryRouter = router({
    const validatedLoyaltyPageRefs =
      validateLoyaltyPageRefsSchema.safeParse(cleanedData)
    if (!validatedLoyaltyPageRefs.success) {
+      console.error("Bad validation for `GetLoyaltyPageRefs`")
+      console.error(validatedLoyaltyPageRefs.error)
      throw internalServerError(validatedLoyaltyPageRefs.error)
    }

@@ -114,24 +116,6 @@ export const loyaltyPageQueryRouter = router({
    const blocks = validatedLoyaltyPage.data.loyalty_page.blocks
      ? validatedLoyaltyPage.data.loyalty_page.blocks.map((block) => {
          switch (block.__typename) {
-            case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid:
-              return {
-                ...block,
-                card_grid: {
-                  ...block.card_grid,
-                  cards: block.card_grid.cards.map((card) => {
-                    return {
-                      ...card,
-                      link: card.referenceConnection.totalCount
-                        ? {
-                            href: `/${card.referenceConnection.edges[0].node.system.locale}${card.referenceConnection.edges[0].node.url}`,
-                            title: card.cta_text || _("Read more"),
-                          }
-                        : undefined,
-                    }
-                  }),
-                },
-              }
            case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
              return {
                ...block,
@@ -174,6 +158,70 @@ export const loyaltyPageQueryRouter = router({
                  })),
                },
              }
+            case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid:
+              return {
+                ...block,
+                cards_grid: {
+                  ...block.cards_grid,
+                  cards: block.cards_grid.cardConnection.edges.map(
+                    ({ node: card }) => {
+                      const primaryButton = card.primary_button
+                        ? {
+                            open_in_new_tab:
+                              card.primary_button.open_in_new_tab,
+                            link: {
+                              title:
+                                card.primary_button.cta_text ||
+                                (card.primary_button.is_contentstack_link &&
+                                card.primary_button.linkConnection.edges.length
+                                  ? card.primary_button.linkConnection.edges[0]
+                                      .node.title
+                                  : card.primary_button.external_link.title),
+                              href:
+                                card.primary_button.is_contentstack_link &&
+                                card.primary_button.linkConnection.edges.length
+                                  ? `/${card.primary_button.linkConnection.edges[0].node.system.locale}${card.primary_button.linkConnection.edges[0].node.url}`
+                                  : card.primary_button.external_link.href,
+                            },
+                            isExternal:
+                              !card.primary_button.is_contentstack_link,
+                          }
+                        : undefined
+
+                      const secondaryButton = card.secondary_button
+                        ? {
+                            open_in_new_tab:
+                              card.secondary_button.open_in_new_tab,
+                            link: {
+                              title:
+                                card.secondary_button.cta_text ||
+                                (card.secondary_button.is_contentstack_link &&
+                                card.secondary_button.linkConnection.edges
+                                  .length
+                                  ? card.secondary_button.linkConnection
+                                      .edges[0].node.title
+                                  : card.secondary_button.external_link.title),
+                              href:
+                                card.secondary_button.is_contentstack_link &&
+                                card.secondary_button.linkConnection.edges
+                                  .length
+                                  ? `/${card.secondary_button.linkConnection.edges[0].node.system.locale}${card.secondary_button.linkConnection.edges[0].node.url}`
+                                  : card.secondary_button.external_link.title,
+                            },
+                            isExternal:
+                              !card.secondary_button.is_contentstack_link,
+                          }
+                        : undefined
+
+                      return {
+                        ...card,
+                        primaryButton,
+                        secondaryButton,
+                      }
+                    }
+                  ),
+                },
+              }
            default:
              return block
          }
--- a/server/routers/contentstack/loyaltyPage/utils.ts
+++ b/server/routers/contentstack/loyaltyPage/utils.ts
@@ -15,12 +15,16 @@ export function getConnections(refs: LoyaltyPageRefsDataRaw) {
          }
          break
        }
-        case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid: {
-          item.card_grid.cards.forEach((card) => {
-            if (card.referenceConnection.edges.length) {
-              connections.push(card.referenceConnection)
+        case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid: {
+          connections.push(item.cards_grid.cardConnection)
+          item.cards_grid.cardConnection.edges.forEach((card) => {
+            if (card.node.primary_button) {
+              connections.push(card.node.primary_button?.linkConnection)
+            } else if (card.node.secondary_button) {
+              connections.push(card.node.secondary_button?.linkConnection)
            }
          })
+
          break
        }
        case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts: {