@financial-times/n-conversion-forms 27.7.0 → 27.7.2

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.
@@ -67,6 +67,21 @@ exports[`PaymentType can initialise with the loader visible 1`] = `
67
67
  </span>
68
68
  </label>
69
69
  </div>
70
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
71
+ <label for="banktransfer">
72
+ <input type="radio"
73
+ name="paymentType"
74
+ value="banktransfer"
75
+ id="banktransfer"
76
+ aria-label="Bank Transfer"
77
+ >
78
+ <span class="o-forms-input__label"
79
+ aria-hidden="true"
80
+ >
81
+ Bank Transfer
82
+ </span>
83
+ </label>
84
+ </div>
70
85
  </div>
71
86
  <div class="o-forms-input__error">
72
87
  Please enter a valid payment type
@@ -143,6 +158,21 @@ exports[`PaymentType render with default props 1`] = `
143
158
  </span>
144
159
  </label>
145
160
  </div>
161
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
162
+ <label for="banktransfer">
163
+ <input type="radio"
164
+ name="paymentType"
165
+ value="banktransfer"
166
+ id="banktransfer"
167
+ aria-label="Bank Transfer"
168
+ >
169
+ <span class="o-forms-input__label"
170
+ aria-hidden="true"
171
+ >
172
+ Bank Transfer
173
+ </span>
174
+ </label>
175
+ </div>
146
176
  </div>
147
177
  <div class="o-forms-input__error">
148
178
  Please enter a valid payment type
@@ -219,6 +249,112 @@ exports[`PaymentType render with enableApplepay 1`] = `
219
249
  </span>
220
250
  </label>
221
251
  </div>
252
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
253
+ <label for="banktransfer">
254
+ <input type="radio"
255
+ name="paymentType"
256
+ value="banktransfer"
257
+ id="banktransfer"
258
+ aria-label="Bank Transfer"
259
+ >
260
+ <span class="o-forms-input__label"
261
+ aria-hidden="true"
262
+ >
263
+ Bank Transfer
264
+ </span>
265
+ </label>
266
+ </div>
267
+ </div>
268
+ <div class="o-forms-input__error">
269
+ Please enter a valid payment type
270
+ </div>
271
+ </div>
272
+ <div class="o-forms-field">
273
+ </div>
274
+ `;
275
+
276
+ exports[`PaymentType render with enableBankTransfer 1`] = `
277
+ <div class="ncf__security-seal">
278
+ </div>
279
+ <div id="paymentTypeField"
280
+ class="o-forms-field"
281
+ >
282
+ <div class="o-forms-input o-forms-input--radio-box ncf__payment-type-selector">
283
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--creditcard ncf__hidden">
284
+ <label for="creditcard">
285
+ <input type="radio"
286
+ name="paymentType"
287
+ value="creditcard"
288
+ id="creditcard"
289
+ aria-label="Credit / Debit Card"
290
+ >
291
+ <span class="o-forms-input__label"
292
+ aria-hidden="true"
293
+ >
294
+ Credit / Debit Card
295
+ </span>
296
+ </label>
297
+ </div>
298
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--paypal ncf__hidden">
299
+ <label for="paypal">
300
+ <input type="radio"
301
+ name="paymentType"
302
+ value="paypal"
303
+ id="paypal"
304
+ aria-label="PayPal"
305
+ >
306
+ <span class="o-forms-input__label"
307
+ aria-hidden="true"
308
+ >
309
+ PayPal
310
+ </span>
311
+ </label>
312
+ </div>
313
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--directdebit ncf__hidden">
314
+ <label for="directdebit">
315
+ <input type="radio"
316
+ name="paymentType"
317
+ value="directdebit"
318
+ id="directdebit"
319
+ aria-label="Direct Debit"
320
+ >
321
+ <span class="o-forms-input__label"
322
+ aria-hidden="true"
323
+ >
324
+ Direct Debit
325
+ </span>
326
+ </label>
327
+ </div>
328
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--applepay ncf__hidden">
329
+ <label for="applepay">
330
+ <input type="radio"
331
+ name="paymentType"
332
+ value="applepay"
333
+ id="applepay"
334
+ aria-label="Apple Pay"
335
+ >
336
+ <span class="o-forms-input__label"
337
+ aria-hidden="true"
338
+ >
339
+ Apple Pay
340
+ </span>
341
+ </label>
342
+ </div>
343
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer">
344
+ <label for="banktransfer">
345
+ <input type="radio"
346
+ name="paymentType"
347
+ value="banktransfer"
348
+ id="banktransfer"
349
+ aria-label="Bank Transfer"
350
+ >
351
+ <span class="o-forms-input__label"
352
+ aria-hidden="true"
353
+ >
354
+ Bank Transfer
355
+ </span>
356
+ </label>
357
+ </div>
222
358
  </div>
223
359
  <div class="o-forms-input__error">
224
360
  Please enter a valid payment type
@@ -295,6 +431,21 @@ exports[`PaymentType render with enableCreditcard 1`] = `
295
431
  </span>
296
432
  </label>
297
433
  </div>
434
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
435
+ <label for="banktransfer">
436
+ <input type="radio"
437
+ name="paymentType"
438
+ value="banktransfer"
439
+ id="banktransfer"
440
+ aria-label="Bank Transfer"
441
+ >
442
+ <span class="o-forms-input__label"
443
+ aria-hidden="true"
444
+ >
445
+ Bank Transfer
446
+ </span>
447
+ </label>
448
+ </div>
298
449
  </div>
299
450
  <div class="o-forms-input__error">
300
451
  Please enter a valid payment type
@@ -391,6 +542,21 @@ exports[`PaymentType render with enableDirectdebit 1`] = `
391
542
  </span>
392
543
  </label>
393
544
  </div>
545
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
546
+ <label for="banktransfer">
547
+ <input type="radio"
548
+ name="paymentType"
549
+ value="banktransfer"
550
+ id="banktransfer"
551
+ aria-label="Bank Transfer"
552
+ >
553
+ <span class="o-forms-input__label"
554
+ aria-hidden="true"
555
+ >
556
+ Bank Transfer
557
+ </span>
558
+ </label>
559
+ </div>
394
560
  </div>
395
561
  <div class="o-forms-input__error">
396
562
  Please enter a valid payment type
@@ -526,6 +692,21 @@ exports[`PaymentType render with enablePaypal 1`] = `
526
692
  </span>
527
693
  </label>
528
694
  </div>
695
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
696
+ <label for="banktransfer">
697
+ <input type="radio"
698
+ name="paymentType"
699
+ value="banktransfer"
700
+ id="banktransfer"
701
+ aria-label="Bank Transfer"
702
+ >
703
+ <span class="o-forms-input__label"
704
+ aria-hidden="true"
705
+ >
706
+ Bank Transfer
707
+ </span>
708
+ </label>
709
+ </div>
529
710
  </div>
530
711
  <div class="o-forms-input__error">
531
712
  Please enter a valid payment type
@@ -602,6 +783,21 @@ exports[`PaymentType render with isSingleTerm 1`] = `
602
783
  </span>
603
784
  </label>
604
785
  </div>
786
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
787
+ <label for="banktransfer">
788
+ <input type="radio"
789
+ name="paymentType"
790
+ value="banktransfer"
791
+ id="banktransfer"
792
+ aria-label="Bank Transfer"
793
+ >
794
+ <span class="o-forms-input__label"
795
+ aria-hidden="true"
796
+ >
797
+ Bank Transfer
798
+ </span>
799
+ </label>
800
+ </div>
605
801
  </div>
606
802
  <div class="o-forms-input__error">
607
803
  Please enter a valid payment type
@@ -691,6 +887,21 @@ exports[`PaymentType render with isSingleTermChecked 1`] = `
691
887
  </span>
