@financial-times/n-conversion-forms 24.0.0 → 25.1.0

package/components/__snapshots__/b2c-partnership-confirmation.spec.js.snap

@@ -7,7 +7,7 @@ exports[`B2CPartnershipConfirmation renders as default 1`] = `
     </div>
     <div class="ncf__paragraph">
       <h1 class="ncf__header ncf__header--confirmation">
-        Welcome to your three months&#x27; Premium access
+        Welcome to your 30 days&#x27; Premium access
       </h1>
     </div>
   </div>

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/__snapshots__/debug.spec.js.snap

@@ -5,7 +5,7 @@ exports[`Debug renders with default props 1`] = `""`;
 exports[`Debug renders with isTest 1`] = `
 <div class="ncf__debug-panel">
   <span class="ncf__debug-environment">
-    <a class="ncf__button ncf__button--inverse ncf__debug-button--test"
+    <a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test"
        onclick="setTestEnvironment('off');"
     >
       <strong>
@@ -30,7 +30,7 @@ exports[`Debug renders with isTest 1`] = `
 		GBR: 'EC4M9BT',
 		USA: '10028',
 		CAN: 'K0E 9Z9'
-	}
+	};
 
 	var debugData = {
 		billingCity: 'London',
@@ -54,9 +54,12 @@ exports[`Debug renders with isTest 1`] = `
 		postCode: postcodeByCountry[COUNTRY_CODE],
 		primaryTelephone: '0987654321',
 		responsibility: 'ADL',
-		ukVisa: '4111111111111111',
+		ukVisaWorldpay: '4111111111111111',
 		usAmex: '378282246310005',
