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

package/components/payment-term.stories.js

@@ -7,7 +7,7 @@ export default {
 	component: PaymentTerm,
 };
 
-export const Basic = (args) => (
+export const AutoRenewingTermType = (args) => (
 	<div className="ncf">
 		<Fieldset>
 			<PaymentTerm {...args} />
@@ -15,8 +15,55 @@ export const Basic = (args) => (
 	</div>
 );
 
-Basic.args = {
+AutoRenewingTermType.args = {
 	options: [
+		{
+			name: '3 yearly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '$909.00',
+			trialPrice: '$0.00',
+			trialDuration: '',
+			monthlyPrice: '0',
+			amount: '909.00',
+			trialAmount: null,
+			value: 'P3Y',
+			symbol: '$',
+			subscriptionAutoRenewTerm: true,
+		},
+		{
+			name: '26 monthly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '£335.00',
+			trialPrice: '£0.00',
+			trialDuration: '',
+			monthlyPrice: null,
+			amount: '335.00',
+			trialAmount: null,
+			value: 'P26M',
+			symbol: '£',
+			subscriptionAutoRenewTerm: true,
+		},
+		// 2 yearly (non-trial)
+		{
+			name: '2 yearly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '£310.00',
+			trialPrice: '£0.00',
+			trialDuration: '',
+			monthlyPrice: null,
+			amount: '310.00',
+			trialAmount: null,
+			value: 'P2Y',
+			symbol: '£',
+			subscriptionAutoRenewTerm: true,
+		},
+		// 2 yearly (trial)
 		{
 			name: '2 yearly',
 			isTrial: true,
@@ -29,49 +76,70 @@ Basic.args = {
 			amount: '645.00',
 			trialAmount: 100,
 			value: 'P2Y',
-			currency: 'USD',
+			symbol: '$',
+			subscriptionAutoRenewTerm: true,
 		},
 		{
-			name: '3 yearly',
+			name: '13 monthly',
 			isTrial: false,
 			discount: '',
 			selected: false,
-			price: '$909.00',
-			trialPrice: '$0.00',
+			price: '£155.00',
+			trialPrice: '£0.00',
 			trialDuration: '',
-			monthlyPrice: '0',
-			amount: '909.00',
+			monthlyPrice: null,
+			amount: '155.00',
 			trialAmount: null,
-			value: 'P3Y',
-			currency: 'USD',
+			value: 'P13M',
+			symbol: '£',
+			subscriptionAutoRenewTerm: true,
 		},
+		// Annual whose value is P1Y
 		{
-			name: '6 monthly',
+			name: 'annual',
 			isTrial: false,
 			discount: '',
-			selected: false,
-			price: '$229.00',
+			selected: true,
+			price: '$385.00',
 			trialPrice: '$0.00',
 			trialDuration: '',
-			monthlyPrice: '0',
-			amount: '229.00',
+			monthlyPrice: '$32.09',
+			amount: '385.00',
 			trialAmount: null,
-			value: 'P6M',
-			currency: 'USD',
+			value: 'P1Y',
+			symbol: '$',
+			subscriptionAutoRenewTerm: true,
 		},
+		// Annual whose value is P52W
 		{
 			name: 'annual',
 			isTrial: false,
 			discount: '',
-			selected: true,
-			price: '$385.00',
+			selected: false,
+			price: '£140.00',
+			trialPrice: '£0.00',
+			trialDuration: '',
+			monthlyPrice: null,
+			amount: '140.00',
+			trialAmount: null,
+			value: 'P52W',
+			symbol: '£',
+			subscriptionAutoRenewTerm: true,
+		},
+		{
+			name: '6 monthly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '$229.00',
 			trialPrice: '$0.00',
 			trialDuration: '',
-			monthlyPrice: '$32.09',
-			amount: '385.00',
+			monthlyPrice: '0',
+			amount: '229.00',
 			trialAmount: null,
-			value: 'P1Y',
-			currency: 'USD',
+			value: 'P6M',
+			symbol: '$',
+			subscriptionAutoRenewTerm: true,
 		},
 		{
 			name: 'quarterly',
@@ -85,9 +153,27 @@ Basic.args = {
 			amount: '95.00',
 			trialAmount: null,
 			value: 'P3M',
-			currency: 'USD',
+			symbol: '$',
+			subscriptionAutoRenewTerm: true,
+		},
+		{
+			name: 'monthly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '£42.00',
+			trialPrice: '£0.00',
+			trialDuration: '',
+			monthlyPrice: null,
+			amount: '42.00',
+			trialAmount: null,
+			value: 'P1M',
+			symbol: '£',
+			subscriptionAutoRenewTerm: true,
 		},
 	],
+	isAutoRenewingSubscriptionTermType: true,
+	isNonRenewingSubscriptionTermType: false,
 };
 
 export const NonRenewingTermType = (args) => (
@@ -99,13 +185,38 @@ export const NonRenewingTermType = (args) => (
 );
 NonRenewingTermType.args = {
 	options: [
+		{
+			name: 'quarterly',
+			isTrial: false,
+			discount: '',
+			selected: true,
+			price: '£15.00',
+			trialPrice: '£0.00',
+			trialDuration: '',
+			monthlyPrice: null,
+			amount: '15.00',
+			trialAmount: null,
+			value: 'P13W',
+			symbol: '£',
+			subscriptionAutoRenewTerm: false,
+		},
 		{
 			name: '8 weeks',
+			isTrial: false,
+			discount: '',
+			selected: false,
 			price: '£19.00',
+			trialPrice: '£0.00',
+			trialDuration: '',
+			monthlyPrice: null,
 			amount: '19.00',
+			trialAmount: null,
 			value: 'P8W',
+			symbol: '£',
+			subscriptionAutoRenewTerm: false,
 		},
 	],
+	isAutoRenewingSubscriptionTermType: false,
 	isNonRenewingSubscriptionTermType: true,
 };
 

package/dist/payment-term.jsx

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _nPricing = require("@financial-times/n-pricing");
+var _helpers = require("../helpers");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function PaymentTerm(_ref) {
@@ -36,138 +37,41 @@ function PaymentTerm(_ref) {
     _ref$isNonRenewingSub = _ref.isNonRenewingSubscriptionTermType,
     isNonRenewingSubscriptionTermType = _ref$isNonRenewingSub === void 0 ? false : _ref$isNonRenewingSub;
   /**
-   * Compute monthly price for given term name
-   * @param {number} amount price in number format
-   * @param {string} currency country id of the currency
-   * @param {string} period (expressed in IS0 8601 duration format): e.g. PxY (yearly) or PxM (montly) where x is the amount of years/months
+   * Capitalises a string.
+   * @param {string} Input string to be capitalised
    * @returns {string}
    */
-  var getMonthlyPriceFromPeriod = function getMonthlyPriceFromPeriod(amount, currency, period) {
-    var periodObj = new _nPricing.Period(period);
-    var monthlyPrice = periodObj.calculatePrice('P1M', amount);
-    return new _nPricing.Monthly({
-      value: monthlyPrice,
-      currency: currency
-    }).getAmount('monthly');
+  var capitalise = function capitalise(string) {
+    return Boolean(string) ? string[0].toUpperCase() + string.slice(1) : string;
   };
 
   /**
-   * returns period converted to time if found
-   * otherwise returns empty string to avoid show information not mapped
-   * @param {string} period (expressed in IS0 8601 duration format): PxY (yearly), PxM (montly), PxW (weekly), of PxD (daily), where x is the amount of years/months/weeks/days
-   * @returns {string}
+   * Creates the JSX for a single payment-term option, including the input,
+   * title, discount messaging, and descriptive pricing copy.
+   *
+   * @param {Object} option - Payment term configuration
+   * @param {string} option.value - ISO 8601 duration of the subscription term of the offer
+   * @param {string} option.name - term name, e.g. "monthly", "annual", "2 yearly
+   * @param {string} option.price - Formatted display price
+   * @param {string|number} [option.amount] - Price expressed in numerical terms
+   * @param {string} [option.symbol] - Currency symbol, e.g. £
+   * @param {string} [option.monthlyPrice] - Precomputed monthly equivalent price (can be with or without currency symbol)
+   * @param {boolean} [option.discount] - Whether the option should display discount messaging
+   * @param {boolean} [option.bestOffer] - Whether the option should show "Best offer" instead of standard discount copy
+   * @param {boolean} [option.selected] - Whether the option is selected by default
+   * @param {boolean} [option.isTrial] - Whether the option is a trial offer
+   * @param {boolean} [option.subscriptionAutoRenewTerm] - Whether the option is for an auto-renewing subscription
+   * @param {number} [option.trialAmount] - Amount used for trial pricing
+   * @param {string} [option.trialDuration] - Human-readable trial duration copy
+   * @param {string} [option.trialPrice] - Formatted trial price
+   * @param {string} [option.displayName] - Override label for the term title
+   * @param {string} [option.title] - Fallback title for legacy or non-period terms
+   * @param {string} [option.subTitle] - Optional subtitle shown alongside the term title
+   * @param {string} [option.chargeOnText] - Optional charge timing copy for non-period offers
+   * @param {boolean} [option.b2cPartnership] - Whether the option is part of a B2C partnership offer
+   * @param {string} [option.b2cDiscountCopy] - Partnership-specific discount copy
+   * @returns {React.ReactElement} A rendered payment term option
    */
-  var getTimeFromPeriod = function getTimeFromPeriod(period) {
-    var periodUnitCodeToWordMap = {
-      Y: 'years',
-      M: 'months',
-      W: 'weeks',
-      D: 'days'
-    };
-    var periodUnitCode = period.substring(period.length - 1);
-    var freq = periodUnitCodeToWordMap[periodUnitCode] || '';
-    var amount = period.substring(1, period.length - 1);
-    return period ? "".concat(amount, " ").concat(freq) : '';
-  };
-  var isValidPeriod = function isValidPeriod(period) {
-    try {
-      // Period should throw an error if it is not properly provided
-      // in order to validate it, we just send in case type is string
-      new _nPricing.Period(typeof period === 'string' ? period : '');
-      return true;
-    } catch (e) {
-      return false;
-    }
-  };
-  var nameMap = {
-    annual: {
-      title: 'Annual',
-      price: function price(_price) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Single", ' ', /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price ncf__strong"
-        }, _price), ' ', "payment");
-      },
-      trialPrice: function trialPrice(price) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price"
-        }, price), " per year after the trial period.");
-      },
-      monthlyPrice: function monthlyPrice(price) {
-        return price && /*#__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"
-        }, price), ' ', "per month");
-      },
-      renewsText: function renewsText() {
-        return /*#__PURE__*/_react["default"].createElement("p", {
-          className: "ncf__payment-term__renews-text"
-        }, "Renews annually unless cancelled");
-      }
-    },
-    quarterly: {
-      title: 'Quarterly',
-      price: function price(_price2) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price"
-        }, _price2), " per quarter");
-      },
-      trialPrice: function trialPrice(price) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price"
-        }, price), " per quarter after the trial period.");
-      },
-      monthlyPrice: function monthlyPrice() {},
-      renewsText: function renewsText() {
-        return /*#__PURE__*/_react["default"].createElement("p", {
-          className: "ncf__payment-term__renews-text"
-        }, "Renews quarterly unless cancelled");
-      }
-    },
-    monthly: {
-      title: 'Monthly',
-      price: function price(_price3) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price"
-        }, _price3), " per month");
-      },
-      trialPrice: function trialPrice(price) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price"
-        }, price), " per month after the trial period.");
-      },
-      monthlyPrice: function monthlyPrice() {},
-      renewsText: function renewsText() {
-        return /*#__PURE__*/_react["default"].createElement("p", {
-          className: "ncf__payment-term__renews-text"
-        }, 'Renews monthly unless cancelled');
-      }
-    },
-    custom: {
-      price: function price(_price4) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Single", ' ', /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price ncf__strong"
-        }, _price4), ' ', "payment");
-      },
-      trialPrice: function trialPrice(_trialPrice, trialPeriod) {
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
-          className: "ncf__payment-term__price"
-        }, _trialPrice), " per", ' ', trialPeriod, "after the trial period.");
-      },
-      monthlyPrice: function monthlyPrice(_monthlyPrice) {
-        return Boolean(_monthlyPrice) && /*#__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"
-        }, _monthlyPrice), ' ', "per month");
-      },
-      renewsText: function renewsText(renewalPeriod) {
-        return Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
-          className: "ncf__payment-term__renews-text"
-        }, "Renews every ", renewalPeriod, " unless cancelled");
-      }
-    }
-  };
   var createPaymentTerm = function createPaymentTerm(option) {
     var className = (0, _classnames["default"])(['ncf__payment-term__item', 'o-forms-input--radio-round', {
       'ncf__payment-term__item--discount': option.discount
@@ -182,50 +86,197 @@ function PaymentTerm(_ref) {
     }, option.selected && {
       defaultChecked: true
     });
+
+    /**
+     * Determines whether input is a valid ISO 8601 duration value that can be decoded by the Period class.
+     * @returns {boolean}
+     */
+    var isValidPeriod = function isValidPeriod() {
+      try {
+        // Period should throw an error if it is not properly provided
+        // in order to validate it, we just send in case type is string
+        new _nPricing.Period(typeof option.value === 'string' ? option.value : '');
+        return true;
+      } catch (error) {
+        return false;
+      }
+    };
+
+    /**
+     * Compute monthly price for given term name, if the term if 90 days or longer.
+     * @returns {string | undefined}
+     */
+    var getCalculatedMonthlyPriceIfEligible = function getCalculatedMonthlyPriceIfEligible() {
+      var _priceObject$getMonth;
+      var priceObject = new _nPricing.Price({
+        value: option.amount,
+        symbol: option.symbol
+      }, {
+        period: option.value
+      });
+      return (_priceObject$getMonth = priceObject.getMonthlyEquivalentIf90DaysOrLonger()) === null || _priceObject$getMonth === void 0 ? void 0 : _priceObject$getMonth.amount.value;
+    };
+
+    /**
+     * Returns elements that include the text describing the price of the offer option.
+     * @returns {React.ReactElement}
+     */
+    var getPriceText = function getPriceText() {
+      var isExpressedAsSinglePayment = !option.subscriptionAutoRenewTerm ||
+      // With an auto-renewing annual term there is a high chance
+      // it will not be the same price in the second year,
+      // so we do not want to imply that the price will remain consistent.
+      // For shorter auto-renewing terms there is higher confidence that the price
+      // will remain consistent across subsequent terms.
+      option.subscriptionAutoRenewTerm && (0, _helpers.is52WeeksOrLonger)(option.value);
+      var isExpressedAsRecurringPayment = !isExpressedAsSinglePayment;
+      if (isExpressedAsSinglePayment) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Single", ' ', /*#__PURE__*/_react["default"].createElement("span", {
+          className: "ncf__payment-term__price"
+        }, option.price), ' ', "payment");
+      }
+      if (isExpressedAsRecurringPayment) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+          className: "ncf__payment-term__price"
+        }, option.price), " per", ' ', (0, _helpers.getDurationFromISO8601Value)({
+          iso8601Value: option.value
+        }));
+      }
+    };
+
+    /**
+     * Returns elements that include the text describing the price increase following the trial period.
+     * @returns {React.ReactElement}
+     */
+    var getTrialPriceExplanatoryText = function getTrialPriceExplanatoryText() {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Unless you cancel during your trial you will be billed", ' ', /*#__PURE__*/_react["default"].createElement("span", {
+        className: "ncf__payment-term__price"
+      }, option.price), " per", ' ', (0, _helpers.getDurationFromISO8601Value)({
+        iso8601Value: option.value
+      }), ' ', "after the trial period.");
+    };
+
+    /**
+     * Returns elements that include the text describing how regularly an auto-renewing subscription will renew.
+     * @returns {React.ReactElement}
+     */
+    var getRenewalPeriodText = function getRenewalPeriodText() {
+      return /*#__PURE__*/_react["default"].createElement("p", {
+        className: "ncf__payment-term__renews-text"
+      }, "Renews every", ' ', (0, _helpers.getDurationFromISO8601Value)({
+        iso8601Value: option.value
+      }), " unless cancelled");
+    };
+
+    /**
+     * Returns elements that include the text describing the monthly equivalent of the subscription.
+     * Returns null if the term is shorter than 90 days
+     * @returns {string | null}
+     */
+    var getEquivalentMonthlyPrice = function getEquivalentMonthlyPrice() {
+      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 calculatedMonthlyPrice;
+    };
+
+    /**
+     * 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"
+      }, equivalentMonthlyPrice), ' ', "per month");
+    };
+
+    /**
+     * Creates the standard discount badge for an option.
+     * Displays either "Best offer" or "Save X off RRP" when a discount exists.
+     *
+     * @returns {React.ReactElement} The discount element, or false when no discount should be shown
+     */
     var createDiscount = function createDiscount() {
       return option.discount && /*#__PURE__*/_react["default"].createElement("span", {
         className: "ncf__payment-term__discount"
       }, option.bestOffer ? 'Best offer' : "Save ".concat(option.discount, " off RRP"));
     };
