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