692
888
  </label>
693
889
  </div>
890
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
891
+ <label for="banktransfer">
892
+ <input type="radio"
893
+ name="paymentType"
894
+ value="banktransfer"
895
+ id="banktransfer"
896
+ aria-label="Bank Transfer"
897
+ >
898
+ <span class="o-forms-input__label"
899
+ aria-hidden="true"
900
+ >
901
+ Bank Transfer
902
+ </span>
903
+ </label>
904
+ </div>
694
905
  </div>
695
906
  <div class="o-forms-input__error">
696
907
  Please enter a valid payment type
@@ -781,6 +992,21 @@ exports[`PaymentType render with value 1`] = `
781
992
  </span>
782
993
  </label>
783
994
  </div>
995
+ <div class="o-forms-input--radio-box__container ncf__payment-type ncf__payment-type--banktransfer ncf__hidden">
996
+ <label for="banktransfer">
997
+ <input type="radio"
998
+ name="paymentType"
999
+ value="banktransfer"
1000
+ id="banktransfer"
1001
+ aria-label="Bank Transfer"
1002
+ >
1003
+ <span class="o-forms-input__label"
1004
+ aria-hidden="true"
1005
+ >
1006
+ Bank Transfer
1007
+ </span>
1008
+ </label>
1009
+ </div>
784
1010
  </div>
785
1011
  <div class="o-forms-input__error">
786
1012
  Please enter a valid payment type
@@ -22,6 +22,7 @@ export function AcceptTerms ({
22
22
  isPrintProduct = false,
23
23
  specialTerms = null,
24
24
  isSingleTerm = false,
25
+ isDeferredBilling = false,
25
26
  hideConfirmTermsAndConditions = false,
26
27
  }) {
27
28
  const divProps = {
@@ -331,6 +332,15 @@ export function AcceptTerms ({
331
332
  </>
332
333
  );
333
334
 
335
+ const deferredBillingTerms = isDeferredBilling && (
336
+ <li>
337
+ <span className="terms-deferred">
338
+ Please note if you fail to make payment for your deferred billing plan within due
339
+ date your subscription will be automatically cancelled.
340
+ </span>
341
+ </li>
342
+ );
343
+
334
344
  const b2cPartnershipTerms = (
335
345
  <label className={[labelClassName, 'checkbox-two-lines'].join(' ')}>
336
346
  <input {...inputProps} />
@@ -369,6 +379,7 @@ export function AcceptTerms ({
369
379
  {corpSignupTerms}
370
380
  {transitionTerms}
371
381
  {signupTerms}
382
+ {deferredBillingTerms}
372
383
  </ul>
373
384
  <label className={labelClassName} htmlFor="termsAcceptance">
374
385
  <input {...inputProps} />
@@ -401,5 +412,6 @@ AcceptTerms.propTypes = {
401
412
  isPrintProduct: PropTypes.bool,
402
413
  specialTerms: PropTypes.string,
403
414
  isSingleTerm: PropTypes.bool,
415
+ isDeferredBilling: PropTypes.bool,
404
416
  hideConfirmTermsAndConditions: PropTypes.bool,
405
417
  };
@@ -27,6 +27,7 @@ export default {
27
27
  isSingleTerm: { control: 'boolean' },
28
28
  isNewDigitalBuyFlowConsent: { control: 'boolean' },
29
29
  hideConfirmTermsAndConditions: { control: 'boolean' },
30
+ isDeferredBilling: { control: 'boolean' },
30
31
  },
31
32
  };
32
33
 
@@ -34,6 +34,7 @@ export function PaymentType ({
34
34
  enableCreditcard = false,
35
35
  enableDirectdebit = false,
36
36
  enablePaypal = false,
37
+ enableBankTransfer = false,
37
38
  showLoaderOnInit = false,
38
39
  showPaypalCustomerCareMessage = false,
39
40
  fieldId = 'paymentTypeField',
@@ -90,12 +91,19 @@ export function PaymentType ({
90
91
  hide: !enableApplepay,
91
92
  };
92
93
 
94
+ const paymentTypeBankTransfer = {
95
+ id: 'banktransfer',
96
+ label: 'Bank Transfer',
97
+ hide: !enableBankTransfer,
98
+ };
99
+
93
100
  const createPaymentTypes = () => {
94
101
  const paymentTypes = [
95
102
  paymentTypeCreditCard,
96
103
  paymentTypePaypal(),
97
104
  paymentTypeDirectDebit,
98
105
  paymentTypeApplePay,
106
+ paymentTypeBankTransfer
99
107
  ];
100
108
  return paymentTypes.map((type) => {
101
109
  if (type.id === undefined) {
@@ -273,6 +281,7 @@ PaymentType.propTypes = {
273
281
  enableCreditcard: PropTypes.bool,
274
282
  enableDirectdebit: PropTypes.bool,
275
283
  enablePaypal: PropTypes.bool,
284
+ enableBankTransfer: PropTypes.bool,
276
285
  showLoaderOnInit: PropTypes.bool,
277
286
  showPaypalCustomerCareMessage: PropTypes.bool,
278
287
  fieldId: PropTypes.string,
@@ -74,4 +74,12 @@ describe('PaymentType', () => {
74
74
 
75
75
  expect(PaymentType).toRenderCorrectly(props);
76
76
  });
77
+
78
+ it('render with enableBankTransfer', () => {
79
+ const props = {
80
+ enableBankTransfer: true,
81
+ };
82
+
83
+ expect(PaymentType).toRenderCorrectly(props);
84
+ });
77
85
  });
@@ -14,4 +14,5 @@ Basic.args = {
14
14
  enableCreditcard: true,
15
15
  enablePaypal: true,
16
16
  showPaypalCustomerCareMessage: true,
17
+ enableBankTransfer: true,
17
18
  };
@@ -47,6 +47,8 @@ function AcceptTerms(_ref) {
47
47
  specialTerms = _ref$specialTerms === void 0 ? null : _ref$specialTerms,
48
48
  _ref$isSingleTerm = _ref.isSingleTerm,
49
49
  isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
50
+ _ref$isDeferredBillin = _ref.isDeferredBilling,
51
+ isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin,
50
52
  _ref$hideConfirmTerms = _ref.hideConfirmTermsAndConditions,
51
53
  hideConfirmTermsAndConditions = _ref$hideConfirmTerms === void 0 ? false : _ref$hideConfirmTerms;
52
54
  var divProps = _objectSpread(_objectSpread({
@@ -184,6 +186,9 @@ function AcceptTerms(_ref) {
184
186
  }, "Terms & Conditions"), "."))), specialTerms && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
185
187
  className: "terms-special"
186
188
  }, specialTerms)));
189
+ var deferredBillingTerms = isDeferredBilling && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
190
+ className: "terms-deferred"
191
+ }, "Please note if you fail to make payment for your deferred billing plan within due date your subscription will be automatically cancelled."));
187
192
  var b2cPartnershipTerms = /*#__PURE__*/_react["default"].createElement("label", {
188
193
  className: [labelClassName, 'checkbox-two-lines'].join(' ')
189
194
  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
@@ -199,7 +204,7 @@ function AcceptTerms(_ref) {
199
204
  }, "Please accept our terms & conditions"));
200
205
  return /*#__PURE__*/_react["default"].createElement("div", divProps, isB2cPartnership ? b2cPartnershipTerms : isRegister ? registerTerms : isAuthFirstAccount ? authFirstStepTerms : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("ul", {
201
206
  className: "o-typography-list ncf__accept-terms-list"
202
- }, !isAuthFirstPayment && b2bTerms, corpSignupTerms, transitionTerms, signupTerms), /*#__PURE__*/_react["default"].createElement("label", {
207
+ }, !isAuthFirstPayment && b2bTerms, corpSignupTerms, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
203
208
  className: labelClassName,
204
209
  htmlFor: "termsAcceptance"
205
210
  }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
@@ -224,5 +229,6 @@ AcceptTerms.propTypes = {
224
229
  isPrintProduct: _propTypes["default"].bool,
225
230
  specialTerms: _propTypes["default"].string,
226
231
  isSingleTerm: _propTypes["default"].bool,
232
+ isDeferredBilling: _propTypes["default"].bool,
227
233
  hideConfirmTermsAndConditions: _propTypes["default"].bool
228
234
  };
@@ -38,6 +38,8 @@ function PaymentType(_ref) {
38
38
  enableDirectdebit = _ref$enableDirectdebi === void 0 ? false : _ref$enableDirectdebi,
39
39
  _ref$enablePaypal = _ref.enablePaypal,
40
40
  enablePaypal = _ref$enablePaypal === void 0 ? false : _ref$enablePaypal,
41
+ _ref$enableBankTransf = _ref.enableBankTransfer,
42
+ enableBankTransfer = _ref$enableBankTransf === void 0 ? false : _ref$enableBankTransf,
41
43
  _ref$showLoaderOnInit = _ref.showLoaderOnInit,
42
44
  showLoaderOnInit = _ref$showLoaderOnInit === void 0 ? false : _ref$showLoaderOnInit,
43
45
  _ref$showPaypalCustom = _ref.showPaypalCustomerCareMessage,
@@ -85,8 +87,13 @@ function PaymentType(_ref) {
85
87
  label: 'Apple Pay',
86
88
  hide: !enableApplepay
87
89
  };
90
+ var paymentTypeBankTransfer = {
91
+ id: 'banktransfer',
92
+ label: 'Bank Transfer',
93
+ hide: !enableBankTransfer
94
+ };
88
95
  var createPaymentTypes = function createPaymentTypes() {
89
- var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal(), paymentTypeDirectDebit, paymentTypeApplePay];
96
+ var paymentTypes = [paymentTypeCreditCard, paymentTypePaypal(), paymentTypeDirectDebit, paymentTypeApplePay, paymentTypeBankTransfer];
90
97
  return paymentTypes.map(function (type) {
91
98
  if (type.id === undefined) {
92
99
  return type;
@@ -195,6 +202,7 @@ PaymentType.propTypes = {
195
202
  enableCreditcard: _propTypes["default"].bool,
196
203
  enableDirectdebit: _propTypes["default"].bool,
197
204
  enablePaypal: _propTypes["default"].bool,
205
+ enableBankTransfer: _propTypes["default"].bool,
198
206
  showLoaderOnInit: _propTypes["default"].bool,
199
207
  showPaypalCustomerCareMessage: _propTypes["default"].bool,
200
208
  fieldId: _propTypes["default"].string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/n-conversion-forms",
3
- "version": "27.7.0",
3
+ "version": "27.7.2",
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": {
@@ -4,20 +4,4 @@
4
4
  margin-top: 0;
5
5
  }
6
6
  }
7
-
8
- // Change the colour of messages inside the wrapper
9
- // to look better with a white background
10
- .ncf__wrapper & &__message {
11
- .o-message--error {
12
- color: oColorsByName('crimson');
13
- background-color: oColorsMix('crimson', 'white', 10);
14
-
15
- .o-message__actions__primary {
16
- background-color: oColorsMix('crimson', 'white', 10);
17
- &:hover {
18
- background-color: oColorsMix('crimson', 'white', 20);
19
- }
20
- }
21
- }
22
- }
23
7
  }
@@ -143,6 +143,10 @@ class PaymentType {
143
143
  static get APPLEPAY () {
144
144
  return 'applepay';
145
145
  }
146
+
147
+ static get BANKTRANSFER () {
148
+ return 'banktransfer';
149
+ }
146
150
  }
147
151
 
148
152
  module.exports = PaymentType;