Review.tsx 9.4 KB
Newer Older
1
import React from 'react';
2
import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
3
import { FormValue } from '../../../Interfaces/form_interface';
4

5
6
7
8
9
10
interface ReviewProps {
  values: FormValue;
  submitForm: (pageIndex: number, nextPage: string) => void;
}

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

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

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

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

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

157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
        <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>

181
182
        <h2 className="fw-600 h3">Intended Membership Level</h2>
        <div className="row margin-bottom-30">
183
          <div className="col-md-10">
184
            <div className="preview-field">{values.membershipLevel}</div>
185
          </div>
186
187
188
        </div>

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

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

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

      <CustomStepButton
        previousPage="/signing-authority"
        nextPage="/submitted"
      />
    </form>
277
278
279
  );
};

280
export default Review;