feat: subscription detail page for customer (#1051)

eclipse-tractusx · Sep 6, 2024 · 35f03e3 · 35f03e3
1 parent 104bde6
commit 35f03e3
Show file tree

Hide file tree

Showing 11 changed files with 653 additions and 153 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@
 
 - Customer Detail Data Overlay
   - implement new UI design for customer detail data overlay
+- **Company Subscription Management**
+  - Extended the subscription detail page for customer to include more app-related information [#1051](https://github.com/eclipse-tractusx/portal-frontend/pull/1051)
 
 ### BugFix
 

diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -466,6 +466,34 @@
         "showAll": "Alles anzeigen"
       }
     },
+    "companySubscriptionsDetail": {
+      "language": "Verfügbare App Sprachen",
+      "description": "Description",
+      "subscribed": "Gezeichnet",
+      "requested": "Angefordert",
+      "declined": "Abgelehnt",
+      "howtouse": {
+        "heading": "Nutzungsbedingungen",
+        "message": "Die Nutzungsbedingungen regeln das Verhältnis zwischen App Interessenten und App Anbieter. Die Nutzungsbedingungen, sowie die Datenmodelle und weitere Informationen können durch Anklicken der Hyperlinks eingesehen werden."
+      },
+      "privacy": {
+        "heading": "Datenschutz",
+        "message": "Die Datenschutzerklärung gibt an, welche Daten die Geschäftsanwendungen erheben, handhaben und verarbeiten. Die nachstehenden Details zeigen explizit, welche Unternehmens-/Benutzerinformationen gesammelt/gespeichert werden.",
+        "notSupportedMessage": "Currently not yet supported",
+        "COMPANY_DATA": "Company Data",
+        "USER_DATA": "User Data",
+        "LOCATION": "Location",
+        "BROWSER_HISTORY": "Browser History",
+        "NONE": "None"
+      },
+      "table": {
+        "connector": "Verbinder",
+        "technicalUser": "Technischer Benutzer"
+      },
+      "technicalUser": {
+        "heading": "Technischer Details"
+      }
+    },
     "appOverview": {
       "headerTitle": "Meine Applikationen",
       "title": "App-Übersicht",

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -462,6 +462,35 @@
         "showAll": "show all"
       }
     },
+    "companySubscriptionsDetail": {
+      "language": "Language",
+      "description": "Description",
+      "subscribed": "Subscribed",
+      "requested": "Requested",
+      "declined": "Declined",
+      "howtouse": {
+        "heading": "Documents",
+        "message": "The terms of use, as well as the data models and further information can be viewed by clicking on the documents shared below."
+      },
+      "privacy": {
+        "heading": "Privacy Policy",
+        "message": "The Privacy Policy states which data the business applications collects, handles and processes. The details below explicitly show which company / user information are getting collected/stored.",
+        "notSupportedMessage": "Currently not yet supported",
+        "COMPANY_DATA": "Company Data",
+        "COMPANY_DATA_ICON": "ApartmentIcon",
+        "USER_DATA": "User Data",
+        "LOCATION": "Location",
+        "BROWSER_HISTORY": "Browser History",
+        "NONE": "None"
+      },
+      "table": {
+        "connector": "Connector",
+        "technicalUser": "Technical User"
+      },
+      "technicalUser": {
+        "heading": "Technical Details"
+      }
+    },
     "datamanagement": {
       "message": "Contents of Data Management"
     },

diff --git a/src/components/pages/CompanySubscriptions/CompanySubscriptionDetail.tsx b/src/components/pages/CompanySubscriptions/CompanySubscriptionDetail.tsx
@@ -17,170 +17,60 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import {
-  Button,
-  LogoGrayData,
-  StaticTable,
-  Typography,
-  Image,
-  BackButton,
-} from '@catena-x/portal-shared-components'
+import { BackButton } from '@catena-x/portal-shared-components'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Box } from '@mui/material'
 import {
   useFetchAppDetailsQuery,
   useFetchSubscriptionAppQuery,
 } from 'features/apps/apiSlice'
