Enhance/#8177 - Add the settings section toggle switch for audience segmentation widget area visibility

assets/js/components/settings/SettingsAdmin.js

@@ -37,9 +37,13 @@ import SettingsCardKeyMetrics from './SettingsCardKeyMetrics';
 import SettingsPlugin from './SettingsPlugin';
 import ConnectedIcon from '../../../svg/icons/connected.svg';
 import PreviewBlock from '../PreviewBlock';
+import SettingsCardVisitorGroups from './SettingsCardVisitorGroups';
+import { useFeature } from '../../hooks/useFeature';
 const { useSelect } = Data;
 
 export default function SettingsAdmin() {
+	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
+
 	const isAnalyticsConnected = useSelect( ( select ) =>
 		select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
 	);
@@ -143,6 +147,12 @@ export default function SettingsAdmin() {
 				</Cell>
 			) }
 
+			{ audienceSegmentationEnabled && isAnalyticsConnected && (
+				<Cell size={ 12 }>
+					<SettingsCardVisitorGroups />
+				</Cell>
+			) }
+
 			<Cell size={ 12 }>
 				<Layout
 					title={ __( 'Plugin Status', 'google-site-kit' ) }

assets/js/components/settings/SettingsCardVisitorGroups.js

@@ -0,0 +1,81 @@
+/**
+ * SettingsCardVisitorGroups 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 { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { Switch } from 'googlesitekit-components';
+import { Cell, Grid, Row } from '../../material-components';
+import Layout from '../layout/Layout';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+const { useDispatch, useSelect } = Data;
+
+export default function SettingsCardVisitorGroups() {
+	const audienceSegmentationWidgetHidden = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).isAudienceSegmentationWidgetHidden()
+	);
+
+	const { setAudienceSegmentationWidgetHidden, saveAudienceSettings } =
+		useDispatch( MODULES_ANALYTICS_4 );
+
+	const handleKeyMetricsToggle = useCallback( async () => {
+		await setAudienceSegmentationWidgetHidden(
+			! audienceSegmentationWidgetHidden
+		);
+		await saveAudienceSettings();
+	}, [
+		audienceSegmentationWidgetHidden,
+		saveAudienceSettings,
+		setAudienceSegmentationWidgetHidden,
+	] );
+
+	return (
+		<Layout
+			className="googlesitekit-settings-meta"
+			title={ __( 'Visitor groups', 'google-site-kit' ) }
+			header
+			fill
+			rounded
+		>
+			<div className="googlesitekit-settings-module googlesitekit-settings-module--active">
+				<Grid>
+					<Row>
+						<Cell size={ 12 }>
+							<Switch
+								label={ __(
+									'Display visitors groups in dashboard',
+									'google-site-kit'
+								) }
+								checked={ ! audienceSegmentationWidgetHidden }
+								onClick={ handleKeyMetricsToggle }
+								hideLabel={ false }
+							/>
+						</Cell>
+					</Row>
+				</Grid>
+			</div>
+		</Layout>
+	);
+}

assets/js/components/settings/SettingsCardVisitorGroups.stories.js

@@ -0,0 +1,77 @@
+/**
+ * SettingsCardVisitorGroups component stories.
+ *
+ * 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.
+ */
+
+/**
+ * External dependencies
+ */
+import fetchMock from 'fetch-mock';
+
+/**
+ * Internal dependencies
+ */
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import SettingsCardVisitorGroups from './SettingsCardVisitorGroups';
+
+function Template() {
+	return <SettingsCardVisitorGroups />;
+}
+
+export const Default = Template.bind( {} );
+Default.storyName = 'Default';
+Default.scenario = {
+	label: 'Modules/Analytics4/Components/AudienceSegmentation//SettingsCardVisitorGroups/Default',
+};
+
+export default {
+	title: 'Modules/Analytics4/Components/AudienceSegmentation/SettingsCardVisitorGroups',
+	decorators: [
+		( Story, { args } ) => {
+			const setupRegistry = ( registry ) => {
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.receiveGetAudienceSettings( {
+						configuredAudiences: [ 'audienceA', 'audienceB' ],
+						isAudienceSegmentationWidgetHidden: false,
+					} );
+
+				// Mock the audience-settings endpoint to allow toggling the switch.
+				fetchMock.post(
+					RegExp(
+						'google-site-kit/v1/modules/analytics-4/data/audience-settings'
+					),
+					( url, { body } ) => {
+						const { data } = JSON.parse( body );
+
+						return { body: data.settings };
+					}
+				);
+
+				if ( args.setupRegistry ) {
+					args.setupRegistry( registry );
+				}
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

assets/js/components/settings/SettingsCardVisitorGroups.test.js

@@ -0,0 +1,96 @@
+/**
+ * SettingsCardVisitorGroups component tests.
+ *
+ * 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.
+ */
+
+import { render, waitFor } from '../../../../tests/js/test-utils';
+import { createTestRegistry } from '../../../../tests/js/utils';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import SettingsCardVisitorGroups from './SettingsCardVisitorGroups';
+
+describe( 'SettingsCardVisitorGroups', () => {
+	let registry;
+
+	beforeEach( () => {
+		registry = createTestRegistry();
+	} );
+
+	it( 'should render the visitor groups switch correctly', async () => {
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetAudienceSettings( {
+			configuredAudiences: [ 'audienceA', 'audienceB' ],
+			isAudienceSegmentationWidgetHidden: false,
+		} );
+
+		const { getByLabelText } = render( <SettingsCardVisitorGroups />, {
+			registry,
+		} );
+
+		const switchControl = getByLabelText(
+			'Display visitors groups in dashboard'
+		);
+
+		await waitFor( () => {
+			expect( switchControl ).toBeChecked();
+		} );
+	} );
+
+	it( 'should toggle the switch on click and save the audience settings', async () => {
+		const audienceSettingsEndpoint = new RegExp(
+			'^/google-site-kit/v1/modules/analytics-4/data/audience-settings'
+		);
+
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetAudienceSettings( {
+			configuredAudiences: [ 'audienceA', 'audienceB' ],
+			isAudienceSegmentationWidgetHidden: true,
+		} );
+
+		fetchMock.postOnce( audienceSettingsEndpoint, {
+			body: {
+				configuredAudiences: [ 'audienceA', 'audienceB' ],
+				isAudienceSegmentationWidgetHidden: false,
+			},
+			status: 200,
+		} );
+
+		const { getByLabelText } = render( <SettingsCardVisitorGroups />, {
+			registry,
+		} );
+
+		const switchControl = getByLabelText(
+			'Display visitors groups in dashboard'
+		);
+
+		expect( switchControl ).not.toBeChecked();
+
+		switchControl.click();
+
+		await waitFor( () => {
+			expect( switchControl ).toBeChecked();
+
+			// Ensure the proper body parameters were sent.
+			expect( fetchMock ).toHaveFetched( audienceSettingsEndpoint, {
+				body: {
+					data: {
+						settings: {
+							configuredAudiences: [ 'audienceA', 'audienceB' ],
+							isAudienceSegmentationWidgetHidden: false,
+						},
+					},
+				},
+			} );
+		} );
+	} );
+} );