@financial-times/n-conversion-forms 31.2.0 → 32.2.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/.eslintignore CHANGED
@@ -2,3 +2,5 @@
2
2
  /dist
3
3
  /.eslintrc.js
4
4
  /public
5
+ secret-squirrel.js
6
+ secret-squirrel.cjs
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "branch": "",
3
3
  "repo": "n-conversion-forms",
4
- "version": "2702f16331ac10763bc88432e6886438ace7d5ba",
5
- "tag": "v31.2.0"
4
+ "version": "2d783c38faacc8840e733178788dea18b4c1eac4",
5
+ "tag": "v32.2.0"
6
6
  }
@@ -70,7 +70,7 @@ exports[`DeliveryOption renders with a context of being single 1`] = `
70
70
  Paper vouchers
71
71
  </span>
72
72
  <div class="ncf__delivery-option__description">
73
- 13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.
73
+ 13-week voucher pack delivered quarterly and redeemable at retailers nationwide.
74
74
  </div>
75
75
  </span>
76
76
  </label>
@@ -85,7 +85,7 @@ exports[`DeliveryOption renders with a context of being single 1`] = `
85
85
  >
86
86
  <span class="o-forms-input__label ncf__delivery-option__label">
87
87
  <span class="ncf__delivery-option__title o-forms-title__main">
88
- Home delivery
88
+ Hand delivery
89
89
  </span>
90
90
  <div class="ncf__delivery-option__description">
91
91
  Free delivery to your home or office before 7am.
@@ -166,7 +166,7 @@ exports[`DeliveryOption renders with minimum mandatory props 1`] = `
166
166
  Paper vouchers
167
167
  </span>
168
168
  <div class="ncf__delivery-option__description">
169
- 13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.
169
+ 13-week voucher pack delivered quarterly and redeemable at retailers nationwide.
170
170
  </div>
171
171
  </span>
172
172
  </label>
@@ -181,7 +181,7 @@ exports[`DeliveryOption renders with minimum mandatory props 1`] = `
181
181
  >
182
182
  <span class="o-forms-input__label ncf__delivery-option__label">
183
183
  <span class="ncf__delivery-option__title o-forms-title__main">
184
- Home delivery
184
+ Hand delivery
185
185
  </span>
186
186
  <div class="ncf__delivery-option__description">
187
187
  Free delivery to your home or office before 7am.
@@ -232,7 +232,7 @@ exports[`DeliveryOption renders without unrecognised delivery options 1`] = `
232
232
  Paper vouchers
233
233
  </span>
234
234
  <div class="ncf__delivery-option__description">
235
- 13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.
235
+ 13-week voucher pack delivered quarterly and redeemable at retailers nationwide.
236
236
  </div>
237
237
  </span>
238
238
  </label>
@@ -247,7 +247,7 @@ exports[`DeliveryOption renders without unrecognised delivery options 1`] = `
247
247
  >
248
248
  <span class="o-forms-input__label ncf__delivery-option__label">
249
249
  <span class="ncf__delivery-option__title o-forms-title__main">
250
- Home delivery
250
+ Hand delivery
251
251
  </span>
252
252
  <div class="ncf__delivery-option__description">
253
253
  Free delivery to your home or office before 7am.
