Skip to content

Commit 0cc2683

Browse files
wbglaeserwbglaeser
committed
try new catalog view
1 parent eef9e58 commit 0cc2683

7 files changed

Lines changed: 137 additions & 97 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"en": "Cost-of-living assistance"
99
},
1010
"description": {
11-
"de": "Die „Hilfe zum Lebensunterhalt“ richtet sich an Menschen, die eine Zeit lang nicht oder nur wenig arbeiten können. Sie dient dazu grundlegende Bedürfnisse wie Essen, Kleidung und Miete zu bezahlen. Hilfe zum Lebensunterhalt erhalten Personen, für die andere staatliche Leistungen, wie etwa Rente oder Bürgergeld (früher ALG II), nicht infrage kommen.",
12-
"en": "If you are currently unable to work due to health reasons, you may be entitled to cost of living assistance. The prerequisite is that you are temporarily unable to earn your living yourself or with the help of other people, for example a partner or your family."
11+
"de": "Die „Hilfe zum Lebensunterhalt“ unterstützt Menschen, die vorübergehend nicht oder nur wenig arbeiten können und keinen Anspruch auf andere Sozialleistungen haben, bei der Deckung von Grundbedürfnissen wie Essen, Kleidung und Miete.",
12+
"en": "The 'Hilfe zum Lebensunterhalt' (cost-of-living assistance) supports people who are temporarily unable to work or can only work a little and do not have access to other social benefits. It helps cover basic needs such as food, clothing, and rent."
1313
}
1414
},
1515
"ff:kindergeld": {

‎src/core/utils/buildEligibilityReports.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export const buildEligibilityReports = (validationReport, metadata, hydrationDat
77
};
88
}
99

