Skip to content

GitLab

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

Added 3 terms for issue237 (#238)

parent d44552d3
Hide whitespace changes
Inline Side-by-side
src/main/www/src/components/Application/Application.js
View file @ c630bd02
......@@ -24,6 +24,7 @@ export default function Application() {
const [updatedFormValues, setUpdatedFormValues] = useState(initialValues);
const [isStartNewForm, setIsStartNewForm] = useState(true);
const [isLoginExpired, setIsLoginExpired] = useState(false);
const [isTermChecked, setIsTermChecked] = useState(false);
const goToNextStep = (pageIndex, nextPage) => {
if (furthestPage.index <= pageIndex)
......@@ -337,7 +338,12 @@ export default function Application() {
<Route path="/review">
{renderStepper()}
{furthestPage.index >= 5 ? (
<Review values={updatedFormValues} submitForm={submitForm} />
<Review
values={updatedFormValues}
submitForm={submitForm}
isTermChecked={isTermChecked}
setIsTermChecked={setIsTermChecked}
/>
) : (
<Redirect to={furthestPage.pathName} />
)}
......
src/main/www/src/components/Application/Review/Review.tsx
View file @ c630bd02
......@@ -2,13 +2,20 @@ import React, { useEffect } from 'react';
import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
import { FormValue } from '../../../Interfaces/form_interface';
import { scrollToTop } from '../../../Utils/formFunctionHelpers';
import { FormControlLabel, Checkbox } from '@material-ui/core';
interface ReviewProps {
values: FormValue;
submitForm: () => void;
isTermChecked: boolean;
setIsTermChecked: (param: boolean) => void;
}
const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setIsTermChecked }) => {
const handleIsTermChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsTermChecked(event.target.checked);
};
useEffect(() => {
scrollToTop();
}, []);
......@@ -20,12 +27,10 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
submitForm();
}}
>
<h1 className="fw-600 h2">
Review and Submit your Completed Application
</h1>
<h1 className="fw-600 h2">Review and Submit your Completed Application</h1>
<p>
Please review your completed membership application form. If you would
like to make changes to the information, please click the back button.
Please review your completed membership application form. If you would like to make changes to the information,
please click the back button.
</p>
<p>
Please click <strong>submit</strong> when ready.
......@@ -34,15 +39,11 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<h2 className="fw-600 h3">Company Information</h2>
<div className="row">
<div className="col-md-16">
<div className="margin-top-25 preview-field">
{values.organization.legalName}
</div>
<div className="margin-top-25 preview-field">{values.organization.legalName}</div>
</div>
<div className="col-md-8">
<label>twitter</label>
<div className="preview-field">
{values.organization.twitterHandle}
</div>
<div className="preview-field">{values.organization.twitterHandle}</div>
</div>
</div>
......@@ -50,33 +51,23 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-8">
<label>Street</label>
<div className="preview-field">
{values.organization.address.street}
</div>
<div className="preview-field">{values.organization.address.street}</div>
</div>
<div className="col-md-4">
<label>City</label>
<div className="preview-field">
{values.organization.address.city}
</div>
<div className="preview-field">{values.organization.address.city}</div>
</div>
<div className="col-md-4">
<label>province/State</label>
<div className="preview-field">
{values.organization.address.provinceOrState}
</div>
<div className="preview-field">{values.organization.address.provinceOrState}</div>
</div>
<div className="col-md-4">
<label>Country</label>
<div className="preview-field">
{values.organization.address.country}
</div>
<div className="preview-field">{values.organization.address.country}</div>
</div>
<div className="col-md-4">
<label>PostalCode</label>
<div className="preview-field">
{values.organization.address.postalCode}
</div>
<div className="preview-field">{values.organization.address.postalCode}</div>
</div>
</div>
......@@ -84,27 +75,19 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-6">
<label>First Name</label>
<div className="preview-field">
{values.representative.member.firstName}
</div>
<div className="preview-field">{values.representative.member.firstName}</div>
</div>
<div className="col-md-6">
<label>Last Name</label>
<div className="preview-field">
{values.representative.member.lastName}
</div>
<div className="preview-field">{values.representative.member.lastName}</div>
</div>
<div className="col-md-6">
<label>Job Title</label>
<div className="preview-field">
{values.representative.member.jobtitle}
</div>
<div className="preview-field">{values.representative.member.jobtitle}</div>
</div>
<div className="col-md-6">
<label>Email</label>
<div className="preview-field">
{values.representative.member.email}
</div>
<div className="preview-field">{values.representative.member.email}</div>
</div>
</div>
......@@ -112,27 +95,19 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-6">
<label>First Name</label>
<div className="preview-field">
{values.representative.marketing.firstName}
</div>
<div className="preview-field">{values.representative.marketing.firstName}</div>
</div>
<div className="col-md-6">
<label>Last Name</label>
<div className="preview-field">
{values.representative.marketing.lastName}
</div>
<div className="preview-field">{values.representative.marketing.lastName}</div>
</div>
<div className="col-md-6">
<label>Job Title</label>
<div className="preview-field">
{values.representative.marketing.jobtitle}
</div>
<div className="preview-field">{values.representative.marketing.jobtitle}</div>
</div>
<div className="col-md-6">
<label>Email</label>
<div className="preview-field">
{values.representative.marketing.email}
</div>
<div className="preview-field">{values.representative.marketing.email}</div>
</div>
</div>
......@@ -140,27 +115,19 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-6">
<label>First Name</label>
<div className="preview-field">
{values.representative.accounting.firstName}
</div>
<div className="preview-field">{values.representative.accounting.firstName}</div>
</div>
<div className="col-md-6">
<label>Last Name</label>
<div className="preview-field">
{values.representative.accounting.lastName}
</div>
<div className="preview-field">{values.representative.accounting.lastName}</div>
</div>
<div className="col-md-6">
<label>Job Title</label>
<div className="preview-field">
{values.representative.accounting.jobtitle}
</div>
<div className="preview-field">{values.representative.accounting.jobtitle}</div>
</div>
<div className="col-md-6">
<label>Email</label>
<div className="preview-field">
{values.representative.accounting.email}
</div>
<div className="preview-field">{values.representative.accounting.email}</div>
</div>
</div>
......@@ -168,23 +135,17 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-8">
<label>Require Purchasing Process</label>
<div className="preview-field">
{values.purchasingAndVAT.purchasingProcess}
</div>
<div className="preview-field">{values.purchasingAndVAT.purchasingProcess}</div>
</div>
<div className="col-md-8">
<label>VAT Number</label>
<div className="preview-field">
{values.purchasingAndVAT.vatNumber}
</div>
<div className="preview-field">{values.purchasingAndVAT.vatNumber}</div>
</div>
<div className="col-md-8">
<label>Country of Registration</label>
<div className="preview-field">
{values.purchasingAndVAT.countryOfRegistration}
</div>
<div className="preview-field">{values.purchasingAndVAT.countryOfRegistration}</div>
</div>
</div>
......@@ -204,9 +165,7 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-8">
<label>Working group</label>
<div className="preview-field">
{el['workingGroup']['label']}
</div>
<div className="preview-field">{el['workingGroup']['label']}</div>
</div>
<div className="col-md-8">
<label>Intended Participation Level</label>
......@@ -214,39 +173,27 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
</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(el.effectiveDate).toLocaleDateString()}</div>
</div>
<div className="col-md-24">
<p className="h4 fw-600 margin-top-25">
The working Group Representative
</p>
<p className="h4 fw-600 margin-top-25">The working Group Representative</p>
</div>
<div className="col-md-6">
<label>First Name</label>
<div className="preview-field">
{el.workingGroupRepresentative.firstName}
</div>
<div className="preview-field">{el.workingGroupRepresentative.firstName}</div>
</div>
<div className="col-md-6">
<label>Last Name</label>
<div className="preview-field">
{el.workingGroupRepresentative.lastName}
</div>
<div className="preview-field">{el.workingGroupRepresentative.lastName}</div>
</div>
<div className="col-md-6">
<label>Job Title</label>
<div className="preview-field">
{el.workingGroupRepresentative.jobtitle}
</div>
<div className="preview-field">{el.workingGroupRepresentative.jobtitle}</div>
</div>
<div className="col-md-6">
<label>Email</label>
<div className="preview-field">
{el.workingGroupRepresentative.email}
</div>
<div className="preview-field">{el.workingGroupRepresentative.email}</div>
</div>
</div>
<hr />
......@@ -261,35 +208,55 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-6">
<label>First Name</label>
<div className="preview-field">
{values.signingAuthorityRepresentative.firstName}
</div>
<div className="preview-field">{values.signingAuthorityRepresentative.firstName}</div>
</div>
<div className="col-md-6">
<label>Last Name</label>
<div className="preview-field">
{values.signingAuthorityRepresentative.lastName}
</div>
<div className="preview-field">{values.signingAuthorityRepresentative.lastName}</div>
</div>
<div className="col-md-6">
<label>Job Title</label>
<div className="preview-field">
{values.signingAuthorityRepresentative.jobtitle}
</div>
<div className="preview-field">{values.signingAuthorityRepresentative.jobtitle}</div>
</div>
<div className="col-md-6">
<label>Email</label>
<div className="preview-field">
{values.signingAuthorityRepresentative.email}
</div>
<div className="preview-field">{values.signingAuthorityRepresentative.email}</div>
</div>
</div>
</div>
<br />
<p>
Thank you for completing the Membership Application Form. Before you submit your application, as a new Member,
you must agree to the following:
</p>
<CustomStepButton
previousPage="/signing-authority"
nextPage="/submitted"
<p>1. We will publicly support Eclipse Foundation and its purpose.</p>
<p>
2. We will acknowledge our commitment in principle to comply with the Bylawss, 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.
</p>
<p>
3. We will provide Eclipse Foundation with our logo (or instructions to obtain our logo) in accordance with
Section 2.3 of the Eclipse Foundation Membership Agreement. When providing our logo, we will be sure to include
a reference or link to any logo and trademark usage guidelines we have.
<br />
Eclipse Membership Coordination team will work with us to complete this after our Membership Application is
processed.
</p>
<FormControlLabel
control={
<Checkbox name="term" color="primary" required checked={isTermChecked} onChange={handleIsTermChecked} />
}
label={
<p className="margin-0">
I have read and agree to the terms above.<span className="orange-star margin-left-5">*</span>
</p>
}
/>
<CustomStepButton previousPage="/signing-authority" nextPage="/submitted" disableSubmit={!isTermChecked} />
</form>
);
};
......
src/main/www/src/components/UIComponents/Button/CustomStepButton.js
View file @ c630bd02
......@@ -12,7 +12,7 @@ import MembershipContext from '../../../Context/MembershipContext';
* - isSubmitting: boolean, wehther the form is performing submit action; When the form is submitting, you can disable the button or show a spinning, so that the user won't click several times to submit repeatedly
* - isLastStep: boolean, whether it's the final step (preview step) or not
*/
const CustomStepButton = ({ previousPage, nextPage }) => {
const CustomStepButton = ({ previousPage, nextPage, disableSubmit }) => {
return (
<div className="button-container margin-top-20 margin-bottom-20">
{previousPage ? (
......@@ -25,12 +25,7 @@ const CustomStepButton = ({ previousPage, nextPage }) => {
<MembershipContext.Consumer>
{() => (
<Button
variant="contained"
color="primary"
size="large"
type="submit"
>
<Button variant="contained" color="primary" size="large" type="submit" disabled={disableSubmit}>
{nextPage === '/submitted' ? 'Submit' : 'Next'}
</Button>
)}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent