Implement the Success Component design

Feature Description

Implement the design for the Success Component - this is essentially just a message with a “Learn more” link.

• Design Doc: https://docs.google.com/document/d/1DeWo38lcV7lvLFfcmt-mQ0iaxzB4qfiPArs_yZzYkIM/edit#heading=h.3ufiycwdh8xj
• Figma: https://www.figma.com/file/vMaCWwr6lpk4PrJWb7jIpz/GA4-Banner-Input?node-id=1082%3A1553

---

Acceptance criteria

• The placeholder version of the Success Component (see #5270) should be replaced with the fully realised design. For reference, see Figma.
• Display the following text:
  • Title: You successfully set up your Google Analytics 4 property
  • Subtitle: GA4 is collecting data for your site. You’ll only see Universal Analytics data on your dashboard for now.
  • Learn more link:
    • Text: Learn more about GA4
    • Link URL: {proxy}/support/?doc=ga4
      • Note, this should be the URL returned by select( CORE_SITE ).getDocumentationLinkURL( 'ga4' ).

Implementation Brief

• In assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SuccessBanner.js (being created in #5270):
  • Locate the BannerNotification component. Within this component, add/update the following props:
    • title: You successfully set up your Google Analytics 4 property (translatable).
    • description: GA4 is collecting data for your site. You’ll only see Universal Analytics data on your dashboard for now. (translatable).
    • WinImageSVG: should contain the SuccessGreenSVG svg component.
    • dismiss: OK, Got it! (translatable).
    • format: smaller.
    • type: win-success.
    • learnMoreLabel: Learn more about GA4 (translatable).
    • learnMoreURL: Result of select( CORE_SITE ).getDocumentationLinkURL( 'ga4' )

Test Coverage

• Verify the storybook story for this step.
• Update VRT images if required.

QA Brief

• Visit Storybook and Check the ActivationBanner.
• In the story, newly added graphics and learn more link should appear.
• The learn more link should point to the one defined in the AC.

Changelog entry

• Implement the design for the Success component from the Analytics-4 module.

[techanvil]

@nfmohit this IB looks good, the component path will likely need updating - see https://github.com/google/site-kit-wp/issues/5270#issuecomment-1196522807 - that aside this looks good to go!

The updated path will probably be: assets/js/modules/analytics-4/components/dashboard/ActivationBanner/Success.js

[kuasha420]

@mohitwp looks like the stories were restructured the same time this was being worked on to be more separate on https://github.com/google/site-kit-wp/pull/5645/files and @nfmohit worked on it. I’ll create a follow up PR to add now missing Success Component story and update the QAB accordingly. Cheers.