move check eligibility check button into benefit header

Citizen-Knowledge-Graph · Dec 13, 2024 · 9fc6d78 · 9fc6d78
1 parent 944ab2c
commit 9fc6d78
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 22 deletions.
diff --git a/src/theme.js b/src/theme.js
@@ -70,7 +70,7 @@ const theme = createTheme({
             styleOverrides: {
                 root: {
                     textTransform: 'none',
-                    borderRadius: 2,
+                    borderRadius: "4px",
                 },
                 contained: {
                     backgroundColor: 'primary.main',

diff --git a/src/ui/screens/benefit-page/BenefitPageScreen.js b/src/ui/screens/benefit-page/BenefitPageScreen.js
@@ -1,16 +1,15 @@
 import React, {useContext} from 'react';
 import Layout from "../../shared-components/Layout";
-import {Link, useParams} from "react-router-dom";
+import {useParams} from "react-router-dom";
 import BenefitPageHeader from "./components/BenefitPageHeader";
 import AppScreenWrapper from "../../shared-components/AppScreenWrapper";
 import {useStore} from "../../shared-components/ViewportUpdater";
-import {useMetadataStore, useValidationReportStore} from "../../storage/zustand";
+import {useMetadataStore} from "../../storage/zustand";
 import BenefitPageRules from "./components/BenefitPageRules";
-import {Box, Button, Typography, Divider, IconButton} from "@mui/material";
+import {Box, Typography, Divider, IconButton} from "@mui/material";
 import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined';
 import useTranslation from "../../language/useTranslation";
 import {LanguageContext} from "../../language/LanguageContext";
-import useIsMissingDataBenefit from './hooks/useIsMissingDataBenefit';
 import useBenefitPageData from "./hooks/useBenefitPageData";
 import useCategoryTitles from "./hooks/useCategoryTitles";
 import useFetchData from "../../shared-hooks/useFetchData";
@@ -22,10 +21,8 @@ const BenefitPageScreen = () => {
 
     const isDesktop = useStore((state) => state.isDesktop);
     const metadata = useMetadataStore((state) => state.metadata);
-    const validationReport = useValidationReportStore((state) => state.validationReport);
 
     const topicsData = useFetchData('assets/data/topics/topics-list.json');
-    const isMissingDataBenefit = useIsMissingDataBenefit(id, validationReport);
     const benefitPageData = useBenefitPageData(id, metadata);
     const categoryTitles = useCategoryTitles(topicsData, benefitPageData, language);
 
@@ -36,7 +33,7 @@ const BenefitPageScreen = () => {
     return (
         <Layout isApp={true} logo={false} back="Back">
             <AppScreenWrapper isDesktop={isDesktop} back={true}>
-                <BenefitPageHeader benefit={benefitPageData}/>
+                <BenefitPageHeader id={id} benefit={benefitPageData}/>
                 <Box sx={{
                     display: "flex",
                     flexDirection: "column",
@@ -62,18 +59,6 @@ const BenefitPageScreen = () => {
                         ))}
                     </Box>
                 </Box>
-                {id && isMissingDataBenefit && (
-                    <Box sx={{width: '100%', mb: 2}}>
-                        <Button
-                            variant="contained"
-                            sx={{backgroundColor: 'secondary.main', borderColor: 'secondary.main'}}
-                            component={Link}
-                            to={`/onboarding-welcome/${id}`}
-                        >
-                            {t('app.benefitPage.eligibilityBtn')}
-                        </Button>
-                    </Box>
-                )}
                 <Box gap={3} sx={{
                     display: "flex",
                     flexDirection: "column",

diff --git a/src/ui/screens/benefit-page/components/BenefitPageHeader.js b/src/ui/screens/benefit-page/components/BenefitPageHeader.js
@@ -1,16 +1,26 @@
 import VStack from "../../../shared-components/VStack";
-import {IconButton, Typography} from "@mui/material";
+import {Box, Button, IconButton, Typography} from "@mui/material";
 import HStack from "../../../shared-components/HStack";
 import globalStyles from "../../../styles/styles";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import React, {useState} from "react";
 import {useStore} from "../../../shared-components/ViewportUpdater";
+import {Link} from "react-router-dom";
+import {useValidationReportStore} from "../../../storage/zustand";
+import useIsMissingDataBenefit from "../hooks/useIsMissingDataBenefit";
+import useTranslation from "../../../language/useTranslation";
+
+const BenefitPageHeader = ({id, benefit}) => {
+    const {t} = useTranslation();
 
-const BenefitPageHeader = ({benefit}) => {
     const [leiKaInfo, setLeiKaInfo] = useState(false);
     const isDesktop = useStore((state) => state.isDesktop);
     const titleFontSize = isDesktop ? '32px' : '28px';
 
+    const validationReport = useValidationReportStore((state) => state.validationReport);
+    const isMissingDataBenefit = useIsMissingDataBenefit(id, validationReport);
+
+
     return (
         <VStack gap={0} alignItems={'flex-start'} sx={{
             width: '100%',
@@ -53,6 +63,25 @@ const BenefitPageHeader = ({benefit}) => {
                                 the right benefit for you.
                             </Typography>
                         </VStack>)}
+                    {id && isMissingDataBenefit && (
+                        <Box sx={{width: '100%', mb: 2}}>
+                            <Button
+                                variant="contained"
+                                sx={{
+                                    backgroundColor: 'secondary.main',
+                                    borderColor: 'secondary.main',
+                                    color: 'white',
+                                    '&:hover': {
+                                        color: 'black',
+                                    }
+                            }}
+                                component={Link}
+                                to={`/onboarding-welcome/${id}`}
+                            >
+                                {t('app.benefitPage.eligibilityBtn')}
+                            </Button>
+                        </Box>
+                    )}
                 </VStack>
             </VStack>
         </VStack>