add section for funding conditions

Citizen-Knowledge-Graph · Mar 2, 2025 · 6ea8a8f · 6ea8a8f
1 parent d2e3a3d
commit 6ea8a8f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 2 deletions.
diff --git a/src/ui/language/translations.js b/src/ui/language/translations.js
@@ -175,6 +175,7 @@ const translations = {
                 eligibilityBtn: "Check eligibility",
                 whatIsIt: "What is ",
                 applicationProcess: "How do I apply?",
+                fundingConditions: "What are the funding conditions?",
                 requiredDocuments: "Which documents do I need?",
                 additionalSupport: "Where can I get additional support?",
                 legalBasis: "Legal basis",
@@ -402,6 +403,7 @@ const translations = {
                 eligibilityBtn: "Anspruch prüfen",
                 whatIsIt: "Was ist ",
                 applicationProcess: "Wie stelle ich den Antrag?",
+                fundingConditions: "Wie sieht die Leistung oder Förderung aus?",
                 requiredDocuments: "Welche Dokumente benötige ich?",
                 additionalSupport: "Wo kann ich zusätzliche Unterstützung erhalten?",
                 legalBasis: "Rechtsgrundlage",

diff --git a/src/ui/screens/benefit-page/BenefitPageScreen.js b/src/ui/screens/benefit-page/BenefitPageScreen.js
@@ -19,6 +19,7 @@ import BenefitPageRequiredDocuments from './components/BenefitPageRequiredDocume
 import ContentBox from '../../shared-components/ContentBox';
 import BenefitPageLinksList from './components/BenefitPageLinksList';
 import theme from '../../../theme';
+import BenefitPageInfoList from './components/BenefitPageInfoList';
 
 const BenefitPageScreen = () => {
     const { id } = useParams();
@@ -83,6 +84,11 @@ const BenefitPageScreen = () => {
                         <Typography variant="h6">{t('app.benefitPage.whatIsIt')}{benefitPageData.title}</Typography>
                         <Typography sx={{ marginTop: theme.spacing(1) }} variant="body1">{benefitPageData.description || t('app.noData')}</Typography>
                     </ContentBox>
+                    {
+                        benefitPageData.fundingConditions.title && (
+                            <BenefitPageInfoList listTitle={t('app.benefitPage.fundingConditions')} data={benefitPageData.fundingConditions} />
+                        )
+                    }     
                     <BenefitPageRules benefitId={id} validated_status={validated_status} />
                     {
                         benefitPageData.applicationProcess.title && (
@@ -93,7 +99,7 @@ const BenefitPageScreen = () => {
                         benefitPageData.requiredDocuments.length > 0 && (
                             <BenefitPageRequiredDocuments requiredDocuments={benefitPageData.requiredDocuments} />
                         )
-                    }
+                    }               
                     {
                         benefitPageData.additionalSupport.title && (
                             <BenefitPageLinksList listTitle={t('app.benefitPage.additionalSupport')} data={benefitPageData.additionalSupport} />

diff --git a/src/ui/screens/benefit-page/components/BenefitPageInfoList.js b/src/ui/screens/benefit-page/components/BenefitPageInfoList.js
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Typography } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Collapse from "@mui/material/Collapse";
+import { HBox, VBox } from "../../../shared-components/LayoutBoxes";
+import ContentBox from "../../../shared-components/ContentBox";
+import theme from '../../../../theme';
+import InfoIcon from '@mui/icons-material/Info';
+
+
+const BenefitPageInfoList = ({ listTitle, data }) => {
+    const [showAdditionalSupport, setShowAdditionalSupport] = useState(false);
+
+    return (
+        <ContentBox sx={{ width: "100%" }}>
+            <HBox sx={{ justifyContent: 'space-between', alignItems: "center", cursor: "pointer" }} onClick={() => setShowAdditionalSupport(!showAdditionalSupport)}>
+                <Typography variant="h6">{listTitle}</Typography>
+                <IconButton
+                    sx={{
+                        transition: "transform 0.3s",
+                        transform: showAdditionalSupport ? "rotate(180deg)" : "rotate(0deg)",
+                        marginLeft: "8px",
+                    }}
+                >
+                    <ExpandMoreIcon />
+                </IconButton>
+            </HBox>
+            {
+                showAdditionalSupport && (
+                    <Collapse in={showAdditionalSupport} sx={{ marginTop: theme.spacing(1) }}>
+                        <VBox gap={2}>
+                            <Typography variant="body1">{data.title}</Typography>
+                            {
+                                data.details.length > 0 && (
+                                    <VBox gap={1}>
+                                        {
+                                            data.details.map((item, index) => (
+                                                <HBox sx={{alignItems: 'center'}} >
+                                                    <InfoIcon sx={{fontSize: '20px'}} />
+                                                    <Typography sx={{ color: "inherit" }} variant="body1">{item}</Typography>
+                                                </HBox>
+                                            ))
+                                        }
+                                    </VBox>
+                                )
+                            }
+                        </VBox>
+                    </Collapse>
+                )
+            }
+        </ContentBox>
+    );
+}
+
+export default BenefitPageInfoList;
diff --git a/src/ui/screens/benefit-page/hooks/useFetchBenefitPageData.js b/src/ui/screens/benefit-page/hooks/useFetchBenefitPageData.js
@@ -11,11 +11,12 @@ const useFetchBenefitPageData = (id, hydrationData, language) => {
             const description = hydrationData[rpUri]?.description?.[language] || 'Unknown Description';
             const status = hydrationData[rpUri]?.status || 'Unknown Status';
             const applicationProcess = hydrationData[rpUri]?.application_process?.[language] || {};
+            const fundingConditions = hydrationData[rpUri]?.funding_conditions?.[language] || {};
             const requiredDocuments = hydrationData[rpUri]?.required_documents?.[language] || [];
             const additionalSupport = hydrationData[rpUri]?.additional_support?.[language] || {};
             const legalBasis = hydrationData[rpUri]?.legal_basis?.[language] || {};
             const furtherInformation = hydrationData[rpUri]?.further_information?.[language] || [];
-            const data = { title, leikaId, description, status, applicationProcess, requiredDocuments, additionalSupport, legalBasis, furtherInformation };
+            const data = { title, leikaId, description, status, applicationProcess, fundingConditions, requiredDocuments, additionalSupport, legalBasis, furtherInformation };
             setBenefitPageData(data);
         }
     }, [rpUri, hydrationData, language]);