@financial-times/n-conversion-forms 23.2.0 → 24.2.0

package/dist/payment-term.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _nPricing = require("@financial-times/n-pricing");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -32,13 +34,54 @@ function PaymentTerm(_ref) {
       options = _ref$options === void 0 ? [] : _ref$options,
       _ref$isFixedTermOffer = _ref.isFixedTermOffer,
       isFixedTermOffer = _ref$isFixedTermOffer === void 0 ? false : _ref$isFixedTermOffer,
-      displayName = _ref.displayName,
+      offerDisplayName = _ref.offerDisplayName,
       _ref$showLegal = _ref.showLegal,
       showLegal = _ref$showLegal === void 0 ? true : _ref$showLegal,
       _ref$largePrice = _ref.largePrice,
       largePrice = _ref$largePrice === void 0 ? false : _ref$largePrice,
       _ref$optionsInARow = _ref.optionsInARow,
       optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow;
+
+  /**
+   * 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 PxY (yearly) or PxM (montly) where x is the amount of years/months
+   * @returns {string}
+   */
+  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
+   * @param {string} period PxY (yearly) or PxM (montly) where x is the amount of years/months
+   * @returns {string}
+   */
+
+
+  var getTimeFromPeriod = function getTimeFromPeriod(period) {
+    var freq = period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
+    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',
@@ -103,6 +146,30 @@ function PaymentTerm(_ref) {
           className: "ncf__payment-term__renews-text"
         }, textToDisplay);
       }
+    },
+    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");
+      }
     }
   };
 
@@ -122,10 +189,6 @@ function PaymentTerm(_ref) {
       defaultChecked: true
     });
 
-    var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isEpaper;
-    var defaultTitle = option.name ? nameMap[option.name].title : '';
-    var title = isFixedTermOffer ? "".concat(displayName, " - ").concat(defaultTitle) : defaultTitle;
-
     var createDiscount = function createDiscount() {
       return option.discount && /*#__PURE__*/_react["default"].createElement("span", {
         className: "ncf__payment-term__discount"
@@ -139,23 +202,46 @@ function PaymentTerm(_ref) {
         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), nameMap[option.name].renewsText(isFixedTermOffer)) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), nameMap[option.name].renewsText(isFixedTermOffer)) : // 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) : getMontlyPriceFromPeriod(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"
       }, option.chargeOnText)));
     };
 
-    var getDisplayName = function getDisplayName() {
-      var displayName = '';
+    var getTermDisplayName = function getTermDisplayName() {
+      var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isEpaper;
+      var defaultTitle = option.name && nameMap[option.name] ? nameMap[option.name].title : '';
+      var title = isFixedTermOffer ? "".concat(offerDisplayName, " - ").concat(defaultTitle) : defaultTitle;
+      var termDisplayName = '';
 
       if (showTrialCopyInTitle) {
         var termName = option.displayName ? option.displayName : 'Premium Digital';
-        displayName = "Trial: ".concat(termName, " - ");
+        termDisplayName = "Trial: ".concat(termName, " - ");
       }
 
-      var termPeriod = nameMap[option.name] ? title : option.title;
-      return "".concat(displayName).concat(termPeriod, " ");
+      var getTermPeriod = function getTermPeriod() {
+        // annual, quarterly and monthly
+        if (nameMap[option.name]) {
+          return title;
+        } // custom offer with period provided
+
+
+        if (isValidPeriod(option.value)) {
+          return getTimeFromPeriod(option.value);
+        } // custom legacy cases, where period is not provided
+
+
+        return option.title;
+      };
+
+      var termPeriod = getTermPeriod();
+      termDisplayName = "".concat(termDisplayName).concat(termPeriod, " ");
+      return termDisplayName;
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -168,7 +254,7 @@ function PaymentTerm(_ref) {
       className: (0, _classnames["default"])(['ncf__payment-term__title', {
         'ncf__payment-term__title--large-price': largePrice
       }])
-    }, getDisplayName(), option.subTitle && /*#__PURE__*/_react["default"].createElement("span", {
+    }, getTermDisplayName(), option.subTitle && /*#__PURE__*/_react["default"].createElement("span", {
       className: "ncf__regular ncf__payment-term__sub-title"
     }, option.subTitle)), createDescription()));
   };
