@financial-times/n-conversion-forms 44.0.0 → 44.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/.toolkitstate/ci.json +3 -3
- package/components/accept-terms-subscription-updated-ui.jsx +101 -0
- package/components/accept-terms-subscription-updated-ui.spec.js +58 -0
- package/components/accept-terms-subscription-updatted-ui.stories.js +18 -0
- package/components/accept-terms-subscription.jsx +8 -1
- package/components/index.js +1 -0
- package/dist/accept-terms-subscription-updated-ui.jsx +62 -0
- package/dist/accept-terms-subscription.jsx +7 -3
- package/dist/index.js +7 -0
- package/package.json +1 -1
package/.toolkitstate/ci.json
CHANGED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
|
|
5
|
+
export function AcceptTermsSubscriptionUpdatedUI({
|
|
6
|
+
hasError = false,
|
|
7
|
+
transitionType = null,
|
|
8
|
+
additionalClassNames = [],
|
|
9
|
+
}) {
|
|
10
|
+
const divProps = {
|
|
11
|
+
id: 'acceptTermsField',
|
|
12
|
+
className: classNames([
|
|
13
|
+
'o-forms-field',
|
|
14
|
+
'o-layout-typography',
|
|
15
|
+
'ncf__validation-error',
|
|
16
|
+
...additionalClassNames,
|
|
17
|
+
]),
|
|
18
|
+
'data-validate': 'required,checked',
|
|
19
|
+
};
|
|
20
|
+
const labelClassName = classNames([
|
|
21
|
+
'o-forms-input',
|
|
22
|
+
'o-forms-input--checkbox',
|
|
23
|
+
{
|
|
24
|
+
'o-forms-input--invalid': hasError,
|
|
25
|
+
},
|
|
26
|
+
]);
|
|
27
|
+
|
|
28
|
+
const inputProps = {
|
|
29
|
+
id: 'termsAcceptance',
|
|
30
|
+
type: 'checkbox',
|
|
31
|
+
name: 'termsAcceptance',
|
|
32
|
+
value: 'true',
|
|
33
|
+
'data-trackable': 'field-terms',
|
|
34
|
+
'aria-required': 'true',
|
|
35
|
+
required: true,
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const updatedUiTransitionTerms = (
|
|
39
|
+
<>
|
|
40
|
+
{transitionType === 'immediate' ? (
|
|
41
|
+
<li>
|
|
42
|
+
<span className="terms-updated-ui-transition terms-updated-ui-transition--immediate">
|
|
43
|
+
I consent to payment being taken at the end of each subscription
|
|
44
|
+
term until I cancel. I understand and agree that I will lose my
|
|
45
|
+
statutory right to cancel within 14 days of accepting my order, and
|
|
46
|
+
that any notice to cancel will only take effect at the end of my
|
|
47
|
+
subscription period. Previously paid amounts are non-refundable,
|
|
48
|
+
except in the event of a fault in the provision of services.
|
|
49
|
+
</span>
|
|
50
|
+
</li>
|
|
51
|
+
) : (
|
|
52
|
+
<li>
|
|
53
|
+
<span className="terms-updated-ui-transition terms-updated-ui-transition--end-of-term">
|
|
54
|
+
I consent to payment being taken at the end of each subscription
|
|
55
|
+
term until I cancel. By accepting, I am aware that my subscription
|
|
56
|
+
will renew on the date given. I understand and agree that I will
|
|
57
|
+
lose my statutory right to cancel within 14 days of accepting my
|
|
58
|
+
order, and that any notice to cancel will only take effect at the
|
|
59
|
+
end of my subscription period. Previously paid amounts are
|
|
60
|
+
non-refundable, except in the event of a fault in the provision of
|
|
61
|
+
services.
|
|
62
|
+
</span>
|
|
63
|
+
</li>
|
|
64
|
+
)}
|
|
65
|
+
<li>
|
|
66
|
+
<span className="terms-updated-ui-transition o3-type-body-base">
|
|
67
|
+
For more information, see our full{' '}
|
|
68
|
+
<a
|
|
69
|
+
href="http://help.ft.com/help/legal-privacy/terms-conditions/"
|
|
70
|
+
target="_blank"
|
|
71
|
+
rel="noopener noreferrer"
|
|
72
|
+
>
|
|
73
|
+
Terms & Conditions
|
|
74
|
+
</a>
|
|
75
|
+
.
|
|
76
|
+
</span>
|
|
77
|
+
</li>
|
|
78
|
+
</>
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<div {...divProps}>
|
|
83
|
+
<ul className="ncf__accept-terms-list">{updatedUiTransitionTerms}</ul>
|
|
84
|
+
<label className={labelClassName} htmlFor="termsAcceptance">
|
|
85
|
+
<input {...inputProps} />
|
|
86
|
+
<span className="o-forms-input__label">
|
|
87
|
+
I agree to the full Terms & Conditions.
|
|
88
|
+
</span>
|
|
89
|
+
<p className="o-forms-input__error">
|
|
90
|
+
Please accept the full Terms & Conditions.
|
|
91
|
+
</p>
|
|
92
|
+
</label>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
AcceptTermsSubscriptionUpdatedUI.propTypes = {
|
|
98
|
+
hasError: PropTypes.bool,
|
|
99
|
+
transitionType: PropTypes.string,
|
|
100
|
+
additionalClassNames: PropTypes.arrayOf(PropTypes.string),
|
|
101
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { mount } from 'enzyme';
|
|
3
|
+
import { AcceptTermsSubscriptionUpdatedUI } from './index';
|
|
4
|
+
|
|
5
|
+
describe('AcceptTermsSubscriptionUpdatedUI', () => {
|
|
6
|
+
it('renders with "o-forms-input--invalid" class when hasError prop is true', () => {
|
|
7
|
+
const props = { hasError: true };
|
|
8
|
+
|
|
9
|
+
const component = mount(<AcceptTermsSubscriptionUpdatedUI {...props} />);
|
|
10
|
+
|
|
11
|
+
const labelElement = component.find('label');
|
|
12
|
+
expect(labelElement.hasClass('o-forms-input--invalid')).toBe(true);
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
it('renders with additional classes when additionalClassNames is provided', () => {
|
|
16
|
+
const props = {
|
|
17
|
+
additionalClassNames: ['foo', 'bar'],
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const component = mount(<AcceptTermsSubscriptionUpdatedUI {...props} />);
|
|
21
|
+
|
|
22
|
+
const divElement = component.find('div#acceptTermsField');
|
|
23
|
+
expect(divElement.hasClass('foo')).toBe(true);
|
|
24
|
+
expect(divElement.hasClass('bar')).toBe(true);
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('renders the terms for the updated transition UI with end of term transition', () => {
|
|
28
|
+
const props = {
|
|
29
|
+
transitionType: 'endOfTerm',
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const component = mount(<AcceptTermsSubscriptionUpdatedUI {...props} />);
|
|
33
|
+
|
|
34
|
+
const updatedUITransitionTerms = component.find(
|
|
35
|
+
'.terms-updated-ui-transition--end-of-term'
|
|
36
|
+
);
|
|
37
|
+
expect(updatedUITransitionTerms.exists()).toBe(true);
|
|
38
|
+
expect(updatedUITransitionTerms.text()).toBe(
|
|
39
|
+
'I consent to payment being taken at the end of each subscription term until I cancel. By accepting, I am aware that my subscription will renew on the date given. I understand and agree that I will lose my statutory right to cancel within 14 days of accepting my order, and that any notice to cancel will only take effect at the end of my subscription period. Previously paid amounts are non-refundable, except in the event of a fault in the provision of services.'
|
|
40
|
+
);
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
it('renders the terms for the updated transition UI with immediate transition', () => {
|
|
44
|
+
const props = {
|
|
45
|
+
transitionType: 'immediate',
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const component = mount(<AcceptTermsSubscriptionUpdatedUI {...props} />);
|
|
49
|
+
|
|
50
|
+
const updatedUITransitionTerms = component.find(
|
|
51
|
+
'.terms-updated-ui-transition--immediate'
|
|
52
|
+
);
|
|
53
|
+
expect(updatedUITransitionTerms.exists()).toBe(true);
|
|
54
|
+
expect(updatedUITransitionTerms.text()).toBe(
|
|
55
|
+
'I consent to payment being taken at the end of each subscription term until I cancel. I understand and agree that I will lose my statutory right to cancel within 14 days of accepting my order, and that any notice to cancel will only take effect at the end of my subscription period. Previously paid amounts are non-refundable, except in the event of a fault in the provision of services.'
|
|
56
|
+
);
|
|
57
|
+
});
|
|
58
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AcceptTermsSubscriptionUpdatedUI } from './accept-terms-subscription-updated-ui';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Accept Terms Subscription Updated UI',
|
|
6
|
+
component: AcceptTermsSubscriptionUpdatedUI,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export const Basic = (args) => <AcceptTermsSubscriptionUpdatedUI {...args} />;
|
|
10
|
+
Basic.args = {};
|
|
11
|
+
|
|
12
|
+
export const TransitionType = (args) => (
|
|
13
|
+
<AcceptTermsSubscriptionUpdatedUI {...args} />
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
TransitionType.args = {
|
|
17
|
+
transitionType: true,
|
|
18
|
+
};
|
|
@@ -13,10 +13,16 @@ export function AcceptTermsSubscription({
|
|
|
13
13
|
isTransition = false,
|
|
14
14
|
transitionType = null,
|
|
15
15
|
isDeferredBilling = false,
|
|
16
|
+
additionalClassNames = [],
|
|
16
17
|
}) {
|
|
17
18
|
const divProps = {
|
|
18
19
|
id: 'acceptTermsField',
|
|
19
|
-
className:
|
|
20
|
+
className: classNames([
|
|
21
|
+
'o-forms-field',
|
|
22
|
+
'o-layout-typography',
|
|
23
|
+
'ncf__validation-error',
|
|
24
|
+
...additionalClassNames,
|
|
25
|
+
]),
|
|
20
26
|
'data-validate': 'required,checked',
|
|
21
27
|
...(isSignup && { 'data-trackable': 'sign-up-terms' }),
|
|
22
28
|
};
|
|
@@ -242,4 +248,5 @@ AcceptTermsSubscription.propTypes = {
|
|
|
242
248
|
isTransition: PropTypes.bool,
|
|
243
249
|
transitionType: PropTypes.string,
|
|
244
250
|
isDeferredBilling: PropTypes.bool,
|
|
251
|
+
additionalClassNames: PropTypes.arrayOf(PropTypes.string),
|
|
245
252
|
};
|
package/components/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { AcceptTerms } from './accept-terms';
|
|
2
2
|
export { AcceptTermsPrivacyPolicy } from './accept-terms-privacy-policy';
|
|
3
3
|
export { AcceptTermsSubscription } from './accept-terms-subscription';
|
|
4
|
+
export { AcceptTermsSubscriptionUpdatedUI } from './accept-terms-subscription-updated-ui';
|
|
4
5
|
export { AcceptTermsBusiness } from './accept-terms-business';
|
|
5
6
|
export { AppBanner } from './app-banner';
|
|
6
7
|
export { BillingCity } from './billing-city';
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.AcceptTermsSubscriptionUpdatedUI = AcceptTermsSubscriptionUpdatedUI;
|
|
8
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
12
|
+
function AcceptTermsSubscriptionUpdatedUI(_ref) {
|
|
13
|
+
var _ref$hasError = _ref.hasError,
|
|
14
|
+
hasError = _ref$hasError === void 0 ? false : _ref$hasError,
|
|
15
|
+
_ref$transitionType = _ref.transitionType,
|
|
16
|
+
transitionType = _ref$transitionType === void 0 ? null : _ref$transitionType,
|
|
17
|
+
_ref$additionalClassN = _ref.additionalClassNames,
|
|
18
|
+
additionalClassNames = _ref$additionalClassN === void 0 ? [] : _ref$additionalClassN;
|
|
19
|
+
var divProps = {
|
|
20
|
+
id: 'acceptTermsField',
|
|
21
|
+
className: (0, _classnames["default"])(['o-forms-field', 'o-layout-typography', 'ncf__validation-error'].concat((0, _toConsumableArray2["default"])(additionalClassNames))),
|
|
22
|
+
'data-validate': 'required,checked'
|
|
23
|
+
};
|
|
24
|
+
var labelClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--checkbox', {
|
|
25
|
+
'o-forms-input--invalid': hasError
|
|
26
|
+
}]);
|
|
27
|
+
var inputProps = {
|
|
28
|
+
id: 'termsAcceptance',
|
|
29
|
+
type: 'checkbox',
|
|
30
|
+
name: 'termsAcceptance',
|
|
31
|
+
value: 'true',
|
|
32
|
+
'data-trackable': 'field-terms',
|
|
33
|
+
'aria-required': 'true',
|
|
34
|
+
required: true
|
|
35
|
+
};
|
|
36
|
+
var updatedUiTransitionTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, transitionType === 'immediate' ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
37
|
+
className: "terms-updated-ui-transition terms-updated-ui-transition--immediate"
|
|
38
|
+
}, "I consent to payment being taken at the end of each subscription term until I cancel. I understand and agree that I will lose my statutory right to cancel within 14 days of accepting my order, and that any notice to cancel will only take effect at the end of my subscription period. Previously paid amounts are non-refundable, except in the event of a fault in the provision of services.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
39
|
+
className: "terms-updated-ui-transition terms-updated-ui-transition--end-of-term"
|
|
40
|
+
}, "I consent to payment being taken at the end of each subscription term until I cancel. By accepting, I am aware that my subscription will renew on the date given. I understand and agree that I will lose my statutory right to cancel within 14 days of accepting my order, and that any notice to cancel will only take effect at the end of my subscription period. Previously paid amounts are non-refundable, except in the event of a fault in the provision of services.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
41
|
+
className: "terms-updated-ui-transition o3-type-body-base"
|
|
42
|
+
}, "For more information, see our full", ' ', /*#__PURE__*/_react["default"].createElement("a", {
|
|
43
|
+
href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
|
|
44
|
+
target: "_blank",
|
|
45
|
+
rel: "noopener noreferrer"
|
|
46
|
+
}, "Terms & Conditions"), ".")));
|
|
47
|
+
return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
|
|
48
|
+
className: "ncf__accept-terms-list"
|
|
49
|
+
}, updatedUiTransitionTerms), /*#__PURE__*/_react["default"].createElement("label", {
|
|
50
|
+
className: labelClassName,
|
|
51
|
+
htmlFor: "termsAcceptance"
|
|
52
|
+
}, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
|
|
53
|
+
className: "o-forms-input__label"
|
|
54
|
+
}, "I agree to the full Terms & Conditions."), /*#__PURE__*/_react["default"].createElement("p", {
|
|
55
|
+
className: "o-forms-input__error"
|
|
56
|
+
}, "Please accept the full Terms & Conditions.")));
|
|
57
|
+
}
|
|
58
|
+
AcceptTermsSubscriptionUpdatedUI.propTypes = {
|
|
59
|
+
hasError: _propTypes["default"].bool,
|
|
60
|
+
transitionType: _propTypes["default"].string,
|
|
61
|
+
additionalClassNames: _propTypes["default"].arrayOf(_propTypes["default"].string)
|
|
62
|
+
};
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.AcceptTermsSubscription = AcceptTermsSubscription;
|
|
8
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
8
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
10
|
var _react = _interopRequireDefault(require("react"));
|
|
10
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
@@ -31,10 +32,12 @@ function AcceptTermsSubscription(_ref) {
|
|
|
31
32
|
_ref$transitionType = _ref.transitionType,
|
|
32
33
|
transitionType = _ref$transitionType === void 0 ? null : _ref$transitionType,
|
|
33
34
|
_ref$isDeferredBillin = _ref.isDeferredBilling,
|
|
34
|
-
isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin
|
|
35
|
+
isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin,
|
|
36
|
+
_ref$additionalClassN = _ref.additionalClassNames,
|
|
37
|
+
additionalClassNames = _ref$additionalClassN === void 0 ? [] : _ref$additionalClassN;
|
|
35
38
|
var divProps = _objectSpread({
|
|
36
39
|
id: 'acceptTermsField',
|
|
37
|
-
className: 'o-forms-field o-layout-typography ncf__validation-error',
|
|
40
|
+
className: (0, _classnames["default"])(['o-forms-field', 'o-layout-typography', 'ncf__validation-error'].concat((0, _toConsumableArray2["default"])(additionalClassNames))),
|
|
38
41
|
'data-validate': 'required,checked'
|
|
39
42
|
}, isSignup && {
|
|
40
43
|
'data-trackable': 'sign-up-terms'
|
|
@@ -135,5 +138,6 @@ AcceptTermsSubscription.propTypes = {
|
|
|
135
138
|
isTermedSubscriptionTermType: _propTypes["default"].bool,
|
|
136
139
|
isTransition: _propTypes["default"].bool,
|
|
137
140
|
transitionType: _propTypes["default"].string,
|
|
138
|
-
isDeferredBilling: _propTypes["default"].bool
|
|
141
|
+
isDeferredBilling: _propTypes["default"].bool,
|
|
142
|
+
additionalClassNames: _propTypes["default"].arrayOf(_propTypes["default"].string)
|
|
139
143
|
};
|
package/dist/index.js
CHANGED
|
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AcceptTermsSubscription", {
|
|
|
27
27
|
return _acceptTermsSubscription.AcceptTermsSubscription;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "AcceptTermsSubscriptionUpdatedUI", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function get() {
|
|
33
|
+
return _acceptTermsSubscriptionUpdatedUi.AcceptTermsSubscriptionUpdatedUI;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
Object.defineProperty(exports, "AppBanner", {
|
|
31
37
|
enumerable: true,
|
|
32
38
|
get: function get() {
|
|
@@ -372,6 +378,7 @@ Object.defineProperty(exports, "YearOfBirth", {
|
|
|
372
378
|
var _acceptTerms = require("./accept-terms");
|
|
373
379
|
var _acceptTermsPrivacyPolicy = require("./accept-terms-privacy-policy");
|
|
374
380
|
var _acceptTermsSubscription = require("./accept-terms-subscription");
|
|
381
|
+
var _acceptTermsSubscriptionUpdatedUi = require("./accept-terms-subscription-updated-ui");
|
|
375
382
|
var _acceptTermsBusiness = require("./accept-terms-business");
|
|
376
383
|
var _appBanner = require("./app-banner");
|
|
377
384
|
var _billingCity = require("./billing-city");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/n-conversion-forms",
|
|
3
|
-
"version": "44.
|
|
3
|
+
"version": "44.2.0",
|
|
4
4
|
"description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"scripts": {
|