-import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
-import CommonService from 'services/CommonService'
-import { Box } from '@mui/material'
 import { PAGES } from 'types/Constants'
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
-import UnpublishedIcon from '@mui/icons-material/Unpublished'
-import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty'
-import {
-  type SubscribeTechnicalUserData,
-  SubscriptionStatus,
-} from 'features/apps/types'
-import { fetchImageWithToken } from 'services/ImageService'
-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 CompanySubscriptionPrivacy from './components/CompanySubscriptionPrivacyContent'
 import './CompanySubscriptions.scss'
 
 export default function CompanySubscriptionDetail() {
   const navigate = useNavigate()
-  const { state } = useLocation()
-  const items = state
+  const { state: items } = useLocation()
   const { t } = useTranslation()
-  const appId = items.offerId ?? ''
-  const subscriptionId = items.subscriptionId ?? ''
-  const { data } = useFetchSubscriptionAppQuery({ appId, subscriptionId })
-  const fetchAppsData = useFetchAppDetailsQuery(appId).data
-  const [docId, setDocId] = useState('')
-
-  const tableData = {
-    head: [
-      t('content.companySubscriptions.connector'),
-      t('content.companySubscriptions.technicalUser'),
-    ],
-    body: [
-      [data?.connectorData?.[0]?.name ?? ''],
-      [
-        data?.technicalUserData
-          ?.map((userdata: SubscribeTechnicalUserData) => userdata.name)
-          .toString() ?? '',
-      ],
-    ],
-  }
 
-  useEffect(() => {
-    if (fetchAppsData?.leadPictureId) {
-      const id = CommonService.isValidPictureId(fetchAppsData?.leadPictureId)
-      setDocId(id)
-    }
-  }, [fetchAppsData])
+  const appId = items ? items.offerId : ''
+  const subscriptionId = items ? items.subscriptionId : ''
 
-  const renderStatusButton = (status: string) => {
-    if (status === SubscriptionStatus.ACTIVE)
-      return (
-        <Button
-          startIcon={<CheckCircleOutlineIcon />}
-          size="small"
-          sx={{
-            backgroundColor: '#B3CB2D',
-            pointerEvents: 'none',
-            float: 'right',
-            textTransform: 'none',
-          }}
-        >
-          {t('content.companySubscriptions.subscribed')}
-        </Button>
-      )
-    else if (status === SubscriptionStatus.PENDING)
-      return (
-        <Button
-          size="small"
-          sx={{
-            backgroundColor: '#FFA600',
-            pointerEvents: 'none',
-            float: 'right',
-            borderColor: '#FFA600',
-            textTransform: 'none',
-          }}
-          startIcon={<HourglassEmptyIcon />}
-        >
-          {t('content.companySubscriptions.requested')}
-        </Button>
-      )
-    else
-      return (
-        <Button
-          startIcon={<UnpublishedIcon />}
-          size="small"
-          sx={{
-            backgroundColor: '#D91E18',
-            pointerEvents: 'none',
-            float: 'right',
-            textTransform: 'none',
-          }}
-        >
-          {t('content.companySubscriptions.declined')}
-        </Button>
-      )
-  }
+  // Prevent API call when appId does not exist
+  const { data } = appId
+    ? useFetchSubscriptionAppQuery({ appId, subscriptionId })
+    : { data: undefined }
+  const { data: fetchAppsData } = appId
+    ? useFetchAppDetailsQuery(appId)
+    : { data: undefined }
 
   return (
     <main className="company-subscription-detail">
-      <Box className="company-subscription-back app-back">
-        <BackButton
-          backButtonLabel={t('global.actions.back')}
-          backButtonVariant="text"
-          onBackButtonClick={() => {
-            navigate(`/${PAGES.COMPANY_SUBSCRIPTIONS}`)
-          }}
-        />
-      </Box>
-      {data && fetchAppsData && (
-        <Box className="company-subscription-content ">
-          <Box className="company-subscription-header">
-            <div className="lead-image">
-              <Image
-                src={
-                  fetchAppsData?.id
-                    ? `${getApiBase()}/api/apps/${
-                        fetchAppsData.id
-                      }/appDocuments/${docId}`
-                    : LogoGrayData
-                }
-                alt={fetchAppsData.title}
-                loader={fetchImageWithToken}
-              />
-            </div>
-            <div className="content">
-              <Box sx={{ padding: '11px 12px' }}>
-                {renderStatusButton(fetchAppsData.isSubscribed)}
-                <Typography variant="h5" sx={{ color: '#888888' }}>
-                  {fetchAppsData.provider}
-                </Typography>
-                <Typography variant="h4" sx={{}}>
-                  {fetchAppsData.title}
-                </Typography>
-              </Box>
-            </div>
-          </Box>
-          <Typography variant="h3" sx={{ whiteSpace: 'pre-line', mb: 4 }}>
-            {'Long description'}
-          </Typography>
-          <Typography variant="body2" sx={{ whiteSpace: 'pre-line' }}>
-            {fetchAppsData.longDescription}
-          </Typography>
-          <Box sx={{ mt: '59px' }}>
-            <Typography variant="h3" sx={{ mb: 4 }}>
-              {'Technical Details'}
-            </Typography>
-            <StaticTable data={tableData} horizontal={true} />
-          </Box>
+      <Box className="company-subscription-content">
+        <Box className="company-subscription-back app-back">
+          <BackButton
+            backButtonLabel={t('global.actions.back')}
+            backButtonVariant="text"
+            onBackButtonClick={() => {
+              navigate(`/${PAGES.COMPANY_SUBSCRIPTIONS}`)
+            }}
+          />
         </Box>
-      )}
+        {data && fetchAppsData && (
+          <>
+            <CompanySubscriptionHeader detail={fetchAppsData} />
+            <CompanySubscriptionContent detail={fetchAppsData} />
+            <CompanySubscriptionDocument detail={fetchAppsData} />
+            <CompanySubscriptionPrivacy detail={fetchAppsData} />
+            <CompanySubscriptionTechnical detail={data} />
+          </>
+        )}
+      </Box>
     </main>
   )
 }