fix(service marketplace): fix detail images

CHANGELOG.md

@@ -45,10 +45,28 @@
 - **Dependencies**
   - upgraded app dependencies [#1181](https://github.com/eclipse-tractusx/portal-frontend/pull/1181)
 
+### Change
+
+- **Service Subscriptions**
+
+  - rename 'Configure' button to 'Activate' button [#1150](https://github.com/eclipse-tractusx/portal-frontend/pull/1150)
+
+- **Header**
+  - moved company roles into enum [#1213](https://github.com/eclipse-tractusx/portal-frontend/pull/1213)
+- **Application Request**
+  - add separate end points for downloading company credential document and registration document [#1229](https://github.com/eclipse-tractusx/portal-frontend/pull/1229)
+- **Business Partner Invitation**
+
+  - support all language characters for company names [#1189](https://github.com/eclipse-tractusx/portal-frontend/pull/1189)
+
 ### Bugfixes
 
 - **Partner Network**
   - changed role to access page [#1234](https://github.com/eclipse-tractusx/portal-frontend/pull/1234)
+- **Company Subscriptions**
+  - fixed wrong hyperlink and role requirement for technical user details in company subscription details [#1220](https://github.com/eclipse-tractusx/portal-frontend/pull/1220)
+- **Service Release Process**
+  - Fixed "None" selection issue in Technical Integration [#1161](https://github.com/eclipse-tractusx/portal-frontend/issues/1161)
 - **Onboarding Service Provider Management**
   - fixed blank page issue in customer overview tab [#1232](https://github.com/eclipse-tractusx/portal-frontend/pull/1232)
   - fixed hardcoded OSP callback url [#1201](https://github.com/eclipse-tractusx/portal-frontend/pull/1201)

src/components/pages/AdminBoardDetail/AdminBoardDetail.scss

@@ -55,11 +55,14 @@
         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/AdminBoardDetail.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',
@@ -63,7 +65,6 @@ export default function ServiceAdminBoardDetail() {
       setServiceData(data)
     }
   }, [isFetching, data])
-
   const getTypes = useCallback(() => {
     const newArr: string[] = []
     serviceData?.serviceTypes.forEach((serviceType: string) => {
@@ -132,9 +133,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,10 +27,11 @@ import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './ServiceMarketplace.scss'
 import NoItems from '../NoItems'
-import { getAssetBase } from 'services/EnvironmentService'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import { fetchImageWithToken } from 'services/ImageService'
+import { getApiBase } from 'services/EnvironmentService'
 
 export default function RecommendedServices({
   services,
@@ -72,8 +73,19 @@ export default function RecommendedServices({
             <Grid className="recommended-card" key={service.id}>
               <CardHorizontal
                 borderRadius={6}
-                imageAlt="App Card"
-                imagePath={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
+                image={{
+                  src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
+                  alt: 'App Card',
+                  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 './ServiceMarketplace.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,
@@ -80,8 +81,19 @@ export default function ServicesElements({
                   >
                     <CardHorizontal
                       borderRadius={6}
-                      imageAlt="App Card"
-                      imagePath={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
+                      image={{
+                        src: `${getApiBase()}/api/services/${service.id}/serviceDocuments/${service?.leadPictureId}`,
+                        alt: 'App Card',
+                        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/index.tsx

@@ -97,7 +97,6 @@ export default function ServiceMarketplace() {
   const setView = (e: React.MouseEvent<HTMLInputElement>) => {
     setSelected(e.currentTarget.value)
   }
-
   const sortOptions = [
     {
       label: t('content.serviceMarketplace.sortOptions.new'),

src/components/pages/ServiceMarketplaceDetail/components/MarketplaceHeader/MarketplaceHeader.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/ServiceMarketplaceDetail/components/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 './MarketplaceHeader.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,
@@ -88,9 +89,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/ServiceReleaseProcess/components/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>
@@ -111,8 +93,19 @@ export default function ServiceDetails() {
             <div className="imageCard">
               <CardHorizontal
                 borderRadius={6}
-                imageAlt="Service Card"
-                imagePath={leadImg}
+                image={{
+                  src: `${getApiBase()}/api/services/${serviceId}/serviceDocuments/${fetchServiceStatus?.leadPictureId}`,
+                  alt: 'Service Card',
+                  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

@@ -21,13 +21,13 @@
 import {
   Typography,
   IconButton,
-  CardHorizontal,
   Card,
   LogoGrayData,
   SelectList,
   type UploadFileStatus,
   UploadStatus,
   PageSnackbar,
+  CardHorizontal,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import { Grid } from '@mui/material'
@@ -73,7 +73,8 @@ import {
   type LanguageStatusType,
   type UseCaseType,
 } from 'features/appManagement/types'
-import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import { fetchImageWithToken } from 'services/ImageService'
 
 type FormDataType = {
   title: string
@@ -132,7 +133,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,
@@ -258,40 +258,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')
@@ -495,8 +461,19 @@ export default function AppMarketCard() {
             <CardHorizontal
               label={cardAppProvider ?? ''}
               title={cardAppTitle}
-              imagePath={cardImage}
-              imageAlt={cardImageAlt}
+              image={{
+                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"