Implement the Selection Panel Info Notice

[techanvil]

Feature Description

Implement the info notice will be displayed when the Selection Panel is opened with only one item selected.

See audiences creation > info notice in the design doc.

---

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

Acceptance criteria

• If there is only one audience currently selected, when the Selection Panel is opened it will display a dismissible info notice encouraging the user to add another audience to the selection.
• This should be implemented as per the Figma design.
• It will have a Got it button for dismissing the notice. Clicking the button will permanently dismiss the notice and it will not be shown again to the current user.

Implementation Brief

Note: It could be worth taking a look at the Info Notice component to see if can be refactored for reuse. See #8137.

• Once Add and hook up the Change groups CTA, integrating the Selection Panel and its core happy path functionality #8158 and Add the Selection Panel happy path view (Storybook) #8157 are merged.

In assets/js/modules/analytics-4/components/dashboard/AudienceSegmentation/InfoNotice.js:

• Add a new id prop to the InfoNotice component.
• Add a new infoIcon prop to the InfoNotice component.
• Add the id to the div element.
• Render the infoIcon prop if it is provided. Otherwise, render the LightbulbIcon component.

In the selection panel component, which is being implemented in #8157:

• Get the selected/configured audiences using the getConfiguredAudiences selector.
• Get the InfoNotice dismissible state using the isItemDismissed selector using an appropriate id value.
• If only one audience AND the InfoNotice is not dismissed, render the AudienceSegmentation/InfoNotice component.
• Pass an appropriate id value to the InfoNotice component.
• Extract the info icon from the Figma design and pass it as the infoIcon prop to the InfoNotice component.
• Pass Got it as the dismissLabel prop.
• Pass a callback function to the onDismiss prop that dismisses the InfoNotice using the dismissItem action.
• Pass the below text to the content prop:

  By adding another group to your dashboard, you will be able to compare them and understand which content brings back users from each group
  

• Preferably, create a new component for the selection panel info notice and use it in the selection panel component to keep the code clean and maintainable.

Test Coverage

• In case of a new component, create a new storybook file for it.
• Add a story to the selection panel storybook to show the info notice when only one audience is selected.
• Add a new story to the AudienceSegmentation/InfoNotice storybook to include the new infoIcon prop.

QA Brief

Changelog entry

[eugene-manuilov]

IB ✔️