From 8ec281728d5525e28ff1f5081bb0fafdcc1982fe Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Thu, 6 Feb 2020 17:57:30 -0500
Subject: [PATCH 01/22] working FormArrayControl component and Adapters for
 radio and checkboxes

---
 f2/src/components/FormArrayControl/index.js | 29 ++++++
 f2/src/components/FormHelperText/index.js   |  8 +-
 f2/src/components/FormLabel/index.js        |  2 +-
 f2/src/components/checkbox/index.js         | 26 +++++-
 f2/src/components/radio/index.js            | 97 ++++++++++++---------
 f2/src/forms/HowDidItStartForm.js           | 69 ++++++++-------
 6 files changed, 152 insertions(+), 79 deletions(-)
 create mode 100644 f2/src/components/FormArrayControl/index.js

diff --git a/f2/src/components/FormArrayControl/index.js b/f2/src/components/FormArrayControl/index.js
new file mode 100644
index 000000000..756fba13c
--- /dev/null
+++ b/f2/src/components/FormArrayControl/index.js
@@ -0,0 +1,29 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import { FormErrorMessage, FormControl } from '@chakra-ui/core'
+import { useField } from 'react-final-form'
+import { FormLabel } from '../FormLabel'
+import { FormHelperText } from '../FormHelperText'
+
+export const FormArrayControl = ({
+  label,
+  helperText,
+  errorMessage,
+  name,
+  children,
+  ...rest
+}) => {
+  const {
+    meta: { error, touched },
+  } = useField(name, { subscription: { touched: true, error: true } })
+  return (
+    <FormControl as="fieldset" {...rest} isInvalid={error && touched}>
+      <FormLabel as="legend" htmlFor={name}>
+        {label}
+      </FormLabel>
+      <FormHelperText>{helperText}</FormHelperText>
+      <FormErrorMessage>{errorMessage}</FormErrorMessage>
+      {children}
+    </FormControl>
+  )
+}
diff --git a/f2/src/components/FormHelperText/index.js b/f2/src/components/FormHelperText/index.js
index 0c354109a..7bb1a8320 100644
--- a/f2/src/components/FormHelperText/index.js
+++ b/f2/src/components/FormHelperText/index.js
@@ -6,11 +6,11 @@ export const FormHelperText = styled(ChakraFormHelperText)(
   variant({
     variants: {
       above: {
-        mt: 0,
-        mb: 2,
+        mt: -2,
+        mb: 4,
       },
       below: {
-        mt: 2,
+        mt: 4,
         mb: 0,
       },
       unstyled: {
@@ -22,7 +22,7 @@ export const FormHelperText = styled(ChakraFormHelperText)(
 
 FormHelperText.defaultProps = {
   variant: 'above',
-  as: 'div',
+  as: 'p',
   fontSize: 'md',
   color: 'black',
   fontFamily: 'body',
diff --git a/f2/src/components/FormLabel/index.js b/f2/src/components/FormLabel/index.js
index 8e067e37c..7a498ff04 100644
--- a/f2/src/components/FormLabel/index.js
+++ b/f2/src/components/FormLabel/index.js
@@ -7,7 +7,7 @@ FormLabel.defaultProps = {
   fontSize: 'xl',
   fontWeight: 'bold',
   fontFamily: 'body',
-  pb: 1,
+  mb: 2,
   lineHeight: 1,
   maxW: '600px',
 }
diff --git a/f2/src/components/checkbox/index.js b/f2/src/components/checkbox/index.js
index 133f9d561..b28119167 100644
--- a/f2/src/components/checkbox/index.js
+++ b/f2/src/components/checkbox/index.js
@@ -4,8 +4,31 @@ import { jsx } from '@emotion/core'
 import { Text } from '../text'
 import { UniqueID } from '../unique-id'
 import { Box, VisuallyHidden, ControlBox, Icon, Flex } from '@chakra-ui/core'
+import { useField } from 'react-final-form'
 
-export const Checkbox = ({ label, isChecked, ...props }) => {
+export const CheckboxAdapter = ({
+  name,
+  value,
+  defaultIsChecked,
+  children,
+}) => {
+  const {
+    input: { checked, ...input },
+    meta: { error, touched },
+  } = useField(name, {
+    type: 'checkbox', // important for RFF to manage the checked prop
+    value, // important for RFF to manage list of strings
+    defaultIsChecked,
+  })
+
+  return (
+    <Checkbox input={input} isChecked={checked} isInvalid={error && touched}>
+      {children}
+    </Checkbox>
+  )
+}
+
+export const Checkbox = ({ input, label, isChecked, ...props }) => {
   return (
     <UniqueID>
       {id => {
@@ -13,6 +36,7 @@ export const Checkbox = ({ label, isChecked, ...props }) => {
           <Box as="label" {...props} id={id}>
             <Flex align="center">
               <VisuallyHidden
+                {...input}
                 as="input"
                 type="checkbox"
                 defaultChecked={isChecked ? 'true' : ''}
diff --git a/f2/src/components/radio/index.js b/f2/src/components/radio/index.js
index 458aef397..04503b5b2 100644
--- a/f2/src/components/radio/index.js
+++ b/f2/src/components/radio/index.js
@@ -4,54 +4,69 @@ import { jsx } from '@emotion/core'
 import { Text } from '../text'
 import { UniqueID } from '../unique-id'
 import { Box, VisuallyHidden, ControlBox, Flex } from '@chakra-ui/core'
+import { useField } from 'react-final-form'
 
-export const Radio = ({ label, isChecked, ...props }) => {
+export const RadioAdapter = ({ name, value, defaultIsChecked, children }) => {
+  const {
+    input: { checked, ...input },
+    meta: { error, touched },
+  } = useField(name, {
+    type: 'radio',
+    value,
+    defaultIsChecked,
+  })
+
+  return (
+    <Radio input={input} isChecked={checked} isInvalid={error && touched}>
+      {children}
+    </Radio>
+  )
+}
+
+export const Radio = ({ input, label, isChecked, ...props }) => {
   return (
     <UniqueID>
       {id => {
         return (
-          <Box as="label" {...props} id={id}>
-            <Flex align="center">
-              <VisuallyHidden
-                as="input"
-                type="radio"
-                name={props.name}
-                value={props.value}
-                defaultChecked={isChecked ? 'true' : ''}
-              />
+          <Flex as="label" id={id} align="center">
+            <VisuallyHidden
+              {...input}
+              as="input"
+              type="radio"
+              defaultChecked={isChecked ? 'true' : ''}
+            />
 
-              <ControlBox
-                borderWidth="2px"
-                borderColor="black"
-                size="40px"
-                rounded="full"
-                type="radio"
-                _hover={{
-                  boxShadow: 'outlineHover',
-                  borderColor: 'black',
-                }}
-                _checked={{
-                  borderColor: 'black',
-                  border: '3px',
-                }}
-                _checkedAndHover={{
-                  boxShadow: 'outlineHover',
-                }}
-                _focus={{
-                  outline: 'none',
-                  bg: 'white',
-                  boxShadow: 'outline',
-                  borderColor: 'black',
-                }}
-              >
-                <Box size="20px" bg="black" rounded="full" />
-              </ControlBox>
+            <ControlBox
+              borderWidth="2px"
+              borderColor="black"
+              size="40px"
+              rounded="full"
+              type="radio"
+              _hover={{
+                boxShadow: 'outlineHover',
+                borderColor: 'black',
+              }}
+              _checked={{
+                borderColor: 'black',
+                border: '3px',
+              }}
+              _checkedAndHover={{
+                boxShadow: 'outlineHover',
+              }}
+              _focus={{
+                outline: 'none',
+                bg: 'white',
+                boxShadow: 'outline',
+                borderColor: 'black',
+              }}
+            >
+              <Box size="20px" bg="black" rounded="full" />
+            </ControlBox>
 
-              <Text ml={2} htmlFor={id}>
-                {props.children}
-              </Text>
-            </Flex>
-          </Box>
+            <Text ml={2} htmlFor={id}>
+              {props.children}
+            </Text>
+          </Flex>
         )
       }}
     </UniqueID>
diff --git a/f2/src/forms/HowDidItStartForm.js b/f2/src/forms/HowDidItStartForm.js
index f99f907d2..ea82e51f8 100644
--- a/f2/src/forms/HowDidItStartForm.js
+++ b/f2/src/forms/HowDidItStartForm.js
@@ -5,13 +5,20 @@ import { Trans } from '@lingui/macro'
 import { Form, Field, useField } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
 import { Checkbox } from '../components/checkbox'
-import { Radio } from '../components/radio'
-import { FormControl, Stack, Box } from '@chakra-ui/core'
+import { Radio, RadioAdapter } from '../components/radio'
+import {
+  FormControl,
+  Stack,
+  Box,
+  RadioGroup,
+  CheckboxGroup,
+} from '@chakra-ui/core'
 import { FormHelperText } from '../components/FormHelperText'
 import { TextArea } from '../components/text-area'
 import { useStateValue } from '../utils/state'
 import { FormLabel } from '../components/FormLabel'
 import { ConditionalForm } from '../components/container'
+import { FormArrayControl } from '../components/FormArrayControl'
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -165,14 +172,12 @@ export const HowDidItStartForm = props => {
             shouldWrapChildren
             spacing={12}
           >
-            <Control as="fieldset" name="howDidTheyReachYou">
-              <FormLabel as="legend" htmlFor="howDidTheyReachYou" mb={2}>
-                <Trans id="howDidTheyReachYou.question" />
-              </FormLabel>
-              <FormHelperText>
-                <Trans id="howDidTheyReachYou.reminder" />
-              </FormHelperText>
-              <Stack spacing={4} shouldWrapChildren>
+            <FormArrayControl
+              name="howDidTheyReachYou"
+              label={<Trans id="howDidTheyReachYou.question" />}
+              helperText={<Trans id="howDidTheyReachYou.reminder" />}
+            >
+              <CheckboxGroup spacing={4}>
                 {questionsList.map(question => {
                   return (
                     <Box key={question.channel}>
@@ -210,50 +215,50 @@ export const HowDidItStartForm = props => {
                     </Box>
                   )
                 })}
-              </Stack>
-            </Control>
+              </CheckboxGroup>
+            </FormArrayControl>
 
-            <Control as="fieldset" name="whenDidItStart">
-              <FormLabel as="legend" htmlFor="whenDidItStart" mb={2}>
-                <Trans id="whenDidItStart.label" />
-              </FormLabel>
-              <Stack spacing={4} shouldWrapChildren>
+            <FormArrayControl
+              name="whenDidItStart"
+              label={<Trans id="whenDidItStart.label" />}
+            >
+              <RadioGroup spacing={4}>
                 {whenDidItStart.map(key => {
                   return (
-                    <Box key={key}>
-                      <RadioButtonArrayControl
+                    <React.Fragment key={key}>
+                      <RadioAdapter
                         name="whenDidItStart"
                         value={key}
                         isChecked={timeline.whenDidItStart.includes(key)}
                       >
                         {i18n._(key)}
-                      </RadioButtonArrayControl>
-                    </Box>
+                      </RadioAdapter>
+                    </React.Fragment>
                   )
                 })}
-              </Stack>
-            </Control>
+              </RadioGroup>
+            </FormArrayControl>
 
-            <Control as="fieldset" name="howManyTimes">
-              <FormLabel as="legend" htmlFor="howManyTimes" mb={2}>
-                <Trans id="howManyTimes.label" />
-              </FormLabel>
-              <Stack spacing={4} shouldWrapChildren>
+            <FormArrayControl
+              name="howManyTimes"
+              label={<Trans id="howManyTimes.label" />}
+            >
+              <RadioGroup spacing={4}>
                 {howManyTimes.map(key => {
                   return (
                     <Box key={key}>
-                      <RadioButtonArrayControl
+                      <RadioAdapter
                         name="howManyTimes"
                         value={key}
                         isChecked={recurrenceCheck.howManyTimes.includes(key)}
                       >
                         {i18n._(key)}
-                      </RadioButtonArrayControl>
+                      </RadioAdapter>
                     </Box>
                   )
                 })}
-              </Stack>
-            </Control>
+              </RadioGroup>
+            </FormArrayControl>
             <NextAndCancelButtons
               next={<Trans id="howDidItStartPage.nextPage" />}
               button={<Trans id="howDidItStartPage.nextButton" />}

From 43b350c6dd894f65902fe71ac72e3a1bbda5f78a Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Mon, 10 Feb 2020 13:45:59 -0500
Subject: [PATCH 02/22] broken, but added a Field component to ease markup

---
 .../components/Field/__tests__/Field.test.js  |  0
 f2/src/components/Field/index.js              | 31 +++++++
 f2/src/components/FormArrayControl/index.js   |  9 ++
 f2/src/components/checkbox/index.js           | 21 +++--
 f2/src/components/radio/index.js              | 90 ++++++++++---------
 f2/src/forms/HowDidItStartForm.js             | 12 +++
 6 files changed, 117 insertions(+), 46 deletions(-)
 create mode 100644 f2/src/components/Field/__tests__/Field.test.js
 create mode 100644 f2/src/components/Field/index.js

diff --git a/f2/src/components/Field/__tests__/Field.test.js b/f2/src/components/Field/__tests__/Field.test.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/f2/src/components/Field/index.js b/f2/src/components/Field/index.js
new file mode 100644
index 000000000..40325bd5a
--- /dev/null
+++ b/f2/src/components/Field/index.js
@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import PropTypes from 'prop-types'
+import { render } from 'react-dom'
+import { FormErrorMessage, FormControl } from '@chakra-ui/core'
+import { FormHelperText } from '../FormHelperText'
+import { FormLabel } from '../FormLabel'
+import { Field as FieldAdapter } from 'react-final-form'
+
+export const Field = (name, label, helperText, errorMessage, children) => {
+  render(
+    <FieldAdapter name={name}>
+      {props => (
+        <FormControl>
+          <FormLabel htmlFor={name}>{label}</FormLabel>
+          <FormHelperText>{helperText}</FormHelperText>
+          <FormErrorMessage>{errorMessage}</FormErrorMessage>
+          {children}
+        </FormControl>
+      )}
+    </FieldAdapter>,
+  )
+}
+
+Field.propTypes = {
+  children: PropTypes.any,
+  name: PropTypes.string,
+  label: PropTypes.object,
+  helperText: PropTypes.object,
+  errorMessage: PropTypes.object,
+}
diff --git a/f2/src/components/FormArrayControl/index.js b/f2/src/components/FormArrayControl/index.js
index 756fba13c..21ea7ec8b 100644
--- a/f2/src/components/FormArrayControl/index.js
+++ b/f2/src/components/FormArrayControl/index.js
@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 import { FormErrorMessage, FormControl } from '@chakra-ui/core'
 import { useField } from 'react-final-form'
@@ -27,3 +28,11 @@ export const FormArrayControl = ({
     </FormControl>
   )
 }
+
+FormArrayControl.propTypes = {
+  label: PropTypes.object,
+  helperText: PropTypes.object,
+  errorMessage: PropTypes.object,
+  name: PropTypes.string,
+  children: PropTypes.any,
+}
diff --git a/f2/src/components/checkbox/index.js b/f2/src/components/checkbox/index.js
index b28119167..5751a78a1 100644
--- a/f2/src/components/checkbox/index.js
+++ b/f2/src/components/checkbox/index.js
@@ -1,10 +1,12 @@
 /** @jsx jsx */
+import React from 'react'
 import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 import { Text } from '../text'
 import { UniqueID } from '../unique-id'
 import { Box, VisuallyHidden, ControlBox, Icon, Flex } from '@chakra-ui/core'
 import { useField } from 'react-final-form'
+import { ConditionalForm } from '../container'
 
 export const CheckboxAdapter = ({
   name,
@@ -28,13 +30,19 @@ export const CheckboxAdapter = ({
   )
 }
 
-export const Checkbox = ({ input, label, isChecked, ...props }) => {
+export const Checkbox = ({
+  input,
+  label,
+  isChecked,
+  conditionalField,
+  ...props
+}) => {
   return (
     <UniqueID>
       {id => {
         return (
-          <Box as="label" {...props} id={id}>
-            <Flex align="center">
+          <React.Fragment>
+            <Flex as="label" {...props} id={id} align="center">
               <VisuallyHidden
                 {...input}
                 as="input"
@@ -71,15 +79,16 @@ export const Checkbox = ({ input, label, isChecked, ...props }) => {
                 {props.children}
               </Text>
             </Flex>
-          </Box>
+
+            {isChecked && <ConditionalForm>{conditionalField}</ConditionalForm>}
+          </React.Fragment>
         )
       }}
     </UniqueID>
   )
 }
 
-Checkbox.defaultProps = {}
-
 Checkbox.propTypes = {
+  conditionalField: PropTypes.object,
   children: PropTypes.any,
 }
diff --git a/f2/src/components/radio/index.js b/f2/src/components/radio/index.js
index 04503b5b2..9cb805eb8 100644
--- a/f2/src/components/radio/index.js
+++ b/f2/src/components/radio/index.js
@@ -1,10 +1,12 @@
 /** @jsx jsx */
+import React from 'react'
 import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 import { Text } from '../text'
 import { UniqueID } from '../unique-id'
 import { Box, VisuallyHidden, ControlBox, Flex } from '@chakra-ui/core'
 import { useField } from 'react-final-form'
+import { ConditionalForm } from '../container'
 
 export const RadioAdapter = ({ name, value, defaultIsChecked, children }) => {
   const {
@@ -23,58 +25,66 @@ export const RadioAdapter = ({ name, value, defaultIsChecked, children }) => {
   )
 }
 
-export const Radio = ({ input, label, isChecked, ...props }) => {
+export const Radio = ({
+  input,
+  label,
+  isChecked,
+  conditionalField,
+  ...props
+}) => {
   return (
     <UniqueID>
       {id => {
         return (
-          <Flex as="label" id={id} align="center">
-            <VisuallyHidden
-              {...input}
-              as="input"
-              type="radio"
-              defaultChecked={isChecked ? 'true' : ''}
-            />
+          <React.Fragment>
+            <Flex as="label" id={id} align="center">
+              <VisuallyHidden
+                {...input}
+                as="input"
+                type="radio"
+                defaultChecked={isChecked ? 'true' : ''}
+              />
 
-            <ControlBox
-              borderWidth="2px"
-              borderColor="black"
-              size="40px"
-              rounded="full"
-              type="radio"
-              _hover={{
-                boxShadow: 'outlineHover',
-                borderColor: 'black',
-              }}
-              _checked={{
-                borderColor: 'black',
-                border: '3px',
-              }}
-              _checkedAndHover={{
-                boxShadow: 'outlineHover',
-              }}
-              _focus={{
-                outline: 'none',
-                bg: 'white',
-                boxShadow: 'outline',
-                borderColor: 'black',
-              }}
-            >
-              <Box size="20px" bg="black" rounded="full" />
-            </ControlBox>
+              <ControlBox
+                borderWidth="2px"
+                borderColor="black"
+                size="40px"
+                rounded="full"
+                type="radio"
+                _hover={{
+                  boxShadow: 'outlineHover',
+                  borderColor: 'black',
+                }}
+                _checked={{
+                  borderColor: 'black',
+                  border: '3px',
+                }}
+                _checkedAndHover={{
+                  boxShadow: 'outlineHover',
+                }}
+                _focus={{
+                  outline: 'none',
+                  bg: 'white',
+                  boxShadow: 'outline',
+                  borderColor: 'black',
+                }}
+              >
+                <Box size="20px" bg="black" rounded="full" />
+              </ControlBox>
 
-            <Text ml={2} htmlFor={id}>
-              {props.children}
-            </Text>
-          </Flex>
+              <Text ml={2} htmlFor={id}>
+                {props.children}
+              </Text>
+            </Flex>
+            {isChecked && <ConditionalForm>{conditionalField}</ConditionalForm>}
+          </React.Fragment>
         )
       }}
     </UniqueID>
   )
 }
 
-Radio.defaultProps = {}
-
 Radio.propTypes = {
   children: PropTypes.any,
+  conditionalField: PropTypes.object,
 }
diff --git a/f2/src/forms/HowDidItStartForm.js b/f2/src/forms/HowDidItStartForm.js
index ea82e51f8..7ee0b58e6 100644
--- a/f2/src/forms/HowDidItStartForm.js
+++ b/f2/src/forms/HowDidItStartForm.js
@@ -19,6 +19,7 @@ import { useStateValue } from '../utils/state'
 import { FormLabel } from '../components/FormLabel'
 import { ConditionalForm } from '../components/container'
 import { FormArrayControl } from '../components/FormArrayControl'
+import { Field as ConditionalField } from '../components/Field'
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -189,6 +190,17 @@ export const HowDidItStartForm = props => {
                         )}
                       >
                         {i18n._(question.channel)}
+                        <ConditionalField
+                          name={question.name}
+                          label={<Trans id={question.label} />}
+                          helperText={<Trans id={question.hint} />}
+                        >
+                          <TextArea
+                            name={props.input.name}
+                            value={props.input.value}
+                            onChange={props.input.onChange}
+                          />
+                        </ConditionalField>
                       </CheckboxArrayControl>
                       {values.howDidTheyReachYou.includes(question.channel) && (
                         <ConditionalForm>

From 05543871d5e7419a7506ac7ca6a3270d7353540e Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Mon, 10 Feb 2020 16:36:32 -0500
Subject: [PATCH 03/22] rebuilt the howdiditstart page using checkbox
 component.

---
 f2/src/components/Field/index.js            |  30 +--
 f2/src/components/FormArrayControl/index.js |  33 +++-
 f2/src/components/checkbox/index.js         |  22 ++-
 f2/src/forms/HowDidItStartForm.js           | 192 ++++++--------------
 4 files changed, 107 insertions(+), 170 deletions(-)

diff --git a/f2/src/components/Field/index.js b/f2/src/components/Field/index.js
index 40325bd5a..fc04089ce 100644
--- a/f2/src/components/Field/index.js
+++ b/f2/src/components/Field/index.js
@@ -1,24 +1,28 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
 import PropTypes from 'prop-types'
-import { render } from 'react-dom'
 import { FormErrorMessage, FormControl } from '@chakra-ui/core'
 import { FormHelperText } from '../FormHelperText'
 import { FormLabel } from '../FormLabel'
 import { Field as FieldAdapter } from 'react-final-form'
+import { UniqueID } from '../unique-id'
 
-export const Field = (name, label, helperText, errorMessage, children) => {
-  render(
-    <FieldAdapter name={name}>
-      {props => (
-        <FormControl>
-          <FormLabel htmlFor={name}>{label}</FormLabel>
-          <FormHelperText>{helperText}</FormHelperText>
-          <FormErrorMessage>{errorMessage}</FormErrorMessage>
-          {children}
-        </FormControl>
-      )}
-    </FieldAdapter>,
+export const Field = ({ name, label, helperText, errorMessage, component }) => {
+  return (
+    <UniqueID>
+      {id => {
+        return (
+          <FormControl aria-labelledby={id}>
+            <FormLabel id={id} htmlFor={name}>
+              {label}
+            </FormLabel>
+            <FormHelperText>{helperText}</FormHelperText>
+            <FormErrorMessage>{errorMessage}</FormErrorMessage>
+            <FieldAdapter id={name} component={component} />
+          </FormControl>
+        )
+      }}
+    </UniqueID>
   )
 }
 
diff --git a/f2/src/components/FormArrayControl/index.js b/f2/src/components/FormArrayControl/index.js
index 21ea7ec8b..dcfb470af 100644
--- a/f2/src/components/FormArrayControl/index.js
+++ b/f2/src/components/FormArrayControl/index.js
@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
-import { FormErrorMessage, FormControl } from '@chakra-ui/core'
+import { FormErrorMessage, FormControl, Stack } from '@chakra-ui/core'
 import { useField } from 'react-final-form'
 import { FormLabel } from '../FormLabel'
 import { FormHelperText } from '../FormHelperText'
+import { UniqueID } from '../unique-id'
 
 export const FormArrayControl = ({
   label,
@@ -18,14 +19,28 @@ export const FormArrayControl = ({
     meta: { error, touched },
   } = useField(name, { subscription: { touched: true, error: true } })
   return (
-    <FormControl as="fieldset" {...rest} isInvalid={error && touched}>
-      <FormLabel as="legend" htmlFor={name}>
-        {label}
-      </FormLabel>
-      <FormHelperText>{helperText}</FormHelperText>
-      <FormErrorMessage>{errorMessage}</FormErrorMessage>
-      {children}
-    </FormControl>
+    <UniqueID>
+      {id => {
+        return (
+          <FormControl
+            as="fieldset"
+            aria-labelledby={id}
+            isInvalid={error && touched}
+            {...rest}
+          >
+            <FormLabel id={id} as="legend" htmlFor={name}>
+              {label}
+            </FormLabel>
+            <FormHelperText>{helperText}</FormHelperText>
+            <FormErrorMessage>{errorMessage}</FormErrorMessage>
+            {/** This component comes with a group attribute. We don't need to use Chakra's <CheckboxGroup> or <RadioGroup> as per the Chakra docs */}
+            <Stack shouldWrapChildren spacing={4}>
+              {children}
+            </Stack>
+          </FormControl>
+        )
+      }}
+    </UniqueID>
   )
 }
 
diff --git a/f2/src/components/checkbox/index.js b/f2/src/components/checkbox/index.js
index 5751a78a1..4e33743e9 100644
--- a/f2/src/components/checkbox/index.js
+++ b/f2/src/components/checkbox/index.js
@@ -13,6 +13,7 @@ export const CheckboxAdapter = ({
   value,
   defaultIsChecked,
   children,
+  ...props
 }) => {
   const {
     input: { checked, ...input },
@@ -24,19 +25,18 @@ export const CheckboxAdapter = ({
   })
 
   return (
-    <Checkbox input={input} isChecked={checked} isInvalid={error && touched}>
+    <Checkbox
+      input={input}
+      isChecked={checked}
+      isInvalid={error && touched}
+      conditionalField={props.conditionalField}
+    >
       {children}
     </Checkbox>
   )
 }
 
-export const Checkbox = ({
-  input,
-  label,
-  isChecked,
-  conditionalField,
-  ...props
-}) => {
+export const Checkbox = ({ input, label, isChecked, ...props }) => {
   return (
     <UniqueID>
       {id => {
@@ -80,7 +80,9 @@ export const Checkbox = ({
               </Text>
             </Flex>
 
-            {isChecked && <ConditionalForm>{conditionalField}</ConditionalForm>}
+            {isChecked && (
+              <ConditionalForm>{props.conditionalField}</ConditionalForm>
+            )}
           </React.Fragment>
         )
       }}
@@ -89,6 +91,6 @@ export const Checkbox = ({
 }
 
 Checkbox.propTypes = {
-  conditionalField: PropTypes.object,
+  conditionalField: PropTypes.any,
   children: PropTypes.any,
 }
diff --git a/f2/src/forms/HowDidItStartForm.js b/f2/src/forms/HowDidItStartForm.js
index 7ee0b58e6..0d8cd2036 100644
--- a/f2/src/forms/HowDidItStartForm.js
+++ b/f2/src/forms/HowDidItStartForm.js
@@ -2,70 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useLingui } from '@lingui/react'
 import { Trans } from '@lingui/macro'
-import { Form, Field, useField } from 'react-final-form'
+import { Form } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
-import { Checkbox } from '../components/checkbox'
-import { Radio, RadioAdapter } from '../components/radio'
-import {
-  FormControl,
-  Stack,
-  Box,
-  RadioGroup,
-  CheckboxGroup,
-} from '@chakra-ui/core'
-import { FormHelperText } from '../components/FormHelperText'
-import { TextArea } from '../components/text-area'
+import { CheckboxAdapter } from '../components/checkbox'
+import { RadioAdapter } from '../components/radio'
+import { Stack, Box, RadioGroup, CheckboxGroup } from '@chakra-ui/core'
 import { useStateValue } from '../utils/state'
-import { FormLabel } from '../components/FormLabel'
-import { ConditionalForm } from '../components/container'
 import { FormArrayControl } from '../components/FormArrayControl'
-import { Field as ConditionalField } from '../components/Field'
-
-const Control = ({ name, ...rest }) => {
-  const {
-    meta: { error, touched },
-  } = useField(name, { subscription: { touched: true, error: true } })
-  return <FormControl {...rest} isInvalid={error && touched} />
-}
-
-const CheckboxArrayControl = ({ name, value, defaultIsChecked, children }) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'checkbox', // important for RFF to manage the checked prop
-    value, // important for RFF to manage list of strings
-    defaultIsChecked,
-  })
-
-  return (
-    <Checkbox {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Checkbox>
-  )
-}
-
-const RadioButtonArrayControl = ({
-  name,
-  value,
-  defaultIsChecked,
-  children,
-}) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'radio',
-    value,
-    defaultIsChecked,
-  })
-
-  return (
-    <Radio {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Radio>
-  )
-}
+import { Field } from '../components/Field'
+import { TextArea } from '../components/text-area'
+import { TextInput } from '../components/TextInput'
 
 const validate = () => {
   return {}
@@ -178,98 +124,68 @@ export const HowDidItStartForm = props => {
               label={<Trans id="howDidTheyReachYou.question" />}
               helperText={<Trans id="howDidTheyReachYou.reminder" />}
             >
-              <CheckboxGroup spacing={4}>
-                {questionsList.map(question => {
-                  return (
-                    <Box key={question.channel}>
-                      <CheckboxArrayControl
-                        name="howDidTheyReachYou"
-                        value={question.channel}
-                        isChecked={howdiditstart.howDidTheyReachYou.includes(
-                          question.channel,
-                        )}
-                      >
-                        {i18n._(question.channel)}
-                        <ConditionalField
+              {/** All questions have conditional fields. It makes sense to use the map function */}
+              {questionsList.map(question => {
+                return (
+                  <React.Fragment key={question.channel}>
+                    <CheckboxAdapter
+                      name="howDidTheyReachYou"
+                      value={question.channel}
+                      isChecked={howdiditstart.howDidTheyReachYou.includes(
+                        question.channel,
+                      )}
+                      conditionalField={
+                        <Field
                           name={question.name}
                           label={<Trans id={question.label} />}
                           helperText={<Trans id={question.hint} />}
-                        >
-                          <TextArea
-                            name={props.input.name}
-                            value={props.input.value}
-                            onChange={props.input.onChange}
-                          />
-                        </ConditionalField>
-                      </CheckboxArrayControl>
-                      {values.howDidTheyReachYou.includes(question.channel) && (
-                        <ConditionalForm>
-                          <Field name={question.name}>
-                            {props => (
-                              <FormControl>
-                                <FormLabel htmlFor={question.name}>
-                                  <Trans id={question.label} />
-                                </FormLabel>
-                                <FormHelperText>
-                                  <Trans id={question.hint} />
-                                </FormHelperText>
-                                <TextArea
-                                  id={question.hint}
-                                  name={props.input.name}
-                                  value={props.input.value}
-                                  onChange={props.input.onChange}
-                                />
-                              </FormControl>
-                            )}
-                          </Field>
-                        </ConditionalForm>
-                      )}
-                    </Box>
-                  )
-                })}
-              </CheckboxGroup>
+                          component={TextArea}
+                        />
+                      }
+                    >
+                      {i18n._(question.channel)}
+                    </CheckboxAdapter>
+                  </React.Fragment>
+                )
+              })}
             </FormArrayControl>
 
             <FormArrayControl
               name="whenDidItStart"
               label={<Trans id="whenDidItStart.label" />}
             >
-              <RadioGroup spacing={4}>
-                {whenDidItStart.map(key => {
-                  return (
-                    <React.Fragment key={key}>
-                      <RadioAdapter
-                        name="whenDidItStart"
-                        value={key}
-                        isChecked={timeline.whenDidItStart.includes(key)}
-                      >
-                        {i18n._(key)}
-                      </RadioAdapter>
-                    </React.Fragment>
-                  )
-                })}
-              </RadioGroup>
+              {whenDidItStart.map(key => {
+                return (
+                  <React.Fragment key={key}>
+                    <RadioAdapter
+                      name="whenDidItStart"
+                      value={key}
+                      isChecked={timeline.whenDidItStart.includes(key)}
+                    >
+                      {i18n._(key)}
+                    </RadioAdapter>
+                  </React.Fragment>
+                )
+              })}
             </FormArrayControl>
 
             <FormArrayControl
               name="howManyTimes"
               label={<Trans id="howManyTimes.label" />}
             >
-              <RadioGroup spacing={4}>
-                {howManyTimes.map(key => {
-                  return (
-                    <Box key={key}>
-                      <RadioAdapter
-                        name="howManyTimes"
-                        value={key}
-                        isChecked={recurrenceCheck.howManyTimes.includes(key)}
-                      >
-                        {i18n._(key)}
-                      </RadioAdapter>
-                    </Box>
-                  )
-                })}
-              </RadioGroup>
+              {howManyTimes.map(key => {
+                return (
+                  <Box key={key}>
+                    <RadioAdapter
+                      name="howManyTimes"
+                      value={key}
+                      isChecked={recurrenceCheck.howManyTimes.includes(key)}
+                    >
+                      {i18n._(key)}
+                    </RadioAdapter>
+                  </Box>
+                )
+              })}
             </FormArrayControl>
             <NextAndCancelButtons
               next={<Trans id="howDidItStartPage.nextPage" />}

From 984bb3ff860316ac2268bb5a158ae563e7cf984c Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Tue, 11 Feb 2020 13:40:28 -0500
Subject: [PATCH 04/22] lint and passing tests. Not all new components have
 tests

---
 .../components/Field/__tests__/Field.test.js  | 24 ++++++++++++++++++
 f2/src/components/Field/index.js              | 10 +++++---
 f2/src/components/checkbox/index.js           |  2 +-
 f2/src/components/container/index.js          | 25 +++++++++++--------
 f2/src/forms/HowDidItStartForm.js             |  3 +--
 5 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/f2/src/components/Field/__tests__/Field.test.js b/f2/src/components/Field/__tests__/Field.test.js
index e69de29bb..32f7bcacc 100644
--- a/f2/src/components/Field/__tests__/Field.test.js
+++ b/f2/src/components/Field/__tests__/Field.test.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { ThemeProvider } from 'emotion-theming'
+import canada from '../../../theme/canada'
+import { render, cleanup } from '@testing-library/react'
+import { Field } from '../'
+import { Form } from 'react-final-form'
+
+describe('<Field />', () => {
+  afterEach(cleanup)
+
+  it('renders', () => {
+    const submitMock = jest.fn()
+
+    render(
+      <ThemeProvider theme={canada}>
+        <Form
+          initialValues=""
+          onSubmit={submitMock}
+          render={() => <Field name="name" label="foo" helperText="help" />}
+        />
+      </ThemeProvider>,
+    )
+  })
+})
diff --git a/f2/src/components/Field/index.js b/f2/src/components/Field/index.js
index fc04089ce..2f1e83521 100644
--- a/f2/src/components/Field/index.js
+++ b/f2/src/components/Field/index.js
@@ -6,6 +6,7 @@ import { FormHelperText } from '../FormHelperText'
 import { FormLabel } from '../FormLabel'
 import { Field as FieldAdapter } from 'react-final-form'
 import { UniqueID } from '../unique-id'
+import { Input } from '../input'
 
 export const Field = ({ name, label, helperText, errorMessage, component }) => {
   return (
@@ -25,11 +26,14 @@ export const Field = ({ name, label, helperText, errorMessage, component }) => {
     </UniqueID>
   )
 }
+Field.defaultProps = {
+  component: Input,
+}
 
 Field.propTypes = {
   children: PropTypes.any,
   name: PropTypes.string,
-  label: PropTypes.object,
-  helperText: PropTypes.object,
-  errorMessage: PropTypes.object,
+  label: PropTypes.any,
+  helperText: PropTypes.any,
+  errorMessage: PropTypes.any,
 }
diff --git a/f2/src/components/checkbox/index.js b/f2/src/components/checkbox/index.js
index 4e33743e9..326f98462 100644
--- a/f2/src/components/checkbox/index.js
+++ b/f2/src/components/checkbox/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 import { Text } from '../text'
 import { UniqueID } from '../unique-id'
-import { Box, VisuallyHidden, ControlBox, Icon, Flex } from '@chakra-ui/core'
+import { VisuallyHidden, ControlBox, Icon, Flex } from '@chakra-ui/core'
 import { useField } from 'react-final-form'
 import { ConditionalForm } from '../container'
 
diff --git a/f2/src/components/container/index.js b/f2/src/components/container/index.js
index 9bf10b0a0..53593e847 100644
--- a/f2/src/components/container/index.js
+++ b/f2/src/components/container/index.js
@@ -1,4 +1,5 @@
 /** @jsx jsx **/
+import React from 'react'
 import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 
@@ -18,16 +19,20 @@ export const InfoCard = props => (
 )
 
 export const ConditionalForm = ({ ...props }) => (
-
-  <Box
-    borderLeftWidth={1}
-    borderLeftColor="gray.400"
-    mt={1}
-    ml={5}
-    pl={6}
-
-    {...props}
-  >{props.children}</Box>
+  <React.Fragment>
+    {props.children && (
+      <Box
+        borderLeftWidth={1}
+        borderLeftColor="gray.400"
+        mt={1}
+        ml={5}
+        pl={6}
+        {...props}
+      >
+        {props.children}
+      </Box>
+    )}
+  </React.Fragment>
 )
 
 ConditionalForm.propTypes = {
diff --git a/f2/src/forms/HowDidItStartForm.js b/f2/src/forms/HowDidItStartForm.js
index 0d8cd2036..f658970ce 100644
--- a/f2/src/forms/HowDidItStartForm.js
+++ b/f2/src/forms/HowDidItStartForm.js
@@ -6,12 +6,11 @@ import { Form } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
 import { CheckboxAdapter } from '../components/checkbox'
 import { RadioAdapter } from '../components/radio'
-import { Stack, Box, RadioGroup, CheckboxGroup } from '@chakra-ui/core'
+import { Stack, Box } from '@chakra-ui/core'
 import { useStateValue } from '../utils/state'
 import { FormArrayControl } from '../components/FormArrayControl'
 import { Field } from '../components/Field'
 import { TextArea } from '../components/text-area'
-import { TextInput } from '../components/TextInput'
 
 const validate = () => {
   return {}

From aa7c4962898a194c419d0f6cb916174cae5c33eb Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Tue, 11 Feb 2020 14:04:52 -0500
Subject: [PATCH 05/22] added a test for FormArrayControl

---
 .../__tests__/FormArrayControl.test.js        | 36 +++++++++++++++++++
 f2/src/components/FormArrayControl/index.js   |  6 ++--
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 f2/src/components/FormArrayControl/__tests__/FormArrayControl.test.js

diff --git a/f2/src/components/FormArrayControl/__tests__/FormArrayControl.test.js b/f2/src/components/FormArrayControl/__tests__/FormArrayControl.test.js
new file mode 100644
index 000000000..82db7c32e
--- /dev/null
+++ b/f2/src/components/FormArrayControl/__tests__/FormArrayControl.test.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { ThemeProvider } from 'emotion-theming'
+import canada from '../../../theme/canada'
+import { render, cleanup } from '@testing-library/react'
+import { FormArrayControl } from '../'
+import { Form } from 'react-final-form'
+
+describe('<FormArrayControl />', () => {
+  afterEach(cleanup)
+
+  it('renders children', () => {
+    const submitMock = jest.fn()
+
+    const { getAllByText } = render(
+      <ThemeProvider theme={canada}>
+        <Form
+          initialValues=""
+          onSubmit={submitMock}
+          render={() => (
+            <FormArrayControl name="foo" label="bar" helperText="help">
+              <p>all</p>
+            </FormArrayControl>
+          )}
+        />
+      </ThemeProvider>,
+    )
+
+    const label = getAllByText(/bar/)
+    const help = getAllByText(/help/)
+    const test = getAllByText(/all/)
+
+    expect(label).toHaveLength(1)
+    expect(help).toHaveLength(1)
+    expect(test).toHaveLength(1)
+  })
+})
diff --git a/f2/src/components/FormArrayControl/index.js b/f2/src/components/FormArrayControl/index.js
index dcfb470af..e412c578c 100644
--- a/f2/src/components/FormArrayControl/index.js
+++ b/f2/src/components/FormArrayControl/index.js
@@ -45,9 +45,9 @@ export const FormArrayControl = ({
 }
 
 FormArrayControl.propTypes = {
-  label: PropTypes.object,
-  helperText: PropTypes.object,
-  errorMessage: PropTypes.object,
+  label: PropTypes.any,
+  helperText: PropTypes.any,
+  errorMessage: PropTypes.any,
   name: PropTypes.string,
   children: PropTypes.any,
 }

From 9747eba749e108e95da9bcc8b4bb146845f623a1 Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Wed, 12 Feb 2020 12:04:17 -0500
Subject: [PATCH 06/22] cleaned up inputs, they also work properly now.

---
 f2/src/components/Field/index.js     |  2 +-
 f2/src/components/input/index.js     |  6 +-----
 f2/src/components/text-area/index.js | 10 ++--------
 3 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/f2/src/components/Field/index.js b/f2/src/components/Field/index.js
index 2f1e83521..db1568536 100644
--- a/f2/src/components/Field/index.js
+++ b/f2/src/components/Field/index.js
@@ -19,7 +19,7 @@ export const Field = ({ name, label, helperText, errorMessage, component }) => {
             </FormLabel>
             <FormHelperText>{helperText}</FormHelperText>
             <FormErrorMessage>{errorMessage}</FormErrorMessage>
-            <FieldAdapter id={name} component={component} />
+            <FieldAdapter name={name} component={component} />
           </FormControl>
         )
       }}
diff --git a/f2/src/components/input/index.js b/f2/src/components/input/index.js
index 0d58c4c3e..baa2b8bf3 100644
--- a/f2/src/components/input/index.js
+++ b/f2/src/components/input/index.js
@@ -22,10 +22,6 @@ export const Input = props => (
       borderColor: 'black',
       border: '3px',
     }}
-    {...props}
+    {...props.input}
   />
 )
-
-Input.propTypes = {
-  children: PropTypes.any,
-}
diff --git a/f2/src/components/text-area/index.js b/f2/src/components/text-area/index.js
index caed08868..949617cb7 100644
--- a/f2/src/components/text-area/index.js
+++ b/f2/src/components/text-area/index.js
@@ -21,12 +21,6 @@ export const TextArea = props => (
       borderColor: 'black',
       border: '3px',
     }}
-    {...props}
-  >
-    {props.children}
-  </ChakraTextarea>
+    {...props.input}
+  />
 )
-
-TextArea.propTypes = {
-  children: PropTypes.any,
-}

From c027e390e819f438d73470be021d76abda47657d Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Wed, 12 Feb 2020 12:42:31 -0500
Subject: [PATCH 07/22] tweaked input and text-area to accept attributes from
 react-final-form

---
 f2/src/components/input/index.js     | 1 -
 f2/src/components/text-area/index.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/f2/src/components/input/index.js b/f2/src/components/input/index.js
index baa2b8bf3..74bbcd54e 100644
--- a/f2/src/components/input/index.js
+++ b/f2/src/components/input/index.js
@@ -1,6 +1,5 @@
 /** @jsx jsx **/
 import { jsx } from '@emotion/core'
-import PropTypes from 'prop-types'
 import { Input as ChakraInput } from '@chakra-ui/core'
 
 export const Input = props => (
diff --git a/f2/src/components/text-area/index.js b/f2/src/components/text-area/index.js
index 949617cb7..1d0876233 100644
--- a/f2/src/components/text-area/index.js
+++ b/f2/src/components/text-area/index.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Textarea as ChakraTextarea } from '@chakra-ui/core'
 
 export const TextArea = props => (

From 555f53e11bd06088d0f953bd4a4a779a7822b456 Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Wed, 12 Feb 2020 12:45:41 -0500
Subject: [PATCH 08/22] passing tests

---
 f2/src/components/input/index.js     | 1 +
 f2/src/components/text-area/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/f2/src/components/input/index.js b/f2/src/components/input/index.js
index 74bbcd54e..6c204c426 100644
--- a/f2/src/components/input/index.js
+++ b/f2/src/components/input/index.js
@@ -22,5 +22,6 @@ export const Input = props => (
       border: '3px',
     }}
     {...props.input}
+    {...props}
   />
 )
diff --git a/f2/src/components/text-area/index.js b/f2/src/components/text-area/index.js
index 1d0876233..95aeeba6e 100644
--- a/f2/src/components/text-area/index.js
+++ b/f2/src/components/text-area/index.js
@@ -21,5 +21,6 @@ export const TextArea = props => (
       border: '3px',
     }}
     {...props.input}
+    {...props}
   />
 )

From 0c3aca67770c8ac5af6cea62e4f3b8607310e2db Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Wed, 12 Feb 2020 12:54:11 -0500
Subject: [PATCH 09/22] added condition to prevent rendering of node if
 conditional field doesn't exist

---
 f2/src/components/checkbox/index.js | 4 +++-
 f2/src/components/radio/index.js    | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/f2/src/components/checkbox/index.js b/f2/src/components/checkbox/index.js
index 326f98462..12916ba61 100644
--- a/f2/src/components/checkbox/index.js
+++ b/f2/src/components/checkbox/index.js
@@ -37,6 +37,8 @@ export const CheckboxAdapter = ({
 }
 
 export const Checkbox = ({ input, label, isChecked, ...props }) => {
+  const isCheckedAndHasCondition = isChecked && props.conditionalField
+
   return (
     <UniqueID>
       {id => {
@@ -80,7 +82,7 @@ export const Checkbox = ({ input, label, isChecked, ...props }) => {
               </Text>
             </Flex>
 
-            {isChecked && (
+            {isCheckedAndHasCondition && (
               <ConditionalForm>{props.conditionalField}</ConditionalForm>
             )}
           </React.Fragment>
diff --git a/f2/src/components/radio/index.js b/f2/src/components/radio/index.js
index 9cb805eb8..d26ed78f9 100644
--- a/f2/src/components/radio/index.js
+++ b/f2/src/components/radio/index.js
@@ -32,6 +32,8 @@ export const Radio = ({
   conditionalField,
   ...props
 }) => {
+  const isCheckedAndHasCondition = isChecked && props.conditionalField
+
   return (
     <UniqueID>
       {id => {
@@ -76,7 +78,9 @@ export const Radio = ({
                 {props.children}
               </Text>
             </Flex>
-            {isChecked && <ConditionalForm>{conditionalField}</ConditionalForm>}
+            {isCheckedAndHasCondition && (
+              <ConditionalForm>{conditionalField}</ConditionalForm>
+            )}
           </React.Fragment>
         )
       }}

From 572b87bbbc7f5c6b151cc26dd32766a2534dc236 Mon Sep 17 00:00:00 2001
From: Philippe Caron <amazingphilippe@gmail.com>
Date: Thu, 13 Feb 2020 10:17:35 -0500
Subject: [PATCH 10/22] some tweaks to ensure correct labelling of fields

---
 f2/src/components/Field/index.js    | 2 +-
 f2/src/components/checkbox/index.js | 4 ++--
 f2/src/components/radio/index.js    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/f2/src/components/Field/index.js b/f2/src/components/Field/index.js
index db1568536..5fd7f5239 100644
--- a/f2/src/components/Field/index.js
+++ b/f2/src/components/Field/index.js
@@ -19,7 +19,7 @@ export const Field = ({ name, label, helperText, errorMessage, component }) => {
             </FormLabel>
             <FormHelperText>{helperText}</FormHelperText>
             <FormErrorMessage>{errorMessage}</FormErrorMessage>
-            <FieldAdapter name={name} component={component} />
+            <FieldAdapter name={name} id={name} component={component} />
           </FormControl>
         )
       }}
diff --git a/f2/src/components/checkbox/index.js b/f2/src/components/checkbox/index.js
index 12916ba61..3fdb3b2cb 100644
--- a/f2/src/components/checkbox/index.js
+++ b/f2/src/components/checkbox/index.js
@@ -44,12 +44,12 @@ export const Checkbox = ({ input, label, isChecked, ...props }) => {
       {id => {
         return (
           <React.Fragment>
-            <Flex as="label" {...props} id={id} align="center">
+            <Flex as="label" id={id} align="center">
               <VisuallyHidden
-                {...input}
                 as="input"
                 type="checkbox"
                 defaultChecked={isChecked ? 'true' : ''}
+                {...input}
               />
 
               <ControlBox
diff --git a/f2/src/components/radio/index.js b/f2/src/components/radio/index.js
index d26ed78f9..117d84217 100644
--- a/f2/src/components/radio/index.js
+++ b/f2/src/components/radio/index.js
@@ -41,10 +41,10 @@ export const Radio = ({
           <React.Fragment>
             <Flex as="label" id={id} align="center">
               <VisuallyHidden
-                {...input}
                 as="input"
                 type="radio"
                 defaultChecked={isChecked ? 'true' : ''}
+                {...input}
               />
 
               <ControlBox

From 5bcaa44e4070f0776203f265c8d223f3d034d61d Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Mon, 17 Feb 2020 19:34:29 -0500
Subject: [PATCH 11/22] #1312-  Added the privacy consent checkbox fixes

---
 f2/src/forms/PrivacyConsentInfoForm.js | 70 +++++++++++---------------
 1 file changed, 28 insertions(+), 42 deletions(-)

diff --git a/f2/src/forms/PrivacyConsentInfoForm.js b/f2/src/forms/PrivacyConsentInfoForm.js
index ec09a12e4..27c577148 100644
--- a/f2/src/forms/PrivacyConsentInfoForm.js
+++ b/f2/src/forms/PrivacyConsentInfoForm.js
@@ -4,9 +4,11 @@ import { useLingui } from '@lingui/react'
 import { Trans } from '@lingui/macro'
 import { Form, useField } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
-import { Checkbox } from '../components/checkbox'
-import { FormControl, Stack, Box, Alert, AlertIcon } from '@chakra-ui/core'
+import { FormControl, Stack, Alert, AlertIcon } from '@chakra-ui/core'
 import { useStateValue } from '../utils/state'
+import { CheckboxAdapter } from '../components/checkbox'
+import { FormArrayControl } from '../components/FormArrayControl'
+
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -15,23 +17,6 @@ const Control = ({ name, ...rest }) => {
   return <FormControl {...rest} isInvalid={error && touched} />
 }
 
-const CheckboxArrayControl = ({ name, value, defaultIsChecked, children }) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'checkbox', // important for RFF to manage the checked prop
-    value, // important for RFF to manage list of strings
-    defaultIsChecked,
-  })
-
-  return (
-    <Checkbox {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Checkbox>
-  )
-}
-
 const validate = () => {
   return {}
 }
@@ -54,6 +39,7 @@ export const PrivacyConsentInfoForm = props => {
           <Trans id="privacyConsentInfoForm.yes" />
         </div>
       ) : null}
+
       <Form
         initialValues={whetherConsent}
         onSubmit={values => {
@@ -71,29 +57,29 @@ export const PrivacyConsentInfoForm = props => {
             shouldWrapChildren
             spacing={6}
           >
-            <Control as="fieldset" name="consentOptions">
-              <Stack spacing={4} shouldWrapChildren>
-                {consentOptions.map(key => {
-                  return (
-                    <Box key={key}>
-                      <CheckboxArrayControl
-                        name="consentOptions"
-                        value={key}
-                        isChecked={whetherConsent.consentOptions.includes(key)}
-                      >
-                        {i18n._(key)}
-                      </CheckboxArrayControl>
-                    </Box>
-                  )
-                })}
-                {showWarning ? (
-                  <Alert status="warning">
-                    <AlertIcon />
-                    <Trans id="privacyConsentInfoForm.warning" />
-                  </Alert>
-                ) : null}
-              </Stack>
-            </Control>
+            <FormArrayControl
+              name="whenDidItStart"
+              label={<Trans id="whenDidItStart.label" />}
+              >
+              {consentOptions.map(key => {
+                return (
+                <React.Fragment key={key}>
+                  <CheckboxAdapter
+                    name="whenDidItStart"
+                    value={key}
+                    isChecked={whetherConsent.consentOptions.includes(key)}                  >
+                    {i18n._(key)}
+                  </CheckboxAdapter>
+                </React.Fragment>
+              )
+              })}
+              {showWarning ? (
+                <Alert status="warning">
+                  <AlertIcon />
+                  <Trans id="privacyConsentInfoForm.warning" />
+                </Alert>
+              ) : null}
+              </FormArrayControl>
 
             <NextAndCancelButtons
               next={<Trans id="privacyConsentInfoForm.nextPage" />}

From ca032573e6ac5097e2a45c7181e98f21d3696bba Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Mon, 17 Feb 2020 20:04:34 -0500
Subject: [PATCH 12/22] #1312-  Added whatWasAffected checkbox fixes

---
 f2/src/forms/WhatWasAffectedForm.js | 92 +++++++++++------------------
 1 file changed, 33 insertions(+), 59 deletions(-)

diff --git a/f2/src/forms/WhatWasAffectedForm.js b/f2/src/forms/WhatWasAffectedForm.js
index 70b438c70..8d8699867 100644
--- a/f2/src/forms/WhatWasAffectedForm.js
+++ b/f2/src/forms/WhatWasAffectedForm.js
@@ -10,8 +10,9 @@ import { FormHelperText } from '../components/FormHelperText'
 import { useStateValue } from '../utils/state'
 import { FormLabel } from '../components/FormLabel'
 import { P } from '../components/paragraph'
-import { ConditionalForm } from '../components/container'
-import { TextInput } from '../components/TextInput'
+import { CheckboxAdapter } from '../components/checkbox'
+import { FormArrayControl } from '../components/FormArrayControl'
+
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -91,70 +92,43 @@ export const WhatWasAffectedForm = props => {
             spacing={6}
           >
             <Control as="fieldset" name="affectedOptions">
-              <FormLabel as="legend" htmlFor="affectedOptions" mb={2}>
-                <Trans id="whatWasAffectedForm.optionsTitle" />
-              </FormLabel>
-              <FormHelperText>
-                <Trans id="whatWasAffectedForm.optionsHelpText" />
-              </FormHelperText>
-
-              <Stack spacing={4} shouldWrapChildren>
+              <FormArrayControl
+                name="affectedOptions"
+                label={<Trans id="whatWasAffectedForm.optionsTitle" />}
+                helperText={<Trans id="whatWasAffectedForm.optionsHelpText" />}
+                >
                 {affectedOptions.map(key => {
                   return (
-                    <Box key={key}>
-                      <CheckboxArrayControl
+                    <React.Fragment key={key}>
+                      <CheckboxAdapter
                         name="affectedOptions"
                         value={key}
-                        isChecked={whatWasAffected.affectedOptions.includes(
-                          key,
-                        )}
+                        isChecked={whatWasAffected.affectedOptions.includes(key)}
                       >
-                        {i18n._(key)}
-                      </CheckboxArrayControl>
-                      {key === 'whatWasAffectedForm.other' &&
-                        values.affectedOptions.includes(
-                          'whatWasAffectedForm.other',
-                        ) && (
-                          <ConditionalForm>
-                            <Field name="optionOther">
-                              {props => (
-                                <FormControl>
-                                  <FormLabel htmlFor={key}></FormLabel>
-                                  <TextInput
-                                    id="optionOther"
-                                    name={props.input.name}
-                                    value={props.input.value}
-                                    onChange={props.input.onChange}
-                                  />
-                                </FormControl>
-                              )}
-                            </Field>
-                          </ConditionalForm>
-                        )}
-                    </Box>
+                      {i18n._(key)}
+                      </CheckboxAdapter>
+                    </React.Fragment>
                   )
                 })}
-              </Stack>
-            </Control>
-
-            {showWarning ? (
-              <Control>
-                <Alert status="warning">
-                  <AlertIcon />
-                  <Trans id="whatWasAffectedForm.warning" />
-                </Alert>
-              </Control>
-            ) : null}
-
-            <P>
-              <Trans id="whatWasAffectedForm.expectations" />
-            </P>
-            <NextAndCancelButtons
-              next={<Trans id="whatWasAffectedForm.nextPage" />}
-              button={<Trans id="whatWasAffectedForm.nextButton" />}
-            />
-          </Stack>
-        )}
+                {showWarning ? (
+                    <Control>
+                      <Alert status="warning">
+                        <AlertIcon />
+                        <Trans id="whatWasAffectedForm.warning" />
+                      </Alert>
+                    </Control>
+                ) : null}
+            </FormArrayControl>
+          </Control>
+          <P>
+            <Trans id="whatWasAffectedForm.expectations" />
+          </P>
+          <NextAndCancelButtons
+            next={<Trans id="whatWasAffectedForm.nextPage" />}
+            button={<Trans id="whatWasAffectedForm.nextButton" />}
+          />
+        </Stack>
+      )}
       />
     </React.Fragment>
   )

From 7c2fdd51d34f9d86ade39ef246a91912e9b11a45 Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Mon, 17 Feb 2020 20:09:58 -0500
Subject: [PATCH 13/22] cleanups

---
 f2/src/forms/PrivacyConsentInfoForm.js |  9 ++++-----
 f2/src/forms/WhatWasAffectedForm.js    | 24 ++----------------------
 2 files changed, 6 insertions(+), 27 deletions(-)

diff --git a/f2/src/forms/PrivacyConsentInfoForm.js b/f2/src/forms/PrivacyConsentInfoForm.js
index 27c577148..42a73c0f2 100644
--- a/f2/src/forms/PrivacyConsentInfoForm.js
+++ b/f2/src/forms/PrivacyConsentInfoForm.js
@@ -58,14 +58,13 @@ export const PrivacyConsentInfoForm = props => {
             spacing={6}
           >
             <FormArrayControl
-              name="whenDidItStart"
-              label={<Trans id="whenDidItStart.label" />}
-              >
+              name="consentOptions"
+            >
               {consentOptions.map(key => {
                 return (
                 <React.Fragment key={key}>
                   <CheckboxAdapter
-                    name="whenDidItStart"
+                    name="consentOptions"
                     value={key}
                     isChecked={whetherConsent.consentOptions.includes(key)}                  >
                     {i18n._(key)}
@@ -79,7 +78,7 @@ export const PrivacyConsentInfoForm = props => {
                   <Trans id="privacyConsentInfoForm.warning" />
                 </Alert>
               ) : null}
-              </FormArrayControl>
+            </FormArrayControl>
 
             <NextAndCancelButtons
               next={<Trans id="privacyConsentInfoForm.nextPage" />}
diff --git a/f2/src/forms/WhatWasAffectedForm.js b/f2/src/forms/WhatWasAffectedForm.js
index 8d8699867..6f51d3a48 100644
--- a/f2/src/forms/WhatWasAffectedForm.js
+++ b/f2/src/forms/WhatWasAffectedForm.js
@@ -2,13 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useLingui } from '@lingui/react'
 import { Trans } from '@lingui/macro'
-import { Form, useField, Field } from 'react-final-form'
+import { Form, useField } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
-import { Checkbox } from '../components/checkbox'
-import { FormControl, Stack, Box, Alert, AlertIcon } from '@chakra-ui/core'
-import { FormHelperText } from '../components/FormHelperText'
+import { FormControl, Stack, Alert, AlertIcon } from '@chakra-ui/core'
 import { useStateValue } from '../utils/state'
-import { FormLabel } from '../components/FormLabel'
 import { P } from '../components/paragraph'
 import { CheckboxAdapter } from '../components/checkbox'
 import { FormArrayControl } from '../components/FormArrayControl'
@@ -21,23 +18,6 @@ const Control = ({ name, ...rest }) => {
   return <FormControl {...rest} isInvalid={error && touched} />
 }
 
-const CheckboxArrayControl = ({ name, value, defaultIsChecked, children }) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'checkbox', // important for RFF to manage the checked prop
-    value, // important for RFF to manage list of strings
-    defaultIsChecked,
-  })
-
-  return (
-    <Checkbox {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Checkbox>
-  )
-}
-
 const validate = () => {
   return {}
 }

From e0315804ba7c3417a2d8aa77267a69ced4aa7b31 Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Mon, 17 Feb 2020 20:38:33 -0500
Subject: [PATCH 14/22] Added the money lost checkbox fixes

---
 f2/src/forms/MoneyLostInfoForm.js | 29 ++++++++---------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/f2/src/forms/MoneyLostInfoForm.js b/f2/src/forms/MoneyLostInfoForm.js
index f3b2ee024..13eb76e8d 100644
--- a/f2/src/forms/MoneyLostInfoForm.js
+++ b/f2/src/forms/MoneyLostInfoForm.js
@@ -12,8 +12,9 @@ import { FormHelperText } from '../components/FormHelperText'
 import { FormLabel } from '../components/FormLabel'
 import { TextArea } from '../components/text-area'
 import { useStateValue } from '../utils/state'
-import { Checkbox } from '../components/checkbox'
 import { ConditionalForm } from '../components/container'
+import { CheckboxAdapter } from '../components/checkbox'
+
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -22,23 +23,6 @@ const Control = ({ name, ...rest }) => {
   return <FormControl {...rest} isInvalid={error && touched} />
 }
 
-const CheckboxArrayControl = ({ name, value, defaultIsChecked, children }) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'checkbox', // important for RFF to manage the checked prop
-    value, // important for RFF to manage list of strings
-    defaultIsChecked,
-  })
-
-  return (
-    <Checkbox {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Checkbox>
-  )
-}
-
 export const MoneyLostInfoForm = props => {
   const { i18n } = useLingui()
   const [data] = useStateValue()
@@ -125,9 +109,12 @@ export const MoneyLostInfoForm = props => {
                 {methodsOfPayment.map(key => {
                   return (
                     <Box key={key}>
-                      <CheckboxArrayControl name="methodPayment" value={key}>
-                        {i18n._(key)}
-                      </CheckboxArrayControl>
+                      <CheckboxAdapter
+                        name="methodPayment"
+                        value={key}
+                      >
+                      {i18n._(key)}
+                      </CheckboxAdapter>
                       {key === 'methodPayment.other' &&
                         values.methodPayment.includes(
                           'methodPayment.other',

From 5e9cadac5011b08edfc158808497295bec8a9d27 Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Mon, 17 Feb 2020 20:53:34 -0500
Subject: [PATCH 15/22] Added the missing UI container

---
 f2/src/forms/PrivacyConsentInfoForm.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/f2/src/forms/PrivacyConsentInfoForm.js b/f2/src/forms/PrivacyConsentInfoForm.js
index 42a73c0f2..95f213224 100644
--- a/f2/src/forms/PrivacyConsentInfoForm.js
+++ b/f2/src/forms/PrivacyConsentInfoForm.js
@@ -57,6 +57,8 @@ export const PrivacyConsentInfoForm = props => {
             shouldWrapChildren
             spacing={6}
           >
+          <Control as="fieldset" name="consentOptions">
+            <Stack spacing={4} shouldWrapChildren>
             <FormArrayControl
               name="consentOptions"
             >
@@ -79,11 +81,12 @@ export const PrivacyConsentInfoForm = props => {
                 </Alert>
               ) : null}
             </FormArrayControl>
-
-            <NextAndCancelButtons
-              next={<Trans id="privacyConsentInfoForm.nextPage" />}
-              button={<Trans id="privacyConsentInfoForm.nextButton" />}
-            />
+           </Stack>
+          </Control>
+          <NextAndCancelButtons
+            next={<Trans id="privacyConsentInfoForm.nextPage" />}
+            button={<Trans id="privacyConsentInfoForm.nextButton" />}
+          />
           </Stack>
         )}
       />

From 7d857e8921a185d5b5af52b893dd2d283f649437 Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Tue, 18 Feb 2020 07:21:07 -0500
Subject: [PATCH 16/22] Added the information page checkbox fixes

---
 f2/src/forms/InformationForm.js | 127 ++++++++++++++------------------
 1 file changed, 57 insertions(+), 70 deletions(-)

diff --git a/f2/src/forms/InformationForm.js b/f2/src/forms/InformationForm.js
index e14fc24aa..577f5b38c 100644
--- a/f2/src/forms/InformationForm.js
+++ b/f2/src/forms/InformationForm.js
@@ -6,14 +6,15 @@ import { useLingui } from '@lingui/react'
 import { Trans } from '@lingui/macro'
 import { Form, Field, useField } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
-import { Checkbox } from '../components/checkbox'
 import { TextArea } from '../components/text-area'
-import { Stack, FormControl, Box } from '@chakra-ui/core'
+import { Stack, FormControl} from '@chakra-ui/core'
 import { FormHelperText } from '../components/FormHelperText'
 import { FormLabel } from '../components/FormLabel'
 import { useStateValue } from '../utils/state'
 import { ConditionalForm } from '../components/container'
 import { TextInput } from '../components/TextInput'
+import { CheckboxAdapter } from '../components/checkbox'
+import { FormArrayControl } from '../components/FormArrayControl'
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -22,23 +23,6 @@ const Control = ({ name, ...rest }) => {
   return <FormControl {...rest} isInvalid={error && touched} />
 }
 
-const CheckboxArrayControl = ({ name, value, defaultIsChecked, children }) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'checkbox', // important for RFF to manage the checked prop
-    value, // important for RFF to manage list of strings
-    defaultIsChecked,
-  })
-
-  return (
-    <Checkbox {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Checkbox>
-  )
-}
-
 export const InformationForm = props => {
   const { i18n } = useLingui()
   const [data] = useStateValue()
@@ -92,72 +76,74 @@ export const InformationForm = props => {
             spacing={6}
           >
             <Control as="fieldset" name="typeOfInfoReq">
-              <FormLabel as="legend" htmlFor="typeOfInfoReq" mb={2}>
-                <Trans id="informationPage.typeOfInfoReq" />
-              </FormLabel>
-              <FormHelperText>
-                <Trans id="informationPage.typeOfInfoReqExample" />
-              </FormHelperText>
               <Stack spacing={4} shouldWrapChildren>
+              <FormArrayControl
+                name="infoReqOther"
+                label={<Trans id="informationPage.typeOfInfoReq" />}
+                helperText={<Trans id="informationPage.typeOfInfoReqExample" />}
+                >
                 {typeOfInfoReq.map(key => {
                   return (
-                    <Box key={key}>
-                      <CheckboxArrayControl name="typeOfInfoReq" value={key}>
-                        {i18n._(key)}
-                      </CheckboxArrayControl>
+                    <React.Fragment key={key}>
+                      <CheckboxAdapter
+                        name="infoReqOther"
+                        value={key}
+                      >
+                      {i18n._(key)}
+                      </CheckboxAdapter>
                       {key === 'typeOfInfoReq.other' &&
-                        values.typeOfInfoReq.includes(
-                          'typeOfInfoReq.other',
-                        ) && (
-                          <ConditionalForm>
-                            <Field name="infoReqOther">
-                              {props => (
-                                <FormControl>
-                                  <FormLabel htmlFor={key}></FormLabel>
-                                  <TextInput
-                                    id="infoReqOther"
-                                    name={props.input.name}
-                                    value={props.input.value}
-                                    onChange={props.input.onChange}
-                                  />
-                                </FormControl>
-                              )}
-                            </Field>
-                          </ConditionalForm>
-                        )}
-                    </Box>
+                      values.typeOfInfoReq.includes(
+                        'typeOfInfoReq.other',
+                      ) && (
+                        <ConditionalForm>
+                          <Field name="infoReqOther">
+                            {props => (
+                              <FormControl>
+                                <FormLabel htmlFor={key}></FormLabel>
+                                <TextInput
+                                  id="infoReqOther"
+                                  name={props.input.name}
+                                  value={props.input.value}
+                                  onChange={props.input.onChange}
+                                />
+                              </FormControl>
+                            )}
+                          </Field>
+                        </ConditionalForm>
+                      )}
+                    </React.Fragment>
                   )
                 })}
+              </FormArrayControl>
               </Stack>
             </Control>
             <Control as="fieldset" name="typeOfInfoObtained">
-              <FormLabel as="legend" htmlFor="typeOfInfoObtained" mb={2}>
-                <Trans id="informationPage.typeOfInfoObtained" />
-              </FormLabel>
-              <FormHelperText>
-                <Trans id="informationPage.typeOfInfoObtainedExample" />
-              </FormHelperText>
               <Stack spacing={4} shouldWrapChildren>
-                {typeOfInfoObtained.map(key => {
-                  return (
-                    <Box key={key}>
-                      <CheckboxArrayControl
-                        name="typeOfInfoObtained"
-                        value={key}
-                      >
+                <FormArrayControl
+                  name="infoReqOther"
+                  label={<Trans id="informationPage.typeOfInfoObtained" />}
+                  helperText={<Trans id="informationPage.typeOfInfoObtainedExample" />}
+                  >
+                  {typeOfInfoObtained.map(key => {
+                    return (
+                      <React.Fragment key={key}>
+                        <CheckboxAdapter
+                          name="typeOfInfoObtained"
+                          value={key}
+                        >
                         {i18n._(key)}
-                      </CheckboxArrayControl>
-                      {key === 'typeOfInfoObtained.other' &&
-                        values.typeOfInfoObtained.includes(
+                        </CheckboxAdapter>
+                        {key === 'typeOfInfoObtained.other' &&
+                        values.typeOfInfoReq.includes(
                           'typeOfInfoObtained.other',
                         ) && (
                           <ConditionalForm>
-                            <Field name="infoObtainedOther">
+                            <Field name="typeOfInfoObtained">
                               {props => (
                                 <FormControl>
                                   <FormLabel htmlFor={key}></FormLabel>
                                   <TextInput
-                                    id="infoObtainedOther"
+                                    id="typeOfInfoObtained"
                                     name={props.input.name}
                                     value={props.input.value}
                                     onChange={props.input.onChange}
@@ -167,9 +153,10 @@ export const InformationForm = props => {
                             </Field>
                           </ConditionalForm>
                         )}
-                    </Box>
-                  )
-                })}
+                      </React.Fragment>
+                    )
+                  })}
+                </FormArrayControl>
               </Stack>
             </Control>
 

From 162fbe814ea55038f830f4a174bce1a703761c49 Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Tue, 18 Feb 2020 11:15:55 -0500
Subject: [PATCH 17/22] Added the conditional form for single field

---
 f2/src/forms/WhatWasAffectedForm.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/f2/src/forms/WhatWasAffectedForm.js b/f2/src/forms/WhatWasAffectedForm.js
index 6f51d3a48..4925f670b 100644
--- a/f2/src/forms/WhatWasAffectedForm.js
+++ b/f2/src/forms/WhatWasAffectedForm.js
@@ -9,6 +9,10 @@ import { useStateValue } from '../utils/state'
 import { P } from '../components/paragraph'
 import { CheckboxAdapter } from '../components/checkbox'
 import { FormArrayControl } from '../components/FormArrayControl'
+import { Field } from '../components/Field'
+import { FormLabel } from '../components/FormLabel'
+import { ConditionalForm } from '../components/container'
+import { TextInput } from '../components/TextInput'
 
 
 const Control = ({ name, ...rest }) => {
@@ -87,6 +91,26 @@ export const WhatWasAffectedForm = props => {
                       >
                       {i18n._(key)}
                       </CheckboxAdapter>
+                      {key === 'whatWasAffectedForm.other' &&
+                        values.affectedOptions.includes(
+                          'whatWasAffectedForm.other',
+                        ) && (
+                          <ConditionalForm>
+                            <Field name="optionOther">
+                              {props => (
+                                <FormControl>
+                                  <FormLabel htmlFor={key}></FormLabel>
+                                  <TextInput
+                                    id="optionOther"
+                                    name={props.input.name}
+                                    value={props.input.value}
+                                    onChange={props.input.onChange}
+                                  />
+                                </FormControl>
+                              )}
+                            </Field>
+                          </ConditionalForm>
+                        )}
                     </React.Fragment>
                   )
                 })}

From 21bd04be700531e336c6eea6390da672a2e07dbd Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Tue, 18 Feb 2020 13:23:16 -0500
Subject: [PATCH 18/22] Merge conflicts

---
 f2/src/forms/HowDidItStartForm.js   |  4 ++++
 f2/src/forms/InformationForm.js     | 32 ++++++++++++++++++++++++-----
 f2/src/forms/WhatWasAffectedForm.js |  2 ++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/f2/src/forms/HowDidItStartForm.js b/f2/src/forms/HowDidItStartForm.js
index f658970ce..3d40022fe 100644
--- a/f2/src/forms/HowDidItStartForm.js
+++ b/f2/src/forms/HowDidItStartForm.js
@@ -22,6 +22,10 @@ export const HowDidItStartForm = props => {
   const [data] = useStateValue()
   const howdiditstart = {
     howDidTheyReachYou: [],
+    application: '',
+    others: '',
+    whenDidItStart: '',
+    howManyTimes: '',
     ...data.formData.howdiditstart,
   }
   //TODO: Move this form data to some sort of a schema file instead?
diff --git a/f2/src/forms/InformationForm.js b/f2/src/forms/InformationForm.js
index 577f5b38c..664251c05 100644
--- a/f2/src/forms/InformationForm.js
+++ b/f2/src/forms/InformationForm.js
@@ -29,6 +29,7 @@ export const InformationForm = props => {
   const information = {
     typeOfInfoReq: [],
     typeOfInfoObtained: [],
+    infoObtainedOther: '',
     tellUsMore: '',
     ...data.formData.personalInformation,
   }
@@ -178,11 +179,32 @@ export const InformationForm = props => {
                 </FormControl>
               )}
             </Field>
-            <NextAndCancelButtons
-              next={<Trans id="informationPage.nextStep" />}
-              button={<Trans id="informationPage.nextButton" />}
-            />
-          </Stack>
+            <Alert status="success" backgroundColor="blue.100">
+              <AlertIcon name="info-outline" color="blue.800" />
+              <Trans id="informationPage.tip">
+                <A
+                  href={
+                  i18n.locale === 'en'
+                      ? 'https://www.consumer.equifax.ca/personal/'
+                      : 'https://www.consumer.equifax.ca/personnel/'
+                  }
+                  isExternal // Opens new tab
+                />
+                <A
+                  href={
+                    i18n.locale === 'en'
+                    ? 'https://www.transunion.ca/'
+                    : 'https://www.transunion.ca/fr'
+                  }
+                  isExternal // Opens new tab
+              />
+            </Trans>
+          </Alert>
+          <NextAndCancelButtons
+            next={<Trans id="informationPage.nextStep" />}
+            button={<Trans id="informationPage.nextButton" />}
+          />
+        </Stack>
         )}
       />
     </React.Fragment>
diff --git a/f2/src/forms/WhatWasAffectedForm.js b/f2/src/forms/WhatWasAffectedForm.js
index 4925f670b..124a10dff 100644
--- a/f2/src/forms/WhatWasAffectedForm.js
+++ b/f2/src/forms/WhatWasAffectedForm.js
@@ -41,6 +41,7 @@ export const WhatWasAffectedForm = props => {
   const whatWasAffected = {
     affectedOptions: [],
     ...data.formData.whatWasAffected,
+    optionOther: '',
   }
 
   const affectedOptions = whatWasAffectedPages.map(page => page.key)
@@ -55,6 +56,7 @@ export const WhatWasAffectedForm = props => {
           <Trans id="whatWasAffectedForm.devices" />
           <Trans id="whatWasAffectedForm.business_assets" />
           <Trans id="whatWasAffectedForm.other" />
+          <Trans id="whatWasAffectedForm.expectations" />
         </div>
       ) : null}
 

From 5d5d02a5c4e1bde18d6ab4cbffc7eb3fb047b15a Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Tue, 18 Feb 2020 13:41:29 -0500
Subject: [PATCH 19/22] Added missing dependencies

---
 f2/src/forms/InformationForm.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/f2/src/forms/InformationForm.js b/f2/src/forms/InformationForm.js
index 664251c05..3a5f69018 100644
--- a/f2/src/forms/InformationForm.js
+++ b/f2/src/forms/InformationForm.js
@@ -7,7 +7,7 @@ import { Trans } from '@lingui/macro'
 import { Form, Field, useField } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
 import { TextArea } from '../components/text-area'
-import { Stack, FormControl} from '@chakra-ui/core'
+import { Stack, FormControl, Alert, AlertIcon} from '@chakra-ui/core'
 import { FormHelperText } from '../components/FormHelperText'
 import { FormLabel } from '../components/FormLabel'
 import { useStateValue } from '../utils/state'
@@ -15,6 +15,7 @@ import { ConditionalForm } from '../components/container'
 import { TextInput } from '../components/TextInput'
 import { CheckboxAdapter } from '../components/checkbox'
 import { FormArrayControl } from '../components/FormArrayControl'
+import { A } from '../components/link'
 
 const Control = ({ name, ...rest }) => {
   const {

From 3e7af8e3fbd1939c453471621a612546aba5809a Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Tue, 18 Feb 2020 14:33:15 -0500
Subject: [PATCH 20/22] Updated feedback forms

---
 f2/src/forms/MidFeedbackForm.js | 60 ++++++++++++---------------------
 1 file changed, 22 insertions(+), 38 deletions(-)

diff --git a/f2/src/forms/MidFeedbackForm.js b/f2/src/forms/MidFeedbackForm.js
index 2601a832a..953433853 100644
--- a/f2/src/forms/MidFeedbackForm.js
+++ b/f2/src/forms/MidFeedbackForm.js
@@ -8,10 +8,11 @@ import { Form, Field, useField } from 'react-final-form'
 import { Stack, FormControl, Box } from '@chakra-ui/core'
 import { FormLabel } from '../components/FormLabel'
 import { FormHelperText } from '../components/FormHelperText'
-import { Checkbox } from '../components/checkbox'
 import { Button } from '../components/button'
 import { Layout } from '../components/layout'
 import { TextArea } from '../components/text-area'
+import { CheckboxAdapter } from '../components/checkbox'
+import { FormArrayControl } from '../components/FormArrayControl'
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -20,23 +21,6 @@ const Control = ({ name, ...rest }) => {
   return <FormControl {...rest} isInvalid={error && touched} />
 }
 
-const CheckboxArrayControl = ({ name, value, defaultIsChecked, children }) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'checkbox', // important for RFF to manage the checked prop
-    value, // important for RFF to manage list of strings
-    defaultIsChecked,
-  })
-
-  return (
-    <Checkbox {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Checkbox>
-  )
-}
-
 export const MidFeedbackForm = ({ onSubmit }) => {
   const { i18n } = useLingui()
 
@@ -94,27 +78,27 @@ export const MidFeedbackForm = ({ onSubmit }) => {
                   spacing={6}
                 >
                   <Control as="fieldset" name="midFeedback">
-                    <FormLabel as="legend" htmlFor="midFeedback" mb={2}>
-                      <Trans id="midFeedback.problem.label" />
-                    </FormLabel>
-                    <FormHelperText>
-                      <Trans id="midFeedback.problem.helperText" />
-                    </FormHelperText>
-                    <Stack spacing={4}>
-                      {midFeedback.map(key => {
-                        return (
-                          <Box key={key}>
-                            <CheckboxArrayControl
-                              name="midFeedback"
-                              value={key}
-                              isChecked={midFeedback.includes(key)}
-                            >
+                    <FormArrayControl
+                      name="midFeedback"
+                      label={<Trans id="midFeedback.problem.label" />}
+                      helperText={<Trans id="midFeedback.problem.helperText" />}
+                    >
+                      <Stack spacing={4}>
+                        {midFeedback.map(key => {
+                          return (
+                            <Box key={key}>
+                              <CheckboxAdapter
+                                name="midFeedback"
+                                value={key}
+                                isChecked={midFeedback.includes(key)}
+                              >
                               {i18n._(key)}
-                            </CheckboxArrayControl>
-                          </Box>
-                        )
-                      })}
-                    </Stack>
+                              </CheckboxAdapter>
+                            </Box>
+                          )
+                        })}
+                      </Stack>
+                    </FormArrayControl>
                   </Control>
 
                   <Field name="problemDescription">

From a8fb04a98d08f7c7c9eec2688c3bfc1b5ce9ea6b Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Tue, 18 Feb 2020 16:02:20 -0500
Subject: [PATCH 21/22] Added the final forms fixes

---
 f2/src/forms/FinalFeedbackForm.js | 78 +++++++++++++------------------
 1 file changed, 33 insertions(+), 45 deletions(-)

diff --git a/f2/src/forms/FinalFeedbackForm.js b/f2/src/forms/FinalFeedbackForm.js
index 9a535001c..5863328ee 100644
--- a/f2/src/forms/FinalFeedbackForm.js
+++ b/f2/src/forms/FinalFeedbackForm.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import { useLingui } from '@lingui/react'
 import { Trans } from '@lingui/macro'
 import { Form, Field, useField } from 'react-final-form'
-import { Radio } from '../components/radio'
 import {
   FormControl,
   Stack,
@@ -16,6 +15,9 @@ import { FormHelperText } from '../components/FormHelperText'
 import { TextArea } from '../components/text-area'
 import { FormLabel } from '../components/FormLabel'
 import { Button } from '../components/button'
+import { RadioAdapter } from '../components/radio'
+import { FormArrayControl } from '../components/FormArrayControl'
+
 
 const Control = ({ name, ...rest }) => {
   const {
@@ -24,28 +26,6 @@ const Control = ({ name, ...rest }) => {
   return <FormControl {...rest} isInvalid={error && touched} />
 }
 
-const RadioButtonArrayControl = ({
-  name,
-  value,
-  defaultIsChecked,
-  children,
-}) => {
-  const {
-    input: { checked, ...input },
-    meta: { error, touched },
-  } = useField(name, {
-    type: 'radio',
-    value,
-    defaultIsChecked,
-  })
-
-  return (
-    <Radio {...input} isChecked={checked} isInvalid={error && touched}>
-      {children}
-    </Radio>
-  )
-}
-
 const validate = () => {
   return {}
 }
@@ -110,42 +90,50 @@ export const FinalFeedbackForm = props => {
             spacing={12}
           >
             <Control as="fieldset" name="wasServiceHard">
-              <FormLabel as="legend" htmlFor="wasServiceHard" mb={2}>
-                <Trans id="finalFeedback.wasServiceHard.label" />
-              </FormLabel>
-              <Stack spacing={4} shouldWrapChildren>
+            <FormArrayControl
+              name="wasServiceHard"
+              label={<Trans id="finalFeedback.wasServiceHard.label" />}
+            >
+              <Stack spacing={4}>
                 {wasServiceHard.map(key => {
                   return (
                     <Box key={key}>
-                      <RadioButtonArrayControl
+                      <RadioAdapter
                         name="wasServiceHard"
                         value={key}
+                        isChecked={wasServiceHard.includes(key)}
                       >
-                        {i18n._(key)}
-                      </RadioButtonArrayControl>
+                      {i18n._(key)}
+                      </RadioAdapter>
                     </Box>
                   )
                 })}
               </Stack>
+            </FormArrayControl>
             </Control>
 
             <Control as="fieldset" name="wouldYouUseAgain">
-              <FormLabel as="legend" htmlFor="wouldYouUseAgain" mb={2}>
-                <Trans id="finalFeedback.wouldYouUseAgain.label" />
-              </FormLabel>
               <Stack spacing={4} shouldWrapChildren>
-                {wouldYouUseAgain.map(key => {
-                  return (
-                    <Box key={key}>
-                      <RadioButtonArrayControl
-                        name="wouldYouUseAgain"
-                        value={key}
-                      >
-                        {i18n._(key)}
-                      </RadioButtonArrayControl>
-                    </Box>
-                  )
-                })}
+                <FormArrayControl
+                name="wasServiceHard"
+                label={<Trans id="finalFeedback.wouldYouUseAgain.label" />}
+                >
+                  <Stack spacing={4}>
+                  {wouldYouUseAgain.map(key => {
+                      return (
+                        <Box key={key}>
+                          <RadioAdapter
+                            name="wouldYouUseAgain"
+                            value={key}
+                            isChecked={wouldYouUseAgain.includes(key)}
+                          >
+                          {i18n._(key)}
+                          </RadioAdapter>
+                        </Box>
+                      )
+                    })}
+                  </Stack>
+                </FormArrayControl>
               </Stack>
             </Control>
 

From 6e21f71f970ddd4270250c78124cef16b1a39d6b Mon Sep 17 00:00:00 2001
From: Khalid El Aggan <khalid.elaggan@cds-snc.ca>
Date: Tue, 18 Feb 2020 16:27:23 -0500
Subject: [PATCH 22/22] Remove unwanted copy -  Not included in the mocks

---
 f2/src/forms/WhatWasAffectedForm.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/f2/src/forms/WhatWasAffectedForm.js b/f2/src/forms/WhatWasAffectedForm.js
index 124a10dff..96f100178 100644
--- a/f2/src/forms/WhatWasAffectedForm.js
+++ b/f2/src/forms/WhatWasAffectedForm.js
@@ -6,7 +6,6 @@ import { Form, useField } from 'react-final-form'
 import { NextAndCancelButtons } from '../components/next-and-cancel-buttons'
 import { FormControl, Stack, Alert, AlertIcon } from '@chakra-ui/core'
 import { useStateValue } from '../utils/state'
-import { P } from '../components/paragraph'
 import { CheckboxAdapter } from '../components/checkbox'
 import { FormArrayControl } from '../components/FormArrayControl'
 import { Field } from '../components/Field'
@@ -126,9 +125,6 @@ export const WhatWasAffectedForm = props => {
                 ) : null}
             </FormArrayControl>
           </Control>
-          <P>
-            <Trans id="whatWasAffectedForm.expectations" />
-          </P>
           <NextAndCancelButtons
             next={<Trans id="whatWasAffectedForm.nextPage" />}
             button={<Trans id="whatWasAffectedForm.nextButton" />}