@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 +2 -0
- package/.toolkitstate/ci.json +2 -2
- package/components/__snapshots__/delivery-option.spec.js.snap +6 -6
- package/components/__snapshots__/package-change.spec.js.snap +0 -15
- package/components/accept-terms-subscription.jsx +0 -52
- package/components/accept-terms-subscription.stories.js +8 -8
- package/components/index.js +0 -1
- package/components/package-change.jsx +9 -13
- package/components/package-change.spec.js +0 -17
- package/components/package-change.stories.js +0 -8
- package/components/payment-term.jsx +14 -50
- package/components/payment-term.spec.js +0 -47
- package/components/payment-term.stories.js +0 -20
- package/dist/accept-terms-subscription.jsx +0 -26
- package/dist/index.js +0 -7
- package/dist/package-change.jsx +3 -5
- package/dist/payment-term.jsx +8 -36
- package/package.json +1 -1
- package/utils/delivery-option-messages.js +5 -5
- package/utils/delivery-option-messages.spec.js +1 -1
- package/components/seven-day-pass-experiment-confirmation.jsx +0 -110
- package/components/seven-day-pass-experiment-confirmation.stories.js +0 -33
- package/dist/seven-day-pass-experiment-confirmation.jsx +0 -93
package/.eslintignore
CHANGED
package/.toolkitstate/ci.json
CHANGED
|
@@ -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.
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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 & 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 & conditions.
|
|
82
|
-
</span>
|
|
83
|
-
<p className="o-forms-input__error">
|
|
84
|
-
Please accept our terms & 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
|
|
27
|
+
export const IsSingleTerm = (args) => <AcceptTermsSubscription {...args} />;
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
IsSingleTerm.args = {
|
|
30
30
|
isSingleTerm: true,
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
export const
|
|
33
|
+
export const IsTransition = (args) => <AcceptTermsSubscription {...args} />;
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
IsTransition.args = {
|
|
36
36
|
isTransition: true,
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
-
export const
|
|
39
|
+
export const TransitionType = (args) => <AcceptTermsSubscription {...args} />;
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
TransitionType.args = {
|
|
42
42
|
transitionType: true,
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
export const
|
|
45
|
+
export const IsDeferredBilling = (args) => (
|
|
46
46
|
<AcceptTermsSubscription {...args} />
|
|
47
47
|
);
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
IsDeferredBilling.args = {
|
|
50
50
|
isDeferredBilling: true,
|
|
51
51
|
};
|
package/components/index.js
CHANGED
|
@@ -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
|
-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
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
|
|
138
|
-
const textToDisplay =
|
|
139
|
-
|
|
140
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
?
|
|
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");
|
package/dist/package-change.jsx
CHANGED
|
@@ -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)),
|
|
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
|
};
|
package/dist/payment-term.jsx
CHANGED
|
@@ -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
|
|
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),
|
|
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
|
|
143
|
-
var textToDisplay =
|
|
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
|
|
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 =
|
|
228
|
-
|
|
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": "
|
|
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.
|
|
31
|
+
'13-week voucher pack delivered quarterly and redeemable at retailers nationwide.',
|
|
32
32
|
},
|
|
33
33
|
HD: {
|
|
34
|
-
title: '
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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'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
|
-
};
|