@@ -1,20 +1,5 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`PackageChange annual render when is7DayPassExperiment is true 1`] = `
4
- <div class="ncf__package-change">
5
- <div class="ncf__package-change__package">
6
- <div class="ncf__package-change__content">
7
- <p>
8
- You have chosen
9
- <span class="ncf__strong">
10
- Trial
11
- </span>
12
- </p>
13
- </div>
14
- </div>
15
- </div>
16
- `;
17
-
18
3
  exports[`PackageChange annual render with defaults 1`] = `
19
4
  <div class="ncf__package-change">
20
5
  <div class="ncf__package-change__package">
@@ -9,7 +9,6 @@ export function AcceptTermsSubscription({
9
9
  isTrial = false,
10
10
  isPrintProduct = false,
11
11
  isSingleTerm = false,
12
- is7DayPassExperiment = false,
13
12
  isTransition = false,
14
13
  transitionType = null,
15
14
  isDeferredBilling = false,
@@ -38,56 +37,6 @@ export function AcceptTermsSubscription({
38
37
  required: true,
39
38
  };
40
39
 
41
- if (is7DayPassExperiment) {
42
- return (
43
- <div {...divProps}>
44
- <ul className="o-typography-list ncf__accept-terms-list">
45
- <li>
46
- <span className="terms-transition terms-transition--immediate">
47
- I give consent for my chosen payment method to be charged
48
- automatically.
49
- </span>
50
- </li>
51
- <li>
52
- <span className="terms-transition terms-transition--immediate">
53
- By placing your order subject to the Terms & Conditions (save for
54
- section 2) referred to below, you agree that we may start your
55
- 7-day pass immediately upon our acceptance of your order and that
56
- you are waiving your statutory right to cancel our contract within
57
- 14 days of confirmation. Your payment is a one-time payment
58
- collected at the time of checkout, and cancelling at any point
59
- (whether before or after the 14-day period) will not entitle you
60
- to a refund.
61
- </span>
62
- </li>
63
- <li>
64
- <span className="terms-transition">
65
- Please see here for the complete{' '}
66
- <a
67
- className="ncf__link--external"
68
- href="http://help.ft.com/help/legal-privacy/terms-conditions/"
69
- target="_blank"
70
- rel="noopener noreferrer"
71
- >
72
- Terms &amp; Conditions
73
- </a>
74
- .
75
- </span>
76
- </li>
77
- </ul>
78
- <label className={labelClassName} htmlFor="termsAcceptance">
79
- <input {...inputProps} />
80
- <span className="o-forms-input__label">
81
- I agree to the above terms &amp; conditions.
82
- </span>
83
- <p className="o-forms-input__error">
84
- Please accept our terms &amp; conditions
85
- </p>
86
- </label>
87
- </div>
88
- );
89
- }
90
-
91
40
  const transitionTerms = isTransition && (
92
41
  <>
93
42
  {!isSingleTerm && (
@@ -260,7 +209,6 @@ AcceptTermsSubscription.propTypes = {
260
209
  isTrial: PropTypes.bool,
261
210
  isPrintProduct: PropTypes.bool,
262
211
  isSingleTerm: PropTypes.bool,
263
- is7DayPassExperiment: PropTypes.bool,
264
212
  isTransition: PropTypes.bool,
265
213
  transitionType: PropTypes.string,
266
214
  isDeferredBilling: PropTypes.bool,
@@ -24,28 +24,28 @@ PrintProductTrial.args = {
24
24
  isTrial: true,
25
25
  };
26
26
 
27
- export const isSingleTerm = (args) => <AcceptTermsSubscription {...args} />;
27
+ export const IsSingleTerm = (args) => <AcceptTermsSubscription {...args} />;
28
28
 
29
- isSingleTerm.args = {
29
+ IsSingleTerm.args = {
30
30
  isSingleTerm: true,
31
31
  };
32
32
 
33
- export const isTransition = (args) => <AcceptTermsSubscription {...args} />;
33
+ export const IsTransition = (args) => <AcceptTermsSubscription {...args} />;
34
34
 
35
- isTransition.args = {
35
+ IsTransition.args = {
36
36
  isTransition: true,
37
37
  };
38
38
 
39
- export const transitionType = (args) => <AcceptTermsSubscription {...args} />;
39
+ export const TransitionType = (args) => <AcceptTermsSubscription {...args} />;
40
40
 
41
- transitionType.args = {
41
+ TransitionType.args = {
42
42
  transitionType: true,
43
43
  };
44
44
 
45
- export const isDeferredBilling = (args) => (
45
+ export const IsDeferredBilling = (args) => (
46
46
  <AcceptTermsSubscription {...args} />
47
47
  );
48
48
 
49
- isDeferredBilling.args = {
49
+ IsDeferredBilling.args = {
50
50
  isDeferredBilling: true,
51
51
  };
@@ -49,7 +49,6 @@ export { Province } from './province';
49
49
  export { RegistrationConfirmation } from './registration-confirmation';
50
50
  export { Responsibility } from './responsibility';
51
51
  export { Section } from './section';
52
- export { SevenDayPassExperimentConfirmation } from './seven-day-pass-experiment-confirmation';
53
52
  export { State } from './state';
54
53
  export { Submit } from './submit';
55
54
  export { TrialBanner } from './trial-banner';
@@ -5,7 +5,6 @@ export function PackageChange({
5
5
  changePackageUrl,
6
6
  currentPackage,
7
7
  packageDescription,
8
- is7DayPassExperiment,
9
8
  }) {
10
9
  return (
11
10
  <div className="ncf__package-change">
@@ -21,17 +20,15 @@ export function PackageChange({
21
20
  </p>
22
21
  )}
23
22
  </div>
24
- {!is7DayPassExperiment && (
25
- <div className="ncf__package-change__actions">
26
- <a
27
- href={changePackageUrl}
28
- className="ncf__button ncf__button--mono ncf__button--baseline"
29
- data-trackable="change"
30
- >
31
- Change
32
- </a>
33
- </div>
34
- )}
23
+ <div className="ncf__package-change__actions">
24
+ <a
25
+ href={changePackageUrl}
26
+ className="ncf__button ncf__button--mono ncf__button--baseline"
27
+ data-trackable="change"
28
+ >
29
+ Change
30
+ </a>
31
+ </div>
35
32
  </div>
36
33
  </div>
37
34
  );
@@ -41,5 +38,4 @@ PackageChange.propTypes = {
41
38
  changePackageUrl: PropTypes.string.isRequired,
42
39
  currentPackage: PropTypes.string.isRequired,
43
40
  packageDescription: PropTypes.string,
44
- is7DayPassExperiment: PropTypes.bool,
45
41
  };
@@ -74,23 +74,6 @@ describe('PackageChange', () => {
74
74
 
75
75
  expect(PackageChange).toRenderCorrectly(props);
76
76
  });
77
-
78
- it('render when is7DayPassExperiment is true', () => {
79
- const props = {
80
- changePackageUrl: 'https://www.ft.com',
81
- currentPackage: 'Trial',
82
- is7DayPassExperiment: true,
83
- terms: [
84
- {
85
- name: term,
86
- price: '£1.00',
87
- weeklyPrice: '£1.00',
88
- },
89
- ],
90
- };
91
-
92
- expect(PackageChange).toRenderCorrectly(props);
93
- });
94
77
  });
95
78
  });
96
79
  });
@@ -18,11 +18,3 @@ WithPackageDescription.args = {
18
18
  changePackageUrl: 'https://ft.com/products',
19
19
  packageDescription: 'Personalised email briefings and alerts',
20
20
  };
21
-
22
- export const SevenDayPassExperiment = (args) => <PackageChange {...args} />;
23
- SevenDayPassExperiment.args = {
24
- currentPackage: 'Premium Digital',
25
- changePackageUrl: 'https://ft.com/products',
26
- packageDescription: 'Personalised email briefings and alerts',
27
- is7DayPassExperiment: true,
28
- };
@@ -15,7 +15,6 @@ export function PaymentTerm({
15
15
  largePrice = false,
16
16
  optionsInARow = false,
17
17
  billingCountry = '',
18
- is7DayPassExperiment = false,
19
18
  }) {
20
19
  /**
21
20
  * Compute monthly price for given term name
@@ -108,24 +107,11 @@ export function PaymentTerm({
108
107
  },
109
108
  monthly: {
110
109
  title: 'Monthly',
111
- price: (price, is7DayPassExperiment) => {
112
- const paymentIntervalTextToDisplay = (() => {
113
- switch (true) {
114
- case is7DayPassExperiment:
115
- return ' one-time payment';
116
-
117
- default:
118
- return ' per month';
119
- }
120
- })();
121
-
122
- return (
123
- <React.Fragment>
124
- <span className="ncf__payment-term__price">{price}</span>
125
- {paymentIntervalTextToDisplay}
126
- </React.Fragment>
127
- );
128
- },
110
+ price: (price) => (
111
+ <React.Fragment>
112
+ <span className="ncf__payment-term__price">{price}</span> per month
113
+ </React.Fragment>
114
+ ),
129
115
  trialPrice: (price) => (
130
116
  <React.Fragment>
131
117
  Unless you cancel during your trial you will be billed{' '}
@@ -134,19 +120,10 @@ export function PaymentTerm({
134
120
  </React.Fragment>
135
121
  ),
136
122
  monthlyPrice: () => {},
137
- renewsText: (isFixedTermOffer, is7DayPassExperiment) => {
138
- const textToDisplay = (() => {
139
- switch (true) {
140
- case is7DayPassExperiment:
141
- return 'This subscription is for 7 days, charged at the outset.';
142
-
143
- case isFixedTermOffer:
144
- return 'This subscription is for 3 months, charged monthly. You can cancel at anytime';
145
-
146
- default:
147
- return 'Renews monthly unless cancelled';
148
- }
149
- })();
123
+ renewsText: (isFixedTermOffer) => {
124
+ const textToDisplay = isFixedTermOffer
125
+ ? 'This subscription is for 3 months, charged monthly. You can cancel at anytime'
126
+ : 'Renews monthly unless cancelled';
150
127
 
151
128
  return (
152
129
  <p className="ncf__payment-term__renews-text">{textToDisplay}</p>
@@ -242,12 +219,9 @@ export function PaymentTerm({
242
219
  <React.Fragment>
243
220
  {nameMap[option.name] ? (
244
221
  <div className="ncf__payment-term__description">
245
- {nameMap[option.name].price(option.price, is7DayPassExperiment)}
222
+ {nameMap[option.name].price(option.price)}
246
223
  {nameMap[option.name].monthlyPrice(option.monthlyPrice)}
247
- {nameMap[option.name].renewsText(
248
- isFixedTermOffer,
249
- is7DayPassExperiment
250
- )}
224
+ {nameMap[option.name].renewsText(isFixedTermOffer)}
251
225
  {/* Remove this discount text temporarily in favour of monthly price */}
252
226
  {/* <br />Save up to 25% when you pay annually */}
253
227
  </div>
@@ -289,21 +263,11 @@ export function PaymentTerm({
289
263
  const showTrialCopyInTitle =
290
264
  option.isTrial && !isPrintOrBundle && !isEpaper;
291
265
 
292
- const defaultTitle = (() => {
293
- switch (true) {
294
- case is7DayPassExperiment:
295
- return '';
296
-
297
- case Boolean(option.name && nameMap[option.name]):
298
- return nameMap[option.name].title;
299
-
300
- default:
301
- return '';
302
- }
303
- })();
266
+ const defaultTitle =
267
+ option.name && nameMap[option.name] ? nameMap[option.name].title : '';
304
268
 
305
269
  const title = isFixedTermOffer
306
- ? [offerDisplayName, defaultTitle].filter(Boolean).join(' - ')
270
+ ? `${offerDisplayName} - ${defaultTitle}`
307
271
  : defaultTitle;
308
272
 
309
273
  let termDisplayName = '';
@@ -153,37 +153,6 @@ describe('PaymentTerm', () => {
153
153
  });
154
154
  });
155
155
 
156
- describe('given is7DayPassExperiment is true', () => {
157
- const options = [
158
- {
159
- name: 'monthly',
160
- price: '$5.00',
161
- value: 'monthly',
162
- monthlyPrice: '$5.00',
163
- },
164
- ];
165
- const wrapper = shallow(
166
- <PaymentTerm
167
- isFixedTermOffer={true}
168
- options={options}
169
- offerDisplayName="7-day pass"
170
- is7DayPassExperiment={true}
171
- />
172
- );
173
-
174
- it('renders renewal text that actually reflects how the 7-day pass is a fixed term subscription with a one-off payment made at the outset', () => {
175
- expect(wrapper.find('.ncf__payment-term__renews-text').text()).toMatch(
176
- /This subscription is for 7 days, charged at the outset./
177
- );
178
- });
179
-
180
- it('renders offer name and omits payment term title', () => {
181
- expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
182
- '7-day pass'
183
- );
184
- });
185
- });
186
-
187
156
  describe('getDisplayName', () => {
188
157
  const baseOptions = {
189
158
  name: 'monthly',
@@ -230,22 +199,6 @@ describe('PaymentTerm', () => {
230
199
  );
231
200
  });
232
201
  });
233
- describe('7-day pass experiment', () => {
234
- const options = [
235
- {
236
- ...baseOptions,
237
- isTrial: false,
238
- },
239
- ];
240
- it('renders with time period only if trial.option == false', () => {
241
- const wrapper = shallow(
242
- <PaymentTerm options={options} is7DayPassExperiment={true} />
243
- );
244
- expect(wrapper.find('.ncf__payment-term__label').text().trim()).toMatch(
245
- '£20.00 one-time paymentThis subscription is for 7 days, charged at the outset.'
246
- );
247
- });
248
- });
249
202
  });
250
203
 
251
204
  describe('[data-base-amount]', () => {
@@ -109,26 +109,6 @@ FixedTermOffer.args = {
109
109
  offerDisplayName: 'Mix & Match',
110
110
  };
111
111
 
112
- export const SevenDayPassExperimentOffer = (args) => (
113
- <div className="ncf">
114
- <Fieldset>
115
- <PaymentTerm {...args} />
116
- </Fieldset>
117
- </div>
118
- );
119
- SevenDayPassExperimentOffer.args = {
120
- options: [
121
- {
122
- name: 'monthly',
123
- price: '$5.00',
124
- value: 5.0,
125
- },
126
- ],
127
- isFixedTermOffer: true,
128
- is7DayPassExperiment: true,
129
- offerDisplayName: '7-day pass',
130
- };
131
-
132
112
  export const RenewOffers = (args) => (
133
113
  <div className="ncf">
134
114
  <Fieldset>
@@ -24,8 +24,6 @@ function AcceptTermsSubscription(_ref) {
24
24
  isPrintProduct = _ref$isPrintProduct === void 0 ? false : _ref$isPrintProduct,
25
25
  _ref$isSingleTerm = _ref.isSingleTerm,
26
26
  isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
27
- _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
28
- is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi,
29
27
  _ref$isTransition = _ref.isTransition,
30
28
  isTransition = _ref$isTransition === void 0 ? false : _ref$isTransition,
31
29
  _ref$transitionType = _ref.transitionType,
@@ -51,29 +49,6 @@ function AcceptTermsSubscription(_ref) {
51
49
  'aria-required': 'true',
52
50
  required: true
53
51
  };
54
- if (is7DayPassExperiment) {
55
- return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
56
- className: "o-typography-list ncf__accept-terms-list"
57
- }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
58
- className: "terms-transition terms-transition--immediate"
59
- }, "I give consent for my chosen payment method to be charged automatically.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
60
- className: "terms-transition terms-transition--immediate"
61
- }, "By placing your order subject to the Terms & Conditions (save for section 2) referred to below, you agree that we may start your 7-day pass immediately upon our acceptance of your order and that you are waiving your statutory right to cancel our contract within 14 days of confirmation. Your payment is a one-time payment collected at the time of checkout, and cancelling at any point (whether before or after the 14-day period) will not entitle you to a refund.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
62
- className: "terms-transition"
63
- }, "Please see here for the complete", ' ', /*#__PURE__*/_react["default"].createElement("a", {
64
- className: "ncf__link--external",
65
- href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
66
- target: "_blank",
67
- rel: "noopener noreferrer"
68
- }, "Terms & Conditions"), "."))), /*#__PURE__*/_react["default"].createElement("label", {
69
- className: labelClassName,
70
- htmlFor: "termsAcceptance"
71
- }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
72
- className: "o-forms-input__label"
73
- }, "I agree to the above terms & conditions."), /*#__PURE__*/_react["default"].createElement("p", {
74
- className: "o-forms-input__error"
75
- }, "Please accept our terms & conditions")));
76
- }
77
52
  var transitionTerms = isTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isSingleTerm && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
78
53
  className: "terms-transition"
79
54
  }, "I give consent for my chosen payment method to be charged automatically at the end of each subscription term until I cancel it by contacting", ' ', /*#__PURE__*/_react["default"].createElement("a", {
@@ -143,7 +118,6 @@ AcceptTermsSubscription.propTypes = {
143
118
  isTrial: _propTypes["default"].bool,
144
119
  isPrintProduct: _propTypes["default"].bool,
145
120
  isSingleTerm: _propTypes["default"].bool,
146
- is7DayPassExperiment: _propTypes["default"].bool,
147
121
  isTransition: _propTypes["default"].bool,
148
122
  transitionType: _propTypes["default"].string,
149
123
  isDeferredBilling: _propTypes["default"].bool
package/dist/index.js CHANGED
@@ -339,12 +339,6 @@ Object.defineProperty(exports, "Section", {
339
339
  return _section.Section;
340
340
  }
341
341
  });
342
- Object.defineProperty(exports, "SevenDayPassExperimentConfirmation", {
343
- enumerable: true,
344
- get: function get() {
345
- return _sevenDayPassExperimentConfirmation.SevenDayPassExperimentConfirmation;
346
- }
347
- });
348
342
  Object.defineProperty(exports, "State", {
349
343
  enumerable: true,
350
344
  get: function get() {
@@ -420,7 +414,6 @@ var _province = require("./province");
420
414
  var _registrationConfirmation = require("./registration-confirmation");
421
415
  var _responsibility = require("./responsibility");
422
416
  var _section = require("./section");
423
- var _sevenDayPassExperimentConfirmation = require("./seven-day-pass-experiment-confirmation");
424
417
  var _state = require("./state");
425
418
  var _submit = require("./submit");
426
419
  var _trialBanner = require("./trial-banner");
@@ -10,8 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
10
10
  function PackageChange(_ref) {
11
11
  var changePackageUrl = _ref.changePackageUrl,
12
12
  currentPackage = _ref.currentPackage,
13
- packageDescription = _ref.packageDescription,
14
- is7DayPassExperiment = _ref.is7DayPassExperiment;
13
+ packageDescription = _ref.packageDescription;
15
14
  return /*#__PURE__*/_react["default"].createElement("div", {
16
15
  className: "ncf__package-change"
17
16
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -22,7 +21,7 @@ function PackageChange(_ref) {
22
21
  className: "ncf__strong"
23
22
  }, currentPackage)), packageDescription && /*#__PURE__*/_react["default"].createElement("p", {
24
23
  className: "ncf__package-change__content__description"
25
- }, packageDescription)), !is7DayPassExperiment && /*#__PURE__*/_react["default"].createElement("div", {
24
+ }, packageDescription)), /*#__PURE__*/_react["default"].createElement("div", {
26
25
  className: "ncf__package-change__actions"
27
26
  }, /*#__PURE__*/_react["default"].createElement("a", {
28
27
  href: changePackageUrl,
@@ -33,6 +32,5 @@ function PackageChange(_ref) {
33
32
  PackageChange.propTypes = {
34
33
  changePackageUrl: _propTypes["default"].string.isRequired,
35
34
  currentPackage: _propTypes["default"].string.isRequired,
36
- packageDescription: _propTypes["default"].string,
37
- is7DayPassExperiment: _propTypes["default"].bool
35
+ packageDescription: _propTypes["default"].string
38
36
  };
@@ -33,9 +33,7 @@ function PaymentTerm(_ref) {
33
33
  _ref$optionsInARow = _ref.optionsInARow,
34
34
  optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow,
35
35
  _ref$billingCountry = _ref.billingCountry,
36
- billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry,
37
- _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
38
- is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi;
36
+ billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry;
39
37
  /**
40
38
  * Compute monthly price for given term name
41
39
  * @param {number} amount price in number format
@@ -120,18 +118,10 @@ function PaymentTerm(_ref) {
120
118
  },
121
119
  monthly: {
122
120
  title: 'Monthly',
123
- price: function price(_price3, is7DayPassExperiment) {
124
- var paymentIntervalTextToDisplay = function () {
125
- switch (true) {
126
- case is7DayPassExperiment:
127
- return ' one-time payment';
128
- default:
129
- return ' per month';
130
- }
131
- }();
121
+ price: function price(_price3) {
132
122
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
133
123
  className: "ncf__payment-term__price"
134
- }, _price3), paymentIntervalTextToDisplay);
124
+ }, _price3), " per month");
135
125
  },
136
126
  trialPrice: function trialPrice(price) {
137
127
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
@@ -139,17 +129,8 @@ function PaymentTerm(_ref) {
139
129
  }, price), " per month after the trial period.");
140
130
  },
141
131
  monthlyPrice: function monthlyPrice() {},
142
- renewsText: function renewsText(isFixedTermOffer, is7DayPassExperiment) {
143
- var textToDisplay = function () {
144
- switch (true) {
145
- case is7DayPassExperiment:
146
- return 'This subscription is for 7 days, charged at the outset.';
147
- case isFixedTermOffer:
148
- return 'This subscription is for 3 months, charged monthly. You can cancel at anytime';
149
- default:
150
- return 'Renews monthly unless cancelled';
151
- }
152
- }();
132
+ renewsText: function renewsText(isFixedTermOffer) {
133
+ var textToDisplay = isFixedTermOffer ? 'This subscription is for 3 months, charged monthly. You can cancel at anytime' : 'Renews monthly unless cancelled';
153
134
  return /*#__PURE__*/_react["default"].createElement("p", {
154
135
  className: "ncf__payment-term__renews-text"
155
136
  }, textToDisplay);
@@ -211,7 +192,7 @@ function PaymentTerm(_ref) {
211
192
  className: "ncf__payment-term__trial-price"
212
193
  }, 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", {
213
194
  className: "ncf__payment-term__description"
214
- }, nameMap[option.name].price(option.price, is7DayPassExperiment), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(isFixedTermOffer, is7DayPassExperiment)) :
195
+ }, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(isFixedTermOffer)) :
215
196
  // this should cover the cases different than annual, quarterly and monthly
216
197
  // for those containing period on option.value, render custom template, for the rest keep legacy render
217
198
  isValidPeriod(option.value) ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -224,17 +205,8 @@ function PaymentTerm(_ref) {
224
205
  };
225
206
  var getTermDisplayName = function getTermDisplayName() {
226
207
  var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isEpaper;
227
- var defaultTitle = function () {
228
- switch (true) {
229
- case is7DayPassExperiment:
230
- return '';
231
- case Boolean(option.name && nameMap[option.name]):
232
- return nameMap[option.name].title;
233
- default:
234
- return '';
235
- }
236
- }();
237
- var title = isFixedTermOffer ? [offerDisplayName, defaultTitle].filter(Boolean).join(' - ') : defaultTitle;
208
+ var defaultTitle = option.name && nameMap[option.name] ? nameMap[option.name].title : '';
209
+ var title = isFixedTermOffer ? "".concat(offerDisplayName, " - ").concat(defaultTitle) : defaultTitle;
238
210
  var termDisplayName = '';
239
211
  if (showTrialCopyInTitle) {
240
212
  var termName = option.displayName ? option.displayName : 'Premium Digital';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/n-conversion-forms",
3
- "version": "0.0.0",
3
+ "version": "32.2.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": {
@@ -28,10 +28,10 @@ const UKDeliveryOptions = {
28
28
  PV: {
29
29
  title: 'Paper vouchers',
30
30
  description:
31
- '13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.',
31
+ '13-week voucher pack delivered quarterly and redeemable at retailers nationwide.',
32
32
  },
33
33
  HD: {
34
- title: 'Home delivery',
34
+ title: 'Hand delivery',
35
35
  description: 'Free delivery to your home or office before 7am.',
36
36
  },
37
37
  EV: {
@@ -114,7 +114,7 @@ const deliveryOptionMessages = [
114
114
  deliveryOnPublicationDate: false,
115
115
  flightMarket: true,
116
116
  country: [printRegions.cemeaV1, printRegions.cemeaV2, printRegions.apac],
117
- title: 'Hand Delivery',
117
+ title: 'Hand delivery',
118
118
  description:
119
119
  'Enjoy the delivery of the newspaper to your home or office address. Please note we fly the newspaper to your location which means delivery is subject to flight delays/cancellations outside of the FT’s control. In those circumstances, your newspaper will be delivered the next delivery day. Please also be aware that your FT weekend will be delivered on Sunday.',
120
120
  },
@@ -127,7 +127,7 @@ const deliveryOptionMessages = [
127
127
  distributorType: HAND_DELIVERY,
128
128
  deliveryOnPublicationDate: true,
129
129
  flightMarket: true,
130
- title: 'Hand Delivery',
130
+ title: 'Hand delivery',
131
131
  country: [printRegions.cemeaV1, printRegions.cemeaV2, printRegions.apac],
132
132
  description:
133
133
  'Enjoy delivery of the newspaper to your home or office address. FT Weekend will be delivered on Sunday or Monday.',
@@ -142,7 +142,7 @@ const deliveryOptionMessages = [
142
142
  deliveryOnPublicationDate: true,
143
143
  flightMarket: false,
144
144
  country: [printRegions.cemeaV1, printRegions.cemeaV2, printRegions.apac],
145
- title: 'Hand Delivery',
145
+ title: 'Hand delivery',
146
146
  description:
147
147
  'Enjoy delivery of the newspaper daily to your home or office address on the day of publication.',
148
148
  },
@@ -140,7 +140,7 @@ describe('Find Custom Delivery Option', () => {
140
140
  stubOption.deliveryOnPublicationDate = false;
141
141
  stubOption.mailDelivery = false;
142
142
  const expected = {
143
- title: 'Hand Delivery',
143
+ title: 'Hand delivery',
144
144
  description:
145
145
  'Enjoy the delivery of the newspaper to your home or office address. Please note we fly the newspaper to your location which means delivery is subject to flight delays/cancellations outside of the FT’s control. In those circumstances, your newspaper will be delivered the next delivery day. Please also be aware that your FT weekend will be delivered on Sunday.',
146
146
  };
@@ -1,110 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
-
4
- const DetailsMobileView = ({ details }) => (
5
- <dl className="ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg">
6
- {details.map((detail, index) => (
7
- <React.Fragment key={index}>
8
- <dt className="ncf__list-title">{detail.title}</dt>
9
- <dd className="ncf__list-data">{detail.data}</dd>
10
- </React.Fragment>
11
- ))}
12
- </dl>
13
- );
14
-
15
- export function SevenDayPassExperimentConfirmation({
16
- offerName = '',
17
- details = [],
18
- }) {
19
- const detailElements = details && (
20
- <React.Fragment>
21
- <h2 className="ncf__header2--afterline">Your billing details</h2>
22
- <dl className="ncf__list ncf__lite-sub-confirmation--hidden-sm">
23
- {details.map((detail, index) => (
24
- <React.Fragment key={index}>
25
- <dt className="ncf__list-title">{detail.title}</dt>
26
- <dd className="ncf__list-data">{detail.data}</dd>
27
- </React.Fragment>
28
- ))}
29
- </dl>
30
- <DetailsMobileView details={details} />
31
- </React.Fragment>
32
- );
33
-
34
- return (
35
- <div className="ncf ncf__wrapper">
36
- <div className="ncf__center">
37
- <div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
38
- <p className="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
39
- You are now subscribed to:
40
- </p>
41
- <h1 className="ncf__header ncf__header--confirmation">
42
- {'Premium Digital'}
43
- </h1>
44
- </div>
45
- <p className="ncf__paragraph">
46
- Exciting news! You are one of the first to try a{' '}
47
- <strong>{offerName}</strong>. As a thank you, we are pleased to extend
48
- your subscription to one month at no additional cost.
49
- </p>
50
- <p className="ncf__center">
51
- <a
52
- href="/"
53
- className="ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
54
- >
55
- Go to FT.com
56
- </a>
57
- </p>
58
- <p className="ncf__paragraph">
59
- Please save or print this page for your records as your purchase
60
- confirmation.
61
- </p>
62
-
63
- <p className="ncf__paragraph">
64
- Here&apos;s a summary of your Premium Digital subscription:
65
- </p>
66
-
67
- {detailElements}
68
-
69
- <div className="ncf__headed-paragraph">
70
- <h3 className="ncf__header">Something not right?</h3>
71
- <p className="ncf__paragraph">
72
- Go to your{' '}
73
- <a
74
- className="ncf__link ncf__link--external"
75
- href="https://www.ft.com/myaccount/personal-details"
76
- target="_blank"
77
- rel="noopener noreferrer"
78
- data-trackable="yourAccount"
79
- >
80
- account settings
81
- </a>{' '}
82
- to view or edit your account. If you need to get in touch call us on{' '}
83
- <a href="tel:+442077556248" className="ncf__link ncf__link--external">
84
- +44 20 7755 6248
85
- </a>
86
- . Or{' '}
87
- <a
88
- className="ncf__link ncf__link--external"
89
- href="https://help.ft.com/contact/"
90
- target="_blank"
91
- rel="noopener noreferrer"
92
- >
93
- contact us
94
- </a>{' '}
95
- for additional support.
96
- </p>
97
- </div>
98
- </div>
99
- );
100
- }
101
-
102
- SevenDayPassExperimentConfirmation.propTypes = {
103
- offerName: PropTypes.string.isRequired,
104
- details: PropTypes.arrayOf(
105
- PropTypes.shape({
106
- title: PropTypes.string.isRequired,
107
- data: PropTypes.string.isRequired,
108
- })
109
- ),
110
- };
@@ -1,33 +0,0 @@
1
- import React from 'react';
2
- import { SevenDayPassExperimentConfirmation } from './seven-day-pass-experiment-confirmation';
3
-
4
- export default {
5
- title: '7-day pass experiment confirmation',
6
- component: SevenDayPassExperimentConfirmation,
7
- argTypes: {
8
- details: { control: 'array' },
9
- offerType: { control: 'string' },
10
- offerName: { control: 'string' },
11
- },
12
- };
13
-
14
- export const Basic = (args) => <SevenDayPassExperimentConfirmation {...args} />;
15
- Basic.args = {
16
- offerType: 'Premium',
17
- details: [
18
- {
19
- title: 'End Date',
20
- data: 'September 18, 2023',
21
- },
22
- {
23
- title: 'One-time payment',
24
- data: '£1.99',
25
- },
26
- {
27
- title: 'Payment method',
28
- data: 'Credit / Debit Card',
29
- },
30
- ],
31
- offerName: '7-day pass',
32
- subscriptionAmount: '£1.99',
33
- };
@@ -1,93 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.SevenDayPassExperimentConfirmation = SevenDayPassExperimentConfirmation;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var DetailsMobileView = function DetailsMobileView(_ref) {
11
- var details = _ref.details;
12
- return /*#__PURE__*/_react["default"].createElement("dl", {
13
- className: "ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg"
14
- }, details.map(function (detail, index) {
15
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
16
- key: index
17
- }, /*#__PURE__*/_react["default"].createElement("dt", {
18
- className: "ncf__list-title"
19
- }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
20
- className: "ncf__list-data"
21
- }, detail.data));
22
- }));
23
- };
24
- function SevenDayPassExperimentConfirmation(_ref2) {
25
- var _ref2$offerName = _ref2.offerName,
26
- offerName = _ref2$offerName === void 0 ? '' : _ref2$offerName,
27
- _ref2$details = _ref2.details,
28
- details = _ref2$details === void 0 ? [] : _ref2$details;
29
- var detailElements = details && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h2", {
30
- className: "ncf__header2--afterline"
31
- }, "Your billing details"), /*#__PURE__*/_react["default"].createElement("dl", {
32
- className: "ncf__list ncf__lite-sub-confirmation--hidden-sm"
33
- }, details.map(function (detail, index) {
34
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
35
- key: index
36
- }, /*#__PURE__*/_react["default"].createElement("dt", {
37
- className: "ncf__list-title"
38
- }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
39
- className: "ncf__list-data"
40
- }, detail.data));
41
- })), /*#__PURE__*/_react["default"].createElement(DetailsMobileView, {
42
- details: details
43
- }));
44
- return /*#__PURE__*/_react["default"].createElement("div", {
45
- className: "ncf ncf__wrapper"
46
- }, /*#__PURE__*/_react["default"].createElement("div", {
47
- className: "ncf__center"
48
- }, /*#__PURE__*/_react["default"].createElement("div", {
49
- className: "ncf__icon ncf__icon--tick ncf__icon--large"
50
- }), /*#__PURE__*/_react["default"].createElement("p", {
51
- className: "ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation"
52
- }, "You are now subscribed to:"), /*#__PURE__*/_react["default"].createElement("h1", {
53
- className: "ncf__header ncf__header--confirmation"
54
- }, 'Premium Digital')), /*#__PURE__*/_react["default"].createElement("p", {
55
- className: "ncf__paragraph"
56
- }, "Exciting news! You are one of the first to try a", ' ', /*#__PURE__*/_react["default"].createElement("strong", null, offerName), ". As a thank you, we are pleased to extend your subscription to one month at no additional cost."), /*#__PURE__*/_react["default"].createElement("p", {
57
- className: "ncf__center"
58
- }, /*#__PURE__*/_react["default"].createElement("a", {
59
- href: "/",
60
- className: "ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
61
- }, "Go to FT.com")), /*#__PURE__*/_react["default"].createElement("p", {
62
- className: "ncf__paragraph"
63
- }, "Please save or print this page for your records as your purchase confirmation."), /*#__PURE__*/_react["default"].createElement("p", {
64
- className: "ncf__paragraph"
65
- }, "Here's a summary of your Premium Digital subscription:"), detailElements, /*#__PURE__*/_react["default"].createElement("div", {
66
- className: "ncf__headed-paragraph"
67
- }, /*#__PURE__*/_react["default"].createElement("h3", {
68
- className: "ncf__header"
69
- }, "Something not right?"), /*#__PURE__*/_react["default"].createElement("p", {
70
- className: "ncf__paragraph"
71
- }, "Go to your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
72
- className: "ncf__link ncf__link--external",
73
- href: "https://www.ft.com/myaccount/personal-details",
74
- target: "_blank",
75
- rel: "noopener noreferrer",
76
- "data-trackable": "yourAccount"
77
- }, "account settings"), ' ', "to view or edit your account. If you need to get in touch call us on", ' ', /*#__PURE__*/_react["default"].createElement("a", {
78
- href: "tel:+442077556248",
79
- className: "ncf__link ncf__link--external"
80
- }, "+44 20 7755 6248"), ". Or", ' ', /*#__PURE__*/_react["default"].createElement("a", {
81
- className: "ncf__link ncf__link--external",
82
- href: "https://help.ft.com/contact/",
83
- target: "_blank",
84
- rel: "noopener noreferrer"
85
- }, "contact us"), ' ', "for additional support.")));
86
- }
87
- SevenDayPassExperimentConfirmation.propTypes = {
88
- offerName: _propTypes["default"].string.isRequired,
89
- details: _propTypes["default"].arrayOf(_propTypes["default"].shape({
90
- title: _propTypes["default"].string.isRequired,
91
- data: _propTypes["default"].string.isRequired
92
- }))
93
- };