@financial-times/n-conversion-forms 32.12.0 → 33.0.0

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "c7bf91fc151991e214cb6ee5d430825c6f9adefa",
-  "tag": "v32.12.0"
+  "version": "a095aefdcff4fca917872327a21f932adbf4b010",
+  "tag": "v33.0.0"
 }

package/components/__snapshots__/package-change.spec.js.snap

@@ -1,20 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PackageChange annual render when is7DayPassExperiment is true 1`] = `
-<div class="ncf__package-change">
-  <div class="ncf__package-change__package">
-    <div class="ncf__package-change__content">
-      <p>
-        You have chosen
-        <span class="ncf__strong">
-          Trial
-        </span>
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`PackageChange annual render with defaults 1`] = `
 <div class="ncf__package-change">
   <div class="ncf__package-change__package">

package/components/accept-terms-subscription.jsx

@@ -9,7 +9,6 @@ export function AcceptTermsSubscription({
 	isTrial = false,
 	isPrintProduct = false,
 	isSingleTerm = false,
-	is7DayPassExperiment = false,
 	isTermedSubscriptionTermType = false,
 	isTransition = false,
 	transitionType = null,
@@ -39,56 +38,6 @@ export function AcceptTermsSubscription({
 		required: true,
 	};
 
-	if (is7DayPassExperiment) {
-		return (
-			<div {...divProps}>
-				<ul className="o-typography-list ncf__accept-terms-list">
-					<li>
-						<span className="terms-transition terms-transition--immediate">
-							I give consent for my chosen payment method to be charged
-							automatically.
-						</span>
-					</li>
-					<li>
-						<span className="terms-transition terms-transition--immediate">
-							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.
-						</span>
-					</li>
-					<li>
-						<span className="terms-transition">
-							Please see here for the complete{' '}
-							<a
-								className="ncf__link--external"
-								href="http://help.ft.com/help/legal-privacy/terms-conditions/"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Terms &amp; Conditions
-							</a>
-							.
-						</span>
-					</li>
-				</ul>
-				<label className={labelClassName} htmlFor="termsAcceptance">
-					<input {...inputProps} />
-					<span className="o-forms-input__label">
-						I agree to the above terms &amp; conditions.
-					</span>
-					<p className="o-forms-input__error">
-						Please accept our terms &amp; conditions
-					</p>
-				</label>
-			</div>
-		);
-	}
-
 	if (isTermedSubscriptionTermType) {
 		return (
 			<div {...divProps}>
@@ -309,7 +258,6 @@ AcceptTermsSubscription.propTypes = {
 	isTrial: PropTypes.bool,
 	isPrintProduct: PropTypes.bool,
 	isSingleTerm: PropTypes.bool,
-	is7DayPassExperiment: PropTypes.bool,
 	isTermedSubscriptionTermType: PropTypes.bool,
 	isTransition: PropTypes.bool,
 	transitionType: PropTypes.string,

package/components/index.js

@@ -49,7 +49,6 @@ export { Province } from './province';
 export { RegistrationConfirmation } from './registration-confirmation';
 export { Responsibility } from './responsibility';
 export { Section } from './section';
-export { SevenDayPassExperimentConfirmation } from './seven-day-pass-experiment-confirmation';
 export { State } from './state';
 export { Submit } from './submit';
 export { TrialBanner } from './trial-banner';

package/components/package-change.jsx

@@ -5,7 +5,6 @@ export function PackageChange({
 	changePackageUrl,
 	currentPackage,
 	packageDescription,
-	is7DayPassExperiment,
 }) {
 	return (
 		<div className="ncf__package-change">
@@ -21,17 +20,15 @@ export function PackageChange({
 						</p>
 					)}
 				</div>
-				{!is7DayPassExperiment && (
-					<div className="ncf__package-change__actions">
-						<a
-							href={changePackageUrl}
-							className="ncf__button ncf__button--mono ncf__button--baseline"
-							data-trackable="change"
-						>
-							Change
-						</a>
-					</div>
-				)}
+				<div className="ncf__package-change__actions">
+					<a
+						href={changePackageUrl}
+						className="ncf__button ncf__button--mono ncf__button--baseline"
+						data-trackable="change"
+					>
+						Change
+					</a>
+				</div>
 			</div>
 		</div>
 	);
@@ -41,5 +38,4 @@ PackageChange.propTypes = {
 	changePackageUrl: PropTypes.string.isRequired,
 	currentPackage: PropTypes.string.isRequired,
 	packageDescription: PropTypes.string,
-	is7DayPassExperiment: PropTypes.bool,
 };

package/components/package-change.spec.js

@@ -74,23 +74,6 @@ describe('PackageChange', () => {
 
 				expect(PackageChange).toRenderCorrectly(props);
 			});
-
-			it('render when is7DayPassExperiment is true', () => {
-				const props = {
-					changePackageUrl: 'https://www.ft.com',
-					currentPackage: 'Trial',
-					is7DayPassExperiment: true,
-					terms: [
-						{
-							name: term,
-							price: '£4.99',
-							weeklyPrice: '£4.99',
-						},
-					],
-				};
-
-				expect(PackageChange).toRenderCorrectly(props);
-			});
 		});
 	});
 });

package/components/package-change.stories.js

@@ -18,11 +18,3 @@ WithPackageDescription.args = {
 	changePackageUrl: 'https://ft.com/products',
 	packageDescription: 'Personalised email briefings and alerts',
 };
-
-export const SevenDayPassExperiment = (args) => <PackageChange {...args} />;
-SevenDayPassExperiment.args = {
-	currentPackage: 'Premium Digital',
-	changePackageUrl: 'https://ft.com/products',
-	packageDescription: 'Personalised email briefings and alerts',
-	is7DayPassExperiment: true,
-};

package/components/payment-term.jsx

@@ -15,7 +15,6 @@ export function PaymentTerm({
 	largePrice = false,
 	optionsInARow = false,
 	billingCountry = '',
-	is7DayPassExperiment = false,
 	isTermedSubscriptionTermType = false,
 	isTrialOfferAsNonTrialOverride = false,
 	labelOverride = '', // this is a temporary hack for the February 2024 campaign
@@ -121,22 +120,11 @@ export function PaymentTerm({
 		},
 		monthly: {
 			title: 'Monthly',
-			price: (price, is7DayPassExperiment) => {
-				const paymentIntervalTextToDisplay = (() => {
-					if (is7DayPassExperiment) {
-						return ' one-time payment';
-					}
-
-					return ' per month';
-				})();
-
-				return (
-					<React.Fragment>
-						<span className="ncf__payment-term__price">{price}</span>
-						{paymentIntervalTextToDisplay}
-					</React.Fragment>
-				);
-			},
+			price: (price) => (
+				<React.Fragment>
+					<span className="ncf__payment-term__price">{price}</span> per month
+				</React.Fragment>
+			),
 			trialPrice: (price) => (
 				<React.Fragment>
 					Unless you cancel during your trial you will be billed{' '}
@@ -146,17 +134,9 @@ export function PaymentTerm({
 			),
 			monthlyPrice: () => {},
 			renewsText: (isFixedTermOffer) => {
-				const textToDisplay = (() => {
-					if (is7DayPassExperiment) {
-						return 'This subscription is for 7 days, charged at the outset.';
-					}
-
-					if (isFixedTermOffer) {
-						return 'This subscription is for 3 months, charged monthly. You can cancel at anytime';
-					}
-
-					return 'Renews monthly unless cancelled';
-				})();
+				const textToDisplay = isFixedTermOffer
+					? 'This subscription is for 3 months, charged monthly. You can cancel at anytime'
+					: 'Renews monthly unless cancelled';
 
 				return (
 					<p className="ncf__payment-term__renews-text">{textToDisplay}</p>
@@ -253,12 +233,9 @@ export function PaymentTerm({
 				<React.Fragment>
 					{nameMap[option.name] ? (
 						<div className="ncf__payment-term__description">
-							{nameMap[option.name].price(option.price, is7DayPassExperiment)}
+							{nameMap[option.name].price(option.price)}
 							{nameMap[option.name].monthlyPrice(option.monthlyPrice)}
-							{nameMap[option.name].renewsText(
-								isFixedTermOffer,
-								is7DayPassExperiment
-							)}
+							{nameMap[option.name].renewsText(isFixedTermOffer)}
 							{/* Remove this discount text temporarily in favour of monthly price */}
 							{/* <br />Save up to 25% when you pay annually */}
 						</div>
@@ -310,20 +287,11 @@ export function PaymentTerm({
 				return labelOverride;
 			}
 
-			const defaultTitle = (() => {
-				if (is7DayPassExperiment) {
-					return '';
-				}
-
-				if (Boolean(option.name && nameMap[option.name])) {
-					return nameMap[option.name].title;
-				}
-
-				return '';
-			})();
+			const defaultTitle =
+				option.name && nameMap[option.name] ? nameMap[option.name].title : '';
 
 			const title = isFixedTermOffer
-				? [offerDisplayName, defaultTitle].filter(Boolean).join(' - ')
+				? `${offerDisplayName} - ${defaultTitle}`
 				: defaultTitle;
 
 			let termDisplayName = '';

package/components/payment-term.spec.js

@@ -153,37 +153,6 @@ describe('PaymentTerm', () => {
 		});
 	});
 
-	describe('given is7DayPassExperiment is true', () => {
-		const options = [
-			{
-				name: 'monthly',
-				price: '$5.00',
-				value: 'monthly',
-				monthlyPrice: '$5.00',
-			},
-		];
-		const wrapper = shallow(
-			<PaymentTerm
-				isFixedTermOffer={true}
-				options={options}
-				offerDisplayName="7-day pass"
-				is7DayPassExperiment={true}
-			/>
-		);
-
-		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', () => {
-			expect(wrapper.find('.ncf__payment-term__renews-text').text()).toMatch(
-				/This subscription is for 7 days, charged at the outset./
-			);
-		});
-
-		it('renders offer name and omits payment term title', () => {
-			expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
-				'7-day pass'
-			);
-		});
-	});
-
 	describe('given isTermedSubscriptionTermType is true', () => {
 		describe('options include duration expressed in weeks', () => {
 			const options = [
@@ -299,22 +268,6 @@ describe('PaymentTerm', () => {
 				);
 			});
 		});
-		describe('7-day pass experiment', () => {
-			const options = [
-				{
-					...baseOptions,
-					isTrial: false,
-				},
-			];
-			it('renders with time period only if trial.option == false', () => {
-				const wrapper = shallow(
-					<PaymentTerm options={options} is7DayPassExperiment={true} />
-				);
-				expect(wrapper.find('.ncf__payment-term__label').text().trim()).toMatch(
-					'£20.00 one-time paymentThis subscription is for 7 days, charged at the outset.'
-				);
-			});
-		});
 	});
 
 	describe('[data-base-amount]', () => {

package/components/payment-term.stories.js

@@ -109,26 +109,6 @@ FixedTermOffer.args = {
 	offerDisplayName: 'Mix & Match',
 };
 
-export const SevenDayPassExperimentOffer = (args) => (
-	<div className="ncf">
-		<Fieldset>
-			<PaymentTerm {...args} />
-		</Fieldset>
-	</div>
-);
-SevenDayPassExperimentOffer.args = {
-	options: [
-		{
-			name: 'monthly',
-			price: '$5.00',
-			value: 5.0,
-		},
-	],
-	isFixedTermOffer: true,
-	is7DayPassExperiment: true,
-	offerDisplayName: '7-day pass',
-};
-
 export const TermedSubscriptionTermType = (args) => (
 	<div className="ncf">
 		<Fieldset>

package/dist/accept-terms-subscription.jsx

@@ -24,8 +24,6 @@ function AcceptTermsSubscription(_ref) {
     isPrintProduct = _ref$isPrintProduct === void 0 ? false : _ref$isPrintProduct,
     _ref$isSingleTerm = _ref.isSingleTerm,
     isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
-    _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
-    is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi,
     _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
     isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
     _ref$isTransition = _ref.isTransition,
@@ -53,29 +51,6 @@ function AcceptTermsSubscription(_ref) {
     'aria-required': 'true',
     required: true
   };
-  if (is7DayPassExperiment) {
-    return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
-      className: "o-typography-list ncf__accept-terms-list"
-    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "terms-transition terms-transition--immediate"
-    }, "I give consent for my chosen payment method to be charged automatically.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "terms-transition terms-transition--immediate"
-    }, "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", {
-      className: "terms-transition"
-    }, "Please see here for the complete", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-      className: "ncf__link--external",
-      href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
-      target: "_blank",
-      rel: "noopener noreferrer"
-    }, "Terms & Conditions"), "."))), /*#__PURE__*/_react["default"].createElement("label", {
-      className: labelClassName,
-      htmlFor: "termsAcceptance"
-    }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
-      className: "o-forms-input__label"
-    }, "I agree to the above terms & conditions."), /*#__PURE__*/_react["default"].createElement("p", {
-      className: "o-forms-input__error"
-    }, "Please accept our terms & conditions")));
-  }
   if (isTermedSubscriptionTermType) {
     return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
       className: "o-typography-list ncf__accept-terms-list"
@@ -168,7 +143,6 @@ AcceptTermsSubscription.propTypes = {
   isTrial: _propTypes["default"].bool,
   isPrintProduct: _propTypes["default"].bool,
   isSingleTerm: _propTypes["default"].bool,
-  is7DayPassExperiment: _propTypes["default"].bool,
   isTermedSubscriptionTermType: _propTypes["default"].bool,
   isTransition: _propTypes["default"].bool,
   transitionType: _propTypes["default"].string,

package/dist/index.js

@@ -339,12 +339,6 @@ Object.defineProperty(exports, "Section", {
     return _section.Section;
   }
 });
-Object.defineProperty(exports, "SevenDayPassExperimentConfirmation", {
-  enumerable: true,
-  get: function get() {
-    return _sevenDayPassExperimentConfirmation.SevenDayPassExperimentConfirmation;
-  }
-});
 Object.defineProperty(exports, "State", {
   enumerable: true,
   get: function get() {
@@ -420,7 +414,6 @@ var _province = require("./province");
 var _registrationConfirmation = require("./registration-confirmation");
 var _responsibility = require("./responsibility");
 var _section = require("./section");
-var _sevenDayPassExperimentConfirmation = require("./seven-day-pass-experiment-confirmation");
 var _state = require("./state");
 var _submit = require("./submit");
 var _trialBanner = require("./trial-banner");

package/dist/package-change.jsx

@@ -10,8 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function PackageChange(_ref) {
   var changePackageUrl = _ref.changePackageUrl,
     currentPackage = _ref.currentPackage,
-    packageDescription = _ref.packageDescription,
-    is7DayPassExperiment = _ref.is7DayPassExperiment;
+    packageDescription = _ref.packageDescription;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__package-change"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -22,7 +21,7 @@ function PackageChange(_ref) {
     className: "ncf__strong"
   }, currentPackage)), packageDescription && /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__package-change__content__description"
-  }, packageDescription)), !is7DayPassExperiment && /*#__PURE__*/_react["default"].createElement("div", {
+  }, packageDescription)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__package-change__actions"
   }, /*#__PURE__*/_react["default"].createElement("a", {
     href: changePackageUrl,
@@ -33,6 +32,5 @@ function PackageChange(_ref) {
 PackageChange.propTypes = {
   changePackageUrl: _propTypes["default"].string.isRequired,
   currentPackage: _propTypes["default"].string.isRequired,
-  packageDescription: _propTypes["default"].string,
-  is7DayPassExperiment: _propTypes["default"].bool
+  packageDescription: _propTypes["default"].string
 };

package/dist/payment-term.jsx

@@ -34,8 +34,6 @@ function PaymentTerm(_ref) {
     optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow,
     _ref$billingCountry = _ref.billingCountry,
     billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry,
-    _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
-    is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi,
     _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
     isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
     _ref$isTrialOfferAsNo = _ref.isTrialOfferAsNonTrialOverride,
@@ -133,16 +131,10 @@ function PaymentTerm(_ref) {
     },
     monthly: {
       title: 'Monthly',
-      price: function price(_price3, is7DayPassExperiment) {
-        var paymentIntervalTextToDisplay = function () {
-          if (is7DayPassExperiment) {
-            return ' one-time payment';
-          }
-          return ' per month';
-        }();
+      price: function price(_price3) {
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
           className: "ncf__payment-term__price"
-        }, _price3), paymentIntervalTextToDisplay);
+        }, _price3), " per month");
       },
       trialPrice: function trialPrice(price) {
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
@@ -151,15 +143,7 @@ function PaymentTerm(_ref) {
       },
       monthlyPrice: function monthlyPrice() {},
       renewsText: function renewsText(isFixedTermOffer) {
-        var textToDisplay = function () {
-          if (is7DayPassExperiment) {
-            return 'This subscription is for 7 days, charged at the outset.';
-          }
-          if (isFixedTermOffer) {
-            return 'This subscription is for 3 months, charged monthly. You can cancel at anytime';
-          }
-          return 'Renews monthly unless cancelled';
-        }();
+        var textToDisplay = isFixedTermOffer ? 'This subscription is for 3 months, charged monthly. You can cancel at anytime' : 'Renews monthly unless cancelled';
         return /*#__PURE__*/_react["default"].createElement("p", {
           className: "ncf__payment-term__renews-text"
         }, textToDisplay);
@@ -221,7 +205,7 @@ function PaymentTerm(_ref) {
         className: "ncf__payment-term__trial-price"
       }, 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", {
         className: "ncf__payment-term__description"
-      }, nameMap[option.name].price(option.price, is7DayPassExperiment), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(isFixedTermOffer, is7DayPassExperiment)) :
+      }, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(isFixedTermOffer)) :
       // this should cover the cases different than annual, quarterly and monthly
       // for those containing period on option.value, render custom template, for the rest keep legacy render
       isValidPeriod(option.value) ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -244,16 +228,8 @@ function PaymentTerm(_ref) {
       if (isTrialOfferAsNonTrialOverride && labelOverride) {
         return labelOverride;
       }
-      var defaultTitle = function () {
-        if (is7DayPassExperiment) {
-          return '';
-        }
-        if (Boolean(option.name && nameMap[option.name])) {
-          return nameMap[option.name].title;
-        }
-        return '';
-      }();
-      var title = isFixedTermOffer ? [offerDisplayName, defaultTitle].filter(Boolean).join(' - ') : defaultTitle;
+      var defaultTitle = option.name && nameMap[option.name] ? nameMap[option.name].title : '';
+      var title = isFixedTermOffer ? "".concat(offerDisplayName, " - ").concat(defaultTitle) : defaultTitle;
       var termDisplayName = '';
       if (showTrialCopyInTitle) {
         var termName = option.displayName ? option.displayName : 'Premium Digital';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "32.12.0",
+  "version": "33.0.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {

package/components/seven-day-pass-experiment-confirmation.jsx

@@ -1,110 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const DetailsMobileView = ({ details }) => (
-	<dl className="ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg">
-		{details.map((detail, index) => (
-			<React.Fragment key={index}>
-				<dt className="ncf__list-title">{detail.title}</dt>
-				<dd className="ncf__list-data">{detail.data}</dd>
-			</React.Fragment>
-		))}
-	</dl>
-);
-
-export function SevenDayPassExperimentConfirmation({
-	offerName = '',
-	details = [],
-}) {
-	const detailElements = details && (
-		<React.Fragment>
-			<h2 className="ncf__header2--afterline">Your billing details</h2>
-			<dl className="ncf__list ncf__lite-sub-confirmation--hidden-sm">
-				{details.map((detail, index) => (
-					<React.Fragment key={index}>
-						<dt className="ncf__list-title">{detail.title}</dt>
-						<dd className="ncf__list-data">{detail.data}</dd>
-					</React.Fragment>
-				))}
-			</dl>
-			<DetailsMobileView details={details} />
-		</React.Fragment>
-	);
-
-	return (
-		<div className="ncf ncf__wrapper">
-			<div className="ncf__center">
-				<div className="ncf__icon ncf__icon--tick ncf__icon--large"></div>
-				<p className="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
-					You are now subscribed to:
-				</p>
-				<h1 className="ncf__header ncf__header--confirmation">
-					{'Premium Digital'}
-				</h1>
-			</div>
-			<p className="ncf__paragraph">
-				Exciting news! You are one of the first to try a{' '}
-				<strong>{offerName}</strong>. As a thank you, we are pleased to extend
-				your subscription to one month at no additional cost.
-			</p>
-			<p className="ncf__center">
-				<a
-					href="/"
-					className="ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
-				>
-					Go to FT.com
-				</a>
-			</p>
-			<p className="ncf__paragraph">
-				Please save or print this page for your records as your purchase
-				confirmation.
-			</p>
-
-			<p className="ncf__paragraph">
-				Here&apos;s a summary of your Premium Digital subscription:
-			</p>
-
-			{detailElements}
-
-			<div className="ncf__headed-paragraph">
-				<h3 className="ncf__header">Something not right?</h3>
-				<p className="ncf__paragraph">
-					Go to your{' '}
-					<a
-						className="ncf__link ncf__link--external"
-						href="https://www.ft.com/myaccount/personal-details"
-						target="_blank"
-						rel="noopener noreferrer"
-						data-trackable="yourAccount"
-					>
-						account settings
-					</a>{' '}
-					to view or edit your account. If you need to get in touch call us on{' '}
-					<a href="tel:+442077556248" className="ncf__link ncf__link--external">
-						+44 20 7755 6248
-					</a>
-					. Or{' '}
-					<a
-						className="ncf__link ncf__link--external"
-						href="https://help.ft.com/contact/"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						contact us
-					</a>{' '}
-					for additional support.
-				</p>
-			</div>
-		</div>
-	);
-}
-
-SevenDayPassExperimentConfirmation.propTypes = {
-	offerName: PropTypes.string.isRequired,
-	details: PropTypes.arrayOf(
-		PropTypes.shape({
-			title: PropTypes.string.isRequired,
-			data: PropTypes.string.isRequired,
-		})
-	),
-};

package/components/seven-day-pass-experiment-confirmation.stories.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { SevenDayPassExperimentConfirmation } from './seven-day-pass-experiment-confirmation';
-
-export default {
-	title: '7-day pass experiment confirmation',
-	component: SevenDayPassExperimentConfirmation,
-	argTypes: {
-		details: { control: 'array' },
-		offerType: { control: 'string' },
-		offerName: { control: 'string' },
-	},
-};
-
-export const Basic = (args) => <SevenDayPassExperimentConfirmation {...args} />;
-Basic.args = {
-	offerType: 'Premium',
-	details: [
-		{
-			title: 'End Date',
-			data: 'September 18, 2023',
-		},
-		{
-			title: 'One-time payment',
-			data: '£4.99',
-		},
-		{
-			title: 'Payment method',
-			data: 'Credit / Debit Card',
-		},
-	],
-	offerName: '7-day pass',
-	subscriptionAmount: '£4.99',
-};

package/dist/seven-day-pass-experiment-confirmation.jsx

@@ -1,93 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SevenDayPassExperimentConfirmation = SevenDayPassExperimentConfirmation;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var DetailsMobileView = function DetailsMobileView(_ref) {
-  var details = _ref.details;
-  return /*#__PURE__*/_react["default"].createElement("dl", {
-    className: "ncf__list ncf__lite-sub__details ncf__lite-sub-confirmation--hidden-md ncf__lite-sub-confirmation--hidden-lg"
-  }, details.map(function (detail, index) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-      key: index
-    }, /*#__PURE__*/_react["default"].createElement("dt", {
-      className: "ncf__list-title"
-    }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
-      className: "ncf__list-data"
-    }, detail.data));
-  }));
-};
-function SevenDayPassExperimentConfirmation(_ref2) {
-  var _ref2$offerName = _ref2.offerName,
-    offerName = _ref2$offerName === void 0 ? '' : _ref2$offerName,
-    _ref2$details = _ref2.details,
-    details = _ref2$details === void 0 ? [] : _ref2$details;
-  var detailElements = details && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h2", {
-    className: "ncf__header2--afterline"
-  }, "Your billing details"), /*#__PURE__*/_react["default"].createElement("dl", {
-    className: "ncf__list ncf__lite-sub-confirmation--hidden-sm"
-  }, details.map(function (detail, index) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-      key: index
-    }, /*#__PURE__*/_react["default"].createElement("dt", {
-      className: "ncf__list-title"
-    }, detail.title), /*#__PURE__*/_react["default"].createElement("dd", {
-      className: "ncf__list-data"
-    }, detail.data));
-  })), /*#__PURE__*/_react["default"].createElement(DetailsMobileView, {
-    details: details
-  }));
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf ncf__wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__center"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__icon ncf__icon--tick ncf__icon--large"
-  }), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation"
-  }, "You are now subscribed to:"), /*#__PURE__*/_react["default"].createElement("h1", {
-    className: "ncf__header ncf__header--confirmation"
-  }, 'Premium Digital')), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
-  }, "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", {
-    className: "ncf__center"
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    href: "/",
-    className: "ncf__button ncf__button--submit ncf__button--margin ncf__lite-sub-confirmation--lite-sub-cta"
-  }, "Go to FT.com")), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
-  }, "Please save or print this page for your records as your purchase confirmation."), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
-  }, "Here's a summary of your Premium Digital subscription:"), detailElements, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__headed-paragraph"
-  }, /*#__PURE__*/_react["default"].createElement("h3", {
-    className: "ncf__header"
-  }, "Something not right?"), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph"
-  }, "Go to your", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link ncf__link--external",
-    href: "https://www.ft.com/myaccount/personal-details",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    "data-trackable": "yourAccount"
-  }, "account settings"), ' ', "to view or edit your account. If you need to get in touch call us on", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    href: "tel:+442077556248",
-    className: "ncf__link ncf__link--external"
-  }, "+44 20 7755 6248"), ". Or", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link ncf__link--external",
-    href: "https://help.ft.com/contact/",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "contact us"), ' ', "for additional support.")));
-}
-SevenDayPassExperimentConfirmation.propTypes = {
-  offerName: _propTypes["default"].string.isRequired,
-  details: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    title: _propTypes["default"].string.isRequired,
-    data: _propTypes["default"].string.isRequired
-  }))
-};