feat(SW-190): added hero to static content pages

server/routers/contentstack/loyaltyPage/output.ts

@@ -191,11 +191,8 @@ const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [
 
 export const validateLoyaltyPageSchema = z.object({
   heading: z.string().nullable(),
-  header: z
-    .object({
-      hero_image: z.any(),
-    })
-    .nullable(),
+  preamble: z.string().nullable(),
+  hero_image: z.any().nullable(),
   blocks: z.array(loyaltyPageBlockItem).nullable(),
   sidebar: z.array(loyaltyPageSidebarItem).nullable(),
   system: z.object({
@@ -263,7 +260,11 @@ export type Sidebar =
   | SideBarDynamicContent
 type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema>
 
-export type LoyaltyPage = Omit<LoyaltyPageDataRaw, "blocks" | "sidebar"> & {
+export type LoyaltyPage = Omit<
+  LoyaltyPageDataRaw,
+  "blocks" | "sidebar" | "hero_image"
+> & {
+  hero_image?: ImageVaultAsset
   blocks: Block[]
   sidebar: Sidebar[]
 }

server/routers/contentstack/loyaltyPage/query.ts

@@ -12,7 +12,6 @@ import {
   generateTag,
   generateTags,
 } from "@/utils/generateTag"
-import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
 import { removeMultipleSlashes } from "@/utils/url"
 
 import { removeEmptyObjects } from "../../utils"
@@ -22,9 +21,8 @@ import {
   validateLoyaltyPageRefsSchema,
   validateLoyaltyPageSchema,
 } from "./output"
-import { getConnections } from "./utils"
+import { getConnections, makeButtonObject, makeImageVaultImage } from "./utils"
 
-import { InsertResponse } from "@/types/components/imageVaultImage"
 import {
   LoyaltyBlocksTypenameEnum,
   LoyaltyCardsGridEnum,
@@ -35,35 +33,6 @@ import {
   TrackingSDKPageData,
 } from "@/types/components/tracking"
 
-function makeImageVaultImage(image: any) {
-  return image && !!Object.keys(image).length
-    ? insertResponseToImageVaultAsset(image as InsertResponse)
-    : undefined
-}
-
-function makeButtonObject(button: any) {
-  if (!button) return null
-
-  const isContenstackLink =
-    button?.is_contentstack_link || button.linkConnection?.edges?.length
-
-  return {
-    openInNewTab: button?.open_in_new_tab,
-    title:
-      button.cta_text ||
-      (isContenstackLink
-        ? button.linkConnection.edges[0].node.title
-        : button.external_link.title),
-    href: isContenstackLink
-      ? button.linkConnection.edges[0].node.web?.original_url ||
-        removeMultipleSlashes(
-          `/${button.linkConnection.edges[0].node.system.locale}/${button.linkConnection.edges[0].node.url}`
-        )
-      : button.external_link.href,
-    isExternal: !isContenstackLink,
-  }
-}
-
 export const loyaltyPageQueryRouter = router({
   get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {
     const { lang, uid } = ctx
@@ -208,17 +177,10 @@ export const loyaltyPageQueryRouter = router({
         })
       : null
 
-    const header = response.data.loyalty_page.header
-      ? {
-          hero_image: makeImageVaultImage(
-            response.data.loyalty_page.header.hero_image
-          ),
-        }
-      : null
-
     const loyaltyPage = {
       heading: response.data.loyalty_page.heading,
-      header,
+      preamble: response.data.loyalty_page.preamble,
+      hero_image: makeImageVaultImage(response.data.loyalty_page.hero_image),
       system: response.data.loyalty_page.system,
       blocks,
       sidebar,

server/routers/contentstack/loyaltyPage/utils.ts

@@ -1,5 +1,9 @@
+import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
+import { removeMultipleSlashes } from "@/utils/url"
+
 import { LoyaltyPageRefsDataRaw } from "./output"
 
+import { InsertResponse } from "@/types/components/imageVaultImage"
 import {
   LoyaltyBlocksTypenameEnum,
   LoyaltyCardsGridEnum,
@@ -77,3 +81,32 @@ export function getConnections(refs: LoyaltyPageRefsDataRaw) {
 
   return connections
 }
+
+export function makeImageVaultImage(image: any) {
+  return image && !!Object.keys(image).length
+    ? insertResponseToImageVaultAsset(image as InsertResponse)
+    : undefined
+}
+
+export function makeButtonObject(button: any) {
+  if (!button) return null
+
+  const isContenstackLink =
+    button?.is_contentstack_link || button.linkConnection?.edges?.length
+
+  return {
+    openInNewTab: button?.open_in_new_tab,
+    title:
+      button.cta_text ||
+      (isContenstackLink
+        ? button.linkConnection.edges[0].node.title
+        : button.external_link.title),
+    href: isContenstackLink
+      ? button.linkConnection.edges[0].node.web?.original_url ||
+        removeMultipleSlashes(
+          `/${button.linkConnection.edges[0].node.system.locale}/${button.linkConnection.edges[0].node.url}`
+        )
+      : button.external_link.href,
+    isExternal: !isContenstackLink,
+  }
+}