feat: exclusive 'Or' option in checklists

editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx

@@ -18,7 +18,7 @@ import { toggleExpandableChecklist } from "../model";
 import { ChecklistProps } from "../types";
 import { Options } from "./Options";
 
-export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
+export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
   const type = TYPES.Checklist;
 
   const formik = useFormik<Checklist>({
@@ -189,4 +189,4 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
   );
 };
 
-export default ChecklistComponent;
+export default ChecklistEditor;

editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx

@@ -2,6 +2,7 @@ import Delete from "@mui/icons-material/Delete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
+import { BaseOptionsEditor } from "@planx/components/shared/BaseOptionsEditor";
 import adjust from "ramda/src/adjust";
 import compose from "ramda/src/compose";
 import remove from "ramda/src/remove";
@@ -17,6 +18,10 @@ import type { Group } from "../model";
 import ChecklistOptionsEditor from "./OptionsEditor";
 
 export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
+  const exclusiveOrOptionManagerShouldRender =
+    formik.values.options?.filter((opt: Option) => opt.data.exclusive !== true)
+      .length > 0;
+
   return (
     <ModalSectionContent subtitle="Options">
       {formik.values.groupedOptions ? (
@@ -128,9 +133,23 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
         </Box>
       ) : (
         <ListManager
-          values={formik.values.options || []}
+          values={
+            formik.values.options?.filter(
+              (opt: Option) => !opt.data.exclusive,
+            ) || []
+          }
           onChange={(newOptions) => {
-            formik.setFieldValue("options", newOptions);
+            const exclusiveOptions =
+              formik.values.options?.filter(
+                (opt: Option) => opt.data.exclusive,
+              ) || [];
+
+            const newCombinedOptions =
+              newOptions.length === 0
+                ? []
+                : [...exclusiveOptions, ...newOptions];
+
+            formik.setFieldValue("options", newCombinedOptions);
           }}
           newValueLabel="add new option"
           newValue={() =>
@@ -146,6 +165,46 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
           editorExtraProps={{ showValueField: !!formik.values.fn }}
         />
       )}
+      {exclusiveOrOptionManagerShouldRender ? (
+        <Box mt={1}>
+          <ListManager
+            values={
+              formik.values.options?.filter(
+                (opt: Option) => opt.data.exclusive,
+              ) || []
+            }
+            onChange={(newExclusiveOptions) => {
+              const nonExclusiveOptions: Option[] =
+                formik.values.options?.filter(
+                  (opt: Option) => !opt.data.exclusive,
+                ) || [];
+
+              const newCombinedOptions = [
+                ...nonExclusiveOptions,
+                ...newExclusiveOptions,
+              ];
+
+              formik.setFieldValue("options", newCombinedOptions);
+            }}
+            newValueLabel='add "or" option'
+            maxItems={1}
+            newValue={() =>
+              ({
+                data: {
+                  text: "",
+                  description: "",
+                  val: "",
+                  exclusive: true,
+                },
+              }) as Option
+            }
+            Editor={BaseOptionsEditor}
+            editorExtraProps={{ showValueField: !!formik.values.fn }}
+          />
+        </Box>
+      ) : (
+        <></>
+      )}
     </ModalSectionContent>
   );
 };

editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx

@@ -1,5 +1,6 @@
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 import { visuallyHidden } from "@mui/utils";
 import {
   checklistValidationSchema,
@@ -21,7 +22,11 @@ import { object } from "yup";
 
 import { Props } from "../types";
 import { AutoAnsweredChecklist } from "./AutoAnsweredChecklist";
-import { getInitialExpandedGroups, toggleInArray } from "./helpers";
+import {
+  getInitialExpandedGroups,
+  toggleCheckbox,
+  toggleInArray,
+} from "./helpers";
 
 export enum ChecklistLayout {
   Basic,
@@ -90,18 +95,36 @@ const VisibleChecklist: React.FC<Props> = (props) => {
   const layout = getLayout({ options, groupedOptions });
   const flatOptions = getFlatOptions({ options, groupedOptions });
 
-  const changeCheckbox = (id: string) => (_checked: any) => {
-    const newCheckedIds = formik.values.checked.includes(id)
-      ? formik.values.checked.filter((x) => x !== id)
-      : [...formik.values.checked, id];
-
-    formik.setFieldValue(
-      "checked",
-      newCheckedIds.sort((a, b) => {
-        const originalIds = flatOptions.map((cb) => cb.id);
-        return originalIds.indexOf(a) - originalIds.indexOf(b);
-      }),
-    );
+  const sortCheckedIds = (ids: string[]): string[] => {
+    const originalIds = flatOptions.map((cb) => cb.id);
+    return ids.sort((a, b) => originalIds.indexOf(a) - originalIds.indexOf(b));
+  };
+
+  const exclusiveOrOption =
+    options?.find((option) => option.data?.exclusive === true) || undefined;
+
+  const exclusiveOptionIsChecked =
+    exclusiveOrOption && formik.values.checked.includes(exclusiveOrOption.id);
+
+  const changeCheckbox = (id: string) => () => {
+    const currentIds = formik.values.checked;
+    let newCheckedIds;
+    const currentCheckboxIsExclusiveOption =
+      exclusiveOrOption && id === exclusiveOrOption.id;
+
+    if (currentCheckboxIsExclusiveOption) {
+      newCheckedIds = exclusiveOptionIsChecked ? [] : [id];
+    } else if (exclusiveOrOption) {
+      newCheckedIds = toggleCheckbox(id, currentIds);
+      const onlyNonExclusiveOptions = newCheckedIds.filter(
+        (id: string) => exclusiveOrOption && id !== exclusiveOrOption.id,
+      );
+      newCheckedIds = onlyNonExclusiveOptions;
+    } else {
+      newCheckedIds = toggleCheckbox(id, currentIds);
+    }
+    const sortedCheckedIds = sortCheckedIds(newCheckedIds);
+    formik.setFieldValue("checked", sortedCheckedIds);
   };
 
   return (
@@ -122,36 +145,59 @@ const VisibleChecklist: React.FC<Props> = (props) => {
             component="fieldset"
           >
             <legend style={visuallyHidden}>{text}</legend>
-            {options?.map((option) =>
-              layout === ChecklistLayout.Basic ? (
-                <FormWrapper key={option.id}>
-                  <Grid item xs={12} key={option.data.text}>
-                    <ChecklistItem
-                      onChange={changeCheckbox(option.id)}
-                      label={option.data.text}
+            {options
+              ?.filter((option) => option.data.exclusive !== true)
+              .map((option) =>
+                layout === ChecklistLayout.Basic ? (
+                  <FormWrapper key={option.id}>
+                    <Grid item xs={12} key={option.data.text}>
+                      <ChecklistItem
+                        onChange={changeCheckbox(option.id)}
+                        label={option.data.text}
+                        id={option.id}
+                        checked={
+                          formik.values.checked.includes(option.id) &&
+                          !exclusiveOptionIsChecked
+                        }
+                      />
+                    </Grid>
+                  </FormWrapper>
+                ) : (
+                  <Grid
+                    item
+                    xs={12}
+                    sm={6}
+                    contentWrap={4}
+                    key={option.data.text}
+                  >
+                    <ImageButton
+                      title={option.data.text}
                       id={option.id}
-                      checked={formik.values.checked.includes(option.id)}
+                      img={option.data.img}
+                      selected={formik.values.checked.includes(option.id)}
+                      onClick={changeCheckbox(option.id)}
+                      checkbox
                     />
                   </Grid>
-                </FormWrapper>
-              ) : (
-                <Grid
-                  item
-                  xs={12}
-                  sm={6}
-                  contentWrap={4}
-                  key={option.data.text}
-                >
-                  <ImageButton
-                    title={option.data.text}
-                    id={option.id}
-                    img={option.data.img}
-                    selected={formik.values.checked.includes(option.id)}
-                    onClick={changeCheckbox(option.id)}
-                    checkbox
+                ),
+              )}
+            {exclusiveOrOption && (
+              <FormWrapper key={exclusiveOrOption.id}>
+                <Grid item xs={12} key={exclusiveOrOption.data.text}>
+                  <Typography width={36} display="flex" justifyContent="center">
+                    or
+                  </Typography>
+
+                  <ChecklistItem
+                    onChange={changeCheckbox(exclusiveOrOption.id)}
+                    label={exclusiveOrOption.data.text}
+                    id={exclusiveOrOption.id}
+                    checked={formik.values.checked.includes(
+                      exclusiveOrOption.id,
+                    )}
                   />
                 </Grid>
-              ),
+              </FormWrapper>
             )}
 
             {groupedOptions && (

editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts

@@ -28,3 +28,18 @@ export function getInitialExpandedGroups(
     [] as number[],
   );
 }
+
+export const toggleCheckbox = (
+  thisCheckboxId: string,
+  currentlyCheckedOptionIds: string[],
+) => {
+  const toggleOff = currentlyCheckedOptionIds.filter(
+    (id) => id !== thisCheckboxId,
+  );
+
+  const toggleOn = [...currentlyCheckedOptionIds, thisCheckboxId];
+
+  return currentlyCheckedOptionIds.includes(thisCheckboxId)
+    ? toggleOff
+    : toggleOn;
+};

editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.exclusiveOr.test.tsx

@@ -0,0 +1,101 @@
+import { screen } from "@testing-library/react";
+import React from "react";
+import { setup } from "testUtils";
+import { vi } from "vitest";
+
+import Checklist from "../Public";
+import { optionsWithExclusiveOption } from "./mockOptions";
+import { pressContinue, pressOption } from "./testUtils";
+
+describe("when a user selects the exclusive 'or' option and nothing else", () => {
+  it("does not throw an error on submit", async () => {
+    const handleSubmit = vi.fn();
+
+    setup(
+      <Checklist
+        allRequired={false}
+        description=""
+        text="Which permanent structures have you lived in?"
+        handleSubmit={handleSubmit}
+        options={optionsWithExclusiveOption}
+      />,
+    );
+    expect(screen.getByRole("heading")).toHaveTextContent(
+      "Which permanent structures have you lived in?",
+    );
+
+    await pressOption("Tent");
+
+    await pressContinue();
+
+    expect(handleSubmit).toHaveBeenCalledWith({
+      answers: ["tent_id"],
+    });
+  });
+});
+
+describe.each([
+  {
+    optionType: "a non-exclusive",
+    optionLabelText: "Caravan",
+    oppositeOptionLabelText: "Tent",
+  },
+  {
+    optionType: "an exclusive",
+    optionLabelText: "Tent",
+    oppositeOptionLabelText: "Caravan",
+  },
+])(
+  "when a user selects $optionType option",
+  ({ oppositeOptionLabelText, optionLabelText }) => {
+    it("deselects it when the opposite type of option is selected", async () => {
+      const { getByLabelText } = setup(
+        <Checklist
+          allRequired={false}
+          description=""
+          text="Which permanent structures have you lived in?"
+          options={optionsWithExclusiveOption}
+        />,
+      );
+      const firstSelectedOption = getByLabelText(optionLabelText);
+      const secondSelectedOption = getByLabelText(oppositeOptionLabelText);
+
+      await pressOption(optionLabelText);
+
+      expect(firstSelectedOption).toHaveAttribute("checked");
+
+      await pressOption(oppositeOptionLabelText);
+
+      expect(firstSelectedOption).not.toHaveAttribute("checked");
+      expect(secondSelectedOption).toHaveAttribute("checked");
+    });
+  },
+);
+
+describe("when an exclusiveOr option is configured", () => {
+  it("does not affect the user's ability to select multiple other options", async () => {
+    const handleSubmit = vi.fn();
+
+    setup(
+      <Checklist
+        allRequired={false}
+        description=""
+        text="Which permanent structures have you lived in?"
+        handleSubmit={handleSubmit}
+        options={optionsWithExclusiveOption}
+      />,
+    );
+    expect(screen.getByRole("heading")).toHaveTextContent(
+      "Which permanent structures have you lived in?",
+    );
+
+    await pressOption("Caravan");
+    await pressOption("House");
+
+    await pressContinue();
+
+    expect(handleSubmit).toHaveBeenCalledWith({
+      answers: ["caravan_id", "house_id"],
+    });
+  });
+});