@financial-times/n-conversion-forms 37.2.3 → 38.0.0

package/.toolkitstate/ci.json

@@ -1,6 +1,6 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "8bc87e48ea5c8edd123a52d6e59b12a23dee24e2",
-  "tag": "v37.2.3"
+  "version": "31e041f551d5077e705e60bc10e33df6fe32fd0f",
+  "tag": "v38.0.0"
 }

package/components/accept-terms-subscription.jsx

@@ -38,6 +38,24 @@ export function AcceptTermsSubscription({
 		required: true,
 	};
 
+	const autoRenewingTerms = !isSingleTerm && (
+		<li>
+			<span className="terms-auto-renew">
+				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{' '}
+				<a
+					className="ncf__link--external"
+					href="https://help.ft.com/help/contact-us/"
+					target={isEmbedded ? '_top' : '_blank'}
+					rel="noopener noreferrer"
+				>
+					customer care through chat, phone or email
+				</a>
+				.
+			</span>
+		</li>
+	);
+
 	if (isTermedSubscriptionTermType) {
 		return (
 			<div {...divProps}>
@@ -88,24 +106,6 @@ export function AcceptTermsSubscription({
 
 	const transitionTerms = isTransition && (
 		<>
-			{!isSingleTerm && (
-				<li>
-					<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{' '}
-						<a
-							className="ncf__link--external"
-							href="https://help.ft.com/help/contact-us/"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							customer care through chat, phone or email
-						</a>
-						.
-					</span>
-				</li>
-			)}
 			{transitionType === 'immediate' ? (
 				<li>
 					<span className="terms-transition terms-transition--immediate">
@@ -185,22 +185,6 @@ export function AcceptTermsSubscription({
 
 	const nonPrintTerms = (
 		<>
-			<li>
-				<span className="terms-signup">
-					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{' '}
-					<a
-						className="ncf__link--external"
-						href="https://help.ft.com/help/contact-us/"
-						target={isEmbedded ? '_top' : '_blank'}
-						rel="noopener noreferrer"
-					>
-						customer care through chat, phone or email
-					</a>
-					.
-				</span>
-			</li>
 			<li>
 				<span className="terms-signup">
 					By placing my order, my subscription will start immediately and I am
@@ -234,6 +218,7 @@ export function AcceptTermsSubscription({
 	return (
 		<div {...divProps}>
 			<ul className="o-typography-list ncf__accept-terms-list">
+				{autoRenewingTerms}
 				{transitionTerms}
 				{signupTerms}
 				{deferredBillingTerms}

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

@@ -47,6 +47,28 @@ describe('AcceptTermsSubscription', () => {
 		expect(trialTerms.exists()).toBe(false);
 	});
 
+	it('renders the auto renewing charges terms when isSingleTerm prop is false', () => {
+		const props = {
+			isSingleTerm: false,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const printTerms = component.find('.terms-auto-renew');
+		expect(printTerms.exists()).toBe(true);
+	});
+
+	it('does not render the auto renewing charges terms when isSingleTerm prop is true', () => {
+		const props = {
+			isSingleTerm: true,
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const printTerms = component.find('.terms-auto-renew');
+		expect(printTerms.exists()).toBe(false);
+	});
+
 	it('renders the print-specific terms when isPrintProduct prop is true', () => {
 		const props = {
 			isPrintProduct: true,

package/components/payment-term.jsx

@@ -190,6 +190,15 @@ export function PaymentTerm({
 		};
 
 		const createDiscount = () => {
+			// We need to display a specific text in the discount tile for H2 campaign offers.
+			// This is a TEMPORARY hack and will be removed once the campaign is over (Monday, October 28th).
+			// A ticket has been raised to deal with the clean-up: https://financialtimes.atlassian.net/browse/ACQ-2970.
+			if (option.specialOffer) {
+				return (
+					<span className="ncf__payment-term__discount">Special offer</span>
+				);
+			}
+
 			return (
 				option.discount && (
 					<span className="ncf__payment-term__discount">
@@ -245,7 +254,7 @@ export function PaymentTerm({
 											option.amount,
 											option.currency,
 											option.value
-									  )
+										)
 							)}
 							{nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
 						</div>
@@ -420,6 +429,7 @@ PaymentTerm.propTypes = {
 			title: PropTypes.string,
 			subTitle: PropTypes.string,
 			bestOffer: PropTypes.bool,
+			specialOffer: PropTypes.bool,
 			chargeOnText: PropTypes.string,
 			fulfilmentOption: PropTypes.string,
 		})

package/components/payment-term.stories.js

@@ -132,6 +132,17 @@ RenewOffers.args = {
 			selected: false,
 			chargeOnText: 'You will be charged on May 1, 2021',
 		},
+		{
+			title: 'Annual',
+			subTitle: '(Renews annually unless cancelled)',
+			price: '€ 150.00',
+			value: 150.0,
+			isTrial: false,
+			discount: '25%',
+			specialOffer: true,
+			selected: false,
+			chargeOnText: 'You will be charged on May 1, 2021',
+		},
 		{
 			title: '12 Month Subscription',
 			price: '€ 300.00',

package/dist/accept-terms-subscription.jsx

@@ -51,6 +51,14 @@ function AcceptTermsSubscription(_ref) {
     'aria-required': 'true',
     required: true
   };
+  var autoRenewingTerms = !isSingleTerm && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-auto-renew"
+  }, "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", {
+    className: "ncf__link--external",
+    href: "https://help.ft.com/help/contact-us/",
+    target: isEmbedded ? '_top' : '_blank',
+    rel: "noopener noreferrer"
+  }, "customer care through chat, phone or email"), "."));
   if (isTermedSubscriptionTermType) {
     return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
       className: "o-typography-list ncf__accept-terms-list"
@@ -74,14 +82,7 @@ function AcceptTermsSubscription(_ref) {
       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", {
-    className: "ncf__link--external",
-    href: "https://help.ft.com/help/contact-us/",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "customer care through chat, phone or email"), ".")), transitionType === 'immediate' ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+  var transitionTerms = isTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, transitionType === 'immediate' ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition terms-transition--immediate"
   }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-transition terms-transition--other"
@@ -109,13 +110,6 @@ function AcceptTermsSubscription(_ref) {
   }, "Terms & Conditions"), ".")));
   var nonPrintTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-signup"
-  }, "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", {
-    className: "ncf__link--external",
-    href: "https://help.ft.com/help/contact-us/",
-    target: isEmbedded ? '_top' : '_blank',
-    rel: "noopener noreferrer"
-  }, "customer care through chat, phone or email"), ".")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "terms-signup"
   }, "By placing my order, my subscription will start immediately and I am aware and agree that I will therefore lose my statutory right to cancel my subscription within 14 days of acceptance of my order. Any notice of cancellation that I provide will only take effect at the end of my subscription period and previously paid amounts are non-refundable, except in the event that there is a fault in the provision of the services.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-signup"
   }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
@@ -127,7 +121,7 @@ function AcceptTermsSubscription(_ref) {
   var signupTerms = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isPrintProduct ? printTerms : nonPrintTerms);
   return /*#__PURE__*/_react["default"].createElement("div", divProps, /*#__PURE__*/_react["default"].createElement("ul", {
     className: "o-typography-list ncf__accept-terms-list"
-  }, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
+  }, autoRenewingTerms, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {

package/dist/payment-term.jsx

@@ -185,6 +185,14 @@ function PaymentTerm(_ref) {
       defaultChecked: true
     });
     var createDiscount = function createDiscount() {
+      // We need to display a specific text in the discount tile for H2 campaign offers.
+      // This is a TEMPORARY hack and will be removed once the campaign is over (Monday, October 28th).
+      // A ticket has been raised to deal with the clean-up: https://financialtimes.atlassian.net/browse/ACQ-2970.
+      if (option.specialOffer) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: "ncf__payment-term__discount"
+        }, "Special offer");
+      }
       return option.discount && /*#__PURE__*/_react["default"].createElement("span", {
         className: "ncf__payment-term__discount"
       }, option.bestOffer ? 'Best offer' : "Save ".concat(option.discount, " off RRP"));
@@ -306,6 +314,7 @@ PaymentTerm.propTypes = {
     title: _propTypes["default"].string,
     subTitle: _propTypes["default"].string,
     bestOffer: _propTypes["default"].bool,
+    specialOffer: _propTypes["default"].bool,
     chargeOnText: _propTypes["default"].string,
     fulfilmentOption: _propTypes["default"].string
   })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "37.2.3",
+  "version": "38.0.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).",
   "main": "./dist/index.js",
   "scripts": {