add org tags

Author: wbglaeser

src/theme.js

@@ -50,7 +50,7 @@ const theme = createTheme({
             tangerineOrange: '#FF8531',
             tangerineOrangeTransparent: 'rgba(255, 133, 49, 0.1)',
             plumPurple: '#BC5090',
-            plumPurpleTransparent: 'rgba(188, 80, 144, 0.1)',
+            plumPurpleTransparent: 'rgba(188, 80, 144, 0.5)',
             darkGrey: '#333333',
             darkGreyTransparent: 'rgba(51, 51, 51, 0.1)',
             lightGrey: '#BDBDBD',

src/ui/language/translations.js

@@ -265,7 +265,8 @@ const translations = {
                 item: {
                     eligible: "You are likely eligible",
                     notEligible: "You are likely not eligible",
-                }
+                },
+                orgTag: "For organisations"
             },
             profile: {
                 header: "Your locally stored profile",
@@ -653,7 +654,8 @@ const translations = {
                 item: {
                     eligible: "Sie haben womöglich Anspruch",
                     notEligible: "Sie haben voraussichtlich keinen Anspruch"
-                }
+                },
+                orgTag: "Für Organisationen"
             },
             profile: {
                 header: "Ihr lokal gespeichertes Profil",

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

@@ -16,6 +16,7 @@ const BenefitPageScreen = ({
     benefitPageData,
     localisedData,
     xml,
+    targetClass,
     validatedStatus,
     validationResult,
     categoryTitles,
@@ -26,7 +27,14 @@ 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} validationResult={validationResult} categoryTitles={categoryTitles} />
+                    <BenefitPageHeader 
+                        id={id} 
+                        benefit={benefitPageData} 
+                        validatedStatus={validatedStatus} 
+                        validationResult={validationResult} 
+                        targetClass={targetClass} 
+                        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

@@ -11,6 +11,7 @@ import { useUserStore } from '@/ui/storage/zustand';
 import { useStore } from "@/ui/shared-components/ViewportUpdater";
 import { useFetchLocaliseData } from './hooks/useFetchLocalisedData';
 import useFetchData from '@/ui/shared-hooks/utility/useFetchResource';
+import useFetchTargetClass from './hooks/useFetchTargetClass';
 
 const BenefitPageScreenContainer = () => {
     const { id } = useParams();
@@ -25,6 +26,7 @@ const BenefitPageScreenContainer = () => {
     const activeUserId = useUserStore((state) => state.activeUserId);
     const localisedData = useFetchLocaliseData(benefitPageData);
     const xml = useFetchData(`assets/data/xml/${id.split(":")[1]}.xml`);
+    const targetClass = useFetchTargetClass(id);
 
     useEffect(() => {
         const fetchMatchingReport = async () => {
@@ -50,6 +52,7 @@ const BenefitPageScreenContainer = () => {
             xml={xml}
             validatedStatus={validatedStatus}
             validationResult={validationResult}
+            targetClass={targetClass}
             categoryTitles={categoryTitles}
             matchingGraph={matchingGraph}
         />

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

@@ -7,12 +7,14 @@ import { useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/z
 import useTranslation from "@/ui/language/useTranslation";
 import theme from "@/theme";
 import EligibilityOverviewBanner from "../../eligibilty-overview/components/EligibilityOverviewBanner";
+import EligibilityOverviewOrgTag from "../../eligibilty-overview/components/EligibilityOverviewOrgTag";
 
 const BenefitPageHeader = ({
     id,
     benefit,
     validatedStatus,
     validationResult,
+    targetClass,
     categoryTitles
 }) => {
     const { t } = useTranslation();
@@ -22,20 +24,30 @@ const BenefitPageHeader = ({
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
     return (
-        <HBox sx={{ justifyContent: 'space-between', gap: {xs: 2, md: 4}, flexWrap: 'wrap' }}>
-            <VBox sx={{ gap: {xs: 2, md: 4} }}>
+        <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: (validatedStatus || targetClass) ? 2 : 0, 
+                            alignItems: 'center' 
+                        }}>
+                            {
+                                validatedStatus && (
+                                    <HBox>
+                                        <EligibilityOverviewBanner t={t} eligible={validationResult} />
+                                    </HBox>
+                                )
+                            }
+                            {
+                                targetClass && (
+                                    <EligibilityOverviewOrgTag t={t} />
+                                )
+                            }
+                        </HBox>
                         <HBox sx={{ gap: 1, alignItems: 'center' }}>
                             {
                                 benefit?.leikaId && (

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

@@ -0,0 +1,14 @@
+import { useMemo, } from 'react';
+import { useMetadataStore } from '@/ui/storage/zustand';
+
+const useFetchClassTag = (id) => {
+    const metadata = useMetadataStore((state) => state.metadata);
+
+    return useMemo(() => {
+        if (!metadata || !id) return null;
+        const rpMetaData = metadata['ff:hasRP']?.find(rp => rp['@id'] === id) || null;
+        return rpMetaData['ff:targetClass']?.["@id"]
+    }, [metadata, id]);
+};
+
+export default useFetchClassTag;

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

@@ -59,7 +59,7 @@ const EligibilityOverviewBanner = ({ t, eligible }) => {
             padding: '6px 18px',
             borderRadius: theme.shape.borderRadius,
             alignItems: 'center',
-            gap: 1,
+            gap: 1
         }}>
             <Typography variant="body1">{t(eligibilityBannerType.text)}</Typography>
             {eligibilityIcon}

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

@@ -6,6 +6,7 @@ import RegularButton from '@/ui/shared-components/buttons/RegularButton';
 import { useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
 import EligibilityOverviewTag from './EligibilityOverviewTag';
 import EligibilityOverviewBanner from './EligibilityOverviewBanner';
+import EligibilityOverviewOrgTag from './EligibilityOverviewOrgTag';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import EastIcon from '@mui/icons-material/East';
@@ -24,7 +25,7 @@ const EligibilityOverviewItem = ({ t, item, eligible, isDesktop }) => {
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
     const hasFirstSectionChildren =
-        eligible !== 'indeterminate' ||
+        eligible !== 'indeterminate' || item.targetClass ||
         (!isVisible && isDesktop && item.benefitCategories?.length > 0);
 
     return (
@@ -113,6 +114,11 @@ const EligibilityOverviewItem = ({ t, item, eligible, isDesktop }) => {
                                     <EligibilityOverviewBanner t={t} eligible={eligible} />
                                 )
                             }
+                            {   
+                                item.targetClass && (
+                                    <EligibilityOverviewOrgTag t={t} />
+                                )
+                            }
                             {!isVisible && isDesktop &&
                                 item.benefitCategories?.map(tag => (
                                     <EligibilityOverviewTag

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

@@ -0,0 +1,20 @@
+import { Typography } from "@mui/material";
+import { HBox } from "@/ui/shared-components/LayoutBoxes";
+import theme from "@/theme";
+import GroupsIcon from '@mui/icons-material/Groups';
+
+const EligibilityOverviewOrgTag = ({ t }) => {
+    return (
+        <HBox sx={{
+            backgroundColor: theme.palette.custom.plumPurpleTransparent,
+            padding: '6px 18px',
+            borderRadius: theme.shape.borderRadius,
+            alignItems: 'center',
+            gap: 1
+        }}>
+            <Typography variant="body1">{t("app.browseAll.orgTag")}</Typography>
+            <GroupsIcon sx={{ fontSize: 20 }} />
+        </HBox>
+    );
+}
+export default EligibilityOverviewOrgTag;

src/ui/screens/eligibilty-overview/hooks/useEligibilityData.js

@@ -91,6 +91,9 @@ const useEligibilityData = (validationReport, metadata, hydrationData, language)
           }))
         : [];
 
+      // target Class
+      const targetClass = rpMetadata?.['ff:targetClass']?.['@id'] || null;
+
       return {
         uri: rpUri,
         result,
@@ -108,7 +111,8 @@ const useEligibilityData = (validationReport, metadata, hydrationData, language)
         providingAgencies,
         tags,
         administrativeLevels,
-        benefitCategories
+        benefitCategories,
+        targetClass
       };
     });