fix(app overview details): show all necessary documents

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 - **App Subscription Management**
   - fixed 'read more' link by adding link [#1200](https://github.com/eclipse-tractusx/portal-frontend/pull/1200)
+- **App Overview Details**
+  - show confirmity document in separate section and all other available documents in the documents section [#1235](https://github.com/eclipse-tractusx/portal-frontend/pull/1235)
 
 ### Feature
 
@@ -20,9 +22,7 @@
 ### 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**

src/assets/locales/de/main.json

@@ -1242,7 +1242,12 @@
         "message": "Das unten definierte technische Benutzerprofil zeigt die Benutzerberechtigung an, die dem technischen Benutzer, der im Rahmen der App-/Dienstaktivierung erstellt wurde, automatisch zugewiesen wird."
       },
       "pendingTooltip": "Application subscription is pending. The app provider is informed",
-      "subscribedTooltip": "Die App ist bereits von Ihrem Unternehmen abonniert."
+      "subscribedTooltip": "Die App ist bereits von Ihrem Unternehmen abonniert.",
+      "document": {
+        "noDocumentsAvailable": "No documents available",
+        "conformityDocument": "Conformity Document",
+        "conformityDocumentsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      }
     },
     "apprelease": {
       "headerTitle": "App Release Process",

src/assets/locales/en/main.json

@@ -1211,7 +1211,12 @@
         "message": "The technical user profile defined below displays the user permission which the technical user created as part of the app/service activation gets automatically assigned."
       },
       "pendingTooltip": "Application subscription is pending. The app provider is informed",
-      "subscribedTooltip": "The app is already subscribed by your company"
+      "subscribedTooltip": "The app is already subscribed by your company",
+      "document": {
+        "noDocumentsAvailable": "No documents available",
+        "conformityDocument": "Conformity Document",
+        "conformityDocumentsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      }
     },
     "apprelease": {
       "headerTitle": "App Release Process",

src/components/pages/AppDetail/components/AppDetailDocuments/index.tsx

@@ -26,7 +26,10 @@ import { type AppDetails, type Documents } from 'features/apps/types'
 import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import { download } from 'utils/downloadUtils'
 import '../../AppDetail.scss'
-import { DocumentTypeId } from 'features/appManagement/apiSlice'
+import {
+  type DocumentData,
+  DocumentTypeId,
+} from 'features/appManagement/apiSlice'
 
 export default function AppDetailDocuments({ item }: { item: AppDetails }) {
   const { t } = useTranslation()
@@ -51,6 +54,35 @@ export default function AppDetailDocuments({ item }: { item: AppDetails }) {
   }
   return (
     <div id="documents">
+      <div className="margin-h-40">
+        <Typography variant="h3">
+          {t('content.appdetail.document.conformityDocument')}
+        </Typography>
+        <Typography variant="body2" sx={{ mb: 3 }}>
+          {t('content.appdetail.document.conformityDocumentsDescription')}
+        </Typography>
+        {item?.documents?.[DocumentTypeId.CONFORMITY_APPROVAL_BUSINESS_APPS] ? (
+          item?.documents[DocumentTypeId.CONFORMITY_APPROVAL_BUSINESS_APPS].map(
+            (item: DocumentData) => (
+              <li key={item.documentId} className="document-list doc-list">
+                <ArticleOutlinedIcon sx={{ color: '#9c9c9c' }} />
+                <button
+                  className="document-button-link"
+                  onClick={() =>
+                    handleDownloadClick(item.documentId, item.documentName)
+                  }
+                >
+                  {item.documentName}
+                </button>
+              </li>
+            )
+          )
+        ) : (
+          <Typography variant="body2" className="not-available">
+            {t('content.appdetail.document.noDocumentsAvailable')}
+          </Typography>
+        )}
+      </div>
       <div className="divider-height" />
       <Typography variant="h3">
         {t('content.appdetail.howtouse.heading')}