10+
console.log("Validation Report:", validationReport);
11+
console.log("Metadata:", metadata);
12+
1013
const reports = validationReport['ff:hasEvaluatedRequirementProfile'] || [];
1114
const allReports = reports.map(report => {
1215
const rpUri = report['ff:hasRpUri']?.['@id'] || null;

‎src/ui/screens/eligibilty-overview/components/EligibilityOverviewHeader.js‎

Lines changed: 12 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,24 @@
1-
import React, { useState } from 'react';
2-
import { Link } from "react-router-dom";
3-
import { IconButton, Typography, Collapse, Button } from '@mui/material';
4-
import PersonIcon from '@mui/icons-material/Person';
5-
import { VBox, HBox } from "../../../shared-components/LayoutBoxes";
6-
import useTranslation from "../../../language/useTranslation";
7-
import EligibilityOverviewLegend from './EligibilityOverviewLegend';
8-
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
1+
import React from 'react';
2+
import { Typography } from '@mui/material';
3+
import { VBox } from "@/ui/shared-components/LayoutBoxes";
4+
import useTranslation from "@/ui/language/useTranslation";
5+
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
96

10-
const EligibilityOverviewHeader = ({ iconPaths }) => {
7+
const EligibilityOverviewHeader = () => {
118
const { t } = useTranslation();
12-
const [showLegend, setShowLegend] = useState(false);
139

1410
return (
1511
<VBox sx={{ width: "100%", alignItems: "flex-start", gap: { xs: 4, md: 8 } }}>
1612
<VBox>
1713
<Typography variant="h1">
1814
{t('app.browseAll.header')}
1915
</Typography>
20-
<HBox sx={{ alignItems: 'center' }}>
21-
<Button sx={{
22-
gap: 1,
23-
padding: '1',
24-
backgroundColor: 'transparent',
25-
color: 'black.ligth',
26-
'&:hover': {
27-
backgroundColor: 'transparent',
28-
color: 'blue.main',
29-
}
30-
}} component={Link} to='/profile-overview' variant="text">
31-
<PersonIcon data-testid="chevron-left-icon" sx={{ fontSize: '18px' }} />
32-
<Typography variant="body1" sx={{ color: 'inherit' }}>
33-
{t('app.browseAll.profileBtn')}
34-
</Typography>
35-
</Button>
36-
</HBox>
16+
<RegularButton
17+
variant={'blueHollow'}
18+
text={'app.browseAll.profileBtn'}
19+
link={'/profile-overview'}
20+
size='small'
21+
/>
3722
</VBox>
3823
<VBox sx={{ maxWidth: '800px' }}>
3924
<Typography variant='h2'>
@@ -43,38 +28,6 @@ const EligibilityOverviewHeader = ({ iconPaths }) => {
4328
{t('app.browseAll.disclaimerText')}
4429
</Typography>
4530
</VBox>
46-
<VBox sx={{ maxWidth: '800px' }}>
47-
<Typography variant='h2'>
48-
{t('app.browseAll.preliminaryEligibleTitle')}
49-
</Typography>
50-
<Typography variant='body1'>
51-
{t('app.browseAll.preliminaryEligibleText')}
52-
</Typography>
53-
</VBox>
54-
<VBox>
55-
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
56-
{t('app.browseAll.legendTitle')}
57-
</Typography>
58-
<HBox sx={{ alignItems: 'center', cursor: 'pointer', maxWidth: '800px' }} onClick={() => setShowLegend(!showLegend)}>
59-
<Typography variant="body1">
60-
{t('app.browseAll.legendText')}
61-
</Typography>
62-
<IconButton
63-
sx={{
64-
transition: 'transform 0.3s',
65-
transform: showLegend ? 'rotate(180deg)' : 'rotate(0deg)'
66-
}}
67-
>
68-
<ExpandMoreIcon />
69-
</IconButton>
70-
</HBox>
71-
{
72-
showLegend &&
73-
<Collapse in={showLegend}>
74-
<EligibilityOverviewLegend iconPaths={iconPaths} />
75-
</Collapse>
76-
}
77-
</VBox>
7831
</VBox>
7932
);
8033
};

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

Lines changed: 112 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,129 @@
1-
import React, { useState } from 'react';
2-
import { Add, Remove } from "@mui/icons-material";
3-
import { IconButton, Typography, Box } from '@mui/material';
1+
import React from 'react';
2+
import { Typography } from '@mui/material';
43
import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
5-
import EligibilityOverviewItemDetails from "./EligibilityOverviewItemDetails";
4+
import theme from '@/theme';
5+
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
6+
import { useSelectedBenefitStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
67

7-
const EligibilityOverviewItem = ({ item, eligible, iconPath }) => {
8-
const [showDescription, setShowDescription] = useState(false);
9-
10-
const toggleDescription = () => {
11-
setShowDescription(prevState => !prevState);
12-
};
13-
14-
const marginBottom = showDescription ? '16px' : '0';
8+
const EligibilityOverviewItem = ({ item, eligible }) => {
159
const color = eligible === 'indeterminate' ? 'black.light' : 'black.main';
10+
const setSelectedBenefit = useSelectedBenefitStore((state) => state.setSelectedBenefit);
11+
const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
1612

1713
return (
18-
<VBox sx={{ marginBottom: marginBottom }}>
19-
<HBox sx={{ alignItems: "center", width: '100%' }}>
20-
<img src={iconPath} alt="logo" style={{ width: "14px" }} />
21-
<HBox sx={{ width: '100%' }}>
22-
<HBox sx={{ alignItems: 'center', gap:1, flexWrap: 'wrap' }}>
23-
<Typography variant='h2' sx={{ color: color, fontWeight: '400', wordBreak: 'break-word' }} onClick={toggleDescription}>
14+
<VBox
15+
sx={{
16+
display: 'flex',
17+
flexDirection: 'column',
18+
gap: 4,
19+
border: `1px solid ${theme.palette.white.dark}`,
20+
boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
21+
padding: 2,
22+
borderRadius: theme.shape.borderRadius,
23+
}}
24+
>
25+
<HBox
26+
sx={{
27+
display: 'flex',
28+
flex: '1 1 auto',
29+
width: '100%',
30+
justifyContent: 'flex-start',
31+
}}
32+
>
33+
<HBox
34+
sx={{
35+
flex: '1 1 0%',
36+
alignItems: 'flex-start',
37+
gap: 1
38+
}}
39+
>
40+
<VBox sx={{ gap: 2 }}>
41+
<Typography variant='h2' sx={{ color: color, fontWeight: '400', wordBreak: 'break-word' }}>
2442
{item.title}
2543
</Typography>
2644
{item.status === "beta" && (
2745
<Typography variant='body1' sx={{ color: 'blue.main' }}>
2846
Beta
2947
</Typography>
3048
)}
31-
</HBox>
49+
<Typography variant="body1">
50+
{item.description}
51+
</Typography>
52+
<HBox sx={{ gap: 1, flexWrap: 'wrap' }}>
53+
<HBox sx={{ backgroundColor: 'green.main', padding: '6px 10px', borderRadius: theme.shape.borderRadius }}>
54+
<Typography variant="body1">
55+
Sie haben womöglich Anspruch!
56+
</Typography>
57+
</HBox>
58+
</HBox>
59+
</VBox>
60+
</HBox>
61+
<HBox
62+
sx={{
63+
display: 'flex',
64+
flex: '1 1 0%',
65+
justifyContent: 'flex-end',
66+
}}
67+
>
68+
<VBox
69+
sx={{
70+
gap: 8,
71+
justifyContent: 'space-between',
72+
alignItems: 'flex-end',
73+
}}
74+
>
75+
<HBox sx={{ justifyContent: 'flex-end', flexWrap: 'wrap', gap: 1 }}>
76+
<HBox sx={{
77+
border: `1px solid ${theme.palette.green.main}`,
78+
padding: '6px 10px',
79+
borderRadius: theme.shape.borderRadius,
80+
}}>
81+
<Typography variant='body2' sx={{}}>
82+
Bundesleistung
83+
</Typography>
84+
</HBox>
85+
<HBox sx={{
86+
border: `1px solid ${theme.palette.pink.main}`,
87+
padding: '6px 10px',
88+
borderRadius: theme.shape.borderRadius,
89+
}}>
90+
<Typography variant='body2' sx={{}}>
91+
Agentur für Arbeit
92+
</Typography>
93+
</HBox>
94+
<HBox sx={{
95+
border: `1px solid ${theme.palette.blue.main}`,
96+
padding: '6px 10px',
97+
borderRadius: theme.shape.borderRadius,
98+
}}>
99+
<Typography variant='body2' sx={{}}>
100+
Rehaibilitierung und Teilhabe
101+
</Typography>
102+
</HBox>
103+
</HBox>
104+
<HBox sx={{ gap: 2, flexWrap: 'wrap' }}>
105+
<RegularButton
106+
variant={'blueHollow'}
107+
text={'app.browseAll.learnMoreBtn'}
108+
link={`/benefit-page/${item.id}`}
109+
size='small'
110+
/>
111+
{eligible === 'indeterminate' &&
112+
<RegularButton
113+
variant={'pinkContained'}
114+
onClick={() => {
115+
clearSelectedTopics()
116+
setSelectedBenefit(item.id);
117+
}}
118+
text={'app.browseAll.checkElBtn'}
119+
link={`/onboarding-welcome/${item.id}`}
120+
size='small'
121+
/>
122+
}
123+
</HBox>
124+
</VBox>
32125
</HBox>
33-
<Box>
34-
<IconButton onClick={toggleDescription} size="small" >
35-
{showDescription ? <Remove sx={{ color: color }} /> : <Add sx={{ color: color }} />}
36-
</IconButton>
37-
</Box>
38126
</HBox>
39-
{showDescription && (
40-
<EligibilityOverviewItemDetails item={item} eligible={eligible} />
41-
)}
42127
</VBox>
43128
);
44129
};

‎src/ui/screens/eligibilty-overview/components/EligibilityOverviewItemDetails.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React from 'react';
22
import { Typography } from '@mui/material';
3-
import { HBox, VBox } from '../../../shared-components/LayoutBoxes';
3+
import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
44
import { useSelectedBenefitStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
5-
import theme from '@/theme';
65
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
76

87
const EligibilityOverviewItemDetails = ({ item, eligible }) => {
98
const setSelectedBenefit = useSelectedBenefitStore((state) => state.setSelectedBenefit);
109
const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
1110

1211
return (
13-
<VBox sx={{ gap: theme.spacing(2) }}>
14-
<HBox sx={{ maxWidth: '800px' }}>
12+
<VBox sx={{ gap: 4 }}>
13+
<HBox sx={{ width: '50%' }}>
1514
<Typography variant="body1">
1615
{item.description}
1716
</Typography>

‎src/ui/screens/eligibilty-overview/components/EligibilityOverviewLegend.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { Typography } from '@mui/material';
3-
import { HBox, VBox } from '../../../shared-components/LayoutBoxes';
4-
import useTranslation from "../../../language/useTranslation";
5-
import theme from '../../../../theme';
3+
import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
4+
import useTranslation from "@/ui/language/useTranslation";
5+
import theme from '@/ui/theme';
66

77
const EligibilityOverviewLegend = ({iconPaths}) => {
88
const { t } = useTranslation();

‎src/ui/shared-components/buttons/RegularButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import buttonStyles from "./ButtonStyles";
66

77
const sizeStyles = {
88
small: {
9-
padding: "9px 16px",
9+
padding: "8px 12px",
1010
fontSize: "14px",
11-
borderRadius: "10px",
11+
borderRadius: 4,
1212
},
1313
medium: {
1414
padding: "12px 20px",

0 commit comments

Comments
 (0)