add next section button

Citizen-Knowledge-Graph · Jun 7, 2024 · 99f2bda · 99f2bda
1 parent a4bd65d
commit 99f2bda
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 11 deletions.
diff --git a/public/assets/data/profile-sections/children.json b/public/assets/data/profile-sections/children.json
@@ -0,0 +1,20 @@
+{
+  "title": "Job",
+  "fields": [
+    {
+      "datafield": "ff:hasBirthday",
+      "title": "When is your birthday?",
+      "datatype": "date"
+    },
+    {
+      "datafield": "ff:hasBirthPlace",
+      "title": "Where were you born?",
+      "datatype": "string"
+    },
+    {
+      "datafield": "ff:hasResidence",
+      "title": "Where do you live?",
+      "datatype": "string"
+    }
+  ]
+}
diff --git a/public/assets/data/profile-sections/education.json b/public/assets/data/profile-sections/education.json
@@ -0,0 +1,20 @@
+{
+  "title": "Job",
+  "fields": [
+    {
+      "datafield": "ff:hasBirthday",
+      "title": "When is your birthday?",
+      "datatype": "date"
+    },
+    {
+      "datafield": "ff:hasBirthPlace",
+      "title": "Where were you born?",
+      "datatype": "string"
+    },
+    {
+      "datafield": "ff:hasResidence",
+      "title": "Where do you live?",
+      "datatype": "string"
+    }
+  ]
+}
diff --git a/public/assets/data/profile-sections/income.json b/public/assets/data/profile-sections/income.json
@@ -0,0 +1,20 @@
+{
+  "title": "Job",
+  "fields": [
+    {
+      "datafield": "ff:hasBirthday",
+      "title": "When is your birthday?",
+      "datatype": "date"
+    },
+    {
+      "datafield": "ff:hasBirthPlace",
+      "title": "Where were you born?",
+      "datatype": "string"
+    },
+    {
+      "datafield": "ff:hasResidence",
+      "title": "Where do you live?",
+      "datatype": "string"
+    }
+  ]
+}
diff --git a/src/screens/profile-section/components/ProfileSectionCompleted.js b/src/screens/profile-section/components/ProfileSectionCompleted.js
@@ -3,29 +3,80 @@ import ProfileCompletedPieChart from "./ProfileCompletedPieChart";
 import {useProfileInputSectionStore} from "../../../storage/zustand";
 import VStack from "../../../components/VStack";
 import HStack from "../../../components/HStack";
-import {Typography} from "@mui/material";
+import {Button, Card, CardContent, Typography} from "@mui/material";
+import {green, yellow} from "@mui/material/colors";
+import SentimentSatisfiedOutlinedIcon from "@mui/icons-material/SentimentSatisfiedOutlined";
 
-const ProfileSectionCompleted = () => {
-    const onboardingSectionsState = useProfileInputSectionStore(
+const ProfileSectionCompleted = ({id}) => {
+    const sectionStatus = useProfileInputSectionStore(
         (state) => state.sections
     );
-    console.log("onboardingSectionsState: ", onboardingSectionsState)
-    const completedSections = onboardingSectionsState.reduce((acc, section) => {
+    console.log("sectionStatus: ", sectionStatus)
+    const completedSections = sectionStatus.reduce((acc, section) => {
         return section.completed ? acc + 1 : acc;
     }, 0);
-    const totalSections = onboardingSectionsState.length;
-
+    const nextSection = sectionStatus.find((section) => section.id === id).next;
+    console.log("nextSection: ", nextSection)
     return (
         <VStack justifyContent={'center'}>
-            <ProfileCompletedPieChart completedSections={completedSections} totalSections={totalSections}/>
+            <ProfileCompletedPieChart completedSections={completedSections} totalSections={sectionStatus.length}/>
             <HStack justifyContent={'center'} sx={{width: "100%"}}>
                 <VStack gap={1} alignItems={'center'}>
-                <Typography variant="h4">About you</Typography>
-                <Typography variant="h6">Profilbereich vollständig!</Typography>
-                    </VStack>
+                    <Typography variant="h4">About you</Typography>
+                    <Typography variant="h6">Profilbereich vollständig!</Typography>
+                </VStack>
             </HStack>
+            <VStack data-testid="button-card-container">
+                <Card sx={styles.buttonCard} data-testid="button-card">
+                    <CardContent sx={styles.buttonCardContent} data-testid="card-content">
+                        <HStack justifyContent={'space-between'}>
+                            <HStack justifyContent={'flex-start'} alignItems={'center'}>
+                                <SentimentSatisfiedOutlinedIcon sx={styles.icon}/>
+                                <Typography variant="h6">{nextSection}</Typography>
+                            </HStack>
+                            <Button variant="body1" sx={styles.buttonNext}>
+                                Weiter
+                            </Button>
+                        </HStack>
+                    </CardContent>
+                </Card>
+            </VStack>
         </VStack>
     );
 };
 
+const styles = {
+    buttonCard: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: yellow[600],
+        borderRadius: '15px',
+        boxShadow: 'none',
+    },
+    buttonCardContent: {
+        padding: '16px',
+        "&:last-child": {
+            paddingBottom: '16px',
+        }
+    },
+    buttonCardText: {
+        color: 'white',
+        fontWeight: '500',
+        textAlign: 'center',
+        margin: '0',
+    },
+    icon: {
+        width: '30px',
+        height: '30px',
+    },
+    buttonNext: {
+        backgroundColor: green[500],
+        fontWeight: 'bold',
+        margin: '0px',
+        '&:focus': {
+            backgroundColor: green[500],
+        },
+    },
+};
+
 export default ProfileSectionCompleted;