fix(service marketplace): fix detail images

DEPENDENCIES

@@ -253,7 +253,7 @@ npm/npmjs/-/getos/3.2.1, MIT, approved, clearlydefined
 npm/npmjs/-/getpass/0.1.7, MIT, approved, clearlydefined
 npm/npmjs/-/glob-parent/5.1.2, ISC, approved, clearlydefined
 npm/npmjs/-/glob-parent/6.0.2, ISC, approved, clearlydefined
-npm/npmjs/-/glob/7.2.3, ISC, approved, clearlydefined
+npm/npmjs/-/glob/7.2.3, ISC AND (CC-BY-SA-4.0 AND ISC) AND (ISC AND MIT) AND CC-BY-SA-4.0, approved, #19366
 npm/npmjs/-/global-dirs/3.0.1, MIT, approved, clearlydefined
 npm/npmjs/-/globals/11.12.0, MIT, approved, clearlydefined
 npm/npmjs/-/globals/13.24.0, MIT, approved, #11962
@@ -293,7 +293,7 @@ npm/npmjs/-/ieee754/1.2.1, BSD-3-Clause, approved, clearlydefined
 npm/npmjs/-/ignore/5.3.2, MIT, approved, #11665
 npm/npmjs/-/immer/10.1.1, MIT, approved, clearlydefined
 npm/npmjs/-/immutable/4.3.7, MIT, approved, #7353
-npm/npmjs/-/import-fresh/3.3.0, MIT, approved, clearlydefined
+npm/npmjs/-/import-fresh/3.3.0, MIT, approved, #19299
 npm/npmjs/-/import-local/3.2.0, MIT, approved, clearlydefined
 npm/npmjs/-/imurmurhash/0.1.4, MIT, approved, clearlydefined
 npm/npmjs/-/indent-string/4.0.0, MIT, approved, clearlydefined
@@ -642,7 +642,7 @@ npm/npmjs/-/tough-cookie/5.0.0, CC-BY-3.0 AND BSD-3-Clause AND MIT, approved, #1
 npm/npmjs/-/tr46/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/tree-kill/1.2.2, MIT, approved, clearlydefined
 npm/npmjs/-/ts-api-utils/1.3.0, MIT, approved, clearlydefined
-npm/npmjs/-/ts-jest/29.2.5, MIT, approved, clearlydefined
+npm/npmjs/-/ts-jest/29.2.5, MIT, approved, #19364
 npm/npmjs/-/ts-node/10.9.2, MIT, approved, clearlydefined
 npm/npmjs/-/tsconfck/3.1.3, MIT, approved, #16028
 npm/npmjs/-/tsconfig-paths/3.15.0, MIT, approved, #12111
@@ -652,7 +652,7 @@ npm/npmjs/-/tunnel-agent/0.6.0, Apache-2.0, approved, clearlydefined
 npm/npmjs/-/tweetnacl/0.14.5, Unlicense, approved, #1035
 npm/npmjs/-/type-check/0.4.0, MIT, approved, clearlydefined
 npm/npmjs/-/type-detect/4.0.8, MIT, approved, clearlydefined
-npm/npmjs/-/type-fest/0.20.2, MIT OR (CC0-1.0 AND MIT), approved, clearlydefined
+npm/npmjs/-/type-fest/0.20.2, CC0-1.0 AND MIT, approved, clearlydefined
 npm/npmjs/-/type-fest/0.21.3, MIT OR (CC0-1.0 AND MIT), approved, clearlydefined
 npm/npmjs/-/typed-array-buffer/1.0.2, MIT, approved, #9658
 npm/npmjs/-/typed-array-buffer/1.0.3, MIT, approved, #9658
@@ -889,7 +889,7 @@ npm/npmjs/@rollup/rollup-win32-arm64-msvc/4.24.0, MIT AND (ISC AND MIT), approve
 npm/npmjs/@rollup/rollup-win32-ia32-msvc/4.24.0, MIT AND (ISC AND MIT), approved, #16913
 npm/npmjs/@rollup/rollup-win32-x64-msvc/4.24.0, MIT AND (ISC AND MIT), approved, #16902
 npm/npmjs/@rtsao/scc/1.1.0, MIT, approved, clearlydefined
-npm/npmjs/@sinclair/typebox/0.27.8, MIT, approved, clearlydefined
+npm/npmjs/@sinclair/typebox/0.27.8, MIT, approved, #19220
 npm/npmjs/@sinonjs/commons/3.0.1, BSD-3-Clause, approved, #12905
 npm/npmjs/@sinonjs/fake-timers/10.3.0, BSD-3-Clause, approved, #9214
 npm/npmjs/@svgr/babel-plugin-add-jsx-attribute/8.0.0, MIT, approved, clearlydefined
@@ -934,7 +934,7 @@ npm/npmjs/@types/lodash/4.17.14, MIT, approved, #18358
 npm/npmjs/@types/node/20.16.15, MIT, approved, #16051
 npm/npmjs/@types/node/22.7.4, MIT, approved, #16398
 npm/npmjs/@types/papaparse/5.3.15, MIT, approved, #10964
