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

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

apps/scandic-web/components/Blocks/AllCampaigns/index.tsx

@@ -12,7 +12,7 @@ import ContentCard from "@/components/ContentCard"
 
 import styles from "./allCampaigns.module.css"
 
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
 
 interface AllCampaignsProps {
   heading: string

apps/scandic-web/components/ContentCard/index.tsx

@@ -6,7 +6,7 @@ import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import styles from "./contentCard.module.css"
 
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
 
 interface ContentCardProps {
   link?: {

apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx

@@ -11,7 +11,7 @@ import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./topImages.module.css"
 
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
 
 interface TopImageProps {
   images: ImageVaultAsset[]

apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -1,3 +1,9 @@
+import {
+  type DeprecatedImageVaultAssetResponse,
+  type ImageVaultAssetResponse,
+  mapImageVaultAssetResponseToImageVaultAsset,
+  mapInsertResponseToImageVaultAsset,
+} from "@scandic-hotels/common/utils/imageVault"
 import { removeMultipleSlashes } from "@scandic-hotels/common/utils/url"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
@@ -14,18 +20,15 @@ import {
   RTEItemTypeEnum,
   RTETypeEnum,
 } from "@scandic-hotels/trpc/types/RTEenums"
-import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
 import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
 
 import styles from "./jsontohtml.module.css"
 
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
-
 import type { EmbedByUid } from "@/types/components/deprecatedjsontohtml"
 import { EmbedEnum } from "@/types/requests/utils/embeds"
-import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
+import type { Attributes } from "@/types/rte/attrs"
 import {
   type RTEDefaultNode,
   type RTEImageNode,
@@ -309,28 +312,11 @@ export const renderOptions: RenderOptions = {
 
         if (entry?.node.__typename === EmbedEnum.ImageContainer) {
           if (entry.node.image_left && entry.node.image_right) {
-            if ("dimensions" in entry.node.image_left) {
-              // Only temp until all ImageVaultAssets are
-              // handled in schema.transform()
-              return (
-                <ImageContainer
-                  leftImage={
-                    entry.node.image_left as unknown as ImageVaultAsset
-                  }
-                  rightImage={
-                    entry.node.image_right as unknown as ImageVaultAsset
-                  }
-                />
-              )
-            }
-            const leftImage = insertResponseToImageVaultAsset(
-              entry.node.image_left
-            )
-            const rightImage = insertResponseToImageVaultAsset(
-              entry.node.image_right
-            )
             return (
-              <ImageContainer leftImage={leftImage} rightImage={rightImage} />
+              <ImageContainer
+                leftImage={entry.node.image_left}
+                rightImage={entry.node.image_right}
+              />
             )
           }
           return null
@@ -372,40 +358,46 @@ export const renderOptions: RenderOptions = {
   },
 
   [RTETypeEnum.ImageVault]: (node: RTEImageNode) => {
-    if ("attrs" in node) {
-      const type = node.type
-      if (type === RTETypeEnum.ImageVault) {
-        const attrs = node.attrs as RTEImageVaultAttrs
-        let image = undefined
-        if ("dimensions" in attrs) {
-          image = attrs
-        } else {
-          image = insertResponseToImageVaultAsset(attrs)
-        }
-        const alt = image.meta.alt ?? image.title
-
-        const width = attrs.width
-          ? parseInt(attrs.width.replaceAll("px", ""))
-          : image.dimensions.width
-        const props = extractPossibleAttributes(attrs)
-        return (
-          <section key={node.uid}>
-            <Image
-              alt={alt}
-              className={styles.image}
-              height={365}
-              src={image.url}
-              width={width}
-              focalPoint={image.focalPoint}
-              dimensions={image.dimensions}
-              {...props}
-            />
-            <Caption>{image.meta.caption}</Caption>
-          </section>
-        )
-      }
+    const type = node.type
+    if (!("attrs" in node) || type !== RTETypeEnum.ImageVault) {
+      return null
     }
 
+    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 props = extractPossibleAttributes(node.attrs)
+
+    return (
+      <section key={node.uid}>
+        <Image
+          alt={alt}
+          className={styles.image}
+          fill
+          sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
+          src={image.url}
+          focalPoint={image.focalPoint}
+          dimensions={image.dimensions}
+          {...props}
+        />
+        <Caption>{image.meta.caption}</Caption>
+      </section>
+    )
+
     return null
   },
 

apps/scandic-web/components/Hero/hero.ts

@@ -1,4 +1,5 @@
-import type { FocalPoint, Image } from "@scandic-hotels/trpc/types/image"
+import type { FocalPoint } from "@scandic-hotels/common/utils/imageVault"
+import type { Image } from "@scandic-hotels/trpc/types/image"
 
 export interface HeroProps {
   alt: string

apps/scandic-web/components/TempDesignSystem/Card/card.ts

@@ -1,4 +1,4 @@
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
 import type { VariantProps } from "class-variance-authority"
 
 import type { ApiImage } from "@/types/components/image"

apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts

@@ -1,4 +1,4 @@
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
 import type { VariantProps } from "class-variance-authority"
 
 import type { loyaltyCardVariants } from "./variants"