From d5b9a5e1c54c5e3c9469a5ac305bc9c48bfbcf10 Mon Sep 17 00:00:00 2001
From: Jordan Gerada <138688996+JordanGerada3@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:31:50 +0200
Subject: [PATCH] fix(service detail): add missing header image implementation 
 (#992)

---
 .../components/ServiceDetails.tsx             | 25 ++++++++++++++++---
 src/types/MainTypes.ts                        |  7 ++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx
index 19063b0bd..340c429ee 100644
--- a/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx
+++ b/src/components/pages/ServiceReleaseProcess/components/ServiceDetails.tsx
@@ -31,13 +31,12 @@ import {
   useFetchDocumentMutation,
   useFetchServiceStatusQuery,
 } from 'features/serviceManagement/apiSlice'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Divider } from '@mui/material'
 import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
 import { useParams } from 'react-router-dom'
 import { download } from 'utils/downloadUtils'
-import { getAssetBase } from 'services/EnvironmentService'
 import { type DocumentData } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
 
@@ -48,6 +47,7 @@ export default function ServiceDetails() {
     refetchOnMountOrArgChange: true,
   }).data
   const [fetchDocument] = useFetchDocumentMutation()
+  const [leadImg, setLeadImg] = useState<string>('')
 
   const getServiceTypes = useCallback(() => {
     const newArr: string[] = []
@@ -77,6 +77,25 @@ export default function ServiceDetails() {
     }
   }
 
+  const setLeadingImg = async () => {
+    try {
+      const response = await fetchDocument({
+        appId: serviceId,
+        documentId: fetchServiceStatus?.leadPictureId,
+      }).unwrap()
+      const file = response.data
+      setLeadImg(URL.createObjectURL(file))
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useEffect(() => {
+    if (fetchServiceStatus) {
+      setLeadingImg()
+    }
+  }, [fetchServiceStatus])
+
   return (
     <main>
       <div>
@@ -93,7 +112,7 @@ export default function ServiceDetails() {
               <CardHorizontal
                 borderRadius={6}
                 imageAlt="Service Card"
-                imagePath={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
+                imagePath={leadImg}
                 label={''}
                 buttonText=""
                 onBtnClick={() => {
diff --git a/src/types/MainTypes.ts b/src/types/MainTypes.ts
index aabd0df2d..642e81ba9 100644
--- a/src/types/MainTypes.ts
+++ b/src/types/MainTypes.ts
@@ -147,3 +147,10 @@ export const initErrorServiceState: ErrorServiceState = {
   homePageLink: '',
   homeButtonTitle: '',
 }
+
+export const IMAGE_TYPES: Record<string, string> = {
+  '3c': 'image/svg+xml',
+  ffd8ff: 'image/jpeg',
+  '89504e': 'image/png',
+  474946: 'image/gif',
+}