Implement the Reminder Component design

Feature Description

Implement the design for the Reminder Component in its three variants:

• Initial notice (displayed once a month until June 2023).

• Last month (displayed once every other day during the month of June 2023).

• Post-cutoff (displayed once every other day post-June 2023).

• Design Doc: https://docs.google.com/document/d/1DeWo38lcV7lvLFfcmt-mQ0iaxzB4qfiPArs_yZzYkIM/edit#heading=h.6f4wwpmmyb7h

• Figma: https://www.figma.com/file/vMaCWwr6lpk4PrJWb7jIpz/GA4-Banner-Input?node-id=1082%3A1526

---

Acceptance criteria

• The placeholder version of the Reminder Component (see #5270) should be replaced with the fully realised design, for each of its variants. For reference, see Figma.
• For all variants display the following:
  • Secondary pane text:
    • Full cross-device and cross-platform reporting
    • Set up advanced conversion tracking, e.g. when visitors submit a form or add an item to cart
    • Get detailed insights on how users navigate your site
  • Learn more link:
    • Text: Learn more about GA4
    • Link URL: https://site-kit-dev.appspot.com/documentation/using-site-kit/ga4/
• For each variant display text as follows.
  • Initial notice:
    • Title: Set up Google Analytics 4 now to join the future of Analytics
    • Subtitle: Your current Universal Analytics will stop recording stats on July 1st, 2023
  • Last month:
    • Title: You only have X more days to setup Google Analytics 4 (where X is the number of days until July 1st 2023).
  • Post-cutoff:
    • Title: Your current Universal Analytics stopped recording stats on July 1st, 2023
    • Subtitle: Set up Google Analytics 4 now to resume recording stats
• Ensure icons are displayed as per the design.
• Ensure the responsive design is implemented.

Implementation Brief

In assets/js/components/notifications/BannerNotification/index.js:

• Add an optional secondaryPane prop of type PropTypes.node.
• If secondaryPane is provided, render the entire component within a new Grid-Row-Cell in the root <section> container. Convert the <section> to be a flex container and the Grids inside to have flex: 1 1 0px; to make them of equal width. Change flex-direction to column for mobile as per the Figma mock.

In assets/js/modules/analytics-4/components/dashboard/ActivationBanner/ReminderBanner.js:

• Create and style the “Secondary Pane” component as per the AC/Figma mock (with both the Secondary Pane text and Learn More link). Pass this component to the new secondaryPane prop in BannerNotification. Note: We cannot use the default “Learn More” link props of BannerNotification because this will create a link within the main banner and not in the secondary pane.
• Compute the date and switch the title and description (if there is a subtitle) props passed to the BannerNotification component as per the ACs.

Make any styling updates needed.

• BannerNotification styles can be found in assets/sass/components/global/_googlesitekit-publisher-wins.scss
• Consider adding/using assets/sass/components/activation/_googlesitekit-ga4-activation-banner.scss for styling the Secondary Pane component.

Storybook

• Create storybook variations for each of the three reminder components.

Test Coverage

• Tests could be written for ReminderBanner.js to verify the correct title/description of components based on the date.

QA Brief

• Verify the new StoryBook stories for the ReminderBanner.
• QA this similar to #5272 by changing date and verifying the appropriate Banner title, description and description icon (little image next to the description). All colours and font-sizes have been kept in line with the new design and are standard for other Banner Notifications. However, verify the layout displays as per the figma mocks on all screen sizes.

Changelog entry

• Add a GA4 upgrade reminder notification for users who have not connected Google Analytics 4.

[jimmymadon]

@wpdarren This is actually a regression from another issue where some code was renamed but that change was left out from the StoryBook file.

I’ve just created a follow up PR branch for this - just a one word fix. @tofumatt - have assigned this to you as it is a very trivial merge and you CR’d this originally and many MRs are off today. 😄

[wpdarren]

QA Update: ✅

Verified:

• The Reminder Component has a fully realised design, for each of its variants as per the AC.
• The icons are displayed as per the design.
• The different notifications have a responsive design implemented.
• Confirmed that the Stories are displaying as per the Figma and ACs

Screenshots