CRDCDH-33 Update for Requirements changes

src/components/Questionnaire/AdditionalContact.tsx

@@ -6,7 +6,7 @@ import institutionConfig from "../../config/InstitutionConfig";
 import TextInput from "./TextInput";
 import AddRemoveButton from "./AddRemoveButton";
 import AutocompleteInput from "./AutocompleteInput";
-import { filterNonNumeric } from '../../utils';
+import { filterForNumbers, validateEmail } from '../../utils';
 
 const GridContainer = styled(Grid)({
   border: "0.5px solid #DCDCDC !important",
@@ -74,6 +74,8 @@ const AdditionalContact: FC<Props> = ({ idPrefix = "", index, contact, readOnly,
           name={`additionalContacts[${index}][email]`}
           type="email"
           value={email}
+          validate={validateEmail}
+          errorText="Please provide a valid email address"
           placeholder="Enter email"
           required
           readOnly={readOnly}
@@ -95,7 +97,7 @@ const AdditionalContact: FC<Props> = ({ idPrefix = "", index, contact, readOnly,
           label="Phone number"
           name={`additionalContacts[${index}][phone]`}
           type="tel"
-          filter={filterNonNumeric}
+          filter={filterForNumbers}
           value={phone}
           placeholder="Enter phone number"
           maxLength={25}

src/content/questionnaire/sections/A.tsx

@@ -9,10 +9,11 @@ import FormContainer from "../../../components/Questionnaire/FormContainer";
 import SectionGroup from "../../../components/Questionnaire/SectionGroup";
 import TextInput from "../../../components/Questionnaire/TextInput";
 import AutocompleteInput from '../../../components/Questionnaire/AutocompleteInput';
-import institutionConfig from "../../../config/InstitutionConfig";
 import AddRemoveButton from '../../../components/Questionnaire/AddRemoveButton';
-import { filterNonNumeric, mapObjectWithKey } from '../../../utils';
+import { filterForNumbers, mapObjectWithKey, validateEmail } from '../../../utils';
 import TransitionGroupWrapper from "../../../components/Questionnaire/TransitionGroupWrapper";
+import institutionConfig from "../../../config/InstitutionConfig";
+import { InitialQuestionnaire } from '../../../config/InitialValues';
 import useFormMode from "./hooks/useFormMode";
 
 export type KeyedContact = {
@@ -35,15 +36,17 @@ const StyledFormControlLabel = styled(FormControlLabel)({
  */
 const FormSectionA: FC<FormSectionProps> = ({ SectionOption, refs }: FormSectionProps) => {
   const { status, data: { questionnaireData: data } } = useFormContext();
-  const { pi, primaryContact } = data;
+  const { pi } = data;
   const { readOnlyInputs } = useFormMode();
 
+  const [primaryContact, setPrimaryContact] = useState<Contact>(data?.primaryContact);
   const [piAsPrimaryContact, setPiAsPrimaryContact] = useState<boolean>(data?.piAsPrimaryContact || false);
   const [additionalContacts, setAdditionalContacts] = useState<KeyedContact[]>(data.additionalContacts?.map(mapObjectWithKey) || []);
 
   const formRef = useRef<HTMLFormElement>();
   const {
-    nextButtonRef, saveFormRef, submitFormRef, approveFormRef, rejectFormRef, getFormObjectRef,
+    nextButtonRef, saveFormRef, submitFormRef,
+    approveFormRef, rejectFormRef, getFormObjectRef,
   } = refs;
 
   useEffect(() => {
@@ -58,6 +61,11 @@ const FormSectionA: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
     getFormObjectRef.current = getFormObject;
   }, [refs]);
 
+  const togglePrimaryPI = () => {
+    setPiAsPrimaryContact(!piAsPrimaryContact);
+    setPrimaryContact(cloneDeep(InitialQuestionnaire.primaryContact));
+  };
+
   const getFormObject = (): FormObject | null => {
     if (!formRef.current) { return null; }
 
@@ -136,10 +144,12 @@ const FormSectionA: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
         <TextInput
           id="section-a-pi-email"
           type="email"
-          label="Email address"
+          label="Email"
           name="pi[email]"
           value={pi?.email}
-          placeholder="Enter email address"
+          placeholder="Enter email"
+          validate={validateEmail}
+          errorText="Please provide a valid email address"
           required
           readOnly={readOnlyInputs}
         />
@@ -181,7 +191,7 @@ const FormSectionA: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
             control={(
               <Checkbox
                 checked={piAsPrimaryContact}
-                onChange={() => !readOnlyInputs && setPiAsPrimaryContact(!piAsPrimaryContact)}
+                onChange={() => !readOnlyInputs && togglePrimaryPI()}
                 readOnly={readOnlyInputs}
               />
             )}
@@ -197,69 +207,75 @@ const FormSectionA: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
             readOnly
           />
         </Grid>
-        <TextInput
-          id="section-a-primary-contact-first-name"
-          label="First name"
-          name="primaryContact[firstName]"
-          value={(piAsPrimaryContact ? pi?.firstName : primaryContact?.firstName) || ""}
-          placeholder="Enter first name"
-          maxLength={50}
-          readOnly={piAsPrimaryContact || readOnlyInputs}
-          required={!piAsPrimaryContact}
-        />
-        <TextInput
-          id="section-a-primary-contact-last-name"
-          label="Last name"
-          name="primaryContact[lastName]"
-          value={(piAsPrimaryContact ? pi?.lastName : primaryContact?.lastName) || ""}
-          placeholder="Enter last name"
-          maxLength={50}
-          readOnly={piAsPrimaryContact || readOnlyInputs}
-          required={!piAsPrimaryContact}
-        />
-        <TextInput
-          id="section-a-primary-contact-position"
-          label="Position"
-          name="primaryContact[position]"
-          value={(piAsPrimaryContact ? pi?.position : primaryContact?.position) || ""}
-          placeholder="Enter position"
-          maxLength={100}
-          readOnly={piAsPrimaryContact || readOnlyInputs}
-          required={!piAsPrimaryContact}
-        />
-        <TextInput
-          id="section-a-primary-contact-email"
-          type="email"
-          label="Email"
-          name="primaryContact[email]"
-          value={(piAsPrimaryContact ? pi?.email : primaryContact?.email) || ""}
-          placeholder="Enter email address"
-          readOnly={piAsPrimaryContact || readOnlyInputs}
-          required={!piAsPrimaryContact}
-        />
-        <AutocompleteInput
-          id="section-a-primary-contact-institution"
-          label="Institution"
-          name="primaryContact[institution]"
-          value={(piAsPrimaryContact ? pi?.institution : primaryContact?.institution) || ""}
-          options={institutionConfig}
-          placeholder="Enter or Select an Institution"
-          readOnly={piAsPrimaryContact || readOnlyInputs}
-          disableClearable
-          required={!piAsPrimaryContact}
-          freeSolo
-        />
-        <TextInput
-          id="section-a-primary-contact-phone-number"
-          type="tel"
-          label="Phone number"
-          name="primaryContact[phone]"
-          filter={filterNonNumeric}
-          value={(piAsPrimaryContact ? "" : primaryContact?.phone) || ""}
-          placeholder="Enter phone number"
-          maxLength={25}
-          readOnly={piAsPrimaryContact || readOnlyInputs}
-        />
+        {!piAsPrimaryContact && (
+          <>
+            <TextInput
+              id="section-a-primary-contact-first-name"
+              label="First name"
+              name="primaryContact[firstName]"
+              value={primaryContact?.firstName || ""}
+              placeholder="Enter first name"
+              maxLength={50}
+              readOnly={readOnlyInputs}
+              required
+            />
+            <TextInput
+              id="section-a-primary-contact-last-name"
+              label="Last name"
+              name="primaryContact[lastName]"
+              value={primaryContact?.lastName || ""}
+              placeholder="Enter last name"
+              maxLength={50}
+              readOnly={readOnlyInputs}
+              required
+            />
+            <TextInput
+              id="section-a-primary-contact-position"
+              label="Position"
+              name="primaryContact[position]"
+              value={primaryContact?.position || ""}
+              placeholder="Enter position"
+              maxLength={100}
+              readOnly={readOnlyInputs}
+              required
+            />
+            <TextInput
+              id="section-a-primary-contact-email"
+              type="email"
+              label="Email"
+              name="primaryContact[email]"
+              value={primaryContact?.email || ""}
+              validate={validateEmail}
+              errorText="Please provide a valid email address"
+              placeholder="Enter email"
+              readOnly={readOnlyInputs}
+              required
+            />
+            <AutocompleteInput
+              id="section-a-primary-contact-institution"
+              label="Institution"
+              name="primaryContact[institution]"
+              value={primaryContact?.institution || ""}
+              options={institutionConfig}
+              placeholder="Enter or Select an Institution"
+              readOnly={readOnlyInputs}
+              disableClearable
+              required
+              freeSolo
+            />
+            <TextInput
+              id="section-a-primary-contact-phone-number"
+              type="tel"
+              label="Phone number"
+              name="primaryContact[phone]"
+              filter={filterForNumbers}
+              value={primaryContact?.phone || ""}
+              placeholder="Enter phone number"
+              maxLength={25}
+              readOnly={readOnlyInputs}
+            />
+          </>
+        )}
       </SectionGroup>
 
       {/* Additional Contacts */}

src/utils/formUtils.test.ts

@@ -1,7 +1,7 @@
 import * as utils from "./formUtils";
 import programs, { BlankProgram, BlankStudy, OptionalProgram, OptionalStudy } from '../config/ProgramConfig';
 
-describe("questionnaire filterNonNumeric cases", () => {
+describe("filterNonNumeric cases", () => {
   it("should filter non-numerics", () => {
     expect(utils.filterNonNumeric("123abc")).toEqual("123");
   });
@@ -15,7 +15,39 @@ describe("questionnaire filterNonNumeric cases", () => {
   });
 });
 
-describe("questionnaire validateDomain cases", () => {
+describe("filterForNumbers cases", () => {
+  it('should return empty string when given an empty string', () => {
+    expect(utils.filterForNumbers('')).toBe('');
+  });
+
+  it('should return only numbers when given a string with numbers and other characters', () => {
+    expect(utils.filterForNumbers('abc123def456')).toBe('123456');
+  });
+
+  it('should return only numbers and dashes when given a string with numbers, dashes, and other characters', () => {
+    expect(utils.filterForNumbers('abc123-def456')).toBe('123-456');
+  });
+
+  it('should return the original string when given a string with numbers and spaces', () => {
+    expect(utils.filterForNumbers('123 456')).toBe('123 456');
+  });
+
+  it("should filter special characters", () => {
+    expect(utils.filterForNumbers("123!@#$%^&*()_+")).toEqual("123");
+  });
+
+  it("should filter newlines", () => {
+    // NOTE: This tests against the usage of \s in the regex
+    expect(utils.filterForNumbers("123\n")).toEqual("123");
+  });
+
+  it("should filter tabs", () => {
+    // NOTE: This tests against the usage of \s in the regex
+    expect(utils.filterForNumbers("123\t")).toEqual("123");
+  });
+});
+
+describe("validateEmail cases", () => {
   it("should prevent domain-only emails", () => {
     expect(utils.validateEmail("abc.com")).toEqual(false);
   });
@@ -24,20 +56,40 @@ describe("questionnaire validateDomain cases", () => {
     expect(utils.validateEmail("test-email@example")).toEqual(false);
   });
 
-  it("should allow valid NIH emails", () => {
-    expect(utils.validateEmail("abc@nih.gov")).toEqual(true);
+  it('should return false for invalid email', () => {
+    expect(utils.validateEmail('testexample.com')).toBe(false);
   });
 
-  it("should allow dashes", () => {
-    expect(utils.validateEmail("test-email@example.com")).toEqual(true);
+  it('should return false for email with spaces', () => {
+    expect(utils.validateEmail('test example@example.com')).toBe(false);
+  });
+
+  it('should return false for email with special characters', () => {
+    expect(utils.validateEmail('test!example@example.com')).toBe(false);
+  });
+
+  it('should return false for email with multiple @ symbols', () => {
+    expect(utils.validateEmail('test@example@com')).toBe(false);
   });
 
   it("should allow periods", () => {
     expect(utils.validateEmail("abc.123@example.com")).toEqual(true);
   });
+
+  it('should return true for valid email', () => {
+    expect(utils.validateEmail('test@example.com')).toBe(true);
+  });
+
+  it("should allow valid NIH emails", () => {
+    expect(utils.validateEmail("abc@nih.gov")).toEqual(true);
+  });
+
+  it("should allow dashes", () => {
+    expect(utils.validateEmail("test-email@example.com")).toEqual(true);
+  });
 });
 
-describe("questionnaire mapObjectWithKey cases", () => {
+describe("mapObjectWithKey cases", () => {
   const object = [
     { name: "test1" },
     { name: "test2" },
@@ -58,7 +110,7 @@ describe("questionnaire mapObjectWithKey cases", () => {
   });
 });
 
-describe("questionnaire findProgram cases", () => {
+describe("findProgram cases", () => {
   it("should default to the optional program", () => {
     const program = utils.findProgram("test ABC 123 this should never exist", "test abbrev this should never exist either");
 
@@ -95,7 +147,7 @@ describe("questionnaire findProgram cases", () => {
   });
 });
 
-describe("questionnaire findStudy cases", () => {
+describe("findStudy cases", () => {
   const program = programs[0];
 
   it("should default to the optional study", () => {

src/utils/formUtils.ts

@@ -39,6 +39,14 @@ export const reshapeCheckboxGroupOptions = (options: FormGroupCheckboxOption[],
  */
 export const filterNonNumeric = (value: string): string => value.replace(/[^0-9]/g, '');
 
+/**
+ * Filters input fields for Phone Numbers (numeric and dashes)
+ *
+ * @param {string} value The value to filter
+ * @returns {string} The filtered value
+ */
+export const filterForNumbers = (value: string): string => value?.replace(/[^0-9- ]+/g, '');
+
 /**
  * Adds a semi-stable key to the object
  *