Passwordless Core Profiler Auth - Update disclaimer copy

client/jetpack-connect/authorize.js

@@ -1058,23 +1058,34 @@ export class JetpackAuthorize extends Component {
 								{ translate( 'Sign in as a different user' ) }
 							</LoggedOutFormLinkItem>
 						</Card>
-						<div className="jetpack-connect__logged-in-bottom">
-							{ this.renderStateAction() }
-							{ ! config.isEnabled( 'woocommerce/core-profiler-passwordless-auth' ) && (
+						{ ! config.isEnabled( 'woocommerce/core-profiler-passwordless-auth' ) && (
+							<div className="jetpack-connect__logged-in-bottom">
+								{ this.renderStateAction() }
 								<JetpackFeatures col1Features={ col1Features } col2Features={ col2Features } />
-							) }
-							<Disclaimer
-								siteName={ decodeEntities( authQuery.blogname ) }
-								companyName={ this.getCompanyName() }
-								from={ authQuery.from }
-							/>
-							{ ! config.isEnabled( 'woocommerce/core-profiler-passwordless-auth' ) && (
+								<Disclaimer
+									siteName={ decodeEntities( authQuery.blogname ) }
+									companyName={ this.getCompanyName() }
+									from={ authQuery.from }
+									isWooCoreProfiler={ this.isWooCoreProfiler() }
+								/>
 								<div className="jetpack-connect__jetpack-logo-wrapper">
 									<JetpackLogo monochrome size={ 18 } />{ ' ' }
 									<span>{ translate( 'Jetpack powered' ) }</span>
 								</div>
-							) }
-						</div>
+							</div>
+						) }
+
+						{ config.isEnabled( 'woocommerce/core-profiler-passwordless-auth' ) && (
+							<div className="jetpack-connect__logged-in-bottom">
+								<Disclaimer
+									siteName={ decodeEntities( authQuery.blogname ) }
+									companyName={ this.getCompanyName() }
+									from={ authQuery.from }
+									isWooCoreProfiler={ this.isWooCoreProfiler() }
+								/>
+								{ this.renderStateAction() }
+							</div>
+						) }
 					</div>
 					{ authQuery.installedExtSuccess && <WooInstallExtSuccessNotice /> }
 				</Fragment>

client/jetpack-connect/disclaimer.jsx

@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
@@ -10,14 +11,22 @@ class JetpackConnectDisclaimer extends PureComponent {
 		companyName: PropTypes.string,
 		siteName: PropTypes.string.isRequired,
 		from: PropTypes.string,
+		isWooCoreProfiler: PropTypes.bool,
 	};
 
 	handleClickDisclaimer = () => {
 		this.props.recordTracksEvent( 'calypso_jpc_disclaimer_link_click', { ...this.props } );
 	};
 
 	render() {
-		const { companyName = 'WordPress.com', siteName, from, translate } = this.props;
+		const {
+			companyName = 'WordPress.com',
+			isWooCoreProfiler = false,
+			siteName,
+			from,
+			translate,
+		} = this.props;
+		let text;
 
 		const detailsLink = (
 			<a
@@ -29,31 +38,70 @@ class JetpackConnectDisclaimer extends PureComponent {
 			/>
 		);
 
-		const text =
-			from === 'my-jetpack'
-				? translate(
-						'By clicking {{strong}}Approve{{/strong}}, you agree to {{detailsLink}}sync your site‘s data{{/detailsLink}} with us.',
-						{
-							components: {
-								strong: <strong />,
-								detailsLink,
-							},
-						}
-				  )
-				: translate(
-						'By connecting your site, you agree to {{detailsLink}}share details{{/detailsLink}} between %(companyName)s and %(siteName)s.',
-						{
-							components: {
-								detailsLink,
-							},
-							args: {
-								companyName,
-								siteName,
-							},
-							comment:
-								'`companyName` is the site domain receiving the data (typically WordPress.com), and `siteName` is the site domain sharing the data.',
-						}
-				  );
+		if ( isWooCoreProfiler && config.isEnabled( 'woocommerce/core-profiler-passwordless-auth' ) ) {
+			const termsOfServiceLink = (
+				<a
+					href={ localizeUrl( 'https://wordpress.com/tos/' ) }
+					target="_blank"
+					rel="noopener noreferrer"
+					className="jetpack-connect__sso-actions-modal-link"
+					onClick={ () => {
+						this.props.recordTracksEvent( 'calypso_jpc_disclaimer_tos_link_click', {
+							...this.props,
+						} );
+					} }
+				/>
+			);
+			const syncDataLink = (
+				<a
+					href={ localizeUrl( 'https://jetpack.com/support/what-data-does-jetpack-sync/' ) }
+					target="_blank"
+					rel="noopener noreferrer"
+					className="jetpack-connect__sso-actions-modal-link"
+					onClick={ () => {
+						this.props.recordTracksEvent( 'calypso_jpc_disclaimer_sync_data_link_click', {
+							...this.props,
+						} );
+					} }
+				/>
+			);
+
+			text = translate(
+				'By clicking Connect your account, you agree to our {{termsOfServiceLink}}Terms of Service{{/termsOfServiceLink}} and to {{syncDataLink}}sync your site’s data{{/syncDataLink}} with us.',
+				{
+					components: {
+						termsOfServiceLink,
+						syncDataLink,
+					},
+				}
+			);
+		} else {
+			text =
+				from === 'my-jetpack'
+					? translate(
+							'By clicking {{strong}}Approve{{/strong}}, you agree to {{detailsLink}}sync your site‘s data{{/detailsLink}} with us.',
+							{
+								components: {
+									strong: <strong />,
+									detailsLink,
+								},
+							}
+					  )
+					: translate(
+							'By connecting your site, you agree to {{detailsLink}}share details{{/detailsLink}} between %(companyName)s and %(siteName)s.',
+							{
+								components: {
+									detailsLink,
+								},
+								args: {
+									companyName,
+									siteName,
+								},
+								comment:
+									'`companyName` is the site domain receiving the data (typically WordPress.com), and `siteName` is the site domain sharing the data.',
+							}
+					  );
+		}
 
 		return <p className="jetpack-connect__tos-link">{ text }</p>;
 	}

client/jetpack-connect/style.scss

@@ -1220,7 +1220,11 @@ $colophon-height: 50px; // wpcomColophon element at the bottom
 		}
 
 		.jetpack-connect__tos-link {
-			margin: 24px auto 70px;
+			margin: 24px auto;
+			text-align: left;
+			a {
+				line-height: inherit;
+			}
 		}
 	}