Repository: google/site-kit-wp
Author: jimmymadon
## Feature Description
This issue will implement the rendering of the new widget area and navigation chip if conversion events are detected on a site.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
* When any of the five conversion events (`purchase`, `add_to_cart`, `submit_lead_form`, `contact`, `generate_lead`) are "detected" on a site, then a new Site Goals widget area should be rendered between the Traffic and Content areas.
* If any of `purchase` or `add_to_cart` events are detected, then an empty "Online store performance" widget should be rendered within the new widget area.
* If any of `submit_lead_form`, `contact` or `generate_lead` events are detected, then an empty "Lead generation performance" widget should be rendered within the new widget area.
* Both of the above widgets should be rendered simultaneously if their respective conditions are met.
* A new "Goals" navigations chip should also be rendered and clicking on it should navigate the user to the new Site Goals widget area.
* The title should be "Site Goals" and sub title should be "See how your site is helping you reach your business objectives".
## Implementation Brief
### New selector for determining type of events (ecommerce or lead)
* [x] In `assets/js/modules/analytics-4/datastore/constants.js`: Create a new enum array for `CONVERSION_REPORTING_ECOMMERCE_EVENTS` with `purchase` and `add_to_cart` events.
* [x] In `assets/js/modules/analytics-4/datastore/conversion-reporting.js`: Create two new selectors that return if there are any `ecommerce` or `lead` events detected respectively. Use the `getDetectedEvents` from the `modules/analytics-4` datastore partial and check if they include any of the events within the two enums `CONVERSION_REPORTING_ECOMMERCE_EVENTS` and `CONVERSION_REPORTING_LEAD_EVENTS` respectively.
### Registering the context, area and widgets
* [x] In `assets/js/googlesitekit/widgets/default-contexts.js`: define and add a new `CONTEXT_MAIN_DASHBOARD_GOALS`.
* [x] In `assets/js/googlesitekit/widgets/default-areas.js`: define and add a new `AREA_MAIN_DASHBOARD_GOALS_PRIMARY`.
* [x] In `assets/js/googlesitekit/widgets/register-defaults.js`: register a new Widget Area with the context and area created above. Add the title and subtitle should be as per the AC.
* [x] In `assets/js/modules/analytics-4/components/`: Create a new folder for `site-goals`.
* [x] Create another folder for `widgets`.
* [x] Add two new components, `OnlineStorePerformanceWidget` and `LeadGenerationPerformanceWidget`: In each, use the new selectors to check if their respective events are returned. If yes, return just a title as per the AC for the widget using the `Widget` (`WidgetHeaderTitle`) component, otherwise return `WidgetNull`.
* [x] In `assets/js/modules/analytics-4/widgets/index.js`: Register the two new widgets using the area and components above.
### Navigation chip
* In `assets/js/components/DashboardNavigation/Navigation/index.js`:
* [x] Add the goals navigation chip following existing patterns.
* [x] Update the `assets/js/components/DashboardNavigation/Navigation/hooks/useVisibleSections.js` hook to check if any events are detected or else, hide the new Goals chip.
### Test Coverage
* Add JSUnit tests to test the conditional rendering of Site Goals widgets.
## QA Brief
* Without the `siteGoals` feature flag enabled, verify the new Site Goals area and chip DO NOT appear.
* In the tester plugin, keep the flag disabled but go to Analytics -> Conversion Reporting and select the Force detected events menu. And select any of the detected events there. Verify the area and chip still DO NOT appear.
* Now enable the feature flag, and verify the area and chip does appear.
* Test the combination of the Lead and Ecommerce events in the tester plugin and verify that the appropriate widget titles appear as mentioned in the ACs.
## Changelog entry
* Add the new Site Goals section.