Creation of Subtle Notification component for Existing Google for WooCommerce Ads Users

[10upsimon]

Feature Description

For users who have WooCommerce and Google for WooCommerce active and who already have an Ads account linked via Google for WooCommerce, a more subtle notification should be shown as opposed to the full Ads Module Setup CTA Banner. This is given the fact that there is - generally speaking - little to no value for the user to set up Ads in Site Kit as well.

The user will, however, still have the option of continuing to set up Ads in Site Kit should they still wish to, the CTA will simply be a little less bold and prominent than the Ads Module Setup CTA Banner.

To achieve this, a new notice subtle component that utilises the subtle notification style should be created within the Ads code space. The existing <SubtleNotification> can and should be used to support this new notice component. Said new subtle notification component should replace the contents of the Ads Module Setup CTA Banner when the following scenario is encountered:

• Scenario 03 - WooCommerce & Google for WooCommerce are active and an Ads account has been detected as linked via Google for WooCommerce

Figma designs can be found here.

---

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

Acceptance criteria

• A new subtle notification component is created for users who have WooCommerce and Google for WooCommerce active and who already have an Ads account linked via Google for WooCommerce
• The notification shows instead of the Ads Module Setup CTA Banner component (see Updates to the Ads Module Setup CTA Banner for WooCommerce Redirect #10175) when the above condition is true
• The notification appears as per the Figma design
• The notification contains 2 CTA's
  • A primary CTA for allowing the user to continue Ads module set up via Site Kit
  • A secondary CTA that dismisses the banner
• Said notification should only surface when adsPax feature flag is enabled

Implementation Brief

• Add assets/js/modules/ads/components/notifications/AccountLinkedViaGoogleForWooCommerceSubtleNotification.js for creation of a new <AccountLinkedViaGoogleForWooCommerceSubtleNotification> notification component.
  • You can check assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification.js for an example
  • It should accept id and Notification props, leveraging the new Notifications API infrastructure
  • Wrap the output with Notification component
  • Use SubtleNotification component for layout (notifications/components/layout/SubtleNotification)
    • Include star-fill.svg SVG icon and pass it as icon prop
    • Include content as description prop
    • Add primary CTA Create new account as additionalCTA prop, passing CTALinkSubtle component to build the button
    • Add No, thanks secondary CTA as dismissCTA prop and pass the Dismiss component to build the dismiss CTA. This will handle the dismissal logic in the background as well.
  • Clicking the primary CTA, should start the Ads module setup. In the callback you can use useActivateModuleCallback hook with ads passed as parameter
• In assets/js/modules/ads/index.js
  • Register AccountLinkedViaGoogleForWooCommerceSubtleNotification notification under registerNotifications function, together with other notification, and you can use default 10 priority here as well
  • Use NOTIFICATION_AREAS.BANNERS_BELOW_NAV for areaSlug
  • Use VIEW_CONTEXT_MAIN_DASHBOARD for viewContexts
  • In checkRequirements, the notification should show if following selectors added in Create New Ads Module Datastore Partial for Plugin Detection Selectors #10170 are all true:
    • isWooCommerceActive
    • isGoogleForWooCommerceActive
    • and isGoogleForWooCommerceAdsAccountLinked
  • Include isDismissible property with value of true
  • Include featureFlag property with value of adsPax
• Apply needed style changes (like background color, and CTA background color and color, etc) in assets/sass/components/ads/_googlesitekit-account-linked-via-google-for-woocommerce-subtle-notification.scss

Test Coverage

• Add test coverage for the AccountLinkedViaGoogleForWooCommerceSubtleNotification component
• Add VRT coverage for the AccountLinkedViaGoogleForWooCommerceSubtleNotification component

QA Brief

Changelog entry

[zutigrm]

Thanks @10upsimon , I did small updated on the sentence around replacing the content of setup CTA for clarification

AC ✅

[10upsimon]

@zutigrm made some minor tweaks to location, file and component name, but aside from that LGTM, moving to EB ✅