Added Same as Member Rep checkbox for Signing Authority (#308)

* Added same as company rep for signing authority

* Added logic to update SA rep if sameAs is checked

src/main/www/src/Utils/formFunctionHelpers.js

@@ -166,6 +166,10 @@ export function matchContactFields(existingContactData) {
       lastName: existingSigningContact?.last_name || '',
       jobtitle: existingSigningContact?.job_title || '',
       email: existingSigningContact?.email || '',
+      sameAsCompany: checkSameContact(
+        existingCompanyContact,
+        existingSigningContact
+      ),
     },
   };
 }

src/main/www/src/components/Application/Application.js

@@ -19,8 +19,7 @@ import TopSlideMsg from '../UIComponents/Notifications/TopSlideMsg';
 
 export default function Application() {
   const history = useHistory();
-  const { currentFormId, furthestPage, setFurthestPage, currentUser } =
-    useContext(MembershipContext);
+  const { currentFormId, furthestPage, setFurthestPage, currentUser } = useContext(MembershipContext);
   const [updatedFormValues, setUpdatedFormValues] = useState(initialValues);
   const [isStartNewForm, setIsStartNewForm] = useState(true);
   const [isLoginExpired, setIsLoginExpired] = useState(false);
@@ -29,8 +28,7 @@ export default function Application() {
   const [workingGroupsUserJoined, setWorkingGroupsUserJoined] = useState([]);
 
   const goToNextStep = (pageIndex, nextPage) => {
-    if (furthestPage.index <= pageIndex)
-      setFurthestPage({ index: pageIndex + 1, pathName: nextPage });
+    if (furthestPage.index <= pageIndex) setFurthestPage({ index: pageIndex + 1, pathName: nextPage });
     history.push(nextPage);
   };
 
@@ -53,13 +51,7 @@ export default function Application() {
   };
 
   const submitForm = () => {
-    executeSendDataByStep(
-      5,
-      '',
-      currentFormId,
-      currentUser.name,
-      ''
-    );
+    executeSendDataByStep(5, '', currentFormId, currentUser.name, '');
     goToNextStep(5, '/submitted');
   };
 
@@ -116,6 +108,16 @@ export default function Application() {
     };
 
     executeSendDataByStep(1, theNewValue, currentFormId, currentUser.name, setFieldValueObj);
+    // Only make the API call when signingAuthorityRepresentative has an id
+    // If not, it means there is nothing in the db, so no need to update.
+    values.signingAuthorityRepresentative.id &&
+      executeSendDataByStep(
+        4,
+        values,
+        currentFormId,
+        currentUser.name,
+        setFieldValueObj
+      );
     // Only need to call goToNextStep when is not using stepper
     !isUsingStepper && goToNextStep(1, '/membership-level');
   };
@@ -323,10 +325,7 @@ export default function Application() {
         <Route path="/signing-authority">
           {renderStepper()}
           {furthestPage.index >= 4 ? (
-            <SigningAuthority
-              formik={formikSigningAuthority}
-              updatedFormValues={updatedFormValues}
-            />
+            <SigningAuthority formik={formikSigningAuthority} formikOrgValue={formikCompanyInfo.values} />
           ) : (
             <Redirect to={furthestPage.pathName} />
           )}
@@ -335,11 +334,11 @@ export default function Application() {
         <Route path="/review">
           {renderStepper()}
           {furthestPage.index >= 5 ? (
-            <Review 
-            values={updatedFormValues}
-            submitForm={submitForm}
-            isTermChecked={isTermChecked}
-            setIsTermChecked={setIsTermChecked}
+            <Review
+              values={updatedFormValues}
+              submitForm={submitForm}
+              isTermChecked={isTermChecked}
+              setIsTermChecked={setIsTermChecked}
             />
           ) : (
             <Redirect to={furthestPage.pathName} />
@@ -347,20 +346,13 @@ export default function Application() {
         </Route>
 
         <Route path="/submitted">
-          {furthestPage.index >= 6 ? (
-            <SubmitSuccess />
-          ) : (
-            <Redirect to={furthestPage.pathName} />
-          )}
+          {furthestPage.index >= 6 ? <SubmitSuccess /> : <Redirect to={furthestPage.pathName} />}
         </Route>
 
         <Redirect to="/" />
       </Switch>
 
-      <TopSlideMsg
-        shouldShowUp={isLoginExpired}
-        msgContent={LOGIN_EXPIRED_MSG}
-      />
+      <TopSlideMsg shouldShowUp={isLoginExpired} msgContent={LOGIN_EXPIRED_MSG} />
     </>
   );
 }

src/main/www/src/components/Application/CompanyInformation/CompanyInformationContacts.js

@@ -105,6 +105,16 @@ const Contacts = ({ formik, formikWG }) => {
     });
     // only call setFieldValue when there is at least 1 wg rep has sameAsCompany: true
     isWGRepSameAsCompany && formikWG.setFieldValue('workingGroups', newWG);
+    const isSigningAuthoritySameAsCompany = formik.values.signingAuthorityRepresentative.sameAsCompany;
+    
+    if (isSigningAuthoritySameAsCompany) {
+      const newSigningAuthorityRepValues = {
+        ...memberRepInfo,
+        id: formik.values.signingAuthorityRepresentative.id || '',
+        sameAsCompany: isSigningAuthoritySameAsCompany,
+      };
+      formik.setFieldValue('signingAuthorityRepresentative', newSigningAuthorityRepValues);
+    }
   };
 
   const generateSingleContact = (el, index, prefix, type, disableInput) => (

src/main/www/src/components/Application/SigningAuthority/SigningAuthority.js

@@ -3,6 +3,7 @@ import Input from '../../UIComponents/Inputs/Input';
 import { formField } from '../../UIComponents/FormComponents/formFieldModel';
 import { useEffect } from 'react';
 import { scrollToTop } from '../../../Utils/formFunctionHelpers';
+import { Checkbox, FormControlLabel } from '@material-ui/core';
 
 /**
  * Have not added any API calls here,
@@ -11,7 +12,7 @@ import { scrollToTop } from '../../../Utils/formFunctionHelpers';
  */
 
 const sectionName = 'signing-authority';
-const SigningAuthority = ({ formik }) => {
+const SigningAuthority = ({ formik, formikOrgValue }) => {
   const { signingAuthorityRepresentative } = formField;
   const name = 'signingAuthorityRepresentative';
   const generateSingleContact = (el) => (
@@ -21,6 +22,7 @@ const SigningAuthority = ({ formik }) => {
         labelName={el.label}
         placeholder={el.placeholder}
         requiredMark={true}
+        disableInput={formik.values.signingAuthorityRepresentative.sameAsCompany}
         ariaLabel={`${name}.${el.name}`}
         onChange={formik.handleChange}
         value={formik.values.signingAuthorityRepresentative[`${el.name}`]}
@@ -36,6 +38,19 @@ const SigningAuthority = ({ formik }) => {
     </div>
   );
 
+  const handleCheckboxChange = (isChecked) => {
+    const repInfo = isChecked
+      ? formikOrgValue.representative.member
+      : formik.values.signingAuthorityRepresentative;
+
+    const newValues = {
+      ...repInfo,
+      sameAsCompany: isChecked,
+      id: formik.values.signingAuthorityRepresentative.id,
+    };
+    formik.setFieldValue('signingAuthorityRepresentative', newValues);
+  };
+
   useEffect(() => {
     scrollToTop();
   }, []);
@@ -48,6 +63,18 @@ const SigningAuthority = ({ formik }) => {
         </h1>
         <p>Please indicate the individual who has the signing authority for the agreement.</p>
 
+        <FormControlLabel
+          control={
+            <Checkbox
+              name="signingAuthorityRepresentative.sameAsCompany"
+              color="primary"
+              checked={formik.values.signingAuthorityRepresentative.sameAsCompany}
+              onChange={(ev) => handleCheckboxChange(ev.target.checked)}
+            />
+          }
+          label="Same as Member Representative"
+        />
+
         <div className="row">
           {signingAuthorityRepresentative.map((el, index) => index < 2 && generateSingleContact(el))}
         </div>

src/main/www/src/components/Application/WorkingGroups/WorkingGroupRepresentative.js

@@ -59,10 +59,10 @@ const WorkingGroupRepresentative = ({ name, index, formik, formikOrgValue }) =>
       <FormControlLabel
         control={
           <Checkbox
-            name="representative.marketing.sameAsCompany"
+            name={`workingGroups[${theIndex}].workingGroupRepresentative.sameAsCompany`}
             color="primary"
             checked={formik.values.workingGroups[theIndex].workingGroupRepresentative.sameAsCompany}
-            onChange={(ev) => handleCheckboxChange(ev.target.checked, 'marketing')}
+            onChange={(ev) => handleCheckboxChange(ev.target.checked)}
           />
         }
         label="Same as Member Representative"

src/main/www/src/components/UIComponents/FormComponents/formFieldModel.js

@@ -113,6 +113,7 @@ export const initialValues = {
     email: '',
     jobtitle: '',
     id: '',
+    sameAsCompany: false,
   },
 };