add eligibility banner to benefit page

Author: wbglaeser

src/ui/screens/benefit-page/BenefitPageScreen.js

@@ -17,6 +17,7 @@ const BenefitPageScreen = ({
     localisedData,
     xml,
     validatedStatus,
+    validationResult,
     categoryTitles,
     matchingGraph
 }) => {
@@ -25,7 +26,7 @@ const BenefitPageScreen = ({
         <Layout isApp={true} logo={false} back="Back">
             <AppScreenWrapperContainer backTarget={'/eligibility-overview'}>
                 <VBox sx={{ gap: { xs: 4, md: 8 } }}>
-                    <BenefitPageHeader id={id} benefit={benefitPageData} validatedStatus={validatedStatus} categoryTitles={categoryTitles} />
+                    <BenefitPageHeader id={id} benefit={benefitPageData} validatedStatus={validatedStatus} validationResult={validationResult} categoryTitles={categoryTitles} />
                     <VBox sx={{ gap: { xs: 4, md: 8 }}}>
                         <BenefitPageGeneral t={t} isDesktop={isDesktop} benefitPageData={benefitPageData} />
                         <BenefitPageApplication t={t} isDesktop={isDesktop} benefitPageData={benefitPageData} xml={xml} />

src/ui/screens/benefit-page/BenefitPageScreenContainer.js

@@ -21,7 +21,7 @@ const BenefitPageScreenContainer = () => {
 
     const benefitPageData = useFetchStaticBenefitPageData(id, language);
     const categoryTitles = useBuildCategoryTitles(id, language);
-    const validatedStatus = useValidatedStatus(id);
+    const {validatedStatus, validationResult} = useValidatedStatus(id);
     const activeUserId = useUserStore((state) => state.activeUserId);
     const localisedData = useFetchLocaliseData(benefitPageData);
     const xml = useFetchData(`assets/data/xml/${id.split(":")[1]}.xml`);
@@ -49,6 +49,7 @@ const BenefitPageScreenContainer = () => {
             localisedData={localisedData}
             xml={xml}
             validatedStatus={validatedStatus}
+            validationResult={validationResult}
             categoryTitles={categoryTitles}
             matchingGraph={matchingGraph}
         />

src/ui/screens/benefit-page/components/BenefitPageHeader.js

@@ -6,43 +6,63 @@ import { HBox, VBox } from "@/ui/shared-components/LayoutBoxes";
 import { useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
 import useTranslation from "@/ui/language/useTranslation";
 import theme from "@/theme";
+import EligibilityOverviewBanner from "../../eligibilty-overview/components/EligibilityOverviewBanner";
 
-const BenefitPageHeader = ({ id, benefit, validatedStatus, categoryTitles }) => {
+const BenefitPageHeader = ({
+    id,
+    benefit,
+    validatedStatus,
+    validationResult,
+    categoryTitles
+}) => {
     const { t } = useTranslation();
     const [leiKaInfo, setLeiKaInfo] = useState(false);
 
     const setSelectedBenefits = useSelectedBenefitsStore((state) => state.setSelectedBenefits);
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
     return (
-        <HBox sx={{ justifyContent: 'space-between', gap: 4, flexWrap: 'wrap' }}>
-            <VBox sx={{ gap: 2 }}>
+        <HBox sx={{ justifyContent: 'space-between', gap: {xs: 2, md: 4}, flexWrap: 'wrap' }}>
+            <VBox sx={{ gap: {xs: 2, md: 4} }}>
                 <Typography variant="h1" sx={{ wordBreak: 'break-word' }}>
                     {benefit?.title}
                 </Typography>
                 <VBox sx={{ gap: 2 }}>
                     <VBox sx={{ gap: 1 }}>
+                        {
+                            validatedStatus && (
+                                <HBox>
+                                    <EligibilityOverviewBanner t={t} eligible={validationResult} />
+                                </HBox>
+                            )
+                        }
                         <HBox sx={{ gap: 1, alignItems: 'center' }}>
-                            <Typography variant="body2" sx={{ color: 'black.light' }}>
-                                LeiKa-Id: {benefit?.leikaId}
-                            </Typography>
-                            <IconButton
-                                sx={{
-                                    width: 24,
-                                    height: 24,
-                                    borderRadius: theme.shape.circle,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    backgroundColor: 'white',
-                                    '&:hover': {
-                                        backgroundColor: 'black.light',
-                                    },
-                                }}
-                                onClick={() => setLeiKaInfo(!leiKaInfo)}
-                            >
-                                <InfoOutlinedIcon sx={{ fontSize: 16, color: 'black.light' }} />
-                            </IconButton>
+                            {
+                                benefit?.leikaId && (
+                                    <>
+                                        <Typography variant="body2" sx={{ color: 'black.light' }}>
+                                            LeiKa-Id: {benefit?.leikaId}
+                                        </Typography>
+                                        <IconButton
+                                            sx={{
+                                                width: 24,
+                                                height: 24,
+                                                borderRadius: theme.shape.circle,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                backgroundColor: 'white',
+                                                '&:hover': {
+                                                    backgroundColor: 'black.light',
+                                                },
+                                            }}
+                                            onClick={() => setLeiKaInfo(!leiKaInfo)}
+                                        >
+                                            <InfoOutlinedIcon sx={{ fontSize: 16, color: 'black.light' }} />
+                                        </IconButton>
+                                    </>
+                                )
+                            }
                         </HBox>
                         {leiKaInfo && (
                             <Typography variant="body2" sx={{ color: 'black.light' }}>

src/ui/screens/benefit-page/hooks/useFetchStaticBenefitPageData.js

@@ -20,7 +20,7 @@ const useFetchStaticBenefitPageData = (id, language) => {
     const resource = hydrationData[id] || {};
     return {
       title:                pickLang(resource?.title, language, 'Unknown Title'),
-      leikaId:              getField(resource, 'leika_id', 'Unknown Id'),
+      leikaId:              getField(resource, 'leika_id', null),
       teaser:               pickLang(resource?.teaser, language, null),
       brief :               pickLang(resource?.general?.brief, language, null),
       scope :               pickLang(resource?.general?.scope, language, null),

src/ui/screens/benefit-page/hooks/useValidatedStatus.js

@@ -7,7 +7,10 @@ const useValidatedStatus = (id) => {
     return useMemo(() => {
         if (!validationReport) return false;
         const report = validationReport?.['ff:hasEvaluatedRequirementProfile']?.find(rp => rp['ff:hasRpUri']['@id'] === id);
-        return report?.["ff:hasEligibilityStatus"]["@id"] !== "ff:missingData" || false;
+        return {
+            validatedStatus: report?.["ff:hasEligibilityStatus"]["@id"] !== "ff:missingData" || false,
+            validationResult: report?.["ff:hasEligibilityStatus"]["@id"]?.replace(/^ff:/, "") || null
+        }
     }, [id, validationReport]);
 };
 

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

@@ -25,6 +25,12 @@ const EligibilityOverviewBanner = ({ t, eligible }) => {
                     border: '1px solid rgba(255, 0, 0, 0.2)',
                     backgroundColor: 'error.light'
                 }
+            case 'ineligible':
+                return {
+                    text: 'app.browseAll.item.notEligible',
+                    border: '1px solid rgba(255, 0, 0, 0.2)',
+                    backgroundColor: 'error.light'
+                }
             default:
                 return {
                     text: 'app.browseAll.item.missingData',
@@ -36,11 +42,13 @@ const EligibilityOverviewBanner = ({ t, eligible }) => {
     const eligibilityIcon = (() => {
         switch (eligible) {
             case 'eligible':
-                return <CheckIcon sx={{ fontSize: '16px' }} />;
+                return <CheckIcon sx={{ fontSize: '20spx' }} />;
             case 'non-eligible':
-                return <ClearIcon sx={{ fontSize: '16px' }} />;
+                return <ClearIcon sx={{ fontSize: '20px' }} />;
+            case 'ineligible':
+                return <ClearIcon sx={{ fontSize: '20px' }} />;
             default:
-                return <ClearIcon sx={{ fontSize: '16px' }} />;
+                return <ClearIcon sx={{ fontSize: '20px' }} />;
         }
     })();