fix(SW-190): added imageVaultAsset schema

components/ContentType/ContentPage/index.tsx

@@ -16,7 +16,7 @@ export default async function ContentPage() {
   }
 
   const { tracking, contentPage } = contentPageRes
-  const heroImage = contentPage.hero_image
+  const heroImage = contentPage.heroImage
 
   return (
     <>

components/ContentType/LoyaltyPage/index.tsx

@@ -19,7 +19,7 @@ export default async function LoyaltyPage() {
   }
 
   const { tracking, loyaltyPage } = loyaltyPageRes
-  const heroImage = loyaltyPage.hero_image
+  const heroImage = loyaltyPage.heroImage
   return (
     <>
       <section className={styles.content}>

components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts

@@ -2,7 +2,7 @@ import { loyaltyCardVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
 
-import { ImageVaultAsset } from "@/types/components/imageVaultImage"
+import { ImageVaultAsset } from "@/types/components/imageVault"
 
 export interface LoyaltyCardProps
   extends React.HTMLAttributes<HTMLDivElement>,

server/routers/contentstack/contentPage/output.ts

@@ -2,6 +2,8 @@ import { z } from "zod"
 
 import { Lang } from "@/constants/languages"
 
+import { imageVaultAssetSchema } from "../schemas/imageVault"
+
 export const validateContentPageSchema = z.object({
   content_page: z.object({
     title: z.string(),
@@ -9,7 +11,7 @@ export const validateContentPageSchema = z.object({
       heading: z.string(),
       preamble: z.string(),
     }),
-    hero_image: z.any().nullable(),
+    hero_image: imageVaultAssetSchema.nullable().optional(),
     system: z.object({
       uid: z.string(),
       locale: z.nativeEnum(Lang),

server/routers/contentstack/contentPage/query.ts

@@ -45,7 +45,7 @@ export const contentPageQueryRouter = router({
     const contentPageData = validatedContentPage.data.content_page
     const contentPage: ContentPage = {
       ...contentPageData,
-      hero_image: makeImageVaultImage(contentPageData.hero_image),
+      heroImage: makeImageVaultImage(contentPageData.hero_image),
     }
 
     const tracking: TrackingSDKPageData = {

server/routers/contentstack/loyaltyPage/output.ts

@@ -2,7 +2,9 @@ import { z } from "zod"
 
 import { Lang } from "@/constants/languages"
 
-import { ImageVaultAsset } from "@/types/components/imageVaultImage"
+import { imageVaultAssetSchema } from "../schemas/imageVault"
+
+import { ImageVaultAsset } from "@/types/components/imageVault"
 import {
   JoinLoyaltyContactTypenameEnum,
   LoyaltyBlocksTypenameEnum,
@@ -192,7 +194,7 @@ const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [
 export const validateLoyaltyPageSchema = z.object({
   heading: z.string().nullable(),
   preamble: z.string().nullable(),
-  hero_image: z.any().nullable(),
+  hero_image: imageVaultAssetSchema.nullable().optional(),
   blocks: z.array(loyaltyPageBlockItem).nullable(),
   sidebar: z.array(loyaltyPageSidebarItem).nullable(),
   system: z.object({
@@ -264,7 +266,7 @@ export type LoyaltyPage = Omit<
   LoyaltyPageDataRaw,
   "blocks" | "sidebar" | "hero_image"
 > & {
-  hero_image?: ImageVaultAsset
+  heroImage?: ImageVaultAsset
   blocks: Block[]
   sidebar: Sidebar[]
 }

server/routers/contentstack/loyaltyPage/query.ts

@@ -85,6 +85,18 @@ export const loyaltyPageQueryRouter = router({
       throw notFound(response)
     }
 
+    const validatedLoyaltyPage = validateLoyaltyPageSchema.safeParse(
+      response.data.loyalty_page
+    )
+
+    if (!validatedLoyaltyPage.success) {
+      console.error(
+        `Failed to validate Loyaltypage Data - (lang: ${lang}, uid: ${uid})`
+      )
+      console.error(validatedLoyaltyPage.error)
+      return null
+    }
+
     const blocks = response.data.loyalty_page.blocks
       ? response.data.loyalty_page.blocks.map((block: any) => {
           switch (block.__typename) {
@@ -178,26 +190,17 @@ export const loyaltyPageQueryRouter = router({
         })
       : null
 
-    const loyaltyPage = {
+    console.log({ HERO_IMAGE: response.data.loyalty_page.hero_image })
+
+    const loyaltyPage: LoyaltyPage = {
       heading: response.data.loyalty_page.heading,
       preamble: response.data.loyalty_page.preamble,
-      hero_image: makeImageVaultImage(response.data.loyalty_page.hero_image),
+      heroImage: makeImageVaultImage(response.data.loyalty_page.hero_image),
       system: response.data.loyalty_page.system,
       blocks,
       sidebar,
     }
 
-    const validatedLoyaltyPage =
-      validateLoyaltyPageSchema.safeParse(loyaltyPage)
-
-    if (!validatedLoyaltyPage.success) {
-      console.error(
-        `Failed to validate Loyaltypage Data - (lang: ${lang}, uid: ${uid})`
-      )
-      console.error(validatedLoyaltyPage.error)
-      return null
-    }
-
     const loyaltyTrackingData: TrackingSDKPageData = {
       pageId: response.data.loyalty_page.system.uid,
       lang: response.data.loyalty_page.system.locale as Lang,
@@ -209,7 +212,7 @@ export const loyaltyPageQueryRouter = router({
 
     // Assert LoyaltyPage type to get correct typings for RTE fields
     return {
-      loyaltyPage: validatedLoyaltyPage.data as LoyaltyPage,
+      loyaltyPage,
       tracking: loyaltyTrackingData,
     }
   }),

server/routers/contentstack/schemas/imageVault.ts

@@ -0,0 +1,95 @@
+import { z } from "zod"
+
+const metaData = z.object({
+  DefinitionType: z.number().nullable().optional(),
+  Description: z.string().nullable(),
+  LanguageId: z.number().nullable(),
+  MetadataDefinitionId: z.number(),
+  Name: z.string(),
+  Value: z.string().nullable(),
+})
+
+/**
+ * Defines a media asset, original or conversion
+ */
+const mediaConversion = z.object({
+  /**
+   * Aspect ratio of the conversion
+   */
+  AspectRatio: z.number(),
+  /**
+   * Content type of the conversion
+   */
+  ContentType: z.string(),
+  /**
+   * Aspect ratio of the selected/requested format
+   */
+  FormatAspectRatio: z.number(),
+  /**
+   * Height of the selected/requested format
+   */
+  FormatHeight: z.number(),
+  /**
+   * Width of the selected/requested format
+   */
+  FormatWidth: z.number(),
+  /**
+   * Height, in pixels, of the conversion
+   */
+  Height: z.number(),
+  /**
+   * Html representing the conversion
+   */
+  Html: z.string(),
+  /**
+   * Id of the selected media format
+   */
+  MediaFormatId: z.number(),
+  /**
+   * Name of the media format
+   */
+  MediaFormatName: z.string(),
+  /**
+   * Name of the conversion
+   */
+  Name: z.string(),
+  /**
+   * The url to the conversion
+   */
+  Url: z.string(),
+  /**
+   * Width, in pixels, of the conversion
+   */
+  Width: z.number(),
+})
+
+/**
+ * The response from ImageVault when inserting an asset
+ */
+export const imageVaultAssetSchema = z.object({
+  /**
+   * The media item id of the asset
+   */
+  Id: z.number(),
+  /**
+   * The id of the vault where the asset resides
+   */
+  VaultId: z.number(),
+  /**
+   * The name of the asset
+   */
+  Name: z.string(),
+  /**
+   * The conversion selected by the user. Is an array but will only contain one object
+   */
+  MediaConversions: z.array(mediaConversion),
+  Metadata: z.array(metaData),
+  /**
+   * Date when the asset was added to ImageVault
+   */
+  DateAdded: z.string(),
+  /**
+   * Name of the user that added the asset to ImageVault
+   */
+  AddedBy: z.string(),
+})

types/components/imageContainer.ts

@@ -1,4 +1,4 @@
-import type { ImageVaultAsset } from "./imageVaultImage"
+import type { ImageVaultAsset } from "./imageVault"
 
 export type ImageContainerProps = {
   leftImage: ImageVaultAsset

types/components/imageVault.ts

@@ -0,0 +1,26 @@
+/**
+ * @file TypeScript typings for ImageVault
+ *
+ * The types in this file are based on the source maps of the downloaded
+ * distribution at https://clientscript.imagevault.se/Installation/ImageVaultInsertMedia
+ *
+ * They have been clean up and amended to.
+ */
+
+import { z } from "zod"
+
+import { imageVaultAssetSchema } from "@/server/routers/contentstack/schemas/imageVault"
+
+export type ImageVaultAssetResponse = z.infer<typeof imageVaultAssetSchema>
+
+export type ImageVaultAsset = {
+  id: number
+  title: string
+  url: string
+  dimensions: {
+    width: number
+    height: number
+    aspectRatio: number
+  }
+  meta: { alt: string | undefined | null; caption: string | undefined | null }
+}

types/components/imageVaultImage.ts

@@ -1,115 +0,0 @@
-/**
- * @file TypeScript typings for ImageVault
- *
- * The types in this file are based on the source maps of the downloaded
- * distribution at https://clientscript.imagevault.se/Installation/ImageVaultInsertMedia
- *
- * They have been clean up and amended to.
- */
-
-export type MetaData = {
-  DefinitionType?: number
-  Description: string | null
-  LanguageId: null
-  MetadataDefinitionId: number
-  Name: string
-  Value: string
-}
-
-export type ImageVaultAsset = {
-  id: number
-  title: string
-  url: string
-  dimensions: {
-    width: number
-    height: number
-    aspectRatio: number
-  }
-  meta: { alt: string | undefined; caption: string | undefined }
-}
-
-/**
- * The response from ImageVault when inserting an asset
- */
-export declare class InsertResponse {
-  /**
-   * The media item id of the asset
-   */
-  Id: number
-  /**
-   * The id of the vault where the asset resides
-   */
-  VaultId: number
-  /**
-   * The name of the asset
-   */
-  Name: string
-  /**
-   * The conversion selected by the user. Is an array but will only contain one object
-   */
-  MediaConversions: MediaConversion[]
-  /**
-   * Date when the asset was added to ImageVault
-   */
-  DateAdded: string
-  /**
-   * Name of the user that added the asset to ImageVault
-   */
-  AddedBy: string
-
-  Metadata?: MetaData[] | undefined
-}
-
-/**
- * Defines a media asset, original or conversion
- */
-export declare class MediaConversion {
-  /**
-   * The url to the conversion
-   */
-  Url: string
-  /**
-   * Name of the conversion
-   */
-  Name: string
-  /**
-   * Html representing the conversion
-   */
-  Html: string
-  /**
-   * Content type of the conversion
-   */
-  ContentType: string
-  /**
-   * Width, in pixels, of the conversion
-   */
-  Width: number
-  /**
-   * Height, in pixels, of the conversion
-   */
-  Height: number
-  /**
-   * Aspect ratio of the conversion
-   */
-  AspectRatio: number
-  /**
-   * Width of the selected/requested format
-   */
-  FormatWidth: number
-  /**
-   * Height of the selected/requested format
-   */
-  FormatHeight: number
-  /**
-   * Aspect ratio of the selected/requested format
-   */
-  FormatAspectRatio: number
-  /**
-   * Name of the media format
-   */
-  MediaFormatName: string
-  /**
-   * Id of the selected media format
-   */
-  MediaFormatId: number
-}

types/requests/imageContainer.ts

@@ -1,11 +1,11 @@
-import { InsertResponse } from "../components/imageVaultImage"
+import { ImageVaultAssetResponse } from "../components/imageVault"
 import { EmbedEnum } from "./utils/embeds"
 import { Typename } from "./utils/typename"
 
 export type ImageContainer = Typename<
   {
-    image_left: InsertResponse
+    image_left: ImageVaultAssetResponse
-    image_right: InsertResponse
+    image_right: ImageVaultAssetResponse
     system: {
       uid: string
     }

types/rte/attrs.ts

@@ -1,4 +1,4 @@
-import { InsertResponse } from "../components/imageVaultImage"
+import { ImageVaultAssetResponse } from "../components/imageVault"
 import { RTEItemTypeEnum } from "./enums"
 
 import type { Lang } from "@/constants/languages"
@@ -39,7 +39,9 @@ export interface RTELinkAttrs extends Attributes {
   type: RTEItemTypeEnum.entry
 }
 
-export interface RTEImageVaultAttrs extends Attributes, InsertResponse {
+export interface RTEImageVaultAttrs
+  extends Attributes,
+    ImageVaultAssetResponse {
   height: string
   width: string
   style: string[]

types/trpc/routers/contentstack/contentPage.ts

@@ -2,12 +2,12 @@ import { z } from "zod"
 
 import { validateContentPageSchema } from "@/server/routers/contentstack/contentPage/output"
 
-import { ImageVaultAsset } from "@/types/components/imageVaultImage"
+import { ImageVaultAsset } from "@/types/components/imageVault"
 
 export type ContentPageDataRaw = z.infer<typeof validateContentPageSchema>
 
 type ContentPageRaw = ContentPageDataRaw["content_page"]
 
 export type ContentPage = Omit<ContentPageRaw, "hero_image"> & {
-  hero_image?: ImageVaultAsset
+  heroImage?: ImageVaultAsset
 }

utils/imageVault.ts

@@ -1,10 +1,10 @@
 import {
   ImageVaultAsset,
-  InsertResponse,
+  ImageVaultAssetResponse,
-} from "@/types/components/imageVaultImage"
+} from "@/types/components/imageVault"
 
 export function insertResponseToImageVaultAsset(
-  response: InsertResponse
+  response: ImageVaultAssetResponse
 ): ImageVaultAsset {
   const alt = response.Metadata?.find((meta) =>
     meta.Name.includes("AltText_")
@@ -32,6 +32,6 @@ export function insertResponseToImageVaultAsset(
 
 export function makeImageVaultImage(image: any) {
   return image && !!Object.keys(image).length
-    ? insertResponseToImageVaultAsset(image as InsertResponse)
+    ? insertResponseToImageVaultAsset(image as ImageVaultAssetResponse)
     : undefined
 }