@@ -210,7 +296,7 @@ PaymentTerm.propTypes = {
     selected: _propTypes["default"].bool,
     trialDuration: _propTypes["default"].string,
     trialPrice: _propTypes["default"].string,
-    amount: _propTypes["default"].number,
+    amount: _propTypes["default"].string,
     trialAmount: _propTypes["default"].number,
     value: _propTypes["default"].string.isRequired,
     monthlyPrice: _propTypes["default"].string,
@@ -220,7 +306,7 @@ PaymentTerm.propTypes = {
     chargeOnText: _propTypes["default"].string
   })),
   isFixedTermOffer: _propTypes["default"].bool,
-  displayName: _propTypes["default"].string,
+  offerDisplayName: _propTypes["default"].string,
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,
   optionsInARow: _propTypes["default"].bool

package/dist/registration-confirmation.js

@@ -25,10 +25,19 @@ var SOCIALS = [{
   name: 'facebook',
   link: 'https://www.facebook.com/financialtimes'
 }];
+var STORES = [{
+  name: 'apple',
+  link: 'https://apps.apple.com/app/apple-store/id1200842933'
+}, {
+  name: 'android',
+  link: 'https://play.google.com/store/apps/details?id=com.ft.news'
+}];
 
 function RegistrationConfirmation(_ref) {
   var _ref$email = _ref.email,
-      email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email;
+      email = _ref$email === void 0 ? EMAIL_DEFAULT_TEXT : _ref$email,
+      _ref$returnUrl = _ref.returnUrl,
+      returnUrl = _ref$returnUrl === void 0 ? '/' : _ref$returnUrl;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -38,7 +47,7 @@ function RegistrationConfirmation(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("h1", {
     className: "ncf__header ncf__header--confirmation"
   }, "Success"), /*#__PURE__*/_react["default"].createElement("p", {
-    className: "ncf__paragraph ncf__confirmation--message"
+    className: "ncf__confirmation--message"
   }, "We\u2019ve sent confirmation to ", email, ".")), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__divider-horizontal"
   }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -47,9 +56,11 @@ function RegistrationConfirmation(_ref) {
     className: "ncf__confirmation--socials"
   }, /*#__PURE__*/_react["default"].createElement("b", null, "Breaking news alerts, direct to your lock screen"), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__confirmation--mobile"
