@financial-times/n-conversion-forms 32.0.0 → 32.3.2

package/.eslintignore

@@ -2,3 +2,5 @@
 /dist
 /.eslintrc.js
 /public
+secret-squirrel.js
+secret-squirrel.cjs

package/.toolkitrc.yml

@@ -5,11 +5,9 @@ plugins:
   - "@dotcom-tool-kit/eslint"
   - "@dotcom-tool-kit/prettier"
   - "@dotcom-tool-kit/lint-staged"
+  - "@dotcom-tool-kit/husky-npm"
   - './toolkit/run-storybook'
 hooks:
-  git:precommit:
-    - SecretSquirrel
-    - LintStaged
   test:local:
     - Eslint
     - JestLocal

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "a19d57d84173cfb0a14e4247f2cd3b902f6a338c",
-  "tag": "v32.0.0"
+  "version": "dbf4d85ef93c98eced9c5d9293344ff7542f492d",
+  "tag": "v32.3.2"
 }

package/components/__snapshots__/delivery-option.spec.js.snap

@@ -70,7 +70,7 @@ exports[`DeliveryOption renders with a context of being single 1`] = `
           Paper vouchers
         </span>
         <div class="ncf__delivery-option__description">
-          13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.
+          13-week voucher pack delivered quarterly and redeemable at retailers nationwide.
         </div>
       </span>
     </label>
@@ -85,7 +85,7 @@ exports[`DeliveryOption renders with a context of being single 1`] = `
       >
       <span class="o-forms-input__label ncf__delivery-option__label">
         <span class="ncf__delivery-option__title o-forms-title__main">
-          Home delivery
+          Hand delivery
         </span>
         <div class="ncf__delivery-option__description">
           Free delivery to your home or office before 7am.
@@ -166,7 +166,7 @@ exports[`DeliveryOption renders with minimum mandatory props 1`] = `
           Paper vouchers
         </span>
         <div class="ncf__delivery-option__description">
-          13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.
+          13-week voucher pack delivered quarterly and redeemable at retailers nationwide.
         </div>
       </span>
     </label>
@@ -181,7 +181,7 @@ exports[`DeliveryOption renders with minimum mandatory props 1`] = `
       >
       <span class="o-forms-input__label ncf__delivery-option__label">
         <span class="ncf__delivery-option__title o-forms-title__main">
-          Home delivery
+          Hand delivery
         </span>
         <div class="ncf__delivery-option__description">
           Free delivery to your home or office before 7am.
@@ -232,7 +232,7 @@ exports[`DeliveryOption renders without unrecognised delivery options 1`] = `
           Paper vouchers
         </span>
         <div class="ncf__delivery-option__description">
-          13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.
+          13-week voucher pack delivered quarterly and redeemable at retailers nationwide.
         </div>
       </span>
     </label>
@@ -247,7 +247,7 @@ exports[`DeliveryOption renders without unrecognised delivery options 1`] = `
       >
       <span class="o-forms-input__label ncf__delivery-option__label">
         <span class="ncf__delivery-option__title o-forms-title__main">
-          Home delivery
+          Hand delivery
         </span>
         <div class="ncf__delivery-option__description">
           Free delivery to your home or office before 7am.

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

@@ -1,5 +1,20 @@
 // 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,6 +9,7 @@ export function AcceptTermsSubscription({
 	isTrial = false,
 	isPrintProduct = false,
 	isSingleTerm = false,
+	is7DayPassExperiment = false,
 	isTransition = false,
 	transitionType = null,
 	isDeferredBilling = false,
