Added new logic and text for WG page (#270)

* Added new logic and text

* Added new logic to handle wg rep same as company one

* Moved wg related func based on feedback

* Fixed checkbox issue

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

@@ -178,7 +178,8 @@ export function matchContactFields(existingContactData) {
  */
 export function matchWorkingGroupFields(
   existingworkingGroupData,
-  workingGroupsOptions
+  workingGroupsOptions,
+  existingCompanyContact,
 ) {
   var res = [];
   // Array
@@ -186,6 +187,12 @@ export function matchWorkingGroupFields(
     let wg = workingGroupsOptions?.find(
       (el) => el.label === item?.working_group_id
     );
+    const basicRepInfo = {
+      firstName: item?.contact?.first_name || '',
+      lastName: item?.contact?.last_name || '',
+      jobtitle: item?.contact?.job_title || '',
+      email: item?.contact?.email || '',
+    };
     res.push({
       id: item?.id || '',
       workingGroup:
@@ -197,11 +204,12 @@ export function matchWorkingGroupFields(
       participationLevel: item?.participation_level || '',
       effectiveDate: item?.effective_date?.substring(0, 10) || '',
       workingGroupRepresentative: {
-        firstName: item?.contact?.first_name || '',
-        lastName: item?.contact?.last_name || '',
-        jobtitle: item?.contact?.job_title || '',
-        email: item?.contact?.email || '',
+        ...basicRepInfo,
         id: item?.contact?.id || '',
+        sameAsCompany: checkSameContact(
+          existingCompanyContact,
+          basicRepInfo
+        ),
       },
     });
   });
@@ -305,9 +313,7 @@ export function matchWGFieldsToBackend(eachWorkingGroupData, formId) {
     formId
   );
 
-  const theDate = eachWorkingGroupData?.effectiveDate
-    ? new Date(eachWorkingGroupData?.effectiveDate)
-    : new Date();
+  const theDate = new Date();
 
   return {
     id: eachWorkingGroupData?.id,
@@ -371,7 +377,29 @@ export async function executeSendDataByStep(step, formData, formId, userId, setF
           method: setFieldValueObj.method,
         }
       );
-      callSendData(formId, '', matchMembershipLevelFieldsToBackend(formData, formId, userId), '');
+      callSendData(
+        formId,
+        '',
+        matchMembershipLevelFieldsToBackend(formData, formId, userId),
+        ''
+      );
+      let isWGRepSameAsCompany = false;
+      formData.workingGroups.map(
+        (wg) => (isWGRepSameAsCompany = wg.workingGroupRepresentative?.sameAsCompany || isWGRepSameAsCompany)
+      );
+      // only do this API call when there is at least 1 WG rep is same as company rep
+      if (isWGRepSameAsCompany) {
+        formData.workingGroups.forEach((item, index) => {
+          callSendData(
+            formId,
+            END_POINT.working_groups,
+            matchWGFieldsToBackend(item, formId),
+            '',
+            setFieldValueObj,
+            index
+          );
+        });
+      }
       break;
 
     case 2:

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

@@ -25,6 +25,8 @@ export default function Application() {
   const [isStartNewForm, setIsStartNewForm] = useState(true);
   const [isLoginExpired, setIsLoginExpired] = useState(false);
   const [isTermChecked, setIsTermChecked] = useState(false);
+  const [fullWorkingGroupList, setFullWorkingGroupList] = useState([]);
+  const [workingGroupsUserJoined, setWorkingGroupsUserJoined] = useState([]);
 
   const goToNextStep = (pageIndex, nextPage) => {
     if (furthestPage.index <= pageIndex)
@@ -280,6 +282,10 @@ export default function Application() {
               <CompanyInformation
                 formik={formikCompanyInfo}
                 isStartNewForm={isStartNewForm}
+                formikWG={formikWorkingGroups}
+                fullWorkingGroupList={fullWorkingGroupList}
+                setFullWorkingGroupList={setFullWorkingGroupList}
+                setWorkingGroupsUserJoined={setWorkingGroupsUserJoined}
               />
             ) : (
               // if uses are not allowed to visit this page,
@@ -303,7 +309,10 @@ export default function Application() {
           {furthestPage.index >= 3 ? (
             <WorkingGroupsWrapper
               formik={formikWorkingGroups}
+              formikOrgValue={formikCompanyInfo.values}
               isStartNewForm={isStartNewForm}
+              fullWorkingGroupList={fullWorkingGroupList}
+              workingGroupsUserJoined={workingGroupsUserJoined}
             />
           ) : (
             <Redirect to={furthestPage.pathName} />

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

@@ -21,6 +21,10 @@ import {
 import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
 import CompanyInformationVAT from './CompanyInformationVAT';
 import { makeStyles } from '@material-ui/core';
+import {
+  fetchAvailableFullWorkingGroupList,
+  fetchWorkingGroupsUserJoined,
+} from '../WorkingGroups/WorkingGroupsWrapper';
 
 /**
  * Wrapper for Contacts and Company components
@@ -35,6 +39,8 @@ import { makeStyles } from '@material-ui/core';
  *  - formField: the form field in formModels/formFieldModel.js
  */
 
+let hasWGData = false;
+
 const useStyles = makeStyles(() => ({
   textField: {
     marginBottom: 14,
@@ -48,10 +54,19 @@ const useStyles = makeStyles(() => ({
 let hasOrgData = false;
 let hasMembershipLevelData = false;
 
-const CompanyInformation = ({ formik, isStartNewForm }) => {
+const CompanyInformation = ({
+  formik,
+  isStartNewForm,
+  formikWG,
+  fullWorkingGroupList,
+  setFullWorkingGroupList,
+  setWorkingGroupsUserJoined,
+}) => {
   const { currentFormId } = useContext(MembershipContext); // current chosen form id
   const [loading, setLoading] = useState(true);
   const { setFieldValue } = formik;
+  const setWGFieldValue = formikWG.setFieldValue;
+  const companyRep = formik.values.representative.member;
 
   useEffect(() => {
     scrollToTop();
@@ -84,24 +99,12 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
       // Using promise pool, because in first step,
       // need to get company data, and contacts data
       let pool = [
-        fetch(
-          url_prefix_local +
-            `/${currentFormId}/` +
-            END_POINT.organizations +
-            url_suffix_local,
-          {
+        fetch(url_prefix_local + `/${currentFormId}/` + END_POINT.organizations + url_suffix_local, {
           headers: FETCH_HEADER,
-          }
-        ),
-        fetch(
-          url_prefix_local +
-            `/${currentFormId}/` +
-            END_POINT.contacts +
-            url_suffix_local,
-          {
+        }),
+        fetch(url_prefix_local + `/${currentFormId}/` + END_POINT.contacts + url_suffix_local, {
           headers: FETCH_HEADER,
-          }
-        ),
+        }),
       ];
       Promise.all(pool)
         .then((res) =>
@@ -140,10 +143,7 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
             // if nested, it will automatically map the properties and values
             setFieldValue('representative', tempContacts.organizationContacts);
 
-            setFieldValue(
-              'signingAuthorityRepresentative',
-              tempContacts.signingAuthorityRepresentative
-            );
+            setFieldValue('signingAuthorityRepresentative', tempContacts.signingAuthorityRepresentative);
             hasOrgData = true;
           }
           setLoading(false);
@@ -202,6 +202,35 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
     }
   }, [isStartNewForm, setFieldValue, currentFormId]);
 
+  useEffect(() => {
+    fetchAvailableFullWorkingGroupList(setFullWorkingGroupList);
+  }, [setFullWorkingGroupList]);
+
+  useEffect(() => {
+    if (!isStartNewForm && !hasWGData && fullWorkingGroupList.length > 0 && companyRep.firstName) {
+      // continue with an existing one and there is no working group data
+      fetchWorkingGroupsUserJoined(
+        currentFormId,
+        fullWorkingGroupList,
+        setWorkingGroupsUserJoined,
+        setWGFieldValue,
+        companyRep,
+        setLoading
+      );
+      hasWGData = true;
+    } else {
+      setLoading(false);
+    }
+  }, [
+    isStartNewForm,
+    currentFormId,
+    fullWorkingGroupList,
+    setFieldValue,
+    companyRep,
+    setWGFieldValue,
+    setWorkingGroupsUserJoined,
+  ]);
+
   // If it is in loading status or hasn't gotten the form id,
   // only return a loading spinning
   if (loading || !currentFormId) {
@@ -213,11 +242,11 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
       <div className="align-center">
         <h1 className="fw-600 h2">Company Information</h1>
         <p>
-          Please complete your company information below. This should be the
-          legal name and address of your organization.
+          Please complete your company information below. This should be the legal name and address of your
+          organization.
         </p>
         <CompanyInformationCompany formik={formik} useStyles={useStyles} />
-        <CompanyInformationContacts formik={formik} />
+        <CompanyInformationContacts formik={formik} formikWG={formikWG} />
         <CompanyInformationVAT formik={formik} />
       </div>
 

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

@@ -17,7 +17,7 @@ import { Checkbox, FormControlLabel } from '@material-ui/core';
  *
  * @returns
  */
-const Contacts = ({ formik }) => {
+const Contacts = ({ formik, formikWG }) => {
   // the boolean form value of "is marketing Rep. the same as company Rep.?"
   const isMarketingSameAsCompany =
     formik.values.representative.marketing.sameAsCompany;
@@ -88,6 +88,23 @@ const Contacts = ({ formik }) => {
     }
 
     formik.setFieldValue('representative', newRepresentativeValue);
+
+    let isWGRepSameAsCompany = false;
+    const newWG = formikWG.values.workingGroups.map((wg) => {
+      isWGRepSameAsCompany = wg.workingGroupRepresentative?.sameAsCompany || isWGRepSameAsCompany;
+      return wg.workingGroupRepresentative?.sameAsCompany
+        ? {
+            ...wg,
+            workingGroupRepresentative: {
+              ...memberRepInfo,
+              id: wg.workingGroupRepresentative.id || '',
+              sameAsCompany: wg.workingGroupRepresentative.sameAsCompany,
+            },
+          }
+        : wg;
+    });
+    // only call setFieldValue when there is at least 1 wg rep has sameAsCompany: true
+    isWGRepSameAsCompany && formikWG.setFieldValue('workingGroups', newWG);
   };
 
   const generateContacts = (

src/main/www/src/components/Application/Review/Review.tsx

@@ -188,7 +188,7 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI
                   </div>
                   <div className="col-md-8">
                     <label>Effective Date</label>
-                    <div className="preview-field">{new Date(el.effectiveDate).toLocaleDateString()}</div>
+                    <div className="preview-field">{new Date().toLocaleDateString()}</div>
                   </div>
 
                   <div className="col-md-24">

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

 import { useContext } from 'react';
 import MembershipContext from '../../../Context/MembershipContext';
 import WorkingGroupParticipationLevel from './WorkingGroupParticipationLevel';
-import WorkingGroupEffectiveDate from './WorkingGroupEffectiveDate';
 import WorkingGroupsRepresentative from './WorkingGroupRepresentative';
 import { deleteData } from '../../../Utils/formFunctionHelpers';
 import {
@@ -12,7 +11,7 @@ import {
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { makeStyles, TextField } from '@material-ui/core';
 import { FieldArray } from 'formik';
-import Loading from '../../UIComponents/Loading/Loading';
+import { initialValues } from '../../UIComponents/FormComponents/formFieldModel';
 
 /**
  * Wrapper for Working Group Selector,
@@ -27,19 +26,7 @@ import Loading from '../../UIComponents/Loading/Loading';
  *    - formField: the form field in formModels/formFieldModel.js
  */
 
-const each_workingGroupField = {
-  id: '',
-  workingGroup: '',
-  participationLevel: '',
-  effectiveDate: '',
-  workingGroupRepresentative: {
-    firstName: '',
-    lastName: '',
-    jobtitle: '',
-    email: '',
-    id: '',
-  },
-};
+const each_workingGroupField = initialValues.workingGroups[0];
 
 const useStyles = makeStyles(() => ({
   textField: {
@@ -51,7 +38,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
+const WorkingGroup = ({ formik, fullWorkingGroupList, formikOrgValue }) => {
   const classes = useStyles();
   const { currentFormId } = useContext(MembershipContext);
 
@@ -87,9 +74,7 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
     }
   };
 
-  return isLoading ? (
-    <Loading />
-  ) : (
+  return (
     <FieldArray
       name={workingGroupsLabel}
       render={(arrayHelpers) => (
@@ -211,13 +196,8 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
                       fullWorkingGroupList={fullWorkingGroupList}
                       formik={formik}
                     />
-                    <WorkingGroupEffectiveDate
-                      name={`${workingGroupsLabel}.${index}.effectiveDate`}
-                      index={index}
-                      label="Effective Date"
-                      formik={formik}
-                    />
                     <WorkingGroupsRepresentative
+                      formikOrgValue={formikOrgValue}
                       name={`${workingGroupsLabel}.${index}.workingGroupRepresentative`}
                       index={index}
                       label="Working Group Representative"

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

-import DateInput from '../../UIComponents/Inputs/DateInput';
-
-/**
- * Render Effective Date input component (react-datepicker)
- *
- *  - Props:
- *    - name: fieldName (for Effective Date, an example would be: `workingGroups[i].effectiveDate`);
- *            this is handled by and passed from WorkingGroup component
- */
-const EffectiveDate = ({ name, index, formik }) => {
-  const theIndex = index;
-  return (
-    <>
-      <h3 className="fw-600 margin-top-30 h4" id={name}>
-        What is the effective date for your Membership Agreement/ Working Group
-        Participation Agreement?
-        <span className="orange-star margin-left-5">*</span>
-      </h3>
-      <div className="row">
-        <div className="col-md-12">
-          <DateInput
-            ariaLabel={name}
-            label="EffectiveDate"
-            name={name}
-            onChange={formik.handleChange}
-            value={formik.values.workingGroups[theIndex].effectiveDate}
-          />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default EffectiveDate;

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

@@ -13,8 +13,8 @@ import DropdownMenu from '../../UIComponents/Inputs/DropdownMenu';
 const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList, formik, index }) => {
   const [participationLevelOptions, setParticipationLevelOptions] = useState([]);
   const [selectedWG, setSelectedWG] = useState();
-
   const theIndex = index;
+
   useEffect(() => {
     // If have selected working group, find this working group's
     // participation levels, and pass to the react-select option
@@ -56,11 +56,16 @@ const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList
         </div>
       </div>
       <p>
-        You can find additional information about {selectedWG?.label} in the{' '}
+        Each Working Group has different participation levels and restrictions on who can join at those levels (e.g.,
+        Guest Member level is typically restricted to non-profit organizations). See the{' '}
         <a target="_blank" rel="noreferrer" href={selectedWG?.charter}>
-          {selectedWG?.label} charter
-        </a>
-        .
+          charter
+        </a>{' '}
+        for full details on which choice is best for you, and to see the working group fees associated with joining this
+        working group. Note: working group fees are in addition to the membership fees associated with joining the
+        Eclipse Foundation. Please{' '}
+        <a href="mailto:membership.coordination@eclipse-foundation.org">contact our membership team</a> with any
+        questions.
       </p>
     </>
   );

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

 import Input from '../../UIComponents/Inputs/Input';
 import { formField } from '../../UIComponents/FormComponents/formFieldModel';
+import { Checkbox, FormControlLabel } from '@material-ui/core';
 
 /**
  * Render Working Group Representative input component
@@ -9,15 +10,40 @@ import { formField } from '../../UIComponents/FormComponents/formFieldModel';
  *
  *   - formField: the form field in formModels/formFieldModel.js
  */
-const WorkingGroupRepresentative = ({ name, index, formik }) => {