Get public side working correctly

theopensystemslab · Jan 8, 2025 · f63cbe0 · f63cbe0
1 parent a8717ad
commit f63cbe0
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 52 deletions.
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
@@ -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<PublicChecklistProps> = (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<PublicChecklistProps> = (props) => {
     const newCheckedIds = toggleNonExclusiveCheckbox(
       id,
       currentCheckedIds,
-      exclusiveOrOption,
+      exclusiveOrOptionGroup?.children[0],
     );
     setCheckedFieldValue(newCheckedIds);
   };
@@ -120,17 +116,17 @@ export const GroupedChecklist: React.FC<PublicChecklistProps> = (props) => {
             component="fieldset"
           >
             <legend style={visuallyHidden}>{text}</legend>
-            {groupedOptions && (
+            {nonExclusiveOptionGroups && (
               <GroupedChecklistOptions
-                groupedOptions={groupedOptions}
+                groupedOptions={nonExclusiveOptionGroups}
                 previouslySubmittedData={previouslySubmittedData}
                 changeCheckbox={changeCheckbox}
                 formik={formik}
               />
             )}
-            {exclusiveOrOption && (
+            {exclusiveOrOptionGroup && (
               <ExclusiveChecklistItem
-                exclusiveOrOption={exclusiveOrOption}
+                exclusiveOrOption={exclusiveOrOptionGroup?.children[0]}
                 changeCheckbox={changeCheckbox}
                 formik={formik}
               />

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
@@ -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<string> }>
+  formik: FormikProps<{ checked: Array<string> }>,
 ) => {
   const [exclusiveOrOption] = exclusiveOptions;
 
@@ -21,3 +22,24 @@ export const useExclusiveOption = (
     toggleExclusiveCheckbox,
   };
 };
+
+export const useExclusiveOptionInGroupedChecklist = (
+  exclusiveOptions: Group<Option>[],
+  formik: FormikProps<{ checked: Array<string> }>,
+) => {
+  const [exclusiveOrOptionGroup] = exclusiveOptions;
+
+  const exclusiveOptionIsChecked =
+    exclusiveOrOptionGroup &&
+    formik.values.checked.includes(exclusiveOrOptionGroup.children[0].id);
+
+  const toggleExclusiveCheckbox = (checkboxId: string) => {
+    return exclusiveOptionIsChecked ? [] : [checkboxId];
+  };
+
+  return {
+    exclusiveOrOptionGroup,
+    exclusiveOptionIsChecked,
+    toggleExclusiveCheckbox,
+  };
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
@@ -88,6 +88,7 @@ describe("Checklist Component - Grouped Layout", () => {
     expect(nonExclusiveOption).not.toHaveAttribute("checked");
     expect(exclusiveOption).toHaveAttribute("checked");
 
+    await user.click(screen.getByText("Section 2"));
     const exclusiveOptionInSection2 = screen.getByLabelText("S2 Option1");
     await user.click(exclusiveOptionInSection2);
 
@@ -101,7 +102,7 @@ describe("Checklist Component - Grouped Layout", () => {
     await user.click(screen.getByTestId("continue-button"));
 
     expect(handleSubmit).toHaveBeenCalledWith({
-      answers: ["S1_Option2", "S2_Option1", "S2_Option2"],
+      answers: ["S1_Option1", "S2_Option1", "S2_Option2"],
     });
   });
 

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts
@@ -122,41 +122,45 @@ export const groupedOptions: Array<Group<Option>> = [
   },
 ];
 
-export const groupedOptionsWithExclusiveOption: Array<Group<Option> | Option> =
-  [
-    {
-      title: "Section 1",
-      children: [
-        {
-          id: "S1_Option1",
-          data: {
-            text: "S1 Option1",
-          },
+export const groupedOptionsWithExclusiveOption: Array<Group<Option>> = [
+  {
+    title: "Section 1",
+    children: [
+      {
+        id: "S1_Option1",
+        data: {
+          text: "S1 Option1",
         },
-      ],
-    },
-    {
-      title: "Section 2",
-      children: [
-        {
-          id: "S2_Option1",
-          data: {
-            text: "S2 Option1",
-          },
+      },
+    ],
+  },
+  {
+    title: "Section 2",
+    children: [
+      {
+        id: "S2_Option1",
+        data: {
+          text: "S2 Option1",
         },
-        {
-          id: "S2_Option2",
-          data: {
-            text: "S2 Option2",
-          },
+      },
+      {
+        id: "S2_Option2",
+        data: {
+          text: "S2 Option2",
         },
-      ],
-    },
-    {
-      id: "exclusive_option",
-      data: {
-        text: "Exclusive",
-        exclusive: true,
       },
-    },
-  ];
+    ],
+  },
+  {
+    title: "Exclusive 'Or' Option",
+    children: [
+      {
+        id: "exclusive_option",
+        data: {
+          text: "Exclusive",
+          exclusive: true,
+        },
+      },
+    ],
+  },
+];