Add PUE settings section to the Admin settings screen

[10upsimon]

Feature Description

The <SettingsProactiveUserEngagement> component is to act as the entire settings partial for the Proactive User Engagement feature within Google Site Kit > Settings > Admin.

• Design document section
• Figma design

---

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

Acceptance criteria

• New admin settings component is created in assets/js/components/settings/ and included within the main admin settings area bellow Visitor groups settings
• Said component renders a toggle component to enable/disable the feature
• Design and content are matching the Figma design

Implementation Brief

• Add assets/js/components/settings/SettingsEmailReporting.js

  • Use assets/js/components/settings/SettingsKeyMetrics.js as a starting point
    • Apply copy and styling from Figma; wrap strings with i18n
    • In onChange, dispatch setProactiveUserEngagementEnabled(value) and read isEmailReportingEnabled();
    • Conditionally add the Manage email reports link linking to the user settings panel using the USER_SETTINGS_SELECTION_PANEL_OPENED_KEY value on CORE_UI defined in Implement a user engagement SelectionPanel component #11424, when user is subscribed (use isProactiveUserEngagementSubscribed () selector of CORE_USER datastore).

• Add assets/js/components/settings/SettingsCardEmailReporting.js

  • Follow the structure for other SettingsCard* components, like SettingsCardConsentMode
  • Show preview blocks if getEmailReportingSettings is still fetching, or value is undefined
  • Wrap the output with Layout and pass "Email reports" as title and add a grid, row, and cell, size 12 ( full width )

• Update assets/js/components/settings/SettingsAdmin.js

  • Render SettingsCardEmailReporting directly below the Visitor groups section (SettingsCardVisitorGroups)
  • Gate rendering by the proactiveUserEngagement feature flag using the standard Site Kit feature flag utility

Test Coverage

• Create basic test coverage confirming:
  • Component renders only when the feature flag is enabled
  • Switch toggles local state and dispatches the expected action
  • Clicking "manage email" link triggers CORE_UI value.

QA Brief

• Enable the epic feature flag.
• Go to the admin settings and see the new "Email Reporting" section.
  • It should be enabled by default.
  • If enabled, a "Manage email subscription" link should be visible with opens the user settings panel without navigating away from the page.
    • When disabled the link should disappear.
  • The feature enabled setting should be saved (persisted on refresh)

QA Notes: The Figma designs show different font sizes and weights for the switch label and manage email links. I have discussed with Sigal in Figma because other links and labels in the settings have different styling. I have therefore gone with styling that matches existing labels and links not the sizes used in the designs so these differences are expected.

Changelog entry

• Add PUE settings section to the Admin settings screen.

[eugene-manuilov]

AC ✔️