@financial-times/n-conversion-forms 28.7.0 → 28.9.0

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

@@ -1,6 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`B2CPartnershipConfirmation renders Premium access for premium subscription 1`] = `
+exports[`B2CPartnershipConfirmation renders FT access if subscription prop is null 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <div class="ncf__paragraph">
+      <h1 class="ncf__header ncf__header--confirmation">
+        Welcome to your FT access
+      </h1>
+    </div>
+  </div>
+  <p class="ncf__paragraph">
+    Please check your email to confirm your account and set your password.
+  </p>
+  <p class="ncf__paragraph">
+    Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
+  </p>
+  hello
+  <p class="ncf__paragraph ncf__center">
+    <a href="/"
+       class="ncf__link"
+    >
+      Start reading
+    </a>
+  </p>
+  <p class="ncf__paragraph">
+    <div class="ncf__strong">
+      Can we help?
+    </div>
+    For any queries about your Premium subscription please
+    <a href="https://help.ft.com/"
+       class="ncf__link"
+    >
+      contact Customer Care
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`B2CPartnershipConfirmation renders FT access if subscription prop is undefined 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <div class="ncf__paragraph">
+      <h1 class="ncf__header ncf__header--confirmation">
+        Welcome to your FT access
+      </h1>
+    </div>
+  </div>
+  <p class="ncf__paragraph">
+    Please check your email to confirm your account and set your password.
+  </p>
+  <p class="ncf__paragraph">
+    Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
+  </p>
+  hello
+  <p class="ncf__paragraph ncf__center">
+    <a href="/"
+       class="ncf__link"
+    >
+      Start reading
+    </a>
+  </p>
+  <p class="ncf__paragraph">
+    <div class="ncf__strong">
+      Can we help?
+    </div>
+    For any queries about your Premium subscription please
+    <a href="https://help.ft.com/"
+       class="ncf__link"
+    >
+      contact Customer Care
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`B2CPartnershipConfirmation renders Premium access for premium subscription lowercase 1`] = `
 <div class="ncf ncf__wrapper">
   <div class="ncf__center">
     <div class="ncf__icon ncf__icon--tick ncf__icon--large">
