use new violations version and set feature flag for written violations to true

Author: wbglaeser

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "https://foerderfunke.org/",
   "dependencies": {
-    "@foerderfunke/matching-engine": "1.5.2",
+    "@foerderfunke/matching-engine": "1.5.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
     "@emotion/react": "^11.11.4",

src/featureFlags.js

@@ -2,7 +2,7 @@ const defaultFlags = {
     subindividuals: false,
     matchingEnginePerformanceLogging: false,
     profileUpdates: false,
-    writtenViolations: false,
+    writtenViolations: true,
     customHints: false,
 };
 

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

@@ -22,7 +22,8 @@ const BenefitPageScreen = ({
     validatedStatus,
     validationResult,
     categoryTitles,
-    matchingGraph
+    matchingGraph,
+    violations
 }) => {
 
     return (
@@ -50,7 +51,13 @@ const BenefitPageScreen = ({
                                 <BenefitPageLocal t={t} isDesktop={isDesktop} localisedData={localisedData} />
                             )
                         }
-                        <BenefitPageRequirements t={t} validatedStatus={validatedStatus} isDesktop={isDesktop} evalGraph={matchingGraph} />
+                        <BenefitPageRequirements 
+                            t={t} 
+                            validatedStatus={validatedStatus} 
+                            isDesktop={isDesktop} 
+                            evalGraph={matchingGraph} 
+                            violations={violations}
+                        />
                     </VBox>
                 </VBox>
             </AppScreenWrapperContainer>

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

@@ -13,17 +13,20 @@ 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';
+import featureFlags from '@/featureFlags';
+
 
 const BenefitPageScreenContainer = () => {
     const { id } = useParams();
     const { t } = useTranslation();
     const isDesktop = useStore((state) => state.isDesktop);
     const [matchingGraph, setMatchingGraph] = useState(null);
+    const [violations, setViolations] = useState(null);
     const language = useLanguageStore((state) => state.language);
 
     const benefitPageData = useFetchStaticBenefitPageData(id, language);
     const categoryTitles = useBuildCategoryTitles(id, language);
-    const {validatedStatus, validationResult} = useValidatedStatus(id);
+    const { validatedStatus, validationResult } = useValidatedStatus(id);
     const activeUserId = useUserStore((state) => state.activeUserId);
     const localisedData = useFetchLocaliseData(benefitPageData); // merge this logic with customHints? TODO
     const customHints = useFetchCustomBenefitPageHints(benefitPageData);
@@ -44,6 +47,17 @@ const BenefitPageScreenContainer = () => {
         fetchMatchingReport();
     }, [id, activeUserId, language]);
 
+    useEffect(() => {
+        async function fetchEvalGraph() {
+            const violations = await matchingEngineManager.fetchWrittenViolations(matchingGraph)
+            setViolations(violations);
+        }
+        if (validatedStatus && matchingGraph && featureFlags.writtenViolations) {
+            fetchEvalGraph();
+        }
+    }, [validatedStatus, matchingGraph]);
+
+
     return (
         <BenefitPageScreen
             t={t}
@@ -58,6 +72,7 @@ const BenefitPageScreenContainer = () => {
             targetClass={targetClass}
             categoryTitles={categoryTitles}
             matchingGraph={matchingGraph}
+            violations={violations}
         />
     );
 };

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

@@ -1,31 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import theme from '@/theme';
 import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
 import { Typography } from "@mui/material";
 import BenefitPageMarkdownElement from './BenefitPageMarkDownElement';
 import RegularButton from '@/ui/shared-components/buttons/RegularButton';
 import FlowChart from '@/ui/shared-components/flow-chart/FlowChart';
-import matchingEngineManager from "@/core/managers/matchingEngineManager";
 import featureFlags from '@/featureFlags';
 import ClearIcon from '@mui/icons-material/Clear';
 
 
-const BenefitPageRequirements = ({ t, validatedStatus, isDesktop, evalGraph }) => {
+const BenefitPageRequirements = ({ t, validatedStatus, isDesktop, evalGraph, violations }) => {
     const [open, setOpen] = useState(validatedStatus);
-    const [violations, setViolations] = useState(null);
     const objectIcon = `${process.env.PUBLIC_URL}/assets/images/benefit-pages/tree.svg`;
 
-    useEffect(() => {
-        async function fetchEvalGraph() {
-            const violations = await matchingEngineManager.fetchWrittenViolations(evalGraph)
-            setViolations(violations);
-            console.log("Fetched written violations:", violations);
-        }
-        if (validatedStatus && evalGraph && featureFlags.writtenViolations) {
-            fetchEvalGraph();
-        }
-    }, [validatedStatus, evalGraph]);
-
     return (
         <VBox
             sx={{