Scaffold GA4 Activation Banner "happy path" UI

Feature Description

Create stubs for the Controller Component and each of the top-level presentational components:

• Reminder Component.
• Setup Component.
• Success Component.

Prepare the basic local state and logic for stepping through these components, i.e. press the Reminder Component CTA to show the Setup Component, and the Setup Component CTA to show the Success Component.

Use a regular Button on the Setup Component, this can be swapped out for the Button with Spinner when it’s ready.

Render the component at the top of the Dashboard when the ga4ActivationBanner feature flag is enabled.

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

---

Acceptance criteria

• The GA4 Activation Banner should be scaffolded and displayed on the Dashboard when the ga4ActivationBanner feature flag is enabled.
• Stubs should be created for each top-level component:
  • Reminder Component.
  • Setup Component.
  • Success Component.
• Only one of these components will be shown at a time and they will be stepped through in the order listed, with the Reminder Component being displayed first.
• Each component should display some placeholder text which will be replaced in subsequent issues.
• The Reminder and Setup components should each display a standard button. Pressing a button should advance to the next stage.

Implementation Brief

• In assets/js/modules/analytics-4/components, create a new folder - dashboard and another folder ActivationBanner inside of it.
• Within assets/js/modules/analytics-4/components/dashboard/ActivationBanner, create a new functional component ActivationBanner (index.js).
• Create 3 additional functional components: ReminderBanner, SetupBanner and SuccessBanner. Each of these should:
  • Render the BannerNotification component with the following props:
    • id = ga4-activation-banner
    • title and ctaLabel = could simply be placeholder text or use the Figma designs for the eventual titles and CTA button that each component will display.
    • onCTAClick should be the setStep method prop passed down in the next step from ActivationBanner.
• Within ActivationBanner, use a local state variable, say step to render one of the above three components. Pass the setStep method down to Reminder and Setup so they can change step to the next step.
• Within BannerNotifications:
  • After the ZeroDataStateNotifications, render ActivationBanner if the ga4ActivationBanner flag is enabled.
• Add a StoryBook v6 story for the ActivationBanner component (with all three steps).

Test Coverage

• No new tests needed.

QA Brief

• WIth the ga4ActivationBanner flag enabled, verify the new banner appears and can be stepped through as in the ACs.
• Verify the new storybook story as well under Modules/Analytics4.
• To retest the banner, clear the Application / Browser storage and refresh the dashboard/storybook story.

Changelog entry

• N/A

[techanvil]

Hey @jimmymadon, the IB is looking good. I do have a suggestion regarding the main folder/component name.

Taking a look at our existing folder structure, the suggested components/activation-banner would be slightly out of keeping with existing conventions.

To illustrate here’s the output of find $( find assets/js/modules -name components ) -type d:

assets/js/modules/tagmanager/components
assets/js/modules/tagmanager/components/setup
assets/js/modules/tagmanager/components/common
assets/js/modules/tagmanager/components/settings
assets/js/modules/pagespeed-insights/components
assets/js/modules/pagespeed-insights/components/settings
assets/js/modules/pagespeed-insights/components/dashboard
assets/js/modules/pagespeed-insights/components/common
assets/js/modules/analytics/components
assets/js/modules/analytics/components/common
assets/js/modules/analytics/components/common/AccountCreate
assets/js/modules/analytics/components/settings
assets/js/modules/analytics/components/dashboard
assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidget
assets/js/modules/analytics/components/setup
assets/js/modules/analytics/components/module
assets/js/modules/analytics/components/module/ModulePopularPagesWidget
assets/js/modules/idea-hub/components
assets/js/modules/idea-hub/components/settings
assets/js/modules/idea-hub/components/common
assets/js/modules/idea-hub/components/setup
assets/js/modules/idea-hub/components/dashboard
assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget
assets/js/modules/analytics-4/components
assets/js/modules/analytics-4/components/settings
assets/js/modules/analytics-4/components/setup
assets/js/modules/analytics-4/components/common
assets/js/modules/adsense/components
assets/js/modules/adsense/components/module
assets/js/modules/adsense/components/module/ModuleOverviewWidget
assets/js/modules/adsense/components/settings
assets/js/modules/adsense/components/dashboard
assets/js/modules/adsense/components/common
assets/js/modules/adsense/components/common/AdSenseConnectCTA
assets/js/modules/adsense/components/setup
assets/js/modules/adsense/components/setup/v2
assets/js/modules/adsense/components/setup/v2/common
assets/js/modules/adsense/components/setup/v2/SetupAccountSite
assets/js/modules/optimize/components
assets/js/modules/optimize/components/settings
assets/js/modules/optimize/components/setup
assets/js/modules/optimize/components/common
assets/js/modules/thank-with-google/components
assets/js/modules/thank-with-google/components/settings
assets/js/modules/thank-with-google/components/common
assets/js/modules/thank-with-google/components/setup
assets/js/modules/search-console/components
assets/js/modules/search-console/components/settings
assets/js/modules/search-console/components/dashboard
assets/js/modules/search-console/components/dashboard/SearchFunnelWidget
assets/js/modules/search-console/components/common

Bearing in mind the banner is only going to be displayed on the dashboard, I think it would be appropriate to place it under assets/js/modules/analytics-4/components/dashboard (can always move to common if it becomes shared). Also consider how the component will be imported - we should stick with the camel case name for the folder, and I don’t think we need the Main suffix. With all this in mind I’d suggest simply calling the component ActivationBanner, sitting in assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js.

Please see what you think. Other than that, this looks good to go! 😃

[wpdarren]

QA Update: ✅

Verified:

• The GA4 Activation Banner is displayed on the Dashboard when the ga4ActivationBanner feature flag is enabled. Stubs should be created for each top-level component:

  • Reminder Component.
  • Setup Component.
  • Success Component.

• Only one of these components is shown at a time and they are step through in the order listed, with the Reminder Component being displayed first.

• Each component displays placeholder text.

• The Reminder and Setup components each display a standard button. Pressing a button takes me to the next stage.

• Verified the new storybook story under Modules/Analytics4.

Screenshots