chore: service images and aspect-ratio

src/components/pages/ServiceMarketplace/RecommendedServices.tsx

@@ -28,11 +28,9 @@ import { useNavigate } from 'react-router-dom'
 import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice'
 import './ServiceMarketplace.scss'
 import NoItems from '../NoItems'
-import { getApiBase } from 'services/EnvironmentService'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
-import { leadPictureBasePath } from 'types/Constants'
 
 export default function RecommendedServices({
   services,
@@ -77,7 +75,7 @@ export default function RecommendedServices({
                 imageAlt="App Card"
                 imagePath={
                   service?.leadPictureId
-                    ? `${getApiBase()}/${leadPictureBasePath}/${service.leadPictureId}`
+                    ? `${service.leadPictureId}`
                     : `${LogoGrayData}`
                 }
                 label={service.provider}

src/components/pages/ServiceMarketplace/ServicesElements.tsx

@@ -30,8 +30,6 @@ import type { ServiceRequest } from 'features/serviceMarketplace/serviceApiSlice
 import './ServiceMarketplace.scss'
 import { useCallback } from 'react'
 import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
-import { getApiBase } from 'services/EnvironmentService'
-import { leadPictureBasePath } from 'types/Constants'
 
 export default function ServicesElements({
   services,
@@ -88,7 +86,7 @@ export default function ServicesElements({
                       imageAlt="App Card"
                       imagePath={
                         service?.leadPictureId
-                          ? `${getApiBase()}/${leadPictureBasePath}/${service.leadPictureId}`
+                          ? `${service.leadPictureId}`
                           : `${LogoGrayData}`
                       }
                       label={service.provider}

src/components/pages/ServiceMarketplace/index.tsx

@@ -48,7 +48,10 @@ import {
   useFetchServicesQuery,
 } from 'features/serviceMarketplace/serviceApiSlice'
 import SortImage from 'components/shared/frame/SortImage'
-import { ServiceTypeIdsEnum } from 'features/serviceManagement/apiSlice'
+import {
+  ServiceTypeIdsEnum,
+  useFetchDocumentMutation,
+} from 'features/serviceManagement/apiSlice'
 import NoItems from '../NoItems'
 
 dayjs.extend(isToday)
@@ -63,6 +66,7 @@ export default function ServiceMarketplace() {
   const [selected, setSelected] = useState<string>('All Services')
   const [sortOption, setSortOption] = useState<string>('new')
   const [cardServices, setCardServices] = useState<ServiceRequest[]>([])
+  const [fetchDocument] = useFetchDocumentMutation()
 
   let serviceTypeId = ''
 
@@ -98,6 +102,38 @@ export default function ServiceMarketplace() {
     setSelected(e.currentTarget.value)
   }
 
+  const getImage = useCallback(
+    async (service: ServiceRequest) => {
+      try {
+        const response = await fetchDocument({
+          appId: service.id,
+          documentId: service.leadPictureId,
+        }).unwrap()
+        const file = response.data
+        return URL.createObjectURL(file)
+      } catch (error) {
+        console.error('Error fetching image:', error)
+        return null
+      }
+    },
+    [fetchDocument]
+  )
+
+  useEffect(() => {
+    if (services && services.length > 0) {
+      const loadImages = async () => {
+        const serviceWithLeadId = await Promise.all(
+          services.map(async (service) => {
+            const img = await getImage(service)
+            return { ...service, leadPictureId: img }
+          })
+        )
+        setCardServices(serviceWithLeadId as ServiceRequest[])
+      }
+      loadImages()
+    }
+  }, [services])
+
   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 {