feat(SW-2541): Adjust for ImageVault custom field return types changes

Approved-by: Bianca Widstam
Approved-by: Matilda Landström

packages/common/package.json

@@ -45,6 +45,7 @@
     "./utils/chunk": "./utils/chunk.ts",
     "./utils/dateFormatting": "./utils/dateFormatting.ts",
     "./utils/debounce": "./utils/debounce.ts",
+    "./utils/imageVault": "./utils/imageVault.ts",
     "./utils/isDefined": "./utils/isDefined.ts",
     "./utils/isEdge": "./utils/isEdge.ts",
     "./utils/isValidJson": "./utils/isValidJson.ts",

packages/common/utils/imageVault.ts

@@ -0,0 +1,212 @@
+import { z } from "zod"
+
+const focalPointSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+})
+
+const deprecatedMetaDataSchema = z.object({
+  DefinitionType: z.number().nullish(),
+  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 deprecatedMediaConversionSchema = 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 deprecatedImageVaultAssetSchema = 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(deprecatedMediaConversionSchema),
+  Metadata: z.array(deprecatedMetaDataSchema),
+  /**
+   * Date when the asset was added to ImageVault
+   */
+  DateAdded: z.string(),
+  /**
+   * Name of the user that added the asset to ImageVault
+   */
+  AddedBy: z.string(),
+  FocalPoint: focalPointSchema.optional(),
+})
+
+export const imageVaultAssetSchema = z.object({
+  imageVaultId: z.number(),
+  fileName: z.string(),
+  url: z.string(),
+  dimensions: z.object({
+    width: z.number(),
+    height: z.number(),
+    aspectRatio: z.number(),
+  }),
+  focalPoint: focalPointSchema,
+  meta: z.object({ alt: z.string(), caption: z.string() }),
+})
+
+export const transformedImageVaultAssetSchema = imageVaultAssetSchema
+  .or(deprecatedImageVaultAssetSchema)
+  .nullish()
+  .or(
+    // Temp since there is a bug in Contentstack
+    // sending empty objects when there has been an
+    // image selected previously but has since been
+    // deleted
+    z.object({})
+  )
+  .transform((data) => {
+    if (!data || Object.keys(data).length === 0) {
+      return undefined
+    }
+
+    if ("imageVaultId" in data && "fileName" in data) {
+      return mapImageVaultAssetResponseToImageVaultAsset(data)
+    }
+
+    if ("Name" in data && "Id" in data) {
+      return mapInsertResponseToImageVaultAsset(data)
+    }
+  })
+
+export type FocalPoint = z.infer<typeof focalPointSchema>
+
+export type DeprecatedImageVaultAssetResponse = z.infer<
+  typeof deprecatedImageVaultAssetSchema
+>
+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 }
+  focalPoint: FocalPoint
+}
+
+export function mapInsertResponseToImageVaultAsset(
+  response: DeprecatedImageVaultAssetResponse
+): ImageVaultAsset {
+  const alt = response.Metadata?.find((meta) =>
+    meta.Name.includes("AltText_")
+  )?.Value
+
+  const caption = response.Metadata?.find((meta) =>
+    meta.Name.includes("Title_")
+  )?.Value
+
+  const mediaConversion = response.MediaConversions[0]
+  const aspectRatio =
+    mediaConversion.FormatAspectRatio ||
+    mediaConversion.AspectRatio ||
+    mediaConversion.Width / mediaConversion.Height
+
+  return {
+    id: response.Id,
+    title: response.Name,
+    url: mediaConversion.Url,
+    dimensions: {
+      width: mediaConversion.Width,
+      height: mediaConversion.Height,
+      aspectRatio,
+    },
+    meta: {
+      alt,
+      caption,
+    },
+    focalPoint: response.FocalPoint || { x: 50, y: 50 },
+  }
+}
+
+export function mapImageVaultAssetResponseToImageVaultAsset(
+  response: ImageVaultAssetResponse
+): ImageVaultAsset {
+  return {
+    id: response.imageVaultId,
+    title: response.fileName,
+    url: response.url,
+    dimensions: {
+      width: response.dimensions.width,
+      height: response.dimensions.height,
+      aspectRatio: response.dimensions.aspectRatio,
+    },
+    meta: {
+      alt: response.meta.alt,
+      caption: response.meta.caption,
+    },
+    focalPoint: response.focalPoint,
+  }
+}