@financial-times/n-conversion-forms 24.0.0 → 25.1.0

package/dist/debug.js

@@ -22,21 +22,21 @@ function Debug(_ref) {
   // along with onclick handlers, styles and javascript. JSX will escape and
   // modify the HTML which we do not want. Once our applications are on JSX
   // entirely this component should be rethought.
-  var testEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--inverse ncf__debug-button--test\" onclick=\"setTestEnvironment('off');\"><strong>TEST</strong> relax you are using the test API</a>\n\t\t</span>\n\t";
-  var productionEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--inverse ncf__debug-button--production\" onclick=\"setTestEnvironment('on');\"><strong>PRODUCTION</strong> careful you are using the production API</a>\n\t\t</span>\n\t";
-  var testCards = "\n\t\t<button id=\"ncf-copy-uk-visa\" class=\"ncf__button ncf__button--inverse\" onclick=\"copyToClipboard('ukVisa');\" title=\"Copy UK Visa card number to clipboard\">UK Visa</button>\n\t\t<button id=\"ncf-copy-us-visa\" class=\"ncf__button ncf__button--inverse\" onclick=\"copyToClipboard('usVisa');\" title=\"Copy US Visa card number to clipboard\">US Visa</button>\n\t\t<button id=\"ncf-copy-us-amex\" class=\"ncf__button ncf__button--inverse\" onclick=\"copyToClipboard('usAmex');\" title=\"Copy US Amex card number to clipboard\">US Amex</button>\n\t";
+  var testEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--test\" onclick=\"setTestEnvironment('off');\"><strong>TEST</strong> relax you are using the test API</a>\n\t\t</span>\n\t";
+  var productionEnvironment = "\n\t\t<span class=\"ncf__debug-environment\">\n\t\t\t<a class=\"ncf__button ncf__button--debug ncf__button--inverse ncf__debug-button--production\" onclick=\"setTestEnvironment('on');\"><strong>PRODUCTION</strong> careful you are using the production API</a>\n\t\t</span>\n\t";
+  var testCards = "\n\t\t<button id=\"ncf-copy-visa-checkout-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkoutVisa');\" title=\"Copy Checkout Visa test card number to clipboard\">EU Visa (cvv:100)</button>\n\t\t<button id=\"ncf-copy-visa-checkout-3ds\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('checkout3dsChallenge');\" title=\"Copy Checkout cvv number (default success) to clipboard\">EU 3ds challenge</button>\n\t\t<button id=\"ncf-copy-visa-chase-card\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"copyToClipboard('chaseVisa');\" title=\"Copy Chase card number to clipboard\">US Visa (exp:1230,cvv:111)</button>\n\t\t<button id=\"ncf-link-checkout-cards\" class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"window.open('https://www.checkout.com/docs/testing/test-card-numbers#Credit_cards', '_blank');\" title=\"Checkout test cards documentation\">Doc:Checkout</button>\n\t";
   var linksString = Object.keys(links).map(function (link) {
     return "<a key=".concat(link, " class=\"ncf__button ncf__button--inverse ncf__link\" href=\"").concat(links[link], "\">").concat(link, "</a>");
   });
-  var helpers = "\n\t\t<span class=\"ncf__debug-helpers\">\n\t\t\t<button class=\"ncf__button ncf__button--inverse\" onclick=\"logout();\" title=\"Logout and refresh\">Logout</button>\n\t\t\t<button class=\"ncf__button ncf__button--inverse\" onclick=\"fillForm();\" title=\"Fill form with debug data\">Fill</button>\n\t\t\t<button class=\"ncf__button ncf__button--inverse\" onclick=\"fillForm(); submitForm();\" title=\"Fill form with debug data and submit\">Fill &amp; Submit</button>\n\t\t\t".concat(isTest ? testCards : '', "\n\t\t\t").concat(links.length ? linksString : '', "\n\t\t</span>\n\t");
+  var helpers = "\n\t\t<span class=\"ncf__debug-helpers\">\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"logout();\" title=\"Logout and refresh\">Logout</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm();\" title=\"Fill form with debug data\">Fill</button>\n\t\t\t<button class=\"ncf__button ncf__button--debug ncf__button--inverse\" onclick=\"fillForm(); submitForm();\" title=\"Fill form with debug data and submit\">Fill &amp; Submit</button>\n\t\t\t".concat(isTest ? testCards : '', "\n\t\t\t").concat(links.length ? linksString : '', "\n\t\t</span>\n\t");
   var html = {
     __html: "".concat(isTest ? testEnvironment : productionEnvironment).concat(showHelpers ? helpers : '')
   };
   var javascript = {
-    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t}\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'delivery test3',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisa: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisa: '4112344112344113'\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type)) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
+    __html: "\n\tvar FORM_SELECTOR = 'form.ncf';\n\tvar INPUT_SELECTOR = FORM_SELECTOR + ' input:not([type=\"checkbox\"]):not([type=\"radio\"])';\n\tvar SELECT_SELECTOR = FORM_SELECTOR + ' select';\n\tvar CHECKBOX_SELECTOR = FORM_SELECTOR + ' input[type=\"checkbox\"]';\n\tvar RADIO_SELECTOR = FORM_SELECTOR + ' input[type=\"radio\"]';\n\t// This env var gets set in production. We use this when creating email addresses in case any\n\t// get into production so Membership know who to come to about deleting them.\n\tvar SYSTEM_CODE = document.documentElement.getAttribute('data-next-app') || 'n-conversion-forms';\n\tvar COUNTRY_CODE = window.FT && window.FT.country || 'GBR';\n\n\tvar postcodeByCountry = {\n\t\tGBR: 'EC4M9BT',\n\t\tUSA: '10028',\n\t\tCAN: 'K0E 9Z9'\n\t};\n\n\tvar debugData = {\n\t\tbillingCity: 'London',\n\t\tbillingCountry: COUNTRY_CODE,\n\t\tbillingPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\tcountry: COUNTRY_CODE,\n\t\tdeliveryAddressLine1: 'delivery test1',\n\t\tdeliveryAddressLine2: 'delivery test2',\n\t\tdeliveryAddressLine3: 'delivery test3',\n\t\tdeliveryCity: 'delivery city',\n\t\tdeliveryCounty: 'delivery county',\n\t\tdeliveryPostcode: postcodeByCountry[COUNTRY_CODE],\n\t\temail: SYSTEM_CODE + '-' + Date.now() + '@ftqa.org',\n\t\tfirstName: 'Test',\n\t\tindustry: 'DEF',\n\t\tlastName: 'Test',\n\t\tjobTitle: 'CEO',\n\t\torganisation: 'ft-org',\n\t\tpassword: 'password123',\n\t\tposition: 'AS',\n\t\tpostCode: postcodeByCountry[COUNTRY_CODE],\n\t\tprimaryTelephone: '0987654321',\n\t\tresponsibility: 'ADL',\n\t\tukVisaWorldpay: '4111111111111111',\n\t\tusAmex: '378282246310005',\n\t\tusVisaWorldpay: '4112344112344113',\n\t\tcheckoutVisa: '4242424242424242',\n\t\tcheckout3dsChallenge: 'Checkout1!',\n\t\tchaseVisa: '4011361100000010',\n\t};\n\n\tfunction logout () {\n\t\tconst options = {\n\t\t\tmode: 'no-cors',\n\t\t\tcredentials: 'include'\n\t\t};\n\t\tfetch('https://www.ft.com/logout', options).then(function () {\n\t\t\twindow.location.reload();\n\t\t});\n\t}\n\n\tfunction fillForm () {\n\t\tvar changeEvent = document.createEvent('HTMLEvents');\n\t\tchangeEvent.initEvent('change', false, true);\n\n\t\tvar inputs = document.querySelectorAll(INPUT_SELECTOR + ', ' + SELECT_SELECTOR);\n\t\tinputs.forEach(function (input) {\n\t\t\tif (!/hidden/i.test(input.type)) {\n\t\t\t\tvar value = debugData[input.name];\n\t\t\t\tinput.value = value;\n\t\t\t\tinput.dispatchEvent(changeEvent);\n\t\t\t}\n\t\t});\n\t\tvar checkboxes = document.querySelectorAll(CHECKBOX_SELECTOR + ', ' + RADIO_SELECTOR);\n\t\tcheckboxes.forEach(function (checkbox) {\n\t\t\tcheckbox.checked = true;\n\t\t\tcheckbox.dispatchEvent(changeEvent);\n\t\t});\n\t}\n\n\tfunction submitForm () {\n\t\tdocument.querySelector(FORM_SELECTOR).submit();\n\t}\n\n\tfunction copyToClipboard (name) {\n\t\tvar string = debugData[name];\n\t\tvar textarea = document.createElement('textarea');\n\t\ttextarea.value = string;\n\t\tdocument.body.appendChild(textarea);\n\t\ttextarea.select();\n\t\tdocument.execCommand('copy');\n\t\tdocument.body.removeChild(textarea);\n\t}\n\n\tfunction setTestEnvironment (state) {\n\t\tvar flags = document.cookie.match('(^|[^;]+)\\\\s*next-flags\\\\s*=\\\\s*([^;]+)').pop();\n\t\tvar flag = 'conversionSandbox%3A';\n\t\tflags = flags.replace(flag + 'on', '');\n\t\tflags = flags.replace(flag + 'off', '');\n\t\tdocument.cookie = 'next-flags=' + flags + '%2C' + flag + state + '; path=/; domain=.ft.com;';\n\t\twindow.location.reload();\n\t}\n\t"
   };
   var style = {
-    __html: "\n\t.ncf__debug-panel {\n\t\tposition: absolute;\n\t\tbackground-color: #262a33;\n\t\tcolor: #ffffff;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 10px;\n\t\tposition: fixed;\n\t\tz-index: 1000;\n\t\topacity: 0.8;\n\t}\n\t.ncf__debug-button--test {\n\t\tbackground-color: #008040;\n\t}\n\t.ncf__debug-button--production {\n\t\tbackground-color: #990000;\n\t}\n\t"
+    __html: "\n\t.ncf__debug-panel {\n\t\tposition: absolute;\n\t\tbackground-color: #262a33;\n\t\tcolor: #ffffff;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 10px;\n\t\tposition: fixed;\n\t\tz-index: 1000;\n\t\topacity: 0.8;\n\t}\n\t.ncf__debug-button--test {\n\t\tbackground-color: #008040;\n\t}\n\t.ncf__debug-button--production {\n\t\tbackground-color: #990000;\n\t}\n\t.ncf__button--debug {\n\t\tpadding: 0px 5px;\n\t}\n\t"
   };
   return (isTest || showHelpers) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__debug-panel",

