Only show one of the Consent Mode and Audience Segmentation Setup CTA Banners at a time.

[techanvil]

Feature Description

The initial integration of the Audience Segmentation Setup CTA Banner doesn't account for the fact the Consent Mode Setup CTA Banner may be shown at the same time.

We should ensure that only one of these banners is shown at a time. If they are both eligible to be displayed, the Consent Mode banner should take precedence.

---

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

Acceptance criteria

• Only one of the Consent Mode and Audience Segmentation Setup CTA Banners should be displayed at a time.
• If they are both eligible to be displayed, the Consent Mode banner should take precedence.

Implementation Brief

Note that as per this comment, we should refactor the relevant components to avoid duplication of the inlined widget context and area structures.

• Create a component SetupCTAWidget inside assets/js/components/setup/
• As most of the elements for rendering across AudienceSegmentationSetupCTAWidget and ConsentModeSetupCTAWidget is same, extract the SetupCTAWidget component which will render the common markup.
  • SetupCTAWidget should accept the prop like title, description, handleCTAClick, handleDismiss, SVGItemComponent and setupSlug.
    • title would be the title for the setup CTA widget.
    • description would be the description for the widget.
    • handleCTAClick callback when the CTA is clicked.
    • handleDismiss callback when the banner is dismissed.
    • SVGItemComponent component to render the SVG element. It can be wrapped up inside Cell component as both ConsentModeSetupCTAWidget and AudienceSegmentationSetupCTAWidget renders it within Cell.
    • setupSlug can be audience-segmentation or consent-mode. This is useful to keep the css classes intact. We can use this prop where classes like googlesitekit-audience-segmentation-setup-cta-widget or googlesitekit-consent-mode-setup-cta-widget are being used, so that we can insert like googlesitekit-${setupSlug}-setup-cta-widget.
• Extracted component can manage some local states inside it like isSaving and saveError.
• AudienceSegmentationSetupCTAWidget and ConsentModeSetupCTAWidget components can reuse the extracted component and pass the relevant props to it.
• Add a selector displayConsentModeSetupWidget in consent-mode data store. Condition to display the widget can be found in ConsentModeSetupCTAWidget component here.
• In DashboardMainApp, check if the consent mode setup widget can be display using the selector. If it can be displayed, do not render AudienceSegmentationSetupCTAWidget, else it should be rendered.

Test Coverage

• Add the storybook test for the extracted component.
• Add test for the new selector added in consent mode data store.
• Fix/update any failing VRT tests.

QA Brief

Changelog entry

[ivonac4]

@ankitrox could you please add the estimate to this ticket? That should be included when submitting to IBR, so the reviewer can review the estimate as well. Thank you!

[ankitrox]

Added the estimate in the ticket.