diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx index 87bd1a560c..5556c9cc62 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx +++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx @@ -14,10 +14,10 @@ import { object } from "yup"; import { PublicChecklistProps } from "../../types"; import { - partitionGroupedOptions, + partitionGroupedOptionsAgain, toggleNonExclusiveCheckbox, } from "../helpers"; -import { useExclusiveOption } from "../hooks/useExclusiveOption"; +import { useExclusiveOptionInGroupedChecklist } from "../hooks/useExclusiveOption"; import { useSortedOptions } from "../hooks/useSortedOptions"; import { ExclusiveChecklistItem } from "./ExclusiveChecklistItem"; import { GroupedChecklistOptions } from "./GroupedChecklistOptions"; @@ -58,21 +58,17 @@ export const GroupedChecklist: React.FC = (props) => { formik, ); - const [exclusiveOptions, nonExclusiveOptionGroups] = partitionGroupedOptions( - groupedOptions!, - ); + const [exclusiveOptionGroups, nonExclusiveOptionGroups] = + partitionGroupedOptionsAgain(groupedOptions!); - const { - exclusiveOrOption, - exclusiveOptionIsChecked, - toggleExclusiveCheckbox, - } = useExclusiveOption(exclusiveOptions, formik); + const { exclusiveOrOptionGroup, toggleExclusiveCheckbox } = + useExclusiveOptionInGroupedChecklist(exclusiveOptionGroups, formik); const changeCheckbox = (id: string) => () => { const currentCheckedIds = formik.values.checked; const currentCheckboxIsExclusiveOption = - exclusiveOrOption && id === exclusiveOrOption.id; + exclusiveOrOptionGroup && id === exclusiveOrOptionGroup.children[0].id; if (currentCheckboxIsExclusiveOption) { const newCheckedIds = toggleExclusiveCheckbox(id); @@ -82,7 +78,7 @@ export const GroupedChecklist: React.FC = (props) => { const newCheckedIds = toggleNonExclusiveCheckbox( id, currentCheckedIds, - exclusiveOrOption, + exclusiveOrOptionGroup?.children[0], ); setCheckedFieldValue(newCheckedIds); }; @@ -120,17 +116,17 @@ export const GroupedChecklist: React.FC = (props) => { component="fieldset" > {text} - {groupedOptions && ( + {nonExclusiveOptionGroups && ( )} - {exclusiveOrOption && ( + {exclusiveOrOptionGroup && ( diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx index 85dd1d0a4f..48d19a535a 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx +++ b/editor.planx.uk/src/@planx/components/Checklist/Public/hooks/useExclusiveOption.tsx @@ -1,10 +1,11 @@ import { FormikProps } from "formik"; import { Option } from "../../../shared"; +import { Group } from "../../model"; export const useExclusiveOption = ( exclusiveOptions: Option[], - formik: FormikProps<{ checked: Array }> + formik: FormikProps<{ checked: Array }>, ) => { const [exclusiveOrOption] = exclusiveOptions; @@ -21,3 +22,24 @@ export const useExclusiveOption = ( toggleExclusiveCheckbox, }; }; + +export const useExclusiveOptionInGroupedChecklist = ( + exclusiveOptions: Group