package/dist/index.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "B2CPartnershipConfirmation", {
     return _b2cPartnershipConfirmation.B2CPartnershipConfirmation;
   }
 });
-Object.defineProperty(exports, "B2cPartnershipPaymentTerm", {
-  enumerable: true,
-  get: function get() {
-    return _b2cPartnershipPaymentTerm.B2cPartnershipPaymentTerm;
-  }
-});
 Object.defineProperty(exports, "BillingCity", {
   enumerable: true,
   get: function get() {
@@ -333,6 +327,12 @@ Object.defineProperty(exports, "Submit", {
     return _submit.Submit;
   }
 });
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function get() {
+    return _textInput.TextInput;
+  }
+});
 Object.defineProperty(exports, "TrialBanner", {
   enumerable: true,
   get: function get() {
@@ -344,8 +344,6 @@ var _acceptTerms = require("./accept-terms");
 
 var _appBanner = require("./app-banner");
 
-var _b2cPartnershipPaymentTerm = require("./b2c-partnership-payment-term");
-
 var _billingCity = require("./billing-city");
 
 var _billingCountry = require("./billing-country");
@@ -450,4 +448,6 @@ var _graduationDate = require("./graduation-date");
 
 var _liteSubConfirmation = require("./lite-sub-confirmation");
 
-var _googleSignIn = require("./google-sign-in");
+var _googleSignIn = require("./google-sign-in");
+
+var _textInput = require("./text-input");

package/dist/payment-term.js

@@ -49,14 +49,14 @@ function PaymentTerm(_ref) {
    * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
    * @returns {string}
    */
-  function getMontlyPriceFromPeriod(amount, currency, period) {
+  var getMontlyPriceFromPeriod = function getMontlyPriceFromPeriod(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');
-  }
+  };
   /**
    * returns period converted to time if found
    * otherwise returns empty string to avoid show information not mapped
@@ -195,6 +195,12 @@ function PaymentTerm(_ref) {
       }, option.bestOffer ? 'Best offer' : "Save ".concat(option.discount, " off RRP"));
     };
 
+    var createB2cDiscountCopy = function createB2cDiscountCopy() {
+      return option.name === 'annual' && option.b2cPartnership && option.b2cDiscountCopy && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "ncf__payment-term__discount"
+      }, option.b2cDiscountCopy);
+    };
+
     var createDescription = function createDescription() {
       return option.isTrial ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "ncf__payment-term__description"
@@ -250,7 +256,7 @@ function PaymentTerm(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("input", props), /*#__PURE__*/_react["default"].createElement("label", {
       htmlFor: option.value,
       className: "o-forms-input__label ncf__payment-term__label"
-    }, createDiscount(), /*#__PURE__*/_react["default"].createElement("span", {
+    }, createDiscount(), createB2cDiscountCopy(), /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])(['ncf__payment-term__title', {
         'ncf__payment-term__title--large-price': largePrice
       }])
@@ -289,6 +295,8 @@ PaymentTerm.propTypes = {
   isPrintOrBundle: _propTypes["default"].bool,
   isEpaper: _propTypes["default"].bool,
   options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    b2cDiscountCopy: _propTypes["default"].string,
+    isB2cPartnership: _propTypes["default"].bool,
     discount: _propTypes["default"].string,
     isTrial: _propTypes["default"].bool,
     name: _propTypes["default"].string.isRequired,

package/dist/text-input.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = TextInput;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function TextInput(_ref) {
+  var dataTrackable = _ref.dataTrackable,
+      _ref$errorText = _ref.errorText,
+      errorText = _ref$errorText === void 0 ? 'Please enter a value' : _ref$errorText,
+      fieldId = _ref.fieldId,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+      inputId = _ref.inputId,
+      inputName = _ref.inputName,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$placeHolder = _ref.placeHolder,
+      placeHolder = _ref$placeHolder === void 0 ? '' : _ref$placeHolder,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      description = _ref.description;
+  // Use inputId if inputName is not explicitly passed.
+  inputName = inputName || inputId;
+  var inputWrapperClassNames = (0, _classnames["default"])(['o-forms-input', 'o-forms-input--text', {
+    'o-forms-input--invalid': hasError
+  }, {
+    'o-forms-field--optional': !isRequired
+  }]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    id: fieldId,
+    className: "o-forms-field ncf__validation-error",
+    "data-validate": "required",
+    htmlFor: inputId
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__main"
+  }, label), description ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-title__prompt"
+  }, description) : null), /*#__PURE__*/_react["default"].createElement("span", {
+    className: inputWrapperClassNames
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: inputId,
+    name: inputName,
+    placeholder: placeHolder,
+    "data-trackable": dataTrackable,
+    "aria-required": isRequired,
+    required: isRequired,
+    disabled: isDisabled,
+    defaultValue: value
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "o-forms-input__error"
+  }, errorText)));
+}
+
+TextInput.propTypes = {
+  dataTrackable: _propTypes["default"].string,
+  errorText: _propTypes["default"].string,
+  fieldId: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  inputId: _propTypes["default"].string,
+  inputName: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  placeHolder: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  description: _propTypes["default"].string
+};

