-
@@ -167,8 +184,8 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
size="small"
required={true}
className={classes.textField}
- error={Boolean(formik.errors.organization?.address?.country)}
- helperText={formik.errors.organization?.address?.country}
+ error={formik.touched.organization?.address?.city && Boolean(formik.errors.organization?.address?.country)}
+ helperText={formik.touched.organization?.address?.city && formik.errors.organization?.address?.country}
/>
);
}}
@@ -184,6 +201,8 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
value={formik.values.organization.address.provinceOrState}
onChange={formik.handleChange}
ariaLabel={`${organizationName.name}-address`}
+ error={Boolean(formik.errors.organization?.address?.provinceOrState)}
+ helperText={formik.errors.organization?.address?.provinceOrState}
/>
@@ -196,6 +215,8 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
value={formik.values.organization.address.postalCode}
onChange={formik.handleChange}
ariaLabel={`${organizationName.name}-address`}
+ error={Boolean(formik.errors.organization?.address?.postalCode)}
+ helperText={formik.errors.organization?.address?.postalCode}
/>
diff --git a/src/main/www/src/components/Application/CompanyInformation/CompanyInformationContacts.js b/src/main/www/src/components/Application/CompanyInformation/CompanyInformationContacts.js
index a5915e35b1dfce3cfbd2198a5e1d0d69102606a9..79c2040721a4e944214a23259789e16102765266 100644
--- a/src/main/www/src/components/Application/CompanyInformation/CompanyInformationContacts.js
+++ b/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,14 +88,26 @@ 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 = (
- representativeFields,
- prefix,
- type,
- disableInput
- ) => (
+ const generateContacts = (representativeFields, prefix, type, disableInput) => (
<>
{representativeFields.map((el, index) => (
+
+
@@ -117,6 +130,8 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
value={formik.values.organization.address.street}
onChange={formik.handleChange}
ariaLabel={`${organizationName.name}-address`}
+ error={formik.touched.organization?.address?.street && Boolean(formik.errors.organization?.address?.street)}
+ helperText={formik.errors.organization?.address?.street}
/>
-
+ {#if isPDF} +
diff --git a/src/main/www/src/App.css b/src/main/www/src/App.css
index ab73c8ba86071ead8adfe79cbe7679eb1bce329f..0b0ac52483423e5c11ef3227ebc92cf55d62f0c7 100644
--- a/src/main/www/src/App.css
+++ b/src/main/www/src/App.css
@@ -41,6 +41,8 @@ html {
display: flex;
align-items: center;
justify-content: center;
+}
+.eclipsefdn-membership-webform .loadingIcon {
margin-top: 5rem;
margin-bottom: 3rem;
}
@@ -56,7 +58,7 @@ html {
border-color: #ff0000;
}
.eclipsefdn-membership-webform .btn {
- margin: 0 10px;
+ margin: 10px;
border-radius: 5px;
}
.eclipsefdn-membership-webform .button-container {
@@ -116,6 +118,7 @@ html {
justify-content: center;
position: relative;
padding-top: 30px;
+ cursor: pointer;
}
.eclipsefdn-membership-webform .step a {
text-decoration: none;
diff --git a/src/main/www/src/Constants/Constants.js b/src/main/www/src/Constants/Constants.js
index 532315930afd5053b91d20919c790f35510818cf..205cafd8d4bc5e3817654dc3cf57397bd9c9075d 100644
--- a/src/main/www/src/Constants/Constants.js
+++ b/src/main/www/src/Constants/Constants.js
@@ -31,6 +31,7 @@ export const REVIEW = 'Review';
export const HAS_TOKEN_EXPIRED = 'HAS_TOKEN_EXPIRED';
export const LOGIN_EXPIRED_MSG = 'Your session has expired, please sign in again.';
+export const MAX_LENGTH_HELPER_TEXT = 'The value exceeds max length 255 characters'
export const PATH_NAME_ARRAY = [
'/company-info',
@@ -57,18 +58,18 @@ export const FETCH_HEADER = {
export const MEMBERSHIP_LEVELS = [
{ label: 'Strategic Member', value: 'Strategic Member' },
{
- label: 'Contributing Member (formerly referred to as Solutions Members)',
+ label: 'Contributing Member',
value: 'Contributing Member',
},
{ label: 'Associate Member', value: 'Associate Member' },
];
export const PAGE_STEP = [
- { props: { label: COMPANY_INFORMATION, pathName: '/company-info' } },
- { props: { label: MEMBERSHIP_LEVEL, pathName: '/membership-level' } },
- { props: { label: WORKING_GROUPS, pathName: '/working-groups' } },
- { props: { label: SIGNING_AUTHORITY, pathName: '/signing-authority' } },
- { props: { label: REVIEW, pathName: '/review' } },
+ { label: COMPANY_INFORMATION, pathName: '/company-info' },
+ { label: MEMBERSHIP_LEVEL, pathName: '/membership-level' },
+ { label: WORKING_GROUPS, pathName: '/working-groups' },
+ { label: SIGNING_AUTHORITY, pathName: '/signing-authority' },
+ { label: REVIEW, pathName: '/review' },
];
export const CONTACT_TYPE = {
diff --git a/src/main/www/src/Utils/formFunctionHelpers.js b/src/main/www/src/Utils/formFunctionHelpers.js
index 86d78e288464e752ac0764da56d10fd31808af6d..50d201897aa601f1e6792d8c531bd8a07086c386 100644
--- a/src/main/www/src/Utils/formFunctionHelpers.js
+++ b/src/main/www/src/Utils/formFunctionHelpers.js
@@ -7,7 +7,6 @@ import {
getCurrentMode,
MODE_REACT_ONLY,
MODE_REACT_API,
- PATH_NAME_ARRAY,
HAS_TOKEN_EXPIRED,
} from '../Constants/Constants';
@@ -179,7 +178,8 @@ export function matchContactFields(existingContactData) {
*/
export function matchWorkingGroupFields(
existingworkingGroupData,
- workingGroupsOptions
+ workingGroupsOptions,
+ existingCompanyContact,
) {
var res = [];
// Array
@@ -187,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:
@@ -198,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
+ ),
},
});
});
@@ -306,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,
@@ -329,27 +334,14 @@ export function matchWGFieldsToBackend(eachWorkingGroupData, formId) {
* @param formId - Form Id fetched from the server, sotored in membership context, used for calling APIs
* @param userId - User Id fetched from the server when sign in, sotored in membership context, used for calling APIs
*/
-export async function executeSendDataByStep(
- step,
- formData,
- formId,
- userId,
- goToNextStep,
- setFieldValueObj
-) {
- const goToNextStepObj = {
- method: goToNextStep,
- stepNum: step,
- pathName: PATH_NAME_ARRAY[step],
- };
+export async function executeSendDataByStep(step, formData, formId, userId, setFieldValueObj) {
switch (step) {
case 1:
- // only need 1 goToNextStepObj in "case 1", or it would execute it 5 times.
callSendData(
formId,
END_POINT.organizations,
matchCompanyFieldsToBackend(formData.organization, formId),
- goToNextStepObj,
+ step,
{
fieldName: setFieldValueObj.fieldName.organization,
method: setFieldValueObj.method,
@@ -358,12 +350,8 @@ export async function executeSendDataByStep(
callSendData(
formId,
END_POINT.contacts,
- matchContactFieldsToBackend(
- formData.representative.member,
- CONTACT_TYPE.COMPANY,
- formId
- ),
- '',
+ matchContactFieldsToBackend(formData.representative.member, CONTACT_TYPE.COMPANY, formId),
+ step,
{
fieldName: setFieldValueObj.fieldName.member,
method: setFieldValueObj.method,
@@ -372,12 +360,8 @@ export async function executeSendDataByStep(
callSendData(
formId,
END_POINT.contacts,
- matchContactFieldsToBackend(
- formData.representative.marketing,
- CONTACT_TYPE.MARKETING,
- formId
- ),
- '',
+ matchContactFieldsToBackend(formData.representative.marketing, CONTACT_TYPE.MARKETING, formId),
+ step,
{
fieldName: setFieldValueObj.fieldName.marketing,
method: setFieldValueObj.method,
@@ -386,12 +370,8 @@ export async function executeSendDataByStep(
callSendData(
formId,
END_POINT.contacts,
- matchContactFieldsToBackend(
- formData.representative.accounting,
- CONTACT_TYPE.ACCOUNTING,
- formId
- ),
- '',
+ matchContactFieldsToBackend(formData.representative.accounting, CONTACT_TYPE.ACCOUNTING, formId),
+ step,
{
fieldName: setFieldValueObj.fieldName.accounting,
method: setFieldValueObj.method,
@@ -403,15 +383,27 @@ export async function executeSendDataByStep(
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:
- callSendData(
- formId,
- '',
- matchMembershipLevelFieldsToBackend(formData, formId, userId),
- goToNextStepObj
- );
+ callSendData(formId, '', matchMembershipLevelFieldsToBackend(formData, formId, userId), step);
break;
case 3:
@@ -420,7 +412,7 @@ export async function executeSendDataByStep(
formId,
END_POINT.working_groups,
matchWGFieldsToBackend(item, formId),
- goToNextStepObj,
+ step,
setFieldValueObj,
index
);
@@ -431,24 +423,14 @@ export async function executeSendDataByStep(
callSendData(
formId,
END_POINT.contacts,
- matchContactFieldsToBackend(
- formData.signingAuthorityRepresentative,
- CONTACT_TYPE.SIGNING,
- formId
- ),
- goToNextStepObj,
+ matchContactFieldsToBackend(formData.signingAuthorityRepresentative, CONTACT_TYPE.SIGNING, formId),
+ step,
setFieldValueObj
);
break;
case 5:
- callSendData(
- formId,
- END_POINT.complete,
- false,
- goToNextStepObj,
- setFieldValueObj
- );
+ callSendData(formId, END_POINT.complete, false, step, setFieldValueObj);
break;
default:
@@ -468,7 +450,7 @@ function callSendData(
formId,
endpoint = '',
dataBody,
- goToNextStepObj,
+ stepNum,
setFieldValueObj,
index
) {
@@ -490,9 +472,6 @@ function callSendData(
if (getCurrentMode() === MODE_REACT_ONLY) {
console.log(`You called ${url} with Method ${method} and data body is:`);
console.log(JSON.stringify(dataBody));
- if (goToNextStepObj) {
- goToNextStepObj.method(goToNextStepObj.stepNum, goToNextStepObj.pathName);
- }
}
if (getCurrentMode() === MODE_REACT_API) {
@@ -502,7 +481,7 @@ function callSendData(
body: JSON.stringify(dataBody),
})
.then((res) => {
- if (goToNextStepObj.stepNum === 5) {
+ if (stepNum === 5) {
if (res.ok) return res;
} else {
if (res.ok) return res.json();
@@ -573,13 +552,6 @@ function callSendData(
break;
}
}
-
- if (goToNextStepObj) {
- goToNextStepObj.method(
- goToNextStepObj.stepNum,
- goToNextStepObj.pathName
- );
- }
})
.catch((err) => {
console.log(err);
diff --git a/src/main/www/src/components/Application/Application.js b/src/main/www/src/components/Application/Application.js
index d2bf601e8a7a9d1cf1f9274fed1b4f1abb4ada50..ac0f1270299048b62ed2dcf325ac67c7ad90306e 100644
--- a/src/main/www/src/components/Application/Application.js
+++ b/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)
@@ -56,175 +58,160 @@ export default function Application() {
'',
currentFormId,
currentUser.name,
- goToNextStep,
''
);
+ goToNextStep(5, '/submitted');
};
+ const submitCompanyInfo = (isUsingStepper) => {
+ const values = formikCompanyInfo.values;
+ // update the organization values
+ const organization = values.organization;
+ const representative = values.representative;
+ const purchasingAndVAT = values.purchasingAndVAT;
+ const membershipLevel = values.membershipLevel;
+ const membershipLevelLabel = values['membershipLevel-label'];
+ const signingAuthorityRepresentative = values.signingAuthorityRepresentative;
+
+ const theNewValue = {
+ ...updatedFormValues,
+ organization,
+ representative,
+ purchasingAndVAT,
+ membershipLevel,
+ 'membershipLevel-label': membershipLevelLabel,
+ workingGroups: formikWorkingGroups.values.workingGroups,
+ signingAuthorityRepresentative: signingAuthorityRepresentative,
+ };
+ setUpdatedFormValues(theNewValue);
+ console.log('updated company info: ', values);
+
+ const valueForMembershipLevelFormik = [
+ { field: 'purchasingAndVAT', value: purchasingAndVAT },
+ { field: 'membershipLevel', value: membershipLevel },
+ {
+ field: 'membershipLevel-label',
+ value: membershipLevelLabel?.label ? membershipLevelLabel : null,
+ },
+ ];
+ // set valueToUpdateFormik to membershipLevel formik to make sure the value is up to date
+ updateMembershipLevelForm(valueForMembershipLevelFormik);
+
+ const valueForSigningAuthorityFormik = [
+ {
+ field: 'signingAuthorityRepresentative',
+ value: signingAuthorityRepresentative,
+ },
+ ];
+ updateSigningAuthorityForm(valueForSigningAuthorityFormik);
+
+ const setFieldValueObj = {
+ fieldName: {
+ organization: 'organization',
+ member: 'representative.member',
+ accounting: 'representative.accounting',
+ marketing: 'representative.marketing',
+ },
+ method: formikCompanyInfo.setFieldValue,
+ };
+
+ executeSendDataByStep(1, theNewValue, currentFormId, currentUser.name, setFieldValueObj);
+ // Only need to call goToNextStep when is not using stepper
+ !isUsingStepper && goToNextStep(1, '/membership-level');
+ };
const formikCompanyInfo = useFormik({
initialValues: initialValues,
validationSchema: validationSchema[0],
- onSubmit: (values) => {
- // update the organization values
- const organization = values.organization;
- const representative = values.representative;
- const purchasingAndVAT = values.purchasingAndVAT;
- const membershipLevel = values.membershipLevel;
- const membershipLevelLabel = values['membershipLevel-label'];
- const signingAuthorityRepresentative =
- values.signingAuthorityRepresentative;
-
- const theNewValue = {
- ...updatedFormValues,
- organization,
- representative,
- purchasingAndVAT,
- membershipLevel,
- 'membershipLevel-label': membershipLevelLabel,
- signingAuthorityRepresentative: signingAuthorityRepresentative,
- };
- setUpdatedFormValues(theNewValue);
- console.log('updated company info: ', values);
-
- const valueForMembershipLevelFormik = [
- { field: 'purchasingAndVAT', value: purchasingAndVAT },
- { field: 'membershipLevel', value: membershipLevel },
- {
- field: 'membershipLevel-label',
- value: membershipLevelLabel?.label ? membershipLevelLabel : null,
- },
- ];
- // set valueToUpdateFormik to membershipLevel formik to make sure the value is up to date
- updateMembershipLevelForm(valueForMembershipLevelFormik);
-
- const valueForSigningAuthorityFormik = [
- {
- field: 'signingAuthorityRepresentative',
- value: signingAuthorityRepresentative,
- },
- ];
- updateSigningAuthorityForm(valueForSigningAuthorityFormik);
-
- const setFieldValueObj = {
- fieldName: {
- organization: 'organization',
- member: 'representative.member',
- accounting: 'representative.accounting',
- marketing: 'representative.marketing',
- },
- method: formikCompanyInfo.setFieldValue,
- };
- executeSendDataByStep(
- 1,
- theNewValue,
- currentFormId,
- currentUser.name,
- goToNextStep,
- setFieldValueObj
- );
- },
+ onSubmit: () => submitCompanyInfo(),
});
+ const submitMembershipLevel = (isUsingStepper) => {
+ const values = formikMembershipLevel.values;
+ // update the membershipLevel values
+ const membershipLevel = values.membershipLevel;
+ const membershipLevelLabel = values['membershipLevel-label'];
+ setUpdatedFormValues({
+ ...updatedFormValues,
+ membershipLevel,
+ 'membershipLevel-label': membershipLevelLabel,
+ });
+ console.log('updated membership level: ', values);
+
+ const valueToUpdateFormik = [
+ { field: 'membershipLevel', value: membershipLevel },
+ { field: 'membershipLevel-label', value: membershipLevelLabel },
+ ];
+ // set valueToUpdateFormik to CompanyInfo formik to make sure the value is up to date
+ updateCompanyInfoForm(valueToUpdateFormik);
+
+ executeSendDataByStep(2, values, currentFormId, currentUser.name);
+ !isUsingStepper && goToNextStep(2, '/working-groups');
+ };
const formikMembershipLevel = useFormik({
initialValues: initialValues,
validationSchema: validationSchema[1],
- onSubmit: (values) => {
- // update the membershipLevel values
- const membershipLevel = values.membershipLevel;
- const membershipLevelLabel = values['membershipLevel-label'];
- setUpdatedFormValues({
- ...updatedFormValues,
- membershipLevel,
- 'membershipLevel-label': membershipLevelLabel,
- });
- console.log('updated membership level: ', values);
-
- const valueToUpdateFormik = [
- { field: 'membershipLevel', value: membershipLevel },
- { field: 'membershipLevel-label', value: membershipLevelLabel },
- ];
- // set valueToUpdateFormik to CompanyInfo formik to make sure the value is up to date
- updateCompanyInfoForm(valueToUpdateFormik);
-
- executeSendDataByStep(
- 2,
- values,
- currentFormId,
- currentUser.name,
- goToNextStep
- );
- },
+ onSubmit: () => submitMembershipLevel(),
});
+ const submitWorkingGroups = (isUsingStepper) => {
+ const values = formikWorkingGroups.values;
+ // update the workingGroups values
+ const workingGroups = values.workingGroups;
+ setUpdatedFormValues({ ...updatedFormValues, workingGroups });
+ console.log('updated working groups: ', values);
+
+ if (!values.skipJoiningWG) {
+ // If the user is joining at least 1 wg, then make related API call
+ const setFieldValueObj = {
+ fieldName: 'workingGroups',
+ method: formikWorkingGroups.setFieldValue,
+ };
+
+ executeSendDataByStep(3, values, currentFormId, currentUser.name, setFieldValueObj);
+ !isUsingStepper && goToNextStep(3, '/signing-authority');
+ } else if (!isUsingStepper) {
+ // If the user is NOT using stepper and NOT joining any wg, then go to next page directly
+ goToNextStep(3, '/signing-authority');
+ }
+ };
const formikWorkingGroups = useFormik({
initialValues: initialValues,
validationSchema: validationSchema[2],
- onSubmit: (values) => {
- // update the workingGroups values
- const workingGroups = values.workingGroups;
- setUpdatedFormValues({ ...updatedFormValues, workingGroups });
- console.log('updated working groups: ', values);
-
- if (values.isJoiningWG){
- // If the user is joining at least 1 wg, then make related API call
- const setFieldValueObj = {
- fieldName: 'workingGroups',
- method: formikWorkingGroups.setFieldValue,
- };
-
- executeSendDataByStep(
- 3,
- values,
- currentFormId,
- currentUser.name,
- goToNextStep,
- setFieldValueObj
- );
- } else {
- // If the user is NOT joining any wg, then go to next page directly
- goToNextStep(3, '/signing-authority')
- }
-
- },
+ onSubmit: () => submitWorkingGroups(),
});
+ const submitSigningAuthority = (isUsingStepper) => {
+ const values = formikSigningAuthority.values;
+ // update the signingAuthorityRepresentative values
+ const signingAuthorityRepresentative = values.signingAuthorityRepresentative;
+ setUpdatedFormValues({
+ ...updatedFormValues,
+ signingAuthorityRepresentative,
+ });
+ console.log('updated SigningAuthority: ', values);
+
+ const valueToUpdateFormik = [
+ {
+ field: 'signingAuthorityRepresentative',
+ value: signingAuthorityRepresentative,
+ },
+ ];
+ // set valueToUpdateFormik to CompanyInfo formik to make sure the value is up to date
+ updateCompanyInfoForm(valueToUpdateFormik);
+ const setFieldValueObj = {
+ fieldName: 'signingAuthorityRepresentative',
+ method: {
+ signingAuthority: formikSigningAuthority.setFieldValue,
+ companyInfo: formikCompanyInfo.setFieldValue,
+ },
+ };
+ executeSendDataByStep(4, values, currentFormId, currentUser.name, setFieldValueObj);
+ !isUsingStepper && goToNextStep(4, '/review');
+ };
const formikSigningAuthority = useFormik({
initialValues: initialValues,
validationSchema: validationSchema[3],
- onSubmit: (values) => {
- // update the signingAuthorityRepresentative values
- const signingAuthorityRepresentative =
- values.signingAuthorityRepresentative;
- setUpdatedFormValues({
- ...updatedFormValues,
- signingAuthorityRepresentative,
- });
- console.log('updated SigningAuthority: ', values);
-
- const valueToUpdateFormik = [
- {
- field: 'signingAuthorityRepresentative',
- value: signingAuthorityRepresentative,
- },
- ];
- // set valueToUpdateFormik to CompanyInfo formik to make sure the value is up to date
- updateCompanyInfoForm(valueToUpdateFormik);
- const setFieldValueObj = {
- fieldName: 'signingAuthorityRepresentative',
- method: {
- signingAuthority: formikSigningAuthority.setFieldValue,
- companyInfo: formikCompanyInfo.setFieldValue,
- },
- };
- executeSendDataByStep(
- 4,
- values,
- currentFormId,
- currentUser.name,
- goToNextStep,
- setFieldValueObj
- );
- },
+ onSubmit: () => submitSigningAuthority(),
});
const handleLoginExpired = useCallback(() => {
@@ -248,16 +235,19 @@ export default function Application() {
// generate the step options above the form
const renderStepper = () => (
@@ -54,6 +61,8 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
inputValue={formik.values.organization.type}
optionsArray={OPTIONS_FOR_ORG_TYPE}
handleChange={formik.handleChange}
+ error={formik.touched.organization?.type && Boolean(formik.errors.organization?.type)}
+ helperText={formik.errors.organization?.type}
/>
Eclipse Foundation AISBL Membership Application date submitted: {now}
+Eclipse Foundation AISBL Membership Application
+Date submitted: {time:format(now,'d MMM uuuu, HH:mm')}
{#if includePreamble}Dear {name},
-Thank you for submitting the member enrollment form on behalf of your organization. Our team will review your application and follow up within 2 business days.
+Thank you for submitting the Membership Application Form on behalf of your organization. Our team will review your application and follow up within 2 business days.
Meanwhile, if you have any questions, please reach out to us at membership.coordination@eclipse-foundation.org.
Best regards,
Eclipse Foundation Membership Coordination
{/if} -New form submission by: {name} ({data.form.userID})
+Form submission by: {name} ({data.form.userID})
Organization
-Name: {data.org.legalName}
-Aggregate Revenue: {data.org.aggregateRevenue}
-Employee count: {data.org.employeeCount}
+Name: {data.org.legalName}
+Aggregate Revenue: {data.org.aggregateRevenue}
+Employee Count: {data.org.employeeCount}
Organization Type: {data.org.organizationType}
-Twitter: {data.org.twitterHandle}
- Requires purchase order: {data.form.purchaseOrderRequired} - VAT number: {data.form.vatNumber} -VAT Registration country: {data.form.registrationCountry}
+Twitter: {data.org.twitterHandle}
+Requires Purchase Order: {data.form.purchaseOrderRequired}
+VAT Number: {data.form.vatNumber}
+VAT Registration Country: {data.form.registrationCountry}
+Membership Level: {data.form.membershipLevel}
Address
@@ -70,7 +72,18 @@ {/for} -
+ {#if isPDF} +
As a new Member:
+-
+
- You agree to publicly support the Eclipse Foundation and its Purpose. +
- You acknowledge your commitment in principle to comply with the Bylaws, the Internal Rules, the Eclipse Foundation Antitrust Policy, IP Policy, and any and all additional policies, procedures and other governing rules of the Eclipse Foundation. +
- You agree to provide Eclipse Foundation with your logo (or instructions to obtain your logo) in accordance with Section 2.3 of the Eclipse Foundation Membership Agreement. When providing your logo, be sure to include a reference or link to any logo and trademark usage guidelines you have.
+ Our Membership Coordination team will work with you to complete this after your Membership Application is processed.
+
Thank you for completing the Membership Application Process. This PDF captures the information you have provided to us. Please review this information as it becomes a part of your formal application to the Eclipse Foundation.
+Should you wish to update any of the information, please reach out to our Membership team at membership.coordination@eclipse-foundation.org
+ {/if} +This is an automatic message from https://membership.eclipse.org
Twitter: @EclipseFdn
-
Company Information
- 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. +
++ **** NOTE: Committers wishing to complete the Eclipse Foundation membership process should not use this form, + but instead should visit{' '} + + here + + .
@@ -89,8 +98,10 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
inputName={organizationRevenue.revenue.name}
inputValue={formik.values.organization.revenue}
optionsArray={OPTIONS_FOR_REVENUE}
- helperText={HELPERTEXT_FOR_REVENUE}
+ explanationHelperText={HELPERTEXT_FOR_REVENUE}
handleChange={(ev) => handleFieldChange(ev.target.value, 'organization.revenue')}
+ error={formik.touched.organization?.revenue && Boolean(formik.errors.organization?.revenue)}
+ helperText={formik.errors.organization?.revenue}
/>
@@ -100,6 +111,8 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
inputValue={formik.values.organization.employeeCount}
optionsArray={OPTIONS_FOR_EMPLOYEE_COUNT}
handleChange={(ev) => handleFieldChange(ev.target.value, 'organization.employeeCount')}
+ error={formik.touched.organization?.employeeCount && Boolean(formik.errors.organization?.employeeCount)}
+ helperText={formik.errors.organization?.employeeCount}
/>
@@ -128,6 +143,8 @@ const CompanyInformationCompany = ({ formik, useStyles }) => {
value={formik.values.organization.address.city}
onChange={formik.handleChange}
ariaLabel={`${organizationName.name}-address`}
+ error={formik.touched.organization?.address?.city && Boolean(formik.errors.organization?.address?.city)}
+ helperText={formik.errors.organization?.address?.city}
/>
@@ -107,12 +119,13 @@ const Contacts = ({ formik }) => {
requiredMark={true}
disableInput={disableInput}
onChange={
- type === 'member'
- ? (ev) => handleMemberInputChange(ev.target.value, el.name)
- : formik.handleChange
+ type === 'member' ? (ev) => handleMemberInputChange(ev.target.value, el.name) : formik.handleChange
}
value={formik.values.representative?.[type]?.[el.name]}
- error={Boolean(formik.errors.representative?.[type]?.[el.name])}
+ error={
+ formik.touched.representative?.[type]?.[el.name] &&
+ Boolean(formik.errors.representative?.[type]?.[el.name])
+ }
helperText={formik.errors.representative?.[type]?.[el.name]}
/>
diff --git a/src/main/www/src/components/Application/CompanyInformation/CompanyInformationVAT.js b/src/main/www/src/components/Application/CompanyInformation/CompanyInformationVAT.js
index 90df1818fbb86b69f8d55d105a751c4596e1cd77..08a7aac93eadd5fb2edd9f5f317c00fa2f55ef93 100644
--- a/src/main/www/src/components/Application/CompanyInformation/CompanyInformationVAT.js
+++ b/src/main/www/src/components/Application/CompanyInformation/CompanyInformationVAT.js
@@ -23,17 +23,11 @@ export default function CompanyInformationVAT({ formik }) {
return (
<>
-
+
Purchasing Process
*
-
- Does your organization require a Purchase Order to facilitate payment of - your membership dues? -
+Does your organization require a Purchase Order to facilitate payment of your membership dues?
Company Information
-
- {values.organization.legalName}
+
+ {values.organization.legalName}
+
-
- {values.organization.type}
-
-
-
{values.organization.twitterHandle}
+
+ {OPTIONS_FOR_ORG_TYPE.find((item) => item.value === values.organization.type)?.label}
+
-
+
-
+
+
+ {values.organization.twitterHandle}
+ {values.organization.revenue}
+
@@ -188,7 +192,7 @@ const Review: React.FC = ({ values, submitForm, isTermChecked, setI
{values.organization.employeeCount}
-
{new Date(el.effectiveDate).toLocaleDateString()}
+ {new Date().toLocaleDateString()}
diff --git a/src/main/www/src/components/Application/SignIn/SignIn.js b/src/main/www/src/components/Application/SignIn/SignIn.js
index baeb42638d0c08e48950079728e51e06c9dece00..defb3da3eda721a3bf4775181098234dd2b9ea44 100644
--- a/src/main/www/src/components/Application/SignIn/SignIn.js
+++ b/src/main/www/src/components/Application/SignIn/SignIn.js
@@ -60,26 +60,21 @@ class SignIn extends React.Component {
this.context.needLoadingSignIn ? (
+
+
-
)}
{getCurrentMode() === MODE_REACT_API && (
-
- Sign In
+
+ Log in
)}
diff --git a/src/main/www/src/components/Application/SignIn/SignInIntroduction.js b/src/main/www/src/components/Application/SignIn/SignInIntroduction.js
index b4f4d5fe982359c771a0588eb96147d6a3f416f6..2ebd1369a1aa407c3d065a7112f06d1fbad9cfb9 100644
--- a/src/main/www/src/components/Application/SignIn/SignInIntroduction.js
+++ b/src/main/www/src/components/Application/SignIn/SignInIntroduction.js
@@ -1,21 +1,27 @@
const SignInIntroduction = () => {
return (
- handleCheckboxChange(ev.target.checked, 'marketing')}
+ />
+ }
+ label="Same as Member Representative"
+ />
+ Get started by logging in with your Eclipse Foundation account: +
{getCurrentMode() === MODE_REACT_ONLY && (
-
+ (
@@ -158,30 +143,17 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
const wgLabelPropery = `${workingGroupsLabel}.${index}.workingGroup-label`;
// if array.find returns a wg obejct, then it means it's already selected
- const selectedWGValue =
- formik.values.workingGroups.find((item) => {
- if (
- item.workingGroup?.label === inputValue &&
- item['workingGroup-label'] === inputValue
- ) {
- return true;
- } else {
- return false;
- }
- });
+ const selectedWGValue = formik.values.workingGroups.find(
+ (item) =>
+ item.workingGroup?.label === inputValue && item['workingGroup-label'] === inputValue
+ );
// if the wg user types is already selected somewhere else,
// then make the validation fail and show error message
if (selectedWGValue) {
- formik.setFieldValue(
- wgLabelPropery,
- `${inputValue} already selected`
- );
+ formik.setFieldValue(wgLabelPropery, `${inputValue} already selected`);
} else {
- formik.setFieldValue(
- wgLabelPropery,
- inputValue || null
- );
+ formik.setFieldValue(wgLabelPropery, inputValue || null);
}
}}
label={WORKING_GROUPS}
@@ -191,9 +163,11 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
required={true}
className={classes.textField}
error={Boolean(
- formik.errors.workingGroups?.[index]?.['workingGroup']
+ formik.touched.workingGroups?.[index]?.['workingGroup'] &&
+ formik.errors.workingGroups?.[index]?.['workingGroup']
)}
helperText={
+ formik.touched.workingGroups?.[index]?.['workingGroup'] &&
formik.errors.workingGroups?.[index]?.['workingGroup']
}
/>
@@ -211,13 +185,8 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
fullWorkingGroupList={fullWorkingGroupList}
formik={formik}
/>
- {
- const theIndex = index;
- return (
- <>
-
+
diff --git a/src/main/www/src/components/Application/SubmitSuccess/SubmitSuccess.js b/src/main/www/src/components/Application/SubmitSuccess/SubmitSuccess.js
index 3d25d2ef3263ecec1435d56e166a0f31abdae1e7..26c7a4c2e9b0ad3d1d16fa880f3bfc6f42408ead 100644
--- a/src/main/www/src/components/Application/SubmitSuccess/SubmitSuccess.js
+++ b/src/main/www/src/components/Application/SubmitSuccess/SubmitSuccess.js
@@ -13,14 +13,49 @@ const SubmitSuccess = () => {
return (
<>
+ 
+
+
+
+
- Membership Application Form
-
+ Please complete the Membership Application Form as part of the overall membership application and enrolment
+ process. Completion of this Form is a required formal step in the{' '}
+
+ Membership Application Process
+
+ .
- Please complete the Member Application Form as part of the overall - membership application and enrolment process. Note that completion of - this Form is a required formal step in the Membership Application - Process. + Once you complete and submit this Application Form, we will forward the various legal agreements for + electronic execution, so please be sure to review these legal documents in advance. For more information, + please see{' '} + + here + + .
Confirmation message on submission:
-We thank you for completing the membership application.
+We thank you for completing the application process.
+As next steps,
+-
+
-
+
+ You will receive an automated email capturing the information you have provided. Please review this + information, and let us know of any errors or changes required by emailing{' '} + + membership.coordination@eclipse-foundation.org + + . +
+
+ -
+
+ Within the next two business days, our membership coordination team will send via HelloSign’s document + signature system the membership documents to be executed. +
-
+
- + If you are the signing authority indicated on the application, then the documents will be sent directly + to you. + +
- + If you indicated someone else in your organization is the signing authority, our membership coordination + team will let you know of the status of the signing process - but the documents will be sent directly to + the signing authority. + +
+ - + Once the membership document(s) are executed by your organization, the Eclipse Foundation’s Executive Director + will countersign and the completed documents will be returned to you by our membership coordination team. They + will also begin the ongboarding walk you and your other team members through our onboarding process. + +
- Our membership coordination team will send a ready to sign membership - documents to the signing authority. If you have not received the - ready-to-sign agreement within 2 business days, please contact{' '} + If you have any questions, or have not received notification of the signing process being underway after 2 + business days, please contact{' '} membership.coordination@eclipse-foundation.org + .
); diff --git a/src/main/www/src/components/Application/WorkingGroups/WorkingGroup.js b/src/main/www/src/components/Application/WorkingGroups/WorkingGroup.js index edf604da323e91b8f9df98d89fa3988e0a79bdae..9c4fe16049d9725050fb85e303e4fa5add8a15c9 100644 --- a/src/main/www/src/components/Application/WorkingGroups/WorkingGroup.js +++ b/src/main/www/src/components/Application/WorkingGroups/WorkingGroup.js @@ -1,7 +1,6 @@ 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 ? ( -- What is the effective date for your Membership Agreement/ Working Group - Participation Agreement? - * -
-
-
-
- );
-};
-
-export default EffectiveDate;
diff --git a/src/main/www/src/components/Application/WorkingGroups/WorkingGroupParticipationLevel.js b/src/main/www/src/components/Application/WorkingGroups/WorkingGroupParticipationLevel.js
index abdcdf4a4d49f10877e813660078fca21a3e3730..99583052d19058e532c274583d68688054626a4f 100644
--- a/src/main/www/src/components/Application/WorkingGroups/WorkingGroupParticipationLevel.js
+++ b/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
@@ -51,16 +51,26 @@ const ParticipationLevel = ({ name, workingGroupUserJoined, fullWorkingGroupList
inputValue={formik.values.workingGroups[theIndex]['participationLevel']}
optionsArray={participationLevelOptions}
handleChange={formik.handleChange}
+ error={
+ formik.touched.workingGroups?.[theIndex]?.['participationLevel'] &&
+ Boolean(formik.errors.workingGroups?.[theIndex]?.['participationLevel'])
+ }
+ helperText={formik.errors.workingGroups?.[theIndex]?.['participationLevel']}
/>
)}
-
- - 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{' '} - {selectedWG?.label} charter - - . + charter +
{' '} + 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{' '} + contact our membership team with any + questions. ); diff --git a/src/main/www/src/components/Application/WorkingGroups/WorkingGroupRepresentative.js b/src/main/www/src/components/Application/WorkingGroups/WorkingGroupRepresentative.js index 91721787d5861443c6be3a9bf846bc71c396292d..51ac5d51c26c8a9d2788ccebcdc7eb15a38e629a 100644 --- a/src/main/www/src/components/Application/WorkingGroups/WorkingGroupRepresentative.js +++ b/src/main/www/src/components/Application/WorkingGroups/WorkingGroupRepresentative.js @@ -1,5 +1,6 @@ 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 }) => { +const WorkingGroupRepresentative = ({ name, index, formik, formikOrgValue }) => { const { workingGroupRepresentative } = formField; const theIndex = index; + + const handleCheckboxChange = (isChecked) => { + const repInfo = isChecked + ? formikOrgValue.representative.member + : formik.values.workingGroups[theIndex].workingGroupRepresentative; + + const newValues = { + ...repInfo, + sameAsCompany: isChecked, + id: formik.values.workingGroups[theIndex].workingGroupRepresentative.id, + }; + formik.setFieldValue(`workingGroups[${theIndex}].workingGroupRepresentative`, newValues); + }; + return ( <>- Who is the working group representative? + Who is to serve as your organization’s Member Representative with the Working Group? *
+
{workingGroupRepresentative.map((el) => (
@@ -28,23 +54,15 @@ const WorkingGroupRepresentative = ({ name, index, formik }) => {
ariaLabel={`${name} ${name}.${el.name}`}
onChange={formik.handleChange}
requiredMark={true}
- value={
- formik.values.workingGroups[theIndex]
- .workingGroupRepresentative[`${el.name}`]
- }
+ disableInput={formik.values.workingGroups[theIndex].workingGroupRepresentative.sameAsCompany}
+ value={formik.values.workingGroups[theIndex].workingGroupRepresentative[`${el.name}`]}
error={
- formik.touched.workingGroups?.[theIndex]
- ?.workingGroupRepresentative?.[`${el.name}`] &&
- Boolean(
- formik.errors.workingGroups?.[theIndex]
- ?.workingGroupRepresentative?.[`${el.name}`]
- )
+ formik.touched.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`] &&
+ Boolean(formik.errors.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`])
}
helperText={
- formik.touched.workingGroups?.[theIndex]
- ?.workingGroupRepresentative?.[`${el.name}`] &&
- formik.errors.workingGroups?.[theIndex]
- ?.workingGroupRepresentative?.[`${el.name}`]
+ formik.touched.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`] &&
+ formik.errors.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`]
}
/>
diff --git a/src/main/www/src/components/Application/WorkingGroups/WorkingGroupsWrapper.js b/src/main/www/src/components/Application/WorkingGroups/WorkingGroupsWrapper.js
index d5ba5a6e4b753b37c151b01c21e92882883241d5..4ad4042e51a14243ae6a25e5c75f23943e7de42a 100644
--- a/src/main/www/src/components/Application/WorkingGroups/WorkingGroupsWrapper.js
+++ b/src/main/www/src/components/Application/WorkingGroups/WorkingGroupsWrapper.js
@@ -7,7 +7,6 @@ import {
requestErrorHandler,
scrollToTop,
} from '../../../Utils/formFunctionHelpers';
-import Loading from '../../UIComponents/Loading/Loading';
import {
END_POINT,
API_PREFIX_FORM,
@@ -48,24 +47,16 @@ import { initialValues } from '../../UIComponents/FormComponents/formFieldModel'
* - formField: the form field in formModels/formFieldModel.js
*/
-let hasWGData = false;
-
-const WorkingGroupsWrapper = ({ formik, isStartNewForm }) => {
+const WorkingGroupsWrapper = ({ formik, formikOrgValue, fullWorkingGroupList, workingGroupsUserJoined }) => {
const { currentFormId } = useContext(MembershipContext);
- const { setFieldValue } = formik;
- const [isLoading, setIsLoading] = useState(true);
- const [workingGroupsUserJoined, setWorkingGroupsUserJoined] = useState([]);
- const [fullWorkingGroupList, setFullWorkingGroupList] = useState([]);
const [shouldOpen, setShouldOpen] = useState(false);
- const handleIsJoiningWG = () => {
- const isJoiningWG = formik.values.isJoiningWG;
-
- if (isJoiningWG) {
- setShouldOpen(true);
+ const handleSkipJoiningWG = () => {
+ const skipJoiningWG = formik.values.skipJoiningWG;
+ if (skipJoiningWG) {
+ formik.setFieldValue('skipJoiningWG', !skipJoiningWG);
} else {
- formik.setFieldValue('isJoiningWG', !isJoiningWG);
- formik.setFieldValue('workingGroups', initialValues.workingGroups);
+ setShouldOpen(true);
}
};
@@ -74,17 +65,13 @@ const WorkingGroupsWrapper = ({ formik, isStartNewForm }) => {
};
const handleClearData = () => {
- // if user uncheck it, then we need to reset WG form
+ // if user check it, we need to delete all wgs in formik and db
formik.values.workingGroups.map((item) => {
- deleteData(
- currentFormId,
- END_POINT.working_groups,
- item.id,
- formik.resetForm,
- ''
- );
+ deleteData(currentFormId, END_POINT.working_groups, item.id, console.log, `Deleted ${item?.workingGroup?.label}`);
return null;
});
+ formik.setFieldValue('skipJoiningWG', true);
+ formik.setFieldValue('workingGroups', initialValues.workingGroups);
closeModal();
};
@@ -92,137 +79,20 @@ const WorkingGroupsWrapper = ({ formik, isStartNewForm }) => {
scrollToTop();
}, []);
- // Fetch data only once and prefill data, as long as
- // fetchWorkingGroupsData Function does not change,
- // will not cause re-render again
- useEffect(() => {
- // Fetch the full availabe working group list that user can join
- const fetchAvailableFullWorkingGroupList = () => {
- let url_prefix_local;
- if (getCurrentMode() === MODE_REACT_ONLY) {
- url_prefix_local = 'membership_data';
- setFullWorkingGroupList(FULL_WORKING_GROUP_LIST_FOR_REACT_ONLY);
- return;
- }
-
- if (getCurrentMode() === MODE_REACT_API) {
- url_prefix_local = api_prefix() + '/';
- }
-
- fetch(url_prefix_local + END_POINT.working_groups, {
- headers: FETCH_HEADER,
- })
- .then((res) => {
- if (res.ok) return res.json();
-
- requestErrorHandler(res.status);
- throw res.status;
- })
- .then((data) => {
- let options = data.map((item) => ({
- label: item.title,
- value: item.title,
- participation_levels: item.levels,
- charter: item.resources.charter
- }));
- setFullWorkingGroupList(options);
- })
- .catch((err) => {
- requestErrorHandler(err);
- console.log(err);
- });
- };
-
- fetchAvailableFullWorkingGroupList();
- }, []);
-
- useEffect(() => {
- // Fetch the working groups user has joined
- const fetchWorkingGroupsUserJoined = () => {
- // All pre-process: if running without server,
- // use fake json data; if running with API, use API
-
- let url_prefix_local;
- let url_suffix_local = '';
- if (getCurrentMode() === MODE_REACT_ONLY) {
- url_prefix_local = 'membership_data';
- url_suffix_local = '.json';
- }
-
- if (getCurrentMode() === MODE_REACT_API) {
- url_prefix_local = API_PREFIX_FORM;
- }
-
- fetch(
- url_prefix_local +
- `/${currentFormId}/` +
- END_POINT.working_groups +
- url_suffix_local,
- {
- headers: FETCH_HEADER,
- }
- )
- .then((res) => {
- if (res.ok) return res.json();
-
- requestErrorHandler(res.status);
- throw res.status;
- })
- .then((data) => {
- if (data.length) {
- // matchWorkingGroupFields(): Call the the function to map
- // the retrived working groups backend data to fit frontend, and
- // setFieldValue(): Prefill Data --> Call the setFieldValue
- // of Formik, to set workingGroups field with the mapped data
- const theGroupsUserJoined = matchWorkingGroupFields(
- data,
- fullWorkingGroupList
- );
- setWorkingGroupsUserJoined(theGroupsUserJoined);
- setFieldValue('isJoiningWG', true);
- setFieldValue('workingGroups', theGroupsUserJoined);
- hasWGData = true;
- }
- setIsLoading(false);
- })
- .catch((err) => {
- requestErrorHandler(err);
- console.log(err);
- });
- };
-
- if (!isStartNewForm && !hasWGData && fullWorkingGroupList.length > 0) {
- // continue with an existing one and there is no working group data
- fetchWorkingGroupsUserJoined();
- } else {
- setIsLoading(false);
- }
- }, [isStartNewForm, currentFormId, fullWorkingGroupList, setFieldValue]);
-
- if (isLoading) {
- return