From 59ffbef8fb0b8f9b7023b4fce24fed9c7c4633f0 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 15 Oct 2024 15:54:39 +0200
Subject: [PATCH] feat(SW-365): Added focal point to imagevault typings and to
 image component

---
 components/Image.tsx                          | 17 +++++++--
 components/TempDesignSystem/Card/index.tsx    |  2 +-
 .../contentstack/schemas/imageVault.ts        |  7 ++++
 types/components/image.ts                     | 35 ++++++++++++++++---
 types/components/imageVault.ts                |  3 ++
 utils/imageVault.ts                           |  1 +
 6 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/components/Image.tsx b/components/Image.tsx
index cf88c6e01..419259fc3 100644
--- a/components/Image.tsx
+++ b/components/Image.tsx
@@ -2,7 +2,10 @@
 
 import NextImage from "next/image"
 
-import type { ImageLoaderProps, ImageProps } from "next/image"
+import type { ImageLoaderProps } from "next/image"
+import type { CSSProperties } from "react"
+
+import type { ImageProps } from "@/types/components/image"
 
 function imageLoader({ quality, src, width }: ImageLoaderProps) {
   const hasQS = src.indexOf("?") !== -1
@@ -10,6 +13,14 @@ function imageLoader({ quality, src, width }: ImageLoaderProps) {
 }
 
 // Next/Image adds & instead of ? before the params
-export default function Image(props: ImageProps) {
-  return <NextImage {...props} loader={imageLoader} />
+export default function Image({ focalPoint, style, ...props }: ImageProps) {
+  const styles: CSSProperties = focalPoint
+    ? {
+        objectFit: "cover",
+        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
+        ...style,
+      }
+    : { ...style }
+
+  return <NextImage {...props} style={styles} loader={imageLoader} />
 }
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index 547ab5bea..f820f9877 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -34,7 +34,7 @@ export default function Card({
 
   imageWidth =
     imageWidth ||
-    (backgroundImage && "dimensions" in backgroundImage
+    (backgroundImage?.dimensions
       ? backgroundImage.dimensions.aspectRatio * imageHeight
       : 420)
 
diff --git a/server/routers/contentstack/schemas/imageVault.ts b/server/routers/contentstack/schemas/imageVault.ts
index 2e656a465..35cfaadd6 100644
--- a/server/routers/contentstack/schemas/imageVault.ts
+++ b/server/routers/contentstack/schemas/imageVault.ts
@@ -11,6 +11,11 @@ const metaData = z.object({
   Value: z.string().nullable(),
 })
 
+export const focalPointSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+})
+
 /**
  * Defines a media asset, original or conversion
  */
@@ -94,6 +99,7 @@ export const imageVaultAssetSchema = z.object({
    * Name of the user that added the asset to ImageVault
    */
   AddedBy: z.string(),
+  FocalPoint: focalPointSchema.optional(),
 })
 
 export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
@@ -124,6 +130,7 @@ export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
         height: mediaConversion.Height,
         aspectRatio,
       },
+      focalPoint: rawData.FocalPoint || { x: 50, y: 50 },
     }
   }
 )
diff --git a/types/components/image.ts b/types/components/image.ts
index 972c521d6..6ecd9f2cb 100644
--- a/types/components/image.ts
+++ b/types/components/image.ts
@@ -1,9 +1,34 @@
-export type ApiImage = {
+import type { ImageProps as NextImageProps } from "next/image"
+
+import type { ImageVaultAsset } from "./imageVault"
+
+export interface FocalPoint {
+  x: number
+  y: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+  aspectRatio: number
+}
+
+export interface Meta {
+  alt: string | undefined | null
+  caption: string | undefined | null
+}
+
+export interface ApiImage {
   id: string
   url: string
   title: string
-  meta: {
-    alt: string
-    caption: string
-  }
+  meta: Meta
+  dimensions?: Dimensions
+  focalPoint?: FocalPoint
 }
+
+export interface ImageProps extends NextImageProps {
+  focalPoint?: FocalPoint
+}
+
+export type ImageType = ImageVaultAsset | ApiImage
diff --git a/types/components/imageVault.ts b/types/components/imageVault.ts
index ceae6e278..dae2577e2 100644
--- a/types/components/imageVault.ts
+++ b/types/components/imageVault.ts
@@ -11,6 +11,8 @@ import { z } from "zod"
 
 import { imageVaultAssetSchema } from "@/server/routers/contentstack/schemas/imageVault"
 
+import type { FocalPoint } from "./image"
+
 export type ImageVaultAssetResponse = z.infer<typeof imageVaultAssetSchema>
 
 export type ImageVaultAsset = {
@@ -23,4 +25,5 @@ export type ImageVaultAsset = {
     aspectRatio: number
   }
   meta: { alt: string | undefined | null; caption: string | undefined | null }
+  focalPoint: FocalPoint
 }
diff --git a/utils/imageVault.ts b/utils/imageVault.ts
index f04b7fdf2..5336dfbe7 100644
--- a/utils/imageVault.ts
+++ b/utils/imageVault.ts
@@ -33,6 +33,7 @@ export function insertResponseToImageVaultAsset(
       height: mediaConversion.Height,
       aspectRatio,
     },
+    focalPoint: response.FocalPoint || { x: 50, y: 50 },
   }
 }