Unverified Commit bd39b29b authored by Zhou (Link)  Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

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
parent e35b6579
...@@ -178,7 +178,8 @@ export function matchContactFields(existingContactData) { ...@@ -178,7 +178,8 @@ export function matchContactFields(existingContactData) {
*/ */
export function matchWorkingGroupFields( export function matchWorkingGroupFields(
existingworkingGroupData, existingworkingGroupData,
workingGroupsOptions workingGroupsOptions,
existingCompanyContact,
) { ) {
var res = []; var res = [];
// Array // Array
...@@ -186,6 +187,12 @@ export function matchWorkingGroupFields( ...@@ -186,6 +187,12 @@ export function matchWorkingGroupFields(
let wg = workingGroupsOptions?.find( let wg = workingGroupsOptions?.find(
(el) => el.label === item?.working_group_id (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({ res.push({
id: item?.id || '', id: item?.id || '',
workingGroup: workingGroup:
...@@ -197,11 +204,12 @@ export function matchWorkingGroupFields( ...@@ -197,11 +204,12 @@ export function matchWorkingGroupFields(
participationLevel: item?.participation_level || '', participationLevel: item?.participation_level || '',
effectiveDate: item?.effective_date?.substring(0, 10) || '', effectiveDate: item?.effective_date?.substring(0, 10) || '',
workingGroupRepresentative: { workingGroupRepresentative: {
firstName: item?.contact?.first_name || '', ...basicRepInfo,
lastName: item?.contact?.last_name || '',
jobtitle: item?.contact?.job_title || '',
email: item?.contact?.email || '',
id: item?.contact?.id || '', id: item?.contact?.id || '',
sameAsCompany: checkSameContact(
existingCompanyContact,
basicRepInfo
),
}, },
}); });
}); });
...@@ -305,9 +313,7 @@ export function matchWGFieldsToBackend(eachWorkingGroupData, formId) { ...@@ -305,9 +313,7 @@ export function matchWGFieldsToBackend(eachWorkingGroupData, formId) {
formId formId
); );
const theDate = eachWorkingGroupData?.effectiveDate const theDate = new Date();
? new Date(eachWorkingGroupData?.effectiveDate)
: new Date();
return { return {
id: eachWorkingGroupData?.id, id: eachWorkingGroupData?.id,
...@@ -371,7 +377,29 @@ export async function executeSendDataByStep(step, formData, formId, userId, setF ...@@ -371,7 +377,29 @@ export async function executeSendDataByStep(step, formData, formId, userId, setF
method: setFieldValueObj.method, 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; break;
case 2: case 2:
......
...@@ -25,6 +25,8 @@ export default function Application() { ...@@ -25,6 +25,8 @@ export default function Application() {
const [isStartNewForm, setIsStartNewForm] = useState(true); const [isStartNewForm, setIsStartNewForm] = useState(true);
const [isLoginExpired, setIsLoginExpired] = useState(false); const [isLoginExpired, setIsLoginExpired] = useState(false);
const [isTermChecked, setIsTermChecked] = useState(false); const [isTermChecked, setIsTermChecked] = useState(false);
const [fullWorkingGroupList, setFullWorkingGroupList] = useState([]);
const [workingGroupsUserJoined, setWorkingGroupsUserJoined] = useState([]);
const goToNextStep = (pageIndex, nextPage) => { const goToNextStep = (pageIndex, nextPage) => {
if (furthestPage.index <= pageIndex) if (furthestPage.index <= pageIndex)
...@@ -280,6 +282,10 @@ export default function Application() { ...@@ -280,6 +282,10 @@ export default function Application() {
<CompanyInformation <CompanyInformation
formik={formikCompanyInfo} formik={formikCompanyInfo}
isStartNewForm={isStartNewForm} isStartNewForm={isStartNewForm}
formikWG={formikWorkingGroups}
fullWorkingGroupList={fullWorkingGroupList}
setFullWorkingGroupList={setFullWorkingGroupList}
setWorkingGroupsUserJoined={setWorkingGroupsUserJoined}
/> />
) : ( ) : (
// if uses are not allowed to visit this page, // if uses are not allowed to visit this page,
...@@ -303,7 +309,10 @@ export default function Application() { ...@@ -303,7 +309,10 @@ export default function Application() {
{furthestPage.index >= 3 ? ( {furthestPage.index >= 3 ? (
<WorkingGroupsWrapper <WorkingGroupsWrapper
formik={formikWorkingGroups} formik={formikWorkingGroups}
formikOrgValue={formikCompanyInfo.values}
isStartNewForm={isStartNewForm} isStartNewForm={isStartNewForm}
fullWorkingGroupList={fullWorkingGroupList}
workingGroupsUserJoined={workingGroupsUserJoined}
/> />
) : ( ) : (
<Redirect to={furthestPage.pathName} /> <Redirect to={furthestPage.pathName} />
......
...@@ -21,6 +21,10 @@ import { ...@@ -21,6 +21,10 @@ import {
import CustomStepButton from '../../UIComponents/Button/CustomStepButton'; import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
import CompanyInformationVAT from './CompanyInformationVAT'; import CompanyInformationVAT from './CompanyInformationVAT';
import { makeStyles } from '@material-ui/core'; import { makeStyles } from '@material-ui/core';
import {
fetchAvailableFullWorkingGroupList,
fetchWorkingGroupsUserJoined,
} from '../WorkingGroups/WorkingGroupsWrapper';
/** /**
* Wrapper for Contacts and Company components * Wrapper for Contacts and Company components
...@@ -35,6 +39,8 @@ import { makeStyles } from '@material-ui/core'; ...@@ -35,6 +39,8 @@ import { makeStyles } from '@material-ui/core';
* - formField: the form field in formModels/formFieldModel.js * - formField: the form field in formModels/formFieldModel.js
*/ */
let hasWGData = false;
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
textField: { textField: {
marginBottom: 14, marginBottom: 14,
...@@ -48,10 +54,19 @@ const useStyles = makeStyles(() => ({ ...@@ -48,10 +54,19 @@ const useStyles = makeStyles(() => ({
let hasOrgData = false; let hasOrgData = false;
let hasMembershipLevelData = 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 { currentFormId } = useContext(MembershipContext); // current chosen form id
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const { setFieldValue } = formik; const { setFieldValue } = formik;
const setWGFieldValue = formikWG.setFieldValue;
const companyRep = formik.values.representative.member;
useEffect(() => { useEffect(() => {
scrollToTop(); scrollToTop();
...@@ -84,24 +99,12 @@ const CompanyInformation = ({ formik, isStartNewForm }) => { ...@@ -84,24 +99,12 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
// Using promise pool, because in first step, // Using promise pool, because in first step,
// need to get company data, and contacts data // need to get company data, and contacts data
let pool = [ let pool = [
fetch( fetch(url_prefix_local + `/${currentFormId}/` + END_POINT.organizations + url_suffix_local, {
url_prefix_local + headers: FETCH_HEADER,
`/${currentFormId}/` + }),
END_POINT.organizations + fetch(url_prefix_local + `/${currentFormId}/` + END_POINT.contacts + url_suffix_local, {
url_suffix_local, headers: FETCH_HEADER,
{ }),
headers: FETCH_HEADER,
}
),
fetch(
url_prefix_local +
`/${currentFormId}/` +
END_POINT.contacts +
url_suffix_local,
{
headers: FETCH_HEADER,
}
),
]; ];
Promise.all(pool) Promise.all(pool)
.then((res) => .then((res) =>
...@@ -140,10 +143,7 @@ const CompanyInformation = ({ formik, isStartNewForm }) => { ...@@ -140,10 +143,7 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
// if nested, it will automatically map the properties and values // if nested, it will automatically map the properties and values
setFieldValue('representative', tempContacts.organizationContacts); setFieldValue('representative', tempContacts.organizationContacts);
setFieldValue( setFieldValue('signingAuthorityRepresentative', tempContacts.signingAuthorityRepresentative);
'signingAuthorityRepresentative',
tempContacts.signingAuthorityRepresentative
);
hasOrgData = true; hasOrgData = true;
} }
setLoading(false); setLoading(false);
...@@ -202,6 +202,35 @@ const CompanyInformation = ({ formik, isStartNewForm }) => { ...@@ -202,6 +202,35 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
} }
}, [isStartNewForm, setFieldValue, currentFormId]); }, [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, // If it is in loading status or hasn't gotten the form id,
// only return a loading spinning // only return a loading spinning
if (loading || !currentFormId) { if (loading || !currentFormId) {
...@@ -213,11 +242,11 @@ const CompanyInformation = ({ formik, isStartNewForm }) => { ...@@ -213,11 +242,11 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
<div className="align-center"> <div className="align-center">
<h1 className="fw-600 h2">Company Information</h1> <h1 className="fw-600 h2">Company Information</h1>
<p> <p>
Please complete your company information below. This should be the Please complete your company information below. This should be the legal name and address of your
legal name and address of your organization. organization.
</p> </p>
<CompanyInformationCompany formik={formik} useStyles={useStyles} /> <CompanyInformationCompany formik={formik} useStyles={useStyles} />
<CompanyInformationContacts formik={formik} /> <CompanyInformationContacts formik={formik} formikWG={formikWG} />
<CompanyInformationVAT formik={formik} /> <CompanyInformationVAT formik={formik} />
</div> </div>
......
...@@ -17,7 +17,7 @@ import { Checkbox, FormControlLabel } from '@material-ui/core'; ...@@ -17,7 +17,7 @@ import { Checkbox, FormControlLabel } from '@material-ui/core';
* *
* @returns * @returns
*/ */
const Contacts = ({ formik }) => { const Contacts = ({ formik, formikWG }) => {
// the boolean form value of "is marketing Rep. the same as company Rep.?" // the boolean form value of "is marketing Rep. the same as company Rep.?"
const isMarketingSameAsCompany = const isMarketingSameAsCompany =
formik.values.representative.marketing.sameAsCompany; formik.values.representative.marketing.sameAsCompany;
...@@ -88,6 +88,23 @@ const Contacts = ({ formik }) => { ...@@ -88,6 +88,23 @@ const Contacts = ({ formik }) => {
} }
formik.setFieldValue('representative', newRepresentativeValue); 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 = ( const generateContacts = (
......
...@@ -188,7 +188,7 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI ...@@ -188,7 +188,7 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI
</div> </div>
<div className="col-md-8"> <div className="col-md-8">
<label>Effective Date</label> <label>Effective Date</label>
<div className="preview-field">{new Date(el.effectiveDate).toLocaleDateString()}</div> <div className="preview-field">{new Date().toLocaleDateString()}</div>
</div> </div>
<div className="col-md-24"> <div className="col-md-24">
......
import { useContext } from 'react'; import { useContext } from 'react';
import MembershipContext from '../../../Context/MembershipContext'; import MembershipContext from '../../../Context/MembershipContext';
import WorkingGroupParticipationLevel from './WorkingGroupParticipationLevel'; import WorkingGroupParticipationLevel from './WorkingGroupParticipationLevel';
import WorkingGroupEffectiveDate from './WorkingGroupEffectiveDate';
import WorkingGroupsRepresentative from './WorkingGroupRepresentative'; import WorkingGroupsRepresentative from './WorkingGroupRepresentative';
import { deleteData } from '../../../Utils/formFunctionHelpers'; import { deleteData } from '../../../Utils/formFunctionHelpers';
import { import {
...@@ -12,7 +11,7 @@ import { ...@@ -12,7 +11,7 @@ import {
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles, TextField } from '@material-ui/core'; import { makeStyles, TextField } from '@material-ui/core';
import { FieldArray } from 'formik'; import { FieldArray } from 'formik';
import Loading from '../../UIComponents/Loading/Loading'; import { initialValues } from '../../UIComponents/FormComponents/formFieldModel';
/** /**
* Wrapper for Working Group Selector, * Wrapper for Working Group Selector,
...@@ -27,19 +26,7 @@ import Loading from '../../UIComponents/Loading/Loading'; ...@@ -27,19 +26,7 @@ import Loading from '../../UIComponents/Loading/Loading';
* - formField: the form field in formModels/formFieldModel.js * - formField: the form field in formModels/formFieldModel.js
*/ */
const each_workingGroupField = { const each_workingGroupField = initialValues.workingGroups[0];
id: '',
workingGroup: '',
participationLevel: '',
effectiveDate: '',
workingGroupRepresentative: {
firstName: '',
lastName: '',
jobtitle: '',
email: '',
id: '',
},
};
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
textField: { textField: {
...@@ -51,7 +38,7 @@ const useStyles = makeStyles(() => ({ ...@@ -51,7 +38,7 @@ const useStyles = makeStyles(() => ({
}, },
})); }));
const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => { const WorkingGroup = ({ formik, fullWorkingGroupList, formikOrgValue }) => {
const classes = useStyles(); const classes = useStyles();
const { currentFormId } = useContext(MembershipContext); const { currentFormId } = useContext(MembershipContext);
...@@ -87,9 +74,7 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => { ...@@ -87,9 +74,7 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
} }
}; };
return isLoading ? ( return (
<Loading />
) : (
<FieldArray <FieldArray
name={workingGroupsLabel} name={workingGroupsLabel}
render={(arrayHelpers) => ( render={(arrayHelpers) => (
...@@ -211,13 +196,8 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => { ...@@ -211,13 +196,8 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
fullWorkingGroupList={fullWorkingGroupList} fullWorkingGroupList={fullWorkingGroupList}
formik={formik} formik={formik}
/> />
<WorkingGroupEffectiveDate
name={`${workingGroupsLabel}.${index}.effectiveDate`}
index={index}
label="Effective Date"
formik={formik}
/>
<WorkingGroupsRepresentative <WorkingGroupsRepresentative
formikOrgValue={formikOrgValue}
name={`${workingGroupsLabel}.${index}.workingGroupRepresentative`} name={`${workingGroupsLabel}.${index}.workingGroupRepresentative`}
index={index} index={index}
label="Working Group Representative" label="Working Group Representative"
......
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;
...@@ -13,8 +13,8 @@ import DropdownMenu from '../../UIComponents/Inputs/DropdownMenu'; ...@@ -13,8 +13,8 @@ import DropdownMenu from '../../UIComponents/Inputs/DropdownMenu';
const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList, formik, index }) => { const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList, formik, index }) => {
const [participationLevelOptions, setParticipationLevelOptions] = useState([]); const [participationLevelOptions, setParticipationLevelOptions] = useState([]);
const [selectedWG, setSelectedWG] = useState(); const [selectedWG, setSelectedWG] = useState();
const theIndex = index; const theIndex = index;
useEffect(() => { useEffect(() => {
// If have selected working group, find this working group's // If have selected working group, find this working group's
// participation levels, and pass to the react-select option // participation levels, and pass to the react-select option
...@@ -56,11 +56,16 @@ const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList ...@@ -56,11 +56,16 @@ const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList
</div> </div>
</div> </div>
<p> <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}> <a target="_blank" rel="noreferrer" href={selectedWG?.charter}>
{selectedWG?.label} charter charter
</a> </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> </p>
</> </>
); );
......
import Input from '../../UIComponents/Inputs/Input'; import Input from '../../UIComponents/Inputs/Input';
import { formField } from '../../UIComponents/FormComponents/formFieldModel'; import { formField } from '../../UIComponents/FormComponents/formFieldModel';
import { Checkbox, FormControlLabel } from '@material-ui/core';
/** /**
* Render Working Group Representative input component * Render Working Group Representative input component
...@@ -9,15 +10,40 @@ import { formField } from '../../UIComponents/FormComponents/formFieldModel'; ...@@ -9,15 +10,40 @@ import { formField } from '../../UIComponents/FormComponents/formFieldModel';
* *
* - formField: the form field in formModels/formFieldModel.js * - formField: the form field in formModels/formFieldModel.js
*/ */
const WorkingGroupRepresentative = ({ name, index, formik }) => { const WorkingGroupRepresentative = ({ name,