@financial-times/n-conversion-forms 33.0.0 → 34.0.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.
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "branch": "",
3
3
  "repo": "n-conversion-forms",
4
- "version": "a095aefdcff4fca917872327a21f932adbf4b010",
5
- "tag": "v33.0.0"
4
+ "version": "87d6d8c377b47120dcf4d707275d1df6efaa9fbe",
5
+ "tag": "v34.0.0"
6
6
  }
@@ -54,7 +54,6 @@ export { Submit } from './submit';
54
54
  export { TrialBanner } from './trial-banner';
55
55
  export { EducationJobTitle } from './education-job-title';
56
56
  export { GraduationDate } from './graduation-date';
57
- export { LiteSubConfirmation } from './lite-sub-confirmation';
58
57
  export { GoogleSignIn } from './google-sign-in';
59
58
  export { TextInput } from './text-input';
60
59
  export { DeferredBillingTerms } from './deferred-billing-terms';
package/dist/index.js CHANGED
@@ -243,12 +243,6 @@ Object.defineProperty(exports, "LicenceHeader", {
243
243
  return _licenceHeader.LicenceHeader;
244
244
  }
245
245
  });
246
- Object.defineProperty(exports, "LiteSubConfirmation", {
247
- enumerable: true,
248
- get: function get() {
249
- return _liteSubConfirmation.LiteSubConfirmation;
250
- }
251
- });
252
246
  Object.defineProperty(exports, "Loader", {
253
247
  enumerable: true,
254
248
  get: function get() {
@@ -419,7 +413,6 @@ var _submit = require("./submit");
419
413
  var _trialBanner = require("./trial-banner");
420
414
  var _educationJobTitle = require("./education-job-title");
421
415
  var _graduationDate = require("./graduation-date");
422
- var _liteSubConfirmation = require("./lite-sub-confirmation");
423
416
  var _googleSignIn = require("./google-sign-in");
424
417
  var _textInput = require("./text-input");
425
418
  var _deferredBillingTerms = require("./deferred-billing-terms");
package/main.scss CHANGED
@@ -20,7 +20,6 @@
20
20
  @import './styles/forms-additional-field-information';
21
21
  @import './styles/error';
22
22
  @import './styles/graduation-date';
23
- @import './styles/lite-subs-confirmation';
24
23
  @import './styles/google-sign-in';
25
24
  @import './styles/confirmation';
26
25
 
@@ -448,7 +447,6 @@
448
447
  @include ncfCustomerCarePanel();
449
448
  @include ncfAcceptTermsList();
450
449
  @include ncfGraduationDate();
451
- @include ncfLiteSubsConfirmation();
452
450
  @include ncfConfirmation();
453
451
 
454
452
  &__hidden {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/n-conversion-forms",
3
- "version": "33.0.0",
3
+ "version": "34.0.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": {
@@ -1,150 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
-
4
- const EMAIL_DEFAULT_TEXT = 'your email';
5
- const PREMIUM_OFFER = 'P2';
6
-
7
- const isPremium = (productCode) => productCode === PREMIUM_OFFER;
8
-
9
- const DetailsMobileView = ({ details }) => (
10
- <dl className="ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg">
11
- {details.map((detail, index) => (
12
- <React.Fragment key={index}>
13
- <dt className="ncf__list-title">{detail.title}</dt>
14
- <dd className="ncf__list-data">{detail.data}</dd>
15
- </React.Fragment>
16
- ))}
17
- </dl>
18
- );
19
-
20
- export function LiteSubConfirmation({
21
- productCode = '',
22
- offerName = '',
23
- subscriptionAmount = '',
24
- email = EMAIL_DEFAULT_TEXT,
25
- details = [],
26
- }) {
27
- const detailElements = details && (
28
- <React.Fragment>
29
- <h2 className="ncf__header2--afterline">Your billing details</h2>
30
- <dl className="ncf__list ncf__lite-sub-confirmation--hidden-sm">
31
- {details.map((detail, index) => (
32
- <React.Fragment key={index}>
33
- <dt className="ncf__list-title">{detail.title}</dt>
34
- <dd className="ncf__list-data">{detail.data}</dd>
35
- </React.Fragment>
36
- ))}
37
- </dl>
38
- <DetailsMobileView details={details} />
39
- </React.Fragment>
40
- );
41
-
42
- return (
43
- <div className="ncf ncf__wrapper">
44
- <div className="ncf__center">
45
- <div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
46
- <p className="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
47
- You&apos;ve been upgraded to:
48
- </p>
49
- <h1 className="ncf__header ncf__header--confirmation">
50
- {isPremium(productCode) ? 'Premium Digital' : 'Standard Digital'}
51
- </h1>
52
- </div>
53
- <p className="ncf__paragraph">
54
- Thank you for choosing to subscribe to <strong>{offerName}</strong>. We
55
- are not quite ready to deliver this type of subscription, so we have
56
- upgraded you to a {isPremium(productCode) ? 'Premium' : 'Digital'} 3
57
- month subscription at no additional cost.
58
- </p>
59
- <p className="ncf__paragraph">
60
- For {subscriptionAmount} a month, here&apos;s what your subscription
61
- covers:
62
- </p>
63
- <ul className="ncf__unordered-list">
64
- <li>
65
- Access to stories from over 600 journalists in 50+ countries covering
66
- markets, politics, business, tech and more
67
- </li>
68
- <li>
69
- FirstFT: a daily newsletter with the global stories you need to know
70
- </li>
71
- <li>Share 10 articles per month with colleagues, family and friends</li>
72
- </ul>
73
- <p className="ncf__paragraph">
74
- However, if you would like to cancel your subscription, please contact
75
- our{' '}
76
- <a
77
- className="ncf__link ncf__link--external"
78
- href="https://help.ft.com/contact/"
79
- target="_blank"
80
- rel="noopener noreferrer"
81
- >
82
- customer care team
83
- </a>{' '}
84
- and they will arrange this for you.
85
- </p>
86
- <p className="ncf__center">
87
- <a
88
- href="/"
89
- className="ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
90
- >
91
- Go to FT.com
92
- </a>
93
- </p>
94
- <p className="ncf__paragraph">
95
- We&apos;ve sent confirmation to {email}. Make sure you check your spam
96
- folder if you don’t receive it.
97
- </p>
98
- <p className="ncf__paragraph">
99
- Here&apos;s a summary of your{' '}
100
- {isPremium(productCode) ? 'Premium Digital' : 'Standard Digital'}{' '}
101
- subscription:
102
- </p>
103
-
104
- {detailElements}
105
-
106
- <div className="ncf__headed-paragraph">
107
- <h3 className="ncf__header">Something not right?</h3>
108
- <p className="ncf__paragraph">
109
- Go to your{' '}
110
- <a
111
- className="ncf__link ncf__link--external"
112
- href="https://www.ft.com/myaccount/personal-details"
113
- target="_blank"
114
- rel="noopener noreferrer"
115
- data-trackable="yourAccount"
116
- >
117
- account settings
118
- </a>{' '}
119
- to view or edit your account. If you need to get in touch call us on{' '}
120
- <a href="tel:+18556852372" className="ncf__link ncf__link--external">
121
- +1 855 685 2372
122
- </a>
123
- . Or{' '}
124
- <a
125
- className="ncf__link ncf__link--external"
126
- href="https://help.ft.com/contact/"
127
- target="_blank"
128
- rel="noopener noreferrer"
129
- >
130
- contact us
131
- </a>{' '}
132
- for additional support.
133
- </p>
134
- </div>
135
- </div>
136
- );
137
- }
138
-
139
- LiteSubConfirmation.propTypes = {
140
- offerName: PropTypes.string.isRequired,
141
- subscriptionAmount: PropTypes.string.isRequired,
142
- productCode: PropTypes.string,
143
- email: PropTypes.string,
144
- details: PropTypes.arrayOf(
145
- PropTypes.shape({
146
- title: PropTypes.string.isRequired,
147
- data: PropTypes.string.isRequired,
148
- })
149
- ),
150
- };
@@ -1,33 +0,0 @@
1
- import React from 'react';
2
- import { LiteSubConfirmation } from './lite-sub-confirmation';
3
-
4
- export default {
5
- title: 'Light confirmation',
6
- component: LiteSubConfirmation,
7
- argTypes: {
8
- details: { control: 'array' },
9
- offerType: { control: 'string' },
10
- offerName: { control: 'string' },
11
- },
12
- };
13
-
14
- export const Basic = (args) => <LiteSubConfirmation {...args} />;
15
- Basic.args = {
16
- offerType: 'Premium',
17
- details: [
18
- {
19
- title: 'End Date',
20
- data: 'September 3, 2021',
21
- },
22
- {
23
- title: '3 monthly payments',
24
- data: '$5.00 per month',
25
- },
26
- {
27
- title: 'Payment method',
28
- data: 'Credit / Debit Card',
29
- },
30
- ],
31
- offerName: 'Standard',
32
- subscriptionAmount: '$5',
33
- };
@@ -1,118 +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.LiteSubConfirmation = LiteSubConfirmation;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var EMAIL_DEFAULT_TEXT = 'your email';
11
- var PREMIUM_OFFER = 'P2';
12
- var isPremium = function isPremium(productCode) {
13
- return productCode === PREMIUM_OFFER;
14
- };
15
- var DetailsMobileView = function DetailsMobileView(_ref) {
16
- var details = _ref.details;
17
- return /*#__PURE__*/_react["default"].createElement("dl", {
18
- className: "ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg"
19
- }, details.map(function (detail, index) {
20
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
21
- key: index
22
- }, /*#__PURE__*/_react["default"].createElement("dt", {
23
- className: "ncf__list-title"
24
- }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
25
- className: "ncf__list-data"
26
- }, detail.data));
27
- }));
28
- };
29
- function LiteSubConfirmation(_ref2) {
30
- var _ref2$productCode = _ref2.productCode,
31
- productCode = _ref2$productCode === void 0 ? '' : _ref2$productCode,
32
- _ref2$offerName = _ref2.offerName,
33
- offerName = _ref2$offerName === void 0 ? '' : _ref2$offerName,
34
- _ref2$subscriptionAmo = _ref2.subscriptionAmount,
35
- subscriptionAmount = _ref2$subscriptionAmo === void 0 ? '' : _ref2$subscriptionAmo,
36
- _ref2$email = _ref2.email,
37
- email = _ref2$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref2$email,
38
- _ref2$details = _ref2.details,
39
- details = _ref2$details === void 0 ? [] : _ref2$details;
40
- var detailElements = details && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h2", {
41
- className: "ncf__header2--afterline"
42
- }, "Your billing details"), /*#__PURE__*/_react["default"].createElement("dl", {
43
- className: "ncf__list ncf__lite-sub-confirmation--hidden-sm"
44
- }, details.map(function (detail, index) {
45
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
46
- key: index
47
- }, /*#__PURE__*/_react["default"].createElement("dt", {
48
- className: "ncf__list-title"
49
- }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
50
- className: "ncf__list-data"
51
- }, detail.data));
52
- })), /*#__PURE__*/_react["default"].createElement(DetailsMobileView, {
53
- details: details
54
- }));
55
- return /*#__PURE__*/_react["default"].createElement("div", {
56
- className: "ncf ncf__wrapper"
57
- }, /*#__PURE__*/_react["default"].createElement("div", {
58
- className: "ncf__center"
59
- }, /*#__PURE__*/_react["default"].createElement("div", {
60
- className: "ncf__icon ncf__icon--tick ncf__icon--large"
61
- }), /*#__PURE__*/_react["default"].createElement("p", {
62
- className: "ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation"
63
- }, "You've been upgraded to:"), /*#__PURE__*/_react["default"].createElement("h1", {
64
- className: "ncf__header ncf__header--confirmation"
65
- }, isPremium(productCode) ? 'Premium Digital' : 'Standard Digital')), /*#__PURE__*/_react["default"].createElement("p", {
66
- className: "ncf__paragraph"
67
- }, "Thank you for choosing to subscribe to ", /*#__PURE__*/_react["default"].createElement("strong", null, offerName), ". We are not quite ready to deliver this type of subscription, so we have upgraded you to a ", isPremium(productCode) ? 'Premium' : 'Digital', " 3 month subscription at no additional cost."), /*#__PURE__*/_react["default"].createElement("p", {
68
- className: "ncf__paragraph"
69
- }, "For ", subscriptionAmount, " a month, here's what your subscription covers:"), /*#__PURE__*/_react["default"].createElement("ul", {
70
- className: "ncf__unordered-list"
71
- }, /*#__PURE__*/_react["default"].createElement("li", null, "Access to stories from over 600 journalists in 50+ countries covering markets, politics, business, tech and more"), /*#__PURE__*/_react["default"].createElement("li", null, "FirstFT: a daily newsletter with the global stories you need to know"), /*#__PURE__*/_react["default"].createElement("li", null, "Share 10 articles per month with colleagues, family and friends")), /*#__PURE__*/_react["default"].createElement("p", {
72
- className: "ncf__paragraph"
73
- }, "However, if you would like to cancel your subscription, please contact our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
74
- className: "ncf__link ncf__link--external",
75
- href: "https://help.ft.com/contact/",
76
- target: "_blank",
77
- rel: "noopener noreferrer"
78
- }, "customer care team"), ' ', "and they will arrange this for you."), /*#__PURE__*/_react["default"].createElement("p", {
79
- className: "ncf__center"
80
- }, /*#__PURE__*/_react["default"].createElement("a", {
81
- href: "/",
82
- className: "ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
83
- }, "Go to FT.com")), /*#__PURE__*/_react["default"].createElement("p", {
84
- className: "ncf__paragraph"
85
- }, "We've sent confirmation to ", email, ". Make sure you check your spam folder if you don\u2019t receive it."), /*#__PURE__*/_react["default"].createElement("p", {
86
- className: "ncf__paragraph"
87
- }, "Here's a summary of your", ' ', isPremium(productCode) ? 'Premium Digital' : 'Standard Digital', ' ', "subscription:"), detailElements, /*#__PURE__*/_react["default"].createElement("div", {
88
- className: "ncf__headed-paragraph"
89
- }, /*#__PURE__*/_react["default"].createElement("h3", {
90
- className: "ncf__header"
91
- }, "Something not right?"), /*#__PURE__*/_react["default"].createElement("p", {
92
- className: "ncf__paragraph"
93
- }, "Go to your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
94
- className: "ncf__link ncf__link--external",
95
- href: "https://www.ft.com/myaccount/personal-details",
96
- target: "_blank",
97
- rel: "noopener noreferrer",
98
- "data-trackable": "yourAccount"
99
- }, "account settings"), ' ', "to view or edit your account. If you need to get in touch call us on", ' ', /*#__PURE__*/_react["default"].createElement("a", {
100
- href: "tel:+18556852372",
101
- className: "ncf__link ncf__link--external"
102
- }, "+1 855 685 2372"), ". Or", ' ', /*#__PURE__*/_react["default"].createElement("a", {
103
- className: "ncf__link ncf__link--external",
104
- href: "https://help.ft.com/contact/",
105
- target: "_blank",
106
- rel: "noopener noreferrer"
107
- }, "contact us"), ' ', "for additional support.")));
108
- }
109
- LiteSubConfirmation.propTypes = {
110
- offerName: _propTypes["default"].string.isRequired,
111
- subscriptionAmount: _propTypes["default"].string.isRequired,
112
- productCode: _propTypes["default"].string,
113
- email: _propTypes["default"].string,
114
- details: _propTypes["default"].arrayOf(_propTypes["default"].shape({
115
- title: _propTypes["default"].string.isRequired,
116
- data: _propTypes["default"].string.isRequired
117
- }))
118
- };
@@ -1,38 +0,0 @@
1
- @mixin ncfLiteSubsConfirmation() {
2
- &__lite-sub-confirmation {
3
- &--lite-sub-cta {
4
- width: 240px;
5
- }
6
-
7
- &--hidden-sm {
8
- @include oGridRespondTo($from: S, $until: M) {
9
- display: none;
10
- }
11
- }
12
-
13
- &--hidden-md,
14
- &--hidden-lg {
15
- @include oGridRespondTo($from: M) {
16
- display: none !important; /* It is important to hide DetailsMobileView on medium and large screens. */
17
- }
18
- }
19
- }
20
-
21
- &__lite-sub__details {
22
- display: inline;
23
-
24
- &--description::before {
25
- content: " ";
26
- }
27
-
28
- & .ncf__list-data {
29
- width: 100%;
30
- margin-top: 0;
31
- margin-bottom: 0;
32
- }
33
-
34
- & .ncf__list-title {
35
- margin-bottom: 0;
36
- }
37
- }
38
- }