Implement a user engagement `SelectionPanel` component

[zutigrm]

Feature Description

We need to add a new SelectionPanel to the proactive user notification namespace. This panel should wrap the base SideSheet component and will contain other components related to the user's email reporting settings.

---

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

Acceptance criteria

• New UserSettingsSelectionPanel component is added in assets/js/components/proactive-user-engagement/, implementing a SelectionPanel.
• This component will handle the retrieval and storage of user-level settings.
• The component will consist of the following sections:
  • Header - displays title line Email reports subscription and subheading You can always deactivate this feature in Settings
  • Content: Includes a brief note, "You'll receive the report to your WordPress user email," and dynamically displays the user's email address (e.g., someone@anybusiness.com) as portrayed in Figma.
    • The user's WordPress account email will be used.
  • FrequencySelector Component: This nested component will receive the retrieved frequency settings and the settings saving callback function as props.
  • Footer: Displays a static description, "This email is generated by Site Kit using data from your dashboard and sent to your WordPress email, so all your data stays with you." and surfaces error/success notifications when actions (like subscribing) are triggered.
• Invite others to subscribe section can be ignored as it is not going to be implemented in this phase
• Also, notification area will be implemented in separate issue (together with notification types)
• Appropriate tests and stories (with only main panel VRT included) are added
• A new UI state will be defined to control the opening and closing of the selection panel. The panel's opening action will be triggered by menu item implemented in Update plugin user menu and add email reports link #11423.
• The UI state value will be retrieved in the main entry point component, which wraps the new SelectionPanel with an InViewProvider to manage its opening state.
• New Selection Panel is wired in assets/js/components/DashboardMainApp.js when proactiveUserEngagement feature flag is enabled

Implementation Brief

You can check KMW selection panel for some additional examples

• Add assets/js/components/proactive-user-engagement/constants.js
  • Define a new dedicated UI key constant, say USER_SETTINGS_SELECTION_PANEL_OPENED_KEY

Add assets/js/components/proactive-user-engagement/UserSettingsSelectionPanel/Header.js

• Return SelectionPanelHeader as child component with following props:
  • title - "Email reports subscription"
  • children - Conditionally include P component (js/components/Typography/P) when not in view only context, with content You can always deactivate this feature in Settings, Settings should link to the admin settings screen

Add assets/js/components/proactive-user-engagement/UserSettingsSelectionPanel/Footer.js

• It should accept prop notice of type object, in format notice.text - string, notice.type - string enum info|success|error
• It should accept onNoticeDismiss prop callback
• Conditionally render Notice component (assets/js/components/Notice/index.js) when notice prop is passed, and map the props - type={notice.type}, and description={notice.text}
  • Include dismissButton prop with label "Got it" and onClick invoke onNoticeDismiss prop callback
• Or P component with content This email is generated by Site Kit using data from your dashboard and sent to your WordPress email, so all your data stays with you if notice prop is not passed

Add assets/js/components/proactive-user-engagement/UserSettingsSelectionPanel/PanelContent.js

• It should accept following props: savedFrequency, notice object, and onUnsubscribe and onSaveCallback functions
• Output components/markup in following order:
  • Header
  • Explanatory copy "You'll receive the report to your WordPress user email," plus dynamic user email extracted from getUser() selector of CORE_USER datastore.
  • FrequencySelector component implemented in Implement the '<FrequencySelector>' component #11155, and pass onSaveCallback callback and savedFrequency
  • Footer component, pass notice prop, and onNoticeDismiss callback

Add assets/js/components/proactive-user-engagement/UserSettingsSelectionPanel/index.js

• When retrieving the settings, include isOpen check, so settings are fetched when panel is open
• Define/track local state for notice data
• Include onSaveCallback callback:
  • It should include an argument - setting to be saved.
  • Invoke saveProactiveUserEngagementSettings action from CORE_USER datastore
  • If there is no error in saving, set success type notice with text from Figma to the local state
  • If there is an error, set error type notice, with content extracted from error object
• Include onUnsubscribe callback
  • Invoke saveProactiveUserEngagementSettings action from CORE_USER datastore and pass subscribed setting with value false
  • If there is no error in saving, set info type notice with text from Figma to the local state
  • If there is an error, set error type notice, with content extracted from error object
• Include onNoticeDismiss callback, which resets the notice local state to null or empty object
• Return newly created PanelContent wrapped with SelectionPanel general component (assets/js/components/SelectionPanel)
  • Pass isOpen to the SelectionPanel, checking the value from new UI key
  • Pass onSaveCallback, local notice state, retrieve saved frequency from the settings and pass it as savedFrequency and onUnsubscribe and onNoticeDismiss callbacks to the PanelContent

---

• Wire new selection panel to the main and entity dashboards, as well as admin settings screen when proactiveUserEngagement feature flag is enabled

Test Coverage

• Add jest test coverage, verifying different content between view only and admin view, and mock settings saving to verify info|success|error notices showing
• Add basic stories, displaying component in full view for admin and view only users, and save their respective VRT's

QA Brief

• Enable proactiveUserEngagement feature flag
• Visit Site Kit dashboard and under user menu click on Manage email reports
• When Panel opens, verify that:
  • By default when user is not subscribed - default weekly frequency is pre-selected but not showing green tick
  • Clicking Subscribe CTA disabled the CTA, showing the spinner - upon saving notice is shown in the footer, and tertiary Unsubscribe CTA shows next to the Subscribe CTA
    • Selected frequency that was selected is now showing a green tick
  • Clicking Unsubscribe CTA disables both buttons and shows spinner on Unsubscribe - upon unsubscribing green tick is removed from saved frequency and only Subscribe CTA is shown
• Choose different frequency - close the panel, and re-open it
  • Verify that settings were reset - default Weekly frequency should be pre-selected again
• Verify that selection panel matches Figma (minus the invite users list - this is for. phase 1)

---

• Same should work for view-only users

Changelog entry

• Add the email reporting settings selection panel.

[benbowler]

@zutigrm how much should we implement here? Are we implementing anything like the subscribe button, title and email display? Should we make the FrequencyComponent a blocker for this one so that we can make this ticket the complete user settings card implementation?

Also we should consider opening this automatically based on a #link .

[zutigrm]

@benbowler the idea when opening the issue was that it will be a main wrapper for shared SideSheet component, with open/close functionality following the conventions we have in other panels, and will accept other components as children. I am starting to work on the AC now will assign you for review once it is drafted, as I haven't planned the scope yet

Should we make the FrequencyComponent a blocker

Yes most likely all identified child components will be a blockers, unless some are left to be implemented as part of the work in separate component to prevent too many blockers, depending which issue comes in first.

Also we should consider opening this automatically based on a #link .

Let's see if we will have need for this in later phases, in the initial phase the panel won't be opened outside the menu item and CTA's - later on we can easily add listener to update the UI state when hash tag is present, if there is a need, currently it would most likely remain unused.

[benbowler]

Thanks @zutigrm I made a small extension here to clarify that a SelectionPanel component will be used in this new component:

New UserSettingsSelectionPanel component is added in assets/js/components/proactive-user-engagement/, implementing a SelectionPanel.