@financial-times/n-conversion-forms 47.0.0 → 47.0.1

package/.toolkitstate/ci.json

@@ -1,7 +1,7 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "ee708c8d31911082aac962b8e0037926452196db",
-  "tag": "v47.0.0",
-  "buildNumber": "18511"
+  "version": "bf70543a972ad200ea2b1ef7555c5d7cf4e20be1",
+  "tag": "v47.0.1",
+  "buildNumber": "18612"
 }

package/.toolkitstate/install.json

@@ -1,5 +1,5 @@
 {
   ".toolkitrc.yml": "XiiIocllEaT8xqKRCTpTbJ+yUyduDo5aEHARUQ3vJFfSe187Ci13PEs3bWL272GFJyNz2QgRQhdov2/+LFRKuw==",
-  "package.json": "HfYBmW7sG27rD0HALPkm72vLS98cpd689DW7To1i07hwUJdC4BeaTLkXyAAYyN8UHuE4xJpf/TujsKcDYZ+1yw==",
+  "package.json": "QBfshsb3yvKX/+ogZ5/b81C1BfSdRcV5RZAv599ZTmGXV2w3Lt5k4FQOPWk//m1p3+B1FjXnfdsXISbJ42rlQA==",
   ".circleci/config.yml": "eph42EF3EsL7jvhiiC7D7vG3vGBAGBFVC+Ncmy4Dj4rUNzK8Rls0/cr+bEF/ttMN3J6iSL1xtCXKIJVrtZ4OSQ=="
 }

package/components/delivery-option.stories.js

@@ -34,12 +34,12 @@ Basic.args = {
 	],
 };
 
