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
8
9
10
11
interface ReviewProps {
  values: FormValue;
  submitForm: (pageIndex: number, nextPage: string) => void;
}

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

16
  return (
17
    <form onSubmit={() => submitForm(5, '/submitted')}>
18
19
20
21
22
23
24
25
26
27
      <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>
28
29
30
      <div className="margin-top-30">
        <h2 className="fw-600 h3">Company Information</h2>
        <div className="row">
31
32
          <div className="col-md-16">
            <div className="margin-top-25 preview-field">
33
              {values.organization.legalName}
34
35
36
37
38
39
40
41
            </div>
          </div>
          <div className="col-md-8">
            <label>twitter</label>
            <div className="preview-field">
              {values.organization.twitterHandle}
            </div>
          </div>
42
43
44
45
        </div>

        <h3 className="fw-600 h4">Address</h3>
        <div className="row margin-bottom-30">
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
          <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">
67
              {values.organization.address.country}
68
69
70
71
72
73
74
75
            </div>
          </div>
          <div className="col-md-4">
            <label>PostalCode</label>
            <div className="preview-field">
              {values.organization.address.postalCode}
            </div>
          </div>
76
77
78
79
        </div>

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

        <h2 className="fw-600 h3">Company Marketing Contact</h2>
        <div className="row margin-bottom-30">
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
          <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>
132
133
134
135
        </div>

        <h2 className="fw-600 h3">Company Accounting Contact</h2>
        <div className="row margin-bottom-30">
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
          <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>
160
161
        </div>

162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
        <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">
              {values.purchasingAndVAT['purchasingProcess-label']['label']}
            </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>

186
187
        <h2 className="fw-600 h3">Intended Membership Level</h2>
        <div className="row margin-bottom-30">
188
          <div className="col-md-10">
189
            <div className="preview-field">{values.membershipLevel}</div>
190
          </div>
191
192
193
        </div>

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

214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
              <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">
238
                <label>Email</label>
239
240
241
242
                <div className="preview-field">
                  {el.workingGroupRepresentative.email}
                </div>
              </div>
243
244
            </div>
            <hr />
245
246
          </React.Fragment>
        ))}
247
248
249

        <h2 className="fw-600 h3">Signing Authority</h2>
        <div className="row margin-bottom-30">
250
251
252
253
254
255
256
257
258
259
260
261
          <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>
262
263
264
265
266
267
268
          <div className="col-md-6">
            <label>Job Title</label>
            <div className="preview-field">
              {values.signingAuthorityRepresentative.jobtitle}
            </div>
          </div>
          <div className="col-md-6">
269
270
271
272
273
            <label>Email</label>
            <div className="preview-field">
              {values.signingAuthorityRepresentative.email}
            </div>
          </div>
274
275
        </div>
      </div>
276
277
278
279
280
281

      <CustomStepButton
        previousPage="/signing-authority"
        nextPage="/submitted"
      />
    </form>
282
283
284
  );
};

285
export default Review;