Add new badge to the ACR widget tiles and groups in key metrics selection panel

[zutigrm]

Feature Description

Once new events have been detected the new metric tiles associated with them should be highlighted in selection panel by displaying "new" badge next to them. Also their respective groups should display "dot" notification.

Figma designs showing these changes can be found here

Check Showing “New” badges for the newly detected events section of the design doc

---

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

Acceptance criteria

• Following the implementation done in 9378, the chip groups and metric items in the selection panel should display "dot" or "new" badges in following way:
  • If new events have been detected, metrics associated with these events should have "new" badge next to them, and their associated group should display "dot" notification.
  • This works for both initial events that are detected, and then for any new events afterwards.
• New badges should follow figma design
• See Showing “New” badges for the newly detected events section of the design doc

Implementation Brief

Note to IB writer, new events can be retrieved from hasNewConversionReportingEvents selector implemented in #9379, as this will retrieve both initial events, and then newly detected events difference after initial events are detected. Mapping of detected events with their ACR widgets counterpart is suggested in implementation of #9371, but can be implemented here instead, whichever issue comes first for execution.

Metric Level New badges

• [ ] Update assets/js/components/SelectionPanel/SelectionPanelItem.js:

  • Add a new prop hasNewBadge, default to false.
  • If this new prop is true, render a NewBadge component after the SelectionBox before the suffix.
  • Update styles if required to match the figma design in assets/sass/components/global/_googlesitekit-selection-panel.scss.

• [ ] Update assets/js/components/KeyMetrics/MetricsSelectionPanel/MetricItem.js:

  • Get the list of new events using the getConversionReportingEventsChange selector.
  • Use the .some Array prototype to check the list of changed events that match the selected metric, using the CONVERSION_EVENTS_WIDGETS map (to be implemented in #9371), to find if this event has changed.

   const newConversionEvent = conversionReportingEventsChange.some( ( conversionEvent ) => CONVERSION_EVENTS_WIDGETS[conversionEvent].includes( slug ) )
  

  • Pass the value of newConversionEvent to the new hasNewBadge prop on the SelectionPanelItem component.

Group Chip dots

• [ ] Update assets/js/components/KeyMetrics/ChipTabGroup/Chip.js:
  • Get the list of new events using the getConversionReportingEventsChange selector.
  • Use the .some Array prototype to check the list of changed events that match the current group, using the CONVERSION_EVENTS_WIDGETS map (to be implemented in #9371), to find out of the events that have changed, if at least one is in the current group using the GROUP prop in the KEY_METRICS_WIDGETS const (implemented in #9376):

   const newConversionEvent = conversionReportingEventsChange.some( ( conversionEvent ) => KEY_METRIC_WIDGETS[ CONVERSION_EVENTS_WIDGETS[conversionEvent] ].metadata.group === slug  )
  

  • If newConversionEvent is true, render a new div with a clear class (eg. googlesitekit-chip-tab-group__chip-item-active-dot) and style this dot to match the figma design in the assets/sass/components/key-metrics/_googlesitekit-chip-tab-group.scss file.

Test Coverage

• Update the stories for the SelectionPanel adding a story for items with new badges.
• Update the new chip tab stores (to be implemented in #9378) to cover the new "new dot" cases.

QA Brief

Changelog entry

[eugene-manuilov]

AC :heavy_check_mark:

[tofumatt]

IB ✅

[kelvinballoo]

QA Update ⚠

This might be out of the scope for this ticket but highlighting in case we need to create another task.

I noticed one difference when I changed the first set of script to having new event as 'add_to_cart' instead of 'contact'. Initially, if it's 'contact', the Add metrics banner would show. But when I change the event to 'add_to_cart', it wouldn't show.

Is that expected? Details in the video attached.

https://github.com/user-attachments/assets/2208e2e6-a9f0-447b-a836-b1cba187476f

---

That said, the main ACs were verified good: ✅

• Following detection of new events, metrics associated with these events have "new" badge next to them, and their associated group displays the "dot" notification.
• New badges should follow figma design.

https://github.com/user-attachments/assets/b228ebe8-ab12-41ba-8d12-c98ebb598711

https://github.com/user-attachments/assets/b65b6db1-9bb6-4f53-9959-45a6d348aee2

[zutigrm]

Thanks @kelvinballoo

This might be out of the scope for this ticket but highlighting in case we need to create another task.

I noticed one difference when I changed the first set of script to having new event as 'add_to_cart' instead of 'contact'. Initially, if it's 'contact', the Add metrics banner would show. But when I change the event to 'add_to_cart', it wouldn't show.

Is that expected? Details in the video attached

If the site purpose is set to publish blog, or publish news, which has leads related metrics, initially detecting contact should surface add metrics, add to cart or publish events will not bring the callout. So it does look like expected result

[kelvinballoo]

QA Update ✅

That makes sense @zutigrm . Thanks! Moving ticket to approval as the ACs were verified good: ✅

• Following detection of new events, metrics associated with these events have "new" badge next to them, and their associated group displays the "dot" notification.
• New badges should follow figma design.

https://github.com/user-attachments/assets/b228ebe8-ab12-41ba-8d12-c98ebb598711

https://github.com/user-attachments/assets/b65b6db1-9bb6-4f53-9959-45a6d348aee2