@financial-times/n-conversion-forms 44.5.2 → 45.0.0

package/.toolkitstate/ci.json

@@ -1,7 +1,7 @@
 {
   "branch": "",
   "repo": "n-conversion-forms",
-  "version": "3d7277f162178bab7f179119d5b1ab604450e546",
-  "tag": "v44.5.2",
-  "buildNumber": "17578"
+  "version": "af67cefb78210e23aab60a7c27b2a97b79880e2e",
+  "tag": "v45.0.0",
+  "buildNumber": "17972"
 }

package/components/__snapshots__/confirmation.spec.js.snap

@@ -1,5 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Confirmation renders appropriately if is 'Evergreen' subscription term type 1`] = `
+<div class="ncf ncf__wrapper">
+  <div class="ncf__center">
+    <div class="ncf__icon ncf__icon--tick ncf__icon--large">
+    </div>
+    <p class="ncf__paragraph--reduced-padding ncf__paragraph--subscription-confirmation">
+      You are now subscribed to:
+    </p>
+    <h1 class="ncf__header ncf__header--confirmation">
+    </h1>
+  </div>
+  <p class="ncf__paragraph">
+    We’ve sent confirmation to your email. Make sure you check your spam folder if you don’t receive it.
+  </p>
+  <p class="ncf__paragraph">
+    Here’s a summary of your  subscription:
+  </p>
+  <div class="ncf__headed-paragraph">
+    <h3 class="ncf__header">
+      Something not right?
+    </h3>
+    <p class="ncf__paragraph o3-type-body-base">
+      Go to your
+      <a href="https://www.ft.com/myaccount/personal-details"
+         target="_blank"
+         rel="noopener noreferrer"
+         data-trackable="yourAccount"
+      >
+        account settings
+      </a>
+      to view or edit your account. If you need to get in touch call us on
+      <a href="tel:+442077556248">
+        +44 (0) 207 755 6248
+      </a>
+      . Or contact us for additional support.
+    </p>
+  </div>
+  <p class="ncf__paragraph o3-type-body-base">
+    We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. See our
+    <a href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+       target="_top"
+       rel="noopener"
+    >
+      Terms &amp; Conditions
+    </a>
+    for details on how to cancel.
+  </p>
+</div>
+`;
+
 exports[`Confirmation renders appropriately if is 'Termed' subscription term type 1`] = `
 <div class="ncf ncf__wrapper">
   <div class="ncf__center">

package/components/__snapshots__/graduation-date.spec.js.snap

@@ -71,9 +71,6 @@ exports[`GraduationDate renders with default props 1`] = `
                 name="graduationDateYear"
                 aria-required="false"
         >
-          <option value="2021">
-            2021
-          </option>
           <option value="2022">
             2022
           </option>
@@ -98,6 +95,9 @@ exports[`GraduationDate renders with default props 1`] = `
           <option value="2029">
             2029
           </option>
+          <option value="2030">
+            2030
+          </option>
         </select>
       </span>
     </div>

package/components/confirmation.jsx

