@financial-times/n-conversion-forms 20.3.0 → 20.3.4

package/components/__snapshots__/accept-terms.spec.js.snap

@@ -1,5 +1,93 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AcceptTerms renders appropriately if a isAuthFirstAccount 1`] = `
+<div id="acceptTermsField"
+     class="o-forms-field o-layout-typography ncf__validation-error"
+     data-validate="required,checked"
+>
+  <ul class="o-typography-list ncf__accept-terms-list">
+    <li>
+      <span class="terms-auth-first-step">
+        For more information about how we use your data, please refer to our
+        <a class="ncf__link--external"
+           href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+           target="_blank"
+           rel="noopener noreferrer"
+           data-trackable="terms-and-conditions"
+        >
+          privacy
+        </a>
+        and 
+        <a class="ncf__link--external"
+           href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+           target="_blank"
+           rel="noopener noreferrer"
+           data-trackable="terms-and-conditions"
+        >
+          cookie
+        </a>
+        policies.
+      </span>
+    </li>
+  </ul>
+  <label class="o-forms-input o-forms-input--checkbox"
+         for="termsAcceptance"
+  >
+    <input type="checkbox"
+           id="termsAcceptance"
+           name="termsAcceptance"
+           value="true"
+           data-trackable="field-terms"
+           aria-required="true"
+           required
+    >
+    <span class="o-forms-input__label terms-auth-first-step">
+      I confirm that I am 16 years or older and agree to the full
+      <a class="ncf__link--external"
+         href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+         target="_blank"
+         rel="noopener noreferrer"
+         data-trackable="terms-and-conditions"
+      >
+        Terms &amp; Conditions
+      </a>
+      .
+    </span>
+    <p class="o-forms-input__error">
+      Please accept our terms &amp; conditions
+    </p>
+  </label>
+</div>
+`;
+
+exports[`AcceptTerms renders appropriately if a isAuthFirstPayment 1`] = `
+<div id="acceptTermsField"
+     class="o-forms-field o-layout-typography ncf__validation-error"
+     data-validate="required,checked"
+>
+  <ul class="o-typography-list ncf__accept-terms-list">
+  </ul>
+  <label class="o-forms-input o-forms-input--checkbox"
+         for="termsAcceptance"
+  >
+    <input type="checkbox"
+           id="termsAcceptance"
+           name="termsAcceptance"
+           value="true"
+           data-trackable="field-terms"
+           aria-required="true"
+           required
+    >
+    <span class="o-forms-input__label">
+      I agree to the above terms &amp; conditions.
+    </span>
+    <p class="o-forms-input__error">
+      Please accept our terms &amp; conditions
+    </p>
+  </label>
+</div>
+`;
+
 exports[`AcceptTerms renders appropriately if a registration 1`] = `
 <div id="acceptTermsField"
      class="o-forms-field o-layout-typography ncf__validation-error"
@@ -72,7 +160,7 @@ exports[`AcceptTerms renders appropriately if a signup 1`] = `
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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.
       </span>
     </li>
     <li>
@@ -146,7 +234,7 @@ exports[`AcceptTerms renders appropriately if a signup and has special terms 1`]
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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.
       </span>
     </li>
     <li>
@@ -408,7 +496,7 @@ exports[`AcceptTerms renders appropriately if a signup not for the print product
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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.
       </span>
     </li>
     <li>
