Review.tsx 9.52 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

6
7
interface ReviewProps {
  values: FormValue;
8
  submitForm: () => void;
9
10
11
}

const Review: React.FC<ReviewProps> = ({ values, submitForm }) => {
12
13
14
15
  useEffect(() => {
    scrollToTop();
  }, []);

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

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

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

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

        <h2 className="fw-600 h3">Company Accounting Contact</h2>
        <div className="row margin-bottom-30">
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
          <div className="col-md-6">
            <label>First Name</label>
            <div className="preview-field">
              {values.representative.accounting.firstName}
            </div>
          </div>
          <div className="col-md-6">
            <label>Last Name</label>
            <div className="preview-field">
              {values.representative.accounting.lastName}
            </div>
          </div>
          <div className="col-md-6">
            <label>Job Title</label>
            <div className="preview-field">
              {values.representative.accounting.jobtitle}
            </div>
          </div>
          <div className="col-md-6">
            <label>Email</label>
            <div className="preview-field">
              {values.representative.accounting.email}
            </div>
          </div>
165
166
        </div>

167
168
169
170
171
        <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>
            <div className="preview-field">
172
              {values.purchasingAndVAT.purchasingProcess}
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
            </div>
          </div>

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

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

191
192
        <h2 className="fw-600 h3">Intended Membership Level</h2>
        <div className="row margin-bottom-30">
193
          <div className="col-md-10">
194
            <div className="preview-field">{values.membershipLevel}</div>
195
          </div>
196
197
198
        </div>

        <h2 className="fw-600 h3">Working Group(s) to Join</h2>
199
200
        {values.workingGroups.map((el, index) => (
          <React.Fragment key={index}>
201
            <div className="row margin-bottom-30">
202
203
              <div className="col-md-8">
                <label>Working group</label>
Zhou (Link)  Fang's avatar
Zhou (Link) Fang committed
204
205
206
                <div className="preview-field">
                  {el['workingGroup']['label']}
                </div>
207
208
209
              </div>
              <div className="col-md-8">
                <label>Intended Participation Level</label>
210
                <div className="preview-field">{el.participationLevel}</div>
211
212
213
214
215
216
217
              </div>
              <div className="col-md-8">
                <label>Effective Date</label>
                <div className="preview-field">
                  {new Date(el.effectiveDate).toLocaleDateString()}
                </div>
              </div>
218

219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
              <div className="col-md-24">
                <p className="h4 fw-600 margin-top-25">
                  The working Group Representative
                </p>
              </div>
              <div className="col-md-6">
                <label>First Name</label>
                <div className="preview-field">
                  {el.workingGroupRepresentative.firstName}
                </div>
              </div>
              <div className="col-md-6">
                <label>Last Name</label>
                <div className="preview-field">
                  {el.workingGroupRepresentative.lastName}
                </div>
              </div>
              <div className="col-md-6">
                <label>Job Title</label>
                <div className="preview-field">
                  {el.workingGroupRepresentative.jobtitle}
                </div>
              </div>
              <div className="col-md-6">
243
                <label>Email</label>
244
245
246
247
                <div className="preview-field">
                  {el.workingGroupRepresentative.email}
                </div>
              </div>
248
249
            </div>
            <hr />
250
251
          </React.Fragment>
        ))}
252
253
254

        <h2 className="fw-600 h3">Signing Authority</h2>
        <div className="row margin-bottom-30">
255
256
257
258
259
260
261
262
263
264
265
266
          <div className="col-md-6">
            <label>First Name</label>
            <div className="preview-field">
              {values.signingAuthorityRepresentative.firstName}
            </div>
          </div>
          <div className="col-md-6">
            <label>Last Name</label>
            <div className="preview-field">
              {values.signingAuthorityRepresentative.lastName}
            </div>
          </div>
267
268
269
270
271
272
273
          <div className="col-md-6">
            <label>Job Title</label>
            <div className="preview-field">
              {values.signingAuthorityRepresentative.jobtitle}
            </div>
          </div>
          <div className="col-md-6">
274
275
276
277
278
            <label>Email</label>
            <div className="preview-field">
              {values.signingAuthorityRepresentative.email}
            </div>
          </div>
279
280
        </div>
      </div>
281
282
283
284
285
286

      <CustomStepButton
        previousPage="/signing-authority"
        nextPage="/submitted"
      />
    </form>
287
288
289
  );
};

290
export default Review;