add tags to eligibility overview

Author: wbglaeser

src/core/utils/buildEligibilityReports.js

@@ -7,12 +7,9 @@ export const buildEligibilityReports = (validationReport, metadata, hydrationDat
         };
     }
 
-    console.log("Validation Report:", validationReport);
-    console.log("Metadata:", metadata);
-
-    const reports = validationReport['ff:hasEvaluatedRequirementProfile'] || [];   
+    const reports = validationReport['ff:hasEvaluatedRequirementProfile'] || [];
     const allReports = reports.map(report => {
-        const rpUri = report['ff:hasRpUri']?.['@id'] || null;    
+        const rpUri = report['ff:hasRpUri']?.['@id'] || null;
         const result = report['ff:hasEligibilityStatus']?.['@id'] || null;
 
         // hydration data
@@ -30,9 +27,35 @@ export const buildEligibilityReports = (validationReport, metadata, hydrationDat
         // metadata
         const rpMetadata = metadata['ff:hasRP']?.find(rp => rp['@id'] === rpUri)
         const validationStage = rpMetadata?.['ff:validationStage']?.['@id'] || 'Unknown Validation Stage';
+        const associatedLaw = rpMetadata?.['ff:legalBasis'];
+        const providingAgency = rpMetadata?.['ff:providingAgency']?.['@id'];
+        const administrativeLevel = rpMetadata?.['ff:administrativeLevel']?.['@id'];
 
-        return { uri: rpUri, result, id, title, category, description, status, requiredDocuments, additionalSupport, legalBasis, furtherInformation, validationStage };
-    });    
+        const rawCategories = rpMetadata?.['ff:category'];
+        const categoriesArray = rawCategories
+            ? (Array.isArray(rawCategories) ? rawCategories : [rawCategories])
+            : [];
+        const benefitCategories = categoriesArray.map(cat => cat['@id']).filter(Boolean);
+
+        return {
+            uri: rpUri,
+            result,
+            id,
+            title,
+            category,
+            description,
+            status,
+            requiredDocuments,
+            additionalSupport,
+            legalBasis,
+            furtherInformation,
+            validationStage,
+            associatedLaw,
+            providingAgency,
+            administrativeLevel,
+            benefitCategories
+        };
+    });
 
     const eligibilityStatus = allReports.reduce((acc, report) => {
         const { category, result } = report;
@@ -52,7 +75,7 @@ export const buildEligibilityReports = (validationReport, metadata, hydrationDat
 
             if (report.validationStage === "ff:preliminary-validation") {
                 acc[category][result].preliminary.push(report);
-            }        
+            }
         } else {
             if (!acc[category][result]) {
                 acc[category][result] = [];

src/ui/screens/eligibilty-overview/EligibilityOverviewScreenContainer.js

@@ -16,6 +16,8 @@ const EligibilityOverviewScreenContainer = () => {
     const metadata = useMetadataStore((state) => state.metadata);
     const eligibilityData = useEligibilityData(validationReport, metadata, hydrationData, language);
 
+    console.log("eligibilityData", eligibilityData);
+
     const iconPaths = useMemo(() => ({
         eligible: `${process.env.PUBLIC_URL}/assets/images/application/icon-image-eligible.svg`,
         preliminaryEligible: `${process.env.PUBLIC_URL}/assets/images/application/icon-image-preliminary-eligible.svg`,

src/ui/screens/eligibilty-overview/components/EligibilityOverviewItem.js

@@ -4,12 +4,15 @@ import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
 import theme from '@/theme';
 import RegularButton from '@/ui/shared-components/buttons/RegularButton';
 import { useSelectedBenefitStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
+import EligibilityOverTag from './EligibilityOverviewTag';
 
 const EligibilityOverviewItem = ({ item, eligible }) => {
     const color = eligible === 'indeterminate' ? 'black.light' : 'black.main';
     const setSelectedBenefit = useSelectedBenefitStore((state) => state.setSelectedBenefit);
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
+    console.log('item', item);
+
     return (
         <VBox
             sx={{
@@ -73,35 +76,30 @@ const EligibilityOverviewItem = ({ item, eligible }) => {
                         }}
                     >
                         <HBox sx={{ justifyContent: 'flex-end', flexWrap: 'wrap', gap: 1 }}>
-                            <HBox sx={{
-                                border: `1px solid ${theme.palette.green.main}`,
-                                padding: '6px 10px',
-                                borderRadius: theme.shape.borderRadius,
-                            }}>
-                                <Typography variant='body2' sx={{}}>
-                                    Bundesleistung
-                                </Typography>
-                            </HBox>
-                            <HBox sx={{
-                                border: `1px solid ${theme.palette.pink.main}`,
-                                padding: '6px 10px',
-                                borderRadius: theme.shape.borderRadius,
-                            }}>
-                                <Typography variant='body2' sx={{}}>
-                                    Agentur für Arbeit
-                                </Typography>
-                            </HBox>
-                            <HBox sx={{
-                                border: `1px solid ${theme.palette.blue.main}`,
-                                padding: '6px 10px',
-                                borderRadius: theme.shape.borderRadius,
-                            }}>
-                                <Typography variant='body2' sx={{}}>
-                                    Rehaibilitierung und Teilhabe
-                                </Typography>
-                            </HBox>
+                            {
+                                item.administrativeLevel && (
+                                    <EligibilityOverTag tag={item.administrativeLevel} tagType={'administrativeLevel'} />
+                                )
+                            }
+                            {
+                                item.associatedLaw && (
+                                    <EligibilityOverTag tag={item.associatedLaw} tagType={'associatedLaw'} />
+                                )
+                            }
+                            {
+                                item.providingAgency && (
+                                    <EligibilityOverTag tag={item.providingAgency} tagType={'providingAgency'} />
+                                )
+                            }
+                            {
+                                item.benefitCategories.length > 0 && (
+                                    item.benefitCategories.map((category, index) => (
+                                        <EligibilityOverTag key={index} tag={category} tagType={'benefitCategory'} />
+                                    ))
+                                )
+                            }
                         </HBox>
-                        <HBox sx={{ gap: 2, flexWrap: 'wrap' }}>
+                        <HBox sx={{ gap: 2, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                             <RegularButton
                                 variant={'blueHollow'}
                                 text={'app.browseAll.learnMoreBtn'}

src/ui/screens/eligibilty-overview/components/EligibilityOverviewTag.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { HBox } from '@/ui/shared-components/LayoutBoxes';
+import theme from '@/theme';
+
+const EligibilityOverTag = ({ tag, tagType }) => {
+
+    let tagStyle;
+    switch (tagType) {
+        case 'administrativeLevel':
+            tagStyle = theme.palette.green.main ;
+            break;
+        case 'associatedLaw':
+            tagStyle = theme.palette.pink.main;
+            break;
+        case 'providingAgency':
+            tagStyle = theme.palette.blue.main ;
+            break;
+        case 'benefitCategory':
+            tagStyle = theme.palette.blue.main;
+            break;
+        default:
+            tagStyle = theme.palette.black.main;
+    }
+
+    return (
+        <HBox sx={{
+            border: `1px solid ${tagStyle}`,
+            padding: '6px 10px',
+            borderRadius: theme.shape.borderRadius,
+        }}>
+            <Typography variant='body2' sx={{}}>
+                {tag}
+            </Typography>
+        </HBox>
+    );
+}
+
+export default EligibilityOverTag;