@@ -482,7 +570,7 @@ exports[`AcceptTerms renders appropriately if a signup not for the print product
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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.
       </span>
     </li>
     <li>
@@ -556,7 +644,7 @@ exports[`AcceptTerms renders appropriately if a signup not for the print product
     </li>
     <li>
       <span class="terms-signup">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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.
       </span>
     </li>
     <li>
@@ -1155,7 +1243,7 @@ exports[`AcceptTerms renders appropriately if is transition with transition type
     </li>
     <li>
       <span class="terms-transition terms-transition--immediate">
-        By placing my order, my subscription will start immediately. Cancellation notice would take effect at the end of the subscription period and previously paid amounts are non-refundable.
+        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.
       </span>
     </li>
     <li>

package/components/__snapshots__/app-banner.spec.js.snap

@@ -25,6 +25,7 @@ exports[`AppBanner renders 1`] = `
         <a href="https://itunes.apple.com/app/apple-store/id1200842933?pt=246269&amp;ct=onsite-app-promotion&amp;mt=8"
            target="_blank"
            role="link"
+           rel="noreferrer"
         >
           <img src="https://www.ft.com/__assets/creatives/tour/apps/ios-download.svg"
                alt="Download from the iOS App store"
@@ -36,6 +37,7 @@ exports[`AppBanner renders 1`] = `
         <a href="https://play.google.com/store/apps/details?id=com.ft.news&amp;referrer=utm_source%3Donsite-app-promotion%26utm_campaign%3DOnsite%2520Messaging"
            target="_blank"
            role="link"
+           rel="noreferrer"
         >
           <img src="https://www.ft.com/__origami/service/image/v2/images/raw/https%253A%252F%252Fwww.ft.com%252F__assets%252Fcreatives%252Ftour%252Fapps%252Fgoogle-play-badge-3x.png?source=ip-envoy"
                height="35"

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

@@ -29,7 +29,7 @@ exports[`Confirmation renders appropriately if is B2C Partnership 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -86,7 +86,7 @@ exports[`Confirmation renders appropriately if is trial 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -141,7 +141,7 @@ exports[`Confirmation renders appropriately if nextActionBottom is not supplied
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -196,7 +196,7 @@ exports[`Confirmation renders appropriately if nextActionBottom is supplied 1`]
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -252,7 +252,7 @@ exports[`Confirmation renders appropriately if nextActionTop is not supplied 1`]
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -308,7 +308,7 @@ exports[`Confirmation renders appropriately if nextActionTop is supplied 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -377,7 +377,7 @@ exports[`Confirmation renders with complete details 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -432,7 +432,7 @@ exports[`Confirmation renders with custom email 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -487,7 +487,7 @@ exports[`Confirmation renders with default props 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -553,7 +553,7 @@ exports[`Confirmation renders with details missing a description 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -621,7 +621,7 @@ exports[`Confirmation renders with direct debit mandate URL 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings

package/components/__snapshots__/delivery-address.spec.js.snap

@@ -57,6 +57,8 @@ exports[`DeliveryAddress renders default props 1`] = `
       <span class="o-forms-title__main">
         Address line 3
       </span>
+      <span class="o-forms-title__prompt">
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text">
       <input type="text"
@@ -130,6 +132,8 @@ exports[`DeliveryAddress renders with an error 1`] = `
       <span class="o-forms-title__main">
         Address line 3
       </span>
+      <span class="o-forms-title__prompt">
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
       <input type="text"
@@ -183,6 +187,9 @@ exports[`DeliveryAddress renders with country different than default 1`] = `
       <span class="o-forms-title__main">
         Apt/Floor/Suite
       </span>
+      <span class="o-forms-title__prompt">
+        Max. 6 characters. Please enter “Apartment 2C” as “Apt 2C”, “Floor 10 as FL 10”
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text">
       <input type="text"
@@ -190,7 +197,7 @@ exports[`DeliveryAddress renders with country different than default 1`] = `
              name="deliveryAddressLine3"
              data-trackable="field-deliveryAddressLine3"
              autocomplete="address-line3"
-             placeholder="e.g. Apt. 1"
+             placeholder="e.g Apt 2C / FL 10 / STE 5"
              maxlength="50"
              value
       >
@@ -276,6 +283,8 @@ exports[`DeliveryAddress renders with custom line 1 value 1`] = `
       <span class="o-forms-title__main">
         Address line 3
       </span>
+      <span class="o-forms-title__prompt">
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text">
       <input type="text"
@@ -349,6 +358,8 @@ exports[`DeliveryAddress renders with custom line 2 value 1`] = `
       <span class="o-forms-title__main">
         Address line 3
       </span>
+      <span class="o-forms-title__prompt">
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text">
       <input type="text"
@@ -422,6 +433,8 @@ exports[`DeliveryAddress renders with custom line 3 value 1`] = `
       <span class="o-forms-title__main">
         Address line 3
       </span>
+      <span class="o-forms-title__prompt">
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text">
       <input type="text"
@@ -497,6 +510,8 @@ exports[`DeliveryAddress renders with disabled input elements 1`] = `
       <span class="o-forms-title__main">
         Address line 3
       </span>
+      <span class="o-forms-title__prompt">
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text">
       <input type="text"
@@ -571,6 +586,8 @@ exports[`DeliveryAddress renders with hidden input elements 1`] = `
       <span class="o-forms-title__main">
         Address line 3
       </span>
+      <span class="o-forms-title__prompt">
+      </span>
     </span>
     <span class="o-forms-input o-forms-input--text">
       <input type="text"

package/components/__snapshots__/delivery-postcode.spec.js.snap

@@ -12,6 +12,8 @@ exports[`Delivery Postcode renders a disable input 1`] = `
         Postcode
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
     <input type="text"
@@ -49,6 +51,8 @@ exports[`Delivery Postcode renders a postcode input with a label set as Postcode
         Postcode
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
     <input type="text"
@@ -85,12 +89,15 @@ exports[`Delivery Postcode renders a postcode input with a label set as Zip Code
         Zip Code
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+      Please enter your 5 digit Zip Code
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
     <input type="text"
            id="deliveryPostcode"
            name="deliveryPostcode"
-           placeholder="Enter your Zip Code"
+           placeholder="e.g. 60411"
            autocomplete="postal-code"
            data-trackable="delivery-postcode"
            aria-required="true"
@@ -121,12 +128,15 @@ exports[`Delivery Postcode renders a postcode input with a label set as Zip Code
         Zip Code
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+      Please enter your 5 digit Zip Code
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
     <input type="text"
            id="deliveryPostcode"
            name="deliveryPostcode"
-           placeholder="Enter your Zip Code"
+           placeholder="e.g. 60411"
            autocomplete="postal-code"
            data-trackable="delivery-postcode"
            aria-required="true"
@@ -157,12 +167,15 @@ exports[`Delivery Postcode renders a postcode input with a label set as postal c
         Postal Code
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+      Please enter your 6 digit postal code
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
     <input type="text"
            id="deliveryPostcode"
            name="deliveryPostcode"
-           placeholder="Enter your Postal Code"
+           placeholder="e.g. M4W 2C6"
            autocomplete="postal-code"
            data-trackable="delivery-postcode"
            aria-required="true"
@@ -193,6 +206,8 @@ exports[`Delivery Postcode renders a postcode input with default label 1`] = `
         Postcode
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
     <input type="text"
@@ -229,6 +244,8 @@ exports[`Delivery Postcode renders different styles 1`] = `
         Postcode
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text o-forms-input--invalid">
     <input type="text"
@@ -265,12 +282,15 @@ exports[`Delivery Postcode renders with link to change the value 1`] = `
         Zip Code
       </span>
     </span>
+    <span class="o-forms-title__prompt">
+      Please enter your 5 digit Zip Code
+    </span>
   </span>
   <span class="o-forms-input o-forms-input--text">
     <input type="text"
            id="deliveryPostcode"
            name="deliveryPostcode"
-           placeholder="Enter your Zip Code"
+           placeholder="e.g. 60411"
            autocomplete="postal-code"
            data-trackable="delivery-postcode"
            aria-required="true"

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

@@ -23,7 +23,7 @@ exports[`RegistrationConfirmation renders with a custom email 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings
@@ -70,7 +70,7 @@ exports[`RegistrationConfirmation renders with default props 1`] = `
       <a class="ncf__link ncf__link--external"
          href="https://www.ft.com/myaccount/personal-details"
          target="_blank"
-         rel="noopener"
+         rel="noopener noreferrer"
          data-trackable="yourAccount"
       >
         account settings

package/components/accept-terms.jsx

@@ -4,7 +4,9 @@ import classNames from 'classnames';
 
 const DEFAULT_AGE_RESTRICTION = '16';
 
-export function AcceptTerms({
+export function AcceptTerms ({
+	isAuthFirstAccount = false,
+	isAuthFirstPayment = false,
 	hasError = false,
 	isSignup = false,
 	isRegister = false,
@@ -46,6 +48,54 @@ export function AcceptTerms({
 		...(isChecked && { defaultChecked: true }),
 	};
 
+	const authFirstStepTerms = (
+		<>
+			<ul className="o-typography-list ncf__accept-terms-list">
+				<li>
+					<span className="terms-auth-first-step">
+						For more information about how we use your data, please refer to our <a
+							className="ncf__link--external"
+							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+							target='_blank'
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							privacy
+						</a> and&nbsp;
+						<a
+							className="ncf__link--external"
+							href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+							target='_blank'
+							rel="noopener noreferrer"
+							data-trackable="terms-and-conditions"
+						>
+							cookie
+						</a> policies.
+					</span>
+				</li>
+			</ul>
+			<label className={labelClassName} htmlFor="termsAcceptance">
+				<input {...inputProps} />
+				<span className="o-forms-input__label terms-auth-first-step">
+					I confirm that I am {ageRestriction} years or older and agree to the full {' '}
+					<a
+						className="ncf__link--external"
+						href="http://help.ft.com/help/legal-privacy/terms-conditions/"
+						target={isEmbedded ? '_top' : '_blank'}
+						rel="noopener noreferrer"
+						data-trackable="terms-and-conditions"
+					>
+						Terms &amp; Conditions
+					</a>
+					.
+				</span>
+				<p className="o-forms-input__error">
+					Please accept our terms &amp; conditions
+				</p>
+			</label>
+		</>
+	);
+
 	const registerTerms = (
 		<label className={labelClassName} htmlFor="termsAcceptance">
 			<input {...inputProps} />
@@ -154,9 +204,12 @@ export function AcceptTerms({
 			{transitionType === 'immediate' ? (
 				<li>
 					<span className="terms-transition terms-transition--immediate">
-						By placing my order, my subscription will start immediately.
-						Cancellation notice would take effect at the end of the subscription
-						period and previously paid amounts are non-refundable.
+						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.
 					</span>
 				</li>
 			) : (
@@ -192,6 +245,7 @@ export function AcceptTerms({
 	const printSignupTermText = isTrial
 		? 'Credits for delivery suspension or delivery failure are not available during introductory offer periods.'
 		: 'Credit for delivery suspensions is only available for hand-delivered subscriptions and is limited to a maximum of 24 issues per yearly subscription terms (4 issues per yearly FT Weekend subscription term).';
+
 	const signupTerms = isSignup && (
 		<>
 			{isPrintProduct ? (
@@ -234,10 +288,12 @@ export function AcceptTerms({
 					</li>
 					<li>
 						<span className="terms-signup">
-							By placing my order, my subscription will start immediately.
-							Cancellation notice would take effect at the end of the
-							subscription period and previously paid amounts are
-							non-refundable.
+							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.
 						</span>
 					</li>
 					<li>
@@ -294,10 +350,12 @@ export function AcceptTerms({
 				b2cPartnershipTerms
 			) : isRegister ? (
 				registerTerms
+			) : isAuthFirstAccount ? (
+				authFirstStepTerms
 			) : (
 				<>
 					<ul className="o-typography-list ncf__accept-terms-list">
-						{b2bTerms}
+						{!isAuthFirstPayment && b2bTerms}
 						{corpSignupTerms}
 						{transitionTerms}
 						{signupTerms}

package/components/accept-terms.spec.js

@@ -16,6 +16,18 @@ describe('AcceptTerms', () => {
 		expect(AcceptTerms).toRenderCorrectly(props);
 	});
 
+	it('renders appropriately if a isAuthFirstAccount', () => {
+		const props = { isAuthFirstAccount: true };
+
+		expect(AcceptTerms).toRenderCorrectly(props);
+	});
+
+	it('renders appropriately if a isAuthFirstPayment', () => {
+		const props = { isAuthFirstPayment: true };
+
+		expect(AcceptTerms).toRenderCorrectly(props);
+	});
+
 	it('renders appropriately if a signup', () => {
 		const props = { isSignup: true };
 

package/components/app-banner.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function AppBanner() {
+export function AppBanner () {
 	return (
 		<div id="appBanner" className="ncf ncf__app-banner">
 			<div className="ncf__app-banner-inner">
@@ -21,6 +21,7 @@ export function AppBanner() {
 							href="https://itunes.apple.com/app/apple-store/id1200842933?pt=246269&ct=onsite-app-promotion&mt=8"
 							target="_blank"
 							role="link"
+							rel="noreferrer"
 						>
 							<img
 								src="https://www.ft.com/__assets/creatives/tour/apps/ios-download.svg"
@@ -34,6 +35,7 @@ export function AppBanner() {
 							href="https://play.google.com/store/apps/details?id=com.ft.news&referrer=utm_source%3Donsite-app-promotion%26utm_campaign%3DOnsite%2520Messaging"
 							target="_blank"
 							role="link"
+							rel="noreferrer"
 						>
 							<img
 								src="https://www.ft.com/__origami/service/image/v2/images/raw/https%253A%252F%252Fwww.ft.com%252F__assets%252Fcreatives%252Ftour%252Fapps%252Fgoogle-play-badge-3x.png?source=ip-envoy"

package/components/b2c-partnership-confirmation.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function B2CPartnershipConfirmation ({
-	ctaElement = null,
-}) {
-
+export function B2CPartnershipConfirmation ({ ctaElement = null }) {
 	const readingLinkProps = {
 		href: '/',
 		className: 'ncf__link',
@@ -37,10 +34,13 @@ export function B2CPartnershipConfirmation ({
 				content.
 			</p>
 
-			{ctaElement ||
+			{ctaElement || (
 				<p className="ncf__paragraph ncf__center">
-					<a className="ncf__button ncf__button--submit" href="/myft">Go to myFT</a>
-				</p>}
+					<a className="ncf__button ncf__button--submit" href="/myft">
+						Go to myFT
+					</a>
+				</p>
+			)}
 
 			<p className="ncf__paragraph ncf__center">
 				<a {...readingLinkProps}>Start reading</a>
@@ -55,7 +55,6 @@ export function B2CPartnershipConfirmation ({
 	);
 }
 
-
 B2CPartnershipConfirmation.propTypes = {
 	ctaElement: PropTypes.node,
 };

package/components/b2c-partnership-confirmation.spec.js

@@ -5,7 +5,7 @@ expect.extend(expectToRenderCorrectly);
 
 describe('B2CPartnershipConfirmation', () => {
 	it('renders as default', () => {
-		const props = {ctaElement: 'hello'};
+		const props = { ctaElement: 'hello' };
 
 		expect(B2CPartnershipConfirmation).toRenderCorrectly(props);
 	});