Add the Settings Section toggle switch variant and hook up the setting to toggle the Audiences Widget Area on/off

[techanvil]

Feature Description

Add the Settings Section toggle switch variant and hook up the setting to toggle the Audiences Widget Area on/off.

See Settings section in the design doc.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A toggle switch is implemented in the Settings Section under the Admin Settings tab, below the Key Metrics section.
• The toggle switch controls the visibility of the Audiences Widget Area.
• The setting is persistent through the POST audience-settings endpoint and reflects the current state of the Audiences Widget Area visibility.
• The feature aligns with the guidelines in the design doc and the Figma design.

Implementation Brief

• Add assets/js/modules/analytics-4/components/settings/AudienceSegmentation/SettingsVisitorGroups.js
  • Use assets/js/components/settings/SettingsPlugin.js as a starting point
  • Replace Checkbox component with Switch component
  • Apply styling and text as outlined in design doc and figma linked in AC
  • In the onChange callback, save the settings using the setAudienceSegmentationWidgetHidden action and check for the value using isAudienceSegmentationWidgetHidden action, implemented in 7176,
• Update assets/js/components/settings/SettingsAdmin.js
  • After

    site-kit-wp/assets/js/components/settings/SettingsAdmin.js

    Lines 50 to 54 in c173f6c

    	{ showKeyMetricsSettings && (
    	<Cell size={ 12 }>
    	<SettingsCardKeyMetrics />
    	</Cell>
    	) }

    Check if analytics-4 module is active, using isModuleActive selector on CORE_MODULES datastore, and if audienceSegmentation feature flag is enabled to render SettingsVisitorGroups component wrapped with <Cell size={ 12 }> component

Test Coverage

• Add tests for SettingsVisitorGroups component, ensuring the switch's actions send the events mentioned in the description/ACs

QA Brief

• Ensure the Analytics module is connected.
• Ensure the Audience Segmentation feature flag is enabled via the tester plugin.
• Navigate to the Settings page -> Admin Settings and verify the Visitor groups section with the toggle switch is displayed under the Key Metrics section.
• Verify the toggle switch is functional and toggles the visibility of the Audiences Widget Area.
• Verify the setting is persistent through the POST audience-settings endpoint.
• Go to the browser's Network tab and check the POST request for audience-settings when toggling the switch.
• Once merged, verify this story.

Changelog entry

• Add a settings toggle for Audience Segmentation.

[eugene-manuilov]

AC ✔️

[tofumatt]

IB ✅

[techanvil]

Hey @zutigrm, as mentioned on Slack I've added a code organization section to the design doc to help keep us aligned.

The upshot is that we should create this new SettingsVisitorGroups in the assets/js/modules/analytics-4/components/settings/AudienceSegmentation/ folder.

It's also worth noting that the audience settings will only be available if analytics-4 is active so we should make that a condition for displaying the settings section.

Please can you update the IB accordingly?

[techanvil]

Thanks for the update @zutigrm, IB LGTM! ✅

[wpdarren]

QA Update: ✅

Verified:

• On the Settings page, the Visitor groups section with the toggle switch is displayed under the Key Metrics section.
• The toggle switch is functional and toggles the visibility of the Audiences Widget Area.
• The setting is persistent through the POST audience-settings endpoint.
• The POST request for audience-settings when toggling the switch.
• This story loads and behaves correctly.

Screenshots

[aaemnnosttv]

⚠️ I noticed a misspelling which should be fixed but can happen in a follow-up #8424 (review)