Review.tsx 14.4 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
import { OPTIONS_FOR_ORG_TYPE, OPTIONS_FOR_PURCHASING_PROCESS } from '../../../Constants/Constants';
import ReadOnlyInput from '../../UIComponents/Inputs/ReadOnlyInput';
import { formField } from '../../UIComponents/FormComponents/formFieldModel';
9

10
11
interface ReviewProps {
  values: FormValue;
12
  submitForm: () => void;
13
14
  isTermChecked: boolean;
  setIsTermChecked: (param: boolean) => void;
15
16
}

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

22
23
24
25
  useEffect(() => {
    scrollToTop();
  }, []);

26
  return (
27
28
29
30
31
32
    <form
      onSubmit={(ev) => {
        ev.preventDefault();
        submitForm();
      }}
    >
33
      <h1 className="fw-600 h2">Review and Submit Your Completed Application</h1>
34
      <p>
35
        Please review your completed Membership Application Form. If you would like to make changes to the information,
36
        please click the back button.
37
38
39
40
      </p>
      <p>
        Please click <strong>submit</strong> when ready.
      </p>
41
42
43
      <div className="margin-top-30">
        <h2 className="fw-600 h3">Company Information</h2>
        <div className="row">
Zhou (Link)  Fang's avatar
Zhou (Link) Fang committed
44
          <div className="col-md-12">
45
46
47
48
49
            <ReadOnlyInput
              value={values.organization.legalName}
              label={formField.organizationName.label}
              required={true}
            />
Zhou (Link)  Fang's avatar
Zhou (Link) Fang committed
50
          </div>
51
          <div className="col-md-12">
52
53
54
55
56
            <ReadOnlyInput
              value={OPTIONS_FOR_ORG_TYPE.find((item) => item.value === values.organization.type)?.label}
              label={formField.organizationType.label}
              required={true}
            />
57
          </div>
58
59
        </div>

60
        <div className="row margin-top-15">
61
          <div className="col-md-6">
62
63
64
65
66
            <ReadOnlyInput
              value={values.organization.twitterHandle}
              label={formField.organizationTwitter.label}
              required={false}
            />
67
68
          </div>
          <div className="col-md-6">
69
70
71
72
73
            <ReadOnlyInput
              value={values.organization.revenue}
              label={formField.organizationRevenue.revenue.label}
              required={true}
            />
74
          </div>
75
          <div className="col-md-4">
76
77
78
79
80
            <ReadOnlyInput
              value={values.organization.employeeCount}
              label={formField.organizationRevenue.employeeCount.label}
              required={true}
            />
81
82
83
84
          </div>
        </div>

        <h3 className="fw-600 h4 margin-top-20">Address</h3>
85
        <div className="row margin-bottom-30">
86
          <div className="col-md-8">
87
88
89
90
91
            <ReadOnlyInput
              value={values.organization.address.street}
              label={formField.organizationAddress.street.label}
              required={true}
            />
92
93
          </div>
          <div className="col-md-4">
94
95
96
97
98
            <ReadOnlyInput
              value={values.organization.address.city}
              label={formField.organizationAddress.city.label}
              required={true}
            />
99
100
          </div>
          <div className="col-md-4">
101
102
103
104
105
            <ReadOnlyInput
              value={values.organization.address.provinceOrState}
              label={formField.organizationAddress.provinceOrState.label}
              required={false}
            />
106
107
          </div>
          <div className="col-md-4">
108
109
110
111
112
            <ReadOnlyInput
              value={values.organization.address.country}
              label={formField.organizationAddress.country.label}
              required={true}
            />
113
114
          </div>
          <div className="col-md-4">
115
116
117
118
119
            <ReadOnlyInput
              value={values.organization.address.postalCode}
              label={formField.organizationAddress.postalCode.label}
              required={false}
            />
120
          </div>
121
122
123
124
        </div>

        <h2 className="fw-600 h3">Company Representative Contact</h2>
        <div className="row margin-bottom-30">
125
          <div className="col-md-6">
126
127
128
129
130
            <ReadOnlyInput
              value={values.representative.member.firstName}
              label={formField.companyRep[0].label}
              required={true}
            />
131
132
          </div>
          <div className="col-md-6">
133
134
135
136
137
            <ReadOnlyInput
              value={values.representative.member.lastName}
              label={formField.companyRep[1].label}
              required={true}
            />
138
139
          </div>
          <div className="col-md-6">
140
141
142
143
144
            <ReadOnlyInput
              value={values.representative.member.jobtitle}
              label={formField.companyRep[2].label}
              required={true}
            />
145
146
          </div>
          <div className="col-md-6">
147
148
149
150
151
            <ReadOnlyInput
              value={values.representative.member.email}
              label={formField.companyRep[3].label}
              required={true}
            />
152
          </div>
153
154
155
156
        </div>

        <h2 className="fw-600 h3">Company Marketing Contact</h2>
        <div className="row margin-bottom-30">
157
          <div className="col-md-6">
158
159
160
161
162
            <ReadOnlyInput
              value={values.representative.marketing.firstName}
              label={formField.companyRep[0].label}
              required={true}
            />
163
164
          </div>
          <div className="col-md-6">
165
166
167
168
169
            <ReadOnlyInput
              value={values.representative.marketing.lastName}
              label={formField.companyRep[1].label}
              required={true}
            />
170
171
          </div>
          <div className="col-md-6">
172
173
174
175
176
            <ReadOnlyInput
              value={values.representative.marketing.jobtitle}
              label={formField.companyRep[2].label}
              required={true}
            />
177
178
          </div>
          <div className="col-md-6">
179
180
181
182
183
            <ReadOnlyInput
              value={values.representative.marketing.email}
              label={formField.companyRep[3].label}
              required={true}
            />
184
          </div>
185
186
187
188
        </div>

        <h2 className="fw-600 h3">Company Accounting Contact</h2>
        <div className="row margin-bottom-30">
189
          <div className="col-md-6">
190
191
192
193
194
            <ReadOnlyInput
              value={values.representative.accounting.firstName}
              label={formField.companyRep[0].label}
              required={true}
            />
195
196
          </div>
          <div className="col-md-6">
197
198
199
200
201
            <ReadOnlyInput
              value={values.representative.accounting.lastName}
              label={formField.companyRep[1].label}
              required={true}
            />
202
203
          </div>
          <div className="col-md-6">
204
205
206
207
208
            <ReadOnlyInput
              value={values.representative.accounting.jobtitle}
              label={formField.companyRep[2].label}
              required={true}
            />
209
210
          </div>
          <div className="col-md-6">
211
212
213
214
215
            <ReadOnlyInput
              value={values.representative.accounting.email}
              label={formField.companyRep[3].label}
              required={true}
            />
216
          </div>
217
218
        </div>

219
220
221
        <h2 className="fw-600 h3">Purchasing Process and VAT</h2>
        <div className="row margin-bottom-30">
          <div className="col-md-8">
222
223
224
225
226
227
228
229
            <ReadOnlyInput
              value={
                OPTIONS_FOR_PURCHASING_PROCESS.find((item) => item.value === values.purchasingAndVAT.purchasingProcess)
                  ?.label
              }
              label={formField.purchasingProcess.label}
              required={true}
            />
230
231
232
          </div>

          <div className="col-md-8">
233
234
235
236
237
            <ReadOnlyInput
              value={values.purchasingAndVAT.vatNumber}
              label={formField.vatRegistration.vatNumber.label}
              required={false}
            />
238
239
240
          </div>

          <div className="col-md-8">
241
242
243
244
245
            <ReadOnlyInput
              value={values.purchasingAndVAT.countryOfRegistration}
              label={formField.vatRegistration.countryOfRegistration.label}
              required={false}
            />
246
247
248
          </div>
        </div>

249
250
        <h2 className="fw-600 h3">Intended Membership Level</h2>
        <div className="row margin-bottom-30">
251
          <div className="col-md-10">
252
            <ReadOnlyInput value={values.membershipLevel} label={formField.membershipLevel.label} required={true} />
253
          </div>
254
255
        </div>

256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
        <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 ? (
              values.workingGroups.map((el, index) => (
                <React.Fragment key={index}>
                  <div className="row">
                    <div className="col-md-8">
                      <ReadOnlyInput
                        value={el['workingGroup']['label']}
                        label={formField.workingGroup.label}
                        required={true}
                      />
                    </div>
                    <div className="col-md-8">
                      <ReadOnlyInput
                        value={el['workingGroup']['label']}
                        label={formField.participationLevel.label}
                        required={true}
                      />
                    </div>
                    <div className="col-md-8">
                      <ReadOnlyInput
                        value={new Date().toLocaleDateString()}
                        label={formField.effectiveDate.label}
                        required={true}
                      />
                    </div>
285

286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
                    <div className="col-md-24">
                      <p className="h4 fw-600 margin-top-15">The Working Group Representative</p>
                    </div>
                    <div className="col-md-6">
                      <ReadOnlyInput
                        value={el.workingGroupRepresentative.firstName}
                        label={formField.workingGroupRepresentative[0].label}
                        required={true}
                      />
                    </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>
317
                  </div>
318
319
320
321
322
323
324
325
                  <hr className="margin-top-10" />
                </React.Fragment>
              ))
            ) : (
              <p>Not joining</p>
            )
          }
        </div>