@@ -37,6 +38,56 @@ 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>
+		);
+	}
+
 	const transitionTerms = isTransition && (
 		<>
 			{!isSingleTerm && (
@@ -209,6 +260,7 @@ AcceptTermsSubscription.propTypes = {
 	isTrial: PropTypes.bool,
 	isPrintProduct: PropTypes.bool,
 	isSingleTerm: PropTypes.bool,
+	is7DayPassExperiment: PropTypes.bool,
 	isTransition: PropTypes.bool,
 	transitionType: PropTypes.string,
 	isDeferredBilling: PropTypes.bool,

package/components/accept-terms-subscription.stories.js

@@ -24,28 +24,28 @@ PrintProductTrial.args = {
 	isTrial: true,
 };
 
-export const isSingleTerm = (args) => <AcceptTermsSubscription {...args} />;
+export const IsSingleTerm = (args) => <AcceptTermsSubscription {...args} />;
 
-isSingleTerm.args = {
+IsSingleTerm.args = {
 	isSingleTerm: true,
 };
 
-export const isTransition = (args) => <AcceptTermsSubscription {...args} />;
+export const IsTransition = (args) => <AcceptTermsSubscription {...args} />;
 
-isTransition.args = {
+IsTransition.args = {
 	isTransition: true,
 };
 
-export const transitionType = (args) => <AcceptTermsSubscription {...args} />;
+export const TransitionType = (args) => <AcceptTermsSubscription {...args} />;
 
-transitionType.args = {
+TransitionType.args = {
 	transitionType: true,
 };
 
-export const isDeferredBilling = (args) => (
+export const IsDeferredBilling = (args) => (
 	<AcceptTermsSubscription {...args} />
 );
 
-isDeferredBilling.args = {
+IsDeferredBilling.args = {
 	isDeferredBilling: true,
 };

package/components/index.js

@@ -49,6 +49,7 @@ 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,6 +5,7 @@ export function PackageChange({
 	changePackageUrl,
 	currentPackage,
 	packageDescription,
+	is7DayPassExperiment,
 }) {
 	return (
 		<div className="ncf__package-change">
@@ -20,15 +21,17 @@ export function PackageChange({
 						</p>
 					)}
 				</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>
+				{!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>
 		</div>
 	);
@@ -38,4 +41,5 @@ PackageChange.propTypes = {
 	changePackageUrl: PropTypes.string.isRequired,
 	currentPackage: PropTypes.string.isRequired,
 	packageDescription: PropTypes.string,
+	is7DayPassExperiment: PropTypes.bool,
 };

package/components/package-change.spec.js

@@ -74,6 +74,23 @@ 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,3 +18,11 @@ 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,6 +15,7 @@ export function PaymentTerm({
 	largePrice = false,
 	optionsInARow = false,
 	billingCountry = '',
+	is7DayPassExperiment = false,
 }) {
 	/**
 	 * Compute monthly price for given term name
@@ -107,11 +108,22 @@ export function PaymentTerm({
 		},
 		monthly: {
 			title: 'Monthly',
-			price: (price) => (
-				<React.Fragment>
-					<span className="ncf__payment-term__price">{price}</span> per month
-				</React.Fragment>
-			),
+			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>
+				);
+			},
 			trialPrice: (price) => (
 				<React.Fragment>
 					Unless you cancel during your trial you will be billed{' '}
@@ -121,9 +133,17 @@ export function PaymentTerm({
 			),
 			monthlyPrice: () => {},
 			renewsText: (isFixedTermOffer) => {
-				const textToDisplay = isFixedTermOffer
-					? 'This subscription is for 3 months, charged monthly. You can cancel at anytime'
-					: 'Renews monthly unless cancelled';
+				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';
+				})();
 
 				return (
 					<p className="ncf__payment-term__renews-text">{textToDisplay}</p>
@@ -219,9 +239,12 @@ export function PaymentTerm({
 				<React.Fragment>
 					{nameMap[option.name] ? (
 						<div className="ncf__payment-term__description">
-							{nameMap[option.name].price(option.price)}
+							{nameMap[option.name].price(option.price, is7DayPassExperiment)}
 							{nameMap[option.name].monthlyPrice(option.monthlyPrice)}
-							{nameMap[option.name].renewsText(isFixedTermOffer)}
+							{nameMap[option.name].renewsText(
+								isFixedTermOffer,
+								is7DayPassExperiment
+							)}
 							{/* Remove this discount text temporarily in favour of monthly price */}
 							{/* <br />Save up to 25% when you pay annually */}
 						</div>
@@ -263,11 +286,20 @@ export function PaymentTerm({
 			const showTrialCopyInTitle =
 				option.isTrial && !isPrintOrBundle && !isEpaper;
 
-			const defaultTitle =
-				option.name && nameMap[option.name] ? nameMap[option.name].title : '';
+			const defaultTitle = (() => {
+				if (is7DayPassExperiment) {
+					return '';
+				}
+
+				if (Boolean(option.name && nameMap[option.name])) {
+					return nameMap[option.name].title;
+				}
+
+				return '';
+			})();
 
 			const title = isFixedTermOffer
-				? `${offerDisplayName} - ${defaultTitle}`
+				? [offerDisplayName, defaultTitle].filter(Boolean).join(' - ')
 				: defaultTitle;
 
 			let termDisplayName = '';

package/components/payment-term.spec.js

@@ -153,6 +153,37 @@ 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('getDisplayName', () => {
 		const baseOptions = {
 			name: 'monthly',
@@ -199,6 +230,22 @@ 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,6 +109,26 @@ 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 RenewOffers = (args) => (
 	<div className="ncf">
 		<Fieldset>

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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,33 @@
+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/accept-terms-subscription.jsx

@@ -24,6 +24,8 @@ 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$isTransition = _ref.isTransition,
     isTransition = _ref$isTransition === void 0 ? false : _ref$isTransition,
     _ref$transitionType = _ref.transitionType,
@@ -49,6 +51,29 @@ 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")));
+  }
   var transitionTerms = isTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isSingleTerm && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition"
   }, "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", {
@@ -118,6 +143,7 @@ AcceptTermsSubscription.propTypes = {
   isTrial: _propTypes["default"].bool,
   isPrintProduct: _propTypes["default"].bool,
   isSingleTerm: _propTypes["default"].bool,
+  is7DayPassExperiment: _propTypes["default"].bool,
   isTransition: _propTypes["default"].bool,
   transitionType: _propTypes["default"].string,
   isDeferredBilling: _propTypes["default"].bool

package/dist/index.js

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

package/dist/payment-term.jsx

@@ -33,7 +33,9 @@ function PaymentTerm(_ref) {
     _ref$optionsInARow = _ref.optionsInARow,
     optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow,
     _ref$billingCountry = _ref.billingCountry,
-    billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry;
+    billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry,
+    _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
+    is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi;
   /**
    * Compute monthly price for given term name
    * @param {number} amount price in number format
@@ -118,10 +120,16 @@ function PaymentTerm(_ref) {
     },
     monthly: {
       title: 'Monthly',
-      price: function price(_price3) {
+      price: function price(_price3, is7DayPassExperiment) {
+        var paymentIntervalTextToDisplay = function () {
+          if (is7DayPassExperiment) {
+            return ' one-time payment';
+          }
+          return ' per month';
+        }();
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
           className: "ncf__payment-term__price"
-        }, _price3), " per month");
+        }, _price3), paymentIntervalTextToDisplay);
       },
       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", {
@@ -130,7 +138,15 @@ function PaymentTerm(_ref) {
       },
       monthlyPrice: function monthlyPrice() {},
       renewsText: function renewsText(isFixedTermOffer) {
-        var textToDisplay = isFixedTermOffer ? 'This subscription is for 3 months, charged monthly. You can cancel at anytime' : 'Renews monthly unless cancelled';
+        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';
+        }();
         return /*#__PURE__*/_react["default"].createElement("p", {
           className: "ncf__payment-term__renews-text"
         }, textToDisplay);
@@ -192,7 +208,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), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(isFixedTermOffer)) :
+      }, nameMap[option.name].price(option.price, is7DayPassExperiment), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(isFixedTermOffer, is7DayPassExperiment)) :
       // 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", {
@@ -205,8 +221,16 @@ function PaymentTerm(_ref) {
     };
     var getTermDisplayName = function getTermDisplayName() {
       var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isEpaper;
-      var defaultTitle = option.name && nameMap[option.name] ? nameMap[option.name].title : '';
-      var title = isFixedTermOffer ? "".concat(offerDisplayName, " - ").concat(defaultTitle) : defaultTitle;
+      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 termDisplayName = '';
       if (showTrialCopyInTitle) {
         var termName = option.displayName ? option.displayName : 'Premium Digital';

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

@@ -0,0 +1,93 @@
+"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
+  }))
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "0.0.0",
+  "version": "32.3.2",
   "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": {
@@ -37,9 +37,10 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@dotcom-tool-kit/babel": "^3.1.3",
-    "@dotcom-tool-kit/component": "^3.1.8",
+    "@dotcom-tool-kit/component": "^4.0.4",
     "@dotcom-tool-kit/eslint": "^3.1.3",
     "@dotcom-tool-kit/frontend-app": "^3.1.9",
+    "@dotcom-tool-kit/husky-npm": "^4.1.0",
     "@dotcom-tool-kit/jest": "^3.2.0",
     "@dotcom-tool-kit/lint-staged": "^4.1.3",
     "@dotcom-tool-kit/logger": "^3.1.1",

package/utils/delivery-option-messages.js

@@ -28,10 +28,10 @@ const UKDeliveryOptions = {
 	PV: {
 		title: 'Paper vouchers',
 		description:
-			'13-week voucher pack delivered quarterly and redeemable at retailers nationwide. COVID-19 - make sure your preferred newsagent or retailer is open and/or delivering before you select this option.',
+			'13-week voucher pack delivered quarterly and redeemable at retailers nationwide.',
 	},
 	HD: {
-		title: 'Home delivery',
+		title: 'Hand delivery',
 		description: 'Free delivery to your home or office before 7am.',
 	},
 	EV: {
@@ -114,7 +114,7 @@ const deliveryOptionMessages = [
 		deliveryOnPublicationDate: false,
 		flightMarket: true,
 		country: [printRegions.cemeaV1, printRegions.cemeaV2, printRegions.apac],
-		title: 'Hand Delivery',
+		title: 'Hand delivery',
 		description:
 			'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.',
 	},
@@ -127,7 +127,7 @@ const deliveryOptionMessages = [
 		distributorType: HAND_DELIVERY,
 		deliveryOnPublicationDate: true,
 		flightMarket: true,
-		title: 'Hand Delivery',
+		title: 'Hand delivery',
 		country: [printRegions.cemeaV1, printRegions.cemeaV2, printRegions.apac],
 		description:
 			'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 = [
 		deliveryOnPublicationDate: true,
 		flightMarket: false,
 		country: [printRegions.cemeaV1, printRegions.cemeaV2, printRegions.apac],
-		title: 'Hand Delivery',
+		title: 'Hand delivery',
 		description:
 			'Enjoy delivery of the newspaper daily to your home or office address on the day of publication.',
 	},

package/utils/delivery-option-messages.spec.js

@@ -140,7 +140,7 @@ describe('Find Custom Delivery Option', () => {
 			stubOption.deliveryOnPublicationDate = false;
 			stubOption.mailDelivery = false;
 			const expected = {
-				title: 'Hand Delivery',
+				title: 'Hand delivery',
 				description:
 					'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.',
 			};