Social: Add UTM settings and toggles

projects/js-packages/publicize-components/changelog/add-social-utm-toggle

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added toggle for UTM settings

projects/js-packages/publicize-components/index.ts

@@ -18,6 +18,7 @@ export { default as PublicizePanel } from './src/components/panel';
 export { default as ReviewPrompt } from './src/components/review-prompt';
 export { default as PostPublishPanels } from './src/components/post-publish-panels';
 export { default as ConnectionManagement } from './src/components/connection-management';
+export { default as UtmToggle } from './src/components/utm-toggle';
 
 export { default as useSocialMediaConnections } from './src/hooks/use-social-media-connections';
 export { default as useSocialMediaMessage } from './src/hooks/use-social-media-message';

projects/js-packages/publicize-components/src/components/utm-toggle/index.tsx

@@ -0,0 +1,50 @@
+import { ToggleControl } from '@automattic/jetpack-components';
+import { store as socialStore } from '@automattic/jetpack-publicize-components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import React from 'react';
+
+type ToggleProps = {
+	/**
+	 * The label or content after the toggle.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * The class name to add to the toggle.
+	 */
+	toggleClass?: string;
+};
+
+/**
+ * A button toggle wrapper for enabling/disabling the UTM parameters feature.
+ *
+ * @param {ToggleProps} props - Component props.
+ * @return {React.ReactElement} - JSX.Element
+ */
+const UtmToggle: React.FC< ToggleProps > = ( { toggleClass, children } ) => {
+	const { isEnabled, isUpdating } = useSelect( select => {
+		return {
+			isEnabled: select( socialStore ).getUtmSettings().enabled,
+			isUpdating: select( socialStore ).isSavingSiteSettings(),
+		};
+	}, [] );
+
+	const { updateUtmSettings } = useDispatch( socialStore );
+
+	const toggleStatus = useCallback( () => {
+		updateUtmSettings( { enabled: ! isEnabled } );
+	}, [ isEnabled, updateUtmSettings ] );
+
+	return (
+		<ToggleControl
+			className={ toggleClass }
+			disabled={ isUpdating }
+			checked={ isEnabled }
+			onChange={ toggleStatus }
+			label={ children }
+		/>
+	);
+};
+
+export default UtmToggle;

projects/js-packages/publicize-components/src/social-store/actions/index.js

@@ -2,11 +2,13 @@ import * as connectionData from './connection-data';
 import * as shareStatus from './share-status';
 import * as sigActions from './social-image-generator';
 import * as socialPluginSettings from './social-plugin-settings';
+import * as utmActions from './utm-settings';
 
 const actions = {
 	...shareStatus,
 	...connectionData,
 	...sigActions,
+	...utmActions,
 	...socialPluginSettings,
 };
 

projects/js-packages/publicize-components/src/social-store/actions/utm-settings.ts

@@ -0,0 +1,18 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { UTM_ENABLED_KEY } from '../constants';
+import { UtmSettingsConfig } from '../types';
+
+/**
+ * Saves the UTM status.
+ *
+ * @param {Partial< UtmSettingsConfig >} data - The data to save.
+ *
+ * @return {Function} A thunk.
+ */
+export function updateUtmSettings( data: Partial< UtmSettingsConfig > ) {
+	return async function ( { registry } ) {
+		const { saveSite } = registry.dispatch( coreStore );
+
+		await saveSite( { [ UTM_ENABLED_KEY ]: data } );
+	};
+}

projects/js-packages/publicize-components/src/social-store/constants.ts

@@ -1 +1,2 @@
 export const SIG_SETTINGS_KEY = 'jetpack_social_image_generator_settings';
+export const UTM_ENABLED_KEY = 'jetpack_social_utm_settings';

projects/js-packages/publicize-components/src/social-store/selectors/index.js

@@ -5,6 +5,7 @@ import * as shareStatusSelectors from './share-status';
 import siteDataSelectors from './site-data';
 import * as sigSelectors from './social-image-generator';
 import * as socialPluginSelectors from './social-plugin-settings';
+import * as utmSelectors from './utm-settings';
 
 /**
  * Returns whether the site settings are being saved.
@@ -21,6 +22,7 @@ const selectors = {
 	...shareStatusSelectors,
 	isSavingSiteSettings,
 	...sigSelectors,
+	...utmSelectors,
 	...socialPluginSelectors,
 };
 

projects/js-packages/publicize-components/src/social-store/selectors/utm-settings.ts

@@ -0,0 +1,17 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { createRegistrySelector } from '@wordpress/data';
+import { getSocialScriptData } from '../../utils';
+import { UTM_ENABLED_KEY } from '../constants';
+import { SocialSettingsFields, UtmSettingsConfig } from '../types';
+
+/**
+ * Returns the UTM state.
+ */
+export const getUtmSettings = createRegistrySelector( select => () => {
+	const { getSite } = select( coreStore );
+
+	const settings = getSite( undefined, { _fields: UTM_ENABLED_KEY } ) as SocialSettingsFields;
+
+	// If the settings are not available in the store yet, use the default settings.
+	return settings?.[ UTM_ENABLED_KEY ] ?? getSocialScriptData().settings.utmSettings;
+} ) as ( state: object ) => UtmSettingsConfig;

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -89,6 +89,10 @@ export type SocialImageGeneratorConfig = {
 	template?: string;
 };
 