@@ -40,7 +120,7 @@ exports[`B2CPartnershipConfirmation renders Premium access for premium subscript
 </div>
 `;
 
-exports[`B2CPartnershipConfirmation renders Premium access if subscription prop is null 1`] = `
+exports[`B2CPartnershipConfirmation renders Premium access for premium subscription uppercase 1`] = `
 <div class="ncf ncf__wrapper">
   <div class="ncf__center">
     <div class="ncf__icon ncf__icon--tick ncf__icon--large">
@@ -80,7 +160,47 @@ exports[`B2CPartnershipConfirmation renders Premium access if subscription prop
 </div>
 `;
 
-exports[`B2CPartnershipConfirmation renders Standard access for standard subscription 1`] = `
+exports[`B2CPartnershipConfirmation renders Standard access for standard subscription lowercase 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <div class="ncf__paragraph">
+      <h1 class="ncf__header ncf__header--confirmation">
+        Welcome to your Standard access
+      </h1>
+    </div>
+  </div>
+  <p class="ncf__paragraph">
+    Please check your email to confirm your account and set your password.
+  </p>
+  <p class="ncf__paragraph">
+    Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
+  </p>
+  hello
+  <p class="ncf__paragraph ncf__center">
+    <a href="/"
+       class="ncf__link"
+    >
+      Start reading
+    </a>
+  </p>
+  <p class="ncf__paragraph">
+    <div class="ncf__strong">
+      Can we help?
+    </div>
+    For any queries about your Premium subscription please
+    <a href="https://help.ft.com/"
+       class="ncf__link"
+    >
+      contact Customer Care
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`B2CPartnershipConfirmation renders Standard access for standard subscription uppercase 1`] = `
 <div class="ncf ncf__wrapper">
   <div class="ncf__center">
     <div class="ncf__icon ncf__icon--tick ncf__icon--large">
@@ -127,7 +247,87 @@ exports[`B2CPartnershipConfirmation renders as default 1`] = `
     </div>
     <div class="ncf__paragraph">
       <h1 class="ncf__header ncf__header--confirmation">
-        Welcome to your Premium access
+        Welcome to your FT access
+      </h1>
+    </div>
+  </div>
+  <p class="ncf__paragraph">
+    Please check your email to confirm your account and set your password.
+  </p>
+  <p class="ncf__paragraph">
+    Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
+  </p>
+  hello
+  <p class="ncf__paragraph ncf__center">
+    <a href="/"
+       class="ncf__link"
+    >
+      Start reading
+    </a>
+  </p>
+  <p class="ncf__paragraph">
+    <div class="ncf__strong">
+      Can we help?
+    </div>
+    For any queries about your Premium subscription please
+    <a href="https://help.ft.com/"
+       class="ncf__link"
+    >
+      contact Customer Care
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`B2CPartnershipConfirmation renders ePaper access for ePaper subscription lowercase 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <div class="ncf__paragraph">
+      <h1 class="ncf__header ncf__header--confirmation">
+        Welcome to your ePaper access
+      </h1>
+    </div>
+  </div>
+  <p class="ncf__paragraph">
+    Please check your email to confirm your account and set your password.
+  </p>
+  <p class="ncf__paragraph">
+    Explore the homepage &amp; enjoy your unlimited access &amp; exclusive content.
+  </p>
+  hello
+  <p class="ncf__paragraph ncf__center">
+    <a href="/"
+       class="ncf__link"
+    >
+      Start reading
+    </a>
+  </p>
+  <p class="ncf__paragraph">
+    <div class="ncf__strong">
+      Can we help?
+    </div>
+    For any queries about your Premium subscription please
+    <a href="https://help.ft.com/"
+       class="ncf__link"
+    >
+      contact Customer Care
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`B2CPartnershipConfirmation renders ePaper access for ePaper subscription uppercase 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <div class="ncf__paragraph">
+      <h1 class="ncf__header ncf__header--confirmation">
+        Welcome to your ePaper access
       </h1>
     </div>
   </div>

package/components/b2c-partnership-confirmation.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+const productCodeMapping = {
+	P1: 'Standard',
+	P2: 'Premium',
+	EP: 'ePaper',
+};
+
 export function B2CPartnershipConfirmation({
 	ctaElement = null,
 	productCode = null,
@@ -15,8 +21,11 @@ export function B2CPartnershipConfirmation({
 		className: 'ncf__link',
 	};
 
-	const accessType =
-		productCode?.toUpperCase() === 'P1' ? 'Standard' : 'Premium';
+	// Welcome to your Standard access
+	// Welcome to your Premium access
+	// Welcome to your ePaper access
+	// Welcome to your FT access (default)
+	const accessType = productCodeMapping[productCode?.toUpperCase()] || 'FT';
 
 	return (
 		<div className="ncf ncf__wrapper">

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

@@ -10,21 +10,51 @@ describe('B2CPartnershipConfirmation', () => {
 		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
 	});
 
-	it('renders Premium access for premium subscription', () => {
+	it('renders Premium access for premium subscription lowercase', () => {
 		const props = { ctaElement: 'hello', productCode: 'p2' };
 
 		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
 	});
 
-	it('renders Standard access for standard subscription', () => {
+	it('renders Premium access for premium subscription uppercase', () => {
+		const props = { ctaElement: 'hello', productCode: 'P2' };
+
+		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
+	});
+
+	it('renders Standard access for standard subscription lowercase', () => {
 		const props = { ctaElement: 'hello', productCode: 'p1' };
 
 		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
 	});
 
-	it('renders Premium access if subscription prop is null', () => {
+	it('renders Standard access for standard subscription uppercase', () => {
+		const props = { ctaElement: 'hello', productCode: 'P1' };
+
+		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
+	});
+
+	it('renders ePaper access for ePaper subscription lowercase', () => {
+		const props = { ctaElement: 'hello', productCode: 'ep' };
+
+		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
+	});
+
+	it('renders ePaper access for ePaper subscription uppercase', () => {
+		const props = { ctaElement: 'hello', productCode: 'EP' };
+
+		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
+	});
+
+	it('renders FT access if subscription prop is null', () => {
 		const props = { ctaElement: 'hello', productCode: null };
 
 		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
 	});
+
+	it('renders FT access if subscription prop is undefined', () => {
+		const props = { ctaElement: 'hello', productCode: undefined };
+
+		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
+	});
 });

package/components/payment-term.jsx

@@ -406,6 +406,7 @@ PaymentTerm.propTypes = {
 			subTitle: PropTypes.string,
 			bestOffer: PropTypes.bool,
 			chargeOnText: PropTypes.string,
+			fulfilmentOption: PropTypes.string,
 		})
 	),
 	isFixedTermOffer: PropTypes.bool,

package/dist/b2c-partnership-confirmation.js

@@ -7,6 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.B2CPartnershipConfirmation = B2CPartnershipConfirmation;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var productCodeMapping = {
+  P1: 'Standard',
+  P2: 'Premium',
+  EP: 'ePaper'
+};
 function B2CPartnershipConfirmation(_ref) {
   var _ref$ctaElement = _ref.ctaElement,
     ctaElement = _ref$ctaElement === void 0 ? null : _ref$ctaElement,
@@ -20,7 +25,12 @@ function B2CPartnershipConfirmation(_ref) {
     href: 'https://help.ft.com/',
     className: 'ncf__link'
   };
-  var accessType = (productCode === null || productCode === void 0 ? void 0 : productCode.toUpperCase()) === 'P1' ? 'Standard' : 'Premium';
+
+  // Welcome to your Standard access
+  // Welcome to your Premium access
+  // Welcome to your ePaper access
+  // Welcome to your FT access (default)
+  var accessType = productCodeMapping[productCode === null || productCode === void 0 ? void 0 : productCode.toUpperCase()] || 'FT';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf ncf__wrapper"
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/dist/payment-term.js

@@ -288,7 +288,8 @@ PaymentTerm.propTypes = {
     title: _propTypes["default"].string,
     subTitle: _propTypes["default"].string,
     bestOffer: _propTypes["default"].bool,
-    chargeOnText: _propTypes["default"].string
+    chargeOnText: _propTypes["default"].string,
+    fulfilmentOption: _propTypes["default"].string
   })),
   isFixedTermOffer: _propTypes["default"].bool,
   offerDisplayName: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "28.7.0",
+  "version": "28.9.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/utils/payment-term.js

@@ -104,8 +104,9 @@ class PaymentTerm {
 	}
 
 	/**
-	 * Update the payment term options
-	 * @param {Array} options Array of objects contain terms information
+	 * Updates the payment term options.
+	 * @param {Object} options - indexed Object about Array of objects containing terms information. E.g.: { P1Y: {...}, P3M: {...}}
+	 * @throws Will throw an error if a payment term update is not found for a given value.
 	 */
 	updateOptions(options) {
 		const terms = this.$paymentTerm.querySelectorAll(ITEM_CLASS);
@@ -115,7 +116,7 @@ class PaymentTerm {
 			const price = term.querySelector(PRICE_CLASS);
 			const trialPrice = term.querySelector(TRIAL_PRICE_CLASS);
 			const monthlyPrice = term.querySelector(MONTHLY_PRICE_CLASS);
-			const update = options.find((option) => option.value === value);
+			const update = options[value];
 
 			if (!update) {
 				throw new Error(`Payment term update not found for "${value}"`);

package/utils/payment-term.spec.js

@@ -94,7 +94,7 @@ describe('PaymentTerm', () => {
 
 			it('throws an error if not all terms have an update', () => {
 				expect(() => {
-					paymentTerm.updateOptions([]);
+					paymentTerm.updateOptions({});
 				}).toThrow();
 			});
 
@@ -105,12 +105,12 @@ describe('PaymentTerm', () => {
 						? priceStub
 						: elementStub;
 				});
-				paymentTerm.updateOptions([
-					{
+				paymentTerm.updateOptions({
+					test: {
 						value: 'test',
 						price: '£1.01',
 					},
-				]);
+				});
 				expect(priceStub.innerHTML).toEqual('£1.01');
 			});
 
@@ -121,12 +121,12 @@ describe('PaymentTerm', () => {
 						? trialPriceStub
 						: elementStub;
 				});
-				paymentTerm.updateOptions([
-					{
+				paymentTerm.updateOptions({
+					test: {
 						value: 'test',
 						trialPrice: '£1.01',
 					},
-				]);
+				});
 				expect(trialPriceStub.innerHTML).toEqual('£1.01');
 			});
 
@@ -137,31 +137,31 @@ describe('PaymentTerm', () => {
 						? monthlyPriceStub
 						: elementStub;
 				});
-				paymentTerm.updateOptions([
-					{
+				paymentTerm.updateOptions({
+					test: {
 						value: 'test',
 						monthlyPrice: '£1.01',
 					},
-				]);
+				});
 				expect(monthlyPriceStub.innerHTML).toEqual('£1.01');
 			});
 
 			describe('updating base amount', () => {
-				const updatedOptions = [
-					{
+				const updatedOptions = {
+					test: {
 						value: 'test',
 						monthlyPrice: '£1.01',
 						amount: 500,
 						trialAmount: 1,
 					},
-				];
+				};
 
 				beforeEach(() => {
 					elementStub.querySelector.mockReturnValue(elementStub);
 				});
 
 				it('replaces the base amount with the correct updated trial amount', () => {
-					updatedOptions[0].isTrial = true;
+					updatedOptions.test.isTrial = true;
 					paymentTerm.updateOptions(updatedOptions);
 					expect(elementStub.setAttribute).toHaveBeenCalledWith(
 						'data-base-amount',
@@ -170,7 +170,7 @@ describe('PaymentTerm', () => {
 				});
 
 				it('replaces the base amount with the correct updated amount', () => {
-					updatedOptions[0].isTrial = false;
+					updatedOptions.test.isTrial = false;
 					paymentTerm.updateOptions(updatedOptions);
 					expect(elementStub.setAttribute).toHaveBeenCalledWith(
 						'data-base-amount',