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

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

packages/design-system/lib/components/JsonToHtml/JsonToHtml.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { JsonToHtml } from './JsonToHtml'
-import { RTEImageVaultNode, RTENode } from './types/rte/node'
-import { RTETypeEnum } from './types/rte/enums'
 import { expect } from 'storybook/test'
+import { JsonToHtml } from './JsonToHtml'
+import { RTETypeEnum } from './types/rte/enums'
+import { RTEImageVaultNode, RTENode } from './types/rte/node'
 
 const meta: Meta<typeof JsonToHtml> = {
   title: 'Components/JsonToHtml',
@@ -192,7 +192,8 @@ const image: RTEImageVaultNode = {
     url: 'https://imagevault.scandichotels.com/publishedmedia/77obkq3g4harjm8wyua9/Scandic_Family_Breakfast_2.jpg',
     height: '200px',
     width: '200px',
-    id: 1,
+    fileName: 'Scandic_Family_Breakfast_2.jpg',
+    imageVaultId: 1,
     title: 'Image Title',
     dimensions: { width: 200, height: 200, aspectRatio: 1.5 },
     meta: { alt: 'Image Alt', caption: 'Image Caption' },

packages/design-system/lib/components/JsonToHtml/JsonToHtml.tsx

@@ -4,31 +4,15 @@ import { nodesToHtml } from './utils'
 
 import styles from './jsontohtml.module.css'
 
+import { ImageVaultAsset } from '@scandic-hotels/common/utils/imageVault'
+import { ContentBlockType } from './types/rte/enums'
 import type { RTENode } from './types/rte/node'
 import type { RenderOptions } from './types/rte/option'
-import { ContentBlockType } from './types/rte/enums'
 
 export type Node<T> = {
   node: T
 }
 
-type Image = {
-  id: number
-  title: string
-  url: string
-  focalPoint: {
-    x: number
-    y: number
-  }
-  dimensions?: {
-    width: number
-    height: number
-  }
-  meta: {
-    alt?: string | null
-    caption?: string | null
-  }
-}
 export type Embeds =
   | {
       __typename: Exclude<ContentBlockType, 'ImageContainer'>
@@ -38,11 +22,11 @@ export type Embeds =
     }
   | {
       __typename: 'ImageContainer'
-      system?: { uid: string } | undefined | null
-      url?: string | undefined | null
-      title?: string | undefined | null
-      image_left?: Image | undefined
-      image_right?: Image | undefined
+      system?: { uid: string } | null
+      url?: string | null
+      title?: string | null
+      image_left?: ImageVaultAsset
+      image_right?: ImageVaultAsset
     }
 
 export type EmbedByUid = Record<string, Node<Embeds>>

packages/design-system/lib/components/JsonToHtml/insertResponseToImageVaultAsset.ts

@@ -1,60 +0,0 @@
-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: { x: number; y: number }
-}
-
-type ImageVaultAssetResponse = {
-  Id: number
-  Name: string
-  FocalPoint: { x: number; y: number }
-  Metadata: Array<{ Name: string; Value: string }>
-  MediaConversions: Array<{
-    Url: string
-    Width: number
-    Height: number
-    AspectRatio: number
-    FormatAspectRatio: number
-  }>
-}
-
-export function insertResponseToImageVaultAsset(
-  response: ImageVaultAssetResponse
-): 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 {
-    url: mediaConversion.Url,
-    id: response.Id,
-    meta: {
-      alt,
-      caption,
-    },
-    title: response.Name,
-    dimensions: {
-      width: mediaConversion.Width,
-      height: mediaConversion.Height,
-      aspectRatio,
-    },
-    focalPoint: response.FocalPoint || { x: 50, y: 50 },
-  }
-}

packages/design-system/lib/components/JsonToHtml/renderOptions.tsx

@@ -15,9 +15,14 @@ import {
 
 import styles from './jsontohtml.module.css'
 
-import { insertResponseToImageVaultAsset } from './insertResponseToImageVaultAsset'
+import {
+  DeprecatedImageVaultAssetResponse,
+  ImageVaultAssetResponse,
+  mapImageVaultAssetResponseToImageVaultAsset,
+  mapInsertResponseToImageVaultAsset,
+} from '@scandic-hotels/common/utils/imageVault'
 import type { EmbedByUid } from './JsonToHtml'
-import type { Attributes, RTEImageVaultAttrs } from './types/rte/attrs'
+import type { Attributes } from './types/rte/attrs'
 import {
   AvailableParagraphFormatEnum,
   RTEItemTypeEnum,
@@ -478,13 +483,26 @@ export const renderOptions: RenderOptions = {
       return null
     }
 
-    const attrs = node.attrs as RTEImageVaultAttrs
-    const image =
-      'dimensions' in attrs ? attrs : insertResponseToImageVaultAsset(attrs)
+    let image = undefined
+    if ('imageVaultId' in node.attrs && 'fileName' in node.attrs) {
+      image = mapImageVaultAssetResponseToImageVaultAsset(
+        node.attrs as unknown as ImageVaultAssetResponse
+      )
+    }
+
+    if ('Name' in node.attrs && 'Id' in node.attrs) {
+      image = mapInsertResponseToImageVaultAsset(
+        node.attrs as unknown as DeprecatedImageVaultAssetResponse
+      )
+    }
+
+    if (!image) {
+      return null
+    }
 
     const alt = image.meta.alt ?? image.title
     const caption = image.meta.caption
-    const { className, ...props } = extractPossibleAttributes(attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
       <div key={node.uid} className={styles.imageWithCaption}>
         <div className={styles.imageWrapper}>

packages/design-system/lib/components/JsonToHtml/types/rte/node.ts

@@ -1,11 +1,14 @@
 import type { JSX } from 'react'
 
+import {
+  DeprecatedImageVaultAssetResponse,
+  ImageVaultAssetResponse,
+} from '@scandic-hotels/common/utils/imageVault'
 import type { EmbedByUid } from '../../JsonToHtml'
 import type {
   Attributes,
   RTEAnchorAttrs,
   RTEAssetAttrs,
-  RTEImageVaultAttrs,
   RTELinkAttrs,
 } from './attrs'
 import type { RTETypeEnum } from './enums'
@@ -39,7 +42,8 @@ export interface RTEReferenceLinkNode extends RTEDefaultNode {
 }
 
 export interface RTEImageVaultNode extends RTEDefaultNode {
-  attrs: RTEImageVaultAttrs
+  attrs: Attributes &
+    (DeprecatedImageVaultAssetResponse | ImageVaultAssetResponse)
   type: RTETypeEnum.ImageVault
 }