+export type UtmSettingsConfig = {
+	enabled: boolean;
+};
+
 export type SocialPluginSettings = {
 	publicize_active: boolean;
 	show_pricing_page: boolean;
@@ -101,6 +105,7 @@ export type SocialPluginSettings = {
 
 export type SocialSettingsFields = {
 	jetpack_social_image_generator_settings: SocialImageGeneratorConfig;
+	jetpack_social_is_utm_enabled: boolean;
 };
 
 declare global {

projects/js-packages/publicize-components/src/types/types.ts

@@ -1,4 +1,8 @@
-import { SocialImageGeneratorConfig, SocialPluginSettings } from '../social-store/types';
+import {
+	SocialImageGeneratorConfig,
+	SocialPluginSettings,
+	UtmSettingsConfig,
+} from '../social-store/types';
 
 export interface SocialUrls {
 	connectionsManagementPage: string;
@@ -33,6 +37,7 @@ export interface ApiPaths {
 
 export type SocialSettings = {
 	socialImageGenerator: SocialImageGeneratorConfig;
+	utmSettings: UtmSettingsConfig;
 	socialPlugin: SocialPluginSettings;
 };
 

projects/packages/publicize/changelog/add-social-utm-toggle

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added a new toggle for UTM tracking

projects/packages/publicize/src/class-publicize-script-data.php

@@ -133,6 +133,7 @@ public static function get_social_settings() {
 
 		return array(
 			'socialImageGenerator' => $settings->get_image_generator_settings(),
+			'utmSettings'          => $settings->get_utm_settings(),
 		);
 	}
 

projects/packages/publicize/src/jetpack-social-settings/class-settings.php

@@ -31,6 +31,12 @@ class Settings {
 		'template' => Templates::DEFAULT_TEMPLATE,
 	);
 
+	const UTM_SETTINGS = 'utm_settings';
+
+	const DEFAULT_UTM_SETTINGS = array(
+		'enabled' => false,
+	);
+
 	/**
 	 * Feature flags. Each item has 3 keys because of the naming conventions:
 	 * - flag_name: The name of the feature flag for the option check.
@@ -129,6 +135,25 @@ public function register_settings() {
 			)
 		);
 
+		register_setting(
+			'jetpack_social',
+			self::OPTION_PREFIX . self::UTM_SETTINGS,
+			array(
+				'type'         => 'boolean',
+				'default'      => false,
+				'show_in_rest' => array(
+					'schema' => array(
+						'type'       => 'object',
+						'properties' => array(
+							'enabled' => array(
+								'type' => 'boolean',
+							),
+						),
+					),
+				),
+			)
+		);
+
 		add_filter( 'rest_pre_update_setting', array( $this, 'update_settings' ), 10, 3 );
 	}
 
@@ -141,6 +166,15 @@ public function get_image_generator_settings() {
 		return get_option( self::OPTION_PREFIX . self::IMAGE_GENERATOR_SETTINGS, self::DEFAULT_IMAGE_GENERATOR_SETTINGS );
 	}
 
+	/**
+	 * Get if the UTM params is enabled.
+	 *
+	 * @return array
+	 */
+	public function get_utm_settings() {
+		return get_option( self::OPTION_PREFIX . self::UTM_SETTINGS, self::DEFAULT_UTM_SETTINGS );
+	}
+
 	/**
 	 * Get the current settings.
 	 *
@@ -222,6 +256,17 @@ public function update_settings( $updated, $name, $value ) {
 		if ( self::OPTION_PREFIX . self::IMAGE_GENERATOR_SETTINGS === $name ) {
 			return $this->update_social_image_generator_settings( $value );
 		}
+
+		if ( self::OPTION_PREFIX . self::UTM_SETTINGS === $name ) {
+			$current_utm_settings = $this->get_utm_settings();
+
+			if ( empty( $current_utm_settings ) || ! is_array( $current_utm_settings ) ) {
+				$current_utm_settings = self::DEFAULT_UTM_SETTINGS;
+			}
+
+			return update_option( self::OPTION_PREFIX . self::UTM_SETTINGS, array_replace_recursive( $current_utm_settings, $value ) );
+		}
+
 		return $updated;
 	}
 

projects/plugins/jetpack/_inc/client/sharing/features/utm-toggle-section.jsx

@@ -0,0 +1,25 @@
+import { Text } from '@automattic/jetpack-components';
+import { UtmToggle } from '@automattic/jetpack-publicize-components';
+import { __ } from '@wordpress/i18n';
+import { FormFieldset } from '../../components/forms';
+import './style.scss';
+
+const UtmToggleSection = () => {
+	return (
+		<FormFieldset>
+			<UtmToggle toggleClass="jp-settings-sharing__sig-toggle">
+				<div>
+					<Text>
+						<strong>{ __( 'Append UTM parameters to shared URLs', 'jetpack' ) }</strong>
+					</Text>
+					{ __(
+						"UTM parameters are tags added to links to help track where website visitors come from, improving our understanding of how content is shared. Don't worry, it doesn't change the experience or the link destination!",
+						'jetpack'
+					) }
+				</div>
+			</UtmToggle>{ ' ' }
+		</FormFieldset>
+	);
+};
+
+export default UtmToggleSection;

projects/plugins/jetpack/_inc/client/sharing/publicize.jsx

@@ -14,6 +14,7 @@ import './style.scss';
 import { FormFieldset } from '../components/forms';
 import { FEATURE_JETPACK_SOCIAL } from '../lib/plans/constants';
 import SocialImageGeneratorSection from './features/social-image-generator-section';
+import UtmToggleSection from './features/utm-toggle-section';
 
 export const Publicize = withModuleSettingsFormHelpers(
 	class extends Component {
@@ -150,6 +151,7 @@ export const Publicize = withModuleSettingsFormHelpers(
 							{ shouldShowChildElements && hasSocialImageGenerator && (
 								<SocialImageGeneratorSection />
 							) }
+							{ shouldShowChildElements && <UtmToggleSection /> }
 							{ isActive &&
 							isLinked &&
 							useAdminUiV1 &&

projects/plugins/jetpack/changelog/add-social-utm-toggle

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Added a new toggle for Social UTM tracking

projects/plugins/social/changelog/add-social-utm-toggle

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added a new toggle for UTM tracking

projects/plugins/social/src/js/components/admin-page/index.jsx

@@ -22,6 +22,7 @@ import SocialImageGeneratorToggle from '../social-image-generator-toggle';
 import SocialModuleToggle from '../social-module-toggle';
 import SocialNotesToggle from '../social-notes-toggle';
 import SupportSection from '../support-section';
+import UtmToggle from '../utm-toggle';
 import ConnectionScreen from './../connection-screen';
 import Header from './../header';
 import InfoSection from './../info-section';
@@ -80,6 +81,7 @@ const Admin = () => {
 					</AdminSectionHero>
 					<AdminSection>
 						<SocialModuleToggle />
+						{ isModuleEnabled && <UtmToggle /> }
 						{ isModuleEnabled && <SocialNotesToggle disabled={ isUpdatingJetpackSettings } /> }
 						{ isModuleEnabled && siteHasFeature( features.IMAGE_GENERATOR ) && (
 							<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />

projects/plugins/social/src/js/components/utm-toggle/index.tsx

@@ -0,0 +1,48 @@
+import { Text } from '@automattic/jetpack-components';
+import { store as socialStore } from '@automattic/jetpack-publicize-components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+import ToggleSection from '../toggle-section';
+import styles from './styles.module.scss';
+
+type UtmToggleProps = {
+	/**
+	 * If the toggle is disabled.
+	 */
+	disabled?: boolean;
+};
+
+const UtmToggle: React.FC< UtmToggleProps > = ( { disabled } ) => {
+	const { isEnabled, isUpdating } = useSelect( select => {
+		return {
+			isEnabled: select( socialStore ).getUtmSettings().enabled,
+			isUpdating: select( socialStore ).isSavingSiteSettings(),
+		};
+	}, [] );
+
+	const { updateUtmSettings } = useDispatch( socialStore );
+
+	const toggleStatus = useCallback( () => {
+		updateUtmSettings( { enabled: ! isEnabled } );
+	}, [ isEnabled, updateUtmSettings ] );
+
+	return (
+		<ToggleSection
+			title={ __( 'Append UTM parameters to shared URLs', 'jetpack-social' ) }
+			disabled={ isUpdating || disabled }
+			checked={ isEnabled }
+			onChange={ toggleStatus }
+		>
+			<Text className={ styles.text }>
+				{ __(
+					"UTM parameters are tags added to links to help track where website visitors come from, improving our understanding of how content is shared. Don't worry, it doesn't change the experience or the link destination!",
+					'jetpack-social'
+				) }
+			</Text>
+		</ToggleSection>
+	);
+};
+
+export default UtmToggle;

projects/plugins/social/src/js/components/utm-toggle/styles.module.scss

@@ -0,0 +1,11 @@
+.text {
+	grid-column: span 2;
+
+	a {
+		color: inherit;
+	}
+
+	@media ( min-width: 600px ) {
+		grid-column: 2;
+	}
+}