diff --git a/src/Components/CategoryAccordion/CategoryAccordion.tsx b/src/Components/CategoryAccordion/CategoryAccordion.tsx
index b8657cda0..f319427dd 100644
--- a/src/Components/CategoryAccordion/CategoryAccordion.tsx
+++ b/src/Components/CategoryAccordion/CategoryAccordion.tsx
@@ -3,15 +3,14 @@ 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;
@@ -19,6 +18,7 @@ type Props = {
const CategoryAccordion = ({ categoryName, categoryOptions, setExpanded, expanded, index }: Props) => {
const { theme } = useContext(Context);
+
return (
{categoryName}
-
+
);
diff --git a/src/Components/CheckboxGroup/BasicCheckboxGroup.js b/src/Components/CheckboxGroup/BasicCheckboxGroup.js
index 268d8aa7f..47db4e160 100644
--- a/src/Components/CheckboxGroup/BasicCheckboxGroup.js
+++ b/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 (
}
diff --git a/src/Components/CheckboxGroup/CurrentBenefitsCheckboxGroup.tsx b/src/Components/CheckboxGroup/CurrentBenefitsCheckboxGroup.tsx
new file mode 100644
index 000000000..d623c720d
--- /dev/null
+++ b/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) => {
+ 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;
+
+ const formControlLabels = optionKeys.map((optionKey) => {
+ const option = options[optionKey];
+
+ const createFormLabel = () => {
+ return (
+
+ {option.name}
+ {option.description}
+
+ );
+ };
+
+ return (
+
+ }
+ label={createFormLabel()}
+ key={optionKey}
+ />
+ );
+ });
+
+ return formControlLabels;
+ };
+
+ return (
+
+ {createFormControlLabels(options)}
+
+ );
+};
+
+export default CurrentBenefitsCheckboxGroup;
diff --git a/src/Components/Confirmation/Confirmation.js b/src/Components/Confirmation/Confirmation.js
index 13441d4b0..0b6825bac 100644
--- a/src/Components/Confirmation/Confirmation.js
+++ b/src/Components/Confirmation/Confirmation.js
@@ -564,17 +564,29 @@ const Confirmation = () => {
return mappedListItems;
};
- const listAllTruthyValues = (selectedOptions, relatedOptionsList) => {
- const mappedListItems = selectedOptions.map((option) => {
- return (
-
- {' '}
- {relatedOptionsList[option]}{' '}
-
- );
- });
+ const listAllTruthyValues = (selectedOptions, relatedOptionsList, stateVariableName) => {
+ if (stateVariableName === 'benefits') {
+ const mappedListItems = selectedOptions.map((option) => {
+ return (
+
+ {relatedOptionsList[option].name}
+ {relatedOptionsList[option].description}
+
+ );
+ });
- return mappedListItems;
+ return mappedListItems;
+ } else {
+ const mappedListItems = selectedOptions.map((option) => {
+ return (
+
+ {relatedOptionsList[option]}
+
+ );
+ });
+
+ return mappedListItems;
+ }
};
const displayHHCheckboxSection = (
@@ -601,7 +613,9 @@ const Confirmation = () => {
{hasAnyTruthyOptions ? (
- {listAllTruthyValues(truthyOptions, optionsList)}
+
+ {listAllTruthyValues(truthyOptions, optionsList, stateVariableName)}
+
) : (
diff --git a/src/Types/Questions.ts b/src/Types/Questions.ts
index 003fb76db..d13cee24e 100644
--- a/src/Types/Questions.ts
+++ b/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;
+}
\ No newline at end of file