@financial-times/n-conversion-forms 43.0.2 → 44.1.0

package/.toolkitstate/ci.json

@@ -1,7 +1,7 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "43bf193e6c5bb6ea45b708559bbbb5f8c4a72d5f",
-  "tag": "v43.0.2",
-  "buildNumber": "16560"
+  "version": "7378c0ba4948452dbcff7c028f0c27542e22d89d",
+  "tag": "v44.1.0",
+  "buildNumber": "16706"
 }

package/components/accept-terms-subscription.jsx

@@ -11,12 +11,19 @@ export function AcceptTermsSubscription({
 	isSingleTerm = false,
 	isTermedSubscriptionTermType = false,
 	isTransition = false,
+	isDmccCompliantTransition = false,
 	transitionType = null,
 	isDeferredBilling = false,
+	additionalClassNames = [],
 }) {
 	const divProps = {
 		id: 'acceptTermsField',
-		className: 'o-forms-field o-layout-typography ncf__validation-error',
+		className: classNames([
+			'o-forms-field',
+			'o-layout-typography',
+			'ncf__validation-error',
+			...additionalClassNames,
+		]),
 		'data-validate': 'required,checked',
 		...(isSignup && { 'data-trackable': 'sign-up-terms' }),
 	};
@@ -145,6 +152,49 @@ export function AcceptTermsSubscription({
 		</>
 	);
 
+	const dmccTransitionTerms = isDmccCompliantTransition && (
+		<>
+			{transitionType === 'immediate' ? (
+				<li>
+					<span className="terms-dmcc-transition terms-dmcc-transition--immediate">
+						I consent to payment being taken at the end of each subscription
+						term until I cancel. I understand and agree that I will lose my
+						statutory right to cancel within 14 days of accepting my order, and
+						that any notice to cancel will only take effect at the end of my
+						subscription period. Previously paid amounts are non-refundable,
+						except in the event of a fault in the provision of services.
+					</span>
+				</li>
+			) : (
+				<li>
+					<span className="terms-dmcc-transition terms-dmcc-transition--end-of-term">
+						I consent to payment being taken at the end of each subscription
+						term until I cancel. By accepting, I am aware that my subscription
+						will renew on the date given. I understand and agree that I will
+						lose my statutory right to cancel within 14 days of accepting my
+						order, and that any notice to cancel will only take effect at the
+						end of my subscription period. Previously paid amounts are
+						non-refundable, except in the event of a fault in the provision of
+						services.
+					</span>
+				</li>
+			)}
+			<li>
+				<span className="terms-dmcc-transition o3-type-body-base">
+					For more information, see our full{' '}
+					<a
+						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						Terms &amp; Conditions
+					</a>
+					.
+				</span>
+			</li>
+		</>
+	);
+
 	const deferredBillingTerms = isDeferredBilling && (
 		<li>
 			<span className="terms-deferred">
@@ -213,10 +263,16 @@ export function AcceptTermsSubscription({
 	return (
 		<div {...divProps}>
 			<ul className="ncf__accept-terms-list">
-				{autoRenewingTerms}
-				{transitionTerms}
-				{signupTerms}
-				{deferredBillingTerms}
+				{isDmccCompliantTransition ? (
+					dmccTransitionTerms
+				) : (
+					<>
+						{autoRenewingTerms}
+						{transitionTerms}
+						{signupTerms}
+						{deferredBillingTerms}
+					</>
+				)}
 			</ul>
 			<label className={labelClassName} htmlFor="termsAcceptance">
 				<input {...inputProps} />
@@ -242,4 +298,6 @@ AcceptTermsSubscription.propTypes = {
 	isTransition: PropTypes.bool,
 	transitionType: PropTypes.string,
 	isDeferredBilling: PropTypes.bool,
+	isDmccCompliantTransition: PropTypes.bool,
+	additionalClassNames: PropTypes.arrayOf(PropTypes.string),
 };

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

@@ -135,4 +135,28 @@ describe('AcceptTermsSubscription', () => {
 		const deferredBillingTerms = component.find('.terms-deferred');
 		expect(deferredBillingTerms.exists()).toBe(true);
 	});
+
+	it('renders the terms for DMCC compliant journey with end of term transition', () => {
+		const props = {
+			isDmccCompliantTransition: true,
+			transitionType: 'endOfTerm',
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const dmccTerms = component.find('.terms-dmcc-transition--end-of-term');
+		expect(dmccTerms.exists()).toBe(true);
+	});
+
+	it('renders the terms for DMCC compliant journey with immediate transition', () => {
+		const props = {
+			isDmccCompliantTransition: true,
+			transitionType: 'immediate',
+		};
+
+		const component = mount(<AcceptTermsSubscription {...props} />);
+
+		const dmccTerms = component.find('.terms-dmcc-transition--immediate');
+		expect(dmccTerms.exists()).toBe(true);
+	});
 });

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

@@ -57,3 +57,11 @@ export const IsDeferredBilling = (args) => (
 IsDeferredBilling.args = {
 	isDeferredBilling: true,
 };
+
+export const IsDmccCompliantTransition = (args) => (
+	<AcceptTermsSubscription {...args} />
+);
+
+IsDmccCompliantTransition.args = {
+	isDmccCompliantTransition: true,
+};

package/components/payment-term.jsx

@@ -14,8 +14,6 @@ export function PaymentTerm({
 	optionsInARow = false,
 	billingCountry = '',
 	isTermedSubscriptionTermType = false,
-	isTrialOfferAsNonTrialOverride = false,
-	labelOverride = '', // this is a temporary hack for the February 2024 campaign
 }) {
 	/**
 	 * Compute monthly price for given term name
@@ -271,16 +269,6 @@ export function PaymentTerm({
 			const showTrialCopyInTitle =
 				option.isTrial && !isPrintOrBundle && !isDigitalEdition;
 
-			// 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 title =
 				option.name && nameMap[option.name] ? nameMap[option.name].title : '';
 
@@ -427,5 +415,4 @@ PaymentTerm.propTypes = {
 	largePrice: PropTypes.bool,
 	optionsInARow: PropTypes.bool,
 	billingCountry: PropTypes.string,
-	isTrialOfferAsNonTrialOverride: PropTypes.bool,
 };

package/components/payment-term.spec.js

@@ -194,7 +194,7 @@ describe('PaymentTerm', () => {
 				);
 			});
 		});
-		describe('getDisplayName trial', () => {
+		describe('getDisplayName', () => {
 			const trialOptions = {
 				...baseOptions,
 				isTrial: true,
@@ -206,19 +206,6 @@ 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

@@ -144,38 +144,3 @@ 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/dist/accept-terms-subscription.jsx

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AcceptTermsSubscription = AcceptTermsSubscription;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -28,13 +29,17 @@ function AcceptTermsSubscription(_ref) {
     isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
     _ref$isTransition = _ref.isTransition,
     isTransition = _ref$isTransition === void 0 ? false : _ref$isTransition,
+    _ref$isDmccCompliantT = _ref.isDmccCompliantTransition,
+    isDmccCompliantTransition = _ref$isDmccCompliantT === void 0 ? false : _ref$isDmccCompliantT,
     _ref$transitionType = _ref.transitionType,
     transitionType = _ref$transitionType === void 0 ? null : _ref$transitionType,
     _ref$isDeferredBillin = _ref.isDeferredBilling,
-    isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin;
+    isDeferredBilling = _ref$isDeferredBillin === void 0 ? false : _ref$isDeferredBillin,
+    _ref$additionalClassN = _ref.additionalClassNames,
+    additionalClassNames = _ref$additionalClassN === void 0 ? [] : _ref$additionalClassN;
   var divProps = _objectSpread({
     id: 'acceptTermsField',
-    className: 'o-forms-field o-layout-typography ncf__validation-error',
+    className: (0, _classnames["default"])(['o-forms-field', 'o-layout-typography', 'ncf__validation-error'].concat((0, _toConsumableArray2["default"])(additionalClassNames))),
     'data-validate': 'required,checked'
   }, isSignup && {
     'data-trackable': 'sign-up-terms'
@@ -91,6 +96,17 @@ function AcceptTermsSubscription(_ref) {
     target: "_blank",
     rel: "noopener noreferrer"
   }, "Terms & Conditions"), ".")));
+  var dmccTransitionTerms = isDmccCompliantTransition && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, transitionType === 'immediate' ? /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-dmcc-transition terms-dmcc-transition--immediate"
+  }, "I consent to payment being taken at the end of each subscription term until I cancel. I understand and agree that I will lose my statutory right to cancel within 14 days of accepting my order, and that any notice to cancel will only take effect at the end of my subscription period. Previously paid amounts are non-refundable, except in the event of a fault in the provision of services.")) : /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-dmcc-transition terms-dmcc-transition--end-of-term"
+  }, "I consent to payment being taken at the end of each subscription term until I cancel. By accepting, I am aware that my subscription will renew on the date given. I understand and agree that I will lose my statutory right to cancel within 14 days of accepting my order, and that any notice to cancel will only take effect at the end of my subscription period. Previously paid amounts are non-refundable, except in the event of a fault in the provision of services.")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "terms-dmcc-transition o3-type-body-base"
+  }, "For more information, see our full", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+    href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "Terms & Conditions"), ".")));
   var deferredBillingTerms = isDeferredBilling && /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "terms-deferred"
   }, "Please note if you fail to make payment for your deferred billing plan within due date your subscription will be automatically cancelled."));
@@ -116,7 +132,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: "ncf__accept-terms-list"
-  }, autoRenewingTerms, transitionTerms, signupTerms, deferredBillingTerms), /*#__PURE__*/_react["default"].createElement("label", {
+  }, isDmccCompliantTransition ? dmccTransitionTerms : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, autoRenewingTerms, transitionTerms, signupTerms, deferredBillingTerms)), /*#__PURE__*/_react["default"].createElement("label", {
     className: labelClassName,
     htmlFor: "termsAcceptance"
   }, /*#__PURE__*/_react["default"].createElement("input", inputProps), /*#__PURE__*/_react["default"].createElement("span", {
@@ -135,5 +151,7 @@ AcceptTermsSubscription.propTypes = {
   isTermedSubscriptionTermType: _propTypes["default"].bool,
   isTransition: _propTypes["default"].bool,
   transitionType: _propTypes["default"].string,
-  isDeferredBilling: _propTypes["default"].bool
+  isDeferredBilling: _propTypes["default"].bool,
+  isDmccCompliantTransition: _propTypes["default"].bool,
+  additionalClassNames: _propTypes["default"].arrayOf(_propTypes["default"].string)
 };

package/dist/payment-term.jsx

@@ -32,11 +32,7 @@ function PaymentTerm(_ref) {
     _ref$billingCountry = _ref.billingCountry,
     billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry,
     _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
-    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;
+    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
   /**
    * Compute monthly price for given term name
    * @param {number} amount price in number format
@@ -214,16 +210,6 @@ function PaymentTerm(_ref) {
     };
     var getTermDisplayName = function getTermDisplayName() {
       var showTrialCopyInTitle = option.isTrial && !isPrintOrBundle && !isDigitalEdition;
-
-      // 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 title = option.name && nameMap[option.name] ? nameMap[option.name].title : '';
       var termDisplayName = '';
       if (showTrialCopyInTitle) {
@@ -315,6 +301,5 @@ PaymentTerm.propTypes = {
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,
   optionsInARow: _propTypes["default"].bool,
-  billingCountry: _propTypes["default"].string,
-  isTrialOfferAsNonTrialOverride: _propTypes["default"].bool
+  billingCountry: _propTypes["default"].string
 };

package/package.json

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