@financial-times/n-conversion-forms 20.2.1 → 20.3.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.
|
@@ -523,6 +523,179 @@ exports[`PaymentType render with enablePaypal 1`] = `
|
|
|
523
523
|
</div>
|
|
524
524
|
`;
|
|
525
525
|
|
|
526
|
+
exports[`PaymentType render with isSingleTerm 1`] = `
|
|
527
|
+
<div class="ncf__security-seal">
|
|
528
|
+
</div>
|
|
529
|
+
<div id="paymentTypeField"
|
|
530
|
+
class="o-forms-field"
|
|
531
|
+
>
|
|
532
|
+
<div class="o-forms-input o-forms-input--radio-box ncf__payment-type-selector">
|
|
533
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--creditcard ncf__hidden">
|
|
534
|
+
<label for="creditcard">
|
|
535
|
+
<input type="radio"
|
|
536
|
+
name="paymentType"
|
|
537
|
+
value="creditcard"
|
|
538
|
+
id="creditcard"
|
|
539
|
+
aria-label="Credit / Debit Card"
|
|
540
|
+
>
|
|
541
|
+
<span class="o-forms-input__label"
|
|
542
|
+
aria-hidden="true"
|
|
543
|
+
>
|
|
544
|
+
Credit / Debit Card
|
|
545
|
+
</span>
|
|
546
|
+
</label>
|
|
547
|
+
</div>
|
|
548
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--paypal ncf__hidden">
|
|
549
|
+
<label for="paypal">
|
|
550
|
+
<input type="radio"
|
|
551
|
+
name="paymentType"
|
|
552
|
+
value="paypal"
|
|
553
|
+
id="paypal"
|
|
554
|
+
aria-label="PayPal"
|
|
555
|
+
>
|
|
556
|
+
<span class="o-forms-input__label"
|
|
557
|
+
aria-hidden="true"
|
|
558
|
+
>
|
|
559
|
+
PayPal
|
|
560
|
+
</span>
|
|
561
|
+
</label>
|
|
562
|
+
</div>
|
|
563
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--directdebit ncf__hidden">
|
|
564
|
+
<label for="directdebit">
|
|
565
|
+
<input type="radio"
|
|
566
|
+
name="paymentType"
|
|
567
|
+
value="directdebit"
|
|
568
|
+
id="directdebit"
|
|
569
|
+
aria-label="Direct Debit"
|
|
570
|
+
>
|
|
571
|
+
<span class="o-forms-input__label"
|
|
572
|
+
aria-hidden="true"
|
|
573
|
+
>
|
|
574
|
+
Direct Debit
|
|
575
|
+
</span>
|
|
576
|
+
</label>
|
|
577
|
+
</div>
|
|
578
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--applepay ncf__hidden">
|
|
579
|
+
<label for="applepay">
|
|
580
|
+
<input type="radio"
|
|
581
|
+
name="paymentType"
|
|
582
|
+
value="applepay"
|
|
583
|
+
id="applepay"
|
|
584
|
+
aria-label="Apple Pay"
|
|
585
|
+
>
|
|
586
|
+
<span class="o-forms-input__label"
|
|
587
|
+
aria-hidden="true"
|
|
588
|
+
>
|
|
589
|
+
Apple Pay
|
|
590
|
+
</span>
|
|
591
|
+
</label>
|
|
592
|
+
</div>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="o-forms-input__error">
|
|
595
|
+
Please enter a valid payment type
|
|
596
|
+
</div>
|
|
597
|
+
<label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
|
|
598
|
+
for="payFasterNextTime"
|
|
599
|
+
>
|
|
600
|
+
<input type="checkbox"
|
|
601
|
+
id="payFasterNextTime"
|
|
602
|
+
name="payFasterNextTime"
|
|
603
|
+
value="true"
|
|
604
|
+
>
|
|
605
|
+
<span class="o-forms-input__label">
|
|
606
|
+
Use these details to pay faster next time
|
|
607
|
+
</span>
|
|
608
|
+
</label>
|
|
609
|
+
</div>
|
|
610
|
+
`;
|
|
611
|
+
|
|
612
|
+
exports[`PaymentType render with isSingleTermChecked 1`] = `
|
|
613
|
+
<div class="ncf__security-seal">
|
|
614
|
+
</div>
|
|
615
|
+
<div id="paymentTypeField"
|
|
616
|
+
class="o-forms-field"
|
|
617
|
+
>
|
|
618
|
+
<div class="o-forms-input o-forms-input--radio-box ncf__payment-type-selector">
|
|
619
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--creditcard ncf__hidden">
|
|
620
|
+
<label for="creditcard">
|
|
621
|
+
<input type="radio"
|
|
622
|
+
name="paymentType"
|
|
623
|
+
value="creditcard"
|
|
624
|
+
id="creditcard"
|
|
625
|
+
aria-label="Credit / Debit Card"
|
|
626
|
+
>
|
|
627
|
+
<span class="o-forms-input__label"
|
|
628
|
+
aria-hidden="true"
|
|
629
|
+
>
|
|
630
|
+
Credit / Debit Card
|
|
631
|
+
</span>
|
|
632
|
+
</label>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--paypal ncf__hidden">
|
|
635
|
+
<label for="paypal">
|
|
636
|
+
<input type="radio"
|
|
637
|
+
name="paymentType"
|
|
638
|
+
value="paypal"
|
|
639
|
+
id="paypal"
|
|
640
|
+
aria-label="PayPal"
|
|
641
|
+
>
|
|
642
|
+
<span class="o-forms-input__label"
|
|
643
|
+
aria-hidden="true"
|
|
644
|
+
>
|
|
645
|
+
PayPal
|
|
646
|
+
</span>
|
|
647
|
+
</label>
|
|
648
|
+
</div>
|
|
649
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--directdebit ncf__hidden">
|
|
650
|
+
<label for="directdebit">
|
|
651
|
+
<input type="radio"
|
|
652
|
+
name="paymentType"
|
|
653
|
+
value="directdebit"
|
|
654
|
+
id="directdebit"
|
|
655
|
+
aria-label="Direct Debit"
|
|
656
|
+
>
|
|
657
|
+
<span class="o-forms-input__label"
|
|
658
|
+
aria-hidden="true"
|
|
659
|
+
>
|
|
660
|
+
Direct Debit
|
|
661
|
+
</span>
|
|
662
|
+
</label>
|
|
663
|
+
</div>
|
|
664
|
+
<div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--applepay ncf__hidden">
|
|
665
|
+
<label for="applepay">
|
|
666
|
+
<input type="radio"
|
|
667
|
+
name="paymentType"
|
|
668
|
+
value="applepay"
|
|
669
|
+
id="applepay"
|
|
670
|
+
aria-label="Apple Pay"
|
|
671
|
+
>
|
|
672
|
+
<span class="o-forms-input__label"
|
|
673
|
+
aria-hidden="true"
|
|
674
|
+
>
|
|
675
|
+
Apple Pay
|
|
676
|
+
</span>
|
|
677
|
+
</label>
|
|
678
|
+
</div>
|
|
679
|
+
</div>
|
|
680
|
+
<div class="o-forms-input__error">
|
|
681
|
+
Please enter a valid payment type
|
|
682
|
+
</div>
|
|
683
|
+
<label class="o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox"
|
|
684
|
+
for="payFasterNextTime"
|
|
685
|
+
>
|
|
686
|
+
<input type="checkbox"
|
|
687
|
+
id="payFasterNextTime"
|
|
688
|
+
name="payFasterNextTime"
|
|
689
|
+
value="true"
|
|
690
|
+
checked
|
|
691
|
+
>
|
|
692
|
+
<span class="o-forms-input__label">
|
|
693
|
+
Use these details to pay faster next time
|
|
694
|
+
</span>
|
|
695
|
+
</label>
|
|
696
|
+
</div>
|
|
697
|
+
`;
|
|
698
|
+
|
|
526
699
|
exports[`PaymentType render with value 1`] = `
|
|
527
700
|
<div class="ncf__security-seal">
|
|
528
701
|
</div>
|
|
@@ -39,6 +39,8 @@ export function PaymentType({
|
|
|
39
39
|
fieldId = 'paymentTypeField',
|
|
40
40
|
inputId = 'paymentType',
|
|
41
41
|
value,
|
|
42
|
+
isSingleTerm = false,
|
|
43
|
+
isSingleTermChecked = false,
|
|
42
44
|
}) {
|
|
43
45
|
const createSecuritySeal = () => {
|
|
44
46
|
return (
|
|
@@ -220,6 +222,15 @@ export function PaymentType({
|
|
|
220
222
|
);
|
|
221
223
|
};
|
|
222
224
|
|
|
225
|
+
const inputCheckProps = {
|
|
226
|
+
id: 'payFasterNextTime',
|
|
227
|
+
type: 'checkbox',
|
|
228
|
+
name: 'payFasterNextTime',
|
|
229
|
+
value: 'true',
|
|
230
|
+
required: false,
|
|
231
|
+
...(isSingleTermChecked && { defaultChecked: true }),
|
|
232
|
+
};
|
|
233
|
+
|
|
223
234
|
return (
|
|
224
235
|
<React.Fragment>
|
|
225
236
|
{createSecuritySeal()}
|
|
@@ -236,6 +247,17 @@ export function PaymentType({
|
|
|
236
247
|
{createDirectDebitPanel()}
|
|
237
248
|
|
|
238
249
|
{createZuoraPanel()}
|
|
250
|
+
|
|
251
|
+
{isSingleTerm && (
|
|
252
|
+
<>
|
|
253
|
+
<label className='o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox' htmlFor="payFasterNextTime">
|
|
254
|
+
<input {...inputCheckProps}/>
|
|
255
|
+
<span className="o-forms-input__label">
|
|
256
|
+
Use these details to pay faster next time
|
|
257
|
+
</span>
|
|
258
|
+
</label>
|
|
259
|
+
</>
|
|
260
|
+
)}
|
|
239
261
|
</div>
|
|
240
262
|
</React.Fragment>
|
|
241
263
|
);
|
|
@@ -251,4 +273,6 @@ PaymentType.propTypes = {
|
|
|
251
273
|
fieldId: PropTypes.string,
|
|
252
274
|
inputId: PropTypes.string,
|
|
253
275
|
value: PropTypes.string,
|
|
276
|
+
isSingleTerm: PropTypes.bool,
|
|
277
|
+
isSingleTermChecked: PropTypes.bool,
|
|
254
278
|
};
|
|
@@ -57,4 +57,21 @@ describe('PaymentType', () => {
|
|
|
57
57
|
|
|
58
58
|
expect(PaymentType).toRenderCorrectly({}, props);
|
|
59
59
|
});
|
|
60
|
+
|
|
61
|
+
it('render with isSingleTerm', () => {
|
|
62
|
+
const props = {
|
|
63
|
+
isSingleTerm: true,
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
expect(PaymentType).toRenderCorrectly(props);
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
it('render with isSingleTermChecked', () => {
|
|
70
|
+
const props = {
|
|
71
|
+
isSingleTerm: true,
|
|
72
|
+
isSingleTermChecked: true,
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
expect(PaymentType).toRenderCorrectly(props);
|
|
76
|
+
});
|
|
60
77
|
});
|
package/dist/payment-type.js
CHANGED
|
@@ -56,7 +56,11 @@ function PaymentType(_ref) {
|
|
|
56
56
|
fieldId = _ref$fieldId === void 0 ? 'paymentTypeField' : _ref$fieldId,
|
|
57
57
|
_ref$inputId = _ref.inputId,
|
|
58
58
|
inputId = _ref$inputId === void 0 ? 'paymentType' : _ref$inputId,
|
|
59
|
-
value = _ref.value
|
|
59
|
+
value = _ref.value,
|
|
60
|
+
_ref$isSingleTerm = _ref.isSingleTerm,
|
|
61
|
+
isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
|
|
62
|
+
_ref$isSingleTermChec = _ref.isSingleTermChecked,
|
|
63
|
+
isSingleTermChecked = _ref$isSingleTermChec === void 0 ? false : _ref$isSingleTermChec;
|
|
60
64
|
|
|
61
65
|
var createSecuritySeal = function createSecuritySeal() {
|
|
62
66
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -180,6 +184,16 @@ function PaymentType(_ref) {
|
|
|
180
184
|
});
|
|
181
185
|
};
|
|
182
186
|
|
|
187
|
+
var inputCheckProps = _objectSpread({
|
|
188
|
+
id: 'payFasterNextTime',
|
|
189
|
+
type: 'checkbox',
|
|
190
|
+
name: 'payFasterNextTime',
|
|
191
|
+
value: 'true',
|
|
192
|
+
required: false
|
|
193
|
+
}, isSingleTermChecked && {
|
|
194
|
+
defaultChecked: true
|
|
195
|
+
});
|
|
196
|
+
|
|
183
197
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, createSecuritySeal(), /*#__PURE__*/_react["default"].createElement("div", {
|
|
184
198
|
id: fieldId,
|
|
185
199
|
className: "o-forms-field"
|
|
@@ -187,7 +201,12 @@ function PaymentType(_ref) {
|
|
|
187
201
|
className: "o-forms-input o-forms-input--radio-box ncf__payment-type-selector"
|
|
188
202
|
}, createPaymentTypes()), /*#__PURE__*/_react["default"].createElement("div", {
|
|
189
203
|
className: "o-forms-input__error"
|
|
190
|
-
}, "Please enter a valid payment type"), createDirectDebitPanel(), createZuoraPanel()
|
|
204
|
+
}, "Please enter a valid payment type"), createDirectDebitPanel(), createZuoraPanel(), isSingleTerm && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
|
|
205
|
+
className: "o-forms-input o-forms-input--checkbox o-forms-input--suffix ncf__payment-type-pay-faster-next-time-checkbox",
|
|
206
|
+
htmlFor: "payFasterNextTime"
|
|
207
|
+
}, /*#__PURE__*/_react["default"].createElement("input", inputCheckProps), /*#__PURE__*/_react["default"].createElement("span", {
|
|
208
|
+
className: "o-forms-input__label"
|
|
209
|
+
}, "Use these details to pay faster next time")))));
|
|
191
210
|
}
|
|
192
211
|
|
|
193
212
|
PaymentType.propTypes = {
|
|
@@ -199,5 +218,7 @@ PaymentType.propTypes = {
|
|
|
199
218
|
showPaypalCustomerCareMessage: _propTypes["default"].bool,
|
|
200
219
|
fieldId: _propTypes["default"].string,
|
|
201
220
|
inputId: _propTypes["default"].string,
|
|
202
|
-
value: _propTypes["default"].string
|
|
221
|
+
value: _propTypes["default"].string,
|
|
222
|
+
isSingleTerm: _propTypes["default"].bool,
|
|
223
|
+
isSingleTermChecked: _propTypes["default"].bool
|
|
203
224
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-conversion-forms",
|
|
3
|
-
"version": "20.
|
|
3
|
+
"version": "20.3.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": {
|
package/styles/payment-type.scss
CHANGED