Skip to content

GitLab

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

Fixed layout issue on confirmation page (#303) 

* Fixed layout issue on confirmation page

* Removed unused CSS code
parent ca5ad54e
Hide whitespace changes
Inline Side-by-side
src/main/www/src/App.css
View file @ bbcb2bd8
...@@ -96,13 +96,6 @@ html { ...@@ -96,13 +96,6 @@ html {
.eclipsefdn-membership-webform input[type='checkbox']:focus { .eclipsefdn-membership-webform input[type='checkbox']:focus {
outline: none !important; outline: none !important;
} }
.eclipsefdn-membership-webform .preview-field {
padding: 5px;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 5px;
background: #fff;
min-height: 32px;
}
.eclipsefdn-membership-webform .stepper { .eclipsefdn-membership-webform .stepper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
......
src/main/www/src/components/Application/Review/Review.tsx
View file @ bbcb2bd8
...@@ -3,7 +3,9 @@ import CustomStepButton from '../../UIComponents/Button/CustomStepButton'; ...@@ -3,7 +3,9 @@ import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
import { FormValue } from '../../../Interfaces/form_interface'; import { FormValue } from '../../../Interfaces/form_interface';
import { scrollToTop } from '../../../Utils/formFunctionHelpers'; import { scrollToTop } from '../../../Utils/formFunctionHelpers';
import { FormControlLabel, Checkbox } from '@material-ui/core'; import { FormControlLabel, Checkbox } from '@material-ui/core';
import { OPTIONS_FOR_ORG_TYPE } from '../../../Constants/Constants'; import { OPTIONS_FOR_ORG_TYPE, OPTIONS_FOR_PURCHASING_PROCESS } from '../../../Constants/Constants';
import ReadOnlyInput from '../../UIComponents/Inputs/ReadOnlyInput';
import { formField } from '../../UIComponents/FormComponents/formFieldModel';
interface ReviewProps { interface ReviewProps {
values: FormValue; values: FormValue;
...@@ -28,7 +30,7 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI ...@@ -28,7 +30,7 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI
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> <p>
Please review your completed Membership Application Form. If you would like to make changes to the information, Please review your completed Membership Application Form. If you would like to make changes to the information,
please click the back button. please click the back button.
...@@ -40,206 +42,317 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI ...@@ -40,206 +42,317 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI
<h2 className="fw-600 h3">Company Information</h2> <h2 className="fw-600 h3">Company Information</h2>
<div className="row"> <div className="row">
<div className="col-md-12"> <div className="col-md-12">
<label>Organization Name</label> <ReadOnlyInput
<div className="preview-field">{values.organization.legalName}</div> value={values.organization.legalName}
label={formField.organizationName.label}
required={true}
/>
</div> </div>
<div className="col-md-12"> <div className="col-md-12">
<label>Organization Type</label> <ReadOnlyInput
<div className="preview-field"> value={OPTIONS_FOR_ORG_TYPE.find((item) => item.value === values.organization.type)?.label}
{OPTIONS_FOR_ORG_TYPE.find((item) => item.value === values.organization.type)?.label} label={formField.organizationType.label}
</div> required={true}
/>
</div> </div>
</div> </div>
<div className="row margin-top-15"> <div className="row margin-top-15">
<div className="col-md-6"> <div className="col-md-6">
<label>Twitter</label> <ReadOnlyInput
<div className="preview-field">{values.organization.twitterHandle}</div> value={values.organization.twitterHandle}
label={formField.organizationTwitter.label}
required={false}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Organization Revenue</label> <ReadOnlyInput
<div className="preview-field">{values.organization.revenue}</div> value={values.organization.revenue}
label={formField.organizationRevenue.revenue.label}
required={true}
/>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<label>Employee Count</label> <ReadOnlyInput
<div className="preview-field">{values.organization.employeeCount}</div> value={values.organization.employeeCount}
label={formField.organizationRevenue.employeeCount.label}
required={true}
/>
</div> </div>
</div> </div>
<h3 className="fw-600 h4 margin-top-20">Address</h3> <h3 className="fw-600 h4 margin-top-20">Address</h3>
<div className="row margin-bottom-30"> <div className="row margin-bottom-30">
<div className="col-md-8"> <div className="col-md-8">
<label>Street</label> <ReadOnlyInput
<div className="preview-field">{values.organization.address.street}</div> value={values.organization.address.street}
label={formField.organizationAddress.street.label}
required={true}
/>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<label>City</label> <ReadOnlyInput
<div className="preview-field">{values.organization.address.city}</div> value={values.organization.address.city}
label={formField.organizationAddress.city.label}
required={true}
/>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<label>Province/State</label> <ReadOnlyInput
<div className="preview-field">{values.organization.address.provinceOrState}</div> value={values.organization.address.provinceOrState}
label={formField.organizationAddress.provinceOrState.label}
required={false}
/>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<label>Country</label> <ReadOnlyInput
<div className="preview-field">{values.organization.address.country}</div> value={values.organization.address.country}
label={formField.organizationAddress.country.label}
required={true}
/>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<label>PostalCode</label> <ReadOnlyInput
<div className="preview-field">{values.organization.address.postalCode}</div> value={values.organization.address.postalCode}
label={formField.organizationAddress.postalCode.label}
required={false}
/>
</div> </div>
</div> </div>
<h2 className="fw-600 h3">Company Representative Contact</h2> <h2 className="fw-600 h3">Company Representative Contact</h2>
<div className="row margin-bottom-30"> <div className="row margin-bottom-30">
<div className="col-md-6"> <div className="col-md-6">
<label>First Name</label> <ReadOnlyInput
<div className="preview-field">{values.representative.member.firstName}</div> value={values.representative.member.firstName}
label={formField.companyRep[0].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Last Name</label> <ReadOnlyInput
<div className="preview-field">{values.representative.member.lastName}</div> value={values.representative.member.lastName}
label={formField.companyRep[1].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Job Title</label> <ReadOnlyInput
<div className="preview-field">{values.representative.member.jobtitle}</div> value={values.representative.member.jobtitle}
label={formField.companyRep[2].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Email</label> <ReadOnlyInput
<div className="preview-field">{values.representative.member.email}</div> value={values.representative.member.email}
label={formField.companyRep[3].label}
required={true}
/>
</div> </div>
</div> </div>
<h2 className="fw-600 h3">Company Marketing Contact</h2> <h2 className="fw-600 h3">Company Marketing Contact</h2>
<div className="row margin-bottom-30"> <div className="row margin-bottom-30">
<div className="col-md-6"> <div className="col-md-6">
<label>First Name</label> <ReadOnlyInput
<div className="preview-field">{values.representative.marketing.firstName}</div> value={values.representative.marketing.firstName}
label={formField.companyRep[0].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Last Name</label> <ReadOnlyInput
<div className="preview-field">{values.representative.marketing.lastName}</div> value={values.representative.marketing.lastName}
label={formField.companyRep[1].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Job Title</label> <ReadOnlyInput
<div className="preview-field">{values.representative.marketing.jobtitle}</div> value={values.representative.marketing.jobtitle}
label={formField.companyRep[2].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Email</label> <ReadOnlyInput
<div className="preview-field">{values.representative.marketing.email}</div> value={values.representative.marketing.email}
label={formField.companyRep[3].label}
required={true}
/>
</div> </div>
</div> </div>
<h2 className="fw-600 h3">Company Accounting Contact</h2> <h2 className="fw-600 h3">Company Accounting Contact</h2>
<div className="row margin-bottom-30"> <div className="row margin-bottom-30">
<div className="col-md-6"> <div className="col-md-6">
<label>First Name</label> <ReadOnlyInput
<div className="preview-field">{values.representative.accounting.firstName}</div> value={values.representative.accounting.firstName}
label={formField.companyRep[0].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Last Name</label> <ReadOnlyInput
<div className="preview-field">{values.representative.accounting.lastName}</div> value={values.representative.accounting.lastName}
label={formField.companyRep[1].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Job Title</label> <ReadOnlyInput
<div className="preview-field">{values.representative.accounting.jobtitle}</div> value={values.representative.accounting.jobtitle}
label={formField.companyRep[2].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Email</label> <ReadOnlyInput
<div className="preview-field">{values.representative.accounting.email}</div> value={values.representative.accounting.email}
label={formField.companyRep[3].label}
required={true}
/>
</div> </div>
</div> </div>
<h2 className="fw-600 h3">Purchasing Process and VAT</h2> <h2 className="fw-600 h3">Purchasing Process and VAT</h2>
<div className="row margin-bottom-30"> <div className="row margin-bottom-30">
<div className="col-md-8"> <div className="col-md-8">
<label>Require Purchasing Process</label> <ReadOnlyInput
<div className="preview-field">{values.purchasingAndVAT.purchasingProcess}</div> value={
OPTIONS_FOR_PURCHASING_PROCESS.find((item) => item.value === values.purchasingAndVAT.purchasingProcess)
?.label
}
label={formField.purchasingProcess.label}
required={true}
/>
</div> </div>
<div className="col-md-8"> <div className="col-md-8">
<label>VAT Number</label> <ReadOnlyInput
<div className="preview-field">{values.purchasingAndVAT.vatNumber}</div> value={values.purchasingAndVAT.vatNumber}
label={formField.vatRegistration.vatNumber.label}
required={false}
/>
</div> </div>
<div className="col-md-8"> <div className="col-md-8">
<label>Country of Registration</label> <ReadOnlyInput
<div className="preview-field">{values.purchasingAndVAT.countryOfRegistration}</div> value={values.purchasingAndVAT.countryOfRegistration}
label={formField.vatRegistration.countryOfRegistration.label}
required={false}
/>
</div> </div>
</div> </div>
<h2 className="fw-600 h3">Intended Membership Level</h2> <h2 className="fw-600 h3">Intended Membership Level</h2>
<div className="row margin-bottom-30"> <div className="row margin-bottom-30">
<div className="col-md-10"> <div className="col-md-10">
<div className="preview-field">{values.membershipLevel}</div> <ReadOnlyInput value={values.membershipLevel} label={formField.membershipLevel.label} required={true} />
</div> </div>
</div> </div>
<h2 className="fw-600 h3">Working Group(s) to Join</h2> <h2 className="fw-600 h3">Working Group{values.workingGroups.length > 1 && 's'} to Join</h2>
{ <div className="margin-bottom-40">
// Check if the user joins at least 1 WG, if so, display all. If not, display 'Not joining' {
values.workingGroups[0].workingGroup.label ? ( // Check if the user joins at least 1 WG, if so, display all. If not, display 'Not joining'
values.workingGroups.map((el, index) => ( values.workingGroups[0].workingGroup.label ? (
<React.Fragment key={index}> values.workingGroups.map((el, index) => (
<div className="row margin-bottom-30"> <React.Fragment key={index}>
<div className="col-md-8"> <div className="row">
<label>Working group</label> <div className="col-md-8">
<div className="preview-field">{el['workingGroup']['label']}</div> <ReadOnlyInput
</div> value={el['workingGroup']['label']}
<div className="col-md-8"> label={formField.workingGroup.label}
<label>Intended Participation Level</label> required={true}
<div className="preview-field">{el.participationLevel}</div> />
</div> </div>
<div className="col-md-8"> <div className="col-md-8">
<label>Effective Date</label> <ReadOnlyInput
<div className="preview-field">{new Date().toLocaleDateString()}</div> value={el['workingGroup']['label']}
</div> label={formField.participationLevel.label}
required={true}
/>
</div>
<div className="col-md-8">
<ReadOnlyInput
value={new Date().toLocaleDateString()}
label={formField.effectiveDate.label}
required={true}
/>
</div>
<div className="col-md-24"> <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-15">The Working Group Representative</p>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>First Name</label> <ReadOnlyInput
<div className="preview-field">{el.workingGroupRepresentative.firstName}</div> value={el.workingGroupRepresentative.firstName}
</div> label={formField.workingGroupRepresentative[0].label}
<div className="col-md-6"> required={true}
<label>Last Name</label> />
<div className="preview-field">{el.workingGroupRepresentative.lastName}</div> </div>
<div className="col-md-6">
<ReadOnlyInput
value={el.workingGroupRepresentative.lastName}
label={formField.workingGroupRepresentative[1].label}
required={true}
/>
</div>
<div className="col-md-6">
<ReadOnlyInput
value={el.workingGroupRepresentative.jobtitle}
label={formField.workingGroupRepresentative[2].label}
required={true}
/>
</div>
<div className="col-md-6">
<ReadOnlyInput
value={el.workingGroupRepresentative.email}
label={formField.workingGroupRepresentative[3].label}
required={true}
/>
</div>
</div> </div>
<div className="col-md-6"> <hr className="margin-top-10" />
<label>Job Title</label> </React.Fragment>
<div className="preview-field">{el.workingGroupRepresentative.jobtitle}</div> ))
</div> ) : (
<div className="col-md-6"> <p>Not joining</p>
<label>Email</label> )
<div className="preview-field">{el.workingGroupRepresentative.email}</div> }
</div> </div>
</div>
<hr />
</React.Fragment>
))
) : (
<p>Not joining</p>
)
}
<h2 className="fw-600 h3">Signing Authority</h2> <h2 className="fw-600 h3">Signing Authority</h2>
<div className="row margin-bottom-30"> <div className="row margin-bottom-30">
<div className="col-md-6"> <div className="col-md-6">
<label>First Name</label> <ReadOnlyInput
<div className="preview-field">{values.signingAuthorityRepresentative.firstName}</div> value={values.signingAuthorityRepresentative.firstName}
label={formField.signingAuthorityRepresentative[0].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Last Name</label> <ReadOnlyInput
<div className="preview-field">{values.signingAuthorityRepresentative.lastName}</div> value={values.signingAuthorityRepresentative.lastName}
label={formField.signingAuthorityRepresentative[1].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Job Title</label> <ReadOnlyInput
<div className="preview-field">{values.signingAuthorityRepresentative.jobtitle}</div> value={values.signingAuthorityRepresentative.jobtitle}
label={formField.signingAuthorityRepresentative[2].label}
required={true}
/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<label>Email</label> <ReadOnlyInput
<div className="preview-field">{values.signingAuthorityRepresentative.email}</div> value={values.signingAuthorityRepresentative.email}
label={formField.signingAuthorityRepresentative[3].label}
required={true}
/>
</div> </div>
</div> </div>
</div> </div>
......
src/main/www/src/components/UIComponents/FormComponents/formFieldModel.js
View file @ bbcb2bd8
...@@ -7,7 +7,7 @@ const twitterLabel = 'Twitter Handle'; ...@@ -7,7 +7,7 @@ const twitterLabel = 'Twitter Handle';
const twitter = '@username'; const twitter = '@username';
const street = 'Street'; const street = 'Street';
const city = 'City'; const city = 'City';
const provinceOrState = 'Province Or State'; const provinceOrState = 'Province or State';
const postalCode = 'Postal Code'; const postalCode = 'Postal Code';
const country = 'Country'; const country = 'Country';
const jobtitle = 'Job Title'; const jobtitle = 'Job Title';
...@@ -17,6 +17,11 @@ const countryOfRegistration = 'Country of Registration'; ...@@ -17,6 +17,11 @@ const countryOfRegistration = 'Country of Registration';
const REVENUE = 'Revenue'; const REVENUE = 'Revenue';
const EMPLOYEE_COUNT = 'Employee Count'; const EMPLOYEE_COUNT = 'Employee Count';
const ORG_TYPE = 'Organization Type'; const ORG_TYPE = 'Organization Type';
const MEMBERSHIP_LEVEL = 'Membership Level';
const WORKING_GROUP = 'Working Group';
const PARTICIPATION_LEVEL = 'Participation Level';
const EFFECTTIVE_DATE = 'Effective Date';
const VAT_REGISTRATION = 'Your organization is registered for VAT in the European Union';
export const requiredErrorMsg = 'Required field'; export const requiredErrorMsg = 'Required field';
...@@ -227,7 +232,7 @@ export const formField = { ...@@ -227,7 +232,7 @@ export const formField = {
vatRegistration: { vatRegistration: {
isRegistered: { isRegistered: {
name: 'purchasingAndVAT.isRegistered',