From 51847d8aba66211e50176969a851a856f4c66371 Mon Sep 17 00:00:00 2001
From: "m.usman" <muhammad.usman@cofinity-x.com>
Date: Wed, 16 Oct 2024 13:13:17 +0200
Subject: [PATCH] fix: images in service admin board detail

---
 .../AdminBoardDetail/AdminBoardDetail.scss    | 14 +++++++---
 .../pages/ServiceAdminBoardDetail/index.tsx   | 28 +++++++++++++++----
 .../adminBoard/serviceAdminBoardApiSlice.ts   |  1 +
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss b/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss
index 4e2bbce3f..45272d970 100644
--- a/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss
+++ b/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss
@@ -55,11 +55,17 @@
         gap: 56px;
       }
 
-      .lead-image > img {
-        border-radius: 16px;
-        max-width: 100%;
-        width: 412px;
+      .lead-image {
+        width: 288px;
+        height: 288px;
+        overflow: hidden;
+        & > img {
+          border-radius: 16px;
+          max-width: 100%;
+          width: 412px;
+        }
       }
+
       .service-app-content {
         flex: 1;
       }
diff --git a/src/components/pages/ServiceAdminBoardDetail/index.tsx b/src/components/pages/ServiceAdminBoardDetail/index.tsx
index 356680a28..38f7f8f97 100644
--- a/src/components/pages/ServiceAdminBoardDetail/index.tsx
+++ b/src/components/pages/ServiceAdminBoardDetail/index.tsx
@@ -22,10 +22,11 @@ import {
   Button,
   StaticTable,
   Typography,
+  Image,
+  LogoGrayData,
 } from '@catena-x/portal-shared-components'
 import { useNavigate, useParams } from 'react-router-dom'
 import '../AdminBoardDetail/AdminBoardDetail.scss'
-import { getAssetBase } from 'services/EnvironmentService'
 import {
   type ServiceDetailsType,
   useFetchBoardServiceDetailsQuery,
@@ -49,6 +50,7 @@ enum TableData {
 }
 
 export default function ServiceAdminBoardDetail() {
+  const [leadImg, setLeadImg] = useState<string>('')
   const { t } = useTranslation('servicerelease')
   const navigate = useNavigate()
   const { appId } = useParams()
@@ -64,6 +66,25 @@ export default function ServiceAdminBoardDetail() {
     }
   }, [isFetching, data])
 
+  useEffect(() => {
+    if (serviceData?.leadPictureId) {
+      setLeadingImg()
+    } else setLeadImg(LogoGrayData)
+  }, [serviceData])
+
+  const setLeadingImg = async () => {
+    try {
+      const response = await fetchDocument({
+        appId,
+        documentId: serviceData?.leadPictureId,
+      }).unwrap()
+      const file = response.data
+      setLeadImg(URL.createObjectURL(file))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   const getTypes = useCallback(() => {
     const newArr: string[] = []
     serviceData?.serviceTypes.forEach((serviceType: string) => {
@@ -132,10 +153,7 @@ export default function ServiceAdminBoardDetail() {
         <Box className="service-content">
           <div className="service-board-header">
             <div className="lead-image">
-              <img
-                src={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
-                alt={serviceData.title}
-              />
+              <Image src={leadImg} alt={serviceData.title} />
             </div>
             <Box className="service-app-content">
               <Typography variant="h5" sx={{ pb: '6px', color: '#888888' }}>
diff --git a/src/features/adminBoard/serviceAdminBoardApiSlice.ts b/src/features/adminBoard/serviceAdminBoardApiSlice.ts
index ccdea1284..59694701e 100644
--- a/src/features/adminBoard/serviceAdminBoardApiSlice.ts
+++ b/src/features/adminBoard/serviceAdminBoardApiSlice.ts
@@ -79,6 +79,7 @@ export interface ServiceDetailsType {
   }[]
   documents: { [key: string]: Array<DocumentData> }
   providerUri: string
+  leadPictureId: string
   contactEmail: string
   contactNumber: null
   technicalUserProfile?: {