-export const UKPaperVoucherAutoReniewingDeliveryOptions = (args) => (
+export const UKPaperVoucherAutoRenewingDeliveryOptions = (args) => (
 	<div className="ncf">
 		<DeliveryOption {...args} />
 	</div>
 );
-UKPaperVoucherAutoReniewingDeliveryOptions.args = {
+UKPaperVoucherAutoRenewingDeliveryOptions.args = {
 	country: 'GBR',
 	options: [
 		{

package/components/payment-term.jsx

@@ -1,13 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Period, Monthly } from '@financial-times/n-pricing';
+import { Period, Price } from '@financial-times/n-pricing';
 
-import {
-	getDurationFromISO8601Value,
-	is52WeeksOrLonger,
-	is90DaysOrLonger,
-} from '../helpers';
+import { getDurationFromISO8601Value, is52WeeksOrLonger } from '../helpers';
 
 export function PaymentTerm({
 	fieldId = 'paymentTermField',
@@ -90,16 +86,20 @@ export function PaymentTerm({
 		};
 
 		/**
-		 * Compute monthly price for given term name.
-		 * @returns {string}
+		 * Compute monthly price for given term name, if the term if 90 days or longer.
+		 * @returns {string | undefined}
 		 */
-		const getMonthlyPriceFromPeriod = () => {
-			const periodObj = new Period(option.value);
-			const monthlyPrice = periodObj.calculatePrice('P1M', option.amount);
-			return new Monthly({
-				value: monthlyPrice,
-				symbol: option.symbol,
-			}).getAmount('monthly');
+		const getCalculatedMonthlyPriceIfEligible = () => {
+			const priceObject = new Price(
+				{
+					value: option.amount,
+					symbol: option.symbol,
+				},
+				{
+					period: option.value,
+				}
+			);
+			return priceObject.getMonthlyEquivalentIf90DaysOrLonger()?.amount.value;
 		};
 
 		/**
@@ -158,7 +158,7 @@ export function PaymentTerm({
 		};
 
 		/**
-		 * Returns elements that include the text describing how regularly an auto-reniewing subscription will renew.
+		 * Returns elements that include the text describing how regularly an auto-renewing subscription will renew.
 		 * @returns {React.ReactElement}
 		 */
 		const getRenewalPeriodText = () => {
@@ -173,28 +173,46 @@ export function PaymentTerm({
 
 		/**
 		 * Returns elements that include the text describing the monthly equivalent of the subscription.
-		 * @returns {string}
+		 * Returns null if the term is shorter than 90 days
+		 * @returns {string | null}
 		 */
 		const getEquivalentMonthlyPrice = () => {
-			if (Boolean(option.monthlyPrice) && option.monthlyPrice !== '0') {
+			const calculatedMonthlyPrice = getCalculatedMonthlyPriceIfEligible();
+
+			if (!calculatedMonthlyPrice) {
+				return null;
+			}
+
+			const hasValidMonthlyPrice =
+				option.monthlyPrice !== null &&
+				option.monthlyPrice !== undefined &&
+				option.monthlyPrice !== '' &&
+				option.monthlyPrice !== '0';
+
+			if (hasValidMonthlyPrice) {
 				return isNaN(option.monthlyPrice)
 					? option.monthlyPrice
 					: `${option.symbol}${option.monthlyPrice}`;
 			}
 
-			return getMonthlyPriceFromPeriod();
+			return calculatedMonthlyPrice;
 		};
 
 		/**
-		 * Returns elements that include the text describing the monthly equivalent of the subscription.
-		 * @returns {React.ReactElement}
+		 * Returns elements that include the text describing the monthly equivalent of the subscription, if available.
+		 * @returns {React.ReactElement | null}
 		 */
 		const getEquivalentMonthlyPriceText = () => {
+			const equivalentMonthlyPrice = getEquivalentMonthlyPrice();
+
+			if (!equivalentMonthlyPrice) {
+				return null;
+			}
 			return (
 				<span className="ncf__payment-term__equivalent-price">
 					That’s equivalent to{' '}
 					<span className="ncf__payment-term__monthly-price">
-						{getEquivalentMonthlyPrice()}
+						{equivalentMonthlyPrice}
 					</span>{' '}
 					per month
 				</span>
@@ -261,9 +279,7 @@ export function PaymentTerm({
 				return (
 					<div className="ncf__payment-term__description">
 						{getPriceText()}
-
-						{is90DaysOrLonger(option.value) && getEquivalentMonthlyPriceText()}
-
+						{getEquivalentMonthlyPriceText()}
 						{option.subscriptionAutoRenewTerm && getRenewalPeriodText()}
 					</div>
 				);

package/components/payment-term.spec.js

@@ -8,6 +8,20 @@ import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-c
 expect.extend(expectToRenderCorrectly);
 Enzyme.configure({ adapter: new Adapter() });
 
+const mockGetMonthlyEquivalentIf90DaysOrLonger = jest.fn();
+
+jest.mock('@financial-times/n-pricing', () => {
+	const actual = jest.requireActual('@financial-times/n-pricing');
+
+	return {
+		...actual,
+		Price: jest.fn().mockImplementation(() => ({
+			getMonthlyEquivalentIf90DaysOrLonger:
+				mockGetMonthlyEquivalentIf90DaysOrLonger,
+		})),
+	};
+});
+
 const buildOption = (overrides = {}) => ({
 	name: 'monthly',
 	price: '£20.00',
@@ -21,6 +35,10 @@ const buildOption = (overrides = {}) => ({
 });
 
 describe('PaymentTerm', () => {
+	beforeEach(() => {
+		mockGetMonthlyEquivalentIf90DaysOrLonger.mockReset();
+	});
+
 	describe('default props are used', () => {
 		it('renders correctly', () => {
 			const props = {};
@@ -478,6 +496,9 @@ describe('PaymentTerm', () => {
 					describe('option.monthlyPrice is provided', () => {
 						describe('option.monthlyPrice value is "0"', () => {
 							it('displays the equivalent monthly price calculated from the option property values', () => {
+								mockGetMonthlyEquivalentIf90DaysOrLonger.mockReturnValue({
+									amount: { value: '£10.00' },
+								});
 								const option = buildOption({
 									name: 'annual',
 									value: 'P1Y',
@@ -503,6 +524,9 @@ describe('PaymentTerm', () => {
 
 						describe('option.monthlyPrice value can be parsed as a number, e.g. 54.17', () => {
 							it('displays the equivalent monthly price constructed from option.symbol and option.monthlyPrice values', () => {
+								mockGetMonthlyEquivalentIf90DaysOrLonger.mockReturnValue({
+									amount: { value: '£99.99' }, // This value should be ignored in favour of the option.monthlyPrice value
+								});
 								const option = buildOption({
 									name: 'annual',
 									value: 'P1Y',
@@ -526,8 +550,11 @@ describe('PaymentTerm', () => {
 							});
 						});
 
-						describe('option.monthlyPrice value cannot be pased as a number, e.g. "£54.17"', () => {
+						describe('option.monthlyPrice value cannot be parsed as a number, e.g. "£54.17"', () => {
 							it('displays the equivalent monthly price derived directly from the option.monthlyPrice value', () => {
+								mockGetMonthlyEquivalentIf90DaysOrLonger.mockReturnValue({
+									amount: { value: '£99.99' }, // This value should be ignored in favour of the option.monthlyPrice value
+								});
 								const option = buildOption({
 									name: 'annual',
 									value: 'P1Y',
@@ -554,6 +581,9 @@ describe('PaymentTerm', () => {
 
 					describe('option.monthlyPrice is not provided', () => {
 						it('displays the equivalent monthly price calculated from the option property values', () => {
+							mockGetMonthlyEquivalentIf90DaysOrLonger.mockReturnValue({
+								amount: { value: '£10.00' },
+							});
 							const option = buildOption({
 								name: 'annual',
 								value: 'P1Y',
@@ -580,6 +610,7 @@ describe('PaymentTerm', () => {
 
 				describe('offer term is shorter than 90 days', () => {
 					it('does not display the equivalent monthly price', () => {
+						mockGetMonthlyEquivalentIf90DaysOrLonger.mockReturnValue(undefined);
 						const options = [
 							buildOption({
 								value: 'P8W',

package/dist/payment-term.jsx

@@ -103,16 +103,18 @@ function PaymentTerm(_ref) {
     };
 
     /**
-     * Compute monthly price for given term name.
-     * @returns {string}
+     * Compute monthly price for given term name, if the term if 90 days or longer.
+     * @returns {string | undefined}
      */
-    var getMonthlyPriceFromPeriod = function getMonthlyPriceFromPeriod() {
-      var periodObj = new _nPricing.Period(option.value);
-      var monthlyPrice = periodObj.calculatePrice('P1M', option.amount);
-      return new _nPricing.Monthly({
-        value: monthlyPrice,
+    var getCalculatedMonthlyPriceIfEligible = function getCalculatedMonthlyPriceIfEligible() {
+      var _priceObject$getMonth;
+      var priceObject = new _nPricing.Price({
+        value: option.amount,
         symbol: option.symbol
-      }).getAmount('monthly');
+      }, {
+        period: option.value
+      });
+      return (_priceObject$getMonth = priceObject.getMonthlyEquivalentIf90DaysOrLonger()) === null || _priceObject$getMonth === void 0 ? void 0 : _priceObject$getMonth.amount.value;
     };
 
     /**
@@ -155,7 +157,7 @@ function PaymentTerm(_ref) {
     };
 
     /**
-     * Returns elements that include the text describing how regularly an auto-reniewing subscription will renew.
+     * Returns elements that include the text describing how regularly an auto-renewing subscription will renew.
      * @returns {React.ReactElement}
      */
     var getRenewalPeriodText = function getRenewalPeriodText() {
@@ -168,25 +170,35 @@ function PaymentTerm(_ref) {
 
     /**
      * Returns elements that include the text describing the monthly equivalent of the subscription.
-     * @returns {string}
+     * Returns null if the term is shorter than 90 days
+     * @returns {string | null}
      */
     var getEquivalentMonthlyPrice = function getEquivalentMonthlyPrice() {
-      if (Boolean(option.monthlyPrice) && option.monthlyPrice !== '0') {
+      var calculatedMonthlyPrice = getCalculatedMonthlyPriceIfEligible();
+      if (!calculatedMonthlyPrice) {
+        return null;
+      }
+      var hasValidMonthlyPrice = option.monthlyPrice !== null && option.monthlyPrice !== undefined && option.monthlyPrice !== '' && option.monthlyPrice !== '0';
+      if (hasValidMonthlyPrice) {
         return isNaN(option.monthlyPrice) ? option.monthlyPrice : "".concat(option.symbol).concat(option.monthlyPrice);
       }
-      return getMonthlyPriceFromPeriod();
+      return calculatedMonthlyPrice;
     };
 
     /**
-     * Returns elements that include the text describing the monthly equivalent of the subscription.
-     * @returns {React.ReactElement}
+     * Returns elements that include the text describing the monthly equivalent of the subscription, if available.
+     * @returns {React.ReactElement | null}
      */
     var getEquivalentMonthlyPriceText = function getEquivalentMonthlyPriceText() {
+      var equivalentMonthlyPrice = getEquivalentMonthlyPrice();
+      if (!equivalentMonthlyPrice) {
+        return null;
+      }
       return /*#__PURE__*/_react["default"].createElement("span", {
         className: "ncf__payment-term__equivalent-price"
       }, "That\u2019s equivalent to", ' ', /*#__PURE__*/_react["default"].createElement("span", {
         className: "ncf__payment-term__monthly-price"
-      }, getEquivalentMonthlyPrice()), ' ', "per month");
+      }, equivalentMonthlyPrice), ' ', "per month");
     };
 
     /**
@@ -230,7 +242,7 @@ function PaymentTerm(_ref) {
       if (isValidPeriod(option.value)) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: "ncf__payment-term__description"
-        }, getPriceText(), (0, _helpers.is90DaysOrLonger)(option.value) && getEquivalentMonthlyPriceText(), option.subscriptionAutoRenewTerm && getRenewalPeriodText());
+        }, getPriceText(), getEquivalentMonthlyPriceText(), option.subscriptionAutoRenewTerm && getRenewalPeriodText());
       }
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         className: largePrice ? 'ncf__payment-term__large-price' : ''

package/helpers/duration-helpers.js

@@ -45,7 +45,6 @@ const DAYS_IN_A_YEAR = 365; // Disregarding leap years
 const DAYS_IN_A_MONTH = 30; // Approximate
 const DAYS_IN_A_WEEK = 7;
 
-const DAYS_IN_90_DAYS = 90;
 const DAYS_IN_52_WEEKS = 52 * DAYS_IN_A_WEEK;
 
 /**
@@ -85,20 +84,7 @@ const is52WeeksOrLonger = (iso8601Duration) => {
 	return totalDays >= DAYS_IN_52_WEEKS;
 };
 
-/**
- * Approximate check of whether an ISO 8601 duration is 90 days or longer.
- * @param {string} iso8601Duration
- * @returns {boolean}
- */
-const is90DaysOrLonger = (iso8601Duration) => {
-	const totalDays = parseISODurationToDays(iso8601Duration);
-	if (totalDays === null) return false;
-
-	return totalDays >= DAYS_IN_90_DAYS;
-};
-
 module.exports = {
 	getDurationFromISO8601Value,
 	is52WeeksOrLonger,
-	is90DaysOrLonger,
 };

package/helpers/duration-helpers.spec.js

@@ -1,7 +1,6 @@
 const {
 	getDurationFromISO8601Value,
 	is52WeeksOrLonger,
-	is90DaysOrLonger,
 } = require('./duration-helpers');
 
 describe('Duration Utils', () => {
@@ -140,36 +139,4 @@ describe('Duration Utils', () => {
 			});
 		});
 	});
-
-	describe('is90DaysOrLonger', () => {
-		describe('returns true for durations >= 90 days', () => {
-			const DURATIONS_OF_90_DAYS_OR_MORE = [
-				'P3Y',
-				'P26M',
-				'P2Y',
-				'P13M',
-				'P1Y',
-				'P52W',
-				'P6M',
-				'P13W',
-				'P3M',
-			];
-
-			DURATIONS_OF_90_DAYS_OR_MORE.forEach((duration) => {
-				it(`returns true for ${duration}`, () => {
-					expect(is90DaysOrLonger(duration)).toBe(true);
-				});
-			});
-		});
-
-		describe('returns false for durations < 90 days', () => {
-			const DURATIONS_OF_LESS_THAN_90_DAYS = ['P8W', 'P1M'];
-
-			DURATIONS_OF_LESS_THAN_90_DAYS.forEach((duration) => {
-				it(`returns false for ${duration}`, () => {
-					expect(is90DaysOrLonger(duration)).toBe(false);
-				});
-			});
-		});
-	});
 });

package/helpers/index.js

@@ -17,5 +17,4 @@ module.exports = {
 	getDurationFromISO8601Value:
 		require('./duration-helpers').getDurationFromISO8601Value,
 	is52WeeksOrLonger: require('./duration-helpers').is52WeeksOrLonger,
-	is90DaysOrLonger: require('./duration-helpers').is90DaysOrLonger,
 };

package/helpers/index.spec.js

@@ -53,8 +53,4 @@ describe('helpers', () => {
 	it('export is52WeeksOrLonger', () => {
 		expect(helpers).toHaveProperty('is52WeeksOrLonger');
 	});
-
-	it('export is90DaysOrLonger', () => {
-		expect(helpers).toHaveProperty('is90DaysOrLonger');
-	});
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "47.0.0",
+  "version": "47.0.1",
   "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
   "homepage": "https://github.com/Financial-Times/n-conversion-forms#readme",
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@financial-times/n-pricing": "8.0.0",
+    "@financial-times/n-pricing": "8.1.1",
     "classnames": "2.5.1",
     "fetchres": "1.7.2",
     "lodash.get": "4.4.2",

package/styles/payment-type.scss

@@ -61,10 +61,6 @@
       margin-bottom: var(--o3-spacing-3xs);
       width: 100%;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-
       label {
         float: none;
         width: 100%;