@financial-times/n-conversion-forms 30.0.1 → 31.0.0

package/.circleci/config.yml

@@ -1,168 +1,115 @@
-# generator: n-circle2-cli
-# template: component
-
-references:
-
-  container_config_node: &container_config_node
-    working_directory: ~/project/build
+# CONFIG GENERATED BY DOTCOM-TOOL-KIT, DO NOT EDIT BY HAND
+version: 2.1
+orbs:
+  tool-kit: financial-times/dotcom-tool-kit@4
+executors:
+  node:
     docker:
       - image: cimg/node:18.17-browsers
-  workspace_root: &workspace_root
-    ~/project
-
-  attach_workspace: &attach_workspace
-    attach_workspace:
-      at: *workspace_root
-
-  npm_cache_keys: &npm_cache_keys
-    keys:
-        - v3-dependency-npm-{{ checksum "package.json" }}-
-        - v3-dependency-npm-{{ checksum "package.json" }}
-        - v3-dependency-npm-
-
-  cache_npm_cache: &cache_npm_cache
-    save_cache:
-        key: v3-dependency-npm-{{ checksum "package.json" }}-{{ epoch }}
-        paths:
-        - ./node_modules/
-
-  restore_npm_cache: &restore_npm_cache
-    restore_cache:
-        <<: *npm_cache_keys
-
-  filters_only_main: &filters_only_main
-    branches:
-      only: main
-
-  filters_only_renovate_nori: &filters_only_renovate_nori
-    branches:
-      only: /(^renovate-.*|^nori/.*)/
-
-  filters_ignore_tags_renovate_nori: &filters_ignore_tags_renovate_nori
-    tags:
-      ignore: /.*/
-    branches:
-      ignore: /(^renovate-.*|^nori/.*)/
-
-  filters_version_tag: &filters_version_tag
-    tags:
-      only:
-        - /^v?\d+\.\d+\.\d+(?:-beta\.\d+)?$/
-    branches:
-      ignore: /.*/
-
-version: 2.1
-
 jobs:
-
-  build:
-    <<: *container_config_node
+  checkout:
+    docker:
+      - image: cimg/base:stable
     steps:
       - checkout
-      - run:
-          name: Checkout next-ci-shared-helpers
-          command: git clone --depth 1 git@github.com:Financial-Times/next-ci-shared-helpers.git --branch unpin-heroku .circleci/shared-helpers
-      - *restore_npm_cache
-      - run:
-          name: Install project dependencies
-          command: make install
-      - run:
-          name: Run the project build task
-          command: make build
-      - run:
-          name: shared-helper / generate-build-state-artifacts
-          command: .circleci/shared-helpers/helper-generate-build-state-artifacts
-          when: always
-      - *cache_npm_cache
-      - store_artifacts:
-          path: build-state
-          destination: build-state
-      - persist_to_workspace:
-          root: *workspace_root
-          paths:
-            - build
-
-  test:
-    <<: *container_config_node
-    steps:
-      - *attach_workspace
-      - run:
-          name: Run tests
-          command: npm run lint && make test
-          environment:
-            JEST_JUNIT_OUTPUT: test-results/jest/results.xml
-            MOCHA_FILE: test-results/mocha/results.xml
-      - store_test_results:
-          path: test-results
-      - store_artifacts:
-          path: test-results
-          destination: test-results
-
-  publish:
-    <<: *container_config_node
-    steps:
-      - *attach_workspace
-      - run:
-          name: shared-helper / npm-store-auth-token
-          command: .circleci/shared-helpers/helper-npm-store-auth-token
-      - run: npx snyk monitor --org=customer-products --project-name=Financial-Times/n-conversion-forms
-      - run:
-          name: shared-helper / npm-version-and-publish-public
-          command: .circleci/shared-helpers/helper-npm-version-and-publish-public
-
+      - tool-kit/persist-workspace:
+          path: .
 workflows:
-
-  version: 2
-
-  build-test:
-    jobs:
-      - build:
-          filters:
-            <<: *filters_ignore_tags_renovate_nori
-      - test:
-          requires:
-            - build
-
-  build-test-publish:
+  tool-kit:
+    when:
+      not:
+        equal:
+          - scheduled_pipeline
+          - << pipeline.trigger_source >>
     jobs:
-      - build:
+      - checkout:
           filters:
-            <<: *filters_version_tag
-      - test:
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - waiting-for-approval:
+          type: approval
           filters:
-            <<: *filters_version_tag
+            branches:
+              only: /(^renovate-.*|^nori/.*)/
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/setup:
+          name: tool-kit/setup-<< matrix.executor >>
           requires:
-            - build
-      - publish:
-          context: npm-publish-token
+            - checkout
+            - waiting-for-approval
+          matrix:
+            parameters:
+              executor:
+                - node
           filters:
-            <<: *filters_version_tag
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/build:
+          name: tool-kit/build-<< matrix.executor >>
           requires:
-            - test
-
-  renovate-nori-build-test-provision:
-    jobs:
-      - waiting-for-approval:
-          type: approval
+            - tool-kit/setup-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node
           filters:
-              <<: *filters_only_renovate_nori
-      - build:
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/test:
+          name: tool-kit/test-<< matrix.executor >>
           requires:
-            - waiting-for-approval
-      - test:
+            - tool-kit/build-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/publish-tag:
           requires:
-            - build
-
-  nightly:
-    triggers:
-      - schedule:
-          cron: "0 0 * * *"
+            - tool-kit/test-node
+          name: tool-kit/publish-tag-node
+          executor: node
           filters:
-            <<: *filters_only_main
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+            branches:
+              ignore: /.*/
+          context: npm-publish-token
+  nightly:
+    when:
+      and:
+        - equal:
+            - scheduled_pipeline
+            - << pipeline.trigger_source >>
+        - equal:
+            - nightly
+            - << pipeline.schedule.name >>
     jobs:
-      - build:
-          context: next-nightly-build
-      - test:
+      - checkout
+      - tool-kit/setup:
+          name: tool-kit/setup-<< matrix.executor >>
+          requires:
+            - checkout
+          matrix:
+            parameters:
+              executor:
+                - node
+      - tool-kit/build:
+          name: tool-kit/build-<< matrix.executor >>
+          requires:
+            - tool-kit/setup-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node
+      - tool-kit/test:
+          name: tool-kit/test-<< matrix.executor >>
           requires:
-            - build
-          context: next-nightly-build
+            - tool-kit/build-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node

package/.toolkitrc.yml

@@ -0,0 +1,19 @@
+plugins:
+  - "@dotcom-tool-kit/component"
+  - "@dotcom-tool-kit/jest"
+  - "@dotcom-tool-kit/eslint"
+  - "@dotcom-tool-kit/prettier"
+  - "@dotcom-tool-kit/lint-staged"
+hooks:
+  git:precommit:
+    - SecretSquirrel
+    - LintStaged
+  test:local:
+    - Eslint
+    - JestLocal
+  test:ci:
+    - Eslint
+    - JestCI
+options:
+  "@dotcom-tool-kit/circleci":
+    nodeVersion: 18.17-browsers

package/.toolkitstate/ci.json

@@ -0,0 +1,6 @@
+{
+  "branch": "",
+  "repo": "n-conversion-forms",
+  "version": "c11f11ba33cddfdac510ecca5f74fc304bdc6eda",
+  "tag": "v31.0.0"
+}

package/README.md

@@ -6,8 +6,8 @@ Contains HTML and CSS that's used within the conversion forms
 [![Known Vulnerabilities](https://snyk.io/test/github/Financial-Times/n-conversion-forms/badge.svg?targetFile=package.json)](https://snyk.io/test/github/Financial-Times/n-conversion-forms?targetFile=package.json)
 
 ```bash
-make install # install all dependencies
-make run # build and start documentation app at http://local.ft.com:5005/
+npm install # install all dependencies
+npm run storybook # build and start documentation app at http://local.ft.com:5005/
 ```
 
 ## Table of contents

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,54 @@ 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 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 +258,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/index.jsx

@@ -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: '£1.00',
+							weeklyPrice: '£1.00',
+						},
+					],
+				};
+
+				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,24 @@ 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 = (() => {
+					switch (true) {
+						case is7DayPassExperiment:
+							return ' one-time payment';
+
+						default:
+							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{' '}
@@ -120,10 +134,20 @@ export function PaymentTerm({
 				</React.Fragment>
 			),
 			monthlyPrice: () => {},
-			renewsText: (isFixedTermOffer) => {
-				const textToDisplay = isFixedTermOffer
-					? 'This subscription is for 3 months, charged monthly. You can cancel at anytime'
-					: 'Renews monthly unless cancelled';
+			renewsText: (isFixedTermOffer, is7DayPassExperiment) => {
+				const textToDisplay = (() => {
+					switch (true) {
+						case is7DayPassExperiment:
+							return 'This subscription is for 7 days, charged at the outset.';
+
+						case isFixedTermOffer:
+							return 'This subscription is for 3 months, charged monthly. You can cancel at anytime';
+
+						default:
+							return 'Renews monthly unless cancelled';
+					}
+				})();
+
 				return (
 					<p className="ncf__payment-term__renews-text">{textToDisplay}</p>
 				);
@@ -218,9 +242,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>
@@ -262,11 +289,21 @@ export function PaymentTerm({
 			const showTrialCopyInTitle =
 				option.isTrial && !isPrintOrBundle && !isEpaper;
 
-			const defaultTitle =
-				option.name && nameMap[option.name] ? nameMap[option.name].title : '';
+			const defaultTitle = (() => {
+				switch (true) {
+					case is7DayPassExperiment:
+						return '';
+
+					case Boolean(option.name && nameMap[option.name]):
+						return nameMap[option.name].title;
+
+					default:
+						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>