+
+    /**
+     * Creates B2C partnership discount copy for eligible annual offers.
+     *
+     * @returns {React.ReactElement} The B2C discount element, or false when the option is not eligible
+     */
     var createB2cDiscountCopy = function createB2cDiscountCopy() {
       return option.name === 'annual' && option.b2cPartnership && option.b2cDiscountCopy && /*#__PURE__*/_react["default"].createElement("span", {
         className: "ncf__payment-term__discount"
       }, option.b2cDiscountCopy);
     };
+
+    /**
+     * Creates the description shown beneath the term title.
+     * This may include trial copy, price-per-period copy, equivalent monthly price,
+     * renewal messaging, or fallback non-period pricing text.
+     *
+     * @returns {React.ReactElement} The description block for the payment term
+     */
     var createDescription = function createDescription() {
-      return option.isTrial ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "ncf__payment-term__description"
-      }, option.trialDuration || '4 weeks', " for", ' ', /*#__PURE__*/_react["default"].createElement("span", {
-        className: "ncf__payment-term__trial-price"
-      }, option.trialPrice), /*#__PURE__*/_react["default"].createElement("br", null), nameMap[option.name] && nameMap[option.name].trialPrice(option.price)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, nameMap[option.name] ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "ncf__payment-term__description"
-      }, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), isAutoRenewingSubscriptionTermType && nameMap[option.name].renewsText()) :
-      // this should cover the cases different than annual, quarterly and monthly
-      // for those containing period on option.value, render custom template, for the rest keep legacy render
-      isValidPeriod(option.value) ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "ncf__payment-term__description"
-      }, nameMap['custom'].price(option.price), nameMap['custom'].monthlyPrice(option.monthlyPrice && option.monthlyPrice !== '0' ? Number(option.monthlyPrice) : getMonthlyPriceFromPeriod(option.amount, option.currency, option.value)), isAutoRenewingSubscriptionTermType && nameMap['custom'].renewsText(getTimeFromPeriod(option.value))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      if (option.isTrial) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "ncf__payment-term__description"
+        }, option.trialDuration || '4 weeks', " for", ' ', /*#__PURE__*/_react["default"].createElement("span", {
+          className: "ncf__payment-term__trial-price"
+        }, option.trialPrice), /*#__PURE__*/_react["default"].createElement("br", null), getTrialPriceExplanatoryText());
+      }
+      if (isValidPeriod(option.value)) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "ncf__payment-term__description"
+        }, getPriceText(), getEquivalentMonthlyPriceText(), option.subscriptionAutoRenewTerm && getRenewalPeriodText());
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         className: largePrice ? 'ncf__payment-term__large-price' : ''
       }, option.price), option.chargeOnText && /*#__PURE__*/_react["default"].createElement("p", {
         className: "ncf__payment-term__charge-on-text"
-      }, option.chargeOnText)));
+      }, option.chargeOnText));
     };