326
327
328

        <h2 className="fw-600 h3">Signing Authority</h2>
        <div className="row margin-bottom-30">
329
          <div className="col-md-6">
330
331
332
333
334
            <ReadOnlyInput
              value={values.signingAuthorityRepresentative.firstName}
              label={formField.signingAuthorityRepresentative[0].label}
              required={true}
            />
335
336
          </div>
          <div className="col-md-6">
337
338
339
340
341
            <ReadOnlyInput
              value={values.signingAuthorityRepresentative.lastName}
              label={formField.signingAuthorityRepresentative[1].label}
              required={true}
            />
342
          </div>
343
          <div className="col-md-6">
344
345
346
347
348
            <ReadOnlyInput
              value={values.signingAuthorityRepresentative.jobtitle}
              label={formField.signingAuthorityRepresentative[2].label}
              required={true}
            />
349
350
          </div>
          <div className="col-md-6">
351
352
353
354
355
            <ReadOnlyInput
              value={values.signingAuthorityRepresentative.email}
              label={formField.signingAuthorityRepresentative[3].label}
              required={true}
            />
356
          </div>
357
358
        </div>
      </div>
359
360
361
362
363
      <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>
364

365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
      <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>
        }
389
      />
390
391

      <CustomStepButton previousPage="/signing-authority" nextPage="/submitted" disableSubmit={!isTermChecked} />
392
    </form>
393
394
395
  );
};

396
export default Review;