Split the program name and desc for styling purposes

src/Components/CategoryAccordion/CategoryAccordion.tsx

@@ -3,22 +3,22 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import BasicCheckboxGroup from '../CheckboxGroup/BasicCheckboxGroup';
+import CurrentBenefitsCheckboxGroup from '../CheckboxGroup/CurrentBenefitsCheckboxGroup';
 import { useContext } from 'react';
 import { Context } from '../Wrapper/Wrapper';
-import { CategoryOptions } from '../../Assets/BenefitCategoryLists/benefitAccordions';
-import { FormattedMessageType } from '../../Types/Questions';
+import { BenefitsList, FormattedMessageType } from '../../Types/Questions';
 
 type Props = {
   categoryName: FormattedMessageType;
-  categoryOptions: CategoryOptions;
+  categoryOptions: BenefitsList;
   setExpanded: (index: boolean | number) => void;
   expanded: number | boolean;
   index: number;
 };
 
 const CategoryAccordion = ({ categoryName, categoryOptions, setExpanded, expanded, index }: Props) => {
   const { theme } = useContext(Context);
+
   return (
     <Accordion
       expanded={expanded === index}
@@ -36,7 +36,7 @@ const CategoryAccordion = ({ categoryName, categoryOptions, setExpanded, expande
         <Typography sx={{ color: '#ffffff', fontSize: '1.2rem', fontWeight: '400' }}>{categoryName}</Typography>
       </AccordionSummary>
       <AccordionDetails>
-        <BasicCheckboxGroup stateVariable="benefits" options={categoryOptions} />
+        <CurrentBenefitsCheckboxGroup options={categoryOptions} />
       </AccordionDetails>
     </Accordion>
   );

src/Components/CheckboxGroup/BasicCheckboxGroup.js

@@ -4,6 +4,7 @@ import { Context } from '../Wrapper/Wrapper.tsx';
 
 const BasicCheckboxGroup = ({ stateVariable, options }) => {
   const { formData: state, setFormData: setState } = useContext(Context);
+
   const handleCheckboxChange = (event) => {
     const { name } = event.target;
 
@@ -29,7 +30,7 @@ const BasicCheckboxGroup = ({ stateVariable, options }) => {
     const formControlLabels = optionKeys.map((optionKey) => {
       return (
         <FormControlLabel
-          sx={{ alignItems: 'center', marginTop: `1rem` }}
+          sx={{ alignItems: 'center', marginTop: '1rem' }}
           control={
             <Checkbox checked={state[stateVariable][optionKey]} onChange={handleCheckboxChange} name={optionKey} />
           }

src/Components/CheckboxGroup/CurrentBenefitsCheckboxGroup.tsx

@@ -0,0 +1,59 @@
+import { FormControlLabel, FormGroup, Checkbox, FormControl, Typography } from '@mui/material';
+import { ChangeEvent, useContext } from 'react';
+import { Context } from '../Wrapper/Wrapper.tsx';
+import { BenefitsList } from '../../Types/Questions.ts';
+import { Benefits } from '../../Types/FormData.ts';
+
+type CurrentBenefitsCheckboxGroupProps = {
+  options: BenefitsList;
+};
+
+const CurrentBenefitsCheckboxGroup = ({ options }: CurrentBenefitsCheckboxGroupProps) => {
+  const { formData: state, setFormData: setState } = useContext(Context);
+  const stateVariable = 'benefits';
+
+  const handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const name= event.target.name as keyof Benefits;
+    const currentStateVariableObj = { ...state[stateVariable] };
+    currentStateVariableObj[name] = !currentStateVariableObj[name];
+    setState({ ...state, [stateVariable]: currentStateVariableObj });
+  };
+
+  const createFormControlLabels = (options: BenefitsList, ) => {
+    const optionKeys = Object.keys(options) as Array<keyof Benefits>;
+
+    const formControlLabels = optionKeys.map((optionKey) => {
+      const option = options[optionKey];
+
+      const createFormLabel = () => {
+        return (
+          <Typography>
+            <strong>{option.name}</strong>
+            <span>{option.description}</span>
+          </Typography>
+        );
+      };
+
+      return (
+        <FormControlLabel
+          sx={{ alignItems: 'center', marginTop: `1rem` }}
+          control={
+            <Checkbox checked={state[stateVariable][optionKey]} onChange={handleCheckboxChange} name={optionKey} />
+          }
+          label={createFormLabel()}
+          key={optionKey}
+        />
+      );
+    });
+
+    return formControlLabels;
+  };
+
+  return (
+    <FormControl sx={{ marginBottom: 2 }}>
+      <FormGroup>{createFormControlLabels(options)}</FormGroup>
+    </FormControl>
+  );
+};
+
+export default CurrentBenefitsCheckboxGroup;

src/Components/Confirmation/Confirmation.js

@@ -564,17 +564,33 @@ const Confirmation = () => {
     return mappedListItems;
   };
 
-  const listAllTruthyValues = (selectedOptions, relatedOptionsList) => {
-    const mappedListItems = selectedOptions.map((option) => {
-      return (
-        <p key={option} className="bottom-margin">
-          {' '}
-          {relatedOptionsList[option]}{' '}
-        </p>
-      );
-    });
+  const listAllTruthyValues = (selectedOptions, relatedOptionsList, stateVariableName) => {
+    if (stateVariableName === 'benefits') {
+      const mappedListItems = selectedOptions.map((option) => {
+        const { id: nameId, defaultMessage: nameDefaultMsg } = relatedOptionsList[option].name.props;
+        const { id: descId, defaultMessage: descDefaultMsg } = relatedOptionsList[option].description.props;
+
+        return (
+          <p key={nameId} className="bottom-margin">
+            <strong>{<FormattedMessage id={nameId} defaultMessage={nameDefaultMsg} />}: </strong>
+            <span>{<FormattedMessage id={descId} defaultMessage={descDefaultMsg} />}</span>
+          </p>
+        );
+      });
 
-    return mappedListItems;
+      return mappedListItems;
+    } else {
+      const mappedListItems = selectedOptions.map((option) => {
+        return (
+          <p key={option} className="bottom-margin">
+            {' '}
+            {relatedOptionsList[option]}{' '}
+          </p>
+        );
+      });
+
+      return mappedListItems;
+    }
   };
 
   const displayHHCheckboxSection = (
@@ -601,7 +617,9 @@ const Confirmation = () => {
             <FormattedMessage id={fMessageId} defaultMessage={fMessageDefaultMsg} />
           </p>
           {hasAnyTruthyOptions ? (
-            <article className="section-p">{listAllTruthyValues(truthyOptions, optionsList)}</article>
+            <article className="section-p">
+              {listAllTruthyValues(truthyOptions, optionsList, stateVariableName)}
+            </article>
           ) : (
             <p className="section-p">
               <FormattedMessage id="confirmation.noIncome" defaultMessage=" None" />

src/Types/Questions.ts

@@ -148,3 +148,27 @@ export type Question = {
   subheader?: FormattedMessageType;
   followUpQuestions?: Question[];
 };
+
+export type Benefit = {
+  name: FormattedMessageType;
+  description: FormattedMessageType;
+};
+
+export type BenefitsList ={
+  [key: string]: Benefit;
+}
+
+export type Category = {
+  benefits: BenefitsList;
+  category_name: FormattedMessageType;
+}
+
+export type CategoryBenefits = {
+  cash: Category;
+  foodAndNutrition: Category;
+  childCare: Category;
+  housingAndUtilities: Category;
+  transportation: Category;
+  healthCare: Category;
+  taxCredits: Category;
+}