feat(SW-2541): Changed asset types to only add the data needed

utils/imagevault.ts

@@ -1,7 +1,6 @@
 import { langEnum } from "../types/lang"
 
 import type { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
-import type { Lang } from "../types/lang"
 import type {
   Config,
   FocalPoint,
@@ -9,6 +8,7 @@ import type {
   InsertResponse,
   PublishDetails,
 } from "../types/imagevault"
+import type { Lang } from "../types/lang"
 
 const metaIds = {
   [langEnum.de]: { altText: 68, title: 77 },
@@ -50,9 +50,15 @@ export function getPublishDetails(
 }
 
 export function isInsertResponse(
-  res: InsertResponse | GenericObjectType
+  res: InsertResponse | GenericObjectType | null | undefined
 ): res is InsertResponse {
-  return (res as InsertResponse).MediaConversions !== undefined
+  return (res as InsertResponse)?.MediaConversions !== undefined
+}
+
+export function isImageVaultAsset(
+  res: ImageVaultAsset | InsertResponse | GenericObjectType | null | undefined
+): res is ImageVaultAsset {
+  return (res as ImageVaultAsset)?.url !== undefined
 }
 
 export type ImageVaultDAMConfig = {
@@ -67,42 +73,67 @@ export function isImageVaultDAMConfig(
   return !!(config.baseUrl && config.formatId && config.imageVaultUrl)
 }
 
-// Utility function to convert InsertResponse to ImageVaultAsset, used mainly for custom field images
-// For RTE this function is not enough since rte:s also need attrs, like position and the size thats
-// chosen in the editor
-export function insertResponseToImageVaultAsset(
+// Utility function to get ImageVaultAsset from either InsertResponse or ImageVaultAsset
+// Because we currently have both types saved in Contentstack, we need to account for both when retrieving the data of the asset.
+export function getImageVaultAssetFromData(
+  data: InsertResponse | ImageVaultAsset | GenericObjectType | null | undefined
+): ImageVaultAsset | null {
+  if (isImageVaultAsset(data)) {
+    return data
+  }
+  if (isInsertResponse(data)) {
+    return mapInsertResponseToImageVaultAsset(data, { x: 50, y: 50 })
+  }
+  return null
+}
+
+// Utility function to convert InsertResponse to ImageVaultAsset
+function mapInsertResponseToImageVaultAsset(
   response: InsertResponse,
   focalPoint: FocalPoint
 ): ImageVaultAsset {
-  const alt = response.Metadata?.find((meta) =>
-    meta.Name.includes("AltText_")
-  )?.Value
+  let image = response.MediaConversions.find(
+    (conversion) =>
+      conversion.MediaFormatName === "Original" &&
+      conversion.ContentType === "image/jpeg"
+  )
 
-  const caption = response.Metadata?.find((meta) =>
-    meta.Name.includes("Title_")
-  )?.Value
+  // We only receive one alt and title is in the response, depending on the language of the entry
+  // This is why we're getting the first one found
+  const alt =
+    response.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
+    ""
+  const caption =
+    response.Metadata?.find((meta) => meta.Name.includes("Title_"))?.Value || ""
+
+  if (!image) {
+    const imageAsJpeg = response.MediaConversions.find(
+      (conversion) => conversion.ContentType === "image/jpeg"
+    )
+    image = imageAsJpeg || response.MediaConversions[0]
+  }
 
   return {
-    url: response.MediaConversions[0].Url,
-    id: response.Id,
+    imageVaultId: response.Id,
+    url: image.Url,
     meta: {
       alt,
       caption,
     },
-    title: response.Name,
+    fileName: response.Name,
     dimensions: {
-      width: response.MediaConversions[0].Width,
-      height: response.MediaConversions[0].Height,
-      aspectRatio: response.MediaConversions[0].FormatAspectRatio,
+      width: image.Width,
+      height: image.Height,
+      aspectRatio: image.AspectRatio,
     },
-    focalPoint,
+    focalPoint: response.FocalPoint || focalPoint,
   }
 }
 
 export type openImageVaultParams = {
   config: ImageVaultDAMConfig
   entryData: EntryDataPublishDetails
-  onSuccess: (result: InsertResponse) => void
+  onSuccess: (result: ImageVaultAsset) => void
   onClose?: () => void
 }
 
@@ -126,7 +157,11 @@ export function openImageVault({
       publishDetails,
       insertMultiple: false,
       success: (result) => {
-        onSuccess(result.response)
+        const imageVaultAsset = mapInsertResponseToImageVaultAsset(
+          result.response,
+          { x: 50, y: 50 }
+        )
+        onSuccess(imageVaultAsset)
       },
       close: () => {
         if (typeof onClose === "function") {