@financial-times/n-conversion-forms 32.9.0 → 32.11.0

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "69b63baab3896624c51a78b1171792e6e67adaaf",
-  "tag": "v32.9.0"
+  "version": "321a6a0d8b6b67274c78f87926fb9f9ce111da60",
+  "tag": "v32.11.0"
 }

package/components/payment-term.jsx

@@ -17,6 +17,8 @@ export function PaymentTerm({
 	billingCountry = '',
 	is7DayPassExperiment = false,
 	isTermedSubscriptionTermType = false,
+	isTrialOfferAsNonTrialOverride = false,
+	labelOverride = '', // this is a temporary hack for the February 2024 campaign
 }) {
 	/**
 	 * Compute monthly price for given term name
@@ -25,7 +27,7 @@ export function PaymentTerm({
 	 * @param {string} period (expressed in IS0 8601 duration format): e.g. PxY (yearly) or PxM (montly) where x is the amount of years/months
 	 * @returns {string}
 	 */
-	const getMontlyPriceFromPeriod = (amount, currency, period) => {
+	const getMonthlyPriceFromPeriod = (amount, currency, period) => {
 		const periodObj = new Period(period);
 		const monthlyPrice = periodObj.calculatePrice('P1M', amount);
 		return new Monthly({ value: monthlyPrice, currency }).getAmount('monthly');
@@ -268,7 +270,7 @@ export function PaymentTerm({
 							{nameMap['custom'].monthlyPrice(
 								option.monthlyPrice && option.monthlyPrice !== '0'
 									? Number(option.monthlyPrice)
-									: getMontlyPriceFromPeriod(
+									: getMonthlyPriceFromPeriod(
 											option.amount,
 											option.currency,
 											option.value
@@ -298,6 +300,16 @@ export function PaymentTerm({
 			const showTrialCopyInTitle =
 				option.isTrial && !isPrintOrBundle && !isEpaper;
 
+			// https://financialtimes.atlassian.net/browse/ACQ-2592
+			// We need to have one specific trial offer to have terms displayed as non-trial.
+			// The offer is a trial offer and should use trial mechanics but should show as non-trial.
+			// There is nothing in the offer payload to identify when this should happen, we need to rely on the offer id.
+			// This is a TEMPORARY hack and will be removed once the campaign is over.
+			// A ticket as been raised already to deal with the clean up: https://financialtimes.atlassian.net/browse/ACQ-2593.
+			if (isTrialOfferAsNonTrialOverride && labelOverride) {
+				return labelOverride;
+			}
+
 			const defaultTitle = (() => {
 				if (is7DayPassExperiment) {
 					return '';
@@ -461,4 +473,5 @@ PaymentTerm.propTypes = {
 	largePrice: PropTypes.bool,
 	optionsInARow: PropTypes.bool,
 	billingCountry: PropTypes.string,
+	isTrialOfferAsNonTrialOverride: PropTypes.bool,
 };

package/components/payment-term.spec.js

@@ -261,7 +261,7 @@ describe('PaymentTerm', () => {
 				);
 			});
 		});
-		describe('getDisplayName', () => {
+		describe('getDisplayName trial', () => {
 			const trialOptions = {
 				...baseOptions,
 				isTrial: true,
@@ -273,6 +273,19 @@ describe('PaymentTerm', () => {
 					/^Trial: Premium Digital - Monthly .*$/
 				);
 			});
+			it('handles trial to non-trial payment term display name', () => {
+				const options = [trialOptions];
+				const wrapper = shallow(
+					<PaymentTerm
+						options={options}
+						labelOverride={'some term label'}
+						isTrialOfferAsNonTrialOverride={true}
+					/>
+				);
+				expect(wrapper.find('.ncf__payment-term__label').text()).toMatch(
+					/^some term label.*$/
+				);
+			});
 			it('renders using displayName if available', () => {
 				const options = [
 					{

package/components/payment-term.stories.js

@@ -183,3 +183,38 @@ RenewOffers.args = {
 	],
 	optionsInARow: true,
 };
+
+// https://financialtimes.atlassian.net/browse/ACQ-2592
+// We need to have one specific trial offer to have terms displayed as non-trial.
+// The offer is a trial offer and should use trial mechanics but should show as non-trial.
+// There is nothing in the offer payload to identify when this should happen, we need to rely on the offer id.
+// This is a TEMPORARY hack and will be removed once the campaign is over.
+// A ticket as been raised already to deal with the clean up: https://financialtimes.atlassian.net/browse/ACQ-2593.
+export const PaymentTermLabelOverride = (args) => (
+	<div className="ncf">
+		<Fieldset>
+			<PaymentTerm {...args} />
+		</Fieldset>
+	</div>
+);
+
+PaymentTermLabelOverride.args = {
+	isTrialOfferAsNonTrialOverride: true,
+	labelOverride: 'some fancy payment term',
+	options: [
+		{
+			name: '6 monthly',
+			isTrial: false,
+			discount: '',
+			selected: false,
+			price: '$229.00',
+			trialPrice: '$0.00',
+			trialDuration: '',
+			monthlyPrice: '0',
+			amount: '229.00',
+			trialAmount: null,
+			value: 'P6M',
+			currency: 'USD',
+		},
+	],
+};

package/components/position.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { b2b, demographics } from 'n-common-static-data';
-const B2CPositions = demographics.positions.positions;
-const B2BPositions = b2b.demographics.positions.positions;
+import { demographics } from 'n-common-static-data';
 
 export function Position({
 	value,
@@ -12,8 +10,7 @@ export function Position({
 	fieldId = 'positionField',
 	selectId = 'position',
 	selectName = 'position',
-	isB2B = false,
-	options = isB2B ? B2BPositions : B2CPositions,
+	options = demographics.positions.positions,
 	isRequired = true,
 	fieldLabel = 'What’s your job position?',
 }) {
@@ -74,7 +71,6 @@ Position.propTypes = {
 	fieldId: PropTypes.string,
 	selectId: PropTypes.string,
 	selectName: PropTypes.string,
-	isB2B: PropTypes.bool,
 	options: PropTypes.arrayOf(
 		PropTypes.shape({
 			code: PropTypes.string,

package/components/responsibility.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { b2b, demographics } from 'n-common-static-data';
-const B2CResponsibilities = demographics.responsibilities.responsibilities;
-const B2BResponsibilities = b2b.demographics.responsibilities.responsibilities;
+import { demographics } from 'n-common-static-data';
 
 export function Responsibility({
 	value,
@@ -13,8 +11,7 @@ export function Responsibility({
 	fieldId = 'responsibilityField',
 	selectId = 'responsibility',
 	selectName = 'responsibility',
-	isB2B = false,
-	options = isB2B ? B2BResponsibilities : B2CResponsibilities,
+	options = demographics.responsibilities.responsibilities,
 	fieldLabel = 'Which best describes your job responsibility?',
 }) {
 	const inputWrapperClassName = classNames([
@@ -76,7 +73,6 @@ Responsibility.propTypes = {
 	fieldId: PropTypes.string,
 	selectId: PropTypes.string,
 	selectName: PropTypes.string,
-	isB2B: PropTypes.bool,
 	options: PropTypes.arrayOf(
 		PropTypes.shape({
 			code: PropTypes.string,

package/components/responsibility.spec.js

@@ -74,14 +74,4 @@ describe('Responsibility', () => {
 			component.find('.o-forms-title.o-forms-field--optional').length
 		).toEqual(1);
 	});
-
-	it('defaults to B2B options if isB2B is true', () => {
-		const props = { isB2B: true };
-		const component = mount(Responsibility(props));
-
-		// Look for an option which is only present in the default B2B data set and not in the B2C one.
-		const optionValue = component.find('option').at(1).instance().value;
-
-		expect(optionValue).toBe('ACC');
-	});
 });

package/dist/payment-term.jsx

@@ -37,7 +37,11 @@ function PaymentTerm(_ref) {
     _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
     is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi,
     _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
-    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
+    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
+    _ref$isTrialOfferAsNo = _ref.isTrialOfferAsNonTrialOverride,
+    isTrialOfferAsNonTrialOverride = _ref$isTrialOfferAsNo === void 0 ? false : _ref$isTrialOfferAsNo,
+    _ref$labelOverride = _ref.labelOverride,
+    labelOverride = _ref$labelOverride === void 0 ? '' : _ref$labelOverride;
   /**
    * Compute monthly price for given term name
    * @param {number} amount price in number format
@@ -45,7 +49,7 @@ function PaymentTerm(_ref) {
    * @param {string} period (expressed in IS0 8601 duration format): e.g. PxY (yearly) or PxM (montly) where x is the amount of years/months
    * @returns {string}
    */
-  var getMontlyPriceFromPeriod = function getMontlyPriceFromPeriod(amount, currency, period) {
+  var getMonthlyPriceFromPeriod = function getMonthlyPriceFromPeriod(amount, currency, period) {
     var periodObj = new _nPricing.Period(period);
     var monthlyPrice = periodObj.calculatePrice('P1M', amount);
     return new _nPricing.Monthly({
@@ -222,7 +226,7 @@ function PaymentTerm(_ref) {
       // 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) : getMontlyPriceFromPeriod(option.amount, option.currency, option.value)), nameMap['custom'].renewsText(getTimeFromPeriod(option.value))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, nameMap['custom'].price(option.price), nameMap['custom'].monthlyPrice(option.monthlyPrice && option.monthlyPrice !== '0' ? Number(option.monthlyPrice) : getMonthlyPriceFromPeriod(option.amount, option.currency, option.value)), nameMap['custom'].renewsText(getTimeFromPeriod(option.value))) : /*#__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"
@@ -230,6 +234,16 @@ function PaymentTerm(_ref) {
     };
     var getTermDisplayName = function getTermDisplayName() {
       var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isEpaper;
+
+      // https://financialtimes.atlassian.net/browse/ACQ-2592
+      // We need to have one specific trial offer to have terms displayed as non-trial.
+      // The offer is a trial offer and should use trial mechanics but should show as non-trial.
+      // There is nothing in the offer payload to identify when this should happen, we need to rely on the offer id.
+      // This is a TEMPORARY hack and will be removed once the campaign is over.
+      // A ticket as been raised already to deal with the clean up: https://financialtimes.atlassian.net/browse/ACQ-2593.
+      if (isTrialOfferAsNonTrialOverride && labelOverride) {
+        return labelOverride;
+      }
       var defaultTitle = function () {
         if (is7DayPassExperiment) {
           return '';
@@ -330,5 +344,6 @@ PaymentTerm.propTypes = {
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,
   optionsInARow: _propTypes["default"].bool,
-  billingCountry: _propTypes["default"].string
+  billingCountry: _propTypes["default"].string,
+  isTrialOfferAsNonTrialOverride: _propTypes["default"].bool
 };

package/dist/position.jsx

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _nCommonStaticData = require("n-common-static-data");
-var B2CPositions = _nCommonStaticData.demographics.positions.positions;
-var B2BPositions = _nCommonStaticData.b2b.demographics.positions.positions;
 function Position(_ref) {
   var value = _ref.value,
     _ref$isDisabled = _ref.isDisabled,
@@ -23,10 +21,8 @@ function Position(_ref) {
     selectId = _ref$selectId === void 0 ? 'position' : _ref$selectId,
     _ref$selectName = _ref.selectName,
     selectName = _ref$selectName === void 0 ? 'position' : _ref$selectName,
-    _ref$isB2B = _ref.isB2B,
-    isB2B = _ref$isB2B === void 0 ? false : _ref$isB2B,
     _ref$options = _ref.options,
-    options = _ref$options === void 0 ? isB2B ? B2BPositions : B2CPositions : _ref$options,
+    options = _ref$options === void 0 ? _nCommonStaticData.demographics.positions.positions : _ref$options,
     _ref$isRequired = _ref.isRequired,
     isRequired = _ref$isRequired === void 0 ? true : _ref$isRequired,
     _ref$fieldLabel = _ref.fieldLabel,
@@ -79,7 +75,6 @@ Position.propTypes = {
   fieldId: _propTypes["default"].string,
   selectId: _propTypes["default"].string,
   selectName: _propTypes["default"].string,
-  isB2B: _propTypes["default"].bool,
   options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     code: _propTypes["default"].string,
     description: _propTypes["default"].string

package/dist/responsibility.jsx

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _nCommonStaticData = require("n-common-static-data");
-var B2CResponsibilities = _nCommonStaticData.demographics.responsibilities.responsibilities;
-var B2BResponsibilities = _nCommonStaticData.b2b.demographics.responsibilities.responsibilities;
 function Responsibility(_ref) {
   var value = _ref.value,
     _ref$isDisabled = _ref.isDisabled,
@@ -25,10 +23,8 @@ function Responsibility(_ref) {
     selectId = _ref$selectId === void 0 ? 'responsibility' : _ref$selectId,
     _ref$selectName = _ref.selectName,
     selectName = _ref$selectName === void 0 ? 'responsibility' : _ref$selectName,
-    _ref$isB2B = _ref.isB2B,
-    isB2B = _ref$isB2B === void 0 ? false : _ref$isB2B,
     _ref$options = _ref.options,
-    options = _ref$options === void 0 ? isB2B ? B2BResponsibilities : B2CResponsibilities : _ref$options,
+    options = _ref$options === void 0 ? _nCommonStaticData.demographics.responsibilities.responsibilities : _ref$options,
     _ref$fieldLabel = _ref.fieldLabel,
     fieldLabel = _ref$fieldLabel === void 0 ? 'Which best describes your job responsibility?' : _ref$fieldLabel;
   var inputWrapperClassName = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--select', {
@@ -79,7 +75,6 @@ Responsibility.propTypes = {
   fieldId: _propTypes["default"].string,
   selectId: _propTypes["default"].string,
   selectName: _propTypes["default"].string,
-  isB2B: _propTypes["default"].bool,
   options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     code: _propTypes["default"].string,
     description: _propTypes["default"].string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "32.9.0",
+  "version": "32.11.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": {
@@ -30,7 +30,7 @@
     "classnames": "2.3.2",
     "fetchres": "1.7.2",
     "lodash.get": "4.4.2",
-    "n-common-static-data": "github:Financial-Times/n-common-static-data#v2.3.1"
+    "n-common-static-data": "github:Financial-Times/n-common-static-data#v2.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.15",