@@ -8,7 +8,7 @@ export function Confirmation({
 	isTrial = false,
 	isB2cPartnership = false,
 	b2cPartnershipCopy = [],
-	isTermedSubscriptionTermType = false,
+	isEvergreenSubscriptionTermType = true,
 	offer = '',
 	email = EMAIL_DEFAULT_TEXT,
 	details = null,
@@ -114,7 +114,7 @@ export function Confirmation({
 				</p>
 			</div>
 			<p className="ncf__paragraph o3-type-body-base">
-				{!isTermedSubscriptionTermType
+				{isEvergreenSubscriptionTermType
 					? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. '
 					: ''}
 				{'See our '}
@@ -136,7 +136,7 @@ Confirmation.propTypes = {
 	isTrial: PropTypes.bool,
 	isB2cPartnership: PropTypes.bool,
 	b2cPartnershipCopy: PropTypes.array,
-	isTermedSubscriptionTermType: PropTypes.bool,
+	isEvergreenSubscriptionTermType: PropTypes.bool,
 	offer: PropTypes.string.isRequired,
 	email: PropTypes.string,
 	details: PropTypes.arrayOf(

package/components/confirmation.spec.js

@@ -29,8 +29,20 @@ describe('Confirmation', () => {
 		expect(Confirmation).toRenderCorrectly(props);
 	});
 
+	it("renders appropriately if is 'Evergreen' subscription term type", () => {
+		const props = {
+			isEvergreenSubscriptionTermType: true,
+			isTermedSubscriptionTermType: false,
+		};
+
+		expect(Confirmation).toRenderCorrectly(props);
+	});
+
 	it("renders appropriately if is 'Termed' subscription term type", () => {
-		const props = { isTermedSubscriptionTermType: true };
+		const props = {
+			isEvergreenSubscriptionTermType: false,
+			isTermedSubscriptionTermType: true,
+		};
 
 		expect(Confirmation).toRenderCorrectly(props);
 	});

package/components/payment-term.jsx

@@ -13,6 +13,7 @@ export function PaymentTerm({
 	largePrice = false,
 	optionsInARow = false,
 	billingCountry = '',
+	isEvergreenSubscriptionTermType = true,
 	isTermedSubscriptionTermType = false,
 }) {
 	/**
@@ -162,7 +163,6 @@ export function PaymentTerm({
 					</span>
 				),
 			renewsText: (renewalPeriod) =>
-				!isTermedSubscriptionTermType &&
 				Boolean(renewalPeriod) && (
 					<p className="ncf__payment-term__renews-text">
 						Renews every {renewalPeriod} unless cancelled
@@ -228,7 +228,8 @@ export function PaymentTerm({
 						<div className="ncf__payment-term__description">
 							{nameMap[option.name].price(option.price)}
 							{nameMap[option.name].monthlyPrice(option.monthlyPrice)}
-							{nameMap[option.name].renewsText()}
+							{isEvergreenSubscriptionTermType &&
+								nameMap[option.name].renewsText()}
 							{/* Remove this discount text temporarily in favour of monthly price */}
 							{/* <br />Save up to 25% when you pay annually */}
 						</div>
@@ -246,7 +247,8 @@ export function PaymentTerm({
 											option.value
 										)
 							)}
-							{nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
+							{isEvergreenSubscriptionTermType &&
+								nameMap['custom'].renewsText(getTimeFromPeriod(option.value))}
 						</div>
 					) : (
 						<div>
@@ -342,20 +344,7 @@ export function PaymentTerm({
 
 			{showLegal && (
 				<div className="ncf__payment-term__legal">
-					{isTermedSubscriptionTermType ? (
-						<p className="o3-type-body-base">
-							Find out more about our cancellation policy in our{' '}
-							<a
-								href="https://help.ft.com/legal-privacy/terms-and-conditions/"
-								title="FT Legal Terms and Conditions help page"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Terms &amp; Conditions
-							</a>
-							.
-						</p>
-					) : (
+					{isEvergreenSubscriptionTermType && (
 						<React.Fragment>
 							<p>
 								With all subscription types, we will automatically renew your
@@ -378,6 +367,21 @@ export function PaymentTerm({
 							</p>
 						</React.Fragment>
 					)}
+
+					{isTermedSubscriptionTermType && (
+						<p className="o3-type-body-base">
+							Find out more about our cancellation policy in our{' '}
+							<a
+								href="https://help.ft.com/legal-privacy/terms-and-conditions/"
+								title="FT Legal Terms and Conditions help page"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Terms &amp; Conditions
+							</a>
+							.
+						</p>
+					)}
 				</div>
 			)}
 		</div>
@@ -411,6 +415,7 @@ PaymentTerm.propTypes = {
 			fulfilmentOption: PropTypes.string,
 		})
 	),
+	isEvergreenSubscriptionTermType: PropTypes.bool,
 	isTermedSubscriptionTermType: PropTypes.bool,
 	showLegal: PropTypes.bool,
 	largePrice: PropTypes.bool,

package/components/payment-term.spec.js

@@ -117,7 +117,75 @@ describe('PaymentTerm', () => {
 		});
 	});
 
-	describe('given isTermedSubscriptionTermType is true', () => {
+	describe('isEvergreenSubscriptionTermType is true; isTermedSubscriptionTermType is false', () => {
+		describe('pre-defined option name (i.e. frequency)', () => {
+			const ANNUAL_FREQUENCY = 'annual';
+			const QUARTERLY_FREQUENCY = 'quarterly';
+			const MONTHLY_FREQUENCY = 'monthly';
+
+			[ANNUAL_FREQUENCY, QUARTERLY_FREQUENCY, MONTHLY_FREQUENCY].forEach(
+				(frequency) => {
+					const FREQUENCY_TO_RENEWAL_TEXT_MAP = {
+						[ANNUAL_FREQUENCY]: 'Renews annually unless cancelled',
+						[QUARTERLY_FREQUENCY]: 'Renews quarterly unless cancelled',
+						[MONTHLY_FREQUENCY]: 'Renews monthly unless cancelled',
+					};
+
+					describe(`${frequency} option`, () => {
+						const options = [
+							{
+								name: frequency,
+								value: frequency,
+								price: '£20.00',
+							},
+						];
+
+						it(`renders '${FREQUENCY_TO_RENEWAL_TEXT_MAP[frequency]}' when true`, () => {
+							const wrapper = shallow(
+								<PaymentTerm
+									options={options}
+									isEvergreenSubscriptionTermType={true}
+									isTermedSubscriptionTermType={false}
+								/>
+							);
+							expect(
+								wrapper.find('.ncf__payment-term__renews-text').exists()
+							).toBe(true);
+							expect(
+								wrapper.find('.ncf__payment-term__renews-text').text()
+							).toBe(FREQUENCY_TO_RENEWAL_TEXT_MAP[frequency]);
+						});
+					});
+				}
+			);
+		});
+
+		describe('custom option with period provided', () => {
+			const options = [
+				{
+					price: '£50.00',
+					amount: '50.00',
+					currency: 'GBP',
+					value: 'P6M',
+				},
+			];
+
+			it('renders renewal text for custom terms that specify a period', () => {
+				const wrapper = shallow(
+					<PaymentTerm
+						options={options}
+						isEvergreenSubscriptionTermType={true}
+						isTermedSubscriptionTermType={false}
+					/>
+				);
+				expect(wrapper.find('.ncf__payment-term__renews-text').text()).toBe(
+					'Renews every 6 months unless cancelled'
+				);
+			});
+		});
+	});
+
+	describe('isEvergreenSubscriptionTermType is false; isTermedSubscriptionTermType is true', () => {
 		describe('options include duration expressed in weeks', () => {
 			const options = [
 				{
@@ -127,7 +195,11 @@ describe('PaymentTerm', () => {
 				},
 			];
 			const wrapper = shallow(
-				<PaymentTerm options={options} isTermedSubscriptionTermType={true} />
+				<PaymentTerm
+					options={options}
+					isEvergreenSubscriptionTermType={false}
+					isTermedSubscriptionTermType={true}
+				/>
 			);
 
 			it('renders subscription term as title', () => {
@@ -154,7 +226,11 @@ describe('PaymentTerm', () => {
 				},
 			];
 			const wrapper = shallow(
-				<PaymentTerm options={options} isTermedSubscriptionTermType={true} />
+				<PaymentTerm
+					options={options}
+					isEvergreenSubscriptionTermType={false}
+					isTermedSubscriptionTermType={true}
+				/>
 			);
 
 			it('renders subscription term as title', () => {
@@ -171,6 +247,29 @@ describe('PaymentTerm', () => {
 				);
 			});
 		});
+
+		describe('renewal text', () => {
+			const options = [
+				{
+					price: '£19.00',
+					amount: '19.00',
+					value: 'P8W',
+				},
+			];
+
+			it('does not render renewal text for custom terms', () => {
+				const wrapper = shallow(
+					<PaymentTerm
+						options={options}
+						isEvergreenSubscriptionTermType={false}
+						isTermedSubscriptionTermType={true}
+					/>
+				);
+				expect(wrapper.find('.ncf__payment-term__renews-text').exists()).toBe(
+					false
+				);
+			});
+		});
 	});
 
 	describe('getDisplayName', () => {

package/dist/confirmation.jsx

@@ -18,8 +18,8 @@ function Confirmation(_ref) {
     isB2cPartnership = _ref$isB2cPartnership === void 0 ? false : _ref$isB2cPartnership,
     _ref$b2cPartnershipCo = _ref.b2cPartnershipCopy,
     b2cPartnershipCopy = _ref$b2cPartnershipCo === void 0 ? [] : _ref$b2cPartnershipCo,
-    _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
-    isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip,
+    _ref$isEvergreenSubsc = _ref.isEvergreenSubscriptionTermType,
+    isEvergreenSubscriptionTermType = _ref$isEvergreenSubsc === void 0 ? true : _ref$isEvergreenSubsc,
     _ref$offer = _ref.offer,
     offer = _ref$offer === void 0 ? '' : _ref$offer,
     _ref$email = _ref.email,
@@ -95,7 +95,7 @@ function Confirmation(_ref) {
     href: "tel:+442077556248"
   }, "+44 (0) 207 755 6248"), ". Or contact us for additional support.")), /*#__PURE__*/_react["default"].createElement("p", {
     className: "ncf__paragraph o3-type-body-base"
-  }, !isTermedSubscriptionTermType ? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. ' : '', 'See our ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, isEvergreenSubscriptionTermType ? 'We will automatically renew your subscription using the payment method provided unless you cancel before your renewal date. ' : '', 'See our ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "http://help.ft.com/help/legal-privacy/terms-conditions/",
     target: "_top",
     rel: "noopener"
@@ -105,7 +105,7 @@ Confirmation.propTypes = {
   isTrial: _propTypes["default"].bool,
   isB2cPartnership: _propTypes["default"].bool,
   b2cPartnershipCopy: _propTypes["default"].array,
-  isTermedSubscriptionTermType: _propTypes["default"].bool,
+  isEvergreenSubscriptionTermType: _propTypes["default"].bool,
   offer: _propTypes["default"].string.isRequired,
   email: _propTypes["default"].string,
   details: _propTypes["default"].arrayOf(_propTypes["default"].shape({

package/dist/payment-term.jsx

@@ -31,6 +31,8 @@ function PaymentTerm(_ref) {
     optionsInARow = _ref$optionsInARow === void 0 ? false : _ref$optionsInARow,
     _ref$billingCountry = _ref.billingCountry,
     billingCountry = _ref$billingCountry === void 0 ? '' : _ref$billingCountry,
+    _ref$isEvergreenSubsc = _ref.isEvergreenSubscriptionTermType,
+    isEvergreenSubscriptionTermType = _ref$isEvergreenSubsc === void 0 ? true : _ref$isEvergreenSubsc,
     _ref$isTermedSubscrip = _ref.isTermedSubscriptionTermType,
     isTermedSubscriptionTermType = _ref$isTermedSubscrip === void 0 ? false : _ref$isTermedSubscrip;
   /**
@@ -160,7 +162,7 @@ function PaymentTerm(_ref) {
         }, _monthlyPrice), ' ', "per month");
       },
       renewsText: function renewsText(renewalPeriod) {
-        return !isTermedSubscriptionTermType && Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
+        return Boolean(renewalPeriod) && /*#__PURE__*/_react["default"].createElement("p", {
           className: "ncf__payment-term__renews-text"
         }, "Renews every ", renewalPeriod, " unless cancelled");
       }
@@ -197,12 +199,12 @@ 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()) :
+      }, nameMap[option.name].price(option.price), nameMap[option.name].monthlyPrice(option.monthlyPrice), isEvergreenSubscriptionTermType && nameMap[option.name].renewsText()) :
       // 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) : getMonthlyPriceFromPeriod(option.amount, option.currency, option.value)), nameMap['custom'].renewsText(getTimeFromPeriod(option.value))) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, nameMap['custom'].price(option.price), nameMap['custom'].monthlyPrice(option.monthlyPrice && option.monthlyPrice !== '0' ? Number(option.monthlyPrice) : getMonthlyPriceFromPeriod(option.amount, option.currency, option.value)), isEvergreenSubscriptionTermType && 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"
@@ -256,21 +258,21 @@ function PaymentTerm(_ref) {
     return createPaymentTerm(option);
   })), showLegal && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ncf__payment-term__legal"
-  }, isTermedSubscriptionTermType ? /*#__PURE__*/_react["default"].createElement("p", {
+  }, isEvergreenSubscriptionTermType && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "With all subscription types, we will automatically renew your subscription using the payment method provided unless you cancel before your renewal date."), /*#__PURE__*/_react["default"].createElement("p", {
     className: "o3-type-body-base"
-  }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, "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", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "Terms & Conditions"), ".") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "With all subscription types, we will automatically renew your subscription using the payment method provided unless you cancel before your renewal date."), /*#__PURE__*/_react["default"].createElement("p", {
+  }, "Terms & Conditions"), ".")), isTermedSubscriptionTermType && /*#__PURE__*/_react["default"].createElement("p", {
     className: "o3-type-body-base"
-  }, "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", ' ', /*#__PURE__*/_react["default"].createElement("a", {
+  }, "Find out more about our cancellation policy in our", ' ', /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://help.ft.com/legal-privacy/terms-and-conditions/",
     title: "FT Legal Terms and Conditions help page",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "Terms & Conditions"), "."))));
+  }, "Terms & Conditions"), ".")));
 }
 PaymentTerm.propTypes = {
   fieldId: _propTypes["default"].string,
@@ -297,6 +299,7 @@ PaymentTerm.propTypes = {
     chargeOnText: _propTypes["default"].string,
     fulfilmentOption: _propTypes["default"].string
   })),
+  isEvergreenSubscriptionTermType: _propTypes["default"].bool,
   isTermedSubscriptionTermType: _propTypes["default"].bool,
   showLegal: _propTypes["default"].bool,
   largePrice: _propTypes["default"].bool,

package/package.json

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

package/styles/payment-type.scss

@@ -59,6 +59,15 @@
       label {
         float: none;
         width: 100%;
+        height: 100%;
+      }
+
+      span {
+        max-height: none;
+        
+        @include oGridRespondTo($from: L) {
+          line-height: var(--o3-spacing-2xs);
+        }
       }
     }
 
@@ -66,7 +75,7 @@
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
-      align-items: baseline;
+      align-items: stretch;
       margin-bottom: var(--o3-spacing-3xs);
 
       @include oGridRespondTo($from: L) {