Update connection ToS messaging (#37536)

Automattic · May 30, 2024 · e9150a3 · e9150a3
1 parent 6e726f4
commit e9150a3
Show file tree

Hide file tree

Showing 19 changed files with 101 additions and 28 deletions.
diff --git a/projects/js-packages/components/changelog/update-improve-tos-message b/projects/js-packages/components/changelog/update-improve-tos-message
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection: Update connection ToS messaging slightly
diff --git a/projects/js-packages/components/components/terms-of-service/index.tsx b/projects/js-packages/components/components/terms-of-service/index.tsx
@@ -13,31 +13,51 @@ const TermsOfService: React.FC< TermsOfServiceProps > = ( {
 } ) => (
 	<Text className={ classNames( className, 'terms-of-service' ) }>
 		{ multipleButtons ? (
-			<MultipleButtonsText />
+			<MultipleButtonsText multipleButtonsLabels={ multipleButtons } />
 		) : (
 			<SingleButtonText agreeButtonLabel={ agreeButtonLabel } />
 		) }
 	</Text>
 );
 
-const MultipleButtonsText = () =>
-	createInterpolateElement(
+const MultipleButtonsText = ( { multipleButtonsLabels } ) => {
+	if ( Array.isArray( multipleButtonsLabels ) && multipleButtonsLabels.length > 1 ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %1$s is button label 1 and %2$s is button label 2 */
+				__(
+					'By clicking <strong>%1$s</strong> or <strong>%2$s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
+					'jetpack'
+				),
+				multipleButtonsLabels[ 0 ],
+				multipleButtonsLabels[ 1 ]
+			),
+			{
+				strong: <strong />,
+				tosLink: <Link slug="wpcom-tos" />,
+				shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+			}
+		);
+	}
+
+	return createInterpolateElement(
 		__(
-			'By clicking the buttons above, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>share details</shareDetailsLink> with WordPress.com.',
+			'By clicking the buttons above, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
 			'jetpack'
 		),
 		{
 			tosLink: <Link slug="wpcom-tos" />,
 			shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
 		}
 	);
+};
 
 const SingleButtonText = ( { agreeButtonLabel } ) =>
 	createInterpolateElement(
 		sprintf(
 			/* translators: %s is a button label */
 			__(
-				'By clicking the <strong>%s</strong> button, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>share details</shareDetailsLink> with WordPress.com.',
+				'By clicking <strong>%s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
 				'jetpack'
 			),
 			agreeButtonLabel

diff --git a/projects/js-packages/components/components/terms-of-service/test/index.test.jsx b/projects/js-packages/components/components/terms-of-service/test/index.test.jsx
@@ -24,7 +24,7 @@ describe( 'TermsofService', () => {
 				( content, { textContent } ) =>
 					content !== '' && // filter out parent/wrapper elements
 					textContent.startsWith(
-						`By clicking the ${ buttonLabel } button, you agree to our Terms of Service`
+						`By clicking ${ buttonLabel }, you agree to our Terms of Service`
 					)
 			)
 		).toBeInTheDocument();
@@ -42,11 +42,11 @@ describe( 'TermsofService', () => {
 
 	it( 'links to the data sharing document (single button)', () => {
 		render( <TermsOfService agreeButtonLabel={ 'whatever' } /> );
-		expect( screen.getByText( 'share details', { selector: 'a' } ) ).toBeInTheDocument();
+		expect( screen.getByText( 'sync your site‘s data', { selector: 'a' } ) ).toBeInTheDocument();
 	} );
 
 	it( 'links to the data sharing document (multiple buttons)', () => {
 		render( <TermsOfService multipleButtons /> );
-		expect( screen.getByText( 'share details', { selector: 'a' } ) ).toBeInTheDocument();
+		expect( screen.getByText( 'sync your site‘s data', { selector: 'a' } ) ).toBeInTheDocument();
 	} );
 } );
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.5",
+	"version": "0.53.6-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

diff --git a/projects/js-packages/connection/changelog/update-improve-tos-message b/projects/js-packages/connection/changelog/update-improve-tos-message
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection: Update connection ToS messaging slightly
diff --git a/projects/js-packages/connection/components/connect-screen/basic/test/component.jsx b/projects/js-packages/connection/components/connect-screen/basic/test/component.jsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import ConnectScreen from '../visual';
 
-const CONNECTION_BUTTON_LABEL = 'Setup Jetpack';
+const CONNECTION_BUTTON_LABEL = 'Set up Jetpack';
 const requiredProps = {
 	buttonLabel: CONNECTION_BUTTON_LABEL,
 };
@@ -27,7 +27,7 @@ describe( 'ConnectScreen', () => {
 				( content, { textContent } ) =>
 					content !== '' && // filter out parent/wrapper elements
 					textContent.startsWith(
-						`By clicking the ${ CONNECTION_BUTTON_LABEL } button, you agree to our Terms of Service`
+						`By clicking ${ CONNECTION_BUTTON_LABEL }, you agree to our Terms of Service`
 					)
 			)
 		).toBeInTheDocument();
@@ -44,7 +44,7 @@ describe( 'ConnectScreen', () => {
 
 	it( 'applies correct href to share', () => {
 		render( <ConnectScreen { ...requiredProps } /> );
-		const share = screen.getByRole( 'link', { name: 'share details' } );
+		const share = screen.getByRole( 'link', { name: 'sync your site‘s data' } );
 		expect( share ).toHaveAttribute(
 			'href',
 			'https://jetpack.com/redirect/?source=jetpack-support-what-data-does-jetpack-sync'
@@ -64,7 +64,7 @@ describe( 'ConnectScreen', () => {
 		const user = userEvent.setup();
 		const handleButtonClick = jest.fn();
 		render( <ConnectScreen { ...requiredProps } handleButtonClick={ handleButtonClick } /> );
-		const button = screen.getByRole( 'button', { name: 'Setup Jetpack' } );
+		const button = screen.getByRole( 'button', { name: 'Set up Jetpack' } );
 		await user.click( button );
 		expect( handleButtonClick ).toHaveBeenCalled();
 	} );

diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/test/component.jsx b/projects/js-packages/connection/components/connect-screen/required-plan/test/component.jsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import ConnectScreenRequiredPlan from '../visual';
 
-const CONNECTION_BUTTON_LABEL = 'Setup Jetpack';
+const CONNECTION_BUTTON_LABEL = 'Set up Jetpack';
 
 const requiredProps = {
 	buttonLabel: CONNECTION_BUTTON_LABEL,
@@ -31,7 +31,7 @@ describe( 'ConnectScreenRequiredPlan', () => {
 				( content, { textContent } ) =>
 					content !== '' && // filter out parent/wrapper elements
 					textContent.startsWith(
-						`By clicking the ${ CONNECTION_BUTTON_LABEL } button, you agree to our Terms of Service`
+						`By clicking ${ CONNECTION_BUTTON_LABEL }, you agree to our Terms of Service`
 					)
 			)
 		).toBeInTheDocument();
@@ -48,7 +48,7 @@ describe( 'ConnectScreenRequiredPlan', () => {
 
 	it( 'applies correct href to share', () => {
 		render( <ConnectScreenRequiredPlan { ...requiredProps } /> );
-		const share = screen.getByRole( 'link', { name: 'share details' } );
+		const share = screen.getByRole( 'link', { name: 'sync your site‘s data' } );
 		expect( share ).toHaveAttribute(
 			'href',
 			'https://jetpack.com/redirect/?source=jetpack-support-what-data-does-jetpack-sync'
@@ -70,7 +70,7 @@ describe( 'ConnectScreenRequiredPlan', () => {
 		render(
 			<ConnectScreenRequiredPlan { ...requiredProps } handleButtonClick={ handleButtonClick } />
 		);
-		const button = screen.getByRole( 'button', { name: 'Setup Jetpack' } );
+		const button = screen.getByRole( 'button', { name: 'Set up Jetpack' } );
 		await user.click( button );
 		expect( handleButtonClick ).toHaveBeenCalled();
 	} );

diff --git a/projects/js-packages/connection/package.json b/projects/js-packages/connection/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.33.11",
+	"version": "0.33.12-alpha",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {

diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
@@ -1,10 +1,17 @@
 /**
  * External dependencies
  */
-import { AdminPage, Button, Col, Container, Text } from '@automattic/jetpack-components';
+import {
+	AdminPage,
+	Button,
+	Col,
+	Container,
+	Text,
+	TermsOfService,
+} from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
 import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import classNames from 'classnames';
 import React, { useCallback, useEffect } from 'react';
 /**
@@ -66,6 +73,7 @@ export default function ProductInterstitial( {
 	ctaCallback = null,
 } ) {
 	const { detail } = useProduct( slug );
+	const { detail: bundleDetail } = useProduct( bundle );
 	const { activate, isPending: isActivating } = useActivate( slug );
 
 	const { isUpgradableByBundle, tiers, pricingForUi } = detail;
@@ -76,6 +84,15 @@ export default function ProductInterstitial( {
 		skipUserConnection: true,
 		redirectUri: detail.postActivationUrl ? detail.postActivationUrl : null,
 	} );
+	const showBundledTOS = ! hideTOS && !! bundle;
+	const productName = detail?.title;
+	const bundleName = bundleDetail?.title;
+	const bundledTosLabels = [
+		/* translators: %s is the product name  */
+		sprintf( __( 'Get %s', 'jetpack-my-jetpack' ), productName ),
+		/* translators: %s is the bundled product name */
+		sprintf( __( 'Get %s', 'jetpack-my-jetpack' ), bundleName ),
+	];
 
 	useEffect( () => {
 		recordEvent( 'jetpack_myjetpack_product_interstitial_view', { product: slug } );
@@ -238,7 +255,7 @@ export default function ProductInterstitial( {
 									supportingInfo={ supportingInfo }
 									preferProductName={ preferProductName }
 									ctaButtonLabel={ ctaButtonLabel }
-									hideTOS={ hideTOS }
+									hideTOS={ hideTOS || showBundledTOS }
 									quantity={ quantity }
 									highlightLastFeature={ highlightLastFeature }
 									isFetching={ isActivating || siteIsRegistering }
@@ -256,6 +273,7 @@ export default function ProductInterstitial( {
 										trackButtonClick={ trackBundleClick }
 										onClick={ clickHandler }
 										className={ isUpgradableByBundle ? styles.container : null }
+										hideTOS={ hideTOS || showBundledTOS }
 										quantity={ quantity }
 										highlightLastFeature={ highlightLastFeature }
 										isFetching={ isActivating }
@@ -267,6 +285,13 @@ export default function ProductInterstitial( {
 						</Container>
 					) }
 				</Col>
+				<Col>
+					{ showBundledTOS && (
+						<div className={ styles[ 'tos-container' ] }>
+							<TermsOfService multipleButtons={ bundledTosLabels } />
+						</div>
+					) }
+				</Col>
 			</Container>
 		</AdminPage>
 	);

diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-interstitial/style.module.scss
@@ -35,3 +35,7 @@
 		font-size: var(--font-body-small);
 	}
 }
+
+.not-strong {
+	font-weight: normal !important;
+}
diff --git a/projects/packages/my-jetpack/changelog/update-improve-tos-message b/projects/packages/my-jetpack/changelog/update-improve-tos-message
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update/improve ToS wording slightly.
diff --git a/projects/plugins/automattic-for-agencies-client/changelog/update-improve-tos-message b/projects/plugins/automattic-for-agencies-client/changelog/update-improve-tos-message
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection: Update connection ToS messaging slightly
diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/index.jsx b/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/index.jsx
@@ -60,7 +60,7 @@ function ConnectionContent( { onShowSharingDetailsClick } ) {
 				<div className={ styles[ 'terms-of-service' ] }>
 					{ createInterpolateElement(
 						__(
-							'By clicking the <strong>connect this site</strong> button, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>share details</shareDetailsLink> with WordPress.com.',
+							'By clicking <strong>connect this site</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
 							'automattic-for-agencies-client'
 						),
 						{
@@ -99,7 +99,7 @@ function ConnectionContent( { onShowSharingDetailsClick } ) {
 
 /**
  * Detail Sharing Content
- * The copy for the "share details" information linked from the TOS.
+ * The copy for the "sync your site‘s data" information linked from the TOS.
  *
  * @param {object}   props                             - Component props
  * @param {Function} props.onCloseSharingDetailsClick  - Callback to close the sharing details.
@@ -121,7 +121,7 @@ function DetailSharingContent( { onCloseSharingDetailsClick } ) {
 			<div className={ styles.card__prose }>
 				<h2>
 					{ __(
-						'What data is shared from your site with WordPress.com',
+						'What data is synced between your site and WordPress.com',
 						'automattic-for-agencies-client'
 					) }
 				</h2>

diff --git a/projects/plugins/jetpack/_inc/client/components/connect-button/index.jsx b/projects/plugins/jetpack/_inc/client/components/connect-button/index.jsx
@@ -201,7 +201,7 @@ export class ConnectButton extends React.Component {
 					<p className="jp-banner__tos-blurb">
 						{ createInterpolateElement(
 							__(
-								'By clicking the button below, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>share details</shareDetailsLink> with WordPress.com.',
+								'By clicking the button below, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
 								'jetpack'
 							),
 							{

diff --git a/projects/plugins/jetpack/_inc/client/components/contextualized-connection/test/component.js b/projects/plugins/jetpack/_inc/client/components/contextualized-connection/test/component.js
@@ -60,7 +60,7 @@ describe( 'ContextualizedConnection', () => {
 					( content, element ) =>
 						content !== '' && // filter out parent elements
 						element.textContent.startsWith(
-							`By clicking the ${ testProps.buttonLabel } button, you agree to our Terms of Service`
+							`By clicking ${ testProps.buttonLabel }, you agree to our Terms of Service`
 						)
 				)
 			).toBeInTheDocument();

diff --git a/projects/plugins/jetpack/changelog/update-improve-tos-message b/projects/plugins/jetpack/changelog/update-improve-tos-message
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Connection: Update connection ToS messaging slightly
diff --git a/projects/plugins/jetpack/functions.global.php b/projects/plugins/jetpack/functions.global.php
@@ -259,7 +259,7 @@ function jetpack_render_tos_blurb() {
 	printf(
 		wp_kses(
 			/* Translators: placeholders are links. */
-			__( 'By clicking the <strong>Set up Jetpack</strong> button, you agree to our <a href="%1$s" target="_blank" rel="noopener noreferrer">Terms of Service</a> and to <a href="%2$s" target="_blank" rel="noopener noreferrer">share details</a> with WordPress.com.', 'jetpack' ),
+			__( 'By clicking <strong>Set up Jetpack</strong>, you agree to our <a href="%1$s" target="_blank" rel="noopener noreferrer">Terms of Service</a> and to <a href="%2$s" target="_blank" rel="noopener noreferrer">sync your site‘s data</a> with us.', 'jetpack' ),
 			array(
 				'a'      => array(
 					'href'   => array(),

diff --git a/projects/plugins/migration/changelog/update-improve-tos-message b/projects/plugins/migration/changelog/update-improve-tos-message
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection: Update connection ToS messaging slightly
diff --git a/projects/plugins/migration/src/js/components/migration/index.tsx b/projects/plugins/migration/src/js/components/migration/index.tsx
@@ -16,7 +16,7 @@ export * from './progress';
 
 export const ToS = createInterpolateElement(
 	__(
-		'By clicking "Get started", you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>share details</shareDetailsLink> with WordPress.com.',
+		'By clicking "Get started", you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
 		'wpcom-migration'
 	),
 	{