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

Fix data update bug with stepper (#280)

* Updated the stepper

* updated navigation logic

* Updated navigation logic for submitForm func
parent 41b8dafc
......@@ -118,6 +118,7 @@ html {
justify-content: center;
position: relative;
padding-top: 30px;
cursor: pointer;
}
.eclipsefdn-membership-webform .step a {
text-decoration: none;
......
......@@ -64,11 +64,11 @@ export const MEMBERSHIP_LEVELS = [
];
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 = {
......
......@@ -7,7 +7,6 @@ import {
getCurrentMode,
MODE_REACT_ONLY,
MODE_REACT_API,
PATH_NAME_ARRAY,
HAS_TOKEN_EXPIRED,
} from '../Constants/Constants';
......@@ -329,27 +328,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 +344,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 +354,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,32 +364,18 @@ 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,
}
);
callSendData(
formId,
'',
matchMembershipLevelFieldsToBackend(formData, formId, userId),
''
);
callSendData(formId, '', matchMembershipLevelFieldsToBackend(formData, formId, userId), '');
break;
case 2:
callSendData(
formId,
'',
matchMembershipLevelFieldsToBackend(formData, formId, userId),
goToNextStepObj
);
callSendData(formId, '', matchMembershipLevelFieldsToBackend(formData, formId, userId), step);
break;
case 3:
......@@ -420,7 +384,7 @@ export async function executeSendDataByStep(
formId,
END_POINT.working_groups,
matchWGFieldsToBackend(item, formId),
goToNextStepObj,
step,
setFieldValueObj,
index
);
......@@ -431,24 +395,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 +422,7 @@ function callSendData(
formId,
endpoint = '',
dataBody,
goToNextStepObj,
stepNum,
setFieldValueObj,
index
) {
......@@ -490,9 +444,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 +453,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 +524,6 @@ function callSendData(
break;
}
}
if (goToNextStepObj) {
goToNextStepObj.method(
goToNextStepObj.stepNum,
goToNextStepObj.pathName
);
}
})
.catch((err) => {
console.log(err);
......
......@@ -56,175 +56,159 @@ 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,
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.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, 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 +232,19 @@ export default function Application() {
// generate the step options above the form
const renderStepper = () => (
<div className="stepper">
<Step title="Sign In" index={-1} currentStep={-1} pathName="/sign-in" />
<Step title="Sign In" index={-1} pathName="/sign-in" />
{PAGE_STEP.map((pageStep, index) => {
return (
<Step
key={index}
title={pageStep.props.label}
title={pageStep.label}
index={index}
currentStep={-1}
pathName={pageStep.props.pathName}
pathName={pageStep.pathName}
submitCompanyInfo={submitCompanyInfo}
submitMembershipLevel={submitMembershipLevel}
submitWorkingGroups={submitWorkingGroups}
submitSigningAuthority={submitSigningAuthority}
/>
);
})}
......
......@@ -224,7 +224,6 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
<CustomStepButton
previousPage=""
nextPage="/membership-level"
pageIndex={1}
/>
</form>
);
......
import { NavLink, useRouteMatch } from 'react-router-dom';
import { useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { useRouteMatch } from 'react-router-dom';
import MembershipContext from '../../../Context/MembershipContext';
/**
* Props:
......@@ -15,24 +18,46 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
* - formRef: Passed from FormikStepper. Can use Formik API
* **/
const Step = (props) => {
const { index, title, pathName } = props;
const Step = ({
index,
title,
pathName,
submitCompanyInfo,
submitMembershipLevel,
submitWorkingGroups,
submitSigningAuthority,
}) => {
const isActive = useRouteMatch(pathName);
const history = useHistory();
const { furthestPage } = useContext(MembershipContext);
const handleSubmit = () => {
// Only call submit func when user can navigate using stepper
switch (window.location.hash) {
case '#company-info':
furthestPage.index > 1 && submitCompanyInfo(true);
break;
case '#membership-level':
furthestPage.index > 2 && submitMembershipLevel(true);
break;
case '#working-groups':
furthestPage.index > 3 && submitWorkingGroups(true);
break;
case '#signing-authority':
furthestPage.index > 4 && submitSigningAuthority(true);
break;
default:
break;
}
history.push(pathName);
};
return (
<div className="step">