Review.tsx 11.2 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
        Please review your completed Membership Application Form. If you would like to make changes to the information,
33
        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">
Zhou (Link)  Fang's avatar
Zhou (Link) Fang committed
41
42
43
44
45
46
          <div className="col-md-12">
            <div className="margin-top-25 preview-field">{values.organization.legalName}</div>
          </div>
          <div className="col-md-6">
            <label>Organization Type</label>
            <div className="preview-field">{values.organization.type}</div>
47
48
          </div>
          <div className="col-md-8">
49
            <label>Twitter</label>
50
            <div className="preview-field">{values.organization.twitterHandle}</div>
51
          </div>
52
53
        </div>

54
55
56
57
58
59
60
61
62
63
64
65
        <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>
66
        <div className="row margin-bottom-30">
67
68
          <div className="col-md-8">
            <label>Street</label>
69
            <div className="preview-field">{values.organization.address.street}</div>
70
71
72
          </div>
          <div className="col-md-4">
            <label>City</label>
73
            <div className="preview-field">{values.organization.address.city}</div>
74
75
          </div>
          <div className="col-md-4">
76
            <label>Province/State</label>
77
            <div className="preview-field">{values.organization.address.provinceOrState}</div>
78
79
80
          </div>
          <div className="col-md-4">
            <label>Country</label>
81
            <div className="preview-field">{values.organization.address.country}</div>
82
83
84
          </div>
          <div className="col-md-4">
            <label>PostalCode</label>
85
            <div className="preview-field">{values.organization.address.postalCode}</div>
86
          </div>
87
88
89
90
        </div>

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

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

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

149
150
151
152
        <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>
153
            <div className="preview-field">{values.purchasingAndVAT.purchasingProcess}</div>
154
155
156
157
          </div>

          <div className="col-md-8">
            <label>VAT Number</label>
158
            <div className="preview-field">{values.purchasingAndVAT.vatNumber}</div>
159
160
161
162
          </div>

          <div className="col-md-8">
            <label>Country of Registration</label>
163
            <div className="preview-field">{values.purchasingAndVAT.countryOfRegistration}</div>
164
165
166
          </div>
        </div>

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

        <h2 className="fw-600 h3">Working Group(s) to Join</h2>
175
176
177
178
179
180
181
182
        {
          // 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>
183
                    <div className="preview-field">{el['workingGroup']['label']}</div>
184
185
186
187
188
189
190
                  </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>
191
                    <div className="preview-field">{new Date().toLocaleDateString()}</div>
192
                  </div>
193

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

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

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

      <CustomStepButton previousPage="/signing-authority" nextPage="/submitted" disableSubmit={!isTermChecked} />
275
    </form>
276
277
278
  );
};

279
export default Review;