-npm/npmjs/@types/parse-json/4.0.2, MIT, approved, clearlydefined
+npm/npmjs/@types/parse-json/4.0.2, MIT, approved, #19199
 npm/npmjs/@types/prop-types/15.7.13, MIT, approved, #16176
 npm/npmjs/@types/qs/6.9.18, MIT, approved, #14071
 npm/npmjs/@types/react-dom/18.3.1, MIT, approved, #18409

src/components/pages/AdminBoardDetail/style.scss

@@ -55,10 +55,12 @@
         gap: 56px;
       }
 
-      .lead-image > img {
-        border-radius: 16px;
-        max-width: 100%;
-        width: 412px;
+      .lead-image {
+        max-width: 288px;
+        & > img {
+          border-radius: 16px;
+          width: 100%;
+        }
       }
       .service-app-content {
         flex: 1;

src/components/pages/ServiceAdminBoardDetail/index.tsx

@@ -22,10 +22,10 @@ import {
   Button,
   StaticTable,
   Typography,
+  Image,
 } from '@catena-x/portal-shared-components'
 import { useNavigate, useParams } from 'react-router-dom'
 import '../AdminBoardDetail/style.scss'
-import { getAssetBase } from 'services/EnvironmentService'
 import {
   type ServiceDetailsType,
   useFetchBoardServiceDetailsQuery,
@@ -42,6 +42,8 @@ import { Grid, Box, Divider } from '@mui/material'
 import { download } from 'utils/downloadUtils'
 import { DocumentTypeText } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 
 enum TableData {
   SUCCESS = 'SUCCESS',
@@ -132,9 +134,10 @@ export default function ServiceAdminBoardDetail() {
         <Box className="service-content">
           <div className="service-board-header">
             <div className="lead-image">
-              <img
-                src={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
+              <Image
+                src={`${getApiBase()}/api/services/${appId}/serviceDocuments/${serviceData?.documents?.SERVICE_LEADIMAGE?.[0].documentId}`}
                 alt={serviceData.title}
+                loader={fetchImageWithToken}
               />
             </div>
             <Box className="service-app-content">

src/components/pages/ServiceMarketplace/RecommendedServices.tsx

@@ -27,7 +27,8 @@ import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './style.scss'
 import NoItems from '../NoItems'
-import { getAssetBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
@@ -73,9 +74,18 @@ export default function RecommendedServices({
               <CardHorizontal
                 borderRadius={6}
                 image={{
+                  src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
                   alt: 'App Card',
-                  src: `${getAssetBase()}/images/content/ServiceMarketplace.png`,
+                  style: {
+                    flex: '0 0 33.333333%',
+                    maxWidth: '33.333333%',
+                    minHeight: '200px',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  },
                 }}
+                imageLoader={fetchImageWithToken}
                 label={service.provider}
                 buttonText="Details"
                 onBtnClick={() => {

src/components/pages/ServiceMarketplace/ServicesElements.tsx

@@ -24,9 +24,10 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './style.scss'
-import { getAssetBase } from 'services/EnvironmentService'
 import { useCallback } from 'react'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function ServicesElements({
   services,
@@ -81,9 +82,18 @@ export default function ServicesElements({
                     <CardHorizontal
                       borderRadius={6}
                       image={{
+                        src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
                         alt: 'App Card',
-                        src: `${getAssetBase()}/images/content/ServiceMarketplace.png`,
+                        style: {
+                          flex: '0 0 33.333333%',
+                          maxWidth: '33.333333%',
+                          minHeight: '200px',
+                          backgroundRepeat: 'no-repeat',
+                          backgroundSize: 'cover',
+                          backgroundPosition: 'center',
+                        },
                       }}
+                      imageLoader={fetchImageWithToken}
                       label={service.provider}
                       buttonText="Details"
                       onBtnClick={() => {

src/components/pages/ServiceMarketplaceDetail/MarketplaceHeader/index.tsx

@@ -19,18 +19,19 @@
  ********************************************************************************/
 
 import { useDispatch } from 'react-redux'
-import { Button, Typography } from '@catena-x/portal-shared-components'
+import { Button, Typography, Image } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import { show } from 'features/control/overlay'
 import { OVERLAYS, ROLES } from 'types/Constants'
 import './style.scss'
 import { setSuccessType } from 'features/serviceMarketplace/slice'
-import { getAssetBase } from 'services/EnvironmentService'
 import { Box } from '@mui/material'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
 import { userHasPortalRole } from 'services/AccessService'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function MarketplaceHeader({
   item,
@@ -86,9 +87,10 @@ export default function MarketplaceHeader({
   return (
     <div className="service-marketplace-header">
       <div className="lead-image">
-        <img
-          src={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
+        <Image
+          src={`${getApiBase()}/api/services/${serviceId}/serviceDocuments/${item?.leadPictureId}`}
           alt={item.title}
+          loader={fetchImageWithToken}
         />
       </div>
       <Box className="marketplace-app-content">

src/components/pages/ServiceMarketplaceDetail/MarketplaceHeader/style.scss

@@ -23,10 +23,14 @@
   display: flex;
   flex-wrap: wrap;
   .lead-image {
+    width: 288px;
+    height: 288px;
+    overflow: hidden;
     img {
       border-radius: 16px;
-      width: '288px';
-      height: '288px';
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
     }
   }
   .marketplace-app-content {

src/components/pages/ServiceReleaseProcess/ServiceOverview/ServiceDetails.tsx

@@ -31,14 +31,16 @@ import {
   useFetchDocumentMutation,
   useFetchServiceStatusQuery,
 } from 'features/serviceManagement/apiSlice'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback } 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 { type DocumentData } from 'features/apps/types'
 import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 export default function ServiceDetails() {
   const { t } = useTranslation('servicerelease')
@@ -47,7 +49,6 @@ export default function ServiceDetails() {
     refetchOnMountOrArgChange: true,
   }).data
   const [fetchDocument] = useFetchDocumentMutation()
-  const [leadImg, setLeadImg] = useState<string>('')
 
   const getServiceTypes = useCallback(() => {
     const newArr: string[] = []
@@ -77,25 +78,6 @@ 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>
@@ -112,9 +94,18 @@ export default function ServiceDetails() {
               <CardHorizontal
                 borderRadius={6}
                 image={{
+                  src: `${getApiBase()}/api/services/${serviceId}/serviceDocuments/${fetchServiceStatus?.leadPictureId}`,
                   alt: 'Service Card',
-                  src: leadImg,
+                  style: {
+                    flex: '0 0 33.333333%',
+                    maxWidth: '33.333333%',
+                    minHeight: '200px',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  },
                 }}
+                imageLoader={fetchImageWithToken}
                 label={''}
                 buttonText=""
                 onBtnClick={() => {

src/components/shared/basic/ReleaseProcess/AppMarketCard/index.tsx

@@ -74,10 +74,12 @@ import {
   type LanguageStatusType,
   type UseCaseType,
 } from 'features/appManagement/types'
-import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import { download } from 'utils/downloadUtils'
 import { extractFileData } from 'utils/fileUtils'
 import { isStepCompleted } from '../AppStepHelper'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
+import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 
 type FormDataType = {
   title: string
@@ -104,6 +106,7 @@ export default function AppMarketCard() {
   const hasDispatched = useRef(false)
   const [pageScrolled, setPageScrolled] = useState(false)
   const [deleteSuccess, setDeleteSuccess] = useState(false)
+  const [fetchDocumentById] = useFetchDocumentByIdMutation()
 
   const useCasesListData = useFetchUseCasesQuery().data
   const useCasesList = useMemo(() => useCasesListData ?? [], [useCasesListData])
@@ -138,7 +141,6 @@ export default function AppMarketCard() {
     salesManagerType[]
   >([defaultSalesManagerValue])
   const [salesManagerId, setSalesManagerId] = useState<string | null>(null)
-  const [fetchDocumentById] = useFetchDocumentByIdMutation()
   const [cardImage, setCardImage] = useState(LogoGrayData)
   const {
     data: fetchAppStatus,
@@ -275,40 +277,6 @@ export default function AppMarketCard() {
     }
   }, [cardImageData])
 
-  useEffect(() => {
-    if (appStatusData?.documents?.APP_LEADIMAGE?.[0].documentId) {
-      void fetchCardImage(
-        appStatusData?.documents?.APP_LEADIMAGE[0].documentId,
-        appStatusData?.documents?.APP_LEADIMAGE[0].documentName
-      )
-    }
-    reset(defaultValues)
-  }, [appStatusData])
-
-  const setFileStatus = (
-    documentId: string,
-    documentName: string,
-    status: UploadFileStatus
-  ) => {
-    setValue('uploadImage.leadPictureUri', {
-      id: documentId,
-      name: documentName,
-      status,
-    } as unknown as string | null)
-  }
-
-  const fetchCardImage = async (documentId: string, documentName: string) => {
-    try {
-      const response = await fetchDocumentById({ appId, documentId }).unwrap()
-      const file = response.data
-      setFileStatus(documentId, documentName, UploadStatus.UPLOAD_SUCCESS)
-      setCardImage(URL.createObjectURL(file))
-    } catch (error) {
-      setFileStatus(documentId, documentName, UploadStatus.UPLOAD_SUCCESS)
-      console.error(error, 'ERROR WHILE FETCHING IMAGE')
-    }
-  }
-
   const cardAppTitle =
     getValues().title ??
     t('content.apprelease.appMarketCard.defaultCardAppTitle')
@@ -529,9 +497,18 @@ export default function AppMarketCard() {
               label={cardAppProvider ?? ''}
               title={cardAppTitle}
               image={{
-                alt: cardImageAlt,
-                src: cardImage,
+                src: `${getApiBase()}/api/services/${appId}/serviceDocuments/${appStatusData?.documents?.APP_LEADIMAGE?.[0].documentId}`,
+                alt: 'App Card',
+                style: {
+                  flex: '0 0 33.333333%',
+                  maxWidth: '33.333333%',
+                  minHeight: '200px',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                },
               }}
+              imageLoader={fetchImageWithToken}
               borderRadius={0}
               description={cardDescription}
               backgroundColor="#F3F3F3"