Add the “New” badges to the Selection Panel

[techanvil]

Feature Description

Add the "New" badge to new audiences in the Selection Panel.

See selection panel, audience creation > "New" badges", and "New" badges in the design doc.

---

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

Acceptance criteria

• This behaviour applies to audiences that were created after the initial setup for the current user. The initial selection of audiences should not have "New" badges applied.
  • When an audience is initially created, it should have a “New” badge shown next to the audience title in the Selection Panel.
  • The badge should be shown to a user for 28 days from the first time the badge is viewed.
  • This applies both to audiences created by Site Kit, and those added directly in Analytics.
  • The badge should be displayed as per the Figma design.

Implementation Brief

Note: This should make use of the "expirable items" API introduced via #8168.

• [ ] Update assets/js/components/SelectionPanel/SelectionPanelItem.js:
  • [ ] Check if the badge has been seen by the user yet using the hasExpirableItem selector, passing the audience-selection-panel-expirable-new-badge-${slug} as the expirable item slug.
    • [ ] Check if the new badge has expired using isExpirableItemActive selector, passing the audience-selection-panel-expirable-new-badge-${slug} as the expirable item slug.
    • [ ] Render a NewBadge component in the widget header if the badge has not been seen by the user before, or it has not yet expired.
    • [ ] Create a useEffect in this component which calls the setExpirableItemTimers action, only if the user has never seen New badge before, and the title is not either of the pre-defined audiences , with the following object:

      {
       `audience-selection-panel-expirable-new-badge-${slug}`: WEEK_IN_SECONDS * 4
      }

      Importing WEEK_IN_SECONDS from assets/js/util/index.js

• [ ] Update assets/js/modules/analytics-4/datastore/audiences.js, once the configuredAudiences are successfully saved, dispatch an setExpirableItemTimers action for every configuredAudiences using the slug, and passing a value of 0, which will expire these items immediately. This prevents new badges from being shown for all audiences immediately after user setup.
  • [ ] Ensure that badges are dismissed, as above, for secondary users. See the implementation of #8130 for where configuredAudiences is saved for the secondary user setup.

Test Coverage

• Update Storybook to include a case with a new badge present for an audience.

QA Brief

Changelog entry

[tofumatt]

Looks like this is also blocked by a tile like #8136 being implemented, because adding a relatively concrete IB here isn't possible until those components are implemented so we know where they'll go. I looked through all of the issues to see if anything was moved along enough to add a good IB here but not yet, so I've added #8136 as another blocker to making the IB 🤔

[techanvil]

Hey @benbowler, while reviewing the IB here I've realised I left an important detail out of the AC.

The "New" badges should only appear for audiences which have been created subsequent to the initial setup for the current user.

The implication is we should expire the corresponding "New" badge items for the list of audiences in configuredAudiences once they have been successfully saved in the enableAudienceGroup() action

It further implies we should do the same thing once configuredAudiences has been saved as part of the setup for a secondary user. This is being specced in https://github.com/google/site-kit-wp/issues/8130, as a result I've added that issue as a dependency for this one.

Apologies for the lack of clarity in the AC. I've amended it accordingly - please take a look.

Further to the above, here are a couple of additional points for this IB:

• The following point can be removed, as we do want to display a "New" badge for these audiences if a user has created them via the CTA in the Selection Panel. Also, please note as a general point, and as per my comment on #8160, we don't want to be identifying these audiences via a string comparison of their displayName as the display name is mutable.

  • [ ] Also, prevent the badge from being rendered if the the title is either of the pre-defined audiences "All visitors" or "Returning visitors" using simple string comparison.

• A trivial one, but I'd consider a slight simplification of the expirable item ID. Rather than audience-selector-new-audience-expirable-new-badge-${slug} which contains "new" twice, the repetition of which feels somewhat redundant, how about audience-selection-panel-expirable-new-badge-${slug}?

[techanvil]

Thanks @benbowler. The IB LGTM :white_check_mark:

Please note, I made a small tweak to remove the reference to enableAudienceGroup() for the secondary users aspect, as I don't think we will end up using this action for secondary users, rather we'll extract part of it to a new action and use that.