From d666b9f397943ebc61775a6ce68e664062b38d86 Mon Sep 17 00:00:00 2001 From: "ben.glaeser" Date: Sun, 16 Feb 2025 13:38:22 +0100 Subject: [PATCH] add additional support with links --- .../requirement-profiles-hydration.json | 16 ++++- src/ui/language/translations.js | 2 + .../screens/benefit-page/BenefitPageScreen.js | 9 ++- .../BenefitPageRequiredDocuments.js | 3 +- .../components/BenefitPageRules.js | 3 +- .../components/BenefitPageSupport.js | 61 +++++++++++++++++++ 6 files changed, 88 insertions(+), 6 deletions(-) create mode 100644 src/ui/screens/benefit-page/components/BenefitPageSupport.js diff --git a/public/assets/data/requirement-profiles/requirement-profiles-hydration.json b/public/assets/data/requirement-profiles/requirement-profiles-hydration.json index a7dd3e9..22d3f5a 100644 --- a/public/assets/data/requirement-profiles/requirement-profiles-hydration.json +++ b/public/assets/data/requirement-profiles/requirement-profiles-hydration.json @@ -111,12 +111,22 @@ }, "additional_support": { "de": { - "title": "Für mehr Informationen und Fragen zur Antragsstellung, Anspruch, etc. wenden Sie sich an Ihre lokale Wohngeldbehörde. Einen ersten Eindruck über die Mögliche Wohngeldhöhe bietet der offizielle Wohngeld-Rechner des Bundesministerium für Wohnen, Stadtentwicklung und Bauwesen", - "url": "https://www.bmwsb.bund.de/Webs/BMWSB/DE/themen/stadt-wohnen/wohnraumfoerderung/wohngeld/wohngeldrechner-2023-artikel.html" + "title": "Für mehr Informationen und Fragen zur Antragsstellung, Anspruch, etc. wenden Sie sich an Ihre lokale Wohngeldbehörde. Einen ersten Eindruck über die Mögliche Wohngeldhöhe bietet der offizielle Wohngeld-Rechner des Bundesministerium für Wohnen, Stadtentwicklung und Bauwesen.", + "links": [ + { + "title": "Wohngeldrechner 2023", + "url": "https://www.bmwsb.bund.de/Webs/BMWSB/DE/themen/stadt-wohnen/wohnraumfoerderung/wohngeld/wohngeldrechner-2023-artikel.html" + } + ] }, "en": { "title": "For more information and questions about the application process, entitlement, etc., please contact your local housing benefit authority. The official housing benefit calculator of the Federal Ministry of Housing, Urban Development and Construction provides a first impression of the possible housing benefit amount.", - "url": "https://www.bmwsb.bund.de/Webs/BMWSB/DE/themen/stadt-wohnen/wohnraumfoerderung/wohngeld/wohngeldrechner-2023-artikel.html" + "links": [ + { + "title": "Housing benefit calculator 2023", + "url": "https://www.bmwsb.bund.de/Webs/BMWSB/DE/themen/stadt-wohnen/wohnraumfoerderung/wohngeld/wohngeldrechner-2023-artikel.html" + } + ] } }, "legal_basis": { diff --git a/src/ui/language/translations.js b/src/ui/language/translations.js index 54d7da3..efbd50c 100644 --- a/src/ui/language/translations.js +++ b/src/ui/language/translations.js @@ -165,6 +165,7 @@ const translations = { eligibilityBtn: "Check eligibility", whatIsIt: "What is ", requiredDocuments: "Which documents do I need?", + additionalSupport: "Where can I get additional support?", rulesTable: { header: "Who is eligible?", yourAnswer: "Your answer", @@ -378,6 +379,7 @@ const translations = { eligibilityBtn: "Anspruch prüfen", whatIsIt: "Was ist ", requiredDocuments: "Welche Dokumente benötige ich?", + additionalSupport: "Wo kann ich zusätzliche Unterstützung erhalten?", rulesTable: { header: "Wer ist anspruchsberechtigt?", yourAnswer: "Deine Antwort", diff --git a/src/ui/screens/benefit-page/BenefitPageScreen.js b/src/ui/screens/benefit-page/BenefitPageScreen.js index f4b60b8..07b5ce4 100644 --- a/src/ui/screens/benefit-page/BenefitPageScreen.js +++ b/src/ui/screens/benefit-page/BenefitPageScreen.js @@ -17,6 +17,8 @@ import useFetchBenefitPageData from './hooks/useFetchBenefitPageData'; import { useMetadataStore } from '../../storage/zustand'; import BenefitPageRequiredDocuments from './components/BenefitPageRequiredDocuments'; import ContentBox from '../../shared-components/ContentBox'; +import BenefitPageSupport from './components/BenefitPageSupport'; +import theme from '../../../theme'; const BenefitPageScreen = () => { const {id} = useParams(); @@ -79,7 +81,7 @@ const BenefitPageScreen = () => { {t('app.benefitPage.whatIsIt')}{benefitPageData.title} - {benefitPageData.description || t('app.noData')} + {benefitPageData.description || t('app.noData')} { @@ -87,6 +89,11 @@ const BenefitPageScreen = () => { ) } + { + benefitPageData.additionalSupport.title && ( + + ) + } diff --git a/src/ui/screens/benefit-page/components/BenefitPageRequiredDocuments.js b/src/ui/screens/benefit-page/components/BenefitPageRequiredDocuments.js index f77e49b..2aa77d9 100644 --- a/src/ui/screens/benefit-page/components/BenefitPageRequiredDocuments.js +++ b/src/ui/screens/benefit-page/components/BenefitPageRequiredDocuments.js @@ -7,6 +7,7 @@ import { HBox, VBox } from "../../../shared-components/LayoutBoxes"; import useTranslation from "../../../language/useTranslation"; import ContentPasteIcon from '@mui/icons-material/ContentPaste'; import ContentBox from "../../../shared-components/ContentBox"; +import theme from '../../../../theme'; const BenefitPageRequiredDocuments = ({ requiredDocuments }) => { const { t } = useTranslation(); @@ -28,7 +29,7 @@ const BenefitPageRequiredDocuments = ({ requiredDocuments }) => { { showRequiredDocuments && ( - + {requiredDocuments.map((doc, index) => ( diff --git a/src/ui/screens/benefit-page/components/BenefitPageRules.js b/src/ui/screens/benefit-page/components/BenefitPageRules.js index d000de1..c2552db 100644 --- a/src/ui/screens/benefit-page/components/BenefitPageRules.js +++ b/src/ui/screens/benefit-page/components/BenefitPageRules.js @@ -10,6 +10,7 @@ import useFetchData from "../../../shared-hooks/useFetchData"; import useBenefitPageRules from "../hooks/useBenefitPageRules"; import { VBox, HBox } from "../../../shared-components/LayoutBoxes"; import ContentBox from "../../../shared-components/ContentBox"; +import theme from "../../../../theme"; const BenefitPageRules = ({ benefitId, validated_status }) => { const { t } = useTranslation(); @@ -42,7 +43,7 @@ const BenefitPageRules = ({ benefitId, validated_status }) => { { showRules && ( - + {rules && rules.map((rule, index) => ( diff --git a/src/ui/screens/benefit-page/components/BenefitPageSupport.js b/src/ui/screens/benefit-page/components/BenefitPageSupport.js new file mode 100644 index 0000000..a9375f7 --- /dev/null +++ b/src/ui/screens/benefit-page/components/BenefitPageSupport.js @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import { Button, 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 useTranslation from "../../../language/useTranslation"; +import ContentBox from "../../../shared-components/ContentBox"; +import theme from '../../../../theme'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; + +const BenefitPageSupport = ({ additionalSupport }) => { + const { t } = useTranslation(); + const [showAdditionalSupport, setShowAdditionalSupport] = useState(false); + + return ( + + setShowAdditionalSupport(!showAdditionalSupport)}> + {t('app.benefitPage.additionalSupport')} + + + + + { + showAdditionalSupport && ( + + + {additionalSupport.title} + { + additionalSupport.links && ( + + { + additionalSupport.links.map((link, index) => ( + + + + )) + } + + ) + } + + + ) + } + + ); +} + +export default BenefitPageSupport; \ No newline at end of file