-  }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
+  }, "Download our apps or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__confirmation--desktop"
-  }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("section", {
+  }, "Find us in the app and google play stores or follow us on our socials"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--badges"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "o-social-follow",
     "aria-label": "Follow on social media"
   }, SOCIALS.map(function (_ref2) {
@@ -65,17 +76,33 @@ function RegistrationConfirmation(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "o-social-follow-icon__label"
     }, "on ", name));
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ncf__confirmation--mobile ncf__confirmation--app-badges",
+    "aria-label": "Download the app"
+  }, STORES.map(function (_ref3) {
+    var name = _ref3.name,
+        link = _ref3.link;
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      key: name,
+      href: link,
+      className: "ncf-icon ncf-icon--".concat(name),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-trackable": "register-app-".concat(name)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-social-follow-icon__label"
+    }, "on ", name));
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__confirmation--alerts"
   }, /*#__PURE__*/_react["default"].createElement("b", null, "Set up email alerts in", /*#__PURE__*/_react["default"].createElement("span", {
     "aria-label": "myFT",
-    className: "icon-myft"
+    className: "ncf-icon ncf-icon--myft"
   })), /*#__PURE__*/_react["default"].createElement("p", null, "Choose the content you want to follow by personalising your alerts for the most important topics and additional newsletters"), /*#__PURE__*/_react["default"].createElement("a", {
-    href: '/myft',
+    href: "/myft",
     className: "margin-top-x4 ncf__button ncf__button--secondary",
     "data-trackable": "register-personalise-my-alerts"
   }, "Personalise my alerts"))), /*#__PURE__*/_react["default"].createElement("a", {
-    href: '/',
+    href: returnUrl,
     target: "_parent",
     className: "ncf__confirmation--finish ncf__button ncf__button--submit",
     "data-trackable": "register-finish"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "23.2.0",
+  "version": "24.2.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": {
@@ -40,6 +40,7 @@
     "@financial-times/eslint-config-next": "^3.0.0",
     "@financial-times/jest-browser-resolver": "^1.0.2",
     "@financial-times/n-gage": "^8.2.0",
+    "@financial-times/n-pricing": "5.5.0",
     "@storybook/addon-a11y": "^6.0.10",
     "@storybook/addon-essentials": "6.0.10",
     "@storybook/react": "^6.0.10",

package/styles/confirmation.scss

@@ -20,13 +20,13 @@
 		}
 
 		&--desktop {
-			@include oGridRespondTo($until: L) {
+			@include oGridRespondTo($until: M) {
 				display: none;
 			}
 		}
 
 		&--mobile {
-			@include oGridRespondTo(L) {
+			@include oGridRespondTo(M) {
 				display: none;
 			}
 		}
@@ -34,9 +34,10 @@
 		&--links {
 			display: grid;
 			grid-template-rows: 1fr 1fr;
-			gap: oSpacingByName('s6');
+			gap: oSpacingByName('s4');
+			margin-top: oSpacingByName('s6');
 
-			@media (min-width: 980px) {
+			@include oGridRespondTo(M) {
 				grid-template-rows: unset;
 				grid-template-columns: 1fr 1fr;
 				gap: oSpacingByName('s8');
@@ -44,15 +45,33 @@
 		}
 
 		&--socials {
-			@media (min-width: 980px) {
+			@include oGridRespondTo(M) {
 				padding: oSpacingByName('s6') oSpacingByName('s4');
 			}
 		}
 
+		&--badges {
+			@include oGridRespondTo($until: M) {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: oSpacingByName('s6');
+				margin: auto;
+				max-width: 256px;
+			}
+		}
+
+		&--app-badges {
+			@include oGridRespondTo($until: M) {
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+			}
+		}
+
 		&--alerts {
 			display: flex;
 			flex-direction: column;
-			padding: oSpacingByName('s6') oSpacingByName('s4');
+			padding: 24px 20px;
 			background-color: oColorsByName('white-60');
 
 			a {
@@ -65,24 +84,39 @@
 
 		&--finish {
 			display: block;
-			margin: 4rem auto 0;
+			margin: 48px auto 0;
 			width: 100%;
 
-			@media (min-width: 740px) {
+			@include oGridRespondTo(M) {
 				max-width: 260px;
 			}
 		}
 	}
 }
 
-.icon-myft::before {
+.ncf-icon::before {
 	content: '';
 	display: inline-block;
-	margin-left: 0.5rem;
-	height: 1rem;
-	width: 3rem;
 	vertical-align: middle;
 	background-size: contain;
 	background-repeat: no-repeat;
+}
+
+.ncf-icon--myft::before {
+	margin-left: 0.5rem;
+	height: 1rem;
+	width: 3rem;
 	background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo:brand-myft?format=svg&source=next-subscribe&tint=%2333302E%2C%2333302E&width=28&height=16');
 }
+
+.ncf-icon--android::before {
+	height: 40px;
+	width: 136px;
+	background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aandroid?source=next-subscribe');
+}
+
+.ncf-icon--apple::before {
+	height: 40px;
+	width: 136px;
+	background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/app-badge-v1%3Aapple?format=svg&source=next-subscribe');
+}

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;
 			}
 		}
 	}