-		usVisa: '4112344112344113'
+		usVisaWorldpay: '4112344112344113',
+		checkoutVisa: '4242424242424242',
+		checkout3dsChallenge: 'Checkout1!',
+		chaseVisa: '4011361100000010',
 	};
 
 	function logout () {
@@ -130,6 +133,9 @@ exports[`Debug renders with isTest 1`] = `
 	.ncf__debug-button--production {
 		background-color: #990000;
 	}
+	.ncf__button--debug {
+		padding: 0px 5px;
+	}
 </style>
 `;
 
@@ -138,7 +144,7 @@ exports[`Debug renders with links 1`] = `""`;
 exports[`Debug renders with showHelpers 1`] = `
 <div class="ncf__debug-panel">
   <span class="ncf__debug-environment">
-    <a class="ncf__button ncf__button--inverse ncf__debug-button--production"
+    <a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production"
        onclick="setTestEnvironment('on');"
     >
       <strong>
@@ -148,19 +154,19 @@ exports[`Debug renders with showHelpers 1`] = `
     </a>
   </span>
   <span class="ncf__debug-helpers">
-    <button class="ncf__button ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug ncf__button--inverse"
             onclick="logout();"
             title="Logout and refresh"
     >
       Logout
     </button>
-    <button class="ncf__button ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug ncf__button--inverse"
             onclick="fillForm();"
             title="Fill form with debug data"
     >
       Fill
     </button>
-    <button class="ncf__button ncf__button--inverse"
+    <button class="ncf__button ncf__button--debug ncf__button--inverse"
             onclick="fillForm(); submitForm();"
             title="Fill form with debug data and submit"
     >
@@ -183,7 +189,7 @@ exports[`Debug renders with showHelpers 1`] = `
 		GBR: 'EC4M9BT',
 		USA: '10028',
 		CAN: 'K0E 9Z9'
-	}
+	};
 
 	var debugData = {
 		billingCity: 'London',
@@ -207,9 +213,12 @@ exports[`Debug renders with showHelpers 1`] = `
 		postCode: postcodeByCountry[COUNTRY_CODE],
 		primaryTelephone: '0987654321',
 		responsibility: 'ADL',
-		ukVisa: '4111111111111111',
+		ukVisaWorldpay: '4111111111111111',
 		usAmex: '378282246310005',
-		usVisa: '4112344112344113'
+		usVisaWorldpay: '4112344112344113',
+		checkoutVisa: '4242424242424242',
+		checkout3dsChallenge: 'Checkout1!',
+		chaseVisa: '4011361100000010',
 	};
 
 	function logout () {
@@ -283,5 +292,8 @@ exports[`Debug renders with showHelpers 1`] = `
 	.ncf__debug-button--production {
 		background-color: #990000;
 	}
+	.ncf__button--debug {
+		padding: 0px 5px;
+	}
 </style>
 `;

package/components/b2c-partnership-confirmation.jsx

@@ -19,7 +19,7 @@ export function B2CPartnershipConfirmation ({ ctaElement = null }) {
 				<div className="ncf__paragraph">
 					{
 						<h1 className="ncf__header ncf__header--confirmation">
-							{'Welcome to your three months\' Premium access'}
+							{'Welcome to your 30 days\' Premium access'}
 						</h1>
 					}
 				</div>

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/debug.jsx

@@ -8,18 +8,19 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	// entirely this component should be rethought.
 	const testEnvironment = `
 		<span class="ncf__debug-environment">
-			<a class="ncf__button ncf__button--inverse ncf__debug-button--test" onclick="setTestEnvironment('off');"><strong>TEST</strong> relax you are using the test API</a>
+			<a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test" onclick="setTestEnvironment('off');"><strong>TEST</strong> relax you are using the test API</a>
 		</span>
 	`;
 	const productionEnvironment = `
 		<span class="ncf__debug-environment">
-			<a class="ncf__button ncf__button--inverse ncf__debug-button--production" onclick="setTestEnvironment('on');"><strong>PRODUCTION</strong> careful you are using the production API</a>
+			<a class="ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production" onclick="setTestEnvironment('on');"><strong>PRODUCTION</strong> careful you are using the production API</a>
 		</span>
 	`;
 	const testCards = `
-		<button id="ncf-copy-uk-visa" class="ncf__button ncf__button--inverse" onclick="copyToClipboard('ukVisa');" title="Copy UK Visa card number to clipboard">UK Visa</button>
-		<button id="ncf-copy-us-visa" class="ncf__button ncf__button--inverse" onclick="copyToClipboard('usVisa');" title="Copy US Visa card number to clipboard">US Visa</button>
-		<button id="ncf-copy-us-amex" class="ncf__button ncf__button--inverse" onclick="copyToClipboard('usAmex');" title="Copy US Amex card number to clipboard">US Amex</button>
+		<button id="ncf-copy-visa-checkout-card" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('checkoutVisa');" title="Copy Checkout Visa test card number to clipboard">EU Visa (cvv:100)</button>
+		<button id="ncf-copy-visa-checkout-3ds" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('checkout3dsChallenge');" title="Copy Checkout cvv number (default success) to clipboard">EU 3ds challenge</button>
+		<button id="ncf-copy-visa-chase-card" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="copyToClipboard('chaseVisa');" title="Copy Chase card number to clipboard">US Visa (exp:1230,cvv:111)</button>
+		<button id="ncf-link-checkout-cards" class="ncf__button ncf__button--debug ncf__button--inverse" onclick="window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');" title="Checkout test cards documentation">Doc:Checkout</button>
 	`;
 	const linksString = Object.keys(links).map(
 		(link) =>
@@ -27,9 +28,9 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	);
 	const helpers = `
 		<span class="ncf__debug-helpers">
-			<button class="ncf__button ncf__button--inverse" onclick="logout();" title="Logout and refresh">Logout</button>
-			<button class="ncf__button ncf__button--inverse" onclick="fillForm();" title="Fill form with debug data">Fill</button>
-			<button class="ncf__button ncf__button--inverse" onclick="fillForm(); submitForm();" title="Fill form with debug data and submit">Fill &amp; Submit</button>
+			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="logout();" title="Logout and refresh">Logout</button>
+			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm();" title="Fill form with debug data">Fill</button>
+			<button class="ncf__button ncf__button--debug ncf__button--inverse" onclick="fillForm(); submitForm();" title="Fill form with debug data and submit">Fill &amp; Submit</button>
 			${isTest ? testCards : ''}
 			${links.length ? linksString : ''}
 		</span>
@@ -55,7 +56,7 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 		GBR: 'EC4M9BT',
 		USA: '10028',
 		CAN: 'K0E 9Z9'
-	}
+	};
 
 	var debugData = {
 		billingCity: 'London',
@@ -79,9 +80,12 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 		postCode: postcodeByCountry[COUNTRY_CODE],
 		primaryTelephone: '0987654321',
 		responsibility: 'ADL',
-		ukVisa: '4111111111111111',
+		ukVisaWorldpay: '4111111111111111',
 		usAmex: '378282246310005',
-		usVisa: '4112344112344113'
+		usVisaWorldpay: '4112344112344113',
+		checkoutVisa: '4242424242424242',
+		checkout3dsChallenge: 'Checkout1!',
+		chaseVisa: '4011361100000010',
 	};
 
 	function logout () {
@@ -157,6 +161,9 @@ export function Debug ({ isTest = false, showHelpers = false, links = {} }) {
 	.ncf__debug-button--production {
 		background-color: #990000;
 	}
+	.ncf__button--debug {
+		padding: 0px 5px;
+	}
 	`,
 	};
 

package/components/debug.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Debug } from './debug';
+
+export default {
+	title: 'Debug helpers',
+	component: Debug,
+};
+
+export const Basic = (args) => <Debug {...args} />;
+Basic.args = {
+	isTest: true,
+	showHelpers: true,
+};

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

@@ -26,11 +26,11 @@ export function PaymentTerm ({
 	 * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
 	 * @returns {string}
 	 */
-	 function getMontlyPriceFromPeriod (amount, currency, period) {
+	const getMontlyPriceFromPeriod = (amount, currency, period) => {
 		const periodObj = new Period(period);
 		const monthlyPrice = periodObj.calculatePrice('P1M', amount);
 		return new Monthly({ value: monthlyPrice, currency }).getAmount('monthly');
-	}
+	};
 
 	/**
 	 * returns period converted to time if found
@@ -192,6 +192,15 @@ export function PaymentTerm ({
 			);
 		};
 
+		const createB2cDiscountCopy = () => {
+			return (
+				option.name === 'annual' && 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/b2c-partnership-confirmation.js

@@ -32,7 +32,7 @@ function B2CPartnershipConfirmation(_ref) {
     className: "ncf__paragraph"
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "ncf__header ncf__header--confirmation"
-  }, 'Welcome to your three months\' Premium access'))), /*#__PURE__*/_react["default"].createElement("p", {
+  }, 'Welcome to your 30 days\' Premium access'))), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph"
   }, "Please check your email to confirm your account and set your password."), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph"

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({