feat: Only flatten payload to required depth, in order to preserve ch…

…ecklist answers

editor.planx.uk/src/@planx/components/List/Public/Context.tsx

@@ -168,7 +168,7 @@ export const ListProvider: React.FC<ListProviderProps> = (props) => {
       const defaultPassportData = makeData(props, values.userData)?.["data"];
 
       // flattenedPassportData makes individual list items compatible with Calculate components
-      const flattenedPassportData = flatten(defaultPassportData);
+      const flattenedPassportData = flatten(defaultPassportData, { depth: 2 });
 
       // basic example of general summary stats we can add onSubmit:
       //   1. count of items/responses

editor.planx.uk/src/@planx/components/List/schemas/mocks/Zoo.ts

@@ -3,10 +3,6 @@ import { TextInputType } from "@planx/components/TextInput/model";
 import { Schema } from "../../model";
 import { Props } from "../../Public";
 
-/**
- * Temp simple example to build out UI
- * Can be re-used as mock for testing
- */
 export const Zoo: Schema = {
   type: "Animal",
   fields: [
@@ -116,11 +112,13 @@ export const mockZooPayload = {
     "mockFn.one.email.address": "[email protected]",
     "mockFn.one.name": "Richard Parker",
     "mockFn.one.size": "Medium",
+    "mockFn.one.food": ["meat", "leaves", "bamboo"],
     "mockFn.two.age": 10,
     "mockFn.two.cuteness.amount": "Very",
     "mockFn.two.email.address": "[email protected]",
     "mockFn.two.name": "Richard Parker",
     "mockFn.two.size": "Medium",
+    "mockFn.two.food": ["meat", "leaves", "bamboo"],
     "mockFn.total.listItems": 2,
   },
 };

editor.planx.uk/src/@planx/components/List/utils.test.ts

@@ -15,28 +15,32 @@ describe("passport data shape", () => {
           "email.address": "[email protected]",
           name: "Richard Parker",
           size: "Medium",
+          food: ["bamboo", "leaves"],
         },
         {
           age: 10,
           "cuteness.amount": "Very",
           "email.address": "[email protected]",
           name: "Richard Parker",
           size: "Medium",
+          food: ["meat", "bamboo", "leaves"],
         },
       ],
     };
 
-    expect(flatten(defaultPassportData)).toEqual({
+    expect(flatten(defaultPassportData, { depth: 2 })).toEqual({
       "mockFn.one.age": 10,
       "mockFn.one.cuteness.amount": "Very",
       "mockFn.one.email.address": "[email protected]",
       "mockFn.one.name": "Richard Parker",
       "mockFn.one.size": "Medium",
+      "mockFn.one.food": ["bamboo", "leaves"],
       "mockFn.two.age": 10,
       "mockFn.two.cuteness.amount": "Very",
       "mockFn.two.email.address": "[email protected]",
       "mockFn.two.name": "Richard Parker",
       "mockFn.two.size": "Medium",
+      "mockFn.two.food": ["meat", "bamboo", "leaves"],
     });
   });
 

editor.planx.uk/src/@planx/components/List/utils.tsx

@@ -95,14 +95,19 @@ export function sumIdenticalUnitsByDevelopmentType(
   return formattedSums;
 }
 
+interface FlattenOptions {
+  depth?: number;
+  path?: string | null;
+  separator?: string;
+};
+
 /**
  * Flattens nested object so we can output passport variables like `{listFn}.{itemIndexAsText}.{fieldFn}`
  *   Adapted from https://gist.github.com/penguinboy/762197
  */
 export function flatten<T extends Record<string, any>>(
-  object: T,
-  path: string | null = null,
-  separator = ".",
+    object: T,
+    { depth = Infinity, path = null, separator = ".", }: FlattenOptions = {}
 ): T {
   return Object.keys(object).reduce((acc: T, key: string): T => {
     const value = object[key];
@@ -121,8 +126,8 @@ export function flatten<T extends Record<string, any>>(
       !(Array.isArray(value) && value.length === 0),
     ].every(Boolean);
 
-    return isObject
-      ? { ...acc, ...flatten(value, newPath, separator) }
+    return (isObject && depth > 0)
+      ? { ...acc, ...flatten(value, { depth: depth - 1, path: newPath, separator }) }
       : { ...acc, [newPath]: value };
   }, {} as T);
 }