@financial-times/n-conversion-forms 20.6.0 → 22.0.0

package/components/payment-term.jsx

@@ -161,6 +161,16 @@ export function PaymentTerm ({
 			);
 		};
 
+		const getDisplayName = () => {
+			let displayName = '';
+			if (showTrialCopyInTitle) {
+				const termName = option.displayName ? option.displayName : 'Premium Digital';
+				displayName = `Trial: ${termName} - `;
+			}
+			const termPeriod = nameMap[option.name] ? title : option.title;
+			return `${displayName}${termPeriod} `;
+		};
+
 		return (
 			<div key={option.value} className={className}>
 				<input {...props} />
@@ -176,8 +186,7 @@ export function PaymentTerm ({
 							{ 'ncf__payment-term__title--large-price': largePrice },
 						])}
 					>
-						{showTrialCopyInTitle ? 'Trial: Premium Digital - ' : ''}
-						{nameMap[option.name] ? title : option.title}{' '}
+						{getDisplayName()}
 						{option.subTitle && (
 							<span className="ncf__regular ncf__payment-term__sub-title">
 								{option.subTitle}

package/components/payment-term.spec.js

@@ -153,6 +153,48 @@ describe('PaymentTerm', () => {
 		});
 	});
 
+	describe('getDisplayName', () => {
+		const baseOptions = {
+			name: 'monthly',
+			value: 'monthly',
+			price: '£20.00',
+			monthlyPrice: '£1.67',
+		};
+		describe('non-trial terms', () => {
+			const options = [{
+				...baseOptions,
+				isTrial: false,
+			}];
+			it('renders with time period only if trial.option == false', () => {
+				const wrapper = shallow(<PaymentTerm options={options} />);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(/^Monthly .*$/);
+			});
+		});
+		describe('getDisplayName', () => {
+			const trialOptions = {
+				...baseOptions,
+				isTrial: true,
+			};
+			it('defaults to `Premium digital`', () => {
+				const options = [trialOptions];
+				const wrapper = shallow(<PaymentTerm options={options} />);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
+					/^Trial: Premium Digital - Monthly .*$/
+				);
+			});
+			it('renders using displayName if available', () => {
+				const options = [{
+					...trialOptions,
+					displayName: 'someDisplayName',
+				}];
+				const wrapper = shallow(<PaymentTerm options={options} />);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
+					/^Trial: someDisplayName - Monthly .*/
+				);
+			});
+		});
+	});
+
 	describe('[data-base-amount]', () => {
 		it('renders option.amount as data-base-amount if isTrial is false', () => {
 			const options = [

package/dist/payment-term.js

@@ -146,6 +146,18 @@ function PaymentTerm(_ref) {
       }, option.chargeOnText)));
     };
 
+    var getDisplayName = function getDisplayName() {
+      var displayName = '';
+
+      if (showTrialCopyInTitle) {
+        var termName = option.displayName ? option.displayName : 'Premium Digital';
+        displayName = "Trial: ".concat(termName, " - ");
+      }
+
+      var termPeriod = nameMap[option.name] ? title : option.title;
+      return "".concat(displayName).concat(termPeriod, " ");
+    };
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: option.value,
       className: className
@@ -156,7 +168,7 @@ function PaymentTerm(_ref) {
       className: (0, _classnames["default"])(['ncf__payment-term__title', {
         'ncf__payment-term__title--large-price': largePrice
       }])
-    }, showTrialCopyInTitle ? 'Trial: Premium Digital - ' : '', nameMap[option.name] ? title : option.title, ' ', option.subTitle && /*#__PURE__*/_react["default"].createElement("span", {
+    }, getDisplayName(), option.subTitle && /*#__PURE__*/_react["default"].createElement("span", {
       className: "ncf__regular ncf__payment-term__sub-title"
     }, option.subTitle)), createDescription()));
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "20.6.0",
+  "version": "22.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": {