@financial-times/n-conversion-forms 44.2.0 → 44.3.1
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
CHANGED
|
@@ -101,6 +101,29 @@ exports[`PaymentType can initialise with the loader visible 1`] = `
|
|
|
101
101
|
<div class="o-forms-input__error">
|
|
102
102
|
Please enter a valid payment type
|
|
103
103
|
</div>
|
|
104
|
+
<div class="ncf__payment-type-paypal-message">
|
|
105
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
106
|
+
data-o-component="o-message"
|
|
107
|
+
>
|
|
108
|
+
<div class="o-message__container">
|
|
109
|
+
<div class="o-message__content">
|
|
110
|
+
<p class="o-message__content-main">
|
|
111
|
+
To change your payment method to
|
|
112
|
+
<b>
|
|
113
|
+
PayPal
|
|
114
|
+
</b>
|
|
115
|
+
, please
|
|
116
|
+
<a class="o-message__actions__secondary"
|
|
117
|
+
href="https://help.ft.com"
|
|
118
|
+
>
|
|
119
|
+
contact Customer Care
|
|
120
|
+
</a>
|
|
121
|
+
.
|
|
122
|
+
</p>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
104
127
|
</div>
|
|
105
128
|
<div class="o-forms-field">
|
|
106
129
|
</div>
|
|
@@ -207,6 +230,29 @@ exports[`PaymentType render with default props 1`] = `
|
|
|
207
230
|
<div class="o-forms-input__error">
|
|
208
231
|
Please enter a valid payment type
|
|
209
232
|
</div>
|
|
233
|
+
<div class="ncf__payment-type-paypal-message">
|
|
234
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
235
|
+
data-o-component="o-message"
|
|
236
|
+
>
|
|
237
|
+
<div class="o-message__container">
|
|
238
|
+
<div class="o-message__content">
|
|
239
|
+
<p class="o-message__content-main">
|
|
240
|
+
To change your payment method to
|
|
241
|
+
<b>
|
|
242
|
+
PayPal
|
|
243
|
+
</b>
|
|
244
|
+
, please
|
|
245
|
+
<a class="o-message__actions__secondary"
|
|
246
|
+
href="https://help.ft.com"
|
|
247
|
+
>
|
|
248
|
+
contact Customer Care
|
|
249
|
+
</a>
|
|
250
|
+
.
|
|
251
|
+
</p>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
210
256
|
</div>
|
|
211
257
|
<div class="o-forms-field">
|
|
212
258
|
</div>
|
|
@@ -313,6 +359,29 @@ exports[`PaymentType render with enableApplepay 1`] = `
|
|
|
313
359
|
<div class="o-forms-input__error">
|
|
314
360
|
Please enter a valid payment type
|
|
315
361
|
</div>
|
|
362
|
+
<div class="ncf__payment-type-paypal-message">
|
|
363
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
364
|
+
data-o-component="o-message"
|
|
365
|
+
>
|
|
366
|
+
<div class="o-message__container">
|
|
367
|
+
<div class="o-message__content">
|
|
368
|
+
<p class="o-message__content-main">
|
|
369
|
+
To change your payment method to
|
|
370
|
+
<b>
|
|
371
|
+
PayPal
|
|
372
|
+
</b>
|
|
373
|
+
, please
|
|
374
|
+
<a class="o-message__actions__secondary"
|
|
375
|
+
href="https://help.ft.com"
|
|
376
|
+
>
|
|
377
|
+
contact Customer Care
|
|
378
|
+
</a>
|
|
379
|
+
.
|
|
380
|
+
</p>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
316
385
|
</div>
|
|
317
386
|
<div class="o-forms-field">
|
|
318
387
|
</div>
|
|
@@ -419,6 +488,29 @@ exports[`PaymentType render with enableBankTransfer 1`] = `
|
|
|
419
488
|
<div class="o-forms-input__error">
|
|
420
489
|
Please enter a valid payment type
|
|
421
490
|
</div>
|
|
491
|
+
<div class="ncf__payment-type-paypal-message">
|
|
492
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
493
|
+
data-o-component="o-message"
|
|
494
|
+
>
|
|
495
|
+
<div class="o-message__container">
|
|
496
|
+
<div class="o-message__content">
|
|
497
|
+
<p class="o-message__content-main">
|
|
498
|
+
To change your payment method to
|
|
499
|
+
<b>
|
|
500
|
+
PayPal
|
|
501
|
+
</b>
|
|
502
|
+
, please
|
|
503
|
+
<a class="o-message__actions__secondary"
|
|
504
|
+
href="https://help.ft.com"
|
|
505
|
+
>
|
|
506
|
+
contact Customer Care
|
|
507
|
+
</a>
|
|
508
|
+
.
|
|
509
|
+
</p>
|
|
510
|
+
</div>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
422
514
|
</div>
|
|
423
515
|
<div class="o-forms-field">
|
|
424
516
|
</div>
|
|
@@ -525,6 +617,29 @@ exports[`PaymentType render with enableCreditcard 1`] = `
|
|
|
525
617
|
<div class="o-forms-input__error">
|
|
526
618
|
Please enter a valid payment type
|
|
527
619
|
</div>
|
|
620
|
+
<div class="ncf__payment-type-paypal-message">
|
|
621
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
622
|
+
data-o-component="o-message"
|
|
623
|
+
>
|
|
624
|
+
<div class="o-message__container">
|
|
625
|
+
<div class="o-message__content">
|
|
626
|
+
<p class="o-message__content-main">
|
|
627
|
+
To change your payment method to
|
|
628
|
+
<b>
|
|
629
|
+
PayPal
|
|
630
|
+
</b>
|
|
631
|
+
, please
|
|
632
|
+
<a class="o-message__actions__secondary"
|
|
633
|
+
href="https://help.ft.com"
|
|
634
|
+
>
|
|
635
|
+
contact Customer Care
|
|
636
|
+
</a>
|
|
637
|
+
.
|
|
638
|
+
</p>
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
</div>
|
|
642
|
+
</div>
|
|
528
643
|
<div class="ncf__payment-type-panel ncf__payment-type-panel--creditcard ncf__payment-type-panel--directdebit ncf__hidden">
|
|
529
644
|
<div class="ncf__zuora-payment-overlay ncf__hidden">
|
|
530
645
|
</div>
|
|
@@ -650,6 +765,29 @@ exports[`PaymentType render with enableDirectdebit 1`] = `
|
|
|
650
765
|
<div class="o-forms-input__error">
|
|
651
766
|
Please enter a valid payment type
|
|
652
767
|
</div>
|
|
768
|
+
<div class="ncf__payment-type-paypal-message">
|
|
769
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
770
|
+
data-o-component="o-message"
|
|
771
|
+
>
|
|
772
|
+
<div class="o-message__container">
|
|
773
|
+
<div class="o-message__content">
|
|
774
|
+
<p class="o-message__content-main">
|
|
775
|
+
To change your payment method to
|
|
776
|
+
<b>
|
|
777
|
+
PayPal
|
|
778
|
+
</b>
|
|
779
|
+
, please
|
|
780
|
+
<a class="o-message__actions__secondary"
|
|
781
|
+
href="https://help.ft.com"
|
|
782
|
+
>
|
|
783
|
+
contact Customer Care
|
|
784
|
+
</a>
|
|
785
|
+
.
|
|
786
|
+
</p>
|
|
787
|
+
</div>
|
|
788
|
+
</div>
|
|
789
|
+
</div>
|
|
790
|
+
</div>
|
|
653
791
|
<div class="ncf__payment-type-panel ncf__payment-type-panel--directdebit ncf__hidden">
|
|
654
792
|
<div id="directDebitGuarantee"
|
|
655
793
|
class="ncf__directdebit-guarantee"
|
|
@@ -920,6 +1058,29 @@ exports[`PaymentType render with isSingleTerm 1`] = `
|
|
|
920
1058
|
<div class="o-forms-input__error">
|
|
921
1059
|
Please enter a valid payment type
|
|
922
1060
|
</div>
|
|
1061
|
+
<div class="ncf__payment-type-paypal-message">
|
|
1062
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
1063
|
+
data-o-component="o-message"
|
|
1064
|
+
>
|
|
1065
|
+
<div class="o-message__container">
|
|
1066
|
+
<div class="o-message__content">
|
|
1067
|
+
<p class="o-message__content-main">
|
|
1068
|
+
To change your payment method to
|
|
1069
|
+
<b>
|
|
1070
|
+
PayPal
|
|
1071
|
+
</b>
|
|
1072
|
+
, please
|
|
1073
|
+
<a class="o-message__actions__secondary"
|
|
1074
|
+
href="https://help.ft.com"
|
|
1075
|
+
>
|
|
1076
|
+
contact Customer Care
|
|
1077
|
+
</a>
|
|
1078
|
+
.
|
|
1079
|
+
</p>
|
|
1080
|
+
</div>
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
</div>
|
|
923
1084
|
</div>
|
|
924
1085
|
<div class="o-forms-field">
|
|
925
1086
|
<label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
|
|
@@ -1039,6 +1200,29 @@ exports[`PaymentType render with isSingleTermChecked 1`] = `
|
|
|
1039
1200
|
<div class="o-forms-input__error">
|
|
1040
1201
|
Please enter a valid payment type
|
|
1041
1202
|
</div>
|
|
1203
|
+
<div class="ncf__payment-type-paypal-message">
|
|
1204
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
1205
|
+
data-o-component="o-message"
|
|
1206
|
+
>
|
|
1207
|
+
<div class="o-message__container">
|
|
1208
|
+
<div class="o-message__content">
|
|
1209
|
+
<p class="o-message__content-main">
|
|
1210
|
+
To change your payment method to
|
|
1211
|
+
<b>
|
|
1212
|
+
PayPal
|
|
1213
|
+
</b>
|
|
1214
|
+
, please
|
|
1215
|
+
<a class="o-message__actions__secondary"
|
|
1216
|
+
href="https://help.ft.com"
|
|
1217
|
+
>
|
|
1218
|
+
contact Customer Care
|
|
1219
|
+
</a>
|
|
1220
|
+
.
|
|
1221
|
+
</p>
|
|
1222
|
+
</div>
|
|
1223
|
+
</div>
|
|
1224
|
+
</div>
|
|
1225
|
+
</div>
|
|
1042
1226
|
</div>
|
|
1043
1227
|
<div class="o-forms-field">
|
|
1044
1228
|
<label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
|
|
@@ -1159,6 +1343,29 @@ exports[`PaymentType render with value 1`] = `
|
|
|
1159
1343
|
<div class="o-forms-input__error">
|
|
1160
1344
|
Please enter a valid payment type
|
|
1161
1345
|
</div>
|
|
1346
|
+
<div class="ncf__payment-type-paypal-message">
|
|
1347
|
+
<div class="o-message o-message--notice o-message--inform"
|
|
1348
|
+
data-o-component="o-message"
|
|
1349
|
+
>
|
|
1350
|
+
<div class="o-message__container">
|
|
1351
|
+
<div class="o-message__content">
|
|
1352
|
+
<p class="o-message__content-main">
|
|
1353
|
+
To change your payment method to
|
|
1354
|
+
<b>
|
|
1355
|
+
PayPal
|
|
1356
|
+
</b>
|
|
1357
|
+
, please
|
|
1358
|
+
<a class="o-message__actions__secondary"
|
|
1359
|
+
href="https://help.ft.com"
|
|
1360
|
+
>
|
|
1361
|
+
contact Customer Care
|
|
1362
|
+
</a>
|
|
1363
|
+
.
|
|
1364
|
+
</p>
|
|
1365
|
+
</div>
|
|
1366
|
+
</div>
|
|
1367
|
+
</div>
|
|
1368
|
+
</div>
|
|
1162
1369
|
</div>
|
|
1163
1370
|
<div class="o-forms-field">
|
|
1164
1371
|
</div>
|
|
@@ -13,7 +13,7 @@ const PaypalCustomerCareMessage = () => {
|
|
|
13
13
|
<div className="o-message__container">
|
|
14
14
|
<div className="o-message__content">
|
|
15
15
|
<p className="o-message__content-main">
|
|
16
|
-
|
|
16
|
+
To change your payment method to <b>PayPal</b>, please
|
|
17
17
|
<a
|
|
18
18
|
className="o-message__actions__secondary"
|
|
19
19
|
href="https://help.ft.com"
|
|
@@ -36,7 +36,6 @@ export function PaymentType({
|
|
|
36
36
|
enablePaypal = false,
|
|
37
37
|
enableBankTransfer = false,
|
|
38
38
|
showLoaderOnInit = false,
|
|
39
|
-
showPaypalCustomerCareMessage = false,
|
|
40
39
|
fieldId = 'paymentTypeField',
|
|
41
40
|
inputId = 'paymentType',
|
|
42
41
|
value,
|
|
@@ -72,10 +71,10 @@ export function PaymentType({
|
|
|
72
71
|
hide: !enableCreditcard,
|
|
73
72
|
};
|
|
74
73
|
|
|
75
|
-
const paymentTypePaypal =
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
const paymentTypePaypal = {
|
|
75
|
+
id: 'paypal',
|
|
76
|
+
label: 'PayPal',
|
|
77
|
+
hide: !enablePaypal,
|
|
79
78
|
};
|
|
80
79
|
|
|
81
80
|
const paymentTypeDirectDebit = {
|
|
@@ -104,7 +103,7 @@ export function PaymentType({
|
|
|
104
103
|
const createPaymentTypes = () => {
|
|
105
104
|
const paymentTypes = [
|
|
106
105
|
paymentTypeCreditCard,
|
|
107
|
-
paymentTypePaypal
|
|
106
|
+
paymentTypePaypal,
|
|
108
107
|
paymentTypeDirectDebit,
|
|
109
108
|
paymentTypeApplePay,
|
|
110
109
|
paymentTypeBankTransfer,
|
|
@@ -257,7 +256,7 @@ export function PaymentType({
|
|
|
257
256
|
<div className="o-forms-input__error">
|
|
258
257
|
Please enter a valid payment type
|
|
259
258
|
</div>
|
|
260
|
-
{
|
|
259
|
+
{!enablePaypal && PaypalCustomerCareMessage()}
|
|
261
260
|
{createDirectDebitPanel()}
|
|
262
261
|
{createZuoraPanel()}
|
|
263
262
|
</div>
|
|
@@ -285,7 +284,6 @@ PaymentType.propTypes = {
|
|
|
285
284
|
enablePaypal: PropTypes.bool,
|
|
286
285
|
enableBankTransfer: PropTypes.bool,
|
|
287
286
|
showLoaderOnInit: PropTypes.bool,
|
|
288
|
-
showPaypalCustomerCareMessage: PropTypes.bool,
|
|
289
287
|
fieldId: PropTypes.string,
|
|
290
288
|
inputId: PropTypes.string,
|
|
291
289
|
value: PropTypes.string,
|
package/dist/payment-type.jsx
CHANGED
|
@@ -24,7 +24,7 @@ var PaypalCustomerCareMessage = function PaypalCustomerCareMessage() {
|
|
|
24
24
|
className: "o-message__content"
|
|
25
25
|
}, /*#__PURE__*/_react["default"].createElement("p", {
|
|
26
26
|
className: "o-message__content-main"
|
|
27
|
-
}, "
|
|
27
|
+
}, "To change your payment method to ", /*#__PURE__*/_react["default"].createElement("b", null, "PayPal"), ", please\xA0", /*#__PURE__*/_react["default"].createElement("a", {
|
|
28
28
|
className: "o-message__actions__secondary",
|
|
29
29
|
href: "https://help.ft.com"
|
|
30
30
|
}, "contact Customer Care"), ".")))));
|
|
@@ -42,8 +42,6 @@ function PaymentType(_ref) {
|
|
|
42
42
|
enableBankTransfer = _ref$enableBankTransf === void 0 ? false : _ref$enableBankTransf,
|
|
43
43
|
_ref$showLoaderOnInit = _ref.showLoaderOnInit,
|
|
44
44
|
showLoaderOnInit = _ref$showLoaderOnInit === void 0 ? false : _ref$showLoaderOnInit,
|
|
45
|
-
_ref$showPaypalCustom = _ref.showPaypalCustomerCareMessage,
|
|
46
|
-
showPaypalCustomerCareMessage = _ref$showPaypalCustom === void 0 ? false : _ref$showPaypalCustom,
|
|
47
45
|
_ref$fieldId = _ref.fieldId,
|
|
48
46
|
fieldId = _ref$fieldId === void 0 ? 'paymentTypeField' : _ref$fieldId,
|
|
49
47
|
_ref$inputId = _ref.inputId,
|
|
@@ -68,14 +66,10 @@ function PaymentType(_ref) {
|
|
|
68
66
|
label: 'Credit / Debit Card',
|
|
69
67
|
hide: !enableCreditcard
|
|
70
68
|
};
|
|
71
|
-
var paymentTypePaypal =
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
label: 'PayPal',
|
|
76
|
-
hide: !enablePaypal
|
|
77
|
-
};
|
|
78
|
-
}
|
|
69
|
+
var paymentTypePaypal = {
|
|
70
|
+
id: 'paypal',
|
|
71
|
+
label: 'PayPal',
|
|
72
|
+
hide: !enablePaypal
|
|
79
73
|
};
|
|
80
74
|
var paymentTypeDirectDebit = {
|
|
81
75
|
id: 'directdebit',
|
|
@@ -98,7 +92,7 @@ function PaymentType(_ref) {
|
|
|
98
92
|
hide: !enableZuoraPaymentLink
|
|
99
93
|
};
|
|
100
94
|
var createPaymentTypes = function createPaymentTypes() {
|
|
101
|
-
var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal
|
|
95
|
+
var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal, paymentTypeDirectDebit, paymentTypeApplePay, paymentTypeBankTransfer, zuoraPaymentLink].filter(Boolean);
|
|
102
96
|
return paymentTypes.map(function (type) {
|
|
103
97
|
if (type.id === undefined) {
|
|
104
98
|
return type;
|
|
@@ -193,7 +187,7 @@ function PaymentType(_ref) {
|
|
|
193
187
|
className: "o-forms-input o-forms-input--radio-box ncf__payment-type-selector"
|
|
194
188
|
}, createPaymentTypes()), /*#__PURE__*/_react["default"].createElement("div", {
|
|
195
189
|
className: "o-forms-input__error"
|
|
196
|
-
}, "Please enter a valid payment type"),
|
|
190
|
+
}, "Please enter a valid payment type"), !enablePaypal && PaypalCustomerCareMessage(), createDirectDebitPanel(), createZuoraPanel()), /*#__PURE__*/_react["default"].createElement("div", {
|
|
197
191
|
className: "o-forms-field"
|
|
198
192
|
}, isSingleTerm && /*#__PURE__*/_react["default"].createElement("label", {
|
|
199
193
|
className: "o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox",
|
|
@@ -209,7 +203,6 @@ PaymentType.propTypes = {
|
|
|
209
203
|
enablePaypal: _propTypes["default"].bool,
|
|
210
204
|
enableBankTransfer: _propTypes["default"].bool,
|
|
211
205
|
showLoaderOnInit: _propTypes["default"].bool,
|
|
212
|
-
showPaypalCustomerCareMessage: _propTypes["default"].bool,
|
|
213
206
|
fieldId: _propTypes["default"].string,
|
|
214
207
|
inputId: _propTypes["default"].string,
|
|
215
208
|
value: _propTypes["default"].string,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-conversion-forms",
|
|
3
|
-
"version": "44.
|
|
3
|
+
"version": "44.3.1",
|
|
4
4
|
"description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"scripts": {
|
package/styles/payment-type.scss
CHANGED
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
font-size: var(--o3-type-detail-font-size);
|
|
82
82
|
font-weight: var(--o3-type-detail-font-weight);
|
|
83
83
|
line-height: var(--o3-type-detail-line-height);
|
|
84
|
-
text-align:
|
|
84
|
+
text-align: left;
|
|
85
85
|
|
|
86
86
|
&-list {
|
|
87
87
|
text-align: left;
|
|
@@ -129,4 +129,4 @@
|
|
|
129
129
|
|
|
130
130
|
.o-forms-input.o-forms-input--checkbox.o-forms-input--suffix.ncf__payment-type-pay-faster-next-time-checkbox {
|
|
131
131
|
margin-top: var(--o3-spacing-3xs);
|
|
132
|
-
}
|
|
132
|
+
}
|