Refactor to useSelectedBenefit[s]Store

benjaminaaron · benjaminaaron · commit ff81ecbf63fd · 2025-08-11T15:10:44.000+02:00
Drop /onboarding-welcome/:benefitMode in the process
diff --git a/src/AppRoutes.js b/src/AppRoutes.js
@@ -25,7 +25,6 @@ const AppRoutes = () => (
         <Route path="/onboarding-choice" element={<OnboardingChoice/>}/>
         <Route path="/onboarding-welcome-topics" element={<OnboardingWelcomeTopicsContainer/>}/>
         <Route path="/onboarding-welcome" element={<OnboardingWelcomeOverviewContainer/>}/>
-        <Route path="/onboarding-welcome/:benefitMode" element={<OnboardingWelcomeOverviewContainer/>}/>
         <Route path="/eligibility-overview" element={<EligibilityOverviewScreenContainer/>}/>
         <Route path="/benefit-page/:id" element={<BenefitPageScreenContainer/>}/>
         <Route path="/profile-overview" element={<ProfileScreen/>}/>
diff --git a/src/ui/screens/benefit-page/components/BenefitPageHeader.js b/src/ui/screens/benefit-page/components/BenefitPageHeader.js
@@ -3,15 +3,15 @@ import { Link } from "react-router-dom";
 import { Button, IconButton, Typography, Box } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { HBox, VBox } from "@/ui/shared-components/LayoutBoxes";
-import { useSelectedBenefitStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
+import { useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
 import useTranslation from "@/ui/language/useTranslation";
 import theme from "@/theme";
 
 const BenefitPageHeader = ({ id, benefit, validatedStatus, categoryTitles }) => {
     const { t } = useTranslation();
     const [leiKaInfo, setLeiKaInfo] = useState(false);
 
-    const setSelectedBenefit = useSelectedBenefitStore((state) => state.setSelectedBenefit);
+    const setSelectedBenefits = useSelectedBenefitsStore((state) => state.setSelectedBenefits);
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
     return (
@@ -92,9 +92,9 @@ const BenefitPageHeader = ({ id, benefit, validatedStatus, categoryTitles }) =>
                                 }
                             }}
                             component={Link}
-                            to={`/onboarding-welcome/${id}`}
+                            to={'/onboarding-welcome/'}
                             onClick={() => {
-                                setSelectedBenefit(id);
+                                setSelectedBenefits([id]);
                                 clearSelectedTopics()
                             }}
                         >
diff --git a/src/ui/screens/eligibilty-overview/components/EligibilityOverviewItem.js b/src/ui/screens/eligibilty-overview/components/EligibilityOverviewItem.js
@@ -3,7 +3,7 @@ import { Divider, Typography } from '@mui/material';
 import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
 import theme from '@/theme';
 import RegularButton from '@/ui/shared-components/buttons/RegularButton';
-import { useSelectedBenefitStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
+import { useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
 import EligibilityOverviewTag from './EligibilityOverviewTag';
 import EligibilityOverviewBanner from './EligibilityOverviewBanner';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -21,7 +21,7 @@ const filterKeys = [
 const EligibilityOverviewItem = ({ t, item, eligible }) => {
     const [isVisible, setIsVisible] = useState(false);
     const color = eligible === 'indeterminate' ? 'black.light' : 'black.main';
-    const setSelectedBenefit = useSelectedBenefitStore((state) => state.setSelectedBenefit);
+    const setSelectedBenefits = useSelectedBenefitsStore((state) => state.setSelectedBenefits);
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
     return (
@@ -112,10 +112,10 @@ const EligibilityOverviewItem = ({ t, item, eligible }) => {
                             variant={'blueHollow'}
                             onClick={() => {
                                 clearSelectedTopics()
-                                setSelectedBenefit(item.id);
+                                setSelectedBenefits([item.id]);
                             }}
                             text={'app.browseAll.checkElBtn'}
-                            link={`/onboarding-welcome/${item.id}`}
+                            link={`/onboarding-welcome/`}
                             size='small'
                             endIcon={<ChevronRightIcon sx={{ fontSize: '16px' }} />}
                         />
diff --git a/src/ui/screens/eligibilty-overview/components/EligibilityOverviewItemDetails.js b/src/ui/screens/eligibilty-overview/components/EligibilityOverviewItemDetails.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Typography } from '@mui/material';
 import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
-import { useSelectedBenefitStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
+import { useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
 import RegularButton from '@/ui/shared-components/buttons/RegularButton';
 
 const EligibilityOverviewItemDetails = ({ item, eligible }) => {
-    const setSelectedBenefit = useSelectedBenefitStore((state) => state.setSelectedBenefit);
+    const setSelectedBenefits = useSelectedBenefitsStore((state) => state.setSelectedBenefits);
     const clearSelectedTopics = useSelectedTopicsStore((state) => state.clear);
 
     return (
@@ -27,10 +27,10 @@ const EligibilityOverviewItemDetails = ({ item, eligible }) => {
                         variant={'blueHollow'}
                         onClick={() => {
                             clearSelectedTopics()
-                            setSelectedBenefit(item.id);
+                            setSelectedBenefits([item.id]);
                         }}
                         text={'app.browseAll.checkElBtn'}
-                        link={`/onboarding-welcome/${item.id}`}
+                        link={`/onboarding-welcome/`}
                         size='small'
                     />
                 }
diff --git a/src/ui/screens/info-pages/hooks/useResetUserProfile.js b/src/ui/screens/info-pages/hooks/useResetUserProfile.js
@@ -7,7 +7,7 @@ import { useApplicationLoadingState } from '@/ui/storage/updates';
 import {
     useUserStore,
     questionsStackStore,
-    useSelectedBenefitStore,
+    useSelectedBenefitsStore,
     useSelectedTopicsStore,
     useValidationReportStore,
 } from "@/ui/storage/zustand";
@@ -44,7 +44,7 @@ const useResetUserProfile = () => {
 
             // 2) Clear selected topics/benefits
             useSelectedTopicsStore.getState().clear();
-            useSelectedBenefitStore.getState().clear();
+            useSelectedBenefitsStore.getState().clear();
             questionsStackStore.getState().resetQuestionsStack();
 
             // 3) Fetch & update validation report
diff --git a/src/ui/screens/onboarding-pages/hooks/useBuildBenefitTitle.js b/src/ui/screens/onboarding-pages/hooks/useBuildBenefitTitle.js
diff --git a/src/ui/screens/onboarding-pages/hooks/useBuildBenefitsTitles.js b/src/ui/screens/onboarding-pages/hooks/useBuildBenefitsTitles.js
@@ -0,0 +1,17 @@
+import { useMemo } from "react";
+
+const useBuildBenefitsTitles = (selectedBenefits, metadata) => {
+    return useMemo(() => {
+        if (!metadata?.['ff:hasRP'] || !Array.isArray(selectedBenefits) || selectedBenefits.length === 0) {
+            return [];
+        }
+        return selectedBenefits
+            .map(benefitId => {
+                const match = metadata['ff:hasRP']?.find(rp => rp['@id'] === benefitId);
+                return match?.['ff:title']?.["@value"] || "";
+            })
+            .filter(title => title); // remove empty strings
+    }, [metadata, selectedBenefits]);
+};
+
+export default useBuildBenefitsTitles;
diff --git a/src/ui/screens/onboarding-pages/overview/OnboardingWelcomeOverview.js b/src/ui/screens/onboarding-pages/overview/OnboardingWelcomeOverview.js
@@ -10,14 +10,16 @@ import AppScreenWrapperContainer from '@/ui/shared-components/app-screen-wrapper
 
 const OnboardingWelcomeOverviewView = ({
     t,
-    benefitMode,
     language,
     isLoading,
     numberOfBenefits,
-    benefitTitle,
+    benefitTitles,
     topicRps,
 }) => {
 
+    const isBenefitMode = () => { // true = by benefits, false = by topic
+        return benefitTitles && benefitTitles.length > 0;
+    }
 
     return (
         <Layout isApp={true} logo={false}>
@@ -29,36 +31,38 @@ const OnboardingWelcomeOverviewView = ({
                         </Typography>
                         <HBox sx={{ gap: 4, alignItems: 'center', flexWrap: 'wrap' }}>
                             <TimeIcon />
-                            {!benefitMode && numberOfBenefits > 0 && <BenefitsIcon numberOfBenefits={numberOfBenefits} />}
+                            {!isBenefitMode() && numberOfBenefits > 0 && <BenefitsIcon numberOfBenefits={numberOfBenefits} />}
                         </HBox>
                     </VBox>
                     <VBox sx={{ maxWidth: '800px' }}>
                         {
-                            !benefitMode && numberOfBenefits === 0 ? (
+                            !isBenefitMode() && numberOfBenefits === 0 ? (
                                 <Typography variant="h2" sx={{ color: 'pink.main', fontWeight: '500' }}>
                                     {t('app.topicsChosen.noChoiceTitle')}
                                 </Typography>)
                                 : (
                                     <>
                                         <Typography variant="h2" sx={{ color: 'pink.main', fontWeight: '500' }}>
-                                            {benefitMode ? t('app.topicsChosen.benefitTitle') : t('app.topicsChosen.topicsTitle')}
+                                            {isBenefitMode() ? t('app.topicsChosen.benefitTitle') : t('app.topicsChosen.topicsTitle')}
                                         </Typography>
                                         <Typography variant="body1">
-                                            {benefitMode ? t('app.topicsChosen.benefitText') : t('app.topicsChosen.topicsText')}
+                                            {isBenefitMode() ? t('app.topicsChosen.benefitText') : t('app.topicsChosen.topicsText')}
                                         </Typography>
                                     </>)}
                     </VBox>
                     <VBox sx={{ gap: 4 }}>
-                        {benefitMode ? (
+                        {isBenefitMode() ? (
                             <VBox alignItems={'flex-start'}>
                                 <HBox sx={{
                                     padding: { xs: '20px', md: 4 },
                                     borderRadius: theme.shape.borderRadius,
                                     backgroundColor: 'white.main',
                                 }}>
-                                    <Typography variant="h2" sx={{ fontWeight: '400' }}>
-                                        {benefitTitle}
-                                    </Typography>
+                                    {benefitTitles.map((title, idx) => (
+                                        <Typography key={idx} variant="h2" sx={{ fontWeight: '400' }}>
+                                            {title}
+                                        </Typography>
+                                    ))}
                                 </HBox>
                             </VBox>
                         ) : (
diff --git a/src/ui/screens/onboarding-pages/overview/OnboardingWelcomeOverviewContainer.js b/src/ui/screens/onboarding-pages/overview/OnboardingWelcomeOverviewContainer.js
@@ -1,31 +1,28 @@
 import React from 'react';
-import { useParams } from "react-router-dom";
 import useTranslation from "@/ui/language/useTranslation";
-import { useMetadataStore, useSelectedBenefitStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
+import { useMetadataStore, useSelectedBenefitsStore, useSelectedTopicsStore } from "@/ui/storage/zustand";
 import { useLanguageStore } from "@/ui/storage/useLanguageStore";
 import OnboardingWelcomeOverview from './OnboardingWelcomeOverview';
 import useBuildTopicsList from "../hooks/useBuildTopicsList";
-import useBuildBenefitTitle from "../hooks/useBuildBenefitTitle";
+import useBuildBenefitsTitles from "../hooks/useBuildBenefitsTitles";
 
 const OnboardingWelcomeOverviewContainer = () => {
-    const { benefitMode } = useParams();
     const { t } = useTranslation();
     const language = useLanguageStore((state) => state.language);
 
-    const selectedBenefit = useSelectedBenefitStore((state) => state.selectedBenefit);
+    const selectedBenefits = useSelectedBenefitsStore((state) => state.selectedBenefits);
     const selectedTopics = useSelectedTopicsStore((state) => state.selectedTopics);
     const metadata = useMetadataStore((state) => state.metadata);
     const topicWithBenefits = useBuildTopicsList(selectedTopics, metadata);
-    const benefitTitle = useBuildBenefitTitle(selectedBenefit, metadata);
+    const benefitTitles = useBuildBenefitsTitles(selectedBenefits, metadata);
 
     return (
         <OnboardingWelcomeOverview
             t={t}
-            benefitMode={benefitMode}
             language={language}
             selectedTopics={selectedTopics}
             numberOfBenefits={topicWithBenefits?.uniqueRpCount}
-            benefitTitle={benefitTitle}
+            benefitTitles={benefitTitles}
             topicRps={topicWithBenefits?.topicRps}
         />
     );
diff --git a/src/ui/screens/question-pages/hooks/useFetchQuizReport.js b/src/ui/screens/question-pages/hooks/useFetchQuizReport.js
@@ -4,7 +4,7 @@ import {
   useUserStore,
   useQuizReportStore,
   useSelectedTopicsStore,
-  useSelectedBenefitStore,
+  useSelectedBenefitsStore,
   useMetadataStore
 } from "@/ui/storage/zustand";
 import { useQuestionsUpdate } from "@/ui/storage/updates";
@@ -23,7 +23,7 @@ const useFetchQuizReport = () => {
   const userId = useUserStore((state) => state.activeUserId);
   const metadata = useMetadataStore((state) => state.metadata);
   const selectedTopics = useSelectedTopicsStore((state) => state.selectedTopics);
-  const selectedBenefit = useSelectedBenefitStore((state) => state.selectedBenefit);
+  const selectedBenefits = useSelectedBenefitsStore((state) => state.selectedBenefits);
   const updateCounter = useQuestionsUpdate((state) => state.updateCounter);
   const updateQuizReport = useQuizReportStore((state) => state.updateQuizReport);
   const language = useLanguageStore((state) => state.language);
@@ -37,7 +37,7 @@ const useFetchQuizReport = () => {
       const uniqueRpIds = new Set();
 
       const hasSelectedTopics = Array.isArray(selectedTopics) && selectedTopics.length > 0;
-      const hasSelectedBenefit = Boolean(selectedBenefit);
+      const hasSelectedBenefits = Array.isArray(selectedBenefits) && selectedBenefits.length > 0;
 
       // Add RP IDs based on selected topics
       if (hasSelectedTopics) {
@@ -53,13 +53,13 @@ const useFetchQuizReport = () => {
         }
       }
 
-      // Add selected benefit if it's defined
-      if (hasSelectedBenefit) {
-        uniqueRpIds.add(selectedBenefit);
+      // Add selected benefits if they are defined
+      if (hasSelectedBenefits) {
+          selectedBenefits.forEach(id => uniqueRpIds.add(id));
       }
 
-      // If both selectedTopics and selectedBenefit are empty/null, add all RPs
-      if (!hasSelectedTopics && !hasSelectedBenefit) {
+      // If both selectedTopics and selectedBenefits are empty/null, add all RPs
+      if (!hasSelectedTopics && !hasSelectedBenefits) {
         for (const rp of rps) {
           if (rp?.["@id"]) {
             uniqueRpIds.add(rp["@id"]);
@@ -94,7 +94,7 @@ const useFetchQuizReport = () => {
     userId,
     metadata,
     selectedTopics,
-    selectedBenefit,
+    selectedBenefits,
     updateCounter,
     updateQuizReport,
     language,
diff --git a/src/ui/storage/zustand.js b/src/ui/storage/zustand.js
@@ -54,15 +54,15 @@ export const useSelectedTopicsStore = create((set) => ({
     }
 }));
 
-export const useSelectedBenefitStore = create((set) => ({
-    selectedBenefit: null,
-    setSelectedBenefit(newSelectedBenefit) {
-        console.log('STATE UPDATE: We are setting the selected benefit');
-        set({selectedBenefit: newSelectedBenefit});
+export const useSelectedBenefitsStore = create((set) => ({
+    selectedBenefits: [],
+    setSelectedBenefits(newSelectedBenefits) {
+        console.log('STATE UPDATE: We are setting the selected benefits');
+        set({selectedBenefits: newSelectedBenefits});
     },
     clear: () => {
-        console.log('STATE UPDATE: We are clearing the selected benefit');
-        set({selectedBenefit: null});
+        console.log('STATE UPDATE: We are clearing the selected benefits');
+        set({selectedBenefits: []});
     }
 }));
 
