add eligibility banner

Author: wbglaeser

src/core/utils/buildEligibilityReports.js

@@ -142,25 +142,12 @@ export const buildEligibilityReports = (validationReport, metadata, hydrationDat
             acc[category] = {};
         }
 
-        if (result === "ff:eligible") {
-            if (!acc[category][result]) {
-                acc[category][result] = { preliminary: [], final: [] };
-            }
-
-            if (report.validationStage === "ff:complete-validation") {
-                acc[category][result].final.push(report);
-            }
-
-            if (report.validationStage === "ff:preliminary-validation") {
-                acc[category][result].preliminary.push(report);
-            }
-        } else {
-            if (!acc[category][result]) {
-                acc[category][result] = [];
-            }
-            acc[category][result].push(report);
+        if (!acc[category][result]) {
+            acc[category][result] = [];
         }
 
+        acc[category][result].push(report);
+
         return acc;
     }, {});
 

src/ui/language/translations.js

@@ -1,5 +1,3 @@
-import { filter } from "lodash";
-
 const translations = {
     en: {
         home: {
@@ -221,6 +219,10 @@ const translations = {
                     administrativeLevels: "Administrative level",
                     providingAgencies: "Providing agency",
                     associatedLaws: "Associated law",
+                },
+                item: {
+                    eligible: "You are likely eligible",
+                    notEligible: "You are likely not eligible",
                 }
             },
             profile: {
@@ -514,6 +516,10 @@ const translations = {
                     administrativeLevels: "Verwaltungsebene",
                     providingAgencies: "Zuständige Behörde",
                     associatedLaws: "Zugehöriges Gesetz",
+                },
+                item: {
+                    eligible: "Sie haben womöglich Anspruch",
+                    notEligible: "Sie haben voraussichtlich keinen Anspruch",
                 }
             },
             profile: {

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

@@ -9,7 +9,6 @@ import EligibilityOverviewFilter from './components/EligibilityOverviewFilter';
 
 const EligibilityOverviewScreen = ({
     t,
-    iconPaths,
     eligibilityData,
     filterOptions,
     filters,
@@ -20,7 +19,7 @@ const EligibilityOverviewScreen = ({
         <Layout isApp={true} logo={true}>
             <AppScreenWrapperContainer back={true}>
                 <VBox sx={{ gap: { xs: 4, md: 8 } }} >
-                    <EligibilityOverviewHeader iconPaths={iconPaths} />
+                    <EligibilityOverviewHeader />
                     <VBox sx={{ gap: { xs: 2, md: 4 } }}>
                         <EligibilityOverviewFilter
                             t={t}
@@ -34,18 +33,18 @@ const EligibilityOverviewScreen = ({
                                     {
                                         eligibilityData["social_benefit"] && (
                                             <EligibilityOverviewSection
+                                                t={t}
                                                 category={t('app.topicSelection.socialBenefitsTitle')}
                                                 eligibilitySection={eligibilityData["social_benefit"]}
-                                                iconPaths={iconPaths}
                                             />
                                         )
                                     }
                                     {
                                         eligibilityData["business"] && (
                                             <EligibilityOverviewSection
+                                                t={t}
                                                 category={t('app.topicSelection.businessTitle')}
                                                 eligibilitySection={eligibilityData["business"]}
-                                                iconPaths={iconPaths}
                                             />
                                         )
                                     }

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import useFetchData from "@/ui/shared-hooks/utility/useFetchResource";
 import useTranslation from "@/ui/language/useTranslation";
 import EligibilityOverviewScreen from './EligibilityOverviewScreen';
@@ -24,17 +24,9 @@ const EligibilityOverviewScreenContainer = () => {
     const { eligibilityData, filterOptions } = useEligibilityData(validationReport, metadata, hydrationData, language);
     const filteredEligibilityData = useFilterEligibilityData(eligibilityData, filters);
 
-    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`,
-        ineligible: `${process.env.PUBLIC_URL}/assets/images/application/icon-image-ineligible.svg`,
-        missing: `${process.env.PUBLIC_URL}/assets/images/application/icon-image-missing.svg`,
-    }), []);
-
     return (
         <EligibilityOverviewScreen
             t={t}
-            iconPaths={iconPaths}
             eligibilityData={filteredEligibilityData}
             filterOptions={filterOptions}
             filters={filters}

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

@@ -0,0 +1,43 @@
+import { Typography } from "@mui/material";
+import { HBox } from "@/ui/shared-components/LayoutBoxes";
+import theme from "@/theme";
+
+const EligibilityOverviewBanner = ({ t, eligible }) => {
+    console.log("EligibilityOverviewBanner", eligible);
+
+    const eligibilityBannerType = (() => {
+        switch (eligible) {
+            case 'eligible':
+                return {
+                    text: 'app.browseAll.item.eligible',
+                    backgroundColor: 'secondary.light'
+                }
+            case 'preliminary-eligible':
+                return {
+                    text: 'app.browseAll.item.preliminaryEligible',
+                    backgroundColor: 'yellow.main'
+                }
+            case 'non-eligible':
+                return {
+                    text: 'app.browseAll.item.notEligible',
+                    backgroundColor: 'error.light'
+                }
+            default:
+                return {
+                    text: 'app.browseAll.item.missingData',
+                    backgroundColor: theme.palette.black.main
+                }
+        }
+    })();
+
+    return (
+        <HBox sx={{
+            backgroundColor: eligibilityBannerType.backgroundColor,
+            padding: '6px 10px',
+            borderRadius: theme.shape.borderRadius,
+        }}>
+            <Typography>{t(eligibilityBannerType.text)}</Typography>
+        </HBox>
+    );
+}
+export default EligibilityOverviewBanner;