Review.tsx 11 KB
Newer Older
1
import React, { useEffect } from 'react';
2
import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
3
import { FormValue } from '../../../Interfaces/form_interface';
4
import { scrollToTop } from '../../../Utils/formFunctionHelpers';
5
import { FormControlLabel, Checkbox } from '@material-ui/core';
6

7
8
interface ReviewProps {
  values: FormValue;
9
  submitForm: () => void;
10
11
  isTermChecked: boolean;
  setIsTermChecked: (param: boolean) => void;
12
13
}

14
15
16
17
18
const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setIsTermChecked }) => {
  const handleIsTermChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
    setIsTermChecked(event.target.checked);
  };

19
20
21
22
  useEffect(() => {
    scrollToTop();
  }, []);

23
  return (
24
25
26
27
28
29
    <form
      onSubmit={(ev) => {
        ev.preventDefault();
        submitForm();
      }}
    >
30
      <h1 className="fw-600 h2">Review and Submit your Completed Application</h1>
31
      <p>
32
33
        Please review your completed membership application form. If you would like to make changes to the information,
        please click the back button.
34
35
36
37
      </p>
      <p>
        Please click <strong>submit</strong> when ready.
      </p>
38
39
40
      <div className="margin-top-30">
        <h2 className="fw-600 h3">Company Information</h2>
        <div className="row">
41
          <div className="col-md-16">
42
            <div className="margin-top-25 preview-field">{values.organization.legalName}</div>
43
44
45
          </div>
          <div className="col-md-8">
            <label>twitter</label>
46
            <div className="preview-field">{values.organization.twitterHandle}</div>
47
          </div>
48
49
        </div>

50
51
52
53
54
55
56
57
58
59
60
61
        <div className="row margin-top-15">
          <div className="col-md-8">
            <label>Organization Revenue</label>
            <div className="preview-field">{values.organization.revenue}</div>
          </div>
          <div className="col-md-8">
            <label>Employee Count</label>
            <div className="preview-field">{values.organization.employeeCount}</div>
          </div>
        </div>

        <h3 className="fw-600 h4 margin-top-20">Address</h3>
62
        <div className="row margin-bottom-30">
63
64
          <div className="col-md-8">
            <label>Street</label>
65
            <div className="preview-field">{values.organization.address.street}</div>
66
67
68
          </div>
          <div className="col-md-4">
            <label>City</label>
69
            <div className="preview-field">{values.organization.address.city}</div>
70
71
72
          </div>
          <div className="col-md-4">
            <label>province/State</label>
73
            <div className="preview-field">{values.organization.address.provinceOrState}</div>
74
75
76
          </div>
          <div className="col-md-4">
            <label>Country</label>
77
            <div className="preview-field">{values.organization.address.country}</div>
78
79
80
          </div>
          <div className="col-md-4">
            <label>PostalCode</label>
81
            <div className="preview-field">{values.organization.address.postalCode}</div>
82
          </div>
83
84
85
86
        </div>

        <h2 className="fw-600 h3">Company Representative Contact</h2>
        <div className="row margin-bottom-30">
87
88
          <div className="col-md-6">
            <label>First Name</label>
89
            <div className="preview-field">{values.representative.member.firstName}</div>
90
91
92
          </div>
          <div className="col-md-6">
            <label>Last Name</label>
93
            <div className="preview-field">{values.representative.member.lastName}</div>
94
95
96
          </div>
          <div className="col-md-6">
            <label>Job Title</label>
97
            <div className="preview-field">{values.representative.member.jobtitle}</div>
98
99
100
          </div>
          <div className="col-md-6">
            <label>Email</label>
101
            <div className="preview-field">{values.representative.member.email}</div>
102
          </div>
103
104
105
106
        </div>

        <h2 className="fw-600 h3">Company Marketing Contact</h2>
        <div className="row margin-bottom-30">
107
108
          <div className="col-md-6">
            <label>First Name</label>
109
            <div className="preview-field">{values.representative.marketing.firstName}</div>
110
111
112
          </div>
          <div className="col-md-6">
            <label>Last Name</label>
113
            <div className="preview-field">{values.representative.marketing.lastName}</div>
114
115
116
          </div>
          <div className="col-md-6">
            <label>Job Title</label>
117
            <div className="preview-field">{values.representative.marketing.jobtitle}</div>
118
119
120
          </div>
          <div className="col-md-6">
            <label>Email</label>
121
            <div className="preview-field">{values.representative.marketing.email}</div>
122
          </div>
123
124
125
126
        </div>

        <h2 className="fw-600 h3">Company Accounting Contact</h2>
        <div className="row margin-bottom-30">
127
128
          <div className="col-md-6">
            <label>First Name</label>
129
            <div className="preview-field">{values.representative.accounting.firstName}</div>
130
131
132
          </div>
          <div className="col-md-6">
            <label>Last Name</label>
133
            <div className="preview-field">{values.representative.accounting.lastName}</div>
134
135
136
          </div>
          <div className="col-md-6">
            <label>Job Title</label>
137
            <div className="preview-field">{values.representative.accounting.jobtitle}</div>
138
139
140
          </div>
          <div className="col-md-6">
            <label>Email</label>
141
            <div className="preview-field">{values.representative.accounting.email}</div>
142
          </div>
143
144
        </div>

145
146
147
148
        <h2 className="fw-600 h3">Purchasing Process and VAT</h2>
        <div className="row margin-bottom-30">
          <div className="col-md-8">
            <label>Require Purchasing Process</label>
149
            <div className="preview-field">{values.purchasingAndVAT.purchasingProcess}</div>
150
151
152
153
          </div>

          <div className="col-md-8">
            <label>VAT Number</label>
154
            <div className="preview-field">{values.purchasingAndVAT.vatNumber}</div>
155
156
157
158
          </div>

          <div className="col-md-8">
            <label>Country of Registration</label>
159
            <div className="preview-field">{values.purchasingAndVAT.countryOfRegistration}</div>
160
161
162
          </div>
        </div>

163
164
        <h2 className="fw-600 h3">Intended Membership Level</h2>
        <div className="row margin-bottom-30">
165
          <div className="col-md-10">
166
            <div className="preview-field">{values.membershipLevel}</div>
167
          </div>
168
169
170
        </div>

        <h2 className="fw-600 h3">Working Group(s) to Join</h2>
171
172
173
174
175
176
177
178
        {
          // Check if the user joins at least 1 WG, if so, display all. If not, display 'Not joining'
          values.workingGroups[0].workingGroup.label ? (
            values.workingGroups.map((el, index) => (
              <React.Fragment key={index}>
                <div className="row margin-bottom-30">
                  <div className="col-md-8">
                    <label>Working group</label>
179
                    <div className="preview-field">{el['workingGroup']['label']}</div>
180
181
182
183
184
185
186
                  </div>
                  <div className="col-md-8">
                    <label>Intended Participation Level</label>
                    <div className="preview-field">{el.participationLevel}</div>
                  </div>
                  <div className="col-md-8">
                    <label>Effective Date</label>
187
                    <div className="preview-field">{new Date(el.effectiveDate).toLocaleDateString()}</div>
188
                  </div>
189

190
                  <div className="col-md-24">
191
                    <p className="h4 fw-600 margin-top-25">The working Group Representative</p>
192
193
194
                  </div>
                  <div className="col-md-6">
                    <label>First Name</label>
195
                    <div className="preview-field">{el.workingGroupRepresentative.firstName}</div>
196
197
198
                  </div>
                  <div className="col-md-6">
                    <label>Last Name</label>
199
                    <div className="preview-field">{el.workingGroupRepresentative.lastName}</div>
200
201
202
                  </div>
                  <div className="col-md-6">
                    <label>Job Title</label>
203
                    <div className="preview-field">{el.workingGroupRepresentative.jobtitle}</div>
204
205
206
                  </div>
                  <div className="col-md-6">
                    <label>Email</label>
207
                    <div className="preview-field">{el.workingGroupRepresentative.email}</div>
208
                  </div>
209
                </div>
210
211
212
213
214
215
216
                <hr />
              </React.Fragment>
            ))
          ) : (
            <p>Not joining</p>
          )
        }
217
218
219

        <h2 className="fw-600 h3">Signing Authority</h2>
        <div className="row margin-bottom-30">
220
221
          <div className="col-md-6">
            <label>First Name</label>
222
            <div className="preview-field">{values.signingAuthorityRepresentative.firstName}</div>
223
224
225
          </div>
          <div className="col-md-6">
            <label>Last Name</label>
226
            <div className="preview-field">{values.signingAuthorityRepresentative.lastName}</div>
227
          </div>
228
229
          <div className="col-md-6">
            <label>Job Title</label>
230
            <div className="preview-field">{values.signingAuthorityRepresentative.jobtitle}</div>
231
232
          </div>
          <div className="col-md-6">
233
            <label>Email</label>
234
            <div className="preview-field">{values.signingAuthorityRepresentative.email}</div>
235
          </div>
236
237
        </div>
      </div>
238
239
240
241
242
      <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>
243

244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
      <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>
        }
268
      />
269
270

      <CustomStepButton previousPage="/signing-authority" nextPage="/submitted" disableSubmit={!isTermChecked} />
271
    </form>
272
273
274
  );
};

275
export default Review;