OptionalSettingsView.js

/**
 * Optional Settings View component.
 *
 * Site Kit by Google, Copyright 2024 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * WordPress dependencies
 */
import { __, _x } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { useSelect } from 'googlesitekit-data';
import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
import { trackingExclusionLabels } from '@/js/modules/analytics-4/components/common/TrackingExclusionSwitches';
import Typography from '@/js/components/Typography';

export default function OptionalSettingsView() {
	const trackingDisabled = useSelect(
		( select ) => select( MODULES_ANALYTICS_4 ).getTrackingDisabled() || []
	);

	return (
		<div className="googlesitekit-settings-module__meta-items">
			<div className="googlesitekit-settings-module__meta-item">
				<Typography
					as="h5"
					size="medium"
					type="label"
					className="googlesitekit-settings-module__meta-item-type"
				>
					{ __( 'Excluded from Analytics', 'google-site-kit' ) }
				</Typography>
				<p className="googlesitekit-settings-module__meta-item-data">
					{ !! trackingDisabled.length &&
						trackingDisabled
							.map(
								( exclusion ) =>
									trackingExclusionLabels[ exclusion ]
							)
							.join(
								_x( ', ', 'list separator', 'google-site-kit' )
							) }
					{ ! trackingDisabled.length &&
						__(
							'Analytics is currently enabled for all visitors',
							'google-site-kit'
						) }
				</p>
			</div>
		</div>
	);
}