Skip to content

Commit 946374b

Browse files
wbglaeserwbglaeser
committed
introduce markdown and fill out schwerbehindertenausweis
1 parent 53f5732 commit 946374b

7 files changed

Lines changed: 281 additions & 60 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"mermaid": "^11.6.0",
2525
"react": "^18.3.1",
2626
"react-dom": "^18.3.1",
27-
"react-markdown": "^9.0.1",
27+
"react-markdown": "^9.1.0",
2828
"react-router-dom": "^6.23.1",
2929
"react-scripts": "5.0.1",
3030
"reactflow": "^11.11.4",

‎public/assets/data/requirement-profiles/requirement-profiles-hydration.json‎

Lines changed: 90 additions & 34 deletions
Large diffs are not rendered by default.

‎src/ui/language/translations.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,17 @@ const translations = {
255255
LeiKaInfo: "LeiKa is a unique identifier for benefits in Germany. It helps you to find the right benefit for you.",
256256
inTopics: "Appears in the following topics",
257257
eligibilityBtn: "Check eligibility",
258+
description: "Description",
259+
goals: "Goals",
260+
benefitScope: "Benefit scope",
261+
examplesMD: "Examples",
262+
contactMD: "Where can I apply?",
263+
howMD: "How do I apply?",
264+
documentsMD: "Which documents do I need?",
265+
processMD: "Application process",
266+
deadlinesMD: "Deadlines",
267+
additionalSupportMD: "Where can I get additional support?",
268+
legalBasisMD: "Legal basis",
258269
whatIsIt: "What is ",
259270
applicationProcess: "How do I apply?",
260271
examples: "Examples",
@@ -573,6 +584,17 @@ const translations = {
573584
LeiKaInfo: "LeiKa ist ein eindeutiger Identifikator für Leistungen in Deutschland. Er hilft dir, die richtige Leistung für dich zu finden.",
574585
inTopics: "Erscheint in den folgenden Themen",
575586
eligibilityBtn: "Anspruch prüfen",
587+
description: "Beschreibung",
588+
goals: "Ziele",
589+
benefitScope: "Leistungsumfang",
590+
examplesMD: "Beispiele",
591+
contactMD: "Wo kann ich den Antrag stellen?",
592+
howMD: "Wie stelle ich den Antrag?",
593+
documentsMD: "Welche Dokumente benötige ich?",
594+
processMD: "Wie läuft das Verfahren ab?",
595+
additionalSupportMD: "Wo kann ich zusätzliche Unterstützung erhalten?",
596+
deadlinesMD: "Fristen",
597+
legalBasisMD: "Rechtsgrundlage",
576598
whatIsIt: "Was ist ",
577599
applicationProcess: "Wie stelle ich den Antrag?",
578600
examples: "Beispiele",

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

Lines changed: 74 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import Layout from "@/ui/shared-components/Layout";
33
import { Box, Typography } from "@mui/material";
4-
import theme from '@/theme';
54
import { VBox } from '@/ui/shared-components/LayoutBoxes';
65
import BenefitPageInfoList from './components/BenefitPageInfoList';
76
import BenefitPageRequiredDocuments from './components/BenefitPageRequiredDocuments';
@@ -12,6 +11,10 @@ import AppScreenWrapperContainer from '@/ui/shared-components/app-screen-wrapper
1211
import RecursiveRulesTable from './components/RecursiveRulesTable';
1312
import featureFlags from "@/featureFlags";
1413
import MermaidRulesGraph from "@/ui/screens/benefit-page/components/MermaidRulesGraph";
14+
import BenefitPageMarkdown from './components/BenefitPageMarkDown';
15+
import DescriptionIcon from '@mui/icons-material/Description';
16+
import theme from '@/theme';
17+
1518

1619
const BenefitPageScreen = ({
1720
t,
@@ -32,18 +35,76 @@ const BenefitPageScreen = ({
3235
flexDirection: "column",
3336
width: '100%'
3437
}}>
35-
<VBox
36-
sx={{
37-
backgroundColor: 'white.main',
38-
padding: '32px',
39-
borderRadius: theme.shape.borderRadius,
40-
}}
41-
>
42-
<VBox sx={{ gap: 2, maxWidth: '800px' }}>
43-
<Typography variant="h2" sx={{ fontWeight: '400' }}>{t('app.benefitPage.whatIsIt')}{benefitPageData?.title}</Typography>
44-
<Typography sx={{ marginTop: 1, whiteSpace: 'pre-line' }} variant="body1">{benefitPageData?.description || t('app.noData')}</Typography>
45-
</VBox>
46-
</VBox>
38+
{
39+
benefitPageData?.descriptionMD ? (
40+
<BenefitPageMarkdown title={t('app.benefitPage.description')} content={benefitPageData?.descriptionMD} />
41+
) : (
42+
benefitPageData?.teaser && (
43+
<VBox
44+
sx={{
45+
backgroundColor: 'white.main',
46+
padding: '32px',
47+
borderRadius: theme.shape.borderRadius,
48+
}}
49+
>
50+
<VBox sx={{ gap: 2, maxWidth: '800px' }}>
51+
<Typography variant="h2" sx={{ fontWeight: '400' }}>{t('app.benefitPage.whatIsIt')}{benefitPageData?.title}</Typography>
52+
<Typography sx={{ marginTop: 1, whiteSpace: 'pre-line' }} variant="body1">{benefitPageData?.teaser || t('app.noData')}</Typography>
53+
</VBox>
54+
</VBox>
55+
)
56+
)
57+
}
58+
{
59+
benefitPageData?.goals && (
60+
<BenefitPageMarkdown title={t('app.benefitPage.goals')} content={benefitPageData?.goals} />
61+
)
62+
}
63+
{
64+
benefitPageData?.benefitScope && (
65+
<BenefitPageMarkdown title={t('app.benefitPage.benefitScope')} content={benefitPageData?.benefitScope} />
66+
)
67+
}
68+
{
69+
benefitPageData?.examplesMD && (
70+
<BenefitPageMarkdown title={t('app.benefitPage.examplesMD')} content={benefitPageData?.examplesMD} />
71+
)
72+
}
73+
{
74+
benefitPageData?.howMD && (
75+
<BenefitPageMarkdown title={t('app.benefitPage.howMD')} content={benefitPageData?.howMD} />
76+
)
77+
}
78+
{
79+
benefitPageData?.contactMD && (
80+
<BenefitPageMarkdown title={t('app.benefitPage.contactMD')} content={benefitPageData?.contactMD} />
81+
)
82+
}
83+
{
84+
benefitPageData?.documentsMD && (
85+
<BenefitPageMarkdown title={t('app.benefitPage.documentsMD')} content={benefitPageData?.documentsMD} icon={<DescriptionIcon />} />
86+
)
87+
}
88+
{
89+
benefitPageData?.processMD && (
90+
<BenefitPageMarkdown title={t('app.benefitPage.processMD')} content={benefitPageData?.processMD} />
91+
)
92+
}
93+
{
94+
benefitPageData?.deadlinesMD && (
95+
<BenefitPageMarkdown title={t('app.benefitPage.deadlinesMD')} content={benefitPageData?.deadlinesMD} />
96+
)
97+
}
98+
{
99+
benefitPageData?.additionalSupportMD && (
100+
<BenefitPageMarkdown title={t('app.benefitPage.additionalSupportMD')} content={benefitPageData?.additionalSupportMD} />
101+
)
102+
}
103+
{
104+
benefitPageData?.legalBasisMD && (
105+
<BenefitPageMarkdown title={t('app.benefitPage.legalBasisMD')} content={benefitPageData?.legalBasisMD} />
106+
)
107+
}
47108
{
48109
benefitPageData?.examples.title && (
49110
<BenefitPageExampleList listTitle={t('app.benefitPage.examples')} data={benefitPageData?.examples} />

‎src/ui/screens/benefit-page/components/BenefitPageMarkDown.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from "react";
2+
import ReactMarkdown from "react-markdown";
3+
import { Typography, Box } from "@mui/material";
4+
import theme from '@/theme';
5+
import { VBox } from '@/ui/shared-components/LayoutBoxes';
6+
7+
const BenefitPageMarkdown = ({ title, content, icon = null }) => {
8+
return (
9+
<VBox
10+
sx={{
11+
backgroundColor: 'white.main',
12+
padding: '32px',
13+
borderRadius: theme.shape.borderRadius,
14+
}}
15+
>
16+
<VBox sx={{ gap: 2, maxWidth: '800px' }}>
17+
<Typography variant="h2" sx={{ fontWeight: '400' }}>{title}</Typography>
18+
<ReactMarkdown
19+
components={{
20+
h1: ({ node, ...props }) => (<Typography variant="h1" gutterBottom {...props} />),
21+
h2: ({ node, ...props }) => (<Typography variant="h2" gutterBottom {...props} />),
22+
h3: ({ node, ...props }) => (<Typography variant="h3" gutterBottom {...props} />),
23+
h4: ({ node, ...props }) => (<Typography variant="h4" gutterBottom {...props} />),
24+
h5: ({ node, ...props }) => (<Typography variant="h5" gutterBottom {...props} />),
25+
h6: ({ node, ...props }) => (<Typography variant="h6" gutterBottom {...props} />),
26+
p: ({ node, ...props }) => (<Typography variant="body1" component="p" {...props} />),
27+
ul: ({ node, ...props }) => (
28+
<Box
29+
component="ul"
30+
sx={{
31+
mt: 0.5,
32+
mb: 1.25,
33+
pl: icon ? 0 : 2.25,
34+
listStyle: icon ? "none" : "disc",
35+
}}
36+
{...props}
37+
/>
38+
),
39+
li: ({ node, children, ...props }) =>
40+
icon ? (
41+
<Box
42+
component="li"
43+
sx={{ display: "flex", alignItems: "flex-start", mb: 1.5, listStyle: "none" }}
44+
>
45+
<Box sx={{ mr: 1, mt: "2px" }}>{icon}</Box>
46+
<Typography variant="body1" component="span">
47+
{children}
48+
</Typography>
49+
</Box>
50+
) : (
51+
<Box
52+
component="li"
53+
sx={{ display: "flex", alignItems: "flex-start", mb: 1.5}}
54+
>
55+
<li {...props}>
56+
<Typography variant="body1" component="span">
57+
{children}
58+
</Typography>
59+
</li>
60+
</Box>
61+
),
62+
span: ({ node, ...props }) => (<Typography variant="body2" component="span" {...props} />),
63+
}}
64+
>
65+
{content}
66+
</ReactMarkdown> </VBox>
67+
</VBox>
68+
);
69+
};
70+
71+
export default BenefitPageMarkdown;

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,28 @@ const useFetchStaticBenefitPageData = (id, language) => {
1818

1919
const resource = hydrationData[id] || {};
2020
return {
21-
title: getField(resource, `title.${language}`, 'Unknown Title'),
22-
leikaId: getField(resource, 'leika_id', 'Unknown Id'),
23-
description: getField(resource, `description.${language}`, 'Unknown Description'),
24-
status: getField(resource, 'status', 'Unknown Status'),
25-
applicationProcess: getField(resource, `application_process.${language}`, {}),
26-
examples: getField(resource, `examples.${language}`, {}),
27-
fundingConditions: getField(resource, `funding_conditions.${language}`, {}),
28-
requiredDocuments: getField(resource, `required_documents.${language}`, []),
29-
additionalSupport: getField(resource, `additional_support.${language}`, {}),
30-
legalBasis: getField(resource, `legal_basis.${language}`, {}),
31-
furtherInformation: getField(resource, `further_information.${language}`, []),
21+
title: getField(resource, `title.${language}`, 'Unknown Title'),
22+
leikaId: getField(resource, 'leika_id', 'Unknown Id'),
23+
teaser: getField(resource, `teaser.${language}`, null),
24+
descriptionMD: getField(resource, `descriptionMD.${language}`,null),
25+
goals: getField(resource, `goals.${language}`, null),
26+
benefitScope: getField(resource, `benefit_scope.${language}`, null),
27+
examplesMD: getField(resource, `examplesMD.${language}`, null),
28+
contactMD: getField(resource, `contactMD.${language}`, null),
29+
howMD: getField(resource, `howMD.${language}`, null),
30+
documentsMD: getField(resource, `documentsMD.${language}`, null),
31+
processMD: getField(resource, `processMD.${language}`, null),
32+
deadlinesMD: getField(resource, `deadlinesMD.${language}`, null),
33+
additionalSupportMD: getField(resource, `additionalSupportMD.${language}`, null),
34+
legalBasisMD: getField(resource, `legalBasisMD.${language}`, null),
35+
status: getField(resource, 'status', 'Unknown Status'),
36+
applicationProcess: getField(resource, `application_process.${language}`, {}),
37+
examples: getField(resource, `examples.${language}`, {}),
38+
fundingConditions: getField(resource, `funding_conditions.${language}`, {}),
39+
requiredDocuments: getField(resource, `required_documents.${language}`, []),
40+
additionalSupport: getField(resource, `additional_support.${language}`, {}),
41+
legalBasis: getField(resource, `legal_basis.${language}`, {}),
42+
furtherInformation: getField(resource, `further_information.${language}`, []),
3243
};
3344
}, [hydrationData, id, language]);
3445

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const useEligibilityData = (validationReport, metadata, hydrationData, language)
2929
const id = rpHydration?.id || 'Unknown Id';
3030
const title = rpHydration?.title?.[language] || 'Unknown Title';
3131
const category = rpHydration?.category || 'Unknown Category';
32-
const description = rpHydration?.description?.[language] || 'Unknown Description';
32+
const description = rpHydration?.teaser?.[language] || 'Unknown Description';
3333
const status = rpHydration?.status || 'Unknown Status';
3434
const requiredDocuments = rpHydration?.required_documents?.[language] || [];
3535
const additionalSupport = rpHydration?.additional_support?.[language] || {};

0 commit comments

Comments
 (0)