Feature Description

We should show an auto-updates checkbox in the activation banner, allowing the user to opt-in to auto-updates when they start the setup process.

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

Acceptance criteria

• Given that the auto-updates setting is not currently enabled:
  • An auto-updates checkbox is present in the banner shown on the plugins page when the user activates the Site Kit plugin.
  • The checkbox is accompanied by the following descriptive text: Enable auto-update and stay up-to-date with Site Kit's latest features.
  • The checkbox and text match the design in the Figma file. Any other design updates are out of scope for this issue.
  • The checkbox is unchecked by default.
  • When the user enables the checkbox and clicks the Start setup button, the auto-updates setting is enabled.
  • When the user enables the checkbox, the following GA event is tracked:
    • Name: enable_auto_updates
    • Category: plugin_activation
  • When the user disables the checkbox, the following GA event is tracked:
    • Name: disable_auto_updates
    • Category: plugin_activation
  • When the user clicks the Start setup button with the checkbox enabled, the following GA event is tracked:
    • Name: start_setup_auto_updates_enabled
    • Category: plugin_activation
• This change is gated behind the setupFlowRefreshPhase4 feature flag.

Implementation Brief

• Update assets/js/components/activation/activation-app.js
  • Add a new local state [autoUpdatesEnabled, setAutoUpdatesEnabled] to hold the checkbox' state
  • Add a callback toggleAutoUpdates
    • It should call setAutoUpdatesChecked based on event.target.checked
    • It should track an event based based on the checked state
      • If it's checked, track enable_auto_updates
      • If it's unchecked, track disable_auto_updates
  • Check if auto updates are already enabled using the getSiteKitAutoUpdatesEnabled selector from CORE_SITE
  • If setupFlowRefreshPhase4 is enabled and auto updates are NOT already enabled, render a checkbox between the title and the button with the following copy: "Enable auto-update and stay up-to-date with Site Kit's latest features."
    • Use the toggleAutoUpdates callback as the onChange handler
  • Update the onButtonClick
    • If setupFlowRefreshPhase4 is enabled and autoUpdatesEnabled is true
      • Track an event "start_setup_auto_updates_enabled"
      • Call and await enableAutoUpdate from the CORE_SITE store
• Make any necessary CSS changes to match the Figma design in assets/sass/components/activation/_googlesitekit-activation.scss
  • Please note that only the checkbox, its label's typography and spacing is in scope.

Test Coverage

• Add tests for the ActivationApp component to cover the auto updates toggle and GA events.

QA Brief

Note: As per this conversation on slack the tracking has not been implemented in this issue and will be handled in a separate one.

1. Make sure Site Kit plugin is installed, but not setup.
2. Enable the GA Debug extension in chrome.
3. setupFlowRefreshPhase4 feature flag should be enabled in tester plugin.
4. Go to Plugins > Installed plugins,activate the Site Kit plugin.
5. Make sure the plugin activation banner appears like the one in Figma with the auto-update checkbox.

Changelog entry

• Add an auto-updates opt-in checkbox to the plugin activation banner, allowing users to enable automatic updates when starting the setup process.