Create the Ad blocking recovery main notification component

[kuasha420]

Feature Description

A new component that displays the main notification of Ad Blocker Detection should be created according to the Figma design. This component will later be rendered when appropriate using the Widgets API in the Monetization section of Site Kit's main dashboard.

---

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

Acceptance criteria

• A new component that displays the main notification of Ad Blocking Recovery should be created based on the Figma design.
• The layout, graphics, typography and CTA buttons should match the design.
• Clicking on the primary CTA should navigate user to the googlesitekit-ad-blocking-recovery page.
• Clicking on secondary CTA should permanently dismiss it.
• Note that this issue is only about creating the component, it will be placed on the dashboard in Display Ad Blocking Recovery Notification in the dashboard when all the conditions are met #6953

Implementation Brief

• Create AdBlockingRecoveryNotification component in assets/js/modules/adsense/components/dashboard.
  • Create the layout defined in the design using the Grid, Row. and Column layout components.
  • Save the graphics from Figma in assets/svg folder and use it.
  • Use SpinnerButton for the primary CTA.
    • Use navigateTo selector from CORE_LOCATION to navigate user to the defined page in the AC.
  • Use a regular text Button for the secondary CTA.
    • Use dismissed-items to permanently dismiss the notification component when pressed.
  • Create assets/sass/components/dashboard/googlesitekit-ad-blocking-recovery-notification.scss and add any component style here based on Figma.
    • Styles include but not limited to: margin, padding, typography etc.
    • Include it in the assets/sass/admin.scss
• Since there is no design available for mobile view, follow the prior arts on Success Notification and elsewhere. Namely,
  • Hide the graphics.
  • Put the disclaimer text under the CTA buttons.
• Add story for the component.

Test Coverage

• Not needed.

QA Brief

• Set up the site and enable the adBlockerDetection feature flag.
• Activate the adsense module.
• Go to the dashboard and scroll down to the monetization section.
• Ensure that you see the widget with the Ad Blocker Recovery notification.
• Click on the Set up now button and verify that you get redirected to the new ad blocker recovery page.
• Go back to the dashboard and find the widget again.
• Now click on the Maybe later link and ensure that the widget is dismissed now.

Changelog entry

• Add Ad Blocking Recovery set up CTA to the Monetization section of the dashboard.

[tofumatt]

ACs here are good 👍🏻

[eugene-manuilov]

IB ✔️

[eugene-manuilov]

@marrrmarrr @aaemnnosttv the banner contains the Learn More link in the description. Which URL should we use for that link?

[kuasha420]

@eugene-manuilov It should point https://support.google.com/adsense/answer/11576589 with correct locale as seen in Figma. Cheers.

[wpdarren]

QA Update: ⚠️

@eugene-manuilov I have noticed a few differences between the figma designs and test site.

1. Space between the asterix and text.

Screenshots

2. Font colour difference.

Screenshot

Figma says it should be #6C726E admittedly, the colour on the plugin is easier to read, but thought I'd flag it.

4. In the IB it mentions:

Use SpinnerButton for the primary CTA

I didn't see any spinning animation on the button when I clicked it.

adb.mp4

5. I know it doesn't mention dimensions should be the same as figma in the AC, but I noticed a few differences.

The height of the notification component.

Screenshot

The width/height of the SVG.

Screenshot

Interested in your thoughts.

[eugene-manuilov]

Thanks, @wpdarren. I have created a new PR that adjusts issues 1, 2 and partially 5. The 4th is not an issue because the spinner button isn't really needed there because that button is just a link. Once my PR is reviewed, I'll assign this ticket back to you.

[wpdarren]

QA Update: ✅

Verified:

• With the adBlockerDetection feature flag enabled and AdSense setup.
  • The widget with the Ad Blocker Recovery notification appears.
  • When clicking on the Set up now button and you are redirected to the new ad blocker recovery page.
  • When clicking on the Maybe later link the widget is dismissed.

The issues reported above are all fixed.