Implement customHints logic

Author: benjaminaaron

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

@@ -1702,6 +1702,16 @@
       "de": "Substitutionstherapie",
       "en": "Substitution Therapy"
     },
+    "customHints": [
+      {
+        "pattern": {
+          "ff:healthInsurance": false
+        },
+        "de": "Sie haben angegeben, dass Sie keine Krankenversicherung haben. Bitte beachten Sie, dass sie darauf einen Anspruch haben und es Voraussetzung für diese Leistung ist.",
+        "de_es": "Sie haben angegeben, dass Sie keine Krankenversicherung haben. Bitte beachten Sie, dass sie darauf einen Anspruch haben und es Voraussetzung für diese Leistung ist.",
+        "en": "You have indicated that you do not have health insurance. Please note that you are entitled to it and it is a prerequisite for this benefit."
+      }
+    ],
     "teaser": {
       "de": "In der Suchtmedizin ist die Substitutionstherapie eine Behandlung, bei der heroinabhängige Menschen ein ärztlich verordnetes Ersatzopioid wie Methadon oder Buprenorphin erhalten. Ziel der Behandlung ist es, den Konsum von Heroin zu verhindern, bzw. zu verringern.",
       "de_es": "In der Suchtmedizin gibt es die Substitutionstherapie. Das heißt, Menschen, die von Heroin abhängig sind, bekommen ein anderes Medikament. Das Medikament ersetzt das Heroin. Das Medikament ist zum Beispiel Methadon oder Buprenorphin. Die Menschen bekommen das Medikament von einem Arzt oder einer Ärztin. So sollen die Menschen weniger Heroin nehmen oder gar kein Heroin mehr nehmen.",

src/ui/language/translations.js

@@ -312,6 +312,9 @@ const translations = {
                     btn: "Show local information",
                     btnClose: "Close local information",
                 },
+                customHints: {
+                    title: "Hints for you based on your profile"
+                },
                 goals: "Goals",
                 benefitType: "Benefit type",
                 benefitScope: "Benefit scope",
@@ -701,6 +704,9 @@ const translations = {
                     btn: "Unterstützung vor Ort anzeigen",
                     btnClose: "Unterstützung vor Ort schließen"
                 },
+                customHints: {
+                    title: "Hinweise für Sie, basierend auf Ihrem Profil"
+                },
                 description: "Beschreibung",
                 goals: "Ziele",
                 benefitType: "Leistungsgegenstand",

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

@@ -7,13 +7,15 @@ import BenefitPageGeneral from './components/BenefitPageGeneral';
 import BenefitPageApplication from './components/BenefitPageApplication';
 import BenefitPageRequirements from './components/BenefitPageRequirements';
 import BenefitPageLocal from './components/BenefitPageLocal';
+import BenefitPageCustomHints from "@/ui/screens/benefit-page/components/BenefitPageCustomHints";
 
 const BenefitPageScreen = ({
     t,
     id,
     isDesktop,
     benefitPageData,
     localisedData,
+    customHints,
     xml,
     targetClass,
     validatedStatus,
@@ -35,6 +37,11 @@ const BenefitPageScreen = ({
                         categoryTitles={categoryTitles}
                     />
                     <VBox sx={{ gap: { xs: 4, md: 8 }}}>
+                        {
+                            customHints && customHints.length > 0 && (
+                                <BenefitPageCustomHints t={t} isDesktop={isDesktop} customHints={customHints} />
+                            )
+                        }
                         <BenefitPageGeneral t={t} isDesktop={isDesktop} benefitPageData={benefitPageData} />
                         <BenefitPageApplication t={t} isDesktop={isDesktop} benefitPageData={benefitPageData} xml={xml} />
                         {

src/ui/screens/benefit-page/BenefitPageScreenContainer.js

@@ -10,6 +10,7 @@ import matchingEngineManager from "@/core/managers/matchingEngineManager";
 import { useUserStore } from '@/ui/storage/zustand';
 import { useStore } from "@/ui/shared-components/ViewportUpdater";
 import { useFetchLocaliseData } from './hooks/useFetchLocalisedData';
+import { useFetchCustomBenefitPageHints } from "@/ui/screens/benefit-page/hooks/useFetchCustomBenefitPageHints";
 import useFetchData from '@/ui/shared-hooks/utility/useFetchResource';
 import useFetchTargetClass from './hooks/useFetchTargetClass';
 
@@ -24,7 +25,8 @@ const BenefitPageScreenContainer = () => {
     const categoryTitles = useBuildCategoryTitles(id, language);
     const {validatedStatus, validationResult} = useValidatedStatus(id);
     const activeUserId = useUserStore((state) => state.activeUserId);
-    const localisedData = useFetchLocaliseData(benefitPageData);
+    const localisedData = useFetchLocaliseData(benefitPageData); // merge this logic with customHints? TODO
+    const customHints = useFetchCustomBenefitPageHints(benefitPageData);
     const xml = useFetchData(`assets/data/xml/${id.split(":")[1]}.xml`);
     const targetClass = useFetchTargetClass(id);
 
@@ -49,6 +51,7 @@ const BenefitPageScreenContainer = () => {
             isDesktop={isDesktop}
             benefitPageData={benefitPageData}
             localisedData={localisedData}
+            customHints={customHints}
             xml={xml}
             validatedStatus={validatedStatus}
             validationResult={validationResult}

src/ui/screens/benefit-page/components/BenefitPageCustomHints.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import { VBox } from '@/ui/shared-components/LayoutBoxes';
+import theme from '@/theme';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+
+const BenefitPageCustomHints = ({ t, isDesktop, customHints }) => {
+    return (
+        <VBox sx={{
+            backgroundColor: theme.palette.error.light,
+            color: theme.palette.white.main,
+            padding: { xs: '12px', md: '16px' },
+            borderRadius: theme.shape.borderRadius,
+            gap: 1,
+        }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <WarningAmberIcon sx={{ color: theme.palette.black.main }} />
+                <Typography variant="h3" sx={{ color: theme.palette.black.main }}>
+                    {t ? t('app.benefitPage.customHints.title', 'Important notes') : 'Important notes'}
+                </Typography>
+            </Box>
+            <Box component="ul" sx={{ m: 0, pl: 3, '& li': { color: theme.palette.black.main, mb: 0.5 }}}>
+                {customHints.map((hint, idx) => (
+                    <Box component="li" key={idx}>
+                        <Typography variant="body1" sx={{ color: theme.palette.black.main }}>
+                            {hint}
+                        </Typography>
+                    </Box>
+                ))}
+            </Box>
+        </VBox>
+    );
+}
+
+export default BenefitPageCustomHints;

src/ui/screens/benefit-page/hooks/useFetchCustomBenefitPageHints.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { pickLang } from "@/ui/language/useTranslation";
+import { useLanguageStore } from "@/ui/storage/useLanguageStore";
+import { useUserStore } from "@/ui/storage/zustand";
+import userManager from "@/core/managers/userManager";
+
+export const useFetchCustomBenefitPageHints = (benefitPageData) => {
+    const language = useLanguageStore(s => s.language);
+    const activeUserId = useUserStore(s => s.activeUserId);
+
+    return useMemo(() => {
+        if (!activeUserId) return null;
+        const hints = benefitPageData?.customHints ?? [];
+        if (!hints.length) return null;
+
+        let triggeredHints = [];
+        for (let hint of hints) {
+            let isTriggered = true;
+            for (const [datafield, triggerValue] of Object.entries(hint.pattern)) {
+                const actualValue = userManager.retrieveUserField(activeUserId, datafield);
+                if (actualValue === null || actualValue !== triggerValue) isTriggered = false;
+            }
+            if (isTriggered) triggeredHints.push(pickLang(hint, language, null));
+        }
+
+        return triggeredHints;
+    }, [activeUserId, benefitPageData, language]);
+};

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

@@ -27,6 +27,7 @@ const useFetchStaticBenefitPageData = (id, language) => {
       examplesList :        pickLang(resource?.general?.examples, language, null),
       applicationProcess:   pickLang(resource?.application_process?.brief, language, null),
       localisedData:        resource?.specific ? resource.specific : null,
+      customHints:          resource?.customHints ? resource.customHints : null,
     };
   }, [hydrationData, id, language]);