+
+    /**
+     * Builds the display name shown as the payment term title.
+     * May prepend trial copy, use the capitalised term name for auto-renewing terms,
+     * derive a human-readable period for valid non-renewing terms, or fall back to
+     * a legacy title when no valid period is available.
+     *
+     * @returns {string} The formatted display name for the payment term
+     */
     var getTermDisplayName = function getTermDisplayName() {
       var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isDigitalEdition;
-      var title = option.name && nameMap[option.name] ? nameMap[option.name].title : '';
       var termDisplayName = '';
       if (showTrialCopyInTitle) {
         var termName = option.displayName ? option.displayName : 'Premium Digital';
         termDisplayName = "Trial: ".concat(termName, " - ");
       }
       var getTermPeriod = function getTermPeriod() {
-        // annual, quarterly and monthly
-        if (nameMap[option.name]) {
-          return title;
+        if (option.subscriptionAutoRenewTerm && option.name) {
+          return capitalise(option.name);
         }
+
         // custom offer with period provided
-        if (isValidPeriod(option.value)) {
-          return getTimeFromPeriod(option.value);
+        if (!option.subscriptionAutoRenewTerm && isValidPeriod(option.value)) {
+          return (0, _helpers.getDurationFromISO8601Value)({
+            iso8601Value: option.value,
+            excludeAmountWhenSingular: false
+          });
         }
         // custom legacy cases, where period is not provided
         return option.title;
@@ -284,12 +335,14 @@ PaymentTerm.propTypes = {
     isB2cPartnership: _propTypes["default"].bool,
     discount: _propTypes["default"].string,
     isTrial: _propTypes["default"].bool,
+    subscriptionAutoRenewTerm: _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,
     amount: _propTypes["default"].string,
+    symbol: _propTypes["default"].string,
     trialAmount: _propTypes["default"].number,
     value: _propTypes["default"].string.isRequired,
     monthlyPrice: _propTypes["default"].string,