@financial-times/n-conversion-forms 32.2.0 → 32.4.0

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": "2d783c38faacc8840e733178788dea18b4c1eac4",
-  "tag": "v32.2.0"
+  "version": "028fb82534567b6f0bb602afb409c47306fd4671",
+  "tag": "v32.4.0"
 }

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,8 @@ export function AcceptTermsSubscription({
 	isTrial = false,
 	isPrintProduct = false,
 	isSingleTerm = false,
+	is7DayPassExperiment = false,
+	isTermedSubscriptionTermType = false,
 	isTransition = false,
 	transitionType = null,
 	isDeferredBilling = false,
@@ -37,6 +39,102 @@ 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}>
+				<ul className="o-typography-list ncf__accept-terms-list">
+					<li>
+						<span className="terms-transition terms-transition--immediate">
+							I give consent for the 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 are waiving your statutory right to cancel our contract within 14 days of
+							payment. Your payment is a one-time payment collected at the time of checkout, and
+							unsubscribing or 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 +307,8 @@ AcceptTermsSubscription.propTypes = {
 	isTrial: PropTypes.bool,
 	isPrintProduct: PropTypes.bool,
 	isSingleTerm: PropTypes.bool,
+	is7DayPassExperiment: PropTypes.bool,
+	isTermedSubscriptionTermType: PropTypes.bool,
 	isTransition: PropTypes.bool,
 	transitionType: PropTypes.string,
 	isDeferredBilling: PropTypes.bool,

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

@@ -70,6 +70,28 @@ describe('AcceptTermsSubscription', () => {
 		expect(transitionTerms.exists()).toBe(true);
 	});
 
+	it('renders the transition terms when isTermedSubscriptionTermType prop is true', () => {
+		const props = {
+			isTermedSubscriptionTermType: true,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const transitionTerms1 = component.find('.terms-transition').at(0);
+		const transitionTerms2 = component.find('.terms-transition').at(1);
+		const transitionTerms3 = component.find('.terms-transition').at(2);
+
+		expect(transitionTerms1.text()).toEqual(
+			'I give consent for the chosen payment method to be charged automatically.'
+		);
+		expect(transitionTerms2.text()).toEqual(
+			'By placing your order subject to the Terms & Conditions (save for section 2) referred to below, you are waiving your statutory right to cancel our contract within 14 days of payment. Your payment is a one-time payment collected at the time of checkout, and unsubscribing or cancelling at any point (whether before or after the 14-day period) will not entitle you to a refund.'
+		);
+		expect(transitionTerms3.text()).toEqual(
+			'Please see here for the complete Terms & Conditions.'
+		);
+	});
+
 	it('does not render the transition terms when transitionType prop is null', () => {
 		const props = {
 			transitionType: null,

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

@@ -30,6 +30,14 @@ IsSingleTerm.args = {
 	isSingleTerm: true,
 };
 
+export const TermedSubscriptionTermType = (args) => (
+	<AcceptTermsSubscription {...args} />
+);
+
+TermedSubscriptionTermType.args = {
+	isTermedSubscriptionTermType: true,
+};
+
 export const IsTransition = (args) => <AcceptTermsSubscription {...args} />;
 
 IsTransition.args = {

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,12 +15,14 @@ export function PaymentTerm({
 	largePrice = false,
 	optionsInARow = false,
 	billingCountry = '',
+	is7DayPassExperiment = false,
+	isTermedSubscriptionTermType = false,
 }) {
 	/**
 	 * Compute monthly price for given term name
 	 * @param {number} amount price in number format
 	 * @param {string} currency country id of the currency
-	 * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
+	 * @param {string} period (expressed in IS0 8601 duration format): e.g. PxY (yearly) or PxM (montly) where x is the amount of years/months
 	 * @returns {string}
 	 */
 	const getMontlyPriceFromPeriod = (amount, currency, period) => {
@@ -32,13 +34,22 @@ export function PaymentTerm({
 	/**
 	 * returns period converted to time if found
 	 * otherwise returns empty string to avoid show information not mapped
-	 * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
+	 * @param {string} period (expressed in IS0 8601 duration format): PxY (yearly), PxM (montly), or PxW, where x is the amount of years/months/weeks
 	 * @returns {string}
 	 */
 	const getTimeFromPeriod = (period) => {
-		const freq =
-			period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
+		const periodUnitCodeToWordMap = {
+			Y: 'years',
+			M: 'months',
+			W: 'weeks',
+		};
+
+		const periodUnitCode = period.substring(period.length - 1);
+
+		const freq = periodUnitCodeToWordMap[periodUnitCode] || '';
+
 		const amount = period.substring(1, period.length - 1);
+
 		return period ? `${amount} ${freq}` : '';
 	};
 
@@ -107,11 +118,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 +143,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>
@@ -157,6 +187,7 @@ export function PaymentTerm({
 					</span>
 				),
 			renewsText: (renewalPeriod) =>
+				!isTermedSubscriptionTermType &&
 				Boolean(renewalPeriod) && (
 					<p className="ncf__payment-term__renews-text">
 						Renews every {renewalPeriod} unless cancelled
@@ -219,9 +250,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 +297,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 = '';
@@ -339,7 +382,7 @@ export function PaymentTerm({
 
 			{showLegal && (
 				<div className="ncf__payment-term__legal">
-					{isFixedTermOffer ? (
+					{isTermedSubscriptionTermType || isFixedTermOffer ? (
 						<p>
 							Find out more about our cancellation policy in our{' '}
 							<a
@@ -411,6 +454,7 @@ PaymentTerm.propTypes = {
 		})
 	),
 	isFixedTermOffer: PropTypes.bool,
+	isTermedSubscriptionTermType: PropTypes.bool,
 	offerDisplayName: PropTypes.string,
 	showLegal: PropTypes.bool,
 	largePrice: PropTypes.bool,

package/components/payment-term.spec.js

@@ -153,6 +153,63 @@ 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', () => {
+		const options = [
+			{
+				name: '8 weeks',
+				price: '£19.00',
+				amount: '19.00',
+				value: 'P8W',
+			},
+		];
+		const wrapper = shallow(
+			<PaymentTerm options={options} isTermedSubscriptionTermType={true} />
+		);
+
+		it('renders subscription term as title', () => {
+			expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
+				'8 weeks'
+			);
+		});
+
+		it('renders description text that reflects that the termed subscription requires a single payment that expresses the per duration cost for shorter durations', () => {
+			expect(wrapper.find('.ncf__payment-term__description').text()).toContain(
+				'Single £19.00 paymentThat’s equivalent to GBP9.50 per month'
+			);
+		});
+	});
+
 	describe('getDisplayName', () => {
 		const baseOptions = {
 			name: 'monthly',
@@ -199,6 +256,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,45 @@ 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>
+			<PaymentTerm {...args} />
+		</Fieldset>
+	</div>
+);
+TermedSubscriptionTermType.args = {
+	options: [
+		{
+			name: '8 weeks',
+			price: '£19.00',
+			amount: '19.00',
+			value: 'P8W',
+		},
+	],
+	isTermedSubscriptionTermType: true,
+};
+
 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,10 @@ 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,
     isTransition = _ref$isTransition === void 0 ? false : _ref$isTransition,
     _ref$transitionType = _ref.transitionType,
@@ -49,6 +53,52 @@ 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"
+    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "terms-transition terms-transition--immediate"
+    }, "I give consent for the 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 are waiving your statutory right to cancel our contract within 14 days of payment. Your payment is a one-time payment collected at the time of checkout, and unsubscribing or 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 +168,8 @@ 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,
   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,12 +33,16 @@ 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,
+    _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
+    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
   /**
    * Compute monthly price for given term name
    * @param {number} amount price in number format
    * @param {string} currency country id of the currency
-   * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
+   * @param {string} period (expressed in IS0 8601 duration format): e.g. PxY (yearly) or PxM (montly) where x is the amount of years/months
    * @returns {string}
    */
   var getMontlyPriceFromPeriod = function getMontlyPriceFromPeriod(amount, currency, period) {
@@ -53,11 +57,17 @@ function PaymentTerm(_ref) {
   /**
    * returns period converted to time if found
    * otherwise returns empty string to avoid show information not mapped
-   * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
+   * @param {string} period (expressed in IS0 8601 duration format): PxY (yearly), PxM (montly), or PxW, where x is the amount of years/months/weeks
    * @returns {string}
    */
   var getTimeFromPeriod = function getTimeFromPeriod(period) {
-    var freq = period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
+    var periodUnitCodeToWordMap = {
+      Y: 'years',
+      M: 'months',
+      W: 'weeks'
+    };
+    var periodUnitCode = period.substring(period.length - 1);
+    var freq = periodUnitCodeToWordMap[periodUnitCode] || '';
     var amount = period.substring(1, period.length - 1);
     return period ? "".concat(amount, " ").concat(freq) : '';
   };
@@ -118,10 +128,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 +146,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);
@@ -155,7 +179,7 @@ function PaymentTerm(_ref) {
         }, _monthlyPrice), ' ', "per month");
       },
       renewsText: function renewsText(renewalPeriod) {
-        return Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
+        return !isTermedSubscriptionTermType && Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
           className: "ncf__payment-term__renews-text"
         }, "Renews every ", renewalPeriod, " unless cancelled");
       }
@@ -192,7 +216,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 +229,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';
@@ -252,7 +284,7 @@ function PaymentTerm(_ref) {
     return createPaymentTerm(option);
   })), showLegal && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__payment-term__legal"
-  }, isFixedTermOffer ? /*#__PURE__*/_react["default"].createElement("p", null, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, isTermedSubscriptionTermType || isFixedTermOffer ? /*#__PURE__*/_react["default"].createElement("p", null, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
@@ -292,6 +324,7 @@ PaymentTerm.propTypes = {
     fulfilmentOption: _propTypes["default"].string
   })),
   isFixedTermOffer: _propTypes["default"].bool,
+  isTermedSubscriptionTermType: _propTypes["default"].bool,
   offerDisplayName: _propTypes["default"].string,
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,

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": "32.2.0",
+  "version": "32.4.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": {
@@ -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",