CRDCDH-33 Implement redesigned Section A

package.json

@@ -6,7 +6,7 @@
     "@apollo/client": "^3.7.15",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@jalik/form-parser": "^2.0.12",
+    "@jalik/form-parser": "^3.1.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.130",
     "@mui/material": "^5.13.1",

src/components/ProgressBar/ProgressBar.tsx

@@ -22,7 +22,7 @@ type ProgressSection = {
 };
 
 const StyledList = styled(List)({
-  marginTop: "30px",
+  marginTop: "22px",
   width: '250px',
   "& a": {
     color: "inherit",

src/components/Questionnaire/AdditionalContact.tsx

@@ -1,14 +1,21 @@
 import React, { FC } from "react";
-import { Button, Grid, Stack } from "@mui/material";
-import PersonRemoveIcon from '@mui/icons-material/PersonRemove';
-import { WithStyles, withStyles } from '@mui/styles';
+import { Grid, styled } from "@mui/material";
+import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import { Status as FormStatus, useFormContext } from "../Contexts/FormContext";
+import institutionConfig from "../../config/InstitutionConfig";
 import TextInput from "./TextInput";
-import { Status as FormStatus, useFormContext } from '../Contexts/FormContext';
-import { filterNonNumeric, validateEmail } from '../../content/questionnaire/utils';
+import AddRemoveButton from "./AddRemoveButton";
+import AutocompleteInput from "./AutocompleteInput";
+
+const GridContainer = styled(Grid)({
+  border: "0.5px solid #DCDCDC !important",
+  borderRadius: "10px",
+  padding: "18px 15px",
+  marginLeft: "12px",
+});
 
 type Props = {
   index: number;
-  classes: WithStyles<typeof styles>['classes'];
   contact: Contact | null;
   onDelete: () => void;
 };
@@ -19,77 +26,79 @@ type Props = {
  * @param {Props} props
  * @returns {JSX.Element}
  */
-const AdditionalContact: FC<Props> = ({ index, classes, contact, onDelete }: Props) => {
+const AdditionalContact: FC<Props> = ({ index, contact, onDelete }: Props) => {
   const { status } = useFormContext();
-
   const {
-    firstName, lastName, email, phone, position, institution,
+    firstName, lastName, email,
+    phone, position, institution,
   } = contact;
 
   return (
-    <Grid container className={classes.root}>
+    <GridContainer container>
+      <Grid container item xs={12} rowSpacing={0} columnSpacing={1.5}>
+        <TextInput
+          label="First name"
+          name={`additionalContacts[${index}][firstName]`}
+          value={firstName}
+          placeholder="Enter first name"
+          maxLength={50}
+          required
+        />
+        <TextInput
+          label="Last name"
+          name={`additionalContacts[${index}][lastName]`}
+          value={lastName}
+          placeholder="Enter last name"
+          maxLength={50}
+          required
+        />
+        <TextInput
+          label="Position"
+          name={`additionalContacts[${index}][position]`}
+          value={position}
+          placeholder="Enter position"
+          maxLength={100}
+          required
+        />
+        <TextInput
+          label="Email"
+          name={`additionalContacts[${index}][email]`}
+          type="email"
+          value={email}
+          placeholder="Enter email"
+          required
+        />
+        <AutocompleteInput
+          label="Institution"
+          name={`additionalContacts[${index}][institution]`}
+          value={institution || ""}
+          options={institutionConfig}
+          placeholder="Select Institution"
+          required
+          disableClearable
+          freeSolo
+        />
+        <TextInput
+          label="Phone number"
+          name={`additionalContacts[${index}][phone]`}
+          type="phone"
+          value={phone}
+          placeholder="Enter phone number"
+          maxLength={25}
+        />
+      </Grid>
       <Grid item xs={12}>
-        <Stack direction="row" justifyContent="end">
-          <Button
-            variant="outlined"
-            type="button"
-            onClick={onDelete}
-            size="large"
-            startIcon={<PersonRemoveIcon />}
-            className={classes.contactButton}
-            disabled={status === FormStatus.SAVING}
-          >
-            Remove Contact
-          </Button>
-        </Stack>
+        <AddRemoveButton
+          label="Remove Contact"
+          placement="start"
+          onClick={onDelete}
+          startIcon={<RemoveCircleIcon />}
+          iconColor="#F18E8E"
+          disabled={status === FormStatus.SAVING}
+        />
       </Grid>
-      <TextInput label="First name" name={`additionalContacts[${index}][firstName]`} value={firstName} maxLength={50} required />
-      <TextInput label="Last name" name={`additionalContacts[${index}][lastName]`} value={lastName} maxLength={50} required />
-      <TextInput label="Institution" name={`additionalContacts[${index}][institution]`} value={institution} maxLength={100} required />
-      <TextInput label="Position" name={`additionalContacts[${index}][position]`} value={position} maxLength={100} placeholder="(exs. Co-PI, sequencing center manager)" />
-      <TextInput label="Email address" name={`additionalContacts[${index}][email]`} value={email} validate={validateEmail} required />
-      <TextInput label="Phone number" name={`additionalContacts[${index}][phone]`} value={phone} maxLength={25} filter={filterNonNumeric} />
-    </Grid>
+    </GridContainer>
   );
 };
 
-const styles = (theme) => ({
-  root: {
-    border: "0.5px solid #346798",
-    borderRadius: "8px",
-    padding: "10px",
-    marginTop: "20px",
-    marginLeft: "37px",
-    marginRight: "-27px",
-    "& .MuiGrid-item": {
-      padding: "0 16px",
-    },
-    [theme.breakpoints.up("md")]: {
-      "& .MuiGrid-item:nth-child(2n)": {
-        paddingLeft: "16px",
-        paddingRight: "32px",
-      },
-      "& .MuiGrid-item:nth-child(2n+1)": {
-        paddingRight: "16px",
-        paddingLeft: "32px",
-      },
-    },
-  },
-  contactButton: {
-    color: "#346798",
-    marginLeft: "auto",
-    marginRight: "28px",
-    marginTop: "10px",
-    padding: "6px 20px",
-    minWidth: "115px",
-    borderRadius: "25px",
-    border: "2px solid #AFC2D8 !important",
-    background: "transparent",
-    "text-transform": "none",
-    "& .MuiButton-startIcon": {
-      marginRight: "14px",
-    },
-  },
-});
-
-export default withStyles(styles, { withTheme: true })(AdditionalContact);
+export default AdditionalContact;

src/components/Questionnaire/AutocompleteInput.tsx

@@ -200,6 +200,11 @@ const styles = () => ({
       padding: "12px 30px 12px 12px !important",
       height: "20px",
     },
+    "& .MuiOutlinedInput-input:read-only": {
+      backgroundColor: "#D9DEE4",
+      cursor: "not-allowed",
+      borderRadius: "8px",
+    },
   },
 });
 

src/components/Questionnaire/FormContainer.tsx

@@ -4,7 +4,6 @@ import { WithStyles, withStyles } from '@mui/styles';
 
 type Props = {
   classes: WithStyles<typeof styles>['classes'];
-  title: string;
   description: string;
   children: React.ReactNode;
   formRef?: MutableRefObject<HTMLFormElement>;
@@ -17,8 +16,7 @@ type Props = {
  * @returns {JSX.Element}
  */
 const FormContainer: FC<Props> = ({
-  title, description, classes, children,
-  formRef,
+  description, classes, children, formRef,
 }) => {
   const id = useId();
 

src/components/Questionnaire/PlannedPublication.tsx

@@ -51,6 +51,7 @@ const PlannedPublication: FC<Props> = ({
           name={`study[plannedPublications][${index}][expectedDate]`}
           initialValue={expectedDate}
           gridWidth={6}
+          format="MM/DD/YYYY"
           required
           tooltipText="Data made available for secondary research only
                       after investigators have obtained approval from

src/components/Questionnaire/Repository.tsx

@@ -31,7 +31,7 @@ const Repository: FC<Props> = ({
 }: Props) => {
   const { status } = useFormContext();
 
-  const { name, studyID } = repository;
+  const { name, studyID, submittedDate } = repository;
 
   return (
     <GridContainer container>
@@ -56,8 +56,8 @@ const Repository: FC<Props> = ({
         />
         <TextInput
           label="Date submitted"
-          name={`study[repositories][${index}][dateSubmitted]`}
-          value={studyID}
+          name={`study[repositories][${index}][submittedDate]`}
+          value={submittedDate}
           placeholder="Enter date"
           maxLength={50}
           gridWidth={6}

src/components/Questionnaire/TextInput.tsx

@@ -76,7 +76,7 @@ const TextInput: FC<Props> = ({
 
   useEffect(() => {
     if (value) {
-       onChange(value.toString().trim());
+      onChange(value.toString().trim());
     }
   }, [value]);
 
@@ -176,11 +176,13 @@ const styles = (theme) => ({
     "&.MuiInputBase-multiline.Mui-readOnly": {
       backgroundColor: "#D9DEE4",
       cursor: "not-allowed",
+      borderRadius: "8px",
     },
     // Target readOnly <input> inputs
     "& .MuiOutlinedInput-input:read-only": {
       backgroundColor: "#D9DEE4",
       cursor: "not-allowed",
+      borderRadius: "8px",
     },
   },
   helperText: {