Review.tsx 14.7 KB
Newer Older
1
import React, { useContext, 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
import { OPTIONS_FOR_ORG_TYPE, OPTIONS_FOR_PURCHASING_PROCESS, ROUTE_SIGNING, ROUTE_SUBMITTED } from '../../../Constants/Constants';
7
8
import ReadOnlyInput from '../../UIComponents/Inputs/ReadOnlyInput';
import { formField } from '../../UIComponents/FormComponents/formFieldModel';
9
import MembershipContext from '../../../Context/MembershipContext';
10

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

18
const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setIsTermChecked }) => {
19
20
  const { setCurrentStepIndex } = useContext(MembershipContext);

21
22
23
24
  const handleIsTermChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
    setIsTermChecked(event.target.checked);
  };

25
26
27
28
  useEffect(() => {
    scrollToTop();
  }, []);

29
30
31
32
  useEffect(() => {
    setCurrentStepIndex(5);
  }, [setCurrentStepIndex]);

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

67
        <div className="row margin-top-15">
68
          <div className="col-md-6">
69
70
71
72
73
            <ReadOnlyInput
              value={values.organization.twitterHandle}
              label={formField.organizationTwitter.label}
              required={false}
            />
74
75
          </div>
          <div className="col-md-6">
76
77
78
79
80
            <ReadOnlyInput
              value={values.organization.revenue}
              label={formField.organizationRevenue.revenue.label}
              required={true}
            />
81
          </div>
82
          <div className="col-md-4">
83
84
85
86
87
            <ReadOnlyInput
              value={values.organization.employeeCount}
              label={formField.organizationRevenue.employeeCount.label}
              required={true}
            />
88
89
90
91
          </div>
        </div>

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

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

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

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

226
227
228
        <h2 className="fw-600 h3">Purchasing Process and VAT</h2>
        <div className="row margin-bottom-30">
          <div className="col-md-8">
229
230
231
232
233
234
235
236
            <ReadOnlyInput
              value={
                OPTIONS_FOR_PURCHASING_PROCESS.find((item) => item.value === values.purchasingAndVAT.purchasingProcess)
                  ?.label
              }
              label={formField.purchasingProcess.label}
              required={true}
            />
237
238
239
          </div>

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

          <div className="col-md-8">
248
249
250
251
252
            <ReadOnlyInput
              value={values.purchasingAndVAT.countryOfRegistration}
              label={formField.vatRegistration.countryOfRegistration.label}
              required={false}
            />
253
254
255
          </div>
        </div>

256
257
        <h2 className="fw-600 h3">Intended Membership Level</h2>
        <div className="row margin-bottom-30">
258
          <div className="col-md-10">
259
            <ReadOnlyInput value={values.membershipLevel} label={formField.membershipLevel.label} required={true} />
260
          </div>
261
262
        </div>

263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
        <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>
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
317
318
319
320
321
322
323
                    <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>
324
                  </div>
325
326
327
328
329
330
331
332
                  <hr className="margin-top-10" />
                </React.Fragment>
              ))
            ) : (
              <p>Not joining</p>
            )
          }
        </div>
333
334
335

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

372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
      <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>
        }
396
      />
397

398
      <CustomStepButton
399
400
        previousPage={ROUTE_SIGNING}
        nextPage={ROUTE_SUBMITTED}
401
402
403
404
405
        disableSubmit={!isTermChecked}
        checkIsEmpty={() => false}
        formik={false}
        updatedFormValues={values}
      />
406
    </form>
407
408
409
  );
};

410
export default Review;