fix(company subscription): show both app and service subscriptions (#…

…1101)

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## (unreleased) 2.2.0-RC3
+
 ## Unreleased
 
 ### Bugfixes
@@ -31,6 +33,7 @@
 
 - **Company Subscriptions**
   - Update and bind API with filter options [#1062](https://github.com/eclipse-tractusx/portal-frontend/pull/1062)
+  - Add a tabular section to show up both app and service subscription data [#1101](https://github.com/eclipse-tractusx/portal-frontend/pull/1101)
 
 ### Bugfixes
 

src/assets/locales/de/main.json

@@ -453,8 +453,8 @@
       "technicalUser": "Technischer Benutzer",
       "unsubscribe": "Abbestellen",
       "table": {
-        "appIcon": "App-Symbol",
-        "appTitle": "App-Titel",
+        "appIcon": "Symbol",
+        "appTitle": "Titel",
         "status": "Status",
         "details": "Einzelheiten",
         "action": "Aktion"
@@ -464,7 +464,8 @@
         "active": "aktiv",
         "inactive": "inaktiv",
         "showAll": "Alles anzeigen"
-      }
+      },
+      "searchName": "..search by company name here"
     },
     "companySubscriptionsDetail": {
       "language": "Verfügbare App Sprachen",

src/assets/locales/en/main.json

@@ -449,8 +449,8 @@
       "technicalUser": "Technical User",
       "unsubscribe": "Unsubscribe",
       "table": {
-        "appIcon": "App Icon",
-        "appTitle": "App title",
+        "appIcon": "Icon",
+        "appTitle": "Title",
         "status": "Status",
         "details": "Details",
         "action": "Action"
@@ -460,7 +460,8 @@
         "active": "active",
         "inactive": "inactive",
         "showAll": "show all"
-      }
+      },
+      "searchName": "..search by company name here"
     },
     "companySubscriptionsDetail": {
       "language": "Language",

src/components/pages/CompanySubscriptions/CompanySubscriptionDetail.tsx

@@ -17,37 +17,75 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { BackButton } from '@catena-x/portal-shared-components'
+import { BackButton, LogoGrayData } from '@catena-x/portal-shared-components'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import {
   useFetchAppDetailsQuery,
   useFetchSubscriptionAppQuery,
 } from 'features/apps/apiSlice'
 import { PAGES } from 'types/Constants'
+import './CompanySubscriptions.scss'
+import {
+  useFetchServiceDetailsQuery,
+  useFetchSubscriptionServiceQuery,
+} from 'features/serviceSubscription/serviceSubscriptionApiSlice'
+import CommonService from 'services/CommonService'
+import { useState, useEffect } from 'react'
+import { getApiBase } from 'services/EnvironmentService'
 import CompanySubscriptionTechnical from './components/CompanySubscriptionTechnical'
-import CompanySubscriptionContent from './components/CompanySubscriptionContent'
 import CompanySubscriptionHeader from './components/CompanySubscriptionHeader'
-import CompanySubscriptionDocument from './components/CompanySubscriptionDocument'
+import CompanySubscriptionContent from './components/CompanySubscriptionContent'
 import CompanySubscriptionPrivacy from './components/CompanySubscriptionPrivacyContent'
-import './CompanySubscriptions.scss'
+import CompanySubscriptionDocument from './components/CompanySubscriptionDocument'
 
 export default function CompanySubscriptionDetail() {
   const navigate = useNavigate()
   const { state: items } = useLocation()
   const { t } = useTranslation()
+  const id = items.row.offerId ?? ('' as string)
+  const subscriptionId = items.row.subscriptionId ?? ('' as string)
+  const { data: appData, error: appError } = useFetchSubscriptionAppQuery(
+    { appId: id, subscriptionId },
+    { skip: items.service }
+  )
+  const { data: serviceData, error: serviceError } =
+    useFetchSubscriptionServiceQuery(
+      { serviceId: id, subscriptionId },
+      { skip: items.app }
+    )
+  const { data: fetchAppsData } = useFetchAppDetailsQuery(id, {
+    skip: items.service,
+  })
+  const { data: fetchServicessData } = useFetchServiceDetailsQuery(id, {
+    skip: items.app,
+  })
+  const [docId, setDocId] = useState('')
+
+  const data = items.app ? appData : serviceData
+  const fetchData = items.app ? fetchAppsData : fetchServicessData
 
-  const appId = items ? items.offerId : ''
-  const subscriptionId = items ? items.subscriptionId : ''
+  // To-Do fix the type issue with status and data from FetchBaseQueryError
+  // eslint-disable-next-line
+  const error: any = items.app ? appError : serviceError
 
-  // Prevent API call when appId does not exist
-  const { data } = appId
-    ? useFetchSubscriptionAppQuery({ appId, subscriptionId })
-    : { data: undefined }
-  const { data: fetchAppsData } = appId
-    ? useFetchAppDetailsQuery(appId)
-    : { data: undefined }
+  useEffect(() => {
+    if (fetchData?.leadPictureId) {
+      const id = CommonService.isValidPictureId(fetchData?.leadPictureId)
+      setDocId(id)
+    }
+  }, [fetchData])
+
+  const getSrc = () => {
+    if (fetchData?.id && items.app && docId)
+      return `${getApiBase()}/api/apps/${fetchData.id}/appDocuments/${docId}`
+    if (fetchData?.id && items.service && docId)
+      return `${getApiBase()}/api/services/${
+        fetchData.id
+      }/serviceDocuments/${docId}`
+    return LogoGrayData
+  }
 
   return (
     <main className="company-subscription-detail">
@@ -61,12 +99,14 @@ export default function CompanySubscriptionDetail() {
             }}
           />
         </Box>
-        {data && fetchAppsData && (
+        {error && <Typography variant="body2">{error?.data?.title}</Typography>}
+
+        {data && fetchData && (
           <>
-            <CompanySubscriptionHeader detail={fetchAppsData} />
-            <CompanySubscriptionContent detail={fetchAppsData} />
-            <CompanySubscriptionDocument detail={fetchAppsData} />
-            <CompanySubscriptionPrivacy detail={fetchAppsData} />
+            <CompanySubscriptionHeader detail={fetchData} src={getSrc()} />
+            <CompanySubscriptionContent detail={fetchData} />
+            <CompanySubscriptionDocument detail={fetchData} />
+            <CompanySubscriptionPrivacy detail={fetchData} />
             <CompanySubscriptionTechnical detail={data} />
           </>
         )}

src/components/pages/CompanySubscriptions/CompanySubscriptionsTableColumns.tsx

@@ -43,7 +43,8 @@ import './CompanySubscriptions.scss'
 
 export const CompanySubscriptionsTableColumns = (
   t: typeof i18next.t,
-  handleOverlay?: (row: SubscribedActiveApps, enable: boolean) => void
+  handleOverlay?: (row: SubscribedActiveApps, enable: boolean) => void,
+  currentActive?: number
 ): Array<GridColDef> => {
   const navigate = useNavigate()
 
@@ -86,6 +87,19 @@ export const CompanySubscriptionsTableColumns = (
       )
   }
 
+  const canShowButton = (row: SubscribedActiveApps) =>
+    row.status === SubscriptionStatus.ACTIVE
+
+  const getSource = (row: SubscribedActiveApps) => {
+    if (row.image && currentActive === 0)
+      return `${getApiBase()}/api/apps/${row.offerId}/appDocuments/${row.image}`
+    if (row.image && currentActive === 1)
+      return `${getApiBase()}/api/services/${row.offerId}/serviceDocuments/${
+        row.image
+      }`
+    return LogoGrayData
+  }
+
   return [
     {
       field: 'image',
@@ -96,13 +110,7 @@ export const CompanySubscriptionsTableColumns = (
       disableColumnMenu: true,
       renderCell: ({ row }: { row: SubscribedActiveApps }) => (
         <Image
-          src={
-            row.image
-              ? `${getApiBase()}/api/apps/${row.offerId}/appDocuments/${
-                  row.image
-                }`
-              : LogoGrayData
-          }
+          src={getSource(row)}
           loader={fetchImageWithToken}
           style={{
             objectFit: 'cover',
@@ -146,7 +154,13 @@ export const CompanySubscriptionsTableColumns = (
             onClick={() => {
               navigate(
                 `/${PAGES.COMPANY_SUBSCRIPTIONS_DETAIL}/${row.offerId}`,
-                { state: row }
+                {
+                  state: {
+                    row,
+                    app: currentActive === 0,
+                    service: currentActive === 1,
+                  },
+                }
               )
             }}
           >
@@ -161,21 +175,20 @@ export const CompanySubscriptionsTableColumns = (
       flex: 2,
       disableColumnMenu: true,
       sortable: false,
-      renderCell: ({ row }: { row: SubscribedActiveApps }) =>
-        row.status === SubscriptionStatus.ACTIVE && (
-          <Button
-            variant="contained"
-            size="small"
-            sx={{ textTransform: 'none' }}
-            onClick={(e) => {
-              handleOverlay?.(row, true)
-              console.log('row.offerId', row.offerId)
-              e.stopPropagation()
-            }}
-          >
-            {t('content.companySubscriptions.unsubscribe')}
-          </Button>
-        ),
+      renderCell: ({ row }: { row: SubscribedActiveApps }) => (
+        <Button
+          variant="contained"
+          size="small"
+          disabled={!canShowButton(row)}
+          sx={{ textTransform: 'none' }}
+          onClick={(e) => {
+            handleOverlay?.(row, true)
+            e.stopPropagation()
+          }}
+        >
+          {t('content.companySubscriptions.unsubscribe')}
+        </Button>
+      ),
     },
   ]
 }

src/components/pages/CompanySubscriptions/components/CompanySubscriptionContent/index.tsx

@@ -22,11 +22,12 @@ import { Box, useMediaQuery, useTheme } from '@mui/material'
 import { ImageGallery, Typography } from '@catena-x/portal-shared-components'
 import { type AppDetails } from 'features/apps/types'
 import CommonService from 'services/CommonService'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export default function CompanySubscriptionContent({
   detail,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
 }>) {
   const { t } = useTranslation()
   const theme = useTheme()
@@ -44,14 +45,16 @@ export default function CompanySubscriptionContent({
         </Typography>
       </Box>
       <Box className="company-subscription-content-section" id="image-gallery">
-        <ImageGallery
-          gallery={CommonService.imagesAndAppidToImageType(
-            detail.images,
-            detail.id
-          )}
-          maxWidth={isMobile ? 150 : undefined}
-          modalWidth={isMobile ? '300' : '600'}
-        />
+        {detail?.images && (
+          <ImageGallery
+            gallery={CommonService.imagesAndAppidToImageType(
+              detail.images,
+              detail.id
+            )}
+            maxWidth={isMobile ? 150 : undefined}
+            modalWidth={isMobile ? '300' : '600'}
+          />
+        )}
       </Box>
     </>
   )

src/components/pages/CompanySubscriptions/components/CompanySubscriptionDocument/index.tsx

@@ -26,11 +26,12 @@ import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import { type AppDetails, type Documents } from 'features/apps/types'
 import { download } from 'utils/downloadUtils'
 import 'components/styles/document.scss'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export default function CompanySubscriptionDocument({
   detail,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
 }>) {
   const { t } = useTranslation()
 

src/components/pages/CompanySubscriptions/components/CompanySubscriptionHeader/index.tsx

@@ -28,26 +28,18 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import UnpublishedIcon from '@mui/icons-material/Unpublished'
 import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty'
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
 import { type AppDetails, SubscriptionStatus } from 'features/apps/types'
-import CommonService from 'services/CommonService'
 import { fetchImageWithToken } from 'services/ImageService'
-import { getApiBase } from 'services/EnvironmentService'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export default function CompanySubscriptionHeader({
   detail,
+  src,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
+  src: string
 }>) {
   const { t } = useTranslation()
-  const [docId, setDocId] = useState('')
-
-  useEffect(() => {
-    if (detail.leadPictureId) {
-      const id = CommonService.isValidPictureId(detail.leadPictureId)
-      setDocId(id)
-    }
-  }, [detail])
 
   const renderStatusButton = (status: string) => {
     if (status === SubscriptionStatus.ACTIVE)
@@ -102,11 +94,7 @@ export default function CompanySubscriptionHeader({
     <Box className="company-subscription-header">
       <div className="lead-image">
         <Image
-          src={
-            detail?.id && docId
-              ? `${getApiBase()}/api/apps/${detail.id}/appDocuments/${docId}`
-              : LogoGrayData
-          }
+          src={src ?? LogoGrayData}
           alt={detail.title}
           loader={fetchImageWithToken}
         />
@@ -119,7 +107,7 @@ export default function CompanySubscriptionHeader({
         <Typography variant="label2">
           {t('content.companySubscriptionsDetail.language')}:
           <Typography variant="caption2" sx={{ pb: 2, ml: 1 }}>
-            {detail.languages.length
+            {detail?.languages?.length
               ? detail.languages.map((lang, index) => (
                   <span key={lang}>
                     {` ${index ? ', ' : ''}${lang.toUpperCase()} `}

src/components/pages/CompanySubscriptions/components/CompanySubscriptionPrivacyContent/index.tsx

@@ -24,6 +24,7 @@ import { Typography } from '@catena-x/portal-shared-components'
 import { PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
 import { type AppDetails } from 'features/apps/types'
 import './CompanySubscriptionPrivacyContent.scss'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 const policyIcons = {
   [PrivacyPolicyType.COMPANY_DATA]: Apartment,
@@ -36,7 +37,7 @@ const policyIcons = {
 export default function CompanySubscriptionPrivacy({
   detail,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
 }>) {
   const { t } = useTranslation('', {
     keyPrefix: 'content.companySubscriptionsDetail.privacy',
@@ -58,7 +59,7 @@ export default function CompanySubscriptionPrivacy({
       </div>
       {detail?.privacyPolicies?.length ? (
         <div className="policies-list app-policies">
-          {detail.privacyPolicies.map((policy: PrivacyPolicyType) => (
+          {detail?.privacyPolicies?.map((policy: PrivacyPolicyType) => (
             <Typography
               variant="body2"
               className="policy-name"