@financial-times/n-conversion-forms 34.0.0 → 36.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.toolkitstate/ci.json +2 -2
- package/components/__snapshots__/ft-edit-registration-confirmation.spec.js.snap +480 -0
- package/components/ft-edit-registration-confirmation.jsx +141 -0
- package/components/ft-edit-registration-confirmation.spec.js +40 -0
- package/components/ft-edit-registration-confirmation.stories.js +27 -0
- package/components/index.js +1 -0
- package/components/payment-term.jsx +8 -20
- package/components/payment-term.spec.js +0 -36
- package/components/payment-term.stories.js +0 -19
- package/dist/ft-edit-registration-confirmation.jsx +113 -0
- package/dist/index.js +7 -0
- package/dist/payment-term.jsx +5 -12
- package/main.scss +1 -0
- package/package.json +2 -2
- package/styles/ft-edit-registration-confirmation.scss +139 -0
package/.toolkitstate/ci.json
CHANGED
|
@@ -0,0 +1,480 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`RegistrationConfirmation renders a continue reading button when an articleUrl is provided 1`] = `
|
|
4
|
+
<div class="ncf">
|
|
5
|
+
<div class="ncf__center ncf__margin">
|
|
6
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
7
|
+
</div>
|
|
8
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
9
|
+
Success
|
|
10
|
+
</h1>
|
|
11
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
12
|
+
Thank you for registering for FT Edit.
|
|
13
|
+
</p>
|
|
14
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
15
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to test@example.com.
|
|
16
|
+
</p>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="ncf__divider-horizontal">
|
|
19
|
+
</div>
|
|
20
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
21
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
22
|
+
<b>
|
|
23
|
+
Breaking news alerts, direct to your lock screen
|
|
24
|
+
</b>
|
|
25
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
26
|
+
Download our apps or follow us on our socials
|
|
27
|
+
</p>
|
|
28
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
29
|
+
Find us in the app stores or follow us on our socials
|
|
30
|
+
</p>
|
|
31
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
32
|
+
<div class="o-social-follow"
|
|
33
|
+
aria-label="Follow on social media"
|
|
34
|
+
>
|
|
35
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
36
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
37
|
+
target="_blank"
|
|
38
|
+
rel="noopener noreferrer"
|
|
39
|
+
data-trackable="register-social-instagram"
|
|
40
|
+
>
|
|
41
|
+
<span class="o-social-follow-icon__label">
|
|
42
|
+
on instagram
|
|
43
|
+
</span>
|
|
44
|
+
</a>
|
|
45
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
46
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
47
|
+
target="_blank"
|
|
48
|
+
rel="noopener noreferrer"
|
|
49
|
+
data-trackable="register-social-linkedin"
|
|
50
|
+
>
|
|
51
|
+
<span class="o-social-follow-icon__label">
|
|
52
|
+
on linkedin
|
|
53
|
+
</span>
|
|
54
|
+
</a>
|
|
55
|
+
<a href="https://twitter.com/FT"
|
|
56
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
57
|
+
target="_blank"
|
|
58
|
+
rel="noopener noreferrer"
|
|
59
|
+
data-trackable="register-social-twitter"
|
|
60
|
+
>
|
|
61
|
+
<span class="o-social-follow-icon__label">
|
|
62
|
+
on twitter
|
|
63
|
+
</span>
|
|
64
|
+
</a>
|
|
65
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
66
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
67
|
+
target="_blank"
|
|
68
|
+
rel="noopener noreferrer"
|
|
69
|
+
data-trackable="register-social-facebook"
|
|
70
|
+
>
|
|
71
|
+
<span class="o-social-follow-icon__label">
|
|
72
|
+
on facebook
|
|
73
|
+
</span>
|
|
74
|
+
</a>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
77
|
+
aria-label="Download the app"
|
|
78
|
+
>
|
|
79
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
80
|
+
class="ncf-icon ncf-icon--apple"
|
|
81
|
+
target="_blank"
|
|
82
|
+
rel="noopener noreferrer"
|
|
83
|
+
data-trackable="register-app-apple-ft-edit"
|
|
84
|
+
>
|
|
85
|
+
<span class="o-social-follow-icon__label">
|
|
86
|
+
on apple
|
|
87
|
+
</span>
|
|
88
|
+
</a>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
93
|
+
<b>
|
|
94
|
+
Set up email alerts in
|
|
95
|
+
<span aria-label="myFT"
|
|
96
|
+
class="ncf-icon ncf-icon--myft"
|
|
97
|
+
>
|
|
98
|
+
</span>
|
|
99
|
+
</b>
|
|
100
|
+
<p>
|
|
101
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
102
|
+
</p>
|
|
103
|
+
<a href="/myft"
|
|
104
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
105
|
+
data-trackable="register-personalise-my-alerts"
|
|
106
|
+
>
|
|
107
|
+
Personalise my alerts
|
|
108
|
+
</a>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<a href="/"
|
|
112
|
+
target="_parent"
|
|
113
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
114
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
115
|
+
>
|
|
116
|
+
Explore our FT Edit hub
|
|
117
|
+
</a>
|
|
118
|
+
<a href="https://www.ft.com/content/9141eee7-825a-41d7-913d-49e8c12e76db"
|
|
119
|
+
target="_parent"
|
|
120
|
+
class=" ncf__FT_Edit_confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
|
|
121
|
+
data-trackable="register-finish-head-to-article"
|
|
122
|
+
>
|
|
123
|
+
Continue reading
|
|
124
|
+
</a>
|
|
125
|
+
</div>
|
|
126
|
+
`;
|
|
127
|
+
|
|
128
|
+
exports[`RegistrationConfirmation renders an explore hub button always 1`] = `
|
|
129
|
+
<div class="ncf">
|
|
130
|
+
<div class="ncf__center ncf__margin">
|
|
131
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
132
|
+
</div>
|
|
133
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
134
|
+
Success
|
|
135
|
+
</h1>
|
|
136
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
137
|
+
Thank you for registering for FT Edit.
|
|
138
|
+
</p>
|
|
139
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
140
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to test@example.com.
|
|
141
|
+
</p>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="ncf__divider-horizontal">
|
|
144
|
+
</div>
|
|
145
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
146
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
147
|
+
<b>
|
|
148
|
+
Breaking news alerts, direct to your lock screen
|
|
149
|
+
</b>
|
|
150
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
151
|
+
Download our apps or follow us on our socials
|
|
152
|
+
</p>
|
|
153
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
154
|
+
Find us in the app stores or follow us on our socials
|
|
155
|
+
</p>
|
|
156
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
157
|
+
<div class="o-social-follow"
|
|
158
|
+
aria-label="Follow on social media"
|
|
159
|
+
>
|
|
160
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
161
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
162
|
+
target="_blank"
|
|
163
|
+
rel="noopener noreferrer"
|
|
164
|
+
data-trackable="register-social-instagram"
|
|
165
|
+
>
|
|
166
|
+
<span class="o-social-follow-icon__label">
|
|
167
|
+
on instagram
|
|
168
|
+
</span>
|
|
169
|
+
</a>
|
|
170
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
171
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
172
|
+
target="_blank"
|
|
173
|
+
rel="noopener noreferrer"
|
|
174
|
+
data-trackable="register-social-linkedin"
|
|
175
|
+
>
|
|
176
|
+
<span class="o-social-follow-icon__label">
|
|
177
|
+
on linkedin
|
|
178
|
+
</span>
|
|
179
|
+
</a>
|
|
180
|
+
<a href="https://twitter.com/FT"
|
|
181
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
182
|
+
target="_blank"
|
|
183
|
+
rel="noopener noreferrer"
|
|
184
|
+
data-trackable="register-social-twitter"
|
|
185
|
+
>
|
|
186
|
+
<span class="o-social-follow-icon__label">
|
|
187
|
+
on twitter
|
|
188
|
+
</span>
|
|
189
|
+
</a>
|
|
190
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
191
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
192
|
+
target="_blank"
|
|
193
|
+
rel="noopener noreferrer"
|
|
194
|
+
data-trackable="register-social-facebook"
|
|
195
|
+
>
|
|
196
|
+
<span class="o-social-follow-icon__label">
|
|
197
|
+
on facebook
|
|
198
|
+
</span>
|
|
199
|
+
</a>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
202
|
+
aria-label="Download the app"
|
|
203
|
+
>
|
|
204
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
205
|
+
class="ncf-icon ncf-icon--apple"
|
|
206
|
+
target="_blank"
|
|
207
|
+
rel="noopener noreferrer"
|
|
208
|
+
data-trackable="register-app-apple-ft-edit"
|
|
209
|
+
>
|
|
210
|
+
<span class="o-social-follow-icon__label">
|
|
211
|
+
on apple
|
|
212
|
+
</span>
|
|
213
|
+
</a>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
218
|
+
<b>
|
|
219
|
+
Set up email alerts in
|
|
220
|
+
<span aria-label="myFT"
|
|
221
|
+
class="ncf-icon ncf-icon--myft"
|
|
222
|
+
>
|
|
223
|
+
</span>
|
|
224
|
+
</b>
|
|
225
|
+
<p>
|
|
226
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
227
|
+
</p>
|
|
228
|
+
<a href="/myft"
|
|
229
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
230
|
+
data-trackable="register-personalise-my-alerts"
|
|
231
|
+
>
|
|
232
|
+
Personalise my alerts
|
|
233
|
+
</a>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
<a href="http://thing-hub"
|
|
237
|
+
target="_parent"
|
|
238
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
239
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
240
|
+
>
|
|
241
|
+
Explore our FT Edit hub
|
|
242
|
+
</a>
|
|
243
|
+
</div>
|
|
244
|
+
`;
|
|
245
|
+
|
|
246
|
+
exports[`RegistrationConfirmation renders with a custom email 1`] = `
|
|
247
|
+
<div class="ncf">
|
|
248
|
+
<div class="ncf__center ncf__margin">
|
|
249
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
250
|
+
</div>
|
|
251
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
252
|
+
Success
|
|
253
|
+
</h1>
|
|
254
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
255
|
+
Thank you for registering for FT Edit.
|
|
256
|
+
</p>
|
|
257
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
258
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to test@example.com.
|
|
259
|
+
</p>
|
|
260
|
+
</div>
|
|
261
|
+
<div class="ncf__divider-horizontal">
|
|
262
|
+
</div>
|
|
263
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
264
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
265
|
+
<b>
|
|
266
|
+
Breaking news alerts, direct to your lock screen
|
|
267
|
+
</b>
|
|
268
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
269
|
+
Download our apps or follow us on our socials
|
|
270
|
+
</p>
|
|
271
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
272
|
+
Find us in the app stores or follow us on our socials
|
|
273
|
+
</p>
|
|
274
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
275
|
+
<div class="o-social-follow"
|
|
276
|
+
aria-label="Follow on social media"
|
|
277
|
+
>
|
|
278
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
279
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
280
|
+
target="_blank"
|
|
281
|
+
rel="noopener noreferrer"
|
|
282
|
+
data-trackable="register-social-instagram"
|
|
283
|
+
>
|
|
284
|
+
<span class="o-social-follow-icon__label">
|
|
285
|
+
on instagram
|
|
286
|
+
</span>
|
|
287
|
+
</a>
|
|
288
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
289
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
290
|
+
target="_blank"
|
|
291
|
+
rel="noopener noreferrer"
|
|
292
|
+
data-trackable="register-social-linkedin"
|
|
293
|
+
>
|
|
294
|
+
<span class="o-social-follow-icon__label">
|
|
295
|
+
on linkedin
|
|
296
|
+
</span>
|
|
297
|
+
</a>
|
|
298
|
+
<a href="https://twitter.com/FT"
|
|
299
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
300
|
+
target="_blank"
|
|
301
|
+
rel="noopener noreferrer"
|
|
302
|
+
data-trackable="register-social-twitter"
|
|
303
|
+
>
|
|
304
|
+
<span class="o-social-follow-icon__label">
|
|
305
|
+
on twitter
|
|
306
|
+
</span>
|
|
307
|
+
</a>
|
|
308
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
309
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
310
|
+
target="_blank"
|
|
311
|
+
rel="noopener noreferrer"
|
|
312
|
+
data-trackable="register-social-facebook"
|
|
313
|
+
>
|
|
314
|
+
<span class="o-social-follow-icon__label">
|
|
315
|
+
on facebook
|
|
316
|
+
</span>
|
|
317
|
+
</a>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
320
|
+
aria-label="Download the app"
|
|
321
|
+
>
|
|
322
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
323
|
+
class="ncf-icon ncf-icon--apple"
|
|
324
|
+
target="_blank"
|
|
325
|
+
rel="noopener noreferrer"
|
|
326
|
+
data-trackable="register-app-apple-ft-edit"
|
|
327
|
+
>
|
|
328
|
+
<span class="o-social-follow-icon__label">
|
|
329
|
+
on apple
|
|
330
|
+
</span>
|
|
331
|
+
</a>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
336
|
+
<b>
|
|
337
|
+
Set up email alerts in
|
|
338
|
+
<span aria-label="myFT"
|
|
339
|
+
class="ncf-icon ncf-icon--myft"
|
|
340
|
+
>
|
|
341
|
+
</span>
|
|
342
|
+
</b>
|
|
343
|
+
<p>
|
|
344
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
345
|
+
</p>
|
|
346
|
+
<a href="/myft"
|
|
347
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
348
|
+
data-trackable="register-personalise-my-alerts"
|
|
349
|
+
>
|
|
350
|
+
Personalise my alerts
|
|
351
|
+
</a>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
<a href="/"
|
|
355
|
+
target="_parent"
|
|
356
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
357
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
358
|
+
>
|
|
359
|
+
Explore our FT Edit hub
|
|
360
|
+
</a>
|
|
361
|
+
</div>
|
|
362
|
+
`;
|
|
363
|
+
|
|
364
|
+
exports[`RegistrationConfirmation renders with default props 1`] = `
|
|
365
|
+
<div class="ncf">
|
|
366
|
+
<div class="ncf__center ncf__margin">
|
|
367
|
+
<div class="ncf__icon ncf__icon--tick ncf__icon--large">
|
|
368
|
+
</div>
|
|
369
|
+
<h1 class="ncf__header ncf__header--confirmation">
|
|
370
|
+
Success
|
|
371
|
+
</h1>
|
|
372
|
+
<p class="ncf__FT_Edit_confirmation--message">
|
|
373
|
+
Thank you for registering for FT Edit.
|
|
374
|
+
</p>
|
|
375
|
+
<p class="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
376
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to your email.
|
|
377
|
+
</p>
|
|
378
|
+
</div>
|
|
379
|
+
<div class="ncf__divider-horizontal">
|
|
380
|
+
</div>
|
|
381
|
+
<div class="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
382
|
+
<div class="ncf__FT_Edit_confirmation--socials">
|
|
383
|
+
<b>
|
|
384
|
+
Breaking news alerts, direct to your lock screen
|
|
385
|
+
</b>
|
|
386
|
+
<p class="ncf__FT_Edit_confirmation--mobile">
|
|
387
|
+
Download our apps or follow us on our socials
|
|
388
|
+
</p>
|
|
389
|
+
<p class="ncf__FT_Edit_confirmation--desktop">
|
|
390
|
+
Find us in the app stores or follow us on our socials
|
|
391
|
+
</p>
|
|
392
|
+
<div class="ncf__FT_Edit_confirmation--badges">
|
|
393
|
+
<div class="o-social-follow"
|
|
394
|
+
aria-label="Follow on social media"
|
|
395
|
+
>
|
|
396
|
+
<a href="https://www.instagram.com/financialtimes"
|
|
397
|
+
class="o-social-follow-icon o-social-follow-icon--instagram"
|
|
398
|
+
target="_blank"
|
|
399
|
+
rel="noopener noreferrer"
|
|
400
|
+
data-trackable="register-social-instagram"
|
|
401
|
+
>
|
|
402
|
+
<span class="o-social-follow-icon__label">
|
|
403
|
+
on instagram
|
|
404
|
+
</span>
|
|
405
|
+
</a>
|
|
406
|
+
<a href="https://www.linkedin.com/company/financial-times"
|
|
407
|
+
class="o-social-follow-icon o-social-follow-icon--linkedin"
|
|
408
|
+
target="_blank"
|
|
409
|
+
rel="noopener noreferrer"
|
|
410
|
+
data-trackable="register-social-linkedin"
|
|
411
|
+
>
|
|
412
|
+
<span class="o-social-follow-icon__label">
|
|
413
|
+
on linkedin
|
|
414
|
+
</span>
|
|
415
|
+
</a>
|
|
416
|
+
<a href="https://twitter.com/FT"
|
|
417
|
+
class="o-social-follow-icon o-social-follow-icon--twitter"
|
|
418
|
+
target="_blank"
|
|
419
|
+
rel="noopener noreferrer"
|
|
420
|
+
data-trackable="register-social-twitter"
|
|
421
|
+
>
|
|
422
|
+
<span class="o-social-follow-icon__label">
|
|
423
|
+
on twitter
|
|
424
|
+
</span>
|
|
425
|
+
</a>
|
|
426
|
+
<a href="https://www.facebook.com/financialtimes"
|
|
427
|
+
class="o-social-follow-icon o-social-follow-icon--facebook"
|
|
428
|
+
target="_blank"
|
|
429
|
+
rel="noopener noreferrer"
|
|
430
|
+
data-trackable="register-social-facebook"
|
|
431
|
+
>
|
|
432
|
+
<span class="o-social-follow-icon__label">
|
|
433
|
+
on facebook
|
|
434
|
+
</span>
|
|
435
|
+
</a>
|
|
436
|
+
</div>
|
|
437
|
+
<div class="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
438
|
+
aria-label="Download the app"
|
|
439
|
+
>
|
|
440
|
+
<a href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
441
|
+
class="ncf-icon ncf-icon--apple"
|
|
442
|
+
target="_blank"
|
|
443
|
+
rel="noopener noreferrer"
|
|
444
|
+
data-trackable="register-app-apple-ft-edit"
|
|
445
|
+
>
|
|
446
|
+
<span class="o-social-follow-icon__label">
|
|
447
|
+
on apple
|
|
448
|
+
</span>
|
|
449
|
+
</a>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
</div>
|
|
453
|
+
<div class="ncf__FT_Edit_confirmation--alerts">
|
|
454
|
+
<b>
|
|
455
|
+
Set up email alerts in
|
|
456
|
+
<span aria-label="myFT"
|
|
457
|
+
class="ncf-icon ncf-icon--myft"
|
|
458
|
+
>
|
|
459
|
+
</span>
|
|
460
|
+
</b>
|
|
461
|
+
<p>
|
|
462
|
+
Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters
|
|
463
|
+
</p>
|
|
464
|
+
<a href="/myft"
|
|
465
|
+
class="margin-top-x4 ncf__button ncf__button--secondary"
|
|
466
|
+
data-trackable="register-personalise-my-alerts"
|
|
467
|
+
>
|
|
468
|
+
Personalise my alerts
|
|
469
|
+
</a>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
<a href="/"
|
|
473
|
+
target="_parent"
|
|
474
|
+
class=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
475
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
476
|
+
>
|
|
477
|
+
Explore our FT Edit hub
|
|
478
|
+
</a>
|
|
479
|
+
</div>
|
|
480
|
+
`;
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
const EMAIL_DEFAULT_TEXT = 'your email';
|
|
10
|
+
|
|
11
|
+
const SOCIALS = [
|
|
12
|
+
{
|
|
13
|
+
name: 'instagram',
|
|
14
|
+
link: 'https://www.instagram.com/financialtimes',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
name: 'linkedin',
|
|
18
|
+
link: 'https://www.linkedin.com/company/financial-times',
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: 'twitter',
|
|
22
|
+
link: 'https://twitter.com/FT',
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: 'facebook',
|
|
26
|
+
link: 'https://www.facebook.com/financialtimes',
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
export function FTEditRegistrationConfirmation({
|
|
31
|
+
email = EMAIL_DEFAULT_TEXT,
|
|
32
|
+
articleUrl = '',
|
|
33
|
+
hubUrl = '/',
|
|
34
|
+
}) {
|
|
35
|
+
return (
|
|
36
|
+
<div className="ncf">
|
|
37
|
+
<div className="ncf__center ncf__margin">
|
|
38
|
+
<div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
|
|
39
|
+
<h1 className="ncf__header ncf__header--confirmation">Success</h1>
|
|
40
|
+
<p className="ncf__FT_Edit_confirmation--message">
|
|
41
|
+
Thank you for registering for FT Edit.
|
|
42
|
+
</p>
|
|
43
|
+
<p className="ncf__FT_Edit_confirmation--message margin-top-x4 ">
|
|
44
|
+
Enjoy 30 days of great journalism. We’ve sent confirmation to {email}.
|
|
45
|
+
</p>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div className="ncf__divider-horizontal" />
|
|
49
|
+
|
|
50
|
+
<div className="ncf__FT_Edit_confirmation--links ncf__margin">
|
|
51
|
+
<div className="ncf__FT_Edit_confirmation--socials">
|
|
52
|
+
<b>Breaking news alerts, direct to your lock screen</b>
|
|
53
|
+
<p className="ncf__FT_Edit_confirmation--mobile">
|
|
54
|
+
Download our apps or follow us on our socials
|
|
55
|
+
</p>
|
|
56
|
+
<p className="ncf__FT_Edit_confirmation--desktop">
|
|
57
|
+
Find us in the app stores or follow us on our socials
|
|
58
|
+
</p>
|
|
59
|
+
<div className="ncf__FT_Edit_confirmation--badges">
|
|
60
|
+
<div
|
|
61
|
+
className="o-social-follow"
|
|
62
|
+
aria-label="Follow on social media"
|
|
63
|
+
>
|
|
64
|
+
{SOCIALS.map(({ name, link }) => (
|
|
65
|
+
<a
|
|
66
|
+
key={name}
|
|
67
|
+
href={link}
|
|
68
|
+
className={`o-social-follow-icon o-social-follow-icon--${name}`}
|
|
69
|
+
target="_blank"
|
|
70
|
+
rel="noopener noreferrer"
|
|
71
|
+
data-trackable={`register-social-${name}`}
|
|
72
|
+
>
|
|
73
|
+
<span className="o-social-follow-icon__label">on {name}</span>
|
|
74
|
+
</a>
|
|
75
|
+
))}
|
|
76
|
+
</div>
|
|
77
|
+
<div
|
|
78
|
+
className="ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges"
|
|
79
|
+
aria-label="Download the app"
|
|
80
|
+
>
|
|
81
|
+
<a
|
|
82
|
+
key="apple-ft-edit"
|
|
83
|
+
href="https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369"
|
|
84
|
+
className={`ncf-icon ncf-icon--apple`}
|
|
85
|
+
target="_blank"
|
|
86
|
+
rel="noopener noreferrer"
|
|
87
|
+
data-trackable={`register-app-apple-ft-edit`}
|
|
88
|
+
>
|
|
89
|
+
<span className="o-social-follow-icon__label">on apple</span>
|
|
90
|
+
</a>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div className="ncf__FT_Edit_confirmation--alerts">
|
|
95
|
+
<b>
|
|
96
|
+
Set up email alerts in
|
|
97
|
+
<span aria-label="myFT" className="ncf-icon ncf-icon--myft" />
|
|
98
|
+
</b>
|
|
99
|
+
|
|
100
|
+
<p>
|
|
101
|
+
Choose the content you want to follow by personalising your alerts
|
|
102
|
+
for the most important topics and additional newsletters
|
|
103
|
+
</p>
|
|
104
|
+
<a
|
|
105
|
+
href="/myft"
|
|
106
|
+
className="margin-top-x4 ncf__button ncf__button--secondary"
|
|
107
|
+
data-trackable="register-personalise-my-alerts"
|
|
108
|
+
>
|
|
109
|
+
Personalise my alerts
|
|
110
|
+
</a>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<a
|
|
115
|
+
href={hubUrl}
|
|
116
|
+
target="_parent"
|
|
117
|
+
className=" ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit"
|
|
118
|
+
data-trackable="register-finish-head-to-ft-edit-hub"
|
|
119
|
+
>
|
|
120
|
+
Explore our FT Edit hub
|
|
121
|
+
</a>
|
|
122
|
+
|
|
123
|
+
{articleUrl && (
|
|
124
|
+
<a
|
|
125
|
+
href={articleUrl}
|
|
126
|
+
target="_parent"
|
|
127
|
+
className=" ncf__FT_Edit_confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing"
|
|
128
|
+
data-trackable="register-finish-head-to-article"
|
|
129
|
+
>
|
|
130
|
+
Continue reading
|
|
131
|
+
</a>
|
|
132
|
+
)}
|
|
133
|
+
</div>
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
FTEditRegistrationConfirmation.propTypes = {
|
|
138
|
+
email: PropTypes.string,
|
|
139
|
+
articleUrl: PropTypes.string,
|
|
140
|
+
hubUrl: PropTypes.string,
|
|
141
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { FTEditRegistrationConfirmation } from './index';
|
|
2
|
+
import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
expect.extend(expectToRenderCorrectly);
|
|
11
|
+
|
|
12
|
+
describe('RegistrationConfirmation', () => {
|
|
13
|
+
it('renders with default props', () => {
|
|
14
|
+
const props = {};
|
|
15
|
+
|
|
16
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('renders with a custom email', () => {
|
|
20
|
+
const props = { email: 'test@example.com' };
|
|
21
|
+
|
|
22
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
it('renders an explore hub button always', () => {
|
|
26
|
+
const props = { email: 'test@example.com', hubUrl: 'http://thing-hub' };
|
|
27
|
+
|
|
28
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('renders a continue reading button when an articleUrl is provided', () => {
|
|
32
|
+
const props = {
|
|
33
|
+
email: 'test@example.com',
|
|
34
|
+
articleUrl:
|
|
35
|
+
'https://www.ft.com/content/9141eee7-825a-41d7-913d-49e8c12e76db',
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
expect(FTEditRegistrationConfirmation).toRenderCorrectly(props);
|
|
39
|
+
});
|
|
40
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FTEditRegistrationConfirmation } from './ft-edit-registration-confirmation';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: 'FT Edit Registration Confirmation',
|
|
12
|
+
component: FTEditRegistrationConfirmation,
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const Basic = (args) => <FTEditRegistrationConfirmation {...args} />;
|
|
16
|
+
Basic.args = {
|
|
17
|
+
email: 'some@email.com',
|
|
18
|
+
hubUrl: 'https://ft-hub',
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export const WithArticleUrl = (args) => (
|
|
22
|
+
<FTEditRegistrationConfirmation {...args} />
|
|
23
|
+
);
|
|
24
|
+
Basic.args = {
|
|
25
|
+
email: 'some@email.com',
|
|
26
|
+
articleUrl: 'http://read-this-article.com',
|
|
27
|
+
};
|
package/components/index.js
CHANGED
|
@@ -29,6 +29,7 @@ export { ErrorPage } from './error-page';
|
|
|
29
29
|
export { Fieldset } from './fieldset';
|
|
30
30
|
export { FirstName } from './first-name';
|
|
31
31
|
export { Form } from './form';
|
|
32
|
+
export { FTEditRegistrationConfirmation } from './ft-edit-registration-confirmation';
|
|
32
33
|
export { Industry } from './industry';
|
|
33
34
|
export { JobTitle } from './job-title';
|
|
34
35
|
export { PersonalTitle } from './personal-title';
|
|
@@ -9,8 +9,6 @@ export function PaymentTerm({
|
|
|
9
9
|
isPrintOrBundle = false,
|
|
10
10
|
isEpaper = false,
|
|
11
11
|
options = [],
|
|
12
|
-
isFixedTermOffer = false,
|
|
13
|
-
offerDisplayName,
|
|
14
12
|
showLegal = true,
|
|
15
13
|
largePrice = false,
|
|
16
14
|
optionsInARow = false,
|
|
@@ -133,15 +131,11 @@ export function PaymentTerm({
|
|
|
133
131
|
</React.Fragment>
|
|
134
132
|
),
|
|
135
133
|
monthlyPrice: () => {},
|
|
136
|
-
renewsText: (
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
return (
|
|
142
|
-
<p className="ncf__payment-term__renews-text">{textToDisplay}</p>
|
|
143
|
-
);
|
|
144
|
-
},
|
|
134
|
+
renewsText: () => (
|
|
135
|
+
<p className="ncf__payment-term__renews-text">
|
|
136
|
+
{'Renews monthly unless cancelled'}
|
|
137
|
+
</p>
|
|
138
|
+
),
|
|
145
139
|
},
|
|
146
140
|
custom: {
|
|
147
141
|
price: (price) => (
|
|
@@ -235,7 +229,7 @@ export function PaymentTerm({
|
|
|
235
229
|
<div className="ncf__payment-term__description">
|
|
236
230
|
{nameMap[option.name].price(option.price)}
|
|
237
231
|
{nameMap[option.name].monthlyPrice(option.monthlyPrice)}
|
|
238
|
-
{nameMap[option.name].renewsText(
|
|
232
|
+
{nameMap[option.name].renewsText()}
|
|
239
233
|
{/* Remove this discount text temporarily in favour of monthly price */}
|
|
240
234
|
{/* <br />Save up to 25% when you pay annually */}
|
|
241
235
|
</div>
|
|
@@ -287,13 +281,9 @@ export function PaymentTerm({
|
|
|
287
281
|
return labelOverride;
|
|
288
282
|
}
|
|
289
283
|
|
|
290
|
-
const
|
|
284
|
+
const title =
|
|
291
285
|
option.name && nameMap[option.name] ? nameMap[option.name].title : '';
|
|
292
286
|
|
|
293
|
-
const title = isFixedTermOffer
|
|
294
|
-
? `${offerDisplayName} - ${defaultTitle}`
|
|
295
|
-
: defaultTitle;
|
|
296
|
-
|
|
297
287
|
let termDisplayName = '';
|
|
298
288
|
if (showTrialCopyInTitle) {
|
|
299
289
|
const termName = option.displayName
|
|
@@ -363,7 +353,7 @@ export function PaymentTerm({
|
|
|
363
353
|
|
|
364
354
|
{showLegal && (
|
|
365
355
|
<div className="ncf__payment-term__legal">
|
|
366
|
-
{isTermedSubscriptionTermType
|
|
356
|
+
{isTermedSubscriptionTermType ? (
|
|
367
357
|
<p>
|
|
368
358
|
Find out more about our cancellation policy in our{' '}
|
|
369
359
|
<a
|
|
@@ -434,9 +424,7 @@ PaymentTerm.propTypes = {
|
|
|
434
424
|
fulfilmentOption: PropTypes.string,
|
|
435
425
|
})
|
|
436
426
|
),
|
|
437
|
-
isFixedTermOffer: PropTypes.bool,
|
|
438
427
|
isTermedSubscriptionTermType: PropTypes.bool,
|
|
439
|
-
offerDisplayName: PropTypes.string,
|
|
440
428
|
showLegal: PropTypes.bool,
|
|
441
429
|
largePrice: PropTypes.bool,
|
|
442
430
|
optionsInARow: PropTypes.bool,
|
|
@@ -117,42 +117,6 @@ describe('PaymentTerm', () => {
|
|
|
117
117
|
});
|
|
118
118
|
});
|
|
119
119
|
|
|
120
|
-
describe('given isFixedTermOffer prop is set to true', () => {
|
|
121
|
-
const options = [
|
|
122
|
-
{
|
|
123
|
-
name: 'monthly',
|
|
124
|
-
price: '$5.00',
|
|
125
|
-
value: 'monthly',
|
|
126
|
-
monthlyPrice: '$5.00',
|
|
127
|
-
},
|
|
128
|
-
];
|
|
129
|
-
const wrapper = shallow(
|
|
130
|
-
<PaymentTerm
|
|
131
|
-
isFixedTermOffer={true}
|
|
132
|
-
options={options}
|
|
133
|
-
offerDisplayName="Mix & Match"
|
|
134
|
-
/>
|
|
135
|
-
);
|
|
136
|
-
|
|
137
|
-
it('does not include renewal text', () => {
|
|
138
|
-
expect(
|
|
139
|
-
wrapper.find('.ncf__payment-term__renews-text').text()
|
|
140
|
-
).not.toMatch(/Renews (annually|monthly|quarterly) unless cancelled/);
|
|
141
|
-
});
|
|
142
|
-
|
|
143
|
-
it('renders fixed term renewal text in English', () => {
|
|
144
|
-
expect(wrapper.find('.ncf__payment-term__renews-text').text()).toMatch(
|
|
145
|
-
/This subscription is for 3 months, charged monthly. You can cancel at anytime/
|
|
146
|
-
);
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
it('renders offer name on payment term title', () => {
|
|
150
|
-
expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
|
|
151
|
-
'Mix & Match - Monthly'
|
|
152
|
-
);
|
|
153
|
-
});
|
|
154
|
-
});
|
|
155
|
-
|
|
156
120
|
describe('given isTermedSubscriptionTermType is true', () => {
|
|
157
121
|
describe('options include duration expressed in weeks', () => {
|
|
158
122
|
const options = [
|
|
@@ -90,25 +90,6 @@ Basic.args = {
|
|
|
90
90
|
],
|
|
91
91
|
};
|
|
92
92
|
|
|
93
|
-
export const FixedTermOffer = (args) => (
|
|
94
|
-
<div className="ncf">
|
|
95
|
-
<Fieldset>
|
|
96
|
-
<PaymentTerm {...args} />
|
|
97
|
-
</Fieldset>
|
|
98
|
-
</div>
|
|
99
|
-
);
|
|
100
|
-
FixedTermOffer.args = {
|
|
101
|
-
options: [
|
|
102
|
-
{
|
|
103
|
-
name: 'monthly',
|
|
104
|
-
price: '$5.00',
|
|
105
|
-
value: 5.0,
|
|
106
|
-
},
|
|
107
|
-
],
|
|
108
|
-
isFixedTermOffer: true,
|
|
109
|
-
offerDisplayName: 'Mix & Match',
|
|
110
|
-
};
|
|
111
|
-
|
|
112
93
|
export const TermedSubscriptionTermType = (args) => (
|
|
113
94
|
<div className="ncf">
|
|
114
95
|
<Fieldset>
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.FTEditRegistrationConfirmation = FTEditRegistrationConfirmation;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
/***
|
|
11
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
12
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
13
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
14
|
+
*/
|
|
15
|
+
var EMAIL_DEFAULT_TEXT = 'your email';
|
|
16
|
+
var SOCIALS = [{
|
|
17
|
+
name: 'instagram',
|
|
18
|
+
link: 'https://www.instagram.com/financialtimes'
|
|
19
|
+
}, {
|
|
20
|
+
name: 'linkedin',
|
|
21
|
+
link: 'https://www.linkedin.com/company/financial-times'
|
|
22
|
+
}, {
|
|
23
|
+
name: 'twitter',
|
|
24
|
+
link: 'https://twitter.com/FT'
|
|
25
|
+
}, {
|
|
26
|
+
name: 'facebook',
|
|
27
|
+
link: 'https://www.facebook.com/financialtimes'
|
|
28
|
+
}];
|
|
29
|
+
function FTEditRegistrationConfirmation(_ref) {
|
|
30
|
+
var _ref$email = _ref.email,
|
|
31
|
+
email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
|
|
32
|
+
_ref$articleUrl = _ref.articleUrl,
|
|
33
|
+
articleUrl = _ref$articleUrl === void 0 ? '' : _ref$articleUrl,
|
|
34
|
+
_ref$hubUrl = _ref.hubUrl,
|
|
35
|
+
hubUrl = _ref$hubUrl === void 0 ? '/' : _ref$hubUrl;
|
|
36
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
37
|
+
className: "ncf"
|
|
38
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
39
|
+
className: "ncf__center ncf__margin"
|
|
40
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
41
|
+
className: "ncf__icon ncf__icon--tick ncf__icon--large"
|
|
42
|
+
}), /*#__PURE__*/_react["default"].createElement("h1", {
|
|
43
|
+
className: "ncf__header ncf__header--confirmation"
|
|
44
|
+
}, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
|
|
45
|
+
className: "ncf__FT_Edit_confirmation--message"
|
|
46
|
+
}, "Thank you for registering for FT Edit."), /*#__PURE__*/_react["default"].createElement("p", {
|
|
47
|
+
className: "ncf__FT_Edit_confirmation--message margin-top-x4 "
|
|
48
|
+
}, "Enjoy 30 days of great journalism. We\u2019ve sent confirmation to ", email, ".")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
49
|
+
className: "ncf__divider-horizontal"
|
|
50
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
51
|
+
className: "ncf__FT_Edit_confirmation--links ncf__margin"
|
|
52
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
53
|
+
className: "ncf__FT_Edit_confirmation--socials"
|
|
54
|
+
}, /*#__PURE__*/_react["default"].createElement("b", null, "Breaking news alerts, direct to your lock screen"), /*#__PURE__*/_react["default"].createElement("p", {
|
|
55
|
+
className: "ncf__FT_Edit_confirmation--mobile"
|
|
56
|
+
}, "Download our apps or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
|
|
57
|
+
className: "ncf__FT_Edit_confirmation--desktop"
|
|
58
|
+
}, "Find us in the app stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
59
|
+
className: "ncf__FT_Edit_confirmation--badges"
|
|
60
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
61
|
+
className: "o-social-follow",
|
|
62
|
+
"aria-label": "Follow on social media"
|
|
63
|
+
}, SOCIALS.map(function (_ref2) {
|
|
64
|
+
var name = _ref2.name,
|
|
65
|
+
link = _ref2.link;
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement("a", {
|
|
67
|
+
key: name,
|
|
68
|
+
href: link,
|
|
69
|
+
className: "o-social-follow-icon o-social-follow-icon--".concat(name),
|
|
70
|
+
target: "_blank",
|
|
71
|
+
rel: "noopener noreferrer",
|
|
72
|
+
"data-trackable": "register-social-".concat(name)
|
|
73
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
74
|
+
className: "o-social-follow-icon__label"
|
|
75
|
+
}, "on ", name));
|
|
76
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
77
|
+
className: "ncf__FT_Edit_confirmation--mobile ncf__FT_Edit_confirmation--app-badges",
|
|
78
|
+
"aria-label": "Download the app"
|
|
79
|
+
}, /*#__PURE__*/_react["default"].createElement("a", {
|
|
80
|
+
key: "apple-ft-edit",
|
|
81
|
+
href: "https://apps.apple.com/gb/app/ft-edit-by-the-financial-times/id1574510369",
|
|
82
|
+
className: "ncf-icon ncf-icon--apple",
|
|
83
|
+
target: "_blank",
|
|
84
|
+
rel: "noopener noreferrer",
|
|
85
|
+
"data-trackable": "register-app-apple-ft-edit"
|
|
86
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
87
|
+
className: "o-social-follow-icon__label"
|
|
88
|
+
}, "on apple"))))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
89
|
+
className: "ncf__FT_Edit_confirmation--alerts"
|
|
90
|
+
}, /*#__PURE__*/_react["default"].createElement("b", null, "Set up email alerts in", /*#__PURE__*/_react["default"].createElement("span", {
|
|
91
|
+
"aria-label": "myFT",
|
|
92
|
+
className: "ncf-icon ncf-icon--myft"
|
|
93
|
+
})), /*#__PURE__*/_react["default"].createElement("p", null, "Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters"), /*#__PURE__*/_react["default"].createElement("a", {
|
|
94
|
+
href: "/myft",
|
|
95
|
+
className: "margin-top-x4 ncf__button ncf__button--secondary",
|
|
96
|
+
"data-trackable": "register-personalise-my-alerts"
|
|
97
|
+
}, "Personalise my alerts"))), /*#__PURE__*/_react["default"].createElement("a", {
|
|
98
|
+
href: hubUrl,
|
|
99
|
+
target: "_parent",
|
|
100
|
+
className: " ncf__FT_Edit_confirmation--finish ncf__button ncf__button--submit",
|
|
101
|
+
"data-trackable": "register-finish-head-to-ft-edit-hub"
|
|
102
|
+
}, "Explore our FT Edit hub"), articleUrl && /*#__PURE__*/_react["default"].createElement("a", {
|
|
103
|
+
href: articleUrl,
|
|
104
|
+
target: "_parent",
|
|
105
|
+
className: " ncf__FT_Edit_confirmation--finish-article-read ncf__button ncf__button--secondary reduce-bottom-spacing",
|
|
106
|
+
"data-trackable": "register-finish-head-to-article"
|
|
107
|
+
}, "Continue reading"));
|
|
108
|
+
}
|
|
109
|
+
FTEditRegistrationConfirmation.propTypes = {
|
|
110
|
+
email: _propTypes["default"].string,
|
|
111
|
+
articleUrl: _propTypes["default"].string,
|
|
112
|
+
hubUrl: _propTypes["default"].string
|
|
113
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -183,6 +183,12 @@ Object.defineProperty(exports, "ErrorPage", {
|
|
|
183
183
|
return _errorPage.ErrorPage;
|
|
184
184
|
}
|
|
185
185
|
});
|
|
186
|
+
Object.defineProperty(exports, "FTEditRegistrationConfirmation", {
|
|
187
|
+
enumerable: true,
|
|
188
|
+
get: function get() {
|
|
189
|
+
return _ftEditRegistrationConfirmation.FTEditRegistrationConfirmation;
|
|
190
|
+
}
|
|
191
|
+
});
|
|
186
192
|
Object.defineProperty(exports, "Fieldset", {
|
|
187
193
|
enumerable: true,
|
|
188
194
|
get: function get() {
|
|
@@ -388,6 +394,7 @@ var _errorPage = require("./error-page");
|
|
|
388
394
|
var _fieldset = require("./fieldset");
|
|
389
395
|
var _firstName = require("./first-name");
|
|
390
396
|
var _form = require("./form");
|
|
397
|
+
var _ftEditRegistrationConfirmation = require("./ft-edit-registration-confirmation");
|
|
391
398
|
var _industry = require("./industry");
|
|
392
399
|
var _jobTitle = require("./job-title");
|
|
393
400
|
var _personalTitle = require("./personal-title");
|
package/dist/payment-term.jsx
CHANGED
|
@@ -23,9 +23,6 @@ function PaymentTerm(_ref) {
|
|
|
23
23
|
isEpaper = _ref$isEpaper === void 0 ? false : _ref$isEpaper,
|
|
24
24
|
_ref$options = _ref.options,
|
|
25
25
|
options = _ref$options === void 0 ? [] : _ref$options,
|
|
26
|
-
_ref$isFixedTermOffer = _ref.isFixedTermOffer,
|
|
27
|
-
isFixedTermOffer = _ref$isFixedTermOffer === void 0 ? false : _ref$isFixedTermOffer,
|
|
28
|
-
offerDisplayName = _ref.offerDisplayName,
|
|
29
26
|
_ref$showLegal = _ref.showLegal,
|
|
30
27
|
showLegal = _ref$showLegal === void 0 ? true : _ref$showLegal,
|
|
31
28
|
_ref$largePrice = _ref.largePrice,
|
|
@@ -142,11 +139,10 @@ function PaymentTerm(_ref) {
|
|
|
142
139
|
}, price), " per month after the trial period.");
|
|
143
140
|
},
|
|
144
141
|
monthlyPrice: function monthlyPrice() {},
|
|
145
|
-
renewsText: function renewsText(
|
|
146
|
-
var textToDisplay = isFixedTermOffer ? 'This subscription is for 3 months, charged monthly. You can cancel at anytime' : 'Renews monthly unless cancelled';
|
|
142
|
+
renewsText: function renewsText() {
|
|
147
143
|
return /*#__PURE__*/_react["default"].createElement("p", {
|
|
148
144
|
className: "ncf__payment-term__renews-text"
|
|
149
|
-
},
|
|
145
|
+
}, 'Renews monthly unless cancelled');
|
|
150
146
|
}
|
|
151
147
|
},
|
|
152
148
|
custom: {
|
|
@@ -205,7 +201,7 @@ function PaymentTerm(_ref) {
|
|
|
205
201
|
className: "ncf__payment-term__trial-price"
|
|
206
202
|
}, option.trialPrice), /*#__PURE__*/_react["default"].createElement("br", null), nameMap[option.name] && nameMap[option.name].trialPrice(option.price)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, nameMap[option.name] ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
207
203
|
className: "ncf__payment-term__description"
|
|
208
|
-
}, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(
|
|
204
|
+
}, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText()) :
|
|
209
205
|
// this should cover the cases different than annual, quarterly and monthly
|
|
210
206
|
// for those containing period on option.value, render custom template, for the rest keep legacy render
|
|
211
207
|
isValidPeriod(option.value) ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -228,8 +224,7 @@ function PaymentTerm(_ref) {
|
|
|
228
224
|
if (isTrialOfferAsNonTrialOverride && labelOverride) {
|
|
229
225
|
return labelOverride;
|
|
230
226
|
}
|
|
231
|
-
var
|
|
232
|
-
var title = isFixedTermOffer ? "".concat(offerDisplayName, " - ").concat(defaultTitle) : defaultTitle;
|
|
227
|
+
var title = option.name && nameMap[option.name] ? nameMap[option.name].title : '';
|
|
233
228
|
var termDisplayName = '';
|
|
234
229
|
if (showTrialCopyInTitle) {
|
|
235
230
|
var termName = option.displayName ? option.displayName : 'Premium Digital';
|
|
@@ -275,7 +270,7 @@ function PaymentTerm(_ref) {
|
|
|
275
270
|
return createPaymentTerm(option);
|
|
276
271
|
})), showLegal && /*#__PURE__*/_react["default"].createElement("div", {
|
|
277
272
|
className: "ncf__payment-term__legal"
|
|
278
|
-
}, isTermedSubscriptionTermType
|
|
273
|
+
}, isTermedSubscriptionTermType ? /*#__PURE__*/_react["default"].createElement("p", null, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
|
|
279
274
|
className: "ncf__link--external",
|
|
280
275
|
href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
|
|
281
276
|
title: "FT Legal Terms and Conditions help page",
|
|
@@ -314,9 +309,7 @@ PaymentTerm.propTypes = {
|
|
|
314
309
|
chargeOnText: _propTypes["default"].string,
|
|
315
310
|
fulfilmentOption: _propTypes["default"].string
|
|
316
311
|
})),
|
|
317
|
-
isFixedTermOffer: _propTypes["default"].bool,
|
|
318
312
|
isTermedSubscriptionTermType: _propTypes["default"].bool,
|
|
319
|
-
offerDisplayName: _propTypes["default"].string,
|
|
320
313
|
showLegal: _propTypes["default"].bool,
|
|
321
314
|
largePrice: _propTypes["default"].bool,
|
|
322
315
|
optionsInARow: _propTypes["default"].bool,
|
package/main.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-conversion-forms",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "36.0.0",
|
|
4
4
|
"description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"webpack-cli": "^5.1.4"
|
|
82
82
|
},
|
|
83
83
|
"engines": {
|
|
84
|
-
"node": "
|
|
84
|
+
"node": "18.x",
|
|
85
85
|
"npm": "7.x || 8.x || 9.x"
|
|
86
86
|
},
|
|
87
87
|
"lint-staged": {
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
@import '@financial-times/o-social-follow/main';
|
|
2
|
+
@import '@financial-times/o-grid/main';
|
|
3
|
+
|
|
4
|
+
/***
|
|
5
|
+
* This component has been created for a trial feature for the FT Edit app to be used inside
|
|
6
|
+
* next-subscribe. This can be removed after the trial. The trial is beginning May 2024, please
|
|
7
|
+
* reach out to light-apps channel if we dont reach out first, as to when this can be deleted.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
@include oSocialFollow(
|
|
11
|
+
$opts: (
|
|
12
|
+
'icons': (
|
|
13
|
+
'twitter',
|
|
14
|
+
'facebook',
|
|
15
|
+
'linkedin',
|
|
16
|
+
'instagram',
|
|
17
|
+
),
|
|
18
|
+
)
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
@mixin ncfConfirmation() {
|
|
22
|
+
&__FT_Edit_confirmation {
|
|
23
|
+
&--message {
|
|
24
|
+
max-width: 304px;
|
|
25
|
+
margin: auto;
|
|
26
|
+
margin-bottom: 12px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&--desktop {
|
|
30
|
+
@include oGridRespondTo($until: M) {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&--mobile {
|
|
36
|
+
@include oGridRespondTo(M) {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&--links {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-rows: 1fr 1fr;
|
|
44
|
+
gap: oSpacingByName('s4');
|
|
45
|
+
margin-top: oSpacingByName('s6');
|
|
46
|
+
|
|
47
|
+
@include oGridRespondTo(M) {
|
|
48
|
+
grid-template-rows: unset;
|
|
49
|
+
grid-template-columns: 1fr 1fr;
|
|
50
|
+
gap: oSpacingByName('s8');
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--socials {
|
|
55
|
+
@include oGridRespondTo(M) {
|
|
56
|
+
padding: oSpacingByName('s6') oSpacingByName('s4');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--badges {
|
|
61
|
+
@include oGridRespondTo($until: M) {
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: 1fr 1fr;
|
|
64
|
+
gap: oSpacingByName('s6');
|
|
65
|
+
margin: auto;
|
|
66
|
+
max-width: 256px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&--app-badges {
|
|
71
|
+
@include oGridRespondTo($until: M) {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
gap: 16px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&--alerts {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
padding: 24px 20px;
|
|
82
|
+
background-color: oColorsByName('white-60');
|
|
83
|
+
|
|
84
|
+
a {
|
|
85
|
+
color: oColorsByName('black-90');
|
|
86
|
+
border-color: currentColor;
|
|
87
|
+
position: sticky;
|
|
88
|
+
top: 100vh;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&--finish {
|
|
93
|
+
display: block;
|
|
94
|
+
margin: 48px auto 0;
|
|
95
|
+
width: 100%;
|
|
96
|
+
|
|
97
|
+
@include oGridRespondTo(M) {
|
|
98
|
+
max-width: 260px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&--finish-article-read {
|
|
103
|
+
display: block;
|
|
104
|
+
margin: 12px auto 0px;
|
|
105
|
+
width: 100%;
|
|
106
|
+
|
|
107
|
+
@include oGridRespondTo(M) {
|
|
108
|
+
max-width: 260px;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.ncf-icon::before {
|
|
115
|
+
content: '';
|
|
116
|
+
display: inline-block;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
background-size: contain;
|
|
119
|
+
background-repeat: no-repeat;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.ncf-icon--myft::before {
|
|
123
|
+
margin-left: 0.5rem;
|
|
124
|
+
height: 1rem;
|
|
125
|
+
width: 3rem;
|
|
126
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo:brand-myft?format=svg&source=next-subscribe&tint=%2333302E%2C%2333302E&width=28&height=16');
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.ncf-icon--android::before {
|
|
130
|
+
height: 40px;
|
|
131
|
+
width: 136px;
|
|
132
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aandroid?source=next-subscribe');
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ncf-icon--apple::before {
|
|
136
|
+
height: 40px;
|
|
137
|
+
width: 136px;
|
|
138
|
+
background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aapple?format=svg&source=next-subscribe');
|
|
139
|
+
}
|