site-kit-wp: Ad Blocking Recovery Setup page appears broken and confusing when user visits the page after completing setup

Bug Description

As observed and described by @aaemnnosttv,

If an user navigates back after completing the setup, or otherwise directly navigates to the ABR setup screen after set up is complete, the interface appears somewhat broken because there is no action to go forward or status. Perhaps most significantly is that clicking Cancel at this point will actually reset/deactivate/undo the feature’s set up.

Screenshots

Steps to reproduce

1. Go back after setting up Ad Blocking Recovery.
2. Or, visit /wp-admin/admin.php?page=googlesitekit-ad-blocking-recovery

---

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

Acceptance criteria

• If the Ad Blocking Recovery Setup page is directly navigated to or returned to via the browser’s back button after the setup is complete, it should display the state which is mocked up here:

• Both of the steps should be marked as complete, i.e. they should display the tick in the circle as per the mockup.
• The styling of the text should follow that in the existing Step 2 - After CTA Click view.
• The CTAs in the footer should have the same behaviour as the same CTAs in the Step 2 - After CTA Click view:
  • The primary My message is ready CTA should return to the dashboard, showing the ad_blocking_recovery_setup_success notification.
  • The Create message link should open the AdSense Ad Blocking Recovery page in a new tab i.e. https://www.google.com/adsense/new/u/0/pub-XXXXX/privacymessaging/ad_blocking?pli=1, where pub-XXXXX is the AdSense account ID.

Implementation Brief

• When setup confirmed status is set from stepper, right before redirection, the Stepper component will skip the current steps when navigating back/revisiting the page. So the two paragraphs from last step should be extracted.
• In the SetupMain component.
  • Extract the paragraphs https://github.com/google/site-kit-wp/blob/a3d2a7dc124edb9faf692ae008183095862fd566/assets/js/modules/adsense/components/setup/AdBlockingRecoveryApp/steps/CreateMessageStep.js#L143-L154 to bellow the Stepper component. They should render if step is ENUM_AD_BLOCKING_RECOVERY_SETUP_STATUS.SETUP_CONFIRMED. You can wrap them within custom div wrapper to apply any additional styling if needed (which can be added in assets/sass/components/adsense/_googlesitekit-adsense-ad-blocking-recovery.scss).
  • In the footer of the component (eg. .googlesitekit-ad-blocking-recovery__footer), add:
    1. Primary CTA "My message is ready" (should replace the “cancel” link, eg. be the first element)
    2. Tertiary CTA "Create my message" next to it, mimicing the screenshot from AC
    • As a onClick callback for the “My message is ready” button, navigate to the setup success page https://github.com/google/site-kit-wp/blob/a3d2a7dc124edb9faf692ae008183095862fd566/assets/js/modules/adsense/components/setup/AdBlockingRecoveryApp/steps/CreateMessageStep.js#L62-L64
    • For the “Create my message” button, navigate to the privacy url https://github.com/google/site-kit-wp/blob/8816c89e542ca91e8ce05076cb4aa44a3f8d11fc/assets/js/modules/adsense/components/setup/AdBlockingRecoveryApp/steps/CreateMessageStep.js#L54-L58

Test Coverage

• Remove the test for the cancel link click for the final step.
• Fix all other tests for the final step.
• Add a story/VRT test for the “completed” state

QA Brief

Changelog entry