@financial-times/n-conversion-forms 24.2.0 → 25.0.0

package/components/__snapshots__/confirmation.spec.js.snap

@@ -11,12 +11,6 @@ exports[`Confirmation renders appropriately if is B2C Partnership 1`] = `
     <h1 class="ncf__header ncf__header--confirmation">
     </h1>
   </div>
-  <p class="ncf__paragraph">
-    We’ve sent confirmation to your email. Make sure you check your spam folder if you don’t receive it.
-  </p>
-  <p>
-    We&#x27;ve also sent you an email to start your 90-day All Access Digital subscription with The Washington Post.
-  </p>
   <p class="ncf__paragraph">
     Here’s a summary of your  subscription:
   </p>

package/components/confirmation.jsx

@@ -7,6 +7,7 @@ export function Confirmation ({
 	// isTrial prop is needed for the floodlight pixel tracking.
 	isTrial = false,
 	isB2cPartnership = false,
+	b2cPartnershipCopy = [],
 	offer = '',
 	email = EMAIL_DEFAULT_TEXT,
 	details = null,
@@ -63,15 +64,18 @@ export function Confirmation ({
 			</div>
 
 			{nextActionTop}
+			{!isB2cPartnership && (
+				<p className="ncf__paragraph">
+					We’ve sent confirmation to {email}. Make sure you check your spam folder
+					if you don’t receive it.
+				</p>
+			)}
 
-			<p className="ncf__paragraph">
-				We’ve sent confirmation to {email}. Make sure you check your spam folder
-				if you don’t receive it.
-			</p>
-			{isB2cPartnership ? (
-				<p>
-					We&apos;ve also sent you an email to start your 90-day All Access
-					Digital subscription with The Washington Post.
+			{isB2cPartnership && b2cPartnershipCopy.length > 0 ? (
+				<p className="ncf__paragraph">
+					{b2cPartnershipCopy[0]}
+					<span className="ncf__legend">{` ${email}. `}</span>
+					{b2cPartnershipCopy[1]}
 				</p>
 			) : (
 				''
@@ -126,6 +130,7 @@ export function Confirmation ({
 Confirmation.propTypes = {
 	isTrial: PropTypes.bool,
 	isB2cPartnership: PropTypes.bool,
+	b2cPartnershipCopy: PropTypes.array,
 	offer: PropTypes.string.isRequired,
 	email: PropTypes.string,
 	details: PropTypes.arrayOf(

package/components/confirmation.spec.js

@@ -21,7 +21,7 @@ describe('Confirmation', () => {
 	});
 
 	it('renders appropriately if is B2C Partnership', () => {
-		const props = { isB2cPartnership: true };
+		const props = { isB2cPartnership: true, b2cDiscountCopy: ['Send email'] };
 
 		expect(Confirmation).toRenderCorrectly(props);
 	});

package/components/index.jsx

@@ -1,6 +1,5 @@
 export { AcceptTerms } from './accept-terms';
 export { AppBanner } from './app-banner';
-export { B2cPartnershipPaymentTerm } from './b2c-partnership-payment-term';
 export { BillingCity } from './billing-city';
 export { BillingCountry } from './billing-country';
 export { BillingPostcode } from './billing-postcode';
@@ -54,3 +53,4 @@ export { EducationJobTitle } from './education-job-title';
 export { GraduationDate } from './graduation-date';
 export { LiteSubConfirmation } from './lite-sub-confirmation';
 export { GoogleSignIn } from './google-sign-in';
+export { TextInput } from './text-input';

package/components/payment-term.jsx

@@ -192,6 +192,15 @@ export function PaymentTerm ({
 			);
 		};
 
+		const createB2cDiscountCopy = () => {
+			return (
+				option.b2cPartnership && option.b2cDiscountCopy && (
+					<span className="ncf__payment-term__discount">
+						{option.b2cDiscountCopy}
+					</span>
+				)
+			);
+		};
 		const createDescription = () => {
 			return option.isTrial ? (
 				<div className="ncf__payment-term__description">
@@ -285,6 +294,7 @@ export function PaymentTerm ({
 					className="o-forms-input__label ncf__payment-term__label"
 				>
 					{createDiscount()}
+					{createB2cDiscountCopy()}
 
 					<span
 						className={classNames([
@@ -365,6 +375,8 @@ PaymentTerm.propTypes = {
 	isEpaper: PropTypes.bool,
 	options: PropTypes.arrayOf(
 		PropTypes.shape({
+			b2cDiscountCopy: PropTypes.string,
+			isB2cPartnership: PropTypes.bool,
 			discount: PropTypes.string,
 			isTrial: PropTypes.bool,
 			name: PropTypes.string.isRequired,

package/components/text-input.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export function TextInput ({
+	dataTrackable,
+	errorText = 'Please enter a value',
+	fieldId,
+	hasError = false,
+	inputId,
+	inputName,
+	isDisabled = false,
+	isRequired = false,
+	label = '',
+	placeHolder = '',
+	value = '',
+	description,
+}) {
+	// Use inputId if inputName is not explicitly passed.
+	inputName = inputName || inputId;
+
+	const inputWrapperClassNames = classNames([
+		'o-forms-input',
+		'o-forms-input--text',
+		{ 'o-forms-input--invalid': hasError },
+		{ 'o-forms-field--optional': !isRequired },
+	]);
+
+	return (
+		<label
+			id={fieldId}
+			className="o-forms-field ncf__validation-error"
+			data-validate="required"
+			htmlFor={inputId}
+		>
+			<span className="o-forms-title">
+				<span className="o-forms-title__main">{label}</span>
+				{description ? (
+					<span className="o-forms-title__prompt">{description}</span>
+				) : null}
+			</span>
+			<span className={inputWrapperClassNames}>
+				<input
+					type="text"
+					id={inputId}
+					name={inputName}
+					placeholder={placeHolder}
+					data-trackable={dataTrackable}
+					aria-required={isRequired}
+					required={isRequired}
+					disabled={isDisabled}
+					defaultValue={value}
+				/>
+				<span className="o-forms-input__error">{errorText}</span>
+			</span>
+		</label>
+	);
+}
+
+TextInput.propTypes = {
+	dataTrackable: PropTypes.string,
+	errorText: PropTypes.string,
+	fieldId: PropTypes.string,
+	hasError: PropTypes.bool,
+	inputId: PropTypes.string,
+	inputName: PropTypes.string,
+	isDisabled: PropTypes.bool,
+	isRequired: PropTypes.bool,
+	label: PropTypes.string,
+	placeHolder: PropTypes.string,
+	value: PropTypes.string,
+	description: PropTypes.string,
+};

package/components/text-input.spec.js

@@ -0,0 +1,118 @@
+import { TextInput } from './index';
+
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Text Input', () => {
+	it('renders with default props', () => {
+		const props = {};
+
+		const component = mount(TextInput(props));
+		const element = component.find('input');
+
+		expect(element.exists()).toBe(true);
+	});
+
+	it('renders a field with custom field id', () => {
+		const props = { fieldId: 'customFieldId' };
+
+		const component = mount(TextInput(props));
+		const element = component.find('#customFieldId');
+
+		expect(element.exists()).toBe(true);
+	});
+
+	it('renders with an error', () => {
+		const props = { hasError: true, errorText: 'Invalid value' };
+
+		const component = mount(TextInput(props));
+		const element = component.find('.o-forms-input--invalid');
+		const errorMsg = component.find('.o-forms-input__error');
+
+		expect(element.exists()).toBe(true);
+		expect(errorMsg.text()).toEqual('Invalid value');
+	});
+
+	it('renders a field with custom input id', () => {
+		const props = { inputId: 'customInputId' };
+
+		const component = mount(TextInput(props));
+		const element = component.find('input#customInputId');
+
+		expect(element.exists()).toBe(true);
+	});
+
+	it('renders a field with custom input name', () => {
+		const CUSTOM_INPUT_NAME = 'customInputName';
+		const props = { inputName: CUSTOM_INPUT_NAME };
+
+		const component = mount(TextInput(props));
+		const element = component.find('input');
+
+		expect(element.prop('name')).toBe(CUSTOM_INPUT_NAME);
+	});
+
+	it('renders with a custom value', () => {
+		const props = { value: 'foobar' };
+
+		const component = mount(TextInput(props));
+		const element = component.find('input');
+
+		expect(element.prop('defaultValue')).toEqual('foobar');
+	});
+
+	it('renders with disabled input', () => {
+		const props = { isDisabled: true };
+
+		const component = mount(TextInput(props));
+		const element = component.find('input[disabled=true]');
+
+		expect(element.exists()).toBe(true);
+	});
+
+	it('renders with default label wording', () => {
+		const props = {};
+
+		const component = mount(TextInput(props));
+		const label = component.find('.o-forms-title__main');
+
+		expect(label.text()).toEqual('');
+	});
+
+	it('renders with custom label wording', () => {
+		const props = { label: 'Code' };
+
+		const component = mount(TextInput(props));
+		const label = component.find('.o-forms-title__main');
+
+		expect(label.text()).toEqual('Code');
+	});
+
+	it('renders with custom description wording', () => {
+		const props = { description: 'Description text' };
+
+		const component = mount(TextInput(props));
+		const description = component.find('.o-forms-title__prompt');
+
+		expect(description.text()).toEqual('Description text');
+	});
+
+	it('renders as required field', () => {
+		const props = { isRequired: true };
+
+		const component = mount(TextInput(props));
+		const element = component.find('input[required=true]');
+
+		expect(element.exists()).toBe(true);
+	});
+
+	it('renders as optional field', () => {
+		const props = { isRequired: false };
+
+		const component = mount(TextInput(props));
+		const element = component.find('input[required=true]');
+
+		expect(element.exists()).toBe(false);
+	});
+});

package/components/text-input.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TextInput } from './text-input';
+
+export default {
+	title: 'Text Input',
+	component: TextInput,
+};
+
+export const Basic = (args) => <TextInput {...args} />;
+Basic.args = {
+	label: 'Text Input',
+};
+
+export const VerificationCode = (args) => <TextInput {...args} />;
+VerificationCode.args = {
+	dataTrackable: 'verification-code',
+	errorText: 'This verification code is incorrect, please try again',
+	fieldId: 'verificationCodeField',
+	inputId: 'verificationCode',
+	isRequired: true,
+	placeHolder: 'Enter code',
+	description:
+		'An email with a link and verification code has been sent to your email. Enter the code below or follow the link in the email to continue.',
+	hasError: true,
+};
+
+export const Comments = (args) => <TextInput {...args} />;
+Comments.args = {
+	label: 'Comments',
+	placeHolder: 'Please enter your comments',
+};

package/dist/confirmation.js

@@ -24,6 +24,8 @@ function Confirmation(_ref) {
       isTrial = _ref$isTrial === void 0 ? false : _ref$isTrial,
       _ref$isB2cPartnership = _ref.isB2cPartnership,
       isB2cPartnership = _ref$isB2cPartnership === void 0 ? false : _ref$isB2cPartnership,
+      _ref$b2cPartnershipCo = _ref.b2cPartnershipCopy,
+      b2cPartnershipCopy = _ref$b2cPartnershipCo === void 0 ? [] : _ref$b2cPartnershipCo,
       _ref$offer = _ref.offer,
       offer = _ref$offer === void 0 ? '' : _ref$offer,
       _ref$email = _ref.email,
@@ -77,9 +79,13 @@ function Confirmation(_ref) {
     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"
-  }, offer)), nextActionTop, /*#__PURE__*/_react["default"].createElement("p", {
+  }, offer)), nextActionTop, !isB2cPartnership && /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph"
-  }, "We\u2019ve sent confirmation to ", email, ". Make sure you check your spam folder if you don\u2019t receive it."), isB2cPartnership ? /*#__PURE__*/_react["default"].createElement("p", null, "We've also sent you an email to start your 90-day All Access Digital subscription with The Washington Post.") : '', /*#__PURE__*/_react["default"].createElement("p", {
+  }, "We\u2019ve sent confirmation to ", email, ". Make sure you check your spam folder if you don\u2019t receive it."), isB2cPartnership && b2cPartnershipCopy.length > 0 ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: "ncf__paragraph"
+  }, b2cPartnershipCopy[0], /*#__PURE__*/_react["default"].createElement("span", {
+    className: "ncf__legend"
+  }, " ".concat(email, ". ")), b2cPartnershipCopy[1]) : '', /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph"
   }, "Here\u2019s a summary of your ", offer, " subscription:"), detailElements, directDebitMandateUrlElement, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__headed-paragraph"
@@ -109,6 +115,7 @@ function Confirmation(_ref) {
 Confirmation.propTypes = {
   isTrial: _propTypes["default"].bool,
   isB2cPartnership: _propTypes["default"].bool,
+  b2cPartnershipCopy: _propTypes["default"].array,
   offer: _propTypes["default"].string.isRequired,
   email: _propTypes["default"].string,
   details: _propTypes["default"].arrayOf(_propTypes["default"].shape({

package/dist/index.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "B2CPartnershipConfirmation", {
     return _b2cPartnershipConfirmation.B2CPartnershipConfirmation;
   }
 });
-Object.defineProperty(exports, "B2cPartnershipPaymentTerm", {
-  enumerable: true,
-  get: function get() {
-    return _b2cPartnershipPaymentTerm.B2cPartnershipPaymentTerm;
-  }
-});
 Object.defineProperty(exports, "BillingCity", {
   enumerable: true,
   get: function get() {
@@ -333,6 +327,12 @@ Object.defineProperty(exports, "Submit", {
     return _submit.Submit;
   }
 });
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function get() {
+    return _textInput.TextInput;
+  }
+});
 Object.defineProperty(exports, "TrialBanner", {
   enumerable: true,
   get: function get() {
@@ -344,8 +344,6 @@ var _acceptTerms = require("./accept-terms");
 
 var _appBanner = require("./app-banner");
 
-var _b2cPartnershipPaymentTerm = require("./b2c-partnership-payment-term");
-
 var _billingCity = require("./billing-city");
 
 var _billingCountry = require("./billing-country");
@@ -450,4 +448,6 @@ var _graduationDate = require("./graduation-date");
 
 var _liteSubConfirmation = require("./lite-sub-confirmation");
 
-var _googleSignIn = require("./google-sign-in");
+var _googleSignIn = require("./google-sign-in");
+
+var _textInput = require("./text-input");

package/dist/payment-term.js

@@ -195,6 +195,12 @@ function PaymentTerm(_ref) {
       }, option.bestOffer ? 'Best offer' : "Save ".concat(option.discount, " off RRP"));
     };
 
+    var createB2cDiscountCopy = function createB2cDiscountCopy() {
+      return option.b2cPartnership && option.b2cDiscountCopy && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "ncf__payment-term__discount"
+      }, option.b2cDiscountCopy);
+    };
+
     var createDescription = function createDescription() {
       return option.isTrial ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "ncf__payment-term__description"
@@ -250,7 +256,7 @@ function PaymentTerm(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("input", props), /*#__PURE__*/_react["default"].createElement("label", {
       htmlFor: option.value,
       className: "o-forms-input__label ncf__payment-term__label"
-    }, createDiscount(), /*#__PURE__*/_react["default"].createElement("span", {
+    }, createDiscount(), createB2cDiscountCopy(), /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])(['ncf__payment-term__title', {
         'ncf__payment-term__title--large-price': largePrice
       }])
@@ -289,6 +295,8 @@ PaymentTerm.propTypes = {
   isPrintOrBundle: _propTypes["default"].bool,
   isEpaper: _propTypes["default"].bool,
   options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    b2cDiscountCopy: _propTypes["default"].string,
+    isB2cPartnership: _propTypes["default"].bool,
     discount: _propTypes["default"].string,
     isTrial: _propTypes["default"].bool,
     name: _propTypes["default"].string.isRequired,

package/dist/text-input.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = TextInput;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function TextInput(_ref) {
+  var dataTrackable = _ref.dataTrackable,
+      _ref$errorText = _ref.errorText,
+      errorText = _ref$errorText === void 0 ? 'Please enter a value' : _ref$errorText,
+      fieldId = _ref.fieldId,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+      inputId = _ref.inputId,
+      inputName = _ref.inputName,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$placeHolder = _ref.placeHolder,
+      placeHolder = _ref$placeHolder === void 0 ? '' : _ref$placeHolder,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      description = _ref.description;
+  // Use inputId if inputName is not explicitly passed.
+  inputName = inputName || inputId;
+  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
+    'o-forms-input--invalid': hasError
+  }, {
+    'o-forms-field--optional': !isRequired
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required",
+    htmlFor: inputId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, label), description ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, description) : null), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: inputId,
+    name: inputName,
+    placeholder: placeHolder,
+    "data-trackable": dataTrackable,
+    "aria-required": isRequired,
+    required: isRequired,
+    disabled: isDisabled,
+    defaultValue: value
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, errorText)));
+}
+
+TextInput.propTypes = {
+  dataTrackable: _propTypes["default"].string,
+  errorText: _propTypes["default"].string,
+  fieldId: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  inputId: _propTypes["default"].string,
+  inputName: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  placeHolder: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  description: _propTypes["default"].string
+};

package/main.scss

@@ -10,7 +10,6 @@
 @import '@financial-times/o-fonts/main';
 @import './styles/package-change';
 @import './styles/payment-term';
-@import './styles/b2c-partnership-payment-term';
 @import './styles/payment-type';
 @import './styles/loader';
 @import './styles/accept-terms';
@@ -436,7 +435,6 @@
 	@include ncfMessage();
 	@include ncfPackageChange();
 	@include ncfPaymentTerm();
-	@include ncfB2cPartnershipPaymentTerm();
 	@include ncfPaymentType();
 	@include ncfLoader();
 	@include ncfContinueReading();

package/package.json

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

package/components/__snapshots__/b2c-partnership-payment-term.spec.js.snap

@@ -1,193 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`B2cPartnershipPaymentTerm render with minimum props required 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="299.99"
-           name="paymentTerm"
-           value="299.99"
-           checked
-    >
-    <label for="299.99"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £299.99 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          1 year Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;
-
-exports[`B2cPartnershipPaymentTerm renders with annual option 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="annual"
-           name="paymentTerm"
-           value="annual"
-           checked
-    >
-    <label for="annual"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £20.00 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          1 year Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;
-
-exports[`B2cPartnershipPaymentTerm renders with monthly option 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="monthly"
-           name="paymentTerm"
-           value="monthly"
-           checked
-    >
-    <label for="monthly"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £20.00 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          1 month Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;
-
-exports[`B2cPartnershipPaymentTerm renders with quarterly option 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="quarterly"
-           name="paymentTerm"
-           value="quarterly"
-           checked
-    >
-    <label for="quarterly"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £20.00 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          3 month Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;

package/components/b2c-partnership-payment-term.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export function B2cPartnershipPaymentTerm ({
-	fieldId = 'paymentTermField',
-	inputName = 'paymentTerm',
-	options = [],
-	displayName,
-	offerType,
-	partnerOffer,
-	conditions = [],
-}) {
-	const durations = {
-		annual: '1 year',
-		quarterly: '3 month',
-		monthly: '1 month',
-	};
-
-	// convert to Title Case
-	offerType = offerType
-		.split('')
-		.map((letter, i) => (i !== 0 ? letter.toLowerCase() : letter.toUpperCase()))
-		.join('');
-
-	return (
-		<div
-			id={fieldId}
-			className="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
-		>
-			{options.map(
-				(option) =>
-					option.selected && (
-						<div
-							className="ncf__payment-term__item o-forms-input--radio-round"
-							key={option.value}
-						>
-							<input
-								type="radio"
-								id={option.value}
-								name={inputName}
-								value={option.value}
-								defaultChecked={true}
-							/>
-							<label
-								htmlFor={option.value}
-								className="o-forms-input__label ncf__payment-term__label"
-							>
-								<span className="ncf__payment-term__title">
-									{option.price} - {displayName}
-								</span>
-								<div className="ncf__b2c-partnership-payment-term__description">
-									<p>
-										Includes:
-										<br />
-										{durations[option.name]} {offerType} subscription to the
-										Financial Times
-										<br />
-										{partnerOffer.duration} {partnerOffer.name} subscription to{' '}
-										{partnerOffer.vendor}
-									</p>
-									{conditions.length > 0 && (
-										<p>
-											{conditions.map((line) => (
-												<>
-													{line}
-													<br />
-												</>
-											))}
-										</p>
-									)}
-								</div>
-							</label>
-						</div>
-					)
-			)}
-
-			<div className="ncf__payment-term__legal">
-				<p>
-					We will automatically renew your subscription using the payment method
-					provided unless you cancel before your renewal date.
-				</p>
-				<p>
-					We will notify you at least 14 days in advance of any changes to the
-					price in your subscription that would apply upon next renewal. Find
-					out more about our cancellation policy in our{' '}
-					<a
-						className="ncf__link--external"
-						href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-						title="FT Legal Terms and Conditions help page"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Terms &amp; Conditions
-					</a>
-					.
-				</p>
-			</div>
-		</div>
-	);
-}
-
-B2cPartnershipPaymentTerm.propTypes = {
-	fieldId: PropTypes.string,
-	inputName: PropTypes.string,
-	options: PropTypes.arrayOf(
-		PropTypes.shape({
-			discount: PropTypes.string,
-			isTrial: PropTypes.bool,
-			name: PropTypes.string.isRequired,
-			price: PropTypes.string.isRequired,
-			selected: PropTypes.bool,
-			trialDuration: PropTypes.string,
-			trialPrice: PropTypes.string,
-			value: PropTypes.string.isRequired,
-			monthlyPrice: PropTypes.string,
-		})
-	).isRequired,
-	displayName: PropTypes.string.isRequired,
-	partnerOffer: PropTypes.shape({
-		duration: PropTypes.string.isRequired,
-		name: PropTypes.string.isRequired,
-		vendor: PropTypes.string.isRequired,
-	}).isRequired,
-	conditions: PropTypes.arrayOf(PropTypes.string),
-	offerType: PropTypes.string.isRequired,
-};

package/components/b2c-partnership-payment-term.spec.js

@@ -1,52 +0,0 @@
-import { B2cPartnershipPaymentTerm } from './index';
-import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-
-expect.extend(expectToRenderCorrectly);
-
-const defaultProps = {
-	displayName: 'Digital FT + The Washington Post',
-	partnerOffer: {
-		duration: '90-day',
-		name: 'All-Access Digital',
-		vendor: 'The Washington Post',
-	},
-	offerType: 'DIGITAL',
-	options: [
-		{
-			name: 'annual',
-			price: '£299.99',
-			value: 299.99,
-			isTrial: false,
-			discount: null,
-			selected: true,
-		},
-	],
-};
-
-describe('B2cPartnershipPaymentTerm', () => {
-	it('render with minimum props required', () => {
-		const props = {
-			...defaultProps,
-		};
-
-		expect(B2cPartnershipPaymentTerm).toRenderCorrectly(props);
-	});
-
-	['annual', 'quarterly', 'monthly'].forEach((type) => {
-		it(`renders with ${type} option`, () => {
-			const props = {
-				...defaultProps,
-				options: [
-					{
-						name: type,
-						value: type,
-						price: '£20.00',
-						selected: true,
-					},
-				],
-			};
-
-			expect(B2cPartnershipPaymentTerm).toRenderCorrectly(props);
-		});
-	});
-});

package/components/b2c-partnership-payment-term.stories.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Fieldset } from './fieldset';
-import { B2cPartnershipPaymentTerm } from './b2c-partnership-payment-term';
-
-export default {
-	title: 'B2C Partnership Payment Term',
-	component: B2cPartnershipPaymentTerm,
-};
-
-export const Basic = (args) => (
-	<Fieldset>
-		<B2cPartnershipPaymentTerm {...args} />
-	</Fieldset>
-);
-Basic.args = {
-	displayName: 'Digital FT + The Washington Post',
-	partnerOffer: {
-		duration: '90-day',
-		name: 'All-Access Digital',
-		vendor: 'The Washington Post',
-	},
-	conditions: [
-		'90-day Washington Post subscription must be redeemed by 31 March 2021.',
-	],
-	offerType: 'DIGITAL',
-	options: [
-		{
-			name: 'monthly',
-			price: '£49.99',
-			value: 49.99,
-			isTrial: false,
-			discount: '33%',
-			selected: false,
-		},
-		{
-			name: 'annual',
-			price: '£299.99',
-			value: 299.99,
-			isTrial: false,
-			discount: null,
-			selected: true,
-		},
-	],
-};

package/dist/b2c-partnership-payment-term.js

@@ -1,91 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.B2cPartnershipPaymentTerm = B2cPartnershipPaymentTerm;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function B2cPartnershipPaymentTerm(_ref) {
-  var _ref$fieldId = _ref.fieldId,
-      fieldId = _ref$fieldId === void 0 ? 'paymentTermField' : _ref$fieldId,
-      _ref$inputName = _ref.inputName,
-      inputName = _ref$inputName === void 0 ? 'paymentTerm' : _ref$inputName,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      displayName = _ref.displayName,
-      offerType = _ref.offerType,
-      partnerOffer = _ref.partnerOffer,
-      _ref$conditions = _ref.conditions,
-      conditions = _ref$conditions === void 0 ? [] : _ref$conditions;
-  var durations = {
-    annual: '1 year',
-    quarterly: '3 month',
-    monthly: '1 month'
-  }; // convert to Title Case
-
-  offerType = offerType.split('').map(function (letter, i) {
-    return i !== 0 ? letter.toLowerCase() : letter.toUpperCase();
-  }).join('');
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    id: fieldId,
-    className: "o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
-  }, options.map(function (option) {
-    return option.selected && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "ncf__payment-term__item o-forms-input--radio-round",
-      key: option.value
-    }, /*#__PURE__*/_react["default"].createElement("input", {
-      type: "radio",
-      id: option.value,
-      name: inputName,
-      value: option.value,
-      defaultChecked: true
-    }), /*#__PURE__*/_react["default"].createElement("label", {
-      htmlFor: option.value,
-      className: "o-forms-input__label ncf__payment-term__label"
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ncf__payment-term__title"
-    }, option.price, " - ", displayName), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "ncf__b2c-partnership-payment-term__description"
-    }, /*#__PURE__*/_react["default"].createElement("p", null, "Includes:", /*#__PURE__*/_react["default"].createElement("br", null), durations[option.name], " ", offerType, " subscription to the Financial Times", /*#__PURE__*/_react["default"].createElement("br", null), partnerOffer.duration, " ", partnerOffer.name, " subscription to", ' ', partnerOffer.vendor), conditions.length > 0 && /*#__PURE__*/_react["default"].createElement("p", null, conditions.map(function (line) {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, line, /*#__PURE__*/_react["default"].createElement("br", null));
-    })))));
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ncf__payment-term__legal"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, "We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date."), /*#__PURE__*/_react["default"].createElement("p", null, "We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
-    className: "ncf__link--external",
-    href: "https://help.ft.com/help/legal-privacy/terms-conditions/",
-    title: "FT Legal Terms and Conditions help page",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "Terms & Conditions"), ".")));
-}
-
-B2cPartnershipPaymentTerm.propTypes = {
-  fieldId: _propTypes["default"].string,
-  inputName: _propTypes["default"].string,
-  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    discount: _propTypes["default"].string,
-    isTrial: _propTypes["default"].bool,
-    name: _propTypes["default"].string.isRequired,
-    price: _propTypes["default"].string.isRequired,
-    selected: _propTypes["default"].bool,
-    trialDuration: _propTypes["default"].string,
-    trialPrice: _propTypes["default"].string,
-    value: _propTypes["default"].string.isRequired,
-    monthlyPrice: _propTypes["default"].string
-  })).isRequired,
-  displayName: _propTypes["default"].string.isRequired,
-  partnerOffer: _propTypes["default"].shape({
-    duration: _propTypes["default"].string.isRequired,
-    name: _propTypes["default"].string.isRequired,
-    vendor: _propTypes["default"].string.isRequired
-  }).isRequired,
-  conditions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  offerType: _propTypes["default"].string.isRequired
-};

package/styles/b2c-partnership-payment-term.scss

@@ -1,20 +0,0 @@
-@mixin ncfB2cPartnershipPaymentTerm() {
-	&__b2c-partnership-payment-term {
-		&__description {
-			font-size: 15px;
-
-			p:first-child {
-				margin-top: 0;
-			}
-			p:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		// hide radio button
-		.o-forms-input--radio-round .o-forms-input__label:after,
-		.o-forms-input--radio-round .o-forms-input__label:before {
-			content: none;
-		}
-	}
-}