@financial-times/n-conversion-forms 32.3.2 → 32.4.0

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "dbf4d85ef93c98eced9c5d9293344ff7542f492d",
-  "tag": "v32.3.2"
+  "version": "028fb82534567b6f0bb602afb409c47306fd4671",
+  "tag": "v32.4.0"
 }

package/components/accept-terms-subscription.jsx

@@ -10,6 +10,7 @@ export function AcceptTermsSubscription({
 	isPrintProduct = false,
 	isSingleTerm = false,
 	is7DayPassExperiment = false,
+	isTermedSubscriptionTermType = false,
 	isTransition = false,
 	transitionType = null,
 	isDeferredBilling = false,
@@ -88,6 +89,52 @@ export function AcceptTermsSubscription({
 		);
 	}
 
+	if (isTermedSubscriptionTermType) {
+		return (
+			<div {...divProps}>
+				<ul className="o-typography-list ncf__accept-terms-list">
+					<li>
+						<span className="terms-transition terms-transition--immediate">
+							I give consent for the chosen payment method to be charged automatically.
+						</span>
+					</li>
+					<li>
+						<span className="terms-transition terms-transition--immediate">
+							By placing your order subject to the Terms & Conditions (save for section 2) referred to
+							below, you are waiving your statutory right to cancel our contract within 14 days of
+							payment. Your payment is a one-time payment collected at the time of checkout, and
+							unsubscribing or cancelling at any point (whether before or after the 14-day period)
+							will not entitle you to a refund.
+						</span>
+					</li>
+					<li>
+						<span className="terms-transition">
+							Please see here for the complete{' '}
+							<a
+								className="ncf__link--external"
+								href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Terms &amp; Conditions
+							</a>
+							.
+						</span>
+					</li>
+				</ul>
+				<label className={labelClassName} htmlFor="termsAcceptance">
+					<input {...inputProps} />
+					<span className="o-forms-input__label">
+						I agree to the above terms &amp; conditions.
+					</span>
+					<p className="o-forms-input__error">
+						Please accept our terms &amp; conditions
+					</p>
+				</label>
+			</div>
+		);
+	}
+
 	const transitionTerms = isTransition && (
 		<>
 			{!isSingleTerm && (
@@ -261,6 +308,7 @@ AcceptTermsSubscription.propTypes = {
 	isPrintProduct: PropTypes.bool,
 	isSingleTerm: PropTypes.bool,
 	is7DayPassExperiment: PropTypes.bool,
+	isTermedSubscriptionTermType: PropTypes.bool,
 	isTransition: PropTypes.bool,
 	transitionType: PropTypes.string,
 	isDeferredBilling: PropTypes.bool,

package/components/accept-terms-subscription.spec.js

@@ -70,6 +70,28 @@ describe('AcceptTermsSubscription', () => {
 		expect(transitionTerms.exists()).toBe(true);
 	});
 
+	it('renders the transition terms when isTermedSubscriptionTermType prop is true', () => {
+		const props = {
+			isTermedSubscriptionTermType: true,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const transitionTerms1 = component.find('.terms-transition').at(0);
+		const transitionTerms2 = component.find('.terms-transition').at(1);
+		const transitionTerms3 = component.find('.terms-transition').at(2);
+
+		expect(transitionTerms1.text()).toEqual(
+			'I give consent for the chosen payment method to be charged automatically.'
+		);
+		expect(transitionTerms2.text()).toEqual(
+			'By placing your order subject to the Terms & Conditions (save for section 2) referred to below, you are waiving your statutory right to cancel our contract within 14 days of payment. Your payment is a one-time payment collected at the time of checkout, and unsubscribing or cancelling at any point (whether before or after the 14-day period) will not entitle you to a refund.'
+		);
+		expect(transitionTerms3.text()).toEqual(
+			'Please see here for the complete Terms & Conditions.'
+		);
+	});
+
 	it('does not render the transition terms when transitionType prop is null', () => {
 		const props = {
 			transitionType: null,

package/components/accept-terms-subscription.stories.js

@@ -30,6 +30,14 @@ IsSingleTerm.args = {
 	isSingleTerm: true,
 };
 
+export const TermedSubscriptionTermType = (args) => (
+	<AcceptTermsSubscription {...args} />
+);
+
+TermedSubscriptionTermType.args = {
+	isTermedSubscriptionTermType: true,
+};
+
 export const IsTransition = (args) => <AcceptTermsSubscription {...args} />;
 
 IsTransition.args = {

package/components/payment-term.jsx

@@ -16,12 +16,13 @@ export function PaymentTerm({
 	optionsInARow = false,
 	billingCountry = '',
 	is7DayPassExperiment = false,
+	isTermedSubscriptionTermType = false,
 }) {
 	/**
 	 * 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
+	 * @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) => {
@@ -33,13 +34,22 @@ export function PaymentTerm({
 	/**
 	 * 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
+	 * @param {string} period (expressed in IS0 8601 duration format): PxY (yearly), PxM (montly), or PxW, where x is the amount of years/months/weeks
 	 * @returns {string}
 	 */
 	const getTimeFromPeriod = (period) => {
-		const freq =
-			period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
+		const periodUnitCodeToWordMap = {
+			Y: 'years',
+			M: 'months',
+			W: 'weeks',
+		};
+
+		const periodUnitCode = period.substring(period.length - 1);
+
+		const freq = periodUnitCodeToWordMap[periodUnitCode] || '';
+
 		const amount = period.substring(1, period.length - 1);
+
 		return period ? `${amount} ${freq}` : '';
 	};
 
@@ -177,6 +187,7 @@ export function PaymentTerm({
 					</span>
 				),
 			renewsText: (renewalPeriod) =>
+				!isTermedSubscriptionTermType &&
 				Boolean(renewalPeriod) && (
 					<p className="ncf__payment-term__renews-text">
 						Renews every {renewalPeriod} unless cancelled
@@ -371,7 +382,7 @@ export function PaymentTerm({
 
 			{showLegal && (
 				<div className="ncf__payment-term__legal">
-					{isFixedTermOffer ? (
+					{isTermedSubscriptionTermType || isFixedTermOffer ? (
 						<p>
 							Find out more about our cancellation policy in our{' '}
 							<a
@@ -443,6 +454,7 @@ PaymentTerm.propTypes = {
 		})
 	),
 	isFixedTermOffer: PropTypes.bool,
+	isTermedSubscriptionTermType: PropTypes.bool,
 	offerDisplayName: PropTypes.string,
 	showLegal: PropTypes.bool,
 	largePrice: PropTypes.bool,

package/components/payment-term.spec.js

@@ -184,6 +184,32 @@ describe('PaymentTerm', () => {
 		});
 	});
 
+	describe('given isTermedSubscriptionTermType is true', () => {
+		const options = [
+			{
+				name: '8 weeks',
+				price: '£19.00',
+				amount: '19.00',
+				value: 'P8W',
+			},
+		];
+		const wrapper = shallow(
+			<PaymentTerm options={options} isTermedSubscriptionTermType={true} />
+		);
+
+		it('renders subscription term as title', () => {
+			expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
+				'8 weeks'
+			);
+		});
+
+		it('renders description text that reflects that the termed subscription requires a single payment that expresses the per duration cost for shorter durations', () => {
+			expect(wrapper.find('.ncf__payment-term__description').text()).toContain(
+				'Single £19.00 paymentThat’s equivalent to GBP9.50 per month'
+			);
+		});
+	});
+
 	describe('getDisplayName', () => {
 		const baseOptions = {
 			name: 'monthly',

package/components/payment-term.stories.js

@@ -129,6 +129,25 @@ SevenDayPassExperimentOffer.args = {
 	offerDisplayName: '7-day pass',
 };
 
+export const TermedSubscriptionTermType = (args) => (
+	<div className="ncf">
+		<Fieldset>
+			<PaymentTerm {...args} />
+		</Fieldset>
+	</div>
+);
+TermedSubscriptionTermType.args = {
+	options: [
+		{
+			name: '8 weeks',
+			price: '£19.00',
+			amount: '19.00',
+			value: 'P8W',
+		},
+	],
+	isTermedSubscriptionTermType: true,
+};
+
 export const RenewOffers = (args) => (
 	<div className="ncf">
 		<Fieldset>

package/dist/accept-terms-subscription.jsx

@@ -26,6 +26,8 @@ function AcceptTermsSubscription(_ref) {
     isSingleTerm = _ref$isSingleTerm === void 0 ? false : _ref$isSingleTerm,
     _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
     is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi,
+    _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
+    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
     _ref$isTransition = _ref.isTransition,
     isTransition = _ref$isTransition === void 0 ? false : _ref$isTransition,
     _ref$transitionType = _ref.transitionType,
@@ -74,6 +76,29 @@ function AcceptTermsSubscription(_ref) {
       className: "o-forms-input__error"
     }, "Please accept our terms & conditions")));
   }
+  if (isTermedSubscriptionTermType) {
+    return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
+      className: "o-typography-list ncf__accept-terms-list"
+    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "terms-transition terms-transition--immediate"
+    }, "I give consent for the chosen payment method to be charged automatically.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "terms-transition terms-transition--immediate"
+    }, "By placing your order subject to the Terms & Conditions (save for section 2) referred to below, you are waiving your statutory right to cancel our contract within 14 days of payment. Your payment is a one-time payment collected at the time of checkout, and unsubscribing or cancelling at any point (whether before or after the 14-day period) will not entitle you to a refund.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "terms-transition"
+    }, "Please see here for the complete", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+      className: "ncf__link--external",
+      href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, "Terms & Conditions"), "."))), /*#__PURE__*/_react["default"].createElement("label", {
+      className: labelClassName,
+      htmlFor: "termsAcceptance"
+    }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "o-forms-input__label"
+    }, "I agree to the above terms & conditions."), /*#__PURE__*/_react["default"].createElement("p", {
+      className: "o-forms-input__error"
+    }, "Please accept our terms & conditions")));
+  }
   var transitionTerms = isTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isSingleTerm && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition"
   }, "I give consent for my chosen payment method to be charged automatically at the end of each subscription term until I cancel it by contacting", ' ', /*#__PURE__*/_react["default"].createElement("a", {
@@ -144,6 +169,7 @@ AcceptTermsSubscription.propTypes = {
   isPrintProduct: _propTypes["default"].bool,
   isSingleTerm: _propTypes["default"].bool,
   is7DayPassExperiment: _propTypes["default"].bool,
+  isTermedSubscriptionTermType: _propTypes["default"].bool,
   isTransition: _propTypes["default"].bool,
   transitionType: _propTypes["default"].string,
   isDeferredBilling: _propTypes["default"].bool

package/dist/payment-term.jsx

@@ -35,12 +35,14 @@ function PaymentTerm(_ref) {
     _ref$billingCountry = _ref.billingCountry,
     billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry,
     _ref$is7DayPassExperi = _ref.is7DayPassExperiment,
-    is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi;
+    is7DayPassExperiment = _ref$is7DayPassExperi === void 0 ? false : _ref$is7DayPassExperi,
+    _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
+    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
   /**
    * 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
+   * @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) {
@@ -55,11 +57,17 @@ function PaymentTerm(_ref) {
   /**
    * 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
+   * @param {string} period (expressed in IS0 8601 duration format): PxY (yearly), PxM (montly), or PxW, where x is the amount of years/months/weeks
    * @returns {string}
    */
   var getTimeFromPeriod = function getTimeFromPeriod(period) {
-    var freq = period.substring(period.length - 1) === 'Y' ? 'years' : 'months';
+    var periodUnitCodeToWordMap = {
+      Y: 'years',
+      M: 'months',
+      W: 'weeks'
+    };
+    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) : '';
   };
@@ -171,7 +179,7 @@ function PaymentTerm(_ref) {
         }, _monthlyPrice), ' ', "per month");
       },
       renewsText: function renewsText(renewalPeriod) {
-        return Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
+        return !isTermedSubscriptionTermType && Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
           className: "ncf__payment-term__renews-text"
         }, "Renews every ", renewalPeriod, " unless cancelled");
       }
@@ -276,7 +284,7 @@ function PaymentTerm(_ref) {
     return createPaymentTerm(option);
   })), showLegal && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__payment-term__legal"
-  }, isFixedTermOffer ? /*#__PURE__*/_react["default"].createElement("p", null, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, isTermedSubscriptionTermType || isFixedTermOffer ? /*#__PURE__*/_react["default"].createElement("p", null, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     className: "ncf__link--external",
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
@@ -316,6 +324,7 @@ PaymentTerm.propTypes = {
     fulfilmentOption: _propTypes["default"].string
   })),
   isFixedTermOffer: _propTypes["default"].bool,
+  isTermedSubscriptionTermType: _propTypes["default"].bool,
   offerDisplayName: _propTypes["default"].string,
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,

package/package.json

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