package/main.scss

@@ -10,7 +10,6 @@
 @import '@financial-times/o-fonts/main';
 @import './styles/package-change';
 @import './styles/payment-term';
-@import './styles/b2c-partnership-payment-term';
 @import './styles/payment-type';
 @import './styles/loader';
 @import './styles/accept-terms';
@@ -436,7 +435,6 @@
 	@include ncfMessage();
 	@include ncfPackageChange();
 	@include ncfPaymentTerm();
-	@include ncfB2cPartnershipPaymentTerm();
 	@include ncfPaymentType();
 	@include ncfLoader();
 	@include ncfContinueReading();

package/package.json

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

@@ -1,3 +1,8 @@
+const {
+	Period,
+	Monthly,
+} = require('@financial-times/n-pricing');
+
 /**
  * Utility for the `n-conversion-forms/partial/payment-term.html` partial
  * @example
@@ -75,6 +80,23 @@ class PaymentTerm {
 		return this.$paymentTerm.addEventListener('change', callback);
 	}
 
+	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 Period(typeof period === 'string' ? period : '');
+			return true;
+		} catch (e) {
+			return false;
+		}
+	};
+
+	getMontlyPriceFromPeriod (amount, currency, period) {
+		const periodObj = new Period(period);
+		const monthlyPrice = periodObj.calculatePrice('P1M', amount);
+		return new Monthly({ value: monthlyPrice, currency }).getAmount('monthly');
+	}
+
 	/**
 	 * Update the payment term options
 	 * @param {Array} options Array of objects contain terms information
@@ -104,7 +126,9 @@ class PaymentTerm {
 				trialPrice.innerHTML = update.trialPrice;
 			}
 			if (monthlyPrice) {
-				monthlyPrice.innerHTML = update.monthlyPrice;
+				monthlyPrice.innerHTML = this.isValidPeriod(update.value) ?
+					this.getMontlyPriceFromPeriod(update.amount, update.currency, update.value) :
+					update.monthlyPrice;
 			}
 		}
 	}

package/components/__snapshots__/b2c-partnership-payment-term.spec.js.snap

@@ -1,193 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`B2cPartnershipPaymentTerm render with minimum props required 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="299.99"
-           name="paymentTerm"
-           value="299.99"
-           checked
-    >
-    <label for="299.99"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £299.99 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          1 year Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;
-
-exports[`B2cPartnershipPaymentTerm renders with annual option 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="annual"
-           name="paymentTerm"
-           value="annual"
-           checked
-    >
-    <label for="annual"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £20.00 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          1 year Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;
-
-exports[`B2cPartnershipPaymentTerm renders with monthly option 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="monthly"
-           name="paymentTerm"
-           value="monthly"
-           checked
-    >
-    <label for="monthly"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £20.00 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          1 month Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;
-
-exports[`B2cPartnershipPaymentTerm renders with quarterly option 1`] = `
-<div id="paymentTermField"
-     class="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
->
-  <div class="ncf__payment-term__item o-forms-input--radio-round">
-    <input type="radio"
-           id="quarterly"
-           name="paymentTerm"
-           value="quarterly"
-           checked
-    >
-    <label for="quarterly"
-           class="o-forms-input__label ncf__payment-term__label"
-    >
-      <span class="ncf__payment-term__title">
-        £20.00 - Digital FT + The Washington Post
-      </span>
-      <div class="ncf__b2c-partnership-payment-term__description">
-        <p>
-          Includes:
-          <br>
-          3 month Digital subscription to the Financial Times
-          <br>
-          90-day All-Access Digital subscription to The Washington Post
-        </p>
-      </div>
-    </label>
-  </div>
-  <div class="ncf__payment-term__legal">
-    <p>
-      We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date.
-    </p>
-    <p>
-      We will notify you at least 14 days in advance of any changes to the price in your subscription that would apply upon next renewal. Find out more about our cancellation policy in our
-      <a class="ncf__link--external"
-         href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-         title="FT Legal Terms and Conditions help page"
-         target="_blank"
-         rel="noopener noreferrer"
-      >
-        Terms &amp; Conditions
-      </a>
-      .
-    </p>
-  </div>
-</div>
-`;

package/components/b2c-partnership-payment-term.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export function B2cPartnershipPaymentTerm ({
-	fieldId = 'paymentTermField',
-	inputName = 'paymentTerm',
-	options = [],
-	displayName,
-	offerType,
-	partnerOffer,
-	conditions = [],
-}) {
-	const durations = {
-		annual: '1 year',
-		quarterly: '3 month',
-		monthly: '1 month',
-	};
-
-	// convert to Title Case
-	offerType = offerType
-		.split('')
-		.map((letter, i) => (i !== 0 ? letter.toLowerCase() : letter.toUpperCase()))
-		.join('');
-
-	return (
-		<div
-			id={fieldId}
-			className="o-forms__group ncf__payment-term ncf__b2c-partnership-payment-term"
-		>
-			{options.map(
-				(option) =>
-					option.selected && (
-						<div
-							className="ncf__payment-term__item o-forms-input--radio-round"
-							key={option.value}
-						>
-							<input
-								type="radio"
-								id={option.value}
-								name={inputName}
-								value={option.value}
-								defaultChecked={true}
-							/>
-							<label
-								htmlFor={option.value}
-								className="o-forms-input__label ncf__payment-term__label"
-							>
-								<span className="ncf__payment-term__title">
-									{option.price} - {displayName}
-								</span>
-								<div className="ncf__b2c-partnership-payment-term__description">
-									<p>
-										Includes:
-										<br />
-										{durations[option.name]} {offerType} subscription to the
-										Financial Times
-										<br />
-										{partnerOffer.duration} {partnerOffer.name} subscription to{' '}
-										{partnerOffer.vendor}
-									</p>
-									{conditions.length > 0 && (
-										<p>
-											{conditions.map((line) => (
-												<>
-													{line}
-													<br />
-												</>
-											))}
-										</p>
-									)}
-								</div>
-							</label>
-						</div>
-					)
-			)}
-
-			<div className="ncf__payment-term__legal">
-				<p>
-					We will automatically renew your subscription using the payment method
-					provided unless you cancel before your renewal date.
-				</p>
-				<p>
-					We will notify you at least 14 days in advance of any changes to the
-					price in your subscription that would apply upon next renewal. Find
-					out more about our cancellation policy in our{' '}
-					<a
-						className="ncf__link--external"
-						href="https://help.ft.com/help/legal-privacy/terms-conditions/"
-						title="FT Legal Terms and Conditions help page"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Terms &amp; Conditions
-					</a>
-					.
-				</p>
-			</div>
-		</div>
-	);
-}
-
-B2cPartnershipPaymentTerm.propTypes = {
-	fieldId: PropTypes.string,
-	inputName: PropTypes.string,
-	options: PropTypes.arrayOf(
-		PropTypes.shape({
-			discount: PropTypes.string,
-			isTrial: PropTypes.bool,
-			name: PropTypes.string.isRequired,
-			price: PropTypes.string.isRequired,
-			selected: PropTypes.bool,
-			trialDuration: PropTypes.string,
-			trialPrice: PropTypes.string,
-			value: PropTypes.string.isRequired,
-			monthlyPrice: PropTypes.string,
-		})
-	).isRequired,
-	displayName: PropTypes.string.isRequired,
-	partnerOffer: PropTypes.shape({
-		duration: PropTypes.string.isRequired,
-		name: PropTypes.string.isRequired,
-		vendor: PropTypes.string.isRequired,
-	}).isRequired,
-	conditions: PropTypes.arrayOf(PropTypes.string),
-	offerType: PropTypes.string.isRequired,
-};

package/components/b2c-partnership-payment-term.spec.js

@@ -1,52 +0,0 @@
-import { B2cPartnershipPaymentTerm } from './index';
-import { expectToRenderCorrectly } from '../test-jest/helpers/expect-to-render-correctly';
-
-expect.extend(expectToRenderCorrectly);
-
-const defaultProps = {
-	displayName: 'Digital FT + The Washington Post',
-	partnerOffer: {
-		duration: '90-day',
-		name: 'All-Access Digital',
-		vendor: 'The Washington Post',
-	},
-	offerType: 'DIGITAL',
-	options: [
-		{
-			name: 'annual',
-			price: '£299.99',
-			value: 299.99,
-			isTrial: false,
-			discount: null,
-			selected: true,
-		},
-	],
-};
-
-describe('B2cPartnershipPaymentTerm', () => {
-	it('render with minimum props required', () => {
-		const props = {
-			...defaultProps,
-		};
-
-		expect(B2cPartnershipPaymentTerm).toRenderCorrectly(props);
-	});
-
-	['annual', 'quarterly', 'monthly'].forEach((type) => {
-		it(`renders with ${type} option`, () => {
-			const props = {
-				...defaultProps,
-				options: [
-					{
-						name: type,
-						value: type,
-						price: '£20.00',
-						selected: true,
-					},
-				],
-			};
-
-			expect(B2cPartnershipPaymentTerm).toRenderCorrectly(props);
-		});
-	});
-});