@automattic/jetpack-components 0.69.1 → 0.70.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.70.0] - 2025-03-24
+### Changed
+- Update component that renders the terms of service to have a text-only version. [#42600]
+
 ## [0.69.1] - 2025-03-18
 ### Changed
 - Update package dependencies. [#42509] [#42511]
@@ -1318,6 +1322,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.70.0]: https://github.com/Automattic/jetpack-components/compare/0.69.1...0.70.0
 [0.69.1]: https://github.com/Automattic/jetpack-components/compare/0.69.0...0.69.1
 [0.69.0]: https://github.com/Automattic/jetpack-components/compare/0.68.2...0.69.0
 [0.68.2]: https://github.com/Automattic/jetpack-components/compare/0.68.1...0.68.2

package/build/components/terms-of-service/index.js

@@ -5,7 +5,18 @@ import clsx from 'clsx';
 import { getRedirectUrl } from '../../../components/index.js';
 import Text from '../text/index.js';
 import './styles.scss';
-const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, ...textProps }) => (_jsx(Text, { className: clsx(className, 'terms-of-service'), ...textProps, children: multipleButtons ? (_jsx(MultipleButtonsText, { multipleButtonsLabels: multipleButtons })) : (_jsx(SingleButtonText, { agreeButtonLabel: agreeButtonLabel })) }));
+const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {
+    const getTOSContent = () => {
+        if (isTextOnly) {
+            return _jsx(TermsOfServiceTextOnly, {});
+        }
+        if (multipleButtons) {
+            return _jsx(MultipleButtonsText, { multipleButtonsLabels: multipleButtons });
+        }
+        return _jsx(SingleButtonText, { agreeButtonLabel: agreeButtonLabel });
+    };
+    return (_jsx(Text, { className: clsx(className, 'terms-of-service'), ...textProps, children: getTOSContent() }));
+};
 const MultipleButtonsText = ({ multipleButtonsLabels }) => {
     if (Array.isArray(multipleButtonsLabels) && multipleButtonsLabels.length > 1) {
         return createInterpolateElement(sprintf(
@@ -28,5 +39,9 @@ __('By clicking <strong>%s</strong>, you agree to our <tosLink>Terms of Service<
     tosLink: _jsx(Link, { slug: "wpcom-tos" }),
     shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
 });
+const TermsOfServiceTextOnly = () => createInterpolateElement(__('By continuing you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site’s data</shareDetailsLink> with us. We’ll check if that email is linked to an existing WordPress.com account or create a new one instantly.', 'jetpack-components'), {
+    tosLink: _jsx(Link, { slug: "wpcom-tos" }),
+    shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+});
 const Link = ({ slug, children }) => (_jsx("a", { className: "terms-of-service__link", href: getRedirectUrl(slug), rel: "noopener noreferrer", target: "_blank", children: children }));
 export default TermsOfService;

package/build/components/terms-of-service/types.d.ts

@@ -8,6 +8,7 @@ type MultipleButtonsProps = {
      * The text label of the button someone would click to agree to the terms.
      */
     agreeButtonLabel?: undefined;
+    isTextOnly?: false;
 };
 type SingleButtonProps = {
     /**
@@ -18,6 +19,15 @@ type SingleButtonProps = {
      * The text label of the button someone would click to agree to the terms.
      */
     agreeButtonLabel: string;
+    isTextOnly?: false;
 };
-export type TermsOfServiceProps = Pick<TextProps, 'variant' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'className' | 'component'> & (MultipleButtonsProps | SingleButtonProps);
+type OnlyTextProps = {
+    /**
+     * If true, displays a simpler version of the terms without button references
+     */
+    isTextOnly: true;
+    multipleButtons?: undefined;
+    agreeButtonLabel?: undefined;
+};
+export type TermsOfServiceProps = Pick<TextProps, 'variant' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'className' | 'component'> & (MultipleButtonsProps | SingleButtonProps | OnlyTextProps);
 export {};

package/components/terms-of-service/index.tsx

@@ -10,16 +10,25 @@ const TermsOfService: React.FC< TermsOfServiceProps > = ( {
 	className,
 	multipleButtons,
 	agreeButtonLabel,
+	isTextOnly,
 	...textProps
-} ) => (
-	<Text className={ clsx( className, 'terms-of-service' ) } { ...textProps }>
-		{ multipleButtons ? (
-			<MultipleButtonsText multipleButtonsLabels={ multipleButtons } />
-		) : (
-			<SingleButtonText agreeButtonLabel={ agreeButtonLabel } />
-		) }
-	</Text>
-);
+} ) => {
+	const getTOSContent = () => {
+		if ( isTextOnly ) {
+			return <TermsOfServiceTextOnly />;
+		}
+		if ( multipleButtons ) {
+			return <MultipleButtonsText multipleButtonsLabels={ multipleButtons } />;
+		}
+		return <SingleButtonText agreeButtonLabel={ agreeButtonLabel } />;
+	};
+
+	return (
+		<Text className={ clsx( className, 'terms-of-service' ) } { ...textProps }>
+			{ getTOSContent() }
+		</Text>
+	);
+};
 
 const MultipleButtonsText = ( { multipleButtonsLabels } ) => {
 	if ( Array.isArray( multipleButtonsLabels ) && multipleButtonsLabels.length > 1 ) {
@@ -70,6 +79,18 @@ const SingleButtonText = ( { agreeButtonLabel } ) =>
 		}
 	);
 
+const TermsOfServiceTextOnly = () =>
+	createInterpolateElement(
+		__(
+			'By continuing you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site’s data</shareDetailsLink> with us. We’ll check if that email is linked to an existing WordPress.com account or create a new one instantly.',
+			'jetpack-components'
+		),
+		{
+			tosLink: <Link slug="wpcom-tos" />,
+			shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+		}
+	);
+
 const Link: React.FC< { slug: string; children?: React.ReactNode } > = ( { slug, children } ) => (
 	<a
 		className="terms-of-service__link"

package/components/terms-of-service/types.ts

@@ -10,6 +10,8 @@ type MultipleButtonsProps = {
 	 * The text label of the button someone would click to agree to the terms.
 	 */
 	agreeButtonLabel?: undefined;
+
+	isTextOnly?: false;
 };
 
 type SingleButtonProps = {
@@ -22,6 +24,17 @@ type SingleButtonProps = {
 	 * The text label of the button someone would click to agree to the terms.
 	 */
 	agreeButtonLabel: string;
+
+	isTextOnly?: false;
+};
+
+type OnlyTextProps = {
+	/**
+	 * If true, displays a simpler version of the terms without button references
+	 */
+	isTextOnly: true;
+	multipleButtons?: undefined;
+	agreeButtonLabel?: undefined;
 };
 
 export type TermsOfServiceProps = Pick<
@@ -44,4 +57,4 @@ export type TermsOfServiceProps = Pick<
 	| 'className'
 	| 'component'
 > &
-	( MultipleButtonsProps | SingleButtonProps );
+	( MultipleButtonsProps | SingleButtonProps | OnlyTextProps );

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.69